/* =========================================================================== Vibe page — a sticky sidebar of vibes and states beside a grid of places. Ported from the "Split Explorer" design demo the client picked. Only the page's own pieces live here; tokens, buttons, the section shell and the card chrome all come from site.css. --vibe is set on by the page script from the vibe's own colour, so every accent below re-tints itself when the visitor switches vibe without a single hard-coded hex. =========================================================================== */ /* ---------------- banner ---------------- */ .gq-vb-top { position: relative; overflow: hidden; background: var(--gq-sand); border-bottom: 1px solid var(--gq-line); padding: 46px 0; } .gq-vb-top-inner { position: relative; z-index: 1; } .gq-vb-top-lead { display: flex; align-items: center; gap: 20px; } .gq-vb-top-mark { width: 74px; height: 74px; flex-shrink: 0; display: grid; place-items: center; border-radius: 34px; font-size: 74px; color: #fff; background: color-mix(in srgb, var(--vibe) 78%, #000 4%); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 18px 34px -12px color-mix(in srgb, var(--vibe) 80%, transparent), inset 0 2px 0 rgba(255, 255, 255, .22); transform: rotate(-4deg); } .gq-vb-top .gqv2-script { font-size: 26px; color: var(--vibe); } .gq-vb-top h1 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.1; color: var(--gq-navy); } .gq-vb-top p { margin: 6px 0 0; max-width: 520px; font-size: 15px; color: var(--gq-mist); } /* The vibe photo is full-bleed on the right and fades out on its OWN left edge with a mask, so the sand shows straight through — a gradient painted over the whole banner instead would leave a seam where the image starts. */ .gq-vb-top-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gq-vb-top-bg img { position: absolute; top: 0; right: 0; width: min(70%, 940px); height: 100%; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .5) 40%, #000 72%); mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .5) 40%, #000 72%); } .gq-vb-top-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--gq-sand) 28%, transparent), transparent 38%); } /* ---------------- layout ---------------- */ .gq-vb-layout { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; } /* The sidebar is bounded to the viewport and scrolls internally: sticky content taller than the screen strands its lower half out of reach. */ .gq-vb-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 26px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--gq-line) transparent; } .gq-vb-side::-webkit-scrollbar { width: 8px; } .gq-vb-side::-webkit-scrollbar-track { background: transparent; } .gq-vb-side::-webkit-scrollbar-thumb { background: var(--gq-line); border-radius: 999px; } .gq-vb-side::-webkit-scrollbar-thumb:hover { background: var(--gq-mist); } .gq-vb-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gq-mist); } .gq-vb-list { display: flex; flex-direction: column; gap: 4px; } /* ---------------- a vibe / state row, shared by sidebar and modal ---------------- */ .gq-vb-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer; border: 0; background: none; padding: 9px 12px; border-radius: 11px; font-family: var(--gq-font); font-size: 14px; font-weight: 700; color: var(--gq-navy); transition: background .14s, color .14s; } .gq-vb-item i.ic { width: 18px; text-align: center; font-size: 14px; color: var(--gq-mist); transition: color .14s; } .gq-vb-item .cnt { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gq-mist); background: var(--gq-cloud); border-radius: 999px; padding: 2px 9px; } .gq-vb-item:hover { background: var(--gq-cloud); } .gq-vb-item.is-active { background: var(--vibe); color: #fff; } .gq-vb-item.is-active i.ic, .gq-vb-item.is-active .cnt { color: #fff; } .gq-vb-item.is-active .cnt { background: rgba(255, 255, 255, .2); } .gq-vb-item.is-empty { opacity: .5; } .gq-vb-item.is-empty:hover { opacity: 1; } .gq-vb-item.is-empty .cnt { background: transparent; color: color-mix(in srgb, var(--gq-mist) 60%, transparent); } .gq-vb-showall { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px dashed var(--gq-line); border-radius: 11px; background: none; cursor: pointer; font-family: var(--gq-font); font-size: 12.5px; font-weight: 800; color: var(--gq-blue); transition: background .14s, border-color .14s; } .gq-vb-showall:hover { background: var(--gq-blue-tint); border-color: color-mix(in srgb, var(--gq-blue) 40%, var(--gq-line)); } .gq-vb-showall i { font-size: 11px; } .gq-vb-note { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gq-line); background: var(--gq-blue-tint); font-size: 12px; line-height: 1.5; color: var(--gq-mist); } .gq-vb-note i { color: var(--gq-blue); } /* ---------------- results ---------------- */ .gq-vb-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .gq-vb-count { font-size: 14px; color: var(--gq-mist); } .gq-vb-count b { color: var(--gq-navy); } .gq-vb-active { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--vibe); background: color-mix(in srgb, var(--vibe) 12%, #fff); border: 1px solid color-mix(in srgb, var(--vibe) 30%, #fff); } .gq-vb-active button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 13px; padding: 2px 4px; } .gq-vb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .gq-vb-card[hidden] { display: none; } .gq-vb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gq-line); border-radius: 16px; overflow: hidden; box-shadow: var(--gq-shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .gq-vb-card:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -22px rgba(18, 59, 99, .5); } /* Fixed 3:2 — listing photos arrive at whatever shape the destination uploaded, and a ragged grid of card heights is the result if the box follows the image. The box sets the ratio; the photo covers it. */ .gq-vb-media { position: relative; aspect-ratio: 3/2; background: linear-gradient(150deg, color-mix(in srgb, var(--vibe) 26%, #fff), color-mix(in srgb, var(--vibe) 10%, #fff)); } /* Absolute, not height:100% — a percentage height cannot resolve against a parent sized only by aspect-ratio, so it falls back to auto and a portrait photo (plenty of these are) renders at its own shape and bursts the box. inset:0 pins it to the 3:2 frame and object-fit does the cropping. */ .gq-vb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .gq-vb-type { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--gq-navy); font-size: 11px; font-weight: 800; box-shadow: 0 3px 10px rgba(10, 32, 56, .18); } .gq-vb-cbody { display: flex; flex-direction: column; flex: 1; padding: 14px 15px 16px; } .gq-vb-loc { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--vibe); } /* Title and blurb are clamped to a fixed number of lines and hold that height even when the text is shorter or missing. Titles run from four words to a full sentence and 15 of these listings have no blurb at all, so letting the body size itself gives every row a different height and the images stop lining up down the page. */ .gq-vb-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--gq-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; /* 2 lines at 1.25 */ } .gq-vb-card p { margin: 0 0 13px; font-size: 13px; line-height: 1.5; color: var(--gq-mist); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; /* 2 lines at 1.5 */ } .gq-vb-more { margin-top: auto; font-size: 12.5px; font-weight: 800; color: var(--gq-navy); } .gq-vb-more i { transition: transform .16s; } .gq-vb-card:hover .gq-vb-more i { transform: translateX(3px); } .gq-vb-empty { padding: 60px 20px; text-align: center; color: var(--gq-mist); } .gq-vb-empty i { margin-bottom: 14px; font-size: 40px; color: var(--gq-line); } .gq-vb-empty[hidden] { display: none; } /* ---------------- browse modal (all vibes / all states) ---------------- */ /* Above the sticky header (1000) — a centred dialog under it would let the header punch through its own backdrop. */ .gq-vb-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; } .gq-vb-modal[hidden] { display: none; } .gq-vb-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 32, 56, .5); backdrop-filter: blur(2px); animation: gqVbFade .16s ease; } .gq-vb-modal-card { position: relative; width: min(580px, 100%); /* Fixed, not max-height: a content-sized card shrinks as the search filters rows out, moving the row under the visitor's finger while they type. */ height: min(78vh, 660px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(10, 32, 56, .6); animation: gqVbPop .18s cubic-bezier(.2, .8, .3, 1); } @keyframes gqVbFade { from { opacity: 0; } } @keyframes gqVbPop { from { opacity: 0; transform: translateY(10px) scale(.98); } } .gq-vb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; } .gq-vb-modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--gq-navy); } .gq-vb-modal-x { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer; background: var(--gq-cloud); color: var(--gq-navy); font-size: 15px; transition: background .14s; } .gq-vb-modal-x:hover { background: var(--gq-line); } .gq-vb-modal-search { position: relative; padding: 0 22px 14px; } .gq-vb-modal-search i { position: absolute; left: 36px; top: 13px; font-size: 13px; color: var(--gq-mist); pointer-events: none; } .gq-vb-modal-search input { width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--gq-line); border-radius: 12px; background: var(--gq-cloud); font-family: var(--gq-font); font-size: 14px; font-weight: 600; color: var(--gq-navy); } .gq-vb-modal-search input:focus { outline: none; border-color: var(--vibe); background: #fff; } /* flex + min-height:0 so the list scrolls inside the card instead of overflowing it. */ .gq-vb-modal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; align-content: start; padding: 4px 22px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .gq-vb-modal-grid .gq-vb-item { border: 1px solid var(--gq-line); } .gq-vb-modal-grid .gq-vb-item.is-active { border-color: transparent; } .gq-vb-modal-empty { padding: 6px 22px 28px; font-size: 14px; color: var(--gq-mist); } .gq-vb-modal-empty[hidden] { display: none; } /* ---------------- narrow screens ---------------- */ @media (max-width: 860px) { .gq-vb-top-bg img { width: min(82%, 620px); -webkit-mask-image: linear-gradient(90deg, transparent 14%, #000 80%); mask-image: linear-gradient(90deg, transparent 14%, #000 80%); } } @media (max-width: 620px) { .gq-vb-top-bg { display: none; } } /* Under 900px the sidebar is replaced by a sticky bar of two picker buttons that open the same searchable modal. It parks below the site header, whose height is measured into --gq-vb-headh by the page script — the header is sticky at z-index 1000 and its height changes with the breakpoint, so a hard-coded offset would leave the bar hidden underneath it. */ .gq-vb-mobilebar { display: none; } @media (max-width: 900px) { .gq-vb-layout { grid-template-columns: 1fr; gap: 0; } .gq-vb-side { display: none; } .gq-vb-mobilebar { display: flex; gap: 10px; position: sticky; top: var(--gq-vb-headh, 64px); z-index: 70; margin: 0 -24px 20px; padding: 12px 24px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--gq-line); transition: box-shadow .18s; } .gq-vb-mobilebar.is-stuck { box-shadow: 0 12px 24px -16px rgba(18, 59, 99, .55); } .gq-vb-mbtn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 11px 14px; border: 0; border-radius: 12px; font-family: var(--gq-font); font-size: 14px; font-weight: 800; color: #fff; background: var(--gq-navy); box-shadow: 0 8px 18px -10px rgba(10, 32, 56, .55); } .gq-vb-mbtn.vibe { background: var(--vibe); } .gq-vb-mbtn i.lead { font-size: 14px; opacity: .95; } .gq-vb-mbtn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gq-vb-mbtn i.caret { margin-left: auto; font-size: 12px; opacity: .8; } }