/* ========================================================================== CREW — Booking flow Brand tokens lifted from the public pages (forest/cream, Engravers Gothic + Pitch Sans, square edges). Layout and component structure carried over from the Uno app screens in CrewBookingOrdering/Presentation/*.xaml. @font-face lives in each page's , not here: the build stamps a content hash onto every root-absolute `?v=` reference it finds in HTML, so declaring the faces there gets the booking pages the same font URLs — and the same warm cache — as the rest of the site. A copy in this file would ask for a second, unstamped URL and re-download all six faces. ========================================================================== */ /* ---------- Tokens ---------- */ :root{ /* Surfaces */ --cream:#EEEFE3; --cream-2:#E6E7D9; /* card fill on cream */ --cream-3:#e4e5d7; /* image placeholder */ --forest:#212E2B; --forest-soft:#2C3B37; /* raised surface inside forest sections */ /* Ink */ --ink:#212E2B; --body:#4a544c; --muted:#6f786e; --on-forest:#EEEFE3; --on-forest-body:#d7dbcf; --on-forest-muted:#8f9a90; /* Lines */ --line:rgba(28,24,15,.14); --line-strong:rgba(28,24,15,.24); --line-on-forest:rgba(238,239,227,.22); /* Feedback */ --danger:#8C2F22; --danger-bg:#F6E7E4; --ok:#3F6B4A; /* Type */ --eg:'Engravers Gothic',sans-serif; --egx:'Engravers Gothic Ext',sans-serif; --ps:'Pitch Sans',sans-serif; /* Metrics */ --pad:22px; /* page gutter (mobile) */ --header-h:68px; --tabbar-h:84px; --maxw:640px; /* the flow is mobile-first; cap it on desktop */ } *{box-sizing:border-box;margin:0;padding:0} html{background:var(--cream);-webkit-text-size-adjust:100%} body{ background:var(--cream); color:var(--ink); font-family:var(--ps); font-weight:400; -webkit-font-smoothing:antialiased; min-height:100dvh; } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent} img{max-width:100%;display:block} input,select,textarea{font:inherit;color:inherit} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--forest);outline-offset:2px} /* ---------- Page shell ---------- */ .shell{max-width:var(--maxw);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream)} .page{flex:1;padding:0 var(--pad) calc(var(--tabbar-h) + 40px)} .page--flush{padding-left:0;padding-right:0} /* Site header — matches the site's page headers (burger, centred logo, lang, IG) */ .hdr{ position:sticky;top:0;z-index:60; height:var(--header-h); display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad); background:var(--cream); border-bottom:1px solid rgba(28,24,15,.12); } .hdr__burger{display:flex;flex-direction:column;gap:5px;width:30px;padding:6px 0} .hdr__burger span{display:block;height:2px;background:var(--forest)} .hdr__burger span:nth-child(1),.hdr__burger span:nth-child(3){width:26px} .hdr__burger span:nth-child(2){width:13px} .hdr__brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:1} .hdr__brand img{height:38px;width:auto} .hdr__right{display:flex;align-items:center;gap:18px} .hdr__lang{font-family:var(--ps);font-weight:500;font-size:14px;letter-spacing:2px} .hdr__ig{display:flex;color:var(--forest)} /* ---------- Typography ---------- */ .eyebrow{font-family:var(--eg);font-weight:700;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)} .eyebrow--onforest{color:var(--on-forest-muted)} /* The floor is 30px, not 38px: at 38px the two hero lines overflow a 320px phone, and the French lines are set from the same rule. */ .h-display{font-family:var(--egx);font-weight:700;font-size:clamp(30px,10.5vw,58px);line-height:1.02;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .h1{font-family:var(--eg);font-weight:700;font-size:clamp(30px,8vw,40px);line-height:1.06;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)} .h2{font-family:var(--eg);font-weight:700;font-size:22px;letter-spacing:2px;text-transform:uppercase;color:var(--ink)} .h3{font-family:var(--eg);font-weight:700;font-size:17px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink)} .lede{font-family:var(--ps);font-size:16px;line-height:1.62;color:var(--body);text-wrap:pretty} .body{font-family:var(--ps);font-size:15px;line-height:1.62;color:var(--body);text-wrap:pretty} .small{font-family:var(--ps);font-size:13.5px;line-height:1.55;color:var(--muted)} .num{font-family:var(--egx);font-weight:700;letter-spacing:.02em} /* ---------- Section rhythm ---------- */ .stack{display:flex;flex-direction:column} .stack>*+*{margin-top:var(--gap,16px)} .section{margin-top:38px} .section__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:15px 30px; font-family:var(--ps);font-weight:500;font-size:13px;letter-spacing:3px;text-transform:uppercase; border:2px solid var(--forest);background:transparent;color:var(--forest); transition:background .25s ease,color .25s ease,opacity .2s ease; text-align:center; } .btn--block{display:flex;width:100%} .btn--solid{background:var(--forest);color:var(--cream)} .btn--lg{padding:21px 30px;font-size:14px;letter-spacing:3.4px} .btn--onforest{border-color:var(--cream);color:var(--cream)} .btn--danger{border-color:rgba(140,47,34,.5);color:var(--danger)} .btn--quiet{border-color:transparent;color:var(--muted);letter-spacing:2px} .btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none} @media(hover:hover){ .btn:hover{background:var(--forest);color:var(--cream)} .btn--solid:hover{background:var(--forest-soft)} .btn--onforest:hover{background:var(--cream);color:var(--forest)} .btn--danger:hover{background:var(--danger);border-color:var(--danger);color:#fff} .btn--quiet:hover{background:transparent;color:var(--forest)} } .btn svg{flex:0 0 auto} /* Circular icon button (back / bell / avatar) */ .iconbtn{ width:44px;height:44px;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line-strong);background:transparent;color:var(--forest); transition:background .25s ease,color .25s ease; } @media(hover:hover){.iconbtn:hover{background:var(--forest);color:var(--cream)}} /* Back bar sits above page content */ .backbar{padding:18px 0 4px} /* ---------- Cards ---------- */ .card{border:1px solid var(--line-strong);background:transparent} .card--fill{background:var(--cream-2)} .card__body{padding:20px} .card--onforest{border-color:var(--line-on-forest)} /* Tappable row: icon + label/value + chevron (Home timeframe, My Bookings) */ .row{ display:flex;align-items:center;gap:16px;width:100%; padding:18px 20px;text-align:left; border:1px solid var(--line-strong);background:transparent; transition:background .25s ease; } @media(hover:hover){.row:hover{background:var(--cream-2)}} .row__icon{flex:0 0 auto;width:26px;display:flex;align-items:center;justify-content:center;color:var(--muted)} .row__main{flex:1;min-width:0} /* These are s inside buttons and anchors, so they must be blockified explicitly — left inline they run together and wrap mid-value. */ .row__label{display:block;font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .row__value{display:block;font-family:var(--eg);font-weight:700;font-size:17px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin-top:3px} .row__sub{display:block;font-family:var(--ps);font-size:14px;color:var(--body);margin-top:3px} .row__chev{flex:0 0 auto;color:var(--muted)} /* ---------- Chips ---------- */ .chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad)} .chiprow::-webkit-scrollbar{display:none} .chip{ flex:0 0 auto;display:inline-flex;align-items:center;gap:8px; padding:11px 16px; font-family:var(--ps);font-weight:500;font-size:13px;letter-spacing:1.6px;text-transform:uppercase; border:1px solid var(--line-strong);background:transparent;color:var(--ink); transition:background .2s ease,color .2s ease,border-color .2s ease; } .chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)} .chip svg{flex:0 0 auto} /* Static amenity tag (room card / pay summary) */ .tag{ display:inline-flex;align-items:center;gap:8px; padding:9px 12px;border:1px solid var(--line);background:var(--cream-2); font-family:var(--ps);font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--body); } .tagwrap{display:flex;flex-wrap:wrap;gap:8px} /* Badge over an image */ .badge{ position:absolute;z-index:2; padding:7px 12px; font-family:var(--eg);font-weight:700;font-size:10.5px;letter-spacing:2px;text-transform:uppercase; background:var(--forest);color:var(--cream); } /* ---------- Segmented control (Hourly / Daily, List / Map) ---------- */ .seg{display:flex;border:1px solid var(--line-strong);background:transparent} .seg__btn{ flex:1;padding:16px 10px; font-family:var(--ps);font-weight:500;font-size:13px;letter-spacing:2.6px;text-transform:uppercase; color:var(--muted);transition:background .2s ease,color .2s ease; } .seg__btn[aria-selected="true"]{background:var(--forest);color:var(--cream)} .seg--sm .seg__btn{padding:9px 16px;font-size:12px;letter-spacing:2px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto} /* ---------- Stepper (guest count) ---------- */ .stepper{display:flex;align-items:center;gap:0} .stepper__btn{ width:46px;height:46px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-strong);color:var(--forest); transition:background .2s ease,color .2s ease; } .stepper__btn+.stepper__btn{border-left:none} @media(hover:hover){.stepper__btn:hover{background:var(--forest);color:var(--cream)}} .stepper__btn[disabled]{opacity:.3;pointer-events:none} /* ---------- Date strip ---------- */ .datestrip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:2px var(--pad)} .datestrip::-webkit-scrollbar{display:none} .dateopt{ flex:0 0 auto;width:62px;padding:16px 6px;overflow:hidden; display:flex;flex-direction:column;align-items:center;gap:6px; border:1px solid var(--line-strong);background:transparent; transition:background .2s ease,color .2s ease,border-color .2s ease; } /* The cell is a fixed 62px, and the label is uppercased and letter-spaced, so anything longer than a short weekday has to clip rather than run into the next cell. T.todayShort is why French says 'Auj.' here. */ .dateopt__dow{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:var(--eg);font-weight:700;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)} .dateopt__day{font-family:var(--egx);font-weight:700;font-size:22px;color:var(--ink)} .dateopt[aria-pressed="true"]{background:var(--forest);border-color:var(--forest)} .dateopt[aria-pressed="true"] .dateopt__dow{color:var(--on-forest-muted)} .dateopt[aria-pressed="true"] .dateopt__day{color:var(--cream)} /* ---------- Time range bubbles + slot grid ---------- */ .range{display:flex;align-items:stretch;gap:12px} .range__side{ flex:1;padding:16px 10px;text-align:center; border:1px solid var(--line-strong);background:transparent; transition:background .2s ease,border-color .2s ease; } .range__side[aria-selected="true"]{background:var(--forest);border-color:var(--forest)} .range__label{display:block;font-family:var(--eg);font-weight:700;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)} .range__time{display:block;font-family:var(--egx);font-weight:700;font-size:22px;color:var(--ink);margin-top:5px;white-space:nowrap} .range__side[aria-selected="true"] .range__label{color:var(--on-forest-muted)} .range__side[aria-selected="true"] .range__time{color:var(--cream)} .range__arrow{display:flex;align-items:center;color:var(--muted)} .slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .slot{ padding:15px 4px; font-family:var(--ps);font-weight:500;font-size:14px;letter-spacing:.5px; border:1px solid var(--line-strong);background:transparent;color:var(--ink); transition:background .18s ease,color .18s ease,border-color .18s ease; } .slot[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)} .slot[disabled]{opacity:.3;pointer-events:none;text-decoration:line-through} /* ---------- Note / callout ---------- */ .note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);background:var(--cream-2)} .note svg{flex:0 0 auto;margin-top:1px;color:var(--muted)} .note--center{justify-content:center;text-align:center} /* ---------- Media ---------- */ /* display:block is load-bearing on the cards: aspect-ratio has no effect on an inline box, so the room photos were laying out at their natural portrait ratio instead of the 16:10 the card asks for. */ .media{display:block;position:relative;overflow:hidden;background:var(--cream-3)} .media img{width:100%;height:100%;object-fit:cover} .media--16x10{aspect-ratio:16/10} .media--4x3{aspect-ratio:4/3} .media--hero{aspect-ratio:5/4} .media__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(19,26,24,.82) 0%,rgba(19,26,24,0) 55%)} .media__caption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2} /* Only captions that actually sit over a photo/scrim go light. A caption on a light card keeps the ink palette — forcing cream there makes it invisible. */ .media__caption--onphoto .h2,.media__caption--onphoto .h3{color:var(--cream)} .media__caption--onphoto .small, .media__caption--onphoto .eyebrow{color:var(--on-forest-body)} /* ---------- Room card (space list) ---------- */ .room{border:1px solid var(--line-strong);background:transparent;overflow:hidden} .room__body{padding:22px 20px 24px} .room__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .room__name{font-family:var(--eg);font-weight:700;font-size:24px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink)} .room__cap{display:flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--ps);font-size:13.5px;color:var(--muted)} .room__price{text-align:right;white-space:nowrap} .room__price .amount{display:block;font-family:var(--egx);font-weight:700;font-size:26px;color:var(--ink);white-space:nowrap} .room__price .unit{font-family:var(--ps);font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px} /* ---------- Info grid (booking details) ---------- */ .infogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .infogrid__cell{padding:16px;border:1px solid var(--line-strong)} .infogrid__cell .row__label{margin-top:9px} .infogrid__cell .row__value{font-size:15px} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:7px} .field__label{font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .field__label .req{color:var(--danger)} .input{ width:100%;padding:15px 16px; font-family:var(--ps);font-size:16px;color:var(--ink); background:var(--cream-2);border:1px solid var(--line-strong);border-radius:0; transition:border-color .2s ease,background .2s ease; appearance:none; } .input::placeholder{color:var(--muted);opacity:.8} .input:focus{outline:none;border-color:var(--forest);background:#F4F5EA} .input[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)} textarea.input{min-height:96px;resize:vertical;line-height:1.55} select.input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f786e' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px; } .fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px} .field__error{font-family:var(--ps);font-size:12.5px;color:var(--danger)} /* ---------- Price summary ---------- */ .sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 2px} .sumrow__k{font-family:var(--ps);font-size:15px;color:var(--body)} .sumrow__v{font-family:var(--ps);font-size:15px;color:var(--body)} .sumrow--rule{border-top:1px solid var(--line);margin-top:4px;padding-top:16px} .sumrow--total .sumrow__k{font-family:var(--eg);font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--ink)} .sumrow--total .sumrow__v{font-family:var(--egx);font-weight:700;font-size:26px;color:var(--ink)} .sumrow--credit .sumrow__k,.sumrow--credit .sumrow__v{color:var(--ok)} /* ---------- Sticky footer CTA ---------- */ .stickycta{ /* Sits directly above the fixed tab bar — at bottom:0 the tab bar would cover it completely. The tab bar owns the safe-area inset below it. */ position:sticky; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index:40; padding:14px var(--pad); background:var(--cream);border-top:1px solid var(--line); } .stickycta .small{text-align:center;margin-top:10px;letter-spacing:1.6px;text-transform:uppercase;font-size:11.5px} /* ---------- Bottom tab bar (from Shell.xaml) ---------- Matched to the Uno app's bar rather than to the earlier HTML pass: the current tab is a filled disc with NO label under it, and the other three sit at full ink instead of the 40% wash that made them read as switched off. */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:50; max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:repeat(4,1fr); background:var(--cream);border-top:1px solid var(--line-strong); padding-bottom:env(safe-area-inset-bottom); } /* flex-start, not center: the current tab has no label, so centring its content would float its disc below the icons in the other three columns. */ .tab{ display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px; padding:9px 4px 11px;color:var(--body); } /* Every tab reserves the same 44px band, so all four glyphs share a baseline whether or not the disc behind one of them is painted. */ .tab__icon{ width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:background .2s ease,color .2s ease; } .tab__label{font-family:var(--eg);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase} .tab[aria-current="page"]{color:var(--ink)} .tab[aria-current="page"] .tab__icon{background:var(--forest);color:var(--cream)} .tab[aria-disabled="true"]{pointer-events:none} /* ---------- Overlay / modal ---------- */ .overlay{position:fixed;inset:0;z-index:80;background:rgba(19,26,24,.72);display:flex;align-items:center;justify-content:center;padding:24px} .modal{width:100%;max-width:360px;background:var(--cream);border:1px solid var(--line-strong);padding:26px 24px} /* ---------- Toast ---------- */ .toast{ position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px);transform:translateX(-50%); z-index:90;padding:11px 18px;background:var(--forest);color:var(--cream); font-family:var(--ps);font-size:13px;letter-spacing:1.4px;text-transform:uppercase; opacity:0;pointer-events:none;transition:opacity .22s ease;white-space:nowrap; } .toast[data-show="true"]{opacity:1} /* ---------- Spinner ---------- */ .spinner{width:34px;height:34px;margin:40px auto;border:2px solid var(--line-strong);border-top-color:var(--forest);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}*{transition-duration:.01ms!important}} /* ---------- Confirmation ---------- */ .confirm{min-height:calc(100dvh - var(--header-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:40px var(--pad) 60px} .confirm__mark{width:104px;height:104px;border:2px solid var(--forest);display:flex;align-items:center;justify-content:center;color:var(--forest)} /* ---------- Desktop polish ---------- */ @media (min-width:680px){ :root{--pad:32px;--header-h:80px} .hdr__brand img{height:46px} .shell{border-left:1px solid var(--line);border-right:1px solid var(--line)} .slots{grid-template-columns:repeat(5,minmax(0,1fr))} }