/* ========================================================= DIRECTORY GOO — BROWSE LOCATIONS V1 Responsive UI refinement Desktop / Tablet / Mobile ========================================================= */ /* --------------------------------------------------------- LOCATION CARDS — BASE --------------------------------------------------------- */ .featured-location { position: relative; min-height: 52px; background: #fff !important; border: 1px solid #dfe8e2 !important; border-radius: 9px !important; overflow: hidden; box-shadow: 0 3px 10px rgba(20, 55, 38, .045), 0 1px 2px rgba(20, 55, 38, .03); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } /* --------------------------------------------------------- LOCATION LEFT SIDE --------------------------------------------------------- */ .featured-location > div:first-child { display: flex; align-items: center; min-width: 0; flex: 1; padding-right: 12px; } /* Location icon */ .featured-location img[alt="locatorIcon"] { width: 20px !important; height: 20px !important; flex: 0 0 20px; object-fit: contain; margin-left: 16px !important; margin-right: 9px !important; } /* Location name */ .featured-location .location { display: block !important; min-width: 0; color: #4f6258 !important; font-size: 14px !important; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; } /* --------------------------------------------------------- LISTING COUNT --------------------------------------------------------- */ .featured-location .view { align-self: stretch; width: 64px !important; min-width: 64px; display: flex; align-items: center; justify-content: center; padding: 0 12px !important; background: var(--color-leaf, #2f8f46) !important; color: #fff !important; font-size: 13px !important; font-weight: 600; border-left: 1px solid rgba(0, 0, 0, .02); transition: background-color .2s ease, color .2s ease; } /* --------------------------------------------------------- DESKTOP HOVER --------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { a:hover > .featured-location { transform: translateY(-2px); border-color: rgba(47, 143, 70, .32) !important; box-shadow: 0 8px 20px rgba(20, 55, 38, .085), 0 2px 5px rgba(20, 55, 38, .04); } a:hover > .featured-location .view { background: #27843e !important; } } /* --------------------------------------------------------- VIEW ALL LOCATIONS BUTTON The location row is immediately followed by the existing col-sm-12 View All container. --------------------------------------------------------- */ .featured-location { --locations-button-green: var(--color-leaf, #2f8f46); } /* Scope the button through :has() so other homepage View All buttons remain untouched. */ .row:has(.featured-location) > .col-sm-12 .view-all-btn { min-width: 190px; padding: 12px 28px !important; background: var(--color-leaf, #2f8f46) !important; border: 1px solid var(--color-leaf, #2f8f46) !important; border-radius: 7px !important; color: #fff !important; font-size: 14px; font-weight: 600; box-shadow: 0 5px 14px rgba(47, 143, 70, .16); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } /* Add arrow without changing React */ .row:has(.featured-location) > .col-sm-12 .view-all-btn::after { content: " →"; display: inline-block; margin-left: 7px; font-size: 17px; line-height: 1; transition: transform .2s ease; } @media (hover: hover) and (pointer: fine) { .row:has(.featured-location) > .col-sm-12 .view-all-btn:hover { background: #27843e !important; border-color: #27843e !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47, 143, 70, .22); } .row:has(.featured-location) > .col-sm-12 .view-all-btn:hover::after { transform: translateX(3px); } } /* ========================================================= DESKTOP — 1200+ Existing Bootstrap layout remains 3 columns. ========================================================= */ @media (min-width: 1200px) { .row:has(.featured-location) { row-gap: 2px; } .row:has(.featured-location) > a { margin-bottom: 18px !important; } .featured-location { min-height: 54px; } .featured-location .location { font-size: 14px !important; } .featured-location .view { width: 64px !important; min-width: 64px; } .row:has(.featured-location) > .col-sm-12 { padding-top: 10px !important; } } /* ========================================================= TABLET — 768 TO 1199 Preserve Bootstrap 2-column layout. ========================================================= */ @media (min-width: 768px) and (max-width: 1199.98px) { .row:has(.featured-location) { row-gap: 0; } .row:has(.featured-location) > a { margin-bottom: 16px !important; } .featured-location { min-height: 52px; border-radius: 8px !important; } .featured-location img[alt="locatorIcon"] { width: 19px !important; height: 19px !important; flex-basis: 19px; margin-left: 14px !important; margin-right: 8px !important; } .featured-location .location { font-size: 13.5px !important; } .featured-location .view { width: 58px !important; min-width: 58px; font-size: 13px !important; } .row:has(.featured-location) > .col-sm-12 { padding-top: 10px !important; } .row:has(.featured-location) > .col-sm-12 .view-all-btn { min-width: 180px; padding: 11px 25px !important; } } /* ========================================================= MOBILE — BELOW 768 Full-width stacked location cards. ========================================================= */ @media (max-width: 767.98px) { .row:has(.featured-location) { display: flex !important; flex-wrap: wrap !important; margin-left: -6px; margin-right: -6px; } .row:has(.featured-location) > a { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 11px !important; } .featured-location { width: 100%; min-height: 50px; border-radius: 8px !important; box-shadow: 0 3px 9px rgba(20, 55, 38, .045), 0 1px 2px rgba(20, 55, 38, .025); } .featured-location > div:first-child { padding-right: 8px; } .featured-location img[alt="locatorIcon"] { width: 18px !important; height: 18px !important; flex-basis: 18px; margin-left: 13px !important; margin-right: 8px !important; } .featured-location .location { font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; } .featured-location .view { width: 54px !important; min-width: 54px; padding: 0 8px !important; font-size: 12.5px !important; } .row:has(.featured-location) > .col-sm-12 { padding-top: 10px !important; padding-left: 6px !important; padding-right: 6px !important; } .row:has(.featured-location) > .col-sm-12 .view-all-btn { width: 100%; max-width: 280px; min-width: 0; padding: 11px 22px !important; font-size: 14px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 374.98px) { .featured-location img[alt="locatorIcon"] { margin-left: 11px !important; margin-right: 7px !important; } .featured-location .location { font-size: 12.5px !important; } .featured-location .view { width: 48px !important; min-width: 48px; padding-left: 6px !important; padding-right: 6px !important; font-size: 12px !important; } }