/* Arboretum — SpotHopper / Laskin Road house theme Montserrat, uppercase headings, charcoal + tan + terracotta, full-bleed image bands alternating with centered text panels. Matches the look of sorellasvb.com so the venue reads as part of the same family as Pacifica and Sorella's. */ /* Montserrat is loaded from in index.html (preconnect + stylesheet link) rather than @import here: an @import blocks rendering until this file has been downloaded and parsed, delaying the font by a full round trip. */ :root{ --ink:#434345; /* headings, footer, dark panels */ --ink-2:#202020; /* footer sub-strip */ --gold:#CFB98F; /* buttons, sub-headings, accents */ --terra:#B07655; /* hovers, accent rule */ --paper:#ffffff; --body:#4c4c4e; /* body copy */ --line:#e2ded7; --wrap:1120px; --pad:clamp(1.25rem, 5vw, 3rem); --panel-y:clamp(3.75rem, 8vw, 7rem); --f:"Montserrat", "Helvetica Neue", Arial, sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--body); font-family:var(--f); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;height:auto} a{color:inherit} h1,h2,h3{font-family:var(--f);margin:0;line-height:1.15;color:var(--ink)} p{margin:0 0 1.1rem} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200} .skip:focus{left:.5rem;top:.5rem} :focus-visible{outline:2.5px solid var(--terra);outline-offset:3px} /* ---------- type helpers ---------- */ .kicker{ text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; font-weight:700; color:var(--gold); margin:0 0 1.1rem; } .panel--dark .kicker, .band .kicker{color:var(--gold)} .h-1{ text-transform:uppercase; font-weight:700; letter-spacing:.02em; font-size:clamp(2.1rem, 5.2vw, 4rem); } .h-2{ text-transform:uppercase; font-weight:700; letter-spacing:.03em; font-size:clamp(1.15rem, 2.4vw, 1.9rem); color:var(--gold); margin:.9rem 0 0; } .panel--dark .h-1, .band .h-1{color:#fff} .divider{ width:58px;height:3px;background:var(--terra); border:0;margin:1.6rem auto 1.9rem; } .band .divider{margin-inline:auto} /* ---------- buttons ---------- */ .btn{ display:inline-block; font-family:var(--f); font-weight:600; font-size:.86rem; text-transform:uppercase; letter-spacing:.12em; padding:.85rem 2.4rem; background:var(--gold); color:#000; border:2px solid #000; text-decoration:none; cursor:pointer; transition:background-color .3s ease, color .3s ease, border-color .3s ease; } .btn:hover,.btn:focus{background:var(--terra);color:#000;border-color:#000} .btn--ghost{background:transparent;color:#fff;border-color:#fff} .btn--ghost:hover,.btn--ghost:focus{background:#fff;color:var(--ink);border-color:#fff} .btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)} .btn--dark:hover{background:#000;color:var(--gold);border-color:#000} .btn-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.9rem} /* ---------- header ---------- */ .topbar{ position:sticky;top:0;z-index:100; background:var(--paper); border-bottom:1px solid var(--line); } .topbar__inner{padding-block:.7rem} .brand{ display:flex;align-items:center;justify-content:center;gap:.6rem; text-decoration:none;color:var(--ink); padding:.4rem 0 .55rem; } .brand__mark{display:inline-flex;color:var(--terra)} .brand__word{ font-weight:700;text-transform:uppercase;letter-spacing:.34em; font-size:clamp(1.15rem,2.4vw,1.6rem); } .mainnav{border-top:1px solid var(--line)} .mainnav__toggle{ display:none; width:100%; font-family:var(--f);font-weight:700;text-transform:uppercase;letter-spacing:.18em; font-size:.78rem; background:none;border:0;padding:.9rem 0;cursor:pointer;color:var(--ink); } .mainnav__list{ list-style:none;margin:0;padding:.55rem 0; display:flex;flex-wrap:wrap;justify-content:center;gap:2rem; } .mainnav__list a{ text-decoration:none; font-weight:700;text-transform:uppercase;letter-spacing:.12em; font-size:.78rem;color:var(--ink); padding-bottom:3px;border-bottom:2px solid transparent; transition:border-color .2s ease,color .2s ease; } .mainnav__list a:hover{border-color:var(--terra)} /* ---------- image bands ---------- */ .band{ position:relative; min-height:62vh; display:flex;align-items:center;justify-content:center; text-align:center; padding:5rem var(--pad); background-size:cover; background-position:center; color:#fff; } .band::before{ content:"";position:absolute;inset:0; background:rgba(20,20,20,.46); } .band__inner{position:relative;max-width:44rem} .band--hero .band__inner{max-width:60rem} .band .h-1{color:#fff} .band p{color:rgba(255,255,255,.92)} .band--hero{min-height:88vh} .band--tall{min-height:74vh} .band--short{min-height:46vh} /* WebP with a JPEG fallback via image-set(); the second entry is what browsers without WebP (and without image-set) fall back to. */ .band--hero{background-image:linear-gradient(rgba(20,20,20,.15),rgba(20,20,20,.15)),url("../img/hero.jpg")} .band--space{background-image:url("../img/glasshouse.jpg")} .band--gatherings{background-image:url("../img/banquet.jpg")} .band--food{background-image:url("../img/dining.jpg")} .band--visit{background-image:url("../img/oceanfront.jpg")} @supports (background-image:image-set(url("x.webp") type("image/webp"))){ .band--hero{background-image:linear-gradient(rgba(20,20,20,.15),rgba(20,20,20,.15)),image-set(url("../img/hero.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"))} .band--space{background-image:image-set(url("../img/glasshouse.webp") type("image/webp"),url("../img/glasshouse.jpg") type("image/jpeg"))} .band--gatherings{background-image:image-set(url("../img/banquet.webp") type("image/webp"),url("../img/banquet.jpg") type("image/jpeg"))} .band--food{background-image:image-set(url("../img/dining.webp") type("image/webp"),url("../img/dining.jpg") type("image/jpeg"))} .band--visit{background-image:image-set(url("../img/oceanfront.webp") type("image/webp"),url("../img/oceanfront.jpg") type("image/jpeg"))} } @supports (background-image:-webkit-image-set(url("x.webp") type("image/webp"))){ .band--hero{background-image:linear-gradient(rgba(20,20,20,.15),rgba(20,20,20,.15)),-webkit-image-set(url("../img/hero.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"))} .band--space{background-image:-webkit-image-set(url("../img/glasshouse.webp") type("image/webp"),url("../img/glasshouse.jpg") type("image/jpeg"))} .band--gatherings{background-image:-webkit-image-set(url("../img/banquet.webp") type("image/webp"),url("../img/banquet.jpg") type("image/jpeg"))} .band--food{background-image:-webkit-image-set(url("../img/dining.webp") type("image/webp"),url("../img/dining.jpg") type("image/jpeg"))} .band--visit{background-image:-webkit-image-set(url("../img/oceanfront.webp") type("image/webp"),url("../img/oceanfront.jpg") type("image/jpeg"))} } @media (min-width:900px) and (hover:hover){ .band{background-attachment:fixed} } /* ---------- text panels ---------- */ .panel{padding-block:var(--panel-y);text-align:center} .panel__inner{max-width:52rem;margin-inline:auto} .panel p{max-width:44ch;margin-inline:auto;color:var(--body)} .panel .lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); max-width:52ch; color:var(--ink); } .panel--dark{background:var(--ink);color:#fff} .panel--dark p{color:rgba(255,255,255,.85)} .panel--tint{background:#faf8f4} .banner{ background:var(--ink);color:#fff;text-align:center; padding:1.25rem var(--pad); font-size:.82rem;letter-spacing:.16em;text-transform:uppercase; } .banner a{color:var(--gold);text-decoration:none} .banner a:hover{color:#fff} .banner span{white-space:nowrap} .banner .sep{opacity:.4;margin:0 .8rem} /* ---------- gatherings list ---------- */ .gatherings-list{ list-style:none;margin:2.5rem auto 0;padding:0; display:flex;flex-wrap:wrap;justify-content:center; gap:2.75rem 3rem;text-align:center; } .gatherings-list li{flex:0 1 15rem} .gatherings-list h3{ text-transform:uppercase;letter-spacing:.08em; font-size:1rem;font-weight:700;color:var(--ink); margin-bottom:.6rem; } .gatherings-list .g-field{ display:block;font-size:.88rem;line-height:1.55;color:var(--body); } .gatherings-list .g-field + .g-field{margin-top:.5rem} .gatherings-list .g-label{ display:block;text-transform:uppercase;letter-spacing:.14em; font-size:.62rem;font-weight:700;color:var(--gold); } /* ---------- food partners ---------- */ .partners{ display:grid;grid-template-columns:1fr 1fr;gap:2.5rem; margin-top:2.5rem;text-align:center; } .partners h3{ text-transform:uppercase;letter-spacing:.08em; font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.2rem; } .partners .p-tag{ display:block;text-transform:uppercase;letter-spacing:.16em; font-size:.62rem;font-weight:700;color:var(--gold);margin-bottom:1rem; } .partners p{font-size:.9rem;margin-bottom:.5rem} /* ---------- steps ---------- */ .steps{ list-style:none;margin:2.75rem 0 0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:2.25rem; text-align:center; } .steps__num{ display:block;font-weight:700;color:var(--gold); font-size:1.1rem;letter-spacing:.1em;margin-bottom:.9rem; } .steps h3{ text-transform:uppercase;letter-spacing:.08em; font-size:.95rem;font-weight:700;color:#fff;margin-bottom:.55rem; } .steps p{font-size:.86rem;color:rgba(255,255,255,.8);margin:0} /* ---------- visit facts ---------- */ .facts{ list-style:none;margin:2.25rem 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; text-align:center; } .facts dt{ text-transform:uppercase;letter-spacing:.16em; font-size:.64rem;font-weight:700;color:var(--gold);margin-bottom:.5rem; } .facts dd{margin:0;font-size:.92rem;line-height:1.6} .facts a{color:var(--ink);font-weight:600;text-underline-offset:3px} /* ---------- gallery ---------- */ .gallery{background:#3a3a3a;padding:0} .gallery__grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; } .gallery__grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1} .gallery__grid figure{margin:0;overflow:hidden} .gallery__grid img{transition:transform .5s ease;opacity:.94} .gallery__grid figure:hover img{transform:scale(1.06);opacity:1} /* ---------- inquiry form ---------- */ .form{max-width:44rem;margin:2.5rem auto 0;text-align:left} .form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem} .form__row{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem} .form__row--full{grid-column:1 / -1} .form__row label{ text-transform:uppercase;letter-spacing:.12em; font-size:.66rem;font-weight:700;color:var(--ink); } .form__row input,.form__row select,.form__row textarea{ font-family:var(--f);font-size:.95rem;color:var(--ink); background:#faf8f4; border:2px solid var(--line); padding:.7rem .8rem;border-radius:0; transition:border-color .2s ease,background-color .2s ease; } .form__row input:focus,.form__row select:focus,.form__row textarea:focus{ outline:none;border-color:var(--gold);background:#fff; } .form__row textarea{resize:vertical} .form__row--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form .btn{margin-top:.5rem} .form__note{margin-top:1rem;font-size:.88rem;min-height:1.2em;text-align:left} .form__note.is-ok{color:#2e6b46} .form__note.is-err{color:#a23b2b} /* ---------- footer ---------- */ .foot{background:var(--ink);color:#fff;padding-block:clamp(2.75rem,6vw,4.25rem)} .foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem} .foot h2{ text-transform:uppercase;letter-spacing:.1em; font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:1rem; } .foot p{margin:0 0 .35rem;font-size:.9rem;color:rgba(255,255,255,.82)} .foot a{color:#fff;text-decoration:none} .foot a:hover{color:var(--gold)} .foot__social{display:flex;gap:1rem;margin-top:.4rem} .foot__strip{ background:var(--ink-2);color:rgba(255,255,255,.7); text-align:center;padding:1.4rem var(--pad); font-size:.8rem;letter-spacing:.06em; } .foot__strip a{color:var(--gold);text-decoration:none} /* ---------- reveal ---------- */ .reveal{opacity:1;transform:none} .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} .js .reveal.in{opacity:1;transform:none} .reveal-all .reveal{opacity:1!important;transform:none!important;transition:none!important} /* ---------- responsive ---------- */ @media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} .gallery__grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:680px){ .mainnav__toggle{display:block} .mainnav__list{display:none;flex-direction:column;gap:0;padding:0} .mainnav__list.is-open{display:flex} .mainnav__list li{width:100%;border-top:1px solid var(--line);flex:none} .mainnav__list a{display:block;text-align:center;padding:.95rem 0;border-bottom:0} .partners,.form__grid,.facts,.steps{grid-template-columns:1fr} .gallery__grid{grid-template-columns:repeat(2,1fr)} .band{background-attachment:scroll} .banner span{display:block} .banner .sep{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .band{background-attachment:scroll} .js .reveal{opacity:1;transform:none;transition:none} .gallery__grid figure:hover img{transform:none} } /* ---------- h1 sub-line ---------- Keeps the display headline while giving the H1 the term people actually search for. Reads as a kicker under the rule, not as a second heading. */ .h-1__sub{ display:block; margin-top:1.1rem; font-size:clamp(.68rem,1.1vw,.8rem); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); } /* ---------- faq ---------- */ .faq{ max-width:46rem;margin:2.5rem auto 0;text-align:left; border-top:1px solid var(--line); } .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0;position:relative; font-weight:700;font-size:.78rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink); transition:color .2s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--terra)} .faq summary::after{ content:"";position:absolute;right:.4rem;top:50%; width:.6rem;height:.6rem;margin-top:-.45rem; border-right:2px solid var(--gold);border-bottom:2px solid var(--gold); transform:translateY(-.1rem) rotate(45deg);transform-origin:center; transition:transform .25s ease; } .faq details[open] summary::after{transform:translateY(.12rem) rotate(225deg)} .faq details p{ margin:0 0 1.35rem;max-width:none; font-size:.95rem;line-height:1.75; } .faq details a{color:var(--terra)} /* ---------- gathering landing pages ---------- */ /* Shorter hero than the homepage: these pages lead with copy, not a full bleed. */ .band--page{min-height:58vh} .band--page .band__inner{max-width:54rem} /* Reusable band backgrounds, so a page picks its photo with one class. */ .band--img-hero{background-image:url("../img/hero.jpg")} .band--img-glasshouse{background-image:url("../img/glasshouse.jpg")} .band--img-shower{background-image:url("../img/shower.jpg")} .band--img-workshop{background-image:url("../img/workshop.jpg")} .band--img-dining{background-image:url("../img/dining.jpg")} .band--img-oceanfront{background-image:url("../img/oceanfront.jpg")} .band--img-vignette{background-image:url("../img/vignette.jpg")} .band--img-banquet{background-image:url("../img/banquet.jpg")} .band--img-conservatory{background-image:url("../img/conservatory.jpg")} @supports (background-image:image-set(url("x.webp") type("image/webp"))){ .band--img-hero{background-image:image-set(url("../img/hero.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"))} .band--img-glasshouse{background-image:image-set(url("../img/glasshouse.webp") type("image/webp"),url("../img/glasshouse.jpg") type("image/jpeg"))} .band--img-shower{background-image:image-set(url("../img/shower.webp") type("image/webp"),url("../img/shower.jpg") type("image/jpeg"))} .band--img-workshop{background-image:image-set(url("../img/workshop.webp") type("image/webp"),url("../img/workshop.jpg") type("image/jpeg"))} .band--img-dining{background-image:image-set(url("../img/dining.webp") type("image/webp"),url("../img/dining.jpg") type("image/jpeg"))} .band--img-oceanfront{background-image:image-set(url("../img/oceanfront.webp") type("image/webp"),url("../img/oceanfront.jpg") type("image/jpeg"))} .band--img-vignette{background-image:image-set(url("../img/vignette.webp") type("image/webp"),url("../img/vignette.jpg") type("image/jpeg"))} .band--img-banquet{background-image:image-set(url("../img/banquet.webp") type("image/webp"),url("../img/banquet.jpg") type("image/jpeg"))} .band--img-conservatory{background-image:image-set(url("../img/conservatory.webp") type("image/webp"),url("../img/conservatory.jpg") type("image/jpeg"))} } @supports (background-image:-webkit-image-set(url("x.webp") type("image/webp"))){ .band--img-hero{background-image:-webkit-image-set(url("../img/hero.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"))} .band--img-glasshouse{background-image:-webkit-image-set(url("../img/glasshouse.webp") type("image/webp"),url("../img/glasshouse.jpg") type("image/jpeg"))} .band--img-shower{background-image:-webkit-image-set(url("../img/shower.webp") type("image/webp"),url("../img/shower.jpg") type("image/jpeg"))} .band--img-workshop{background-image:-webkit-image-set(url("../img/workshop.webp") type("image/webp"),url("../img/workshop.jpg") type("image/jpeg"))} .band--img-dining{background-image:-webkit-image-set(url("../img/dining.webp") type("image/webp"),url("../img/dining.jpg") type("image/jpeg"))} .band--img-oceanfront{background-image:-webkit-image-set(url("../img/oceanfront.webp") type("image/webp"),url("../img/oceanfront.jpg") type("image/jpeg"))} .band--img-vignette{background-image:-webkit-image-set(url("../img/vignette.webp") type("image/webp"),url("../img/vignette.jpg") type("image/jpeg"))} .band--img-banquet{background-image:-webkit-image-set(url("../img/banquet.webp") type("image/webp"),url("../img/banquet.jpg") type("image/jpeg"))} .band--img-conservatory{background-image:-webkit-image-set(url("../img/conservatory.webp") type("image/webp"),url("../img/conservatory.jpg") type("image/jpeg"))} } /* ---------- breadcrumb ---------- */ .crumbs{background:#faf8f4;border-bottom:1px solid var(--line)} .crumbs ol{ list-style:none;margin:0;padding:.85rem 0; display:flex;flex-wrap:wrap;gap:.5rem; font-size:.66rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase; } .crumbs li{color:var(--body)} .crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--gold)} .crumbs a{color:var(--ink);text-decoration:none} .crumbs a:hover{color:var(--terra)} .crumbs [aria-current]{color:var(--body)} /* ---------- sibling page links ---------- */ .siblings{ list-style:none;margin:2.5rem 0 0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; } .siblings a{ display:flex;align-items:center;justify-content:center; min-height:5.5rem;padding:1rem; border:2px solid rgba(255,255,255,.25); color:#fff;text-decoration:none;text-align:center; font-size:.72rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; transition:border-color .2s ease,background-color .2s ease,color .2s ease; } .siblings a:hover{border-color:var(--gold);background:var(--gold);color:var(--ink)} /* ---------- footer gathering list ---------- */ .foot__list{list-style:none;margin:0;padding:0} .foot__list li{margin-bottom:.35rem;font-size:.9rem} .foot__list a{color:rgba(255,255,255,.82)} .foot__list a:hover{color:var(--gold)} /* Homepage gatherings become links once the landing pages exist. */ .gatherings-list h3 a{ color:inherit;text-decoration:none; border-bottom:2px solid var(--gold); padding-bottom:.15rem; transition:color .2s ease,border-color .2s ease; } .gatherings-list h3 a:hover{color:var(--terra);border-color:var(--terra)} @media (max-width:900px){ .siblings{grid-template-columns:repeat(2,1fr)} .foot__grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ .siblings{grid-template-columns:1fr} .foot__grid{grid-template-columns:1fr} } /* ---------- nav dropdown ---------- CSS-only disclosure: opens on hover and on :focus-within, so keyboard users reach it by tabbing. On mobile the sub-items just render inline in the already-toggled menu. */ .mainnav__list .has-sub{position:relative} .has-sub > a::after{ content:"";display:inline-block; width:.32rem;height:.32rem;margin-left:.45rem;vertical-align:middle; border-right:2px solid var(--gold);border-bottom:2px solid var(--gold); transform:translateY(-2px) rotate(45deg); } .subnav{ list-style:none;margin:0;padding:.4rem 0; position:absolute;z-index:120; top:calc(100% + .55rem + 1px);left:50%;transform:translateX(-50%); min-width:15rem; background:var(--paper); border:1px solid var(--line); box-shadow:0 14px 30px rgba(0,0,0,.10); opacity:0;visibility:hidden; transition:opacity .18s ease,visibility .18s ease; } /* invisible bridge so the pointer can cross the gap without closing the menu */ .subnav::before{content:"";position:absolute;left:0;right:0;top:-.9rem;height:.9rem} .has-sub:hover > .subnav, .has-sub:focus-within > .subnav{opacity:1;visibility:visible} .subnav a{ display:block;padding:.62rem 1.15rem; font-size:.72rem;font-weight:600;letter-spacing:.1em; white-space:nowrap;border-bottom:0; } .subnav a:hover{background:#faf8f4;color:var(--terra)} .subnav a[aria-current]{color:var(--terra)} @media (max-width:680px){ .mainnav__list .has-sub{width:100%} .subnav{ position:static;transform:none; opacity:1;visibility:visible; min-width:0;padding:0; background:transparent;border:0;box-shadow:none; } .subnav::before{display:none} .subnav a{ padding:.78rem 0;font-size:.7rem;font-weight:600; color:var(--body);letter-spacing:.14em; } }