/* bookbask — home page. Layout ported value-for-value from docs/bookbask/reference-build.html (the owner's "Demo (standalone).html"). The reference is a prototype with every style inline; this is the same page expressed as classes, so the numbers here are deliberately odd (14.5px, 12.5px, 2.5px gaps) — they are the reference's, not invented. Do not round them. Tokens come from css/bookbask.css, which this file assumes is loaded. The reference's palette and the system's are the same hex values, so a literal colour below is always a place the reference used a one-off. */ .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; } /* ---------- Header ---------- */ .home-nav { background: var(--bb-page); border-bottom: 1px solid var(--bb-hairline); } .home-nav__in { display: flex; align-items: center; gap: 32px; height: 68px; } /* Brand. Both marks ship; [data-brand] on picks one, so the two can be compared without a rebuild. Neither is display:none'd in a way that would hide it from the accessible name — the carries its own aria-label. "bookbask" is the supplied lockup art (assets/brand), not type set in Inter. */ .home-brand { flex: none; display: flex; align-items: center; } .home-brand:hover { text-decoration: none; } .home-brand__bask { display: none; align-items: baseline; gap: 6px; } .home-brand__full { display: none; align-items: center; gap: 9px; } [data-brand="bask"] .home-brand__bask, [data-brand="bookbask"] .home-brand__full, [data-brand="holipass"] .home-brand__full { display: flex; } .home-brand__word { font: var(--bb-w-semibold) 21.5px/1 var(--bb-font); letter-spacing: -0.5px; color: var(--bb-primary); } .home-brand__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bb-trust); } /* Sized by height so the lockup tracks the nav, not by width; the width attribute on the is a presentational hint and has to be overridden. */ .home-brand__lockup { width: 174px; height: auto; display: block; } /* The full lockup is 189px wide. With the sign-in controls that puts the nav's minimum at 408px — wider than most phones, so "Sign in" clipped off the right edge. The arc mark alone is 47px. Both ship; the breakpoint picks one. */ .home-brand__mark { width: 40px; height: auto; display: none; } .home-nav__end { margin-left: auto; display: flex; align-items: center; gap: 20px; font: var(--bb-w-medium) 12.5px/1 var(--bb-font); flex: none; } .home-nav__end > a[href]:not(.bb-btn) { color: var(--bb-ink); } /* The reference's nav buttons are a size smaller than the system default. */ .home-nav__end .bb-btn { padding: 11px 20px; font-size: 12.5px; font-weight: var(--bb-w-semibold); } .home-nav__end .bb-btn--primary { padding: 11px 22px; } .home-nav__auth { position: relative; display: flex; align-items: center; } .home-nav__face { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--bb-hairline); background: var(--bb-page); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .home-nav__face-img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-nav__face--lg { width: 48px; height: 48px; cursor: default; } .home-nav__file { position: absolute; right: 0; top: calc(100% + 10px); width: min(22rem, calc(100vw - 32px)); background: var(--bb-page); border: 1px solid var(--bb-hairline); border-radius: 8px; box-shadow: 0 12px 32px rgba(18, 58, 99, .10); padding: 16px; z-index: 40; display: flex; flex-direction: column; gap: 12px; } .home-nav__file[hidden] { display: none; } .home-nav__fileh { display: flex; align-items: center; gap: 12px; } .home-nav__filek { margin: 0 0 2px; font: var(--bb-w-semibold) 11px/1.4 var(--bb-font); color: var(--bb-ink-soft); } .home-nav__filen { margin: 0; font: var(--bb-w-semibold) 16px/1.2 var(--bb-font); letter-spacing: -0.3px; } .home-nav__filem { margin: 0; font: var(--bb-w-medium) 12.5px/1.45 var(--bb-font); color: var(--bb-ink-soft); } .home-nav__fact { display: flex; gap: 12px; font: var(--bb-w-medium) 12.5px/1.45 var(--bb-font); padding: 8px 0; border-top: 1px solid var(--bb-hairline); } .home-nav__factk { flex: 0 0 4.5rem; color: var(--bb-ink-soft); } .home-nav__factv { color: var(--bb-ink); word-break: break-word; } .home-nav__bks { display: flex; flex-direction: column; gap: 6px; } .home-nav__bk { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--bb-hairline); color: inherit; text-decoration: none; } .home-nav__bk b { font: var(--bb-w-semibold) 13px/1.3 var(--bb-font); } .home-nav__bk span { font: var(--bb-w-medium) 11.5px/1.3 var(--bb-font); color: var(--bb-ink-soft); } .home-nav__filea { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .home-nav__filea .bb-btn { font-size: 12.5px; } /* The language switcher sits where the reference put its quiet "USD" control, so it is toned down to match: plain muted text, no border, no white pill. js/i18n.js ships its own default styling for pages that have no opinion. */ .home-nav__end .ji-sw__btn { border-color: transparent; background: transparent; padding: 7px 2px; color: var(--bb-ink-soft); font-family: var(--bb-font); font-weight: var(--bb-w-medium); } .home-nav__end .ji-sw__btn:hover { border-color: transparent; color: var(--bb-ink); } /* Reference header: category row between brand and the end cluster. Renders as many category links as js/home.js's fitNavCats() finds actually fit — min-width:0 is what lets this flex item shrink below its content's natural width so .clientWidth reports the real leftover space to measure against. No overflow:hidden: a dropped link is removed from the DOM, never clipped. */ .home-nav__end > a[href]:not(.bb-btn):hover { color: var(--bb-primary); } /* The three ways in, between the brand and the end cluster. The underline is a transparent 2px border from the start so nothing shifts on hover — the same trick the venue page's section tabs use. */ .home-nav__ways { display: flex; gap: 24px; font: var(--bb-w-medium) 13px/1 var(--bb-font); flex: none; } .home-nav__ways a { color: var(--bb-ink); padding: 6px 0; border-bottom: 2px solid transparent; } .home-nav__ways a:hover { color: var(--bb-primary); border-bottom-color: var(--bb-primary); text-decoration: none; } .home-nav__ways a[aria-current="page"] { color: var(--bb-primary); font-weight: var(--bb-w-semibold); border-bottom-color: var(--bb-primary); } .home-nav__way--live { position: relative; } .home-nav__way--live::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 5px; height: 5px; border-radius: 50%; background: var(--bb-papaya); transform: translateX(-50%); } /* ---------- Hero ---------- Geometry is the reference build's own, read out of the standalone export rather than eyeballed: a 420-500px photo band (never the full fold), copy pinned to the top-left of that band, and the search deck straddling its bottom edge. The old 600px band with vertically-centred copy is what made the page read as a SaaS landing hero instead of a travel one. */ .home-hero { position: relative; /* The export's own band: 420-500px, never a share of the fold. Sizing it against the viewport (what this was) meant a tall window grew the photograph instead of the page, and the category strip — which is the first thing a traveler is meant to act on — got pushed under the fold. A fixed band puts the strip on screen at every height. */ height: clamp(350px, 38vh, 380px); display: flex; align-items: center; overflow: hidden; /* Navy, not the page cream, while slides decode. The headline is already --bb-on-navy-ink; painting the repo fallback here was the stale flash. */ background: var(--bb-primary); } /* The photo reel. Empty until live slides decode (or the repo fallback is opted in because the table is empty or unreachable). */ .home-hero__slides { position: absolute; inset: 0; } .home-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease-in-out; } .home-hero__art.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .home-hero__art { transition: none; } } /* Two washes, both from the reference. The diagonal one is lit from the right so the left-aligned copy keeps its contrast without dimming the photograph; the rust one warms the bottom edge where the deck meets it. Warm, never gray — a gray scrim is what makes a travel photo look like a stock header. */ .home-hero__scrim { position: absolute; inset: 0; pointer-events: none; /* The 2026-08-24 export's own stops: a deeper navy at the left where the headline sits, and a lighter tail so the photograph keeps its right side. */ background: linear-gradient( 100deg, rgba(23, 32, 51, 0.72) 0%, rgba(23, 32, 51, 0.32) 48%, rgba(23, 32, 51, 0.06) 100% ); } .home-hero__scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(255, 104, 70, 0.22) 0%, rgba(255, 104, 70, 0.06) 18%, rgba(255, 104, 70, 0) 36% ); } /* Centred in the band minus its bottom region, which lands the copy at about two fifths of the way down — clear of the top edge, clear of the reel and the deck below it. Pinned to the top edge it read as though it had fallen out of the header. */ /* Centred in the photograph a visitor can actually see — the band minus the 62px the deck covers — so the block sits midway between the header and the top of the search card rather than riding high in the frame. */ .home-hero__in { position: relative; width: 100%; padding-block: 0 62px; } .home-hero__h1 { /* The reference stacks the headline over two lines with a 15ch measure. It is set in ch rather than px so a Lao or Thai headline wraps on its own glyph width instead of on English's — and at 13 rather than the reference's 15 because DM Sans at 600 sets narrower than the reference's Inter at 800, and 15ch left the English headline one line, one pixel inside the box. The shape is the spec here, not the number. */ max-width: 15ch; margin: 0 0 12px; font-size: clamp(38px, 4.4vw, 58px); letter-spacing: -1.6px; color: var(--bb-on-navy-ink); text-shadow: 0 2px 24px rgba(28, 26, 23, 0.30); } .home-hero__sub { max-width: 48ch; margin: 0; font: var(--bb-w-regular) 15.5px/1.5 var(--bb-font); color: rgba(251, 247, 240, 0.92); text-shadow: 0 1px 12px rgba(28, 26, 23, 0.30); } /* ---------- Hero reel controls ---------- Arrows, dots and the place the photograph was taken. The caption is the point of the whole row: a travel page owes the reader the name of what they are looking at, and it is admin-editable copy per slide, not a file name. */ .home-hero__reel { position: absolute; left: 0; right: 0; bottom: 76px; display: flex; align-items: center; gap: 12px; } .home-hero__reel[hidden] { display: none; } .home-hero__step { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(251, 247, 240, 0.20); border-radius: 50%; background: rgba(28, 26, 23, 0.40); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--bb-on-navy-ink); font: var(--bb-w-medium) 14px/1 var(--bb-font); cursor: pointer; } .home-hero__step:hover { background: rgba(28, 26, 23, 0.65); } .home-hero__dots { display: inline-flex; align-items: center; gap: 6px; } .home-hero__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(251, 247, 240, 0.45); cursor: pointer; transition: width .25s ease-out, background-color .25s ease-out; } .home-hero__dot:hover { background: rgba(251, 247, 240, 0.75); } .home-hero__dot[aria-current="true"] { width: 18px; background: var(--bb-on-navy-ink); } /* ---------- stand-in slides ---------- The reel running on placeholders while its photographs wait on the database (stubSlides in js/home.js). Everything around them is the real thing — arrows, dots, captions, the seven-second rotation — so what this has to look like is a picture that is deliberately not a picture: a flat brand tint with a dashed card on it, one tint per slide so clicking through visibly moves. A traveler never sees these; they are gated to localhost. */ .home-hero__art--stub { display: flex; align-items: center; /* Sits where the photograph's subject would be — the right of the frame — so it never lands on top of the headline it is supposed to sit behind. */ justify-content: flex-end; padding-right: 7%; background: #1E3A57; } .home-hero__art--stub[data-stub="2"] { background: #1C4B3F; } .home-hero__art--stub[data-stub="3"] { background: #5A3520; } .home-hero__stub { display: flex; flex-direction: column; gap: 7px; max-width: 38ch; margin: 0 24px; padding: 18px 22px; border: 1px dashed rgba(251, 247, 240, 0.55); border-radius: var(--bb-r-card); background: rgba(28, 26, 23, 0.35); text-align: center; } .home-hero__stub-h { font: var(--bb-w-semibold) 15px/1.3 var(--bb-font); color: var(--bb-on-navy-ink); } .home-hero__stub-p { font: var(--bb-w-regular) 12.5px/1.5 var(--bb-font); color: rgba(251, 247, 240, 0.85); } .home-hero__where { min-width: 0; font: var(--bb-w-medium) 11.5px/1.4 var(--bb-font); color: rgba(251, 247, 240, 0.80); text-shadow: 0 1px 10px rgba(28, 26, 23, 0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Search deck ---------- Overlaps the photo by 62px, so it sits ON the edge rather than inside the picture. Tabs filter the grids below in place rather than navigating — the reference's are decorative, but a control a traveler can press should do something. */ .home-discovery { position: relative; z-index: 2; margin-top: -62px; } .home-discovery__panel { overflow: hidden; background: var(--bb-surface); border: 1px solid var(--bb-hairline); border-radius: 18px; box-shadow: var(--bb-shadow-deck); } .home-deck__head { display: none; align-items: stretch; gap: 0; padding: 0 8px; border-bottom: 1px solid var(--bb-hairline); } .home-hero__tabs { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; } .home-hero__tabs::-webkit-scrollbar { display: none; } .home-hero__tab { padding: 14px 14px 12px; border: 0; background: none; font: var(--bb-w-semibold) 12.5px/1.2 var(--bb-font); font-family: var(--bb-font); color: var(--bb-ink); cursor: pointer; white-space: nowrap; } .home-hero__tab:hover { color: var(--bb-primary); } .home-hero__tab[aria-pressed="true"] { color: var(--bb-primary); box-shadow: inset 0 -2px 0 var(--bb-primary); } /* The right of the tab row: one live, local, useful line — the venue city's own sunset, and why it matters. Real data from the venues' own timezone, so it names whichever city the marketplace is actually in. */ .home-deck__live { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 14px 12px 12px; font: var(--bb-w-medium) 11.5px/1.3 var(--bb-font); color: var(--bb-ink); white-space: nowrap; } .home-deck__live[hidden] { display: none; } .home-deck__live::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-urgency); } .home-search { display: grid; grid-template-columns: minmax(0, 1.5fr) 220px 210px auto; align-items: stretch; background: var(--bb-surface); padding: 8px; text-align: left; } .home-search__field { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 11px 20px; border-right: 1px solid var(--bb-hairline); } .home-search__field-label { font: var(--bb-w-semibold) 11px/1.15 var(--bb-font); color: var(--bb-ink); } .home-search #q { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; font: var(--bb-w-regular) 13.5px/1.25 var(--bb-font); color: var(--bb-ink); padding: 0; } /* Native selects, restyled — a real control beats a span that looks like one. The reference sets both values in ink rather than link-blue: they are the current state of the search, not two links sitting in a form. */ .home-search select { width: 100%; border: 0; outline: none; background: transparent; font: var(--bb-w-semibold) 13.5px/1.25 var(--bb-font); font-family: var(--bb-font); color: var(--bb-ink); cursor: pointer; appearance: none; -webkit-appearance: none; } /* The rust dot the reference puts against "Where" — the one place on the fold that says a location is set. */ .home-search__val { display: flex; align-items: center; gap: 7px; min-width: 0; } .home-search__pin { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-urgency); } .home-search .bb-btn { align-self: stretch; border-radius: 12px; padding: 0 40px; font: var(--bb-w-semibold) 14px/1.2 var(--bb-font); } .home-quick-picks { display: none; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 0 0; } .home-quick-picks__label { margin-right: 2px; font: var(--bb-w-medium) 12px/1.35 var(--bb-font); color: var(--bb-ink-soft); } .home-quick-picks a { padding: 7px 15px; border: 1px solid var(--bb-hairline); border-radius: 999px; background: var(--bb-surface); font: var(--bb-w-semibold) 12px/1.2 var(--bb-font); color: var(--bb-ink); text-decoration: none; } .home-quick-picks a:hover { border-color: var(--bb-primary); color: var(--bb-primary); } /* ---------- Bands ---------- The reference's vertical rhythm exactly: each band owns its own top and bottom padding rather than relying on a shared section spacing. */ .home-tiles-band { margin-top: 44px; padding: 30px; border-radius: 24px; background: #EAFBF7; } .home-tiles-band__head { margin-bottom: 20px; } .home-tiles-band__head .bb-sub { margin: 5px 0 0; } /* The field guide is a full-bleed navy band now, not a rounded card floating inside the column, so the cards above it need real space before the colour starts — 8px read as the band crowding them. */ .home-band--fresh { padding-block: 62px 68px; } .home-band--stays { padding-block: 56px 12px; } .home-band--areas { padding-block: 56px 0; } .home-band--know { padding-block: 56px 64px; } .home-band .bb-sub { margin: 4px 0 22px; } /* ---------- Category tiles ---------- Rebuilt as the 2026-08-24 export's mood rail: six 4:5 portraits with the name and the count sitting ON the photograph under a scrim, not a strip of 88px thumbnails with the labels below. The old strip skimmed; this one asks a question ("what kind of afternoon?") and answers it in pictures, which is the difference between a category nav and the thing a travel site opens with. Five kinds and a way out: the sixth cell is not a category but the door to all of them, so the row stays short without hiding anything. */ .home-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .home-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; } .home-tile:hover { text-decoration: none; } .home-tile__art { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bb-tint-blue); transition: transform .45s ease-out; } .home-tile:hover .home-tile__art { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .home-tile__art { transition: none; } .home-tile:hover .home-tile__art { transform: none; } } /* The export's tile scrim: nothing at the top, heavy at the foot where the two lines sit. Warm, never grey. */ .home-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 0deg, rgba(28, 26, 23, 0.78) 0%, rgba(28, 26, 23, 0.18) 46%, rgba(28, 26, 23, 0) 72% ); } /* The door tile paints its own colour, so a scrim would only muddy it. */ .home-tile:has(.home-tile__all)::after { display: none; } .home-tile__label { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; pointer-events: none; } .home-tile__name { display: block; font: var(--bb-w-semibold) 14px/1.25 var(--bb-font); color: var(--bb-on-navy-ink); } .home-tile__count { display: block; margin-top: 2px; font: var(--bb-w-regular) 11.5px/1.35 var(--bb-font); color: rgba(251, 247, 240, 0.78); font-variant-numeric: tabular-nums; } .home-tile__go { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--bb-primary); font: var(--bb-w-semibold) 22px/1 var(--bb-font); transition: transform .2s ease, background .2s ease; } .home-tile:hover .home-tile__go { transform: translateX(2px); background: #fff; } .home-tile:has(.home-tile__go) .home-tile__label { right: 50px; } /* The "everything else" cell. Blue tint rather than a photo, because it is a destination, not a place — so its two lines go back to ink. */ .home-tile__all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; background: #FFFFFF; color: var(--bb-primary); text-align: center; padding: 16px; } .home-tile:hover .home-tile__all { background: var(--bb-tint-blue); } .home-tile__all-arrow { font: var(--bb-w-medium) 26px/1 var(--bb-font); } .home-tile__all-label { font: var(--bb-w-semibold) 13px/1.25 var(--bb-font); } .home-tile__all-count { font: var(--bb-w-regular) 11.5px/1.35 var(--bb-font); color: var(--bb-ink-soft); font-variant-numeric: tabular-nums; } /* ---------- Venue cards ---------- */ .home-cards { display: grid; /* minmax(0,1fr), not 1fr: the card foot is one nowrap row, so an auto minimum would let a long price push the column past its share and give the page a horizontal scrollbar. */ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .home-cards > .home-card:first-child { grid-column: span 2; } .home-cards > .home-card:first-child .home-card__art { height: 236px; } .home-card { display: block; } .home-card:hover { text-decoration: none; } .home-card__frame { background: var(--bb-surface); border: 1px solid var(--bb-hairline); border-radius: var(--bb-r-card); overflow: hidden; transition: box-shadow .18s ease-out, transform .18s ease-out; /* Fill the grid cell so every card in a row is the same height, even when one card's chip + price wraps to a second line. */ height: 100%; display: flex; flex-direction: column; } .home-card:hover .home-card__frame { box-shadow: var(--bb-shadow-hover); transform: translateY(-3px); } /* 190. The 2026-08-24 export sets 172 on its grid cards and 190 on the owner preview, and 172 is measured against a card carrying four body rows. Ours carries six — distance, facts, what it does, and the stacked price shelf are all real information the export's card has no equivalent for — so 172 drops the photograph to ~30% of the card and it stops reading as a place. 190 is the export's own larger value and holds the share. The source files are 760x500, so a 256x190 box crops ~10% off the sides and loses no resolution. */ .home-card__art { position: relative; height: 190px; overflow: hidden; } .home-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bb-tint-blue); transition: transform .45s ease-out; } /* The photograph leans in on hover. It is the only motion on the card, it is slow, and it is the difference between a card that feels like a place and a card that feels like a row in a table. */ .home-card:hover .home-card__art img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .home-card__art img { transition: none; } .home-card:hover .home-card__art img { transform: none; } } /* A standing badge, in the body where it can be read against paper rather than against whatever the photograph happens to be doing. */ .home-card__standing { align-self: flex-start; padding: 4px 11px; border-radius: var(--bb-r-chip); background: var(--bb-tint-jade-strong); color: var(--bb-trust-deep); font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font); } /* On the photograph the export allows exactly two things: the jade award pill, and what the doc calls a "cream status badge". A flag is a status, not an award, so it is the cream one — frosted paper carrying ink, which stays legible over any photograph without competing with the award pill beside it. Solid navy here (what this was) put a third saturated colour on a photo that already has the heart and, on a favourite, the jade badge. */ .home-card__flag { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 62px); background: rgba(253, 252, 249, 0.92); color: var(--bb-ink); border-radius: var(--bb-r-chip); padding: 5px 12px; font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .home-card__flag--trust { background: var(--bb-tint-jade-strong); color: var(--bb-trust-deep); } /* Four blocks with air between them — name, where, rating, facts — and the price shelf pinned to the bottom. The 7px gap this replaces was set when the card carried two of those; with five rows it read as one dense paragraph. */ .home-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; } .home-card__name { font: var(--bb-w-semibold) 14px/1.3 var(--bb-font); color: var(--bb-ink); margin: 0; } .home-card__area, .home-card__meta { font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); margin: 0; } /* Wraps as a row of items rather than as running text, so the stand-in chip never lands on a line of its own behind a stranded separator. */ .home-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; margin-top: -3px; } /* The unrated state of the rating row. Same seal, same line, same height as a real rating, so a band of cards keeps one rhythm whether or not anyone has reviewed yet — the word in the seal is what differs, not the component. */ .home-card__ratingnote { font: var(--bb-w-regular) 11px/1.4 var(--bb-font); color: var(--bb-ink-soft); } /* Facts, not features: open state on the venue's own clock, and that holding a slot costs nothing. Separated by a dot leader rather than boxed, so they read as a sentence and not as three more chips. */ .home-card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0; font: var(--bb-w-medium) 10.5px/1.45 var(--bb-font); color: var(--bb-ink-soft); } .home-card__fact { display: inline-flex; align-items: center; gap: 5px; } .home-card__fact + .home-card__fact::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; margin-right: 4px; } /* Open is the one fact that earns a colour — live availability is jade's job. */ .home-card__fact.is-open { color: var(--bb-trust-ink); } .home-card__fact.is-open::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bb-trust); order: -1; animation: bb-live 2.4s ease-in-out infinite; } /* The one thing on the page that is alive rather than drawn. Slow enough to read as a pulse and not a blink, and off entirely for anyone who asked. */ @keyframes bb-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 135, 90, 0.45); } 50% { box-shadow: 0 0 0 4px rgba(0, 135, 90, 0); } } @media (prefers-reduced-motion: reduce) { .home-card__fact.is-open::after { animation: none; } } .home-card__urgency { margin: 0; } /* What the venue sells, in its own words. Clamped to two lines so a venue with a long menu cannot stretch the card past its neighbours. */ .home-card__does { margin: 0; font: var(--bb-w-regular) 11.5px/1.55 var(--bb-font); color: var(--bb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* A stand-in for a value the backend cannot answer yet (FX rate, venue coordinates). Dashed and quiet: it must never be mistaken for real data, and it is gated to localhost in js/home.js, so a traveler never sees one. */ .home-card__stub-inline { display: inline-block; padding: 0 5px; border: 1px dashed var(--bb-hairline); border-radius: var(--bb-r-field); font: var(--bb-w-regular) 10px/1.5 var(--bb-font); color: var(--bb-ink-soft); } .home-card__meta > * + .home-card__dist::before, .home-card__meta > * + .home-card__stub-inline::before { content: "·"; margin-right: 7px; } /* The price shelf. Chip on its own line, price under it — the reference's own arrangement, and the only one where both survive: side by side, a real category name and a real price each squeeze the other into an ellipsis. Bottom-pinned so the shelf lines up across the whole band. */ .home-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 4px; } /* card_tag is admin-curated free text up to 40 characters (migration 025), not always a short category label, so this needs the same ellipsis guard as .home-card__flag — not copied from the flag's 62px, which was sized for a fixed-width icon neighbor. This pill's neighbor is the price ("from "), measured in the shipped 4-up grid at ~107px; 90px covers that plus the row's 6px gap with margin to spare, and .home-card__foot's existing flex-wrap protects the price outright — if the pill needs its full 90px-reserved width, price drops to its own line rather than being squeezed, so this only needs to stop the pill itself outgrowing the row. */ /* Blue tint, fully round — the export's character pill ("Sunset favorite", "Locals' pick"), which is what a category tag on a card actually is. Solid navy (what this was) made every card carry a second button-weight mark competing with the price beside it. */ .home-card__pill { background: var(--bb-tint-blue); color: var(--bb-primary); border: 1px solid transparent; border-radius: var(--bb-r-chip); padding: 4px 11px; font: var(--bb-w-semibold) 12px/1.5 var(--bb-font); white-space: nowrap; /* The price sits below now, so the chip has the card's full width and only ellipsizes when the category name itself is longer than that. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* The price stacks: what the venue charges in its own currency, and the traveler's rough equivalent under it. Right-aligned against the category chip so the foot reads as one balanced line rather than two loose ends. */ .home-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; font: var(--bb-w-regular) 12px/1.4 var(--bb-font); color: var(--bb-ink-soft); font-variant-numeric: tabular-nums; } .home-card__price-main { white-space: nowrap; } .home-card__price b { color: var(--bb-ink); font-weight: var(--bb-w-semibold); font-size: 14px; } .home-card__price-per { color: var(--bb-ink-soft); } .home-card__price-alt { font-size: 11px; color: var(--bb-ink-soft); flex: 1 0 100%; } /* Variant-1 card additions (owner pick, 2026-08-13). The open-flag keeps top-left; the earned badge slides below it when both render. */ .home-card__badge { top: 10px; left: 10px; } .home-card__flag ~ .home-card__badge { top: 44px; } /* The export sets the card quote at 12px with a 36px floor, so a band of cards keeps one rhythm whether a venue has a pinned review or not — the row holds its height rather than collapsing and shortening that one card. */ .home-card__quote { font: italic var(--bb-w-regular) 12px/1.5 var(--bb-font); color: var(--bb-ink); margin: 0; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-card__quote-by { color: var(--bb-ink-soft); font-style: normal; } /* ---------- Field guide ---------- The 2026-08-24 export turns this from a rounded card into a full-bleed navy band running edge to edge, with the copy on the left and a three-photo mosaic on the right. Edge to edge is the point: a rounded card floating on the page reads as a promo slot, and a band that owns the full width reads as a magazine spread — which is what the field guide is. It is still the one place on the page allowed to be a colour field. */ .home-band--guide { padding: 0; max-width: none; } .home-guide { background: var(--bb-primary); padding-block: 64px 68px; } .home-guide__in { max-width: var(--bb-column); margin: 0 auto; padding-inline: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; } .home-guide__text { display: flex; flex-direction: column; align-items: flex-start; } /* The eyebrow is the one place rust appears on this band: a single dot, then cream at reduced strength. Not a second colour on the words themselves — the doc bans colour riding on text. */ .home-guide__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: var(--bb-w-semibold) 12px/1.4 var(--bb-font); color: rgba(251, 247, 240, 0.75); } .home-guide__eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-on-navy-urgency); } .home-guide__h { margin: 0 0 14px; max-width: 22ch; font: var(--bb-w-semibold) clamp(28px, 3.2vw, 40px)/1.08 var(--bb-font); letter-spacing: -1.4px; color: var(--bb-on-navy-ink); } .home-guide__p { margin: 0 0 24px; max-width: 52ch; font: var(--bb-w-regular) 15px/1.65 var(--bb-font); color: rgba(251, 247, 240, 0.86); } .home-guide__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* Inverted: cream button, blue label. On a colour field the primary button has to be the light thing, or it disappears into its own background. */ .home-guide__cta, .home-guide__cta.bb-btn--primary { padding: 13px 28px; font-size: 13.5px; background: var(--bb-on-navy-ink); color: var(--bb-primary); border-color: transparent; } .home-guide__cta:hover { text-decoration: none; background: #FFFFFF; } .home-guide__note { font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font); color: rgba(251, 247, 240, 0.70); } /* Two 4:3 frames side by side. The 2026-08-25 export cut the third: a contact sheet of three competed with the headline beside it, and a pair reads as an illustration rather than as a gallery. */ .home-guide__art { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .home-guide__frame { aspect-ratio: 4 / 3; border-radius: var(--bb-r-card); overflow: hidden; } .home-guide__art img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------- Stays & days out ---------- A carousel of the venues counted in nights or day passes. Cards, and nothing drawn between them: the timeline this replaced ran a vertical rule through the band with a dot per venue, and the 2026-08-25 export dropped both. Same 262px card the favourites rail uses, so the two bands scroll with one rhythm. */ .home-stays { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 0 6px; scrollbar-width: none; } .home-stays::-webkit-scrollbar { display: none; } .home-stays__all { font: var(--bb-w-semibold) 12.5px/1.3 var(--bb-font); color: var(--bb-primary); white-space: nowrap; } .home-stay { flex: 0 0 262px; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--bb-surface); border: 1px solid var(--bb-hairline); border-radius: var(--bb-r-card); overflow: hidden; color: inherit; transition: box-shadow .18s ease-out; } .home-stay:hover { box-shadow: var(--bb-shadow-hover); text-decoration: none; } /* 5:4, not the 4:3 a slot venue's card uses. A hotel room and a gorge both need the height; a chair does not. */ .home-stay__art { position: relative; display: block; aspect-ratio: 5 / 4; } .home-stay__art img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bb-tint-blue); } .home-stay__verified { position: absolute; left: 10px; top: 10px; background: var(--bb-tint-jade-strong); color: var(--bb-trust-deep); border-radius: var(--bb-r-chip); padding: 5px 12px; font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font); pointer-events: none; } .home-stay__body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; flex: 1; } .home-stay__name { font: var(--bb-w-semibold) 14px/1.3 var(--bb-font); } /* A floor under the two variable rows, so a row of cards keeps one baseline whether or not a venue has a quote or a long address. */ .home-stay__where { font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); min-height: 35px; } .home-stay__quote { font: italic var(--bb-w-regular) 12px/1.5 var(--bb-font); color: var(--bb-ink); min-height: 36px; } .home-stay__quote-by { font-style: normal; color: var(--bb-ink-soft); } .home-stay__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 4px; } /* What the venue's engine counts in — "Counted in nights" / "in day passes". The one thing on this card a slot venue's card never says. */ .home-stay__unit { background: var(--bb-tint-blue); color: var(--bb-primary); border-radius: var(--bb-r-chip); padding: 4px 11px; font: var(--bb-w-semibold) 12px/1.5 var(--bb-font); } .home-stay__price { font: var(--bb-w-regular) 12px/1.4 var(--bb-font); color: var(--bb-ink-soft); font-variant-numeric: tabular-nums; } .home-stay__price b { color: var(--bb-ink); font-weight: var(--bb-w-semibold); font-size: 14px; } /* ---------- Still open this evening ---------- */ .home-band--evening { margin-top: 12px; padding: 28px 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .home-eve__titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .home-eve__live { display: inline-flex; align-items: center; gap: 7px; color: var(--bb-trust-ink); font: var(--bb-w-semibold) 12px/1.3 var(--bb-font); } .home-eve__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-trust); } .home-eve { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: stretch; margin-top: 10px; } .home-eve:has(> .home-eve__panel[hidden]) { grid-template-columns: minmax(0, 1fr); } .home-eve__all { color: var(--bb-primary); font: var(--bb-w-semibold) 12.5px/1.3 var(--bb-font); white-space: nowrap; } .home-eve__rail { display: flex; flex-direction: column; justify-content: space-between; } .home-eve__row { display: grid; grid-template-columns: 62px 20px 74px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 58px; padding: 5px 0; color: inherit; } .home-eve__row:hover { text-decoration: none; } .home-eve__row:hover .home-eve__name { color: var(--bb-primary); } .home-eve__time { text-align: right; color: var(--bb-ink); font: var(--bb-w-semibold) 16px/1.2 var(--bb-font); letter-spacing: -.4px; font-variant-numeric: tabular-nums; } .home-eve__track { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; } .home-eve__track::before { content: ""; position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--bb-hairline); } .home-eve__dot { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--bb-trust); box-shadow: 0 0 0 3px #FFFFFF; } .home-eve__dot.is-open { background: var(--bb-papaya); } .home-eve__thumb { display: block; width: 74px; height: 48px; border-radius: 7px; overflow: hidden; } .home-eve__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--bb-tint-blue); } .home-eve__text { display: block; min-width: 0; } .home-eve__name { display: block; margin-bottom: 2px; color: var(--bb-ink); font: var(--bb-w-semibold) 14px/1.3 var(--bb-font); } .home-eve__sub { display: block; overflow: hidden; color: var(--bb-ink-soft); font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font); text-overflow: ellipsis; white-space: nowrap; } .home-eve__end { display: flex; align-items: center; gap: 16px; } .home-eve__end .home-card__price { align-items: flex-end; flex-direction: column; gap: 1px; text-align: right; } .home-eve__cta { padding: 9px 18px; border: 1px solid #C9CEF9; border-radius: var(--bb-r-field); color: var(--bb-primary); font: var(--bb-w-semibold) 12px/1.2 var(--bb-font); white-space: nowrap; } .home-eve__row:hover .home-eve__cta { border-color: var(--bb-primary); background: var(--bb-tint-blue); } .home-almanac { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 292px; border-radius: 20px; overflow: hidden; background: var(--bb-primary); color: var(--bb-on-navy-ink); } .home-almanac__art { position: absolute; inset: 0; background-position: center; background-size: cover; } .home-almanac__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,87,147,.9) 0%, rgba(28,26,23,.34) 48%, rgba(28,26,23,.04) 78%); } .home-almanac__in { position: relative; padding: 20px; } .home-almanac__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .home-almanac__temp { color: var(--bb-on-navy-ink); font: var(--bb-w-semibold) 34px/1 var(--bb-font); letter-spacing: -1.2px; font-variant-numeric: tabular-nums; } .home-almanac__word { color: rgba(251,247,240,.82); font: var(--bb-w-regular) 12.5px/1.3 var(--bb-font); } .home-almanac__strip { border-top: 1px solid rgba(251,247,240,.24); } .home-almanac__cell { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; color: rgba(251,247,240,.82); font-size: 12.5px; } .home-almanac__value { color: var(--bb-on-navy-ink); font-weight: var(--bb-w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 860px) { .home-eve { grid-template-columns: minmax(0, 1fr); } .home-eve__row { grid-template-columns: 52px 20px minmax(0, 1fr) auto; gap: 12px; } .home-eve__thumb { display: none; } .home-eve__end .home-card__price { display: none; } .home-almanac { min-height: 320px; } } /* ---------- Neighbourhoods ---------- The export's destination tiles: a 3:4 portrait, a scrim whose dark end goes navy rather than black so the photo grades into the brand, and the name and the count both sitting on the photograph. The white lozenge this replaced put a paper chip on top of a picture — the one thing the doc's photography rule tells you not to do. */ .home-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .home-area { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--bb-r-card); overflow: hidden; transition: box-shadow .18s ease-out; } .home-area:hover { text-decoration: none; box-shadow: 0 8px 24px rgba(28, 26, 23, 0.16); } /* The photograph fills the frame the grid gives it. Without this the renders at its intrinsic size and the tile becomes as tall as the file. */ .home-area img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease-out; } .home-area:hover img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .home-area img { transition: none; } .home-area:hover img { transform: none; } } .home-area::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 0deg, rgba(26, 87, 147, 0.82) 0%, rgba(28, 26, 23, 0.22) 44%, rgba(28, 26, 23, 0) 70% ); } .home-area__label { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 1; pointer-events: none; } .home-area__name { display: block; font: var(--bb-w-semibold) 19px/1.15 var(--bb-font); letter-spacing: -0.5px; color: var(--bb-on-navy-ink); } .home-area__meta { display: inline-block; margin-top: 9px; padding: 4px 11px; border-radius: var(--bb-r-chip); background: rgba(252, 250, 246, 0.16); border: 1px solid rgba(251, 247, 240, 0.34); font: var(--bb-w-semibold) 11.5px/1.35 var(--bb-font); color: var(--bb-on-navy-ink); font-variant-numeric: tabular-nums; } /* ---------- Good to know ---------- Three pieces of city knowledge. Not cards: a photograph, a paragraph and an attribution, with no surface and no border — the same treatment the export gives its editorial rows, and the reason the band reads as writing on the page rather than as three more tiles. */ .home-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .home-guidecard__art { aspect-ratio: 4 / 3; border-radius: var(--bb-r-card); overflow: hidden; margin-bottom: 13px; } .home-guidecard__art img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bb-tint-blue); } .home-guidecard__body { margin: 0 0 9px; font: var(--bb-w-regular) 14.5px/1.55 var(--bb-font); color: var(--bb-ink); } .home-guidecard__by { display: flex; align-items: center; gap: 9px; } .home-guidecard__face { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bb-tint-blue); color: var(--bb-primary); display: inline-flex; align-items: center; justify-content: center; font: var(--bb-w-semibold) 11px/1 var(--bb-font); } .home-guidecard__who { font: var(--bb-w-semibold) 12px/1.4 var(--bb-font); color: var(--bb-ink); } .home-guidecard__from { margin-top: 8px; font: var(--bb-w-semibold) 12px/1.4 var(--bb-font); color: var(--bb-primary); } /* Workbench only (js/home.js gates it to localhost): names the two columns local_tips does not carry yet. */ .home-guidecard__stub { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border: 1px dashed var(--bb-hairline); border-radius: var(--bb-r-field); font: var(--bb-w-medium) 11.5px/1.5 var(--bb-font); color: var(--bb-ink-soft); } /* ---------- Responsive ---------- The reference is a fixed 1140px prototype with no breakpoints at all. These are additions, not ports: below 1140 the six- and four-up grids have to give. */ @media (max-width: 1180px) { .home-nav__in { gap: 22px; } .home-nav__end { gap: 14px; } .home-guide__in { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } } @media (max-width: 1040px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-cards > .home-card:first-child { grid-column: span 2; } .home-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 860px) { /* The deck stacks into two rows here, so it needs more of the band to straddle; the photo gives up height rather than the copy giving up room. */ .home-hero { height: clamp(380px, 46vh, 430px); } .home-discovery { margin-top: -56px; } .home-deck__live { display: none; } .home-guide { padding-block: 42px 46px; } .home-guide__in { grid-template-columns: 1fr; gap: 28px; } .home-search { grid-template-columns: 1fr 1fr; padding: 8px; } .home-search__what { grid-column: 1 / -1; border-bottom: 1px solid var(--bb-hairline); } .home-search__when { border-right: 0; } .home-search .bb-btn { grid-column: 1 / -1; width: 100%; margin: 8px 0 0; padding: 14px 40px; } .home-nav__end > a[href]:not(.bb-btn) { display: none; } } @media (max-width: 620px) { /* The brand, both buttons and the language control cannot share one row at this width. "Sign in" is the one a traveler needs; the owner path stays reachable from "For venues" in the footer. */ .home-nav__end { gap: 12px; } .home-nav__end .bb-btn--secondary { display: none; } .home-nav__ways { gap: 0; } .home-nav__ways a:not(:first-child) { display: none; } /* Mark instead of the full lockup — see the note beside .home-brand__mark. This is what keeps the language switcher and "Sign in" on the row. */ .home-brand__lockup { display: none; } .home-brand__mark { display: block; } .home-hero { height: clamp(360px, 44vh, 410px); } .home-hero__in { padding-top: 52px; } .home-hero__reel { bottom: 60px; } .home-discovery { margin-top: -48px; } .home-deck__head { padding-inline: 4px; } .home-hero__tab { padding: 12px 10px 10px; } .home-search { grid-template-columns: 1fr; } .home-search__field { grid-column: 1; min-height: 62px; padding: 10px 13px; border-right: 0; border-bottom: 1px solid var(--bb-hairline); } .home-search .bb-btn { grid-column: 1; } .home-quick-picks { padding-top: 13px; } .home-tiles { grid-template-columns: repeat(2, 1fr); } .home-cards { grid-template-columns: 1fr; } .home-cards > .home-card:first-child { grid-column: auto; } .home-cards > .home-card:first-child .home-card__art { height: 210px; } .home-band--evening { margin-inline: 16px; padding: 24px 18px; } .home-areas { grid-template-columns: 1fr; } .home-guides { grid-template-columns: 1fr; } .home-hero__tab { font-size: 12px; } }