/* Bories v1 — wireframe prototype stylesheet Brand tokens from brand-brief.md. Fonts via Google Fonts (see ). */ :root{ --crema:#f5f3ef; --ink:#1d1c19; --warm-dark:#241f1b; --clay:#a86b43; --stone:#cdc4b6; --stone-soft:#e7e1d7; --maxw:1180px; --pad:clamp(20px,5vw,80px); --display:"Fraunces",Georgia,serif; --body:"EB Garamond",Georgia,serif; --label:"Jost",system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body); color:var(--ink); background:var(--crema); font-size:19px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ---------- type ---------- */ h1,h2,h3{font-family:var(--display);font-weight:380;line-height:1.08;letter-spacing:-.01em} h1{font-size:clamp(2.6rem,6vw,4.6rem)} h2{font-size:clamp(1.9rem,4vw,3rem)} h3{font-size:clamp(1.3rem,2.4vw,1.7rem)} p{max-width:60ch} .lead{font-size:1.2rem;color:#4a463f} .eyebrow{ font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:500; color:var(--clay); display:inline-block; margin-bottom:1rem; } /* ---------- buttons / labels ---------- */ .btn{ font-family:var(--label); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:500; padding:.85em 1.5em; border:1px solid var(--ink); background:var(--ink); color:var(--crema); display:inline-block; transition:.25s; cursor:pointer; } .btn:hover{background:var(--clay);border-color:var(--clay)} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--crema)} .btn--light{background:var(--crema);color:var(--ink);border-color:var(--crema)} .btn--light:hover{background:var(--clay);border-color:var(--clay);color:var(--crema)} /* ---------- header ---------- */ header.nav{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:1rem var(--pad); background:rgba(245,243,239,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--stone-soft); } .brand{font-family:var(--label);font-weight:600;letter-spacing:.25em;font-size:1rem;text-transform:uppercase} .brand small{display:block;font-size:.5rem;letter-spacing:.2em;color:#6b665d;font-weight:400} .brand .logo{height:46px;width:auto;display:block} @media(max-width:760px){.brand .logo{height:40px}} footer .logo-footer{height:52px;width:auto;display:block;margin-bottom:.8rem} nav.links{display:flex;gap:1.6rem;align-items:center} nav.links a{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:400;color:#4a463f} nav.links a:hover,nav.links a.active{color:var(--ink)} nav.links .btn{color:var(--crema)} nav.links .btn:hover{color:var(--crema)} @media(max-width:760px){nav.links a:not(.btn){display:none}} /* ---------- layout ---------- */ section{padding:clamp(56px,9vw,120px) var(--pad)} .wrap{max-width:var(--maxw);margin:0 auto} .dark{background:var(--warm-dark);color:var(--crema)} .dark .lead{color:#cfc7ba} .dark .eyebrow{color:var(--stone)} .center{text-align:center} .grid{display:grid;gap:2.4rem} .two{grid-template-columns:1fr 1fr} .three{grid-template-columns:repeat(3,1fr)} @media(max-width:860px){.two,.three{grid-template-columns:1fr}} /* ---------- image placeholders (wireframe) ---------- */ .ph{ background:var(--stone-soft); color:#8a8273; border:1px dashed #b7ad9c; display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--label);text-transform:uppercase;letter-spacing:.08em; font-size:.7rem;padding:1rem;min-height:240px; } .dark .ph{background:#332c26;border-color:#4d443c;color:#9c9182} .ph--hero{min-height:min(76vh,640px)} .ph--wide{min-height:340px} /* ---------- hero ---------- */ .hero{position:relative;color:var(--crema)} .hero .ph--hero{align-items:flex-end;justify-content:flex-start} .hero-overlay{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; padding:0 var(--pad);max-width:760px; } .hero-overlay h1{color:var(--crema);text-shadow:0 2px 5px rgba(0,0,0,.5), 0 8px 34px rgba(0,0,0,.5)} .hero-overlay .lead{color:#f1ece2;margin:1.2rem 0 2rem;text-shadow:0 1px 10px rgba(0,0,0,.55)} .hero-overlay .btn{align-self:flex-start} /* keep hero content in the upper-left so the house stays visible below */ .hero-overlay{justify-content:flex-start;padding-top:clamp(90px,16vh,160px)} /* ---------- room card ---------- */ .card .ph{min-height:300px;margin-bottom:1.2rem} .card h3{margin-bottom:.2rem} .card .meta{font-family:var(--label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:.7rem} .card p{font-size:1rem;color:#4a463f;margin-bottom:1rem} /* room detail block */ .room{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;margin-bottom:clamp(40px,7vw,90px)} .room:nth-child(even){grid-template-columns:.9fr 1.1fr} .room:nth-child(even) .room-txt{order:2} @media(max-width:860px){.room,.room:nth-child(even){grid-template-columns:1fr}.room:nth-child(even) .room-txt{order:0}} .room-txt .price{font-family:var(--label);font-size:.8rem;letter-spacing:.06em;color:#6b665d;margin:1rem 0 1.4rem} /* widget placeholder */ .widget{ background:var(--stone-soft);border:1px dashed #b7ad9c;color:#8a8273; font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem; padding:1.4rem;text-align:center;margin:1rem 0; } /* ---------- contact form ---------- */ form.contact{display:grid;gap:1rem;max-width:520px} form.contact label{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:#6b665d} form.contact input,form.contact textarea{ font-family:var(--body);font-size:1rem;padding:.8rem;border:1px solid var(--stone);background:#fff;color:var(--ink);width:100%; } .facts{list-style:none;display:grid;gap:.6rem;font-size:1rem} .facts li{border-bottom:1px solid var(--stone-soft);padding-bottom:.6rem} .facts span{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--clay);display:block} /* ---------- footer ---------- */ footer{background:var(--warm-dark);color:#cfc7ba;padding:clamp(48px,7vw,80px) var(--pad)} footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem} @media(max-width:760px){footer .wrap{grid-template-columns:1fr}} footer h4{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--stone);margin-bottom:1rem;font-weight:500} footer a{display:block;color:#cfc7ba;font-size:.95rem;margin-bottom:.5rem} footer a:hover{color:var(--clay)} footer .brand{color:var(--crema);margin-bottom:.6rem} .triangle{font-size:.85rem;color:#9c9182;margin-top:.6rem} /* sticky mobile CTA */ .sticky-cta{ position:fixed;bottom:0;left:0;right:0;z-index:60; display:none;padding:.7rem var(--pad);background:rgba(36,31,27,.96); } .sticky-cta .btn{width:100%;text-align:center} @media(max-width:760px){.sticky-cta{display:block}} .note{font-family:var(--label);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#b7ad9c;margin-top:.5rem} /* ---------- real photos (production) ---------- */ .shot{width:100%;object-fit:cover;display:block;border-radius:2px} .shot--hero{height:min(82vh,720px)} .shot--wide{height:clamp(260px,38vw,420px)} .shot--card{height:300px;margin-bottom:1.2rem} .shot--room{height:clamp(300px,40vw,440px)} .hero{position:relative} .hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,15,.62) 0%,rgba(20,17,15,.32) 45%,rgba(20,17,15,.05) 100%)} /* booking iframe */ .book-frame{width:100%;min-height:820px;border:0;border-radius:4px;background:#fff} @media(max-width:760px){.book-frame{min-height:680px}} /* ---------- amenity chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1.2rem;padding:0;list-style:none} .chip{font-family:var(--label);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#4a463f;background:var(--stone-soft);border-radius:100px;padding:.45em 1em} /* ---------- reviews / social proof ---------- */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem} @media(max-width:860px){.reviews{grid-template-columns:1fr}} .quote{border-left:2px solid var(--clay);padding:.1rem 0 .1rem 1.3rem} .quote p{font-family:var(--body);font-size:1.12rem;line-height:1.5;color:var(--ink);max-width:none} .quote cite{font-family:var(--label);font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--clay);display:block;margin-top:.9rem} .rating{font-family:var(--label);letter-spacing:.06em;font-size:.8rem;color:var(--clay)} .scores{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem 2.8rem;list-style:none;padding:0;margin:0 0 1.1rem} .score{text-align:center} .score-num{font-family:var(--display);font-size:2.1rem;font-weight:400;color:var(--clay);display:block;line-height:1} .score-src{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--ink);display:block;margin-top:.45rem} .score-n{font-family:var(--label);font-size:.64rem;letter-spacing:.05em;color:#8a8273;display:block;margin-top:.15rem} .scores-note{text-align:center;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:#8a8273;margin:0 0 3rem} /* ---------- book-direct benefits ---------- */ .benefits{display:flex;gap:1.4rem 2.4rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0 2rem;padding:0;list-style:none} .benefits li{font-family:var(--label);text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;color:var(--stone)} .benefits li::before{content:"·";color:var(--clay);margin-right:.6em;font-weight:700} /* ---------- map ---------- */ .map-embed{width:100%;height:360px;border:0;border-radius:4px;margin-top:1.6rem;filter:grayscale(.25) contrast(1.05)} /* ---------- excursions ---------- */ .exc{border-bottom:1px solid var(--stone-soft);padding:1.6rem 0} .exc h3{margin-bottom:.2rem} .exc .meta{font-family:var(--label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:.6rem} .exc p{font-size:1.02rem;color:#3f3b34} .exc details{margin-top:.7rem} .exc summary{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:500;cursor:pointer;color:var(--ink);padding:.4rem 0} .exc summary:hover{color:var(--clay)} .exc details[open] summary{color:var(--clay)} .exc .rates{font-size:.98rem;color:#3f3b34;padding:.4rem 0 .2rem;line-height:1.7} .exc .rates em{font-style:normal;color:#6b665d}