/* ratecla.im. Holiday redesign: a booking-site layout people already know (a photo hero with a search bar, listing cards, a price that drops), made calmer and clearer. Sunlit sand, deep sea navy, turquoise for action, coral for the price you claimed. One friendly typeface, big type, big targets. */ :root{ --bg:#fbf7f0; /* sun-bleached sand */ --bg-2:#f3ece0; --card:#ffffff; --ink:#0d2238; /* deep sea navy */ --ink-2:#3b4f63; --mut:#6a7886; --line:#e7dfd1; --line-2:#d9cfbe; --sea:#3b7612; /* leaf green from the logo, dark enough for text: links, labels */ --sea-2:#2d5c0c; --sea-tint:#eef8dd; --lime-2:#9fe04c; /* hover on lime fills */ --coral:#e8553a; /* the claimed price */ --coral-tint:#fde9e2; --peach:#e4f5cb; /* the hotels band: a soft wash of the logo green */ --lime:#b0ee65; /* the logo: button fills, highlights (navy text on it) */ --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --ease:cubic-bezier(.16,1,.3,1); --gutter:clamp(16px,4vw,48px); --r:22px; --shadow:0 1px 2px rgba(13,34,56,.06),0 12px 32px -12px rgba(13,34,56,.18); --shadow-lg:0 2px 4px rgba(13,34,56,.06),0 30px 60px -20px rgba(13,34,56,.35); /* Higgsfield stills (tools/generate-images.sh). Each sits on a sand fallback, so the page reads while a file is missing; tools/build-dist.sh refuses to ship until every one exists. */ --img-hero:url("/assets/img/hero.webp?v=34c316ee"); --img-request:url("/assets/img/request.webp?v=d338cb3e"); --img-desk:url("/assets/img/desk.webp?v=1ac140c3"); --img-room:url("/assets/img/room.webp?v=c82dd326"); --img-hotels:url("/assets/img/hotels.webp?v=c2507749"); color-scheme:light; } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased} ::selection{background:var(--lime);color:var(--ink)} a{color:var(--sea);text-underline-offset:3px;text-decoration-thickness:1.5px} a:hover{color:var(--sea-2)} :focus-visible{outline:3px solid var(--sea);outline-offset:3px;border-radius:6px} img,svg{display:block} [hidden]{display:none!important} @keyframes rc-blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px;top:8px;z-index:70;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px} .skip:focus{left:12px;color:#fff} .page{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip} main{flex:1} .wrap{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);width:100%} .sec{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px)} .eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sea)} .h2{margin:0;font-weight:800;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance} .lead{margin:16px 0 0;font-size:clamp(18px,1.5vw,20px);color:var(--ink-2);max-width:46ch;text-wrap:pretty} .head{margin-bottom:clamp(36px,5vw,64px)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:14px;background:var(--lime);color:var(--ink);font:inherit;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;transition:background .2s,transform .15s,gap .3s var(--ease)} .btn:hover{background:var(--lime-2);color:var(--ink);transform:translateY(-1px)} .btn:active{transform:translateY(1px)} .btn svg{flex:none} .btn--arrow:hover{gap:16px} /* no white-space:nowrap: a translated chip label that doesn't fit on one line should wrap the pill taller, not overflow it */ .chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;line-height:1;padding:7px 11px;border-radius:999px;background:var(--sea-tint);color:var(--sea-2)} .chip--glass{background:rgba(255,255,255,.88);color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .chip--coral{background:var(--coral-tint);color:#b23a22} /* ---------- header ---------- */ .top{position:sticky;top:0;z-index:20;background:rgba(251,247,240,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)} /* the header lines up with the hero photo's edges, not the narrower text column */ .top .wrap{max-width:calc(1400px + 2 * var(--gutter))} /* flex-wrap: longer translated nav/switcher labels drop to a second row instead of overflowing the sticky header */ .top nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;min-height:68px} .brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.03em} .brand:hover{color:var(--ink)} .links{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(12px,2.4vw,30px);font-size:16px;font-weight:600} .links a{color:var(--ink-2);text-decoration:none} .links a:hover{color:var(--ink)} .links .btn{min-height:44px;padding:0 18px;font-size:15px;color:var(--ink)} @media (max-width:760px){.links > a:not(.btn){display:none}} /* ---------- hero: a holiday photo with the search bar on it ---------- */ .hero{position:relative;padding:clamp(12px,1.6vw,20px) var(--gutter) 0} .hero__photo{position:relative;max-width:1400px;margin:0 auto;min-height:min(86vh,780px);border-radius:clamp(22px,3vw,36px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,4vw,56px) clamp(20px,4vw,56px) calc(clamp(44px,5vw,64px) + clamp(24px,3vw,40px)); background:linear-gradient(180deg,rgba(13,34,56,.05) 30%,rgba(13,34,56,.62) 100%),var(--img-hero) center 55%/cover no-repeat,linear-gradient(160deg,#9fd3e0,#f3d9b6)} .hero__status{position:absolute;top:clamp(16px,2.4vw,28px);left:clamp(16px,2.4vw,28px)} /* overflow-wrap:anywhere on the headline (and the redacted word inside it): a German/Polish compound word can be longer than the 12ch box on its own, so it needs to be able to break mid-word rather than push past the edge */ .hero h1{margin:0;color:#fff;font-weight:800;font-size:clamp(46px,9vw,124px);line-height:.95;letter-spacing:-.045em;max-width:12ch;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 2px 30px rgba(13,34,56,.35)} .redact{position:relative;display:inline-block;max-width:100%;overflow-wrap:anywhere} .redact::after{content:"";position:absolute;left:-.03em;right:-.03em;top:.12em;bottom:.06em;background:var(--ink);border-radius:.08em;transform-origin:right center;transform:scaleX(0);transition:transform 1000ms cubic-bezier(.77,0,.18,1) 500ms} .js .redact::after{transform:scaleX(1)} .js .revealed .redact::after{transform:scaleX(0)} .hero__sub{margin:18px 0 0;color:#fff;font-size:clamp(18px,1.6vw,22px);font-weight:500;max-width:40ch;text-shadow:0 1px 16px rgba(13,34,56,.5)} /* the search bar: the one control a traveller expects on a page like this */ .search{position:relative;z-index:2;max-width:1140px;margin:clamp(-64px,-5vw,-44px) auto 0;padding:0 clamp(0px,2vw,24px)} .search form{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;padding:8px;background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);border:1px solid var(--line)} .field{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:10px 16px;border-radius:14px;transition:background .2s} .field:hover,.field:focus-within{background:var(--bg)} .field label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--mut)} .field input{border:0;background:transparent;padding:2px 0;font:inherit;font-size:17px;font-weight:600;color:var(--ink);outline:none;min-width:0;text-overflow:ellipsis} .field input::placeholder{color:#8b97a2;font-weight:500} .field + .field{border-left:1px solid var(--line)} .field:hover + .field,.field:focus-within + .field{border-left-color:transparent} .search .btn{min-height:64px;padding:0 28px;border-radius:16px;font-size:18px} @media (max-width:860px){ .search form{grid-template-columns:1fr 1fr} .field:first-child{grid-column:1/-1} .field + .field{border-left:0} .field{background:var(--bg)} .search .btn{grid-column:1/-1;min-height:58px} } .search__msg{margin:14px 6px 0;font-size:15px;font-weight:600} .search__msg--err{color:#b23a22} .search__msg--ok{color:var(--sea-2)} .perks{list-style:none;margin:22px auto 0;padding:0 6px;max-width:1140px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15.5px;font-weight:600;color:var(--ink-2)} .perks li{display:flex;align-items:center;gap:8px} .perks li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:var(--sea-tint) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%233b7612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ---------- hotel search: #hotel's combobox suggestions ---------- a simple dropdown anchored to the field itself (unlike .dp/.gp below, which are appended to and placed with JS), so plain CSS keeps it under the field and within the viewport at any width. */ .hs{position:relative} .hs__pop{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:40;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;padding:6px;animation:dpIn .2s var(--ease)} .hs__list{list-style:none;margin:0;padding:0} .hs__opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:10px;cursor:pointer} .hs__opt[aria-selected="true"]{background:var(--sea-tint)} .hs__thumb{width:40px;height:40px;flex:none;border-radius:10px;object-fit:cover;background:var(--bg-2)} .hs__thumb--icon{display:flex;align-items:center;justify-content:center;color:var(--mut)} .hs__text{display:flex;flex-direction:column;min-width:0;gap:2px} .hs__name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:700;color:var(--ink)} .hs__badge{font-size:11px;padding:4px 8px} .hs__loc{font-size:13px;color:var(--mut);overflow-wrap:anywhere} .hs__chainnote{font-size:12px;color:var(--mut)} .hs__none{margin:8px 6px 4px;font-size:14px;color:var(--ink-2)} .hs__powered{margin:8px 6px 2px;font-size:12px;color:var(--mut);text-align:right} /* ---------- how it works: four listing-style cards ---------- */ .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(14px,1.6vw,22px);counter-reset:s} .step{counter-increment:s;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .step__pic{position:relative;aspect-ratio:4/3;background:var(--pic,none) center/cover no-repeat,linear-gradient(160deg,#cfe9ec,#f6e1c6)} .step__pic::before{content:counter(s);position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--card);color:var(--ink);font-weight:800;font-size:18px;box-shadow:var(--shadow)} .step__pic--request{--pic:var(--img-request)} .step__pic--desk{--pic:var(--img-desk)} .step__pic--room{--pic:var(--img-room)} .step__pic--card{display:grid;place-items:center;background:radial-gradient(120% 90% at 20% 10%,#d6f0f1,transparent 60%),radial-gradient(120% 100% at 100% 100%,#ffe2cc,transparent 55%),var(--bg-2)} .cardface{width:min(78%,240px);aspect-ratio:1.586;border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(135deg,#0d2238,#1f4a6b);box-shadow:var(--shadow-lg);transform:rotate(-4deg)} .cardface i{width:34px;height:25px;border-radius:6px;background:linear-gradient(135deg,#f5d28a,#c99a3c)} .cardface span{font-family:var(--mono);font-size:13px;letter-spacing:.1em;opacity:.85} .cardface b{align-self:flex-end;font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.18)} .step__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px} .step h3{margin:0;font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1.2} .step p{margin:0;color:var(--ink-2);font-size:16px} /* ---------- the example listing: a price that drops ---------- */ .deal{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .deal .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,96px);align-items:center} .listing{position:relative;background:var(--card);border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);max-width:520px;width:100%;justify-self:center} .listing__pic{position:relative;aspect-ratio:16/10;background:var(--img-hero) center 60%/cover no-repeat,linear-gradient(160deg,#9fd3e0,#f3d9b6)} /* bounded so a longer translated badge can't grow past the photo's edge before .chip above lets it wrap */ .listing__pic .chip{position:absolute;top:14px;max-width:calc(100% - 28px)} .listing__pic .chip--glass{left:14px} .listing__pic .chip--held{right:14px;background:var(--coral);color:#fff} .listing__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:14px} .listing__name{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .listing__name b{font-size:20px;font-weight:800;letter-spacing:-.02em} .listing__name span{font-size:14.5px;color:var(--mut)} .prices{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--line)} .was{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--mut)} .was s{font-size:22px;font-weight:700;color:var(--mut);text-decoration-thickness:2px;text-decoration-color:var(--coral)} .now{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;color:var(--ink-2)} .now b{font-size:clamp(40px,4.6vw,54px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--coral)} .listing__btns{display:grid;grid-template-columns:1fr auto;gap:10px} .listing__btns span{display:grid;place-items:center;min-height:50px;border-radius:14px;font-weight:700} .listing__btns span:first-child{background:var(--lime);color:var(--ink)} .listing__btns span:last-child{padding:0 20px;border:1.5px solid var(--line-2);color:var(--ink-2)} .deal__copy{display:flex;flex-direction:column;gap:28px} .bars{margin:0;display:flex;flex-direction:column;gap:22px} .row{display:flex;flex-direction:column;gap:10px} .row__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;color:var(--ink-2)} .row__head b{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .row__head b.sea{color:var(--sea)} .track{position:relative;height:16px;background:var(--bg-2);border-radius:999px;overflow:hidden} .fill{position:absolute;top:0;bottom:0;left:0;width:var(--w);border-radius:999px;transition:width 1s var(--ease)} .fill--ota{background:var(--ink-2)} .fill--range{left:14%;background:repeating-linear-gradient(135deg,rgba(59,79,99,.45) 0 6px,rgba(59,79,99,.2) 6px 12px);transition-delay:.5s;border-radius:0 999px 999px 0} .fill--rc{background:var(--sea);transition:width .8s var(--ease) .2s} .js .bars:not(.in) .fill{width:0} .bars figcaption{font-size:14.5px;color:var(--mut)} /* ---------- extension ---------- */ .ext .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,6vw,96px);align-items:center} .ext__copy .chip{margin-bottom:16px} .browser{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);min-width:0} .browser__bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg)} .browser__dots{display:flex;gap:6px} .browser__dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2)} .browser__url{flex:1;min-width:0;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .browser__body{display:flex;justify-content:flex-end;padding:18px;min-height:320px;background:linear-gradient(180deg,rgba(251,247,240,0) 40%,var(--bg)),var(--img-room) center/cover no-repeat} .popup{width:100%;max-width:360px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-lg);display:flex;flex-direction:column} .popup__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)} .popup__head b{font-weight:800} .popup__status{font-size:13.5px;font-weight:600;color:var(--mut)} .popup__status.done{color:var(--sea)} /* overflow-wrap:anywhere: a translated log line is ~30% longer and this box doesn't scroll, so an unbroken token needs to wrap rather than get clipped by .browser's overflow:hidden */ .log{padding:16px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.45;min-height:150px;margin:0;list-style:none;overflow-wrap:anywhere} .log li{display:flex;gap:8px;color:var(--mut)} .log li.now{color:var(--ink)} .log li.last{color:var(--sea);font-weight:700} .log li > span:first-child{flex:none;color:var(--sea)} .cursor{display:inline-block;width:7px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--sea);animation:rc-blink 1s steps(1) infinite} .popup__foot{margin-top:auto;padding:14px 16px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px} .price{position:relative;display:inline-block;font-weight:800;font-size:18px} .price::after{content:"";position:absolute;inset:1px -4px;border-radius:6px;background:var(--bg-2);transform-origin:right center;transform:scaleX(0);transition:transform 700ms cubic-bezier(.77,0,.18,1)} .popup:not(.done) .price::after{transform:scaleX(1)} .held{font-size:13.5px;font-weight:700;color:var(--coral);transition:opacity .5s} .popup:not(.done) .held{opacity:0} /* ---------- assistant (planned): MCP connection card ---------- */ .assist__body{max-width:640px;display:flex;flex-direction:column;gap:18px} .assist__body .chip{align-self:flex-start} .assist__mcp{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)} .assist__mcpLabel{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--mut)} /* user-select:all: one click selects the whole URL -- no copy button, nothing that looks clickable-to-connect (the service isn't live yet) */ .assist__mcpUrl{font-family:var(--mono);font-size:15px;color:var(--sea-2);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all} .assist__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--ink-2)} .assist__steps b{color:var(--ink)} .assist__limits{margin:0;font-size:15px;color:var(--ink-2)} .assist__more{margin:0;font-size:15px} /* ---------- for hotels ---------- */ .hotels{background:var(--peach)} .hotels .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px)} .hotels .eyebrow{color:var(--sea-2)} .hotels__photo{width:100%;aspect-ratio:4/5;max-height:720px;border-radius:28px;box-shadow:var(--shadow-lg);background:var(--img-hotels) center/cover no-repeat,linear-gradient(160deg,#f6d2b4,#fbe9d8)} .big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 0} .big b{font-size:clamp(64px,9vw,120px);line-height:.9;font-weight:800;letter-spacing:-.05em} .big span{font-size:18px;font-weight:600;color:var(--ink-2);max-width:18ch} .hsteps{list-style:none;margin:28px 0 0;padding:0;counter-reset:h;display:grid;gap:10px} .hsteps li{counter-increment:h;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.6);font-weight:600} .hsteps li::before{content:counter(h);flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:15px} .hotels__small{margin:18px 0 0;font-size:15px;color:var(--ink-2)} /* ---------- trust ---------- */ .trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(12px,1.4vw,18px)} .trust li{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)} .trust li::before{content:"";flex:none;width:40px;height:40px;border-radius:12px;background:var(--sea-tint) no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%233b7612' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .trust h3{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.01em} .trust p{margin:0;font-size:15.5px;color:var(--ink-2)} .legit{margin:28px 0 0;font-size:15px;color:var(--mut);max-width:80ch} /* ---------- faq ---------- */ .faqs{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px clamp(20px,3vw,40px)} .faq{padding:22px 0;border-top:1px solid var(--line)} .faq dt{font-weight:800;font-size:19px;letter-spacing:-.01em} .faq dd{margin:6px 0 0;color:var(--ink-2);max-width:56ch} /* ---------- closing ---------- */ .closing{padding:0 var(--gutter) clamp(48px,6vw,80px)} .closing__box{max-width:1400px;margin:0 auto;border-radius:clamp(22px,3vw,36px);overflow:hidden;padding:clamp(48px,8vw,112px) clamp(24px,5vw,72px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;color:#fff; background:linear-gradient(90deg,rgba(13,34,56,.78),rgba(13,34,56,.2)),var(--img-room) center/cover no-repeat,var(--ink)} /* same reasoning as .hero h1: a long compound word must break inside the 13ch box */ .closing h2{margin:0;font-weight:800;font-size:clamp(38px,6vw,84px);line-height:.98;letter-spacing:-.04em;max-width:13ch;overflow-wrap:anywhere;text-wrap:balance} .closing p{margin:12px 0 0;font-size:17px;opacity:.9} .closing .btn{background:var(--lime);color:var(--ink);min-height:58px;font-size:18px} .closing .btn:hover{background:var(--lime-2);color:var(--ink)} /* waitlist in the closing box (assets/rateclaim.js un-hides the form) */ .wl{flex:0 1 460px;min-width:0;width:100%} .wl__form[hidden],.wl__msg[hidden]{display:none} .wl__label{display:block;margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.02em;opacity:.9} .wl__row{display:flex;gap:8px;padding:6px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-lg)} .wl__row input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:0 14px;font:inherit;font-size:17px;font-weight:600;color:var(--ink);outline:none} .wl__row input::placeholder{color:#8b97a2;font-weight:500} .wl__row .btn{min-height:52px;font-size:17px;flex:none} .wl__row:focus-within{box-shadow:0 0 0 3px var(--lime),var(--shadow-lg)} .wl__human{margin-top:12px;min-height:65px} .wl__msg{margin:12px 0 0;font-size:15px;font-weight:600;color:#fff} .wl__msg--err{color:#ffd2c7} .wl__done{padding:22px 24px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-lg);overflow-wrap:anywhere} .wl__done[hidden]{display:none} .wl__done:focus{outline:none} .wl__done:focus-visible{box-shadow:0 0 0 3px var(--lime),var(--shadow-lg)} .wl__done h3{margin:0 0 8px;font-size:22px;font-weight:800;letter-spacing:-.02em} .closing .wl__done p{margin:0 0 8px;font-size:16px;line-height:1.5;opacity:1;color:var(--ink-2)} .wl__done strong{color:var(--ink)} .closing .wl__done .wl__small{font-size:14px;color:var(--mut);margin:8px 0 0} .wl__again{padding:0;border:0;background:none;color:var(--sea);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer} #wl-email[aria-invalid=true]{color:#c23a22} .wl__spin{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:wl-spin .7s linear infinite} .wl__form .btn[aria-busy=true] .wl__spin{display:inline-block} @keyframes wl-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.wl__form .btn[aria-busy=true] .wl__spin{display:none}} @media (max-width:520px){.wl__row{flex-direction:column}.wl__row input{min-height:48px}} /* ---------- footer ---------- */ .foot .wrap{padding-top:28px;padding-bottom:36px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:15px;color:var(--mut);border-top:1px solid var(--line)} .foot__brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800} .foot__links{display:flex;gap:22px;flex-wrap:wrap} .foot a{color:inherit} /* "Built with": generated from tools/built-with.json by tools/built-with.py. A row of pills in the .chip idiom: white pill on the sand, hairline border, a leaf-green dot for what is live. Planned ones sit back: no fill, dashed border, hollow dot, a small "planned" tag. The whole pill is the link's hit area. */ .built-with{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.3} .bw{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 7px;min-height:36px;max-width:100%;padding:6px 14px;background:var(--card);border:1px solid var(--line);border-radius:18px;transition:border-color .2s,box-shadow .2s} .bw::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sea)} .bw__role{color:var(--ink-2)} .built-with .bw__name{color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere} .built-with .bw__name::after{content:"";position:absolute;inset:-1px;border-radius:18px} .built-with .bw__name:focus-visible{outline:none} .built-with .bw__name:focus-visible::after{outline:3px solid var(--sea);outline-offset:3px} .bw:hover{border-color:var(--line-2);box-shadow:var(--shadow)} .built-with .bw:hover .bw__name{color:var(--sea-2)} .bw--planned{background:transparent;border-style:dashed;border-color:var(--line-2)} .bw--planned::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mut)} .bw--planned:hover{background:var(--card);box-shadow:none} .bw__tag{font-size:12px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;background:var(--bg-2);color:var(--ink-2)} .bw__paren{display:none} .bw--source{background:transparent;border-color:transparent} .bw--source::before{display:none} .bw--source:hover{border-color:var(--line);box-shadow:none} /* ---------- 404 ---------- */ .lost{min-height:calc(100vh - 140px);display:flex;flex-direction:column;justify-content:center;gap:24px;padding-top:80px;padding-bottom:80px} /* same reasoning as .hero h1: a long compound word must break inside the 12ch box */ .lost h1{margin:0;font-weight:800;font-size:clamp(46px,8vw,110px);line-height:.95;letter-spacing:-.045em;max-width:12ch;overflow-wrap:anywhere} .lost p{margin:0;font-size:19px;color:var(--ink-2);max-width:44ch} .lost code{font-family:var(--mono);font-size:15px;color:var(--sea-2)} .lost .btn{align-self:flex-start} /* ---------- dates: the search field, and the picker over it ---------- */ /* Without JS the field is two native date inputs; with JS a script hides them and puts a trigger button in their place. */ .field--dates{display:block;border:0;margin:0;min-width:0;padding:8px 16px 10px} .field--dates legend{padding:0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--mut)} .dates{display:flex;flex-direction:column;gap:2px;min-width:0} .dates__part{display:flex;flex-direction:column;min-width:0} .dates__part label{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--mut)} /* no outline:none here, or it would beat the global :focus-visible ring */ .dates input,.dates__btn{border:0;background:transparent;padding:2px 0;font:inherit;font-size:16px;font-weight:600;color:var(--ink);min-width:0;width:100%;text-align:left} .dates__btn{display:flex;flex-direction:column;gap:1px;cursor:pointer} /* the two dates are separate nowrap spans: the column is narrow on a laptop, and a wrapped second line beats a chopped date */ .dates__val{display:flex;flex-wrap:wrap;gap:0 4px;min-width:0} .dates__v{white-space:nowrap} .dates__btn[data-empty="1"] .dates__val{color:var(--ink-2);font-weight:500} /* no nowrap: "3 nights" runs longer translated ("3 noci"/"3 nocy" fine, but a locale with a longer unit name shouldn't overflow this narrow column) */ .dates__nights{display:block;font-size:12.5px;font-weight:600;color:var(--mut)} /* a popover under the search bar on a desktop; a bottom sheet on a phone */ .dp,.gp{position:absolute;z-index:60} .dp__backdrop,.gp__backdrop{display:none} .dp__panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:14px;animation:dpIn .24s var(--ease)} @keyframes dpIn{from{opacity:0;transform:translateY(-6px)}} .dp__top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin-bottom:12px} .dp__nav{width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:20px;line-height:1;cursor:pointer} .dp__nav:hover{background:var(--bg)} /* was nowrap+ellipsis: a translated month name ("październik 2026") can be longer than the nav row's 1fr track; min-width:0 lets that track shrink and wrapping to two lines (the row has height to spare) beats silently cutting it */ .dp__m{margin:0;text-align:center;font-size:15px;font-weight:800;letter-spacing:-.01em;min-width:0;overflow-wrap:break-word} .dp__chips{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .dp__chip{min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer} .dp__chip:hover:not(:disabled){background:var(--bg)} .dp__chip:disabled{opacity:.45;cursor:default} .dp__months{display:grid;gap:18px} .dp__grid{width:100%;border-collapse:collapse;table-layout:fixed} .dp__grid th{height:30px;font-size:12px;font-weight:700;color:var(--mut)} .dp__cell{padding:0;text-align:center} .dp__day{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:44px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer} .dp__day:not([aria-disabled="true"]):hover{background:rgba(13,34,56,.08)} .dp__day[aria-disabled="true"]{color:var(--mut);cursor:default} .dp__day--today{font-weight:800} .dp__day--today::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor} .dp__cell--in{background:var(--sea-tint)} .dp__cell--start{background:linear-gradient(90deg,transparent 50%,var(--sea-tint) 50%)} .dp__cell--end{background:linear-gradient(90deg,var(--sea-tint) 50%,transparent 50%)} .dp__day--sel{background:var(--sea);color:#fff} .dp__day--sel:not([aria-disabled="true"]):hover{background:var(--sea-2)} .dp__day--pre{box-shadow:inset 0 0 0 2px var(--sea);color:var(--sea-2)} .dp__note{margin:10px 2px 0;font-size:13px;color:var(--mut)} .dp__foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .dp__sum{flex:1;margin:0;font-size:15px;font-weight:700} .dp__btn{min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer} .dp__btn:hover{background:var(--bg)} .dp__btn--done{background:var(--lime);border-color:var(--lime)} .dp__btn--done:hover{background:var(--lime-2)} @media (min-width:780px){ .dp__top{grid-template-columns:44px 1fr 1fr 44px} .dp__months{grid-template-columns:1fr 1fr} } @media (max-width:779px){ .dp,.gp{position:fixed;left:0;right:0;top:0;bottom:0;display:flex;align-items:flex-end} .dp__backdrop,.gp__backdrop{display:block;position:absolute;inset:0;background:rgba(13,34,56,.45)} .dp__panel{width:100%;max-height:90vh;overflow:auto;border-radius:22px 22px 0 0;border-bottom:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));animation:dpUp .28s var(--ease)} .dp__chips{gap:6px} .dp__chip{padding:0 10px;font-size:13.5px} /* keep all three on one row */ } @keyframes dpUp{from{transform:translateY(28px)}} /* the two date inputs need the whole row on a phone, and so do the guests steppers */ @media (max-width:860px){.field--dates,.field--guests{grid-column:1/-1}} /* ...and room for the dates and the native control's own "mm/dd/yyyy". Below 1024 the two dates wrap to a second line, so the room goes to the hotel box. */ @media (min-width:861px){.search form{grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,.9fr) auto}} @media (min-width:1024px){.search form{grid-template-columns:minmax(0,1.85fr) minmax(0,1.7fr) minmax(0,.85fr) auto}} /* ---------- guests: the search field, and the steppers over it ---------- */ /* Without JS the field is three native number inputs; with JS a script hides them and puts a trigger in their place. Values post as adults, children, child_ages and rooms. */ .field--guests{display:block;border:0;margin:0;min-width:0;padding:8px 16px 10px} .field--guests legend{padding:0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--mut)} .guests{display:flex;flex-direction:column;gap:2px;min-width:0} .guests__part{display:flex;flex-direction:column;min-width:0} .guests__part label{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--mut)} .guests input,.guests__btn{border:0;background:transparent;padding:2px 0;font:inherit;font-size:16px;font-weight:600;color:var(--ink);min-width:0;width:100%;text-align:left} /* the trigger is a target in its own right: at least 44px tall (its one-line mobile summary is shorter than that on its own) */ .guests__btn{display:flex;align-items:center;min-height:44px;cursor:pointer} /* the summary is nowrap spans so a narrow column wraps it instead of cutting it */ .guests__val{display:flex;flex-wrap:wrap;gap:0 5px;min-width:0} .guests__v{white-space:nowrap} /* the panel: a popover under the search bar, a bottom sheet on a phone (the fixed/backdrop rules are shared with .dp above) */ .gp__panel{position:relative;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:14px;animation:dpIn .24s var(--ease)} .gp__h{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:-.01em} .gp__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px} .gp__row + .gp__row{border-top:1px solid var(--line)} .gp__lab{font-size:15px;font-weight:700} .gp__step{display:flex;align-items:center;gap:10px} .gp__n{min-width:2ch;text-align:center;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums} .gp__sq{width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:22px;line-height:1;cursor:pointer} .gp__sq:hover:not([aria-disabled="true"]){background:var(--bg)} .gp__sq[aria-disabled="true"]{opacity:.4;cursor:default} .gp__ages{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:10px} .gp__age{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--mut)} .gp__sel{width:100%;min-height:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;font-weight:600} .gp__foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:flex-end} .gp__done{min-height:44px;padding:0 22px;border:1px solid var(--lime);border-radius:12px;background:var(--lime);color:var(--ink);font:inherit;font-weight:700;cursor:pointer} .gp__done:hover{background:var(--lime-2)} @media (min-width:780px){ .gp__panel{overflow:visible} .gp__ages{grid-template-columns:1fr 1fr} } @media (max-width:779px){ .gp__panel{width:100%;max-width:none;max-height:90vh;overflow:auto;border-radius:22px 22px 0 0;border-bottom:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));animation:dpUp .28s var(--ease)} } /* ---------- language switcher: a dropdown in the header and footer ---------- */ /* tools/i18n.js buildSwitcher() renders