/* --------------------------------------------------------------------------- Booking panel: "Book a stay" in the nav opens one dropdown holding the date picker and the guest steppers. Figma: Search bar 280:293, Picker: When 281:1111, Picker: Who 282:1315. Lives on search-results.html. It was tried in the hero of the location pages, where the hero clips its own overflow to hold its cover image in and kept shearing the pickers off, and then inline under the heading here. Top right of the properties page is where it settled: the panel has the whole page below it, and it sits on the page where someone is already narrowing a list rather than on the two front doors. Colours are sampled off the Figma render: cream #F1ECDB panel, moss #3B4126 type and selected day, #E7E2D0 range pill, rules moss at 19%. --------------------------------------------------------------------------- */ /* ---- the nav trigger ---- */ .ch-nav__actions { display: flex; align-items: center; gap: 1rem; } /* Moss on cream, not the other way round: this page's background is the cream, so the light pill the location-page heroes used disappeared into it. */ .ch-nav__book { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.25rem; border: 0; border-radius: 50em; background-color: var(--accent, #3b4126); color: #f1ecdb; font-family: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: opacity .18s ease; } .ch-nav__book:hover, .ch-nav__book:focus-visible { opacity: .88; } /* The bar is only a no-script fallback now. Hidden off the html.js flag set in rather than from the component script, so it never paints first and then vanishes; without script it stays, and still works. */ .js .ch-search { display: none; } /* ---- the panel ---- */ /* Fixed and parented to : nothing above it can clip it, whatever the section it is nominally anchored to does with its overflow. */ .ch-book { position: fixed; top: 0; left: 0; z-index: 1000; width: 30rem; max-width: calc(100vw - 1rem); background-color: #f1ecdb; border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(19, 21, 12, .28); color: var(--accent, #3b4126); font-size: .9375rem; text-align: left; overflow-y: auto; overscroll-behavior: contain; } .ch-book[hidden] { display: none; } .ch-book button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .ch-book button:focus-visible { outline: 2px solid var(--accent, #3b4126); outline-offset: 2px; } .ch-book__form { display: flex; flex-direction: column; padding: 1rem; gap: .25rem; } .ch-book__label { padding: .25rem 0 .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .ch-book__rule { height: 1px; margin: .75rem 0; background-color: rgba(59, 65, 38, .19); } /* ---- dates ---- */ .ch-book__cal { display: grid; grid-template-columns: 7rem 1fr; height: 15rem; } .ch-pick__months { position: relative; overflow-y: auto; padding: .25rem 0; border-right: 1px solid rgba(59, 65, 38, .19); scrollbar-width: none; } .ch-pick__months::-webkit-scrollbar { display: none; } .ch-pick__month-btn { display: block; width: 100%; height: 2rem; padding: 0 .875rem; text-align: left; line-height: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-pick__month-btn:hover { text-decoration: underline; } /* Marks every month the calendar is currently showing, so it spans more than one row when a scroll position straddles a boundary. Script sets the size. */ .ch-pick__month-mark { position: absolute; right: 0; width: 3px; border-radius: 2px; background-color: var(--accent, #3b4126); transition: top .15s ease, height .15s ease; pointer-events: none; } .ch-pick__cal { display: flex; flex-direction: column; min-height: 0; } .ch-pick__weekdays { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 .5rem; height: 2.25rem; align-items: center; border-bottom: 1px solid rgba(59, 65, 38, .19); font-size: .75rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; text-align: center; } .ch-pick__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 .5rem; scrollbar-width: none; } .ch-pick__scroll::-webkit-scrollbar { display: none; } .ch-pick__mlabel { padding: .75rem 0 .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .ch-pick__grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 2.5rem; } /* The cell carries the range pill so it runs edge to edge and closes the gaps between the day circles; the circle sits on top of it. */ .ch-pick__cell { position: relative; display: flex; align-items: center; justify-content: center; } .ch-pick__cell:before { content: ""; position: absolute; top: .125rem; bottom: .125rem; left: 0; right: 0; background-color: #e7e2d0; opacity: 0; } /* The pill covers the nights stayed -- arrival through the night before checkout -- so a Feb 21 to Mar 6 stay reads as the 13 nights it is, and the checkout day sits outside it. */ .ch-pick__cell.is-pill:before { opacity: 1; } .ch-pick__cell.is-pill-left:before { border-top-left-radius: 50em; border-bottom-left-radius: 50em; } .ch-pick__cell.is-pill-right:before { border-top-right-radius: 50em; border-bottom-right-radius: 50em; } .ch-pick__day { position: relative; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 100%; font-size: .875rem; line-height: 1; } .ch-pick__day:hover { box-shadow: inset 0 0 0 1px var(--accent, #3b4126); } /* Arrival is filled; checkout is ringed, the way the design distinguishes the night you sleep from the morning you leave. */ .ch-pick__cell.is-start .ch-pick__day { background-color: var(--accent, #3b4126); color: #f1ecdb; } .ch-pick__cell.is-end .ch-pick__day { box-shadow: inset 0 0 0 1.5px var(--accent, #3b4126); } .ch-pick__day[disabled] { opacity: .45; cursor: default; } .ch-pick__day[disabled]:hover { box-shadow: none; } .ch-pick__cell.is-empty { pointer-events: none; } .ch-book__dates-foot { display: flex; align-items: center; justify-content: space-between; height: 2.5rem; padding-top: .5rem; border-top: 1px solid rgba(59, 65, 38, .19); } .ch-pick__nights { font-size: .875rem; } .ch-pick__clear { font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .ch-pick__clear:hover { text-decoration: underline; } /* ---- guests ---- */ .ch-pick__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .375rem 0; } .ch-pick__row + .ch-pick__row { border-top: 1px solid rgba(59, 65, 38, .19); } .ch-pick__rowname { font-size: 1.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; } .ch-pick__rownote { font-size: .8125rem; line-height: 1.35; letter-spacing: -.01em; } .ch-pick__rownote a { color: inherit; } .ch-pick__step { flex: none; display: flex; align-items: center; justify-content: space-between; width: 7rem; } .ch-pick__stepbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 100%; box-shadow: inset 0 0 0 1px currentColor; transition: opacity .15s ease; } .ch-pick__stepbtn:hover:not([disabled]) { opacity: .7; } .ch-pick__stepbtn[disabled] { opacity: .35; cursor: default; } .ch-pick__stepbtn svg { display: block; width: .875rem; height: .875rem; } .ch-pick__count { font-size: 1.25rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; } /* ---- submit ---- */ /* Needs to outrank the `.ch-book button` reset above, which strips background and colour from every button in the panel. */ .ch-book button.ch-book__submit { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 3rem; margin-top: 1rem; border-radius: 50em; background-color: var(--accent, #3b4126); color: #f1ecdb; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; transition: opacity .18s ease; } .ch-book button.ch-book__submit:hover, .ch-book button.ch-book__submit:focus-visible { opacity: .9; } .ch-book button.ch-book__submit svg { width: 1rem; height: 1rem; } /* ---- narrow screens ---- */ @media screen and (max-width: 30em) { .ch-nav__book { height: 2.25rem; padding: 0 .875rem; font-size: .875rem; } .ch-nav__actions { gap: .75rem; } /* The month list is the first thing to go when width is short; the calendar still scrolls, so no month is out of reach. */ .ch-book__cal { grid-template-columns: 1fr; } .ch-pick__months { display: none; } .ch-pick__rowname { font-size: 1.125rem; } }