/* ========================================================================== StorageTrail — 2026 listings UI Booking activity bars · property-type tags · hero search · all-listings archive · listing cards · featured carousel ========================================================================== */ /* .stl-filters-panel is in this list because it is moved to on first open — outside .stl-archive it would otherwise lose every token below. */ .stl-archive, .stl-tags-block, .stl-tags-modal, .stl-filters-panel, .stl-search-widget, .stl-booking-bar, .stl-live-activity, .stl-featured-rail, .stl-card { --stl-orange: #F97316; --stl-orange-dark: #EA580C; --stl-orange-soft: #FFF1E6; --stl-navy: #0F2942; --stl-navy-deep: #0A1C2E; --stl-ink: #14283C; --stl-body: #52606D; --stl-line: #E4E9EF; --stl-bg: #FFFFFF; --stl-bg-soft: #F7F9FC; --stl-green: #15803D; --stl-green-soft: #DCFCE7; --stl-radius: 14px; --stl-radius-sm: 10px; --stl-shadow: 0 1px 2px rgba(16, 40, 64, .06), 0 8px 24px rgba(16, 40, 64, .07); --stl-shadow-hover: 0 4px 10px rgba(16, 40, 64, .09), 0 18px 40px rgba(16, 40, 64, .13); box-sizing: border-box; } .stl-archive *, .stl-tags-block *, .stl-tags-modal *, .stl-filters-panel *, .stl-search-widget *, .stl-booking-bar *, .stl-live-activity *, .stl-featured-rail *, .stl-card * { box-sizing: border-box; } /* html is included because some themes scroll the root element, not body — locking body alone lets the page keep scrolling under an open dialog. */ html.stl-no-scroll, body.stl-no-scroll { overflow: hidden; } /* ========================================================================== 1 · RECENT BOOKINGS — DARK TICKER BAR (above the header, desktop only) ========================================================================== */ .stl-booking-bar { display: none; background: var(--stl-navy-deep); color: #E8EEF5; font-size: 12.5px; line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, .07); } @media (min-width: 769px) { .stl-booking-bar { display: block; } } .stl-booking-bar-inner { max-width: 1500px !important; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 22px; justify-content: center; } .stl-booking-bar-headline { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #d8d6d6; white-space: nowrap; flex: 0 0 auto; } .stl-booking-bar-flame { font-size: 13px; } .stl-booking-bar-track { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .stl-booking-bar-track::-webkit-scrollbar { display: none; } .stl-booking-bar-item { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: #E8EEF5; text-decoration: none; position: relative; flex: 0 0 auto; } .stl-booking-bar-item + .stl-booking-bar-item::before { content: ""; position: absolute; left: -13px; top: 50%; width: 1px; height: 16px; transform: translateY(-50%); background: rgba(255, 255, 255, .14); } .stl-booking-bar-item:hover { color: #fff; } .stl-booking-bar-item:hover .stl-booking-bar-text { text-decoration: underline; } .stl-booking-bar-thumb { width: 28px; height: 8; border-radius: 18px; object-fit: cover; flex: 0 0 auto; background: rgba(255, 255, 255, .12); } .stl-booking-bar-text { font-weight: 600; color:#d8d6d6; } .stl-booking-bar-time { color:#d8d6d6; font-weight: 500; } .stl-booking-bar-all { margin-left: auto; flex: 0 0 auto; color: #e87722; font-weight: 700; text-decoration: none; white-space: nowrap; } .stl-booking-bar-all:hover { color: #fff; } /* Optional auto-scrolling variant: [storagetrail_booking_bar scroll="yes"] */ @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { .stl-booking-bar.is-scrolling .stl-booking-bar-track { overflow: hidden; } .stl-booking-bar.is-scrolling .stl-booking-bar-item { animation: stl-ticker 26s linear infinite; } .stl-booking-bar.is-scrolling:hover .stl-booking-bar-item { animation-play-state: paused; } } @keyframes stl-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* ========================================================================== 2 · LIVE ACTIVITY STRIP (light, with space photos — desktop only) ========================================================================== */ .stl-live-activity { display: none; background: linear-gradient(180deg, #F4FBF6 0%, #FFFFFF 100%); border-top: 1px solid var(--stl-line); border-bottom: 1px solid var(--stl-line); } @media (min-width: 769px) { .stl-live-activity { display: block; } } .stl-live-activity-inner { max-width: 1530px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 26px; } .stl-live-activity-head { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .stl-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); } @media (prefers-reduced-motion: no-preference) { .stl-live-dot { animation: stl-pulse 2s ease-out infinite; } } @keyframes stl-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .35); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .stl-live-label { font-size: 12px; font-weight: 800; letter-spacing: .07em; color: var(--stl-green); text-transform: uppercase; white-space: nowrap; } .stl-live-avatars { display: inline-flex; } .stl-live-avatars img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; box-shadow: 0 1px 3px rgba(16, 40, 64, .18); } .stl-live-avatars img:first-child { margin-left: 0; } .stl-live-items { display: flex; align-items: center; gap: 28px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .stl-live-items::-webkit-scrollbar { display: none; } .stl-live-item { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 0 0 auto; position: relative; } .stl-live-item + .stl-live-item::before { content: ""; position: absolute; left: -14px; top: 50%; width: 1px; height: 28px; transform: translateY(-50%); background: var(--stl-line); } #stl-search-tag { padding: 0 20px !important; } .stl-live-item-img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #E9EEF4; flex: 0 0 auto; } .stl-live-item-body { display: flex; flex-direction: column; line-height: 1.35; } .stl-live-item-title { font-size: 13px; font-weight: 700; color: var(--stl-ink); white-space: nowrap; } .stl-live-item:hover .stl-live-item-title { color: var(--stl-orange-dark); } .stl-live-item-loc, .stl-live-item-time { font-size: 11.5px; color: var(--stl-body); white-space: nowrap; } .stl-live-all { margin-left: auto; flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--stl-green); text-decoration: none; white-space: nowrap; } .stl-live-all:hover { text-decoration: underline; } /* ========================================================================== 3 · BROWSE BY PROPERTY TYPE (tag tiles + modal) ========================================================================== */ .stl-tags-block { max-width: 1200px; margin: 34px auto; padding: 0 18px; } .stl-tags-block-title { font-size: clamp(18px, 2.4vw, 18px); font-weight: 800; color: var(--stl-ink); margin: 0 0 16px; text-align:left; } .stl-tags-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; } .stl-tag-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px 14px; background: var(--stl-bg); border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); text-decoration: none; color: var(--stl-ink); cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; font: inherit; } .stl-tag-tile:hover, .stl-tag-tile:focus-visible { transform: translateY(-2px); border-color: #FFCBA4; box-shadow: var(--stl-shadow); color: var(--stl-ink); } .stl-tag-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--stl-orange); } .stl-tag-icon-svg { width: 100%; height: 100%; } .stl-tag-icon-img { width: 32px; height: 32px; object-fit: contain; } .stl-tag-icon-emoji { font-size: 26px; line-height: 1; } .stl-tag-tile-label { font-size: 12.5px; font-weight: 700; line-height: 1.25; } .stl-tag-tile-count { font-size: 11px; color: var(--stl-body); font-weight: 600; } .stl-tag-tile-dots { gap: 4px; } .stl-tag-tile-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--stl-orange); display: inline-block; } @media (max-width: 600px) { .stl-tags-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── Modal z-index sits above the site header/footer and any Bricks popup. The JS moves the element to on open so `position: fixed` cannot be trapped by a transformed/filtered section ancestor — that is what used to let the footer scroll over the top of it. */ .stl-tags-modal { position: fixed; inset: 0; z-index: 2147483000; display: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .stl-tags-modal.is-open { display: block; } .stl-tags-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 35, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; } .stl-tags-modal-panel { position: relative; z-index: 1; max-width: 720px; width: calc(100% - 32px); max-height: 82vh; margin: 8vh auto 8vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 28, 46, .3); display: flex; flex-direction: column; overflow: hidden; } .stl-tags-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--stl-line); } .stl-tags-modal-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--stl-ink); } .stl-tags-modal-close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--stl-body); cursor: pointer; padding: 0 4px; } .stl-tags-modal-close:hover { color: var(--stl-orange-dark); } .stl-tags-modal-body { padding: 18px 20px 22px; overflow-y: auto; } .stl-tags-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } @media (max-width: 480px) { .stl-tags-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stl-tags-modal-panel { margin-top: 5vh; max-height: 88vh; } } @media (max-width: 767px) { span.stl-select-ph { font-size: 16px !important; } /* 16px keeps iOS Safari from zooming the page on focus, and keeps the select matched to the hint overlay above. */ select#stl-search-tag { font-size: 16px !important; } input#stl-search-location { font-size: 16px !important; } label.stl-search-label.filter-label-name { display: none; } label.stl-search-label.filter-label-tags { display: none; } body .stl-search-widget { max-width: 100%; margin: 0; background: #fff; border-radius: 16px; box-shadow: 0 10px 34px rgba(10, 28, 46, .16); padding: 10px; WIDTH: 100%; BOX-SIZING: BORDER-BOX; } .stl-featured-rail-shortcode { max-width: 1500px; margin: 0 auto; padding: 20px !important; } } /* ========================================================================== 4 · HERO SEARCH WIDGET ========================================================================== */ .stl-search-widget { max-width: 1000px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 10px 34px rgba(10, 28, 46, .16); padding: 10px; } .stl-search-widget.stl-search-glass { background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); } .stl-search-fields { display: grid; grid-template-columns: 1.2fr 1.4fr auto; align-items: stretch; gap: 8px; } .stl-search-widget .stl-search-field { display: flex; flex-direction: column; justify-content: center; gap: 0px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid transparent; min-width: 0; position: relative; } .stl-search-field + .stl-search-field::before { content: ""; position: absolute; left: -4px; top: 12px; bottom: 12px; width: 1px; background: var(--stl-line); } .stl-search-widget input[type="text"], .stl-search-widget input[type="date"], .stl-search-widget select{ padding:0 !important; } .stl-search-field:focus-within { border-color: #FFCBA4; background: #FFFDFB; } .stl-search-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #081f3c; } .stl-search-label svg { width: 30px; height: 30px; color: var(--stl-orange); } .stl-search-widget input[type="text"], .stl-search-widget input[type="date"], .stl-search-widget select { border: none; outline: none; background: transparent; font-size: 14.5px; color: var(--stl-ink); padding: 2px 0; width: 100%; min-width: 0; appearance: none; box-shadow: none; height: auto; } .stl-search-widget select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352606D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 16px; padding-right: 22px; } .stl-search-widget input::placeholder { color: #9AA5B1; } .stl-search-submit-wrap { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; padding: 4px; } .stl-search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--stl-orange); color: #fff; border: none; border-radius: 12px; padding: 14px 26px; font-size: 17px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .18s ease, transform .18s ease; font-family: "Manrope", sans-serif !important; } .stl-search-submit:hover { background: var(--stl-orange-dark); transform: translateY(-1px); } .stl-search-note { font-size: 11.5px; color: #7B8794; text-align: center; } @media (max-width: 860px) { .stl-search-fields { grid-template-columns: 1fr; } .stl-search-field + .stl-search-field::before { left: 12px; right: 12px; top: -4px; bottom: auto; width: auto; height: 1px; } .stl-search-widget .stl-search-field { border: 1px solid var(--stl-line); padding: 12px 14px; } .stl-search-submit { width: 100%; padding: 15px 20px; } } /* ========================================================================== 5 · SECTION HEADINGS + CAROUSEL RAILS ========================================================================== */ .stl-featured-rail { margin: 0 0 34px; max-width: 100%; } .stl-featured-rail-shortcode { max-width: 1500px; margin: 0 auto; padding: 0; } .stl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 1px; flex-wrap: wrap; } .stl-section-title { margin: 0; font-size: clamp(18px, 2.4vw, 23px); font-weight: 800; color: var(--stl-ink); } .stl-section-link { font-size: 13.5px; font-weight: 700; color: var(--stl-orange-dark); text-decoration: none; white-space: nowrap; } .stl-section-link:hover { text-decoration: underline; } .stl-rail-shell { position: relative; max-width: 100%; } .stl-rail { --stl-rail-gap: 18px; --stl-rail-cols: 5; /* Flex, not grid: a fixed flex-basis with shrink 0 is what forces the row to overflow (and scroll) instead of squeezing every card into the viewport. */ display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--stl-rail-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 8px; max-width: 100%; /* No visible scrollbar — navigation is the arrows / swipe */ scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .stl-rail::-webkit-scrollbar { display: none; height: 0; width: 0; } .stl-rail > .stl-card { flex: 0 0 calc((100% - (var(--stl-rail-cols) - 1) * var(--stl-rail-gap)) / var(--stl-rail-cols)); max-width: calc((100% - (var(--stl-rail-cols) - 1) * var(--stl-rail-gap)) / var(--stl-rail-cols)); scroll-snap-align: start; } @media (prefers-reduced-motion: reduce) { .stl-rail { scroll-behavior: auto; } } .stl-rail-nav { display: inline-flex; gap: 8px; } .stl-rail-btn, .stl-rail-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--stl-line); background: #fff; color: var(--stl-ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 40, 64, .1); transition: background .18s ease, color .18s ease, opacity .18s ease; } .stl-rail-btn:hover:not(.is-disabled), .stl-rail-arrow:hover:not(.is-disabled) { background: var(--stl-orange); border-color: var(--stl-orange); color: #fff; } .stl-rail-btn.is-disabled, .stl-rail-arrow.is-disabled { opacity: .35; cursor: default; } .stl-rail-arrow { position: absolute; top: 50%; transform: translateY(-50%) !important; z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px; } /* Arrows overlap the outer card edges, as in the reference design */ .stl-rail-prev { left: -14px; } .stl-rail-next { right: -7px; } @media (max-width: 1200px) { .stl-rail { --stl-rail-cols: 3; } } @media (max-width: 900px) { .stl-rail { --stl-rail-cols: 2; } } @media (max-width: 620px) { .stl-rail-arrow { display: none; } .stl-rail { --stl-rail-cols: 1; scroll-snap-type: x proximity; } .stl-rail > .stl-card { flex-basis: 84%; max-width: 84%; } } /* ── Select placeholder overlay: hint text while nothing is chosen. Used by the hero search widget's storage-type select. */ .stl-select-wrap { position: relative; min-width: 0; } .stl-select-ph { position: absolute; left: 12px; right: 34px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 14px; color: #9AA5B1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; text-transform:none !important; } .stl-select-wrap.is-empty .stl-select-ph { display: block; } /* Collapsed field shows the hint, so hide the chosen-nothing label there — options keep an explicit colour so the open list stays readable. */ .stl-select-wrap.is-empty > select { color: transparent; } .stl-select-wrap > select option { color: var(--stl-ink, #14283C); } .stl-select-wrap.is-empty > select:focus { color: var(--stl-ink); } .stl-select-wrap.is-empty > select:focus + .stl-select-ph { display: none; } .stl-search-widget .stl-select-ph { left: 0; right: 22px; } /* ========================================================================== 6 · LISTING CARD Row layout by default (the archive list). Inside a carousel rail the same markup stacks — see the .stl-rail overrides at the end of this section. ========================================================================== */ .stl-card { display: flex; align-items: stretch; background: var(--stl-bg); border: 1px solid var(--stl-line); border-radius: var(--stl-radius); overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .stl-card:hover { border-color: #D7DEE7; box-shadow: var(--stl-shadow-hover); transform: translateY(-1px); } /* ── Media */ .stl-card-media { position: relative; flex: 0 0 292px; min-height: 196px; background: var(--stl-bg-soft); overflow: hidden; } /* Absolute, not in flow: an in-flow would report its intrinsic height as the media box's content height, so a portrait photo stretched the whole row. Taken out of flow, the row's height comes from the body (or min-height). */ .stl-card-media-link { position: absolute; inset: 0; display: block; } .stl-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .stl-card:hover .stl-card-media img { transform: scale(1.04); } .stl-card-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 13px; font-weight: 600; color: #9AA5B1; } /* Availability pill — top-left of the photo */ .stl-card-avail { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: 11.5px; font-weight: 800; letter-spacing: .01em; color: var(--stl-ink); box-shadow: 0 2px 8px rgba(10, 28, 46, .18); } .stl-card-avail.is-open { color: var(--stl-green); } .stl-card-avail.is-low { color: #B45309; } .stl-card-avail.is-soon { color: #1D4ED8; } .stl-card-avail.is-out { color: #9AA5B1; } /* Featured / Instant Book flag — bottom-left of the photo */ .stl-card-flag { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; color: #fff; box-shadow: 0 2px 10px rgba(10, 28, 46, .26); } .stl-card-flag.is-featured-flag { background: var(--stl-orange); } .stl-card-flag.is-instant-flag { background: rgba(15, 41, 66, .92); } /* ── Body */ .stl-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; } .stl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .stl-card-kicker { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--stl-orange); text-decoration: none; } a.stl-card-kicker:hover { color: var(--stl-orange-dark); text-decoration: underline; } .stl-card-save { flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; color: #98A2B0; cursor: pointer; transition: color .16s ease, transform .16s ease; } .stl-card-save svg { width: 21px; height: 21px; } .stl-card-save:hover { color: var(--stl-orange); transform: scale(1.08); } .stl-card-save.is-saved { color: var(--stl-orange); fill: var(--stl-orange); } .stl-card-save.is-saved svg { fill: currentColor; } .stl-card-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--stl-ink); } .stl-card-title a { color: inherit; text-decoration: none; } .stl-card-title a:hover { color: var(--stl-orange-dark); } .stl-card-loc { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--stl-body); } .stl-card-loc svg { width: 15px; height: 15px; flex: none; } .stl-card-specs { margin: 0; font-size: 13px; font-weight: 600; color: #7B8794; } /* ── Secondary tag chips + "+N more" */ .stl-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .stl-card-tag { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--stl-line); border-radius: 999px; background: var(--stl-bg-soft); font-size: 11.5px; font-weight: 700; color: var(--stl-body); text-decoration: none; line-height: 1.6; } .stl-card-tag:hover { border-color: var(--stl-orange); background: var(--stl-orange-soft); color: var(--stl-orange-dark); } .stl-card-tag-more, .stl-single-tag-more { cursor: pointer; border-style: dashed; color: var(--stl-orange-dark); font: inherit; font-size: 11.5px; font-weight: 700; } /* ── Footer: price + CTA */ .stl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; } .stl-card-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 13px; color: var(--stl-body); } .stl-card-price strong { font-size: 21px; font-weight: 800; color: var(--stl-orange); letter-spacing: -.01em; } .stl-card-price-ask { font-size: 15px !important; } .stl-card-per { font-weight: 600; color: #7B8794; } .stl-card-rating { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 12.5px; font-weight: 700; color: var(--stl-ink); } .stl-card-star { color: #F59E0B; } .stl-card-reviews { color: var(--stl-body); font-weight: 600; } .stl-card-cta { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--stl-radius-sm); background: var(--stl-orange); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .16s ease, transform .16s ease; } .stl-card-cta:hover { background: var(--stl-orange-dark); color: #fff; transform: translateY(-1px); } .stl-card-cta.is-disabled { background: #E6EAEF; color: #8A97A5; pointer-events: none; } /* Row variant: price and rating share the left side of the footer */ .stl-card-price-group { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; } /* ========================================================================== 6b · RAIL / FEATURED CARD VARIANT Stacked card: type badge + availability on the photo, heart top-right, price and rating on one line, full-width Book Now. Width stays with `.stl-rail > .stl-card` in section 5 (the per-breakpoint column maths) — this block only owns the shape. ========================================================================== */ .stl-card-rail { flex-direction: column; } .stl-card-rail .stl-card-media { flex: none; width: 100%; min-height: 0; aspect-ratio: 16 / 10; } /* Stacked overlay pills, top-left */ .stl-card-media-tl { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: calc(100% - 54px); /* clear of the heart */ } .stl-card-typebadge { display: inline-block; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: var(--stl-orange); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(10, 28, 46, .22); } .stl-card-typebadge:hover { background: var(--stl-orange-dark); color: #fff; } /* Inside the wrapper the pill is in flow, so drop the absolute placement it carries in the row variant. */ .stl-card-media-tl .stl-card-avail { position: static; top: auto; left: auto; } .stl-card-rail .stl-card-avail.is-open { background: #EAF8EF; color: var(--stl-green); } .stl-card-rail .stl-card-avail.is-low { background: #FEF3E2; color: #B45309; } .stl-card-rail .stl-card-avail.is-soon { background: #EAF0FE; color: #1D4ED8; } .stl-card-rail .stl-card-avail.is-out { background: #F1F4F7; color: #6B7787; } /* Heart moves onto the photo */ .stl-card-rail .stl-card-media .stl-card-save { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; margin: 0; color: #fff; filter: drop-shadow(0 1px 3px rgba(10, 28, 46, .45)); } .stl-card-rail .stl-card-media .stl-card-save:hover { color: var(--stl-orange); } .stl-card-rail .stl-card-media .stl-card-save.is-saved { color: var(--stl-orange); } /* Featured / Instant Book sits bottom-RIGHT here — bottom-left is where the row variant puts it, but on a rail card the availability pill owns the left. */ .stl-card-rail .stl-card-flag { left: auto; right: 10px; bottom: 10px; } .stl-card-rail .stl-card-flag.is-featured-flag { background: rgba(15, 41, 66, .93); } .stl-card-rail .stl-card-body { gap: 5px; padding: 13px 14px 15px; } .stl-card-rail .stl-card-loc { font-size: 12.5px; } .stl-card-rail .stl-card-loc svg { width: 14px; height: 14px; } .stl-card-rail .stl-card-title { font-size: 16px; margin-bottom: 2px; } /* Price left, rating right */ .stl-card-pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 11px; } .stl-card-rail .stl-card-price strong { font-size: 19px; } .stl-card-rail .stl-card-rating { margin-left: 0; } .stl-card-rail .stl-card-cta { margin-top: auto; width: 100%; justify-content: center; padding: 11px 14px; font-size: 13.5px; } /* ========================================================================== 7 · ARCHIVE LAYOUT ========================================================================== */ .stl-archive { max-width: 1180px; margin: 26px auto 60px; padding: 0 20px; } .stl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Search bar row */ .stl-searchbar-row { display: flex; align-items: center; gap: 10px; } .stl-searchbar { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--stl-line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(16, 40, 64, .05); transition: border-color .16s ease, box-shadow .16s ease; } .stl-searchbar:focus-within { border-color: var(--stl-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, .15); } .stl-searchbar-icon { width: 19px; height: 19px; flex: none; color: #7B8794; } .stl-searchbar input { flex: 1 1 auto; min-width: 0; height: 100%; border: none; outline: none; background: none; padding: 0; font-size: 14.5px; font-weight: 600; color: var(--stl-ink); } .stl-searchbar input::placeholder { color: #9AA5B1; font-weight: 500; } .stl-searchbar-clear { flex: none; width: 24px; height: 24px; border: none; border-radius: 50%; background: #EEF2F6; color: var(--stl-body); font-size: 17px; line-height: 1; cursor: pointer; } .stl-searchbar-clear:hover { background: #E1E7EE; color: var(--stl-ink); } .stl-filters-open { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 1px solid var(--stl-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--stl-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 40, 64, .05); transition: border-color .16s ease, color .16s ease; } .stl-filters-open:hover { border-color: var(--stl-orange); color: var(--stl-orange-dark); } .stl-filters-open svg { width: 18px; height: 18px; } /* Lit up while any drawer filter (or the search box) holds a value */ .stl-filters-open.is-active { border-color: var(--stl-orange); background: var(--stl-orange-soft); color: var(--stl-orange-dark); } .stl-filters-badge, .stl-fav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--stl-orange); color: #fff; font-size: 11.5px; font-weight: 800; } /* ── Favorites toggle (sits where a map button would) */ .stl-fav-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 1px solid var(--stl-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--stl-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 40, 64, .05); transition: border-color .16s ease, background .16s ease, color .16s ease; } .stl-fav-toggle svg { width: 18px; height: 18px; } .stl-fav-toggle:hover { border-color: var(--stl-orange); color: var(--stl-orange-dark); } .stl-fav-toggle.is-active { border-color: var(--stl-orange); background: var(--stl-orange-soft); color: var(--stl-orange-dark); } /* Filled heart while the view is pinned to saved listings */ .stl-fav-toggle.is-active svg { fill: currentColor; } .stl-fav-toggle.is-active .stl-fav-count { background: var(--stl-orange-dark); } /* ── Property-type chip row */ .stl-chiprow { display: flex; align-items: center; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .stl-chiprow::-webkit-scrollbar { display: none; } /* Expanded ("More") shows every tag — wrap instead of scrolling sideways */ .stl-chiprow.is-expanded { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; } .stl-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--stl-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; } .stl-chip .stl-tag-icon-svg { width: 18px; height: 18px; flex: none; color: #7B8794; } .stl-chip:hover { border-color: var(--stl-orange); color: var(--stl-orange-dark); } .stl-chip:hover .stl-tag-icon-svg { color: var(--stl-orange); } .stl-chip.is-active { border-color: var(--stl-orange); background: var(--stl-orange-soft); color: var(--stl-orange-dark); } .stl-chip.is-active .stl-tag-icon-svg { color: var(--stl-orange); } .stl-chip-more { color: var(--stl-body); } /* Chevron flips when the row is expanded — the three-dot glyph belongs to the "Others" tag, so this button must not reuse it. */ .stl-chip-more-caret { width: 15px; height: 15px; flex: none; transition: transform .2s ease; } .stl-chip-more[aria-expanded="true"] .stl-chip-more-caret { transform: rotate(180deg); } /* display:inline-flex outranks the UA's [hidden] rule — restore it for every element this UI toggles with the attribute. */ .stl-chip[hidden], .stl-card-tag[hidden], .stl-single-tag[hidden], .stl-searchbar-clear[hidden], .stl-filters-badge[hidden] { display: none; } /* ── Results head */ .stl-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; } .stl-results-title { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.015em; color: var(--stl-ink); } .stl-results-count { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--stl-body); } .stl-sort { position: relative; flex: none; } .stl-sort select { appearance: none; -webkit-appearance: none; height: 42px; min-width: 178px; padding: 0 38px 0 15px; border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--stl-ink); cursor: pointer; } .stl-sort select:focus { outline: none; border-color: var(--stl-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, .15); } .stl-sort-caret { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--stl-body); } /* ── Filters drawer */ .stl-filters-panel { position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 40px rgba(10, 28, 46, .22); transform: translateX(102%); /* visibility is delayed until the slide-out finishes, then flipped so the off-screen panel can't be reached by Tab or read by screen readers. */ visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; } .stl-filters-panel.is-open { transform: translateX(0); visibility: visible; transition: transform .28s ease; } /* The panel keeps its fields alive while closed (they still serialize into the AJAX request), so neutralise the markup's initial `hidden`. */ .stl-filters-panel[hidden] { display: flex; } .stl-filters-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--stl-line); font-size: 16px; font-weight: 800; color: var(--stl-ink); } .stl-filters-close { border: none; background: none; font-size: 28px; line-height: 1; color: var(--stl-body); cursor: pointer; } .stl-filters-close:hover { color: var(--stl-ink); } .stl-filters-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 24px; } .stl-fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .stl-fb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .stl-fb-field label { font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--stl-body); } .stl-fb-field input, .stl-fb-field select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); background: #fff; font-size: 14px; font-weight: 600; color: var(--stl-ink); } .stl-fb-field input:focus, .stl-fb-field select:focus { outline: none; border-color: var(--stl-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, .15); } .stl-fb-amenities { margin: 20px 0 0; padding: 0; border: none; } .stl-fb-amenities legend { padding: 0; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--stl-body); } .stl-fb-amenity-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 14px; margin-top: 10px; } .stl-fb-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--stl-ink); cursor: pointer; } .stl-fb-check input { accent-color: var(--stl-orange); width: 16px; height: 16px; } .stl-filters-panel-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--stl-line); background: #fff; } .stl-fb-submit { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 20px; border: none; border-radius: var(--stl-radius-sm); background: var(--stl-orange); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .16s ease; } .stl-fb-submit:hover { background: var(--stl-orange-dark); } .stl-fb-reset { flex: none; height: 44px; padding: 0 18px; border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); background: #fff; font-size: 14px; font-weight: 700; color: var(--stl-ink); cursor: pointer; } .stl-fb-reset:hover { border-color: var(--stl-orange); color: var(--stl-orange-dark); } .stl-filters-scrim { display: none; position: fixed; inset: 0; background: rgba(10, 28, 46, .5); z-index: 99998; } .stl-filters-scrim.is-open { display: block; } /* ── Results list */ .stl-card-list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; } .stl-card-list.is-loading { opacity: .55; } /* ── Skeletons */ .stl-skeleton-list { display: flex; flex-direction: column; gap: 16px; } .stl-skeleton-card { display: flex; gap: 18px; border: 1px solid var(--stl-line); border-radius: var(--stl-radius); overflow: hidden; } .stl-skeleton-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1 1 auto; padding: 18px 18px 18px 0; } .stl-skeleton-media, .stl-skeleton-line { display: block; background: linear-gradient(90deg, #EEF2F6 25%, #F7F9FC 37%, #EEF2F6 63%); background-size: 400% 100%; } @media (prefers-reduced-motion: no-preference) { .stl-skeleton-media, .stl-skeleton-line { animation: stl-shimmer 1.4s ease infinite; } } @keyframes stl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .stl-skeleton-media { flex: 0 0 292px; min-height: 196px; } .stl-skeleton-line { height: 13px; border-radius: 6px; } .stl-skeleton-line.tiny { width: 22%; height: 10px; } .stl-skeleton-line.short { width: 45%; } /* ── Empty state */ .stl-empty { text-align: center; padding: 46px 20px; border: 1px dashed var(--stl-line); border-radius: var(--stl-radius); background: var(--stl-bg-soft); } .stl-empty-icon { font-size: 30px; margin-bottom: 8px; } .stl-empty h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--stl-ink); } .stl-empty p { margin: 0 0 14px; color: var(--stl-body); font-size: 14px; } .stl-empty-reset { padding: 11px 18px; border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); background: #fff; font-size: 14px; font-weight: 700; color: var(--stl-ink); cursor: pointer; } .stl-empty-reset:hover { border-color: var(--stl-orange); color: var(--stl-orange-dark); } /* ── Pagination */ .stl-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 30px; } .stl-page-btn { min-width: 40px; height: 40px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--stl-line); border-radius: var(--stl-radius-sm); background: #fff; color: var(--stl-ink); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; } .stl-page-btn:hover:not(:disabled) { border-color: var(--stl-orange); color: var(--stl-orange-dark); } .stl-page-btn.is-active { background: var(--stl-orange); border-color: var(--stl-orange); color: #fff; } .stl-page-btn:disabled { opacity: .45; cursor: default; } .stl-page-gap { min-width: 22px; text-align: center; color: var(--stl-body); font-weight: 700; } .stl-page-info { flex-basis: 100%; text-align: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--stl-body); } /* ========================================================================== 8 · ARCHIVE RESPONSIVE ========================================================================== */ @media (max-width: 860px) { .stl-card-media, .stl-skeleton-media { flex-basis: 230px; min-height: 176px; } .stl-results-title { font-size: 22px; } } @media (max-width: 680px) { .stl-archive { padding: 0 14px; margin-top: 18px; } /* Card goes back to a stacked layout on phones */ .stl-card { flex-direction: column; } .stl-card-media, .stl-skeleton-media { flex: none; width: 100%; min-height: 0; aspect-ratio: 16 / 10; } .stl-skeleton-card { flex-direction: column; gap: 12px; } .stl-skeleton-body { padding: 0 16px 18px; } /* Search takes the full row; Filters + Favorites share the next one. */ .stl-searchbar-row { flex-wrap: wrap; } .stl-searchbar { flex: 1 1 100%; } .stl-filters-open, .stl-fav-toggle { flex: 1 1 0; justify-content: center; padding: 0 14px; } .stl-results-head { align-items: flex-start; } .stl-sort { width: 100%; } .stl-sort select { width: 100%; min-width: 0; } .stl-fb-grid { grid-template-columns: 1fr; } .stl-card-foot { padding-top: 10px; } .stl-card-cta { flex: 1 1 auto; justify-content: center; } .stl-page-btn.stl-page-prev, .stl-page-btn.stl-page-next { padding: 0 11px; } .stl-tags-block { padding: 0 14px; } } /* ========================================================================== 8b · FAVOURITE TOASTS (bottom-right) Rendered straight into , so no inherited tokens here — literal colours. ========================================================================== */ .stl-toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; /* The stack itself must not swallow clicks on the page behind it. */ pointer-events: none; } .stl-toast { box-sizing: border-box; pointer-events: auto; display: flex; align-items: center; gap: 11px; min-width: 264px; max-width: min(400px, calc(100vw - 32px)); padding: 13px 14px; border-radius: 12px; background: #0F2942; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(10, 28, 46, .3); opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; } .stl-toast * { box-sizing: border-box; } .stl-toast.is-in { opacity: 1; transform: none; } .stl-toast.is-out { opacity: 0; transform: translateY(8px); } @media (prefers-reduced-motion: reduce) { .stl-toast { transition: opacity .22s ease; transform: none; } } .stl-toast-icon { flex: none; display: inline-flex; color: #F97316; } .stl-toast-icon svg { width: 19px; height: 19px; } .stl-toast-text { flex: 1 1 auto; margin: 0; font-weight: 600; line-height: 1.35; } .stl-toast-link { flex: none; color: #FDBA74; font-weight: 800; text-decoration: underline; white-space: nowrap; } .stl-toast-link:hover { color: #fff; } .stl-toast-close { flex: none; border: none; background: none; padding: 0 2px; font-size: 21px; line-height: 1; color: #93A5B8; cursor: pointer; } .stl-toast-close:hover { color: #fff; } @media (max-width: 560px) { .stl-toast-stack { right: 12px; left: 12px; bottom: 12px; align-items: stretch; } .stl-toast { min-width: 0; max-width: none; } } /* ========================================================================== 9 · TAGS ON THE SINGLE LISTING PHOTO ========================================================================== */ .stl-single-tags { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 60%; } .stl-single-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--stl-ink, #14283C); font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 2px 8px rgba(10, 28, 46, .2); } .stl-single-tag.is-primary { background: #F97316; color: #fff; } .stl-single-tag:hover { background: #0F2942; color: #fff; } .stl-main-gallery-image { position: relative; } @media (max-width: 620px) { .stl-single-tags { top: 10px; left: 10px; gap: 5px; } .stl-single-tag { font-size: 11px; padding: 5px 10px; } } .stl-searchbar { position: relative; } .stl-searchbar-clear { position: absolute; top: 50%; right: 12px; /* Adjust as needed */ transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; line-height: 1; } .stl-searchbar-clear:hover{ transform: translateY(-50%) !important; } /* css mobile*/ @media (max-width: 480px) { body .stl-results-head { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; } body .stl-results-headings { display: block !important; width: calc(100% - 140px) !important; max-width: calc(100% - 140px) !important; flex: 0 0 calc(100% - 140px) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body .stl-results-title { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 1.2 !important; white-space: nowrap !important; text-align:justify; } body .stl-results-count { display: block !important; margin: 4px 0 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.2 !important; } body .stl-sort { position: relative !important; display: block !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; flex: 0 0 132px !important; margin: 0 !important; padding: 0 !important; } body .stl-sort select { display: block !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 42px !important; margin: 0 !important; padding: 0 32px 0 10px !important; font-size: 12px !important; line-height: 42px !important; white-space: nowrap !important; appearance: none !important; -webkit-appearance: none !important; } body .stl-sort-caret { position: absolute !important; top: 50% !important; right: 10px !important; display: block !important; width: 15px !important; height: 15px !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 2 !important; } }