/* Theme Name: The Inn of Cape May Theme URI: https://innofcapemay.com Author: Hospitality Pro Solutions Author URI: https://hospitalityprosolutions.com Description: A bespoke, fully customizable Victorian-coastal theme for The Inn of Cape May — "Where History Meets the Shore." Built on the official brand system (Harbour Navy, Antique Brass, Cormorant & Jost). Every section, colour, image, and line of copy is editable from Appearance → Customize. Version: 2.3.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: inn-of-cape-may Tags: hospitality, hotel, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options */ /* ================================================================= THE INN OF CAPE MAY — theme styles Brand: Harbour Navy #154577 · Antique Brass #C4A265 · Cream Type: Cormorant (display) · Jost (interface) Colour tokens below are overridden from the Customizer in . ================================================================= */ :root{ --navy:#154577; --navy-deep:#0F3257; --brass:#C4A265; --bronze:#7A5A22; --champagne:#E7CF9A; --cream:#FFFDF8; --paper:#F6F1E7; --paper-2:#EFE8D8; --sage:#5E7A6B; --driftwood:#645E56; --ink:#1B1B1B; --line:rgba(21,69,119,.14); --line-soft:rgba(21,69,119,.08); --serif:"Cormorant","Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; --wrap:1240px; --pad:clamp(1.25rem,4vw,3.5rem); --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } body{ margin:0; font-family:var(--sans); font-weight:300; color:var(--ink); background:var(--cream); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--navy); text-decoration:none; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08; margin:0; color:var(--navy); } p{ margin:0 0 1rem; } ::selection{ background:var(--brass); color:var(--navy); } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .serif{ font-family:var(--serif); } /* ---------- accessibility ---------- */ .skip-link{ position:absolute; left:.5rem; top:-60px; z-index:300; background:var(--navy); color:var(--cream); padding:.8rem 1.4rem; font-family:var(--sans); font-size:.85rem; border-radius:0 0 4px 4px; transition:top .2s var(--ease); } .skip-link:focus{ top:0; } :focus-visible{ outline:3px solid var(--navy); outline-offset:2px; border-radius:2px; } .hero :focus-visible,.ev-hero :focus-visible,.dining :focus-visible,.testimonials :focus-visible, .feature :focus-visible,.plan-form__aside :focus-visible,.site-footer :focus-visible, .venues-bar :focus-visible,.site-header:not(.stuck) :focus-visible{ outline-color:var(--champagne); } [tabindex="-1"]:focus{ outline:none; } .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:.95rem 1.8rem; border-radius:2px; transition:all .3s var(--ease); cursor:pointer; border:1px solid transparent; } .btn--gold{ background:var(--brass); color:var(--navy-deep); } .btn--gold:hover{ background:var(--bronze); color:var(--cream); transform:translateY(-2px); } .btn--navy{ background:var(--navy); color:var(--cream); } .btn--navy:hover{ background:var(--navy-deep); transform:translateY(-2px); } .btn--outline{ border-color:currentColor; color:var(--navy); } .btn--outline:hover{ background:var(--navy); color:var(--cream); border-color:var(--navy); } .btn--ghost-light{ border-color:rgba(255,255,255,.6); color:#fff; } .btn--ghost-light:hover{ background:#fff; color:var(--navy); } /* ---------- section furniture ---------- */ .section{ padding:clamp(4rem,9vw,8rem) 0; position:relative; } .kicker{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bronze); margin-bottom:1.2rem; } .kicker::before{ content:""; width:34px; height:1px; background:var(--brass); } .kicker--center{ justify-content:center; } .shead{ max-width:720px; } .shead--center{ max-width:760px; margin-inline:auto; text-align:center; } .stitle{ font-size:clamp(2.1rem,4.6vw,3.6rem); letter-spacing:-.01em; } .ssub{ margin-top:1.2rem; font-size:1.08rem; color:var(--driftwood); } .em{ font-style:italic; color:var(--bronze); } /* reveal */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ================================================================= HEADER / NAV ================================================================= */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .4s var(--ease), box-shadow .4s, padding .4s; } .site-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.3rem 0; transition:padding .4s var(--ease); } .site-header.stuck{ background:rgba(255,253,248,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); } .site-header.stuck .site-header__bar{ padding:.7rem 0; } .brand-logo img{ width:auto; height:58px; transition:height .4s var(--ease); } .site-header.stuck .brand-logo img{ height:46px; } .brand-logo--text{ font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.1em; color:var(--navy); } /* on transparent hero, make logo/nav light */ .site-header:not(.stuck) .brand-logo--text{ color:#fff; } .site-header:not(.stuck) .brand-logo-slot img, .site-header:not(.stuck) .custom-logo{ filter:brightness(0) invert(1); } .site-header:not(.stuck) .main-nav a{ color:rgba(255,255,255,.92); } .site-header:not(.stuck) .nav-toggle span{ background:#fff; } .nav-cluster{ display:flex; align-items:center; gap:2rem; } .main-nav{ display:flex; gap:1.8rem; } .main-nav a{ font-family:var(--sans); font-weight:500; font-size:.82rem; letter-spacing:.06em; color:var(--navy); position:relative; padding:.3rem 0; } .main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--brass); transition:width .3s var(--ease); } .main-nav a:hover::after{ width:100%; } .nav-toggle{ display:none; width:30px; height:20px; position:relative; background:none; border:none; cursor:pointer; } .nav-toggle span{ position:absolute; left:0; height:2px; width:100%; background:var(--navy); border-radius:2px; transition:.3s var(--ease); } .nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:9px; } .nav-toggle span:nth-child(3){ top:18px; } body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(9px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2){ opacity:0; } body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); } /* ================================================================= HERO ================================================================= */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; isolation:isolate; } .hero__media{ position:absolute; inset:0; z-index:-2; } .hero__media img{ width:100%; height:100%; object-fit:cover; } .hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,50,87,.45),rgba(15,50,87,.35) 40%,rgba(15,50,87,.75)); } .hero__inner{ padding-block:8rem 4rem; max-width:880px; } .hero__eyebrow{ font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.8rem; } .hero__title{ color:#fff; font-weight:500; font-size:clamp(2.8rem,7vw,6rem); line-height:1; letter-spacing:-.01em; text-shadow:0 2px 40px rgba(0,0,0,.3); } .hero__title em{ font-style:italic; color:var(--champagne); } .hero__sub{ margin-top:1.6rem; font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:300; max-width:560px; color:rgba(255,255,255,.92); } .hero__cta{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; } .hero__scroll{ position:absolute; left:auto; right:1.8rem; bottom:1.8rem; transform:none; font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.8); display:flex; flex-direction:column; align-items:center; gap:.6rem; animation:heroScrollPulse 2.4s ease-in-out infinite; } @keyframes heroScrollPulse{ 0%,100%{ opacity:.55; transform:translateY(0); } 50%{ opacity:1; transform:translateY(6px); } } @media (prefers-reduced-motion: reduce){ .hero__scroll{ animation:none; } } .hero__scroll i{ width:1px; height:42px; background:linear-gradient(var(--champagne),transparent); display:block; } /* booking bar under hero */ .bookbar{ background:var(--navy); color:var(--cream); } .bookbar__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.4rem; padding:1.1rem 0; } .bookbar__field{ display:flex; flex-direction:column; gap:.2rem; padding-inline:1.4rem; border-right:1px solid rgba(231,207,154,.25); } .bookbar__field:last-of-type{ border-right:none; } .bookbar__field label{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); } .bookbar__field span{ font-family:var(--serif); font-size:1.1rem; } /* ================================================================= STORY / INTRO ================================================================= */ .story{ background:var(--cream); } .story__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; } .story__img{ position:relative; } .story__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; } .story__img::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.5); z-index:1; pointer-events:none; } .story__video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;} .story__video::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5);z-index:1;pointer-events:none;} .story__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;} .story__img .badge{ position:absolute; right:-22px; bottom:-22px; width:120px; height:120px; background:var(--navy); color:var(--champagne); border-radius:50%; display:grid; place-items:center; text-align:center; font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.3rem; line-height:1.2; border:1px solid var(--brass); z-index:2; } .story__body p{ font-size:1.12rem; color:var(--driftwood); } .story__body p:first-of-type{ font-size:1.3rem; color:var(--ink); } .stats{ display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap; } .stat b{ display:block; font-family:var(--serif); font-weight:500; font-size:2.6rem; color:var(--navy); line-height:1; } .stat span{ font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); } /* ================================================================= ROOMS ================================================================= */ .rooms{ background:var(--paper); } .rooms__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; } .room{ background:var(--cream); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s; } .room:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -28px rgba(15,50,87,.4); } .room__img{ aspect-ratio:4/3; overflow:hidden; } .room__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .room:hover .room__img img{ transform:scale(1.06); } .room__body{ padding:1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .room__name{ font-size:1.5rem; } .room__desc{ font-size:.92rem; color:var(--driftwood); flex:1; } .room__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.6rem; padding-top:.9rem; border-top:1px solid var(--line); } .room__price{ font-family:var(--serif); font-size:1.2rem; color:var(--navy); } .room__price small{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); } .room__link{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); } /* ================================================================= DINING ================================================================= */ .dining{ background:var(--navy); color:var(--cream); } .dining .stitle,.dining .kicker{ color:#fff; } .dining .kicker{ color:var(--champagne); } .dining .ssub{ color:rgba(246,241,231,.8); } .dining__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:3rem; } .venue{ position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(231,207,154,.25); display:flex; align-items:flex-end; } .venue img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .venue::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(15,50,87,.92)); } .venue:hover img{ transform:scale(1.05); } .venue__body{ position:relative; padding:2rem; z-index:1; } .venue__name{ color:#fff; font-size:2rem; } .venue__tag{ font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); margin-bottom:.5rem; } .venue__desc{ color:rgba(255,255,255,.85); font-size:.95rem; margin-top:.4rem; max-width:42ch; } /* ================================================================= HAPPENINGS ================================================================= */ .happenings{ background:var(--cream); } .hap__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; } .hap{ border:1px solid var(--line); background:var(--paper); padding:1.8rem 1.5rem; transition:border-color .3s, transform .3s; } .hap:hover{ border-color:var(--brass); transform:translateY(-4px); } .hap__day{ font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); } .hap__name{ font-size:1.4rem; margin:.4rem 0 .5rem; } .hap__desc{ font-size:.9rem; color:var(--driftwood); } /* ================================================================= WEDDINGS / FEATURE BAND ================================================================= */ .feature{ position:relative; color:#fff; isolation:isolate; } .feature__media{ position:absolute; inset:0; z-index:-2; } .feature__media img{ width:100%; height:100%; object-fit:cover; } .feature__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(15,50,87,.9),rgba(15,50,87,.55) 70%); } .feature__inner{ max-width:560px; padding-block:clamp(4rem,9vw,7rem); } .feature .stitle,.feature .kicker{ color:#fff; } .feature .kicker{ color:var(--champagne); } .feature p{ color:rgba(255,255,255,.9); font-size:1.1rem; margin:1.2rem 0 1.8rem; } /* ================================================================= EXPERIENCE / FEATURE GRID ================================================================= */ .experience{ background:var(--paper); } .exp__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3rem; background:var(--line); border:1px solid var(--line); } .exp{ background:var(--cream); padding:2.4rem; transition:background .3s; } .exp:hover{ background:var(--paper-2); } .exp__icon{ width:46px; height:46px; margin-bottom:1.1rem; } .exp__icon svg{ width:100%; height:100%; fill:none; stroke:var(--brass); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .exp__name{ font-size:1.4rem; margin-bottom:.4rem; } .exp__desc{ font-size:.92rem; color:var(--driftwood); } /* ================================================================= AROUND TOWN ================================================================= */ .around{ background:var(--cream); } .around__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; } .place{ position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--line); display:flex; align-items:flex-end; } .place img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .place::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(15,50,87,.85)); } .place:hover img{ transform:scale(1.08); } .place__name{ position:relative; z-index:1; color:#fff; font-family:var(--serif); font-size:1.3rem; padding:1.2rem; } /* ================================================================= TESTIMONIALS ================================================================= */ .testimonials{ background:var(--navy); color:var(--cream); text-align:center; } .testimonials .kicker{ color:var(--champagne); } .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; } .quote{ padding:1rem; } .quote__stars{ color:var(--champagne); letter-spacing:.2em; margin-bottom:1rem; } .quote__text{ font-family:var(--serif); font-style:italic; font-size:1.25rem; color:#fff; line-height:1.4; } .quote__by{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne); margin-top:1rem; } /* ================================================================= OFFER BAND ================================================================= */ .offer{ background:var(--brass); color:var(--navy-deep); text-align:center; } .offer__inner{ padding-block:clamp(3rem,6vw,4.5rem); } .offer h2{ color:var(--navy-deep); font-size:clamp(2rem,4vw,3.2rem); } .offer p{ font-size:1.1rem; margin:.8rem 0 1.6rem; } /* ================================================================= FINAL CTA / RFP ================================================================= */ .cta{ background:var(--paper); text-align:center; } .cta__card{ background:var(--cream); border:1px solid var(--line); padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,4vw,3rem); position:relative; overflow:hidden; } .cta__seal{ width:80px; height:80px; margin:0 auto 1.4rem; color:var(--brass); } .cta h2{ font-size:clamp(2rem,4.5vw,3.4rem); } .cta p{ max-width:560px; margin:1rem auto 1.8rem; color:var(--driftwood); font-size:1.08rem; } /* ================================================================= FOOTER ================================================================= */ .site-footer{ background:var(--navy-deep); color:rgba(246,241,231,.8); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem; } .footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; border-bottom:1px solid rgba(231,207,154,.2); } .footer__brand img{ height:64px; margin-bottom:1.2rem; } .footer__brand p{ font-size:.92rem; max-width:30ch; } .footer__brand .footer__seal{ width:60px; height:60px; color:var(--brass); margin-top:1.2rem; } .footer__col h4{ font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.2rem; } .footer__col a,.footer__col p{ display:block; color:rgba(246,241,231,.8); font-size:.92rem; margin-bottom:.7rem; transition:color .25s; } .footer__col a:hover{ color:var(--brass); } .footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; } .footer__bottom p{ font-size:.78rem; color:rgba(246,241,231,.78); margin:0; } .footer__social{ display:flex; gap:1rem; } .footer__social a{ color:rgba(246,241,231,.7); font-size:.8rem; letter-spacing:.08em; } .footer__social a:hover{ color:var(--brass); } /* ================================================================= PLAN YOUR EVENT — lead engine ================================================================= */ .plan-event{ background:var(--paper); } .audiences{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem; } .aud{ background:var(--cream); border:1px solid var(--line); padding:2.4rem 2rem; text-align:center; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; } .aud:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -28px rgba(15,50,87,.4); border-color:var(--brass); } .aud__icon{ width:58px; height:58px; margin:0 auto 1.3rem; border-radius:50%; border:1px solid var(--brass); display:grid; place-items:center; } .aud__icon svg{ width:28px; height:28px; fill:none; stroke:var(--brass); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } .aud__name{ font-size:1.8rem; margin-bottom:.6rem; } .aud__desc{ font-size:.95rem; color:var(--driftwood); } .venues-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.6rem; justify-content:center; background:var(--navy); color:var(--cream); padding:1.6rem 2rem; margin-top:1.2rem; } .venues-bar__label{ font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne); } .vcap{ text-align:center; } .vcap b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.35rem; color:#fff; line-height:1.1; } .vcap span{ font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.05em; color:var(--champagne); } .plan-form{ display:grid; grid-template-columns:.85fr 1.15fr; margin-top:1.2rem; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(15,50,87,.5); } .plan-form__aside{ background:linear-gradient(160deg,var(--navy),var(--navy-deep)); color:var(--cream); padding:clamp(2rem,4vw,3rem); } .plan-form__seal{ width:64px; height:64px; color:var(--brass); margin-bottom:1.2rem; } .plan-form__aside h3{ color:#fff; font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:.6rem; } .plan-form__aside p{ color:rgba(246,241,231,.85); font-size:.98rem; } .plan-form__perks{ list-style:none; padding:0; margin:1.5rem 0; display:flex; flex-direction:column; gap:.7rem; } .plan-form__perks li{ font-family:var(--sans); font-weight:300; font-size:.9rem; padding-left:1.7rem; position:relative; color:rgba(246,241,231,.92); } .plan-form__perks li::before{ content:"✦"; position:absolute; left:0; color:var(--champagne); } .plan-form__call{ font-family:var(--sans); font-size:.9rem; margin:1.4rem 0 0; padding-top:1.4rem; border-top:1px solid rgba(231,207,154,.22); color:rgba(246,241,231,.8); } .plan-form__call a{ color:var(--champagne); font-family:var(--serif); font-style:italic; font-size:1.25rem; margin-left:.4rem; } .plan-form__main{ background:var(--cream); padding:clamp(2rem,4vw,3rem); } .rfp__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; } .rfp__field{ display:flex; flex-direction:column; gap:.35rem; } .rfp__field--full{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; } .rfp__field span{ font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--driftwood); } .rfp input,.rfp select,.rfp textarea{ width:100%; font-family:var(--sans); font-size:.95rem; padding:.8rem .9rem; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:2px; } .rfp input:focus,.rfp select:focus,.rfp textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(196,162,101,.2); } .rfp textarea{ resize:vertical; } .rfp__submit{ margin-top:.4rem; width:100%; justify-content:center; } .rfp__fine{ font-family:var(--sans); font-size:.74rem; color:var(--driftwood); text-align:center; margin-top:.9rem; } .rfp__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .rfp__note{ font-family:var(--sans); font-size:.92rem; padding:.95rem 1.1rem; border-radius:2px; margin-bottom:1.2rem; } .rfp__note--ok{ background:rgba(94,122,107,.16); color:#34503f; border:1px solid var(--sage); } .rfp__note--err{ background:rgba(156,59,59,.1); color:#9c3b3b; border:1px solid #9c3b3b; } /* ---- multi-step wizard ---- */ .wiz__steps{ list-style:none; display:flex; margin:0 0 1.8rem; padding:0; } .wiz__step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--driftwood); position:relative; } .wiz__step span{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:#fff; font-family:var(--serif); font-size:1rem; color:var(--driftwood); transition:.3s var(--ease); position:relative; z-index:1; } .wiz__step::before{ content:""; position:absolute; top:17px; right:50%; width:100%; height:1px; background:var(--line); z-index:0; } .wiz__step:first-child::before{ display:none; } .wiz__step.is-active{ color:var(--navy); } .wiz__step.is-active span{ background:var(--navy); color:var(--cream); border-color:var(--navy); } .wiz__step.is-done{ color:var(--navy); cursor:pointer; } .wiz__step.is-done span{ background:var(--brass); color:var(--navy-deep); border-color:var(--brass); } .wiz__panel{ border:none; padding:0; margin:0; min-inline-size:0; } .rfp--wizard.wiz--on .wiz__panel{ display:none; } .rfp--wizard.wiz--on .wiz__panel.is-active{ display:block; animation:wizIn .4s var(--ease); } @keyframes wizIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} } .wiz__legend{ font-family:var(--serif); font-weight:500; font-size:1.4rem; color:var(--navy); margin-bottom:1.2rem; padding:0; } .evtype-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:.6rem; } .evtype{ cursor:pointer; } .evtype input{ position:absolute; opacity:0; width:0; height:0; } .evtype__box{ display:block; text-align:center; padding:.95rem .6rem; border:1px solid var(--line); border-radius:3px; background:#fff; font-family:var(--sans); font-size:.82rem; color:var(--navy); transition:.25s var(--ease); } .evtype:hover .evtype__box{ border-color:var(--brass); transform:translateY(-2px); } .evtype input:checked + .evtype__box{ background:var(--navy); color:var(--cream); border-color:var(--navy); } .evtype input:focus-visible + .evtype__box{ box-shadow:0 0 0 3px rgba(196,162,101,.35); } .rfp__check{ display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.9rem; color:var(--driftwood); margin-bottom:1rem; cursor:pointer; } .rfp__check input{ width:auto; } .wiz__nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.6rem; } .wiz__nav .btn{ margin-left:auto; } .wiz__back{ background:none; border:none; font-family:var(--sans); font-size:.8rem; letter-spacing:.04em; color:var(--driftwood); cursor:pointer; padding:.5rem 0; } .wiz__back:hover{ color:var(--navy); } .wiz__msg{ font-family:var(--sans); font-size:.8rem; color:#9c3b3b; min-height:1.1em; margin:.2rem 0 .4rem; } .rfp .invalid{ border-color:#9c3b3b !important; box-shadow:0 0 0 3px rgba(156,59,59,.12); } /* floating lead CTA */ .float-cta{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:90; background:var(--brass); color:var(--navy); font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; padding:.9rem 1.4rem; border-radius:100px; box-shadow:0 12px 30px -10px rgba(15,50,87,.6); opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s; } .float-cta.show{ opacity:1; transform:none; pointer-events:auto; } .float-cta:hover{ background:var(--navy); color:var(--cream); } /* ================================================================= EVENTS LANDING PAGE ================================================================= */ .ev-hero{ position:relative; min-height:74vh; display:flex; align-items:center; color:#fff; isolation:isolate; padding:9rem 0 4rem; } .ev-hero__media{ position:absolute; inset:0; z-index:-2; } .ev-hero__media img{ width:100%; height:100%; object-fit:cover; } .ev-hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,50,87,.5),rgba(15,50,87,.42) 40%,rgba(15,50,87,.82)); } .ev-hero__inner{ max-width:760px; } .ev-hero__eyebrow{ font-family:var(--sans); font-weight:600; font-size:.84rem; letter-spacing:.28em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.4rem; } .ev-hero__title{ color:#fff; font-weight:500; font-size:clamp(2.6rem,6vw,5rem); line-height:1; } .ev-hero__sub{ margin-top:1.2rem; font-size:clamp(1.05rem,1.6vw,1.3rem); color:rgba(255,255,255,.92); max-width:580px; } .ev-hero .btn{ margin-top:2rem; } .ev-intro{ background:var(--cream); } .ev-gallery{ background:var(--paper); } .gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.7rem; margin-top:3rem; } .gallery__item{ overflow:hidden; position:relative; border:1px solid var(--line); } .gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .gallery__item:hover img{ transform:scale(1.06); } .gallery__item--tall{ grid-row:span 2; } .ev-faq{ background:var(--cream); } .ev-faq__wrap{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,5vw,4rem); align-items:start; } .ev-faq__head{ position:sticky; top:7rem; } .faq{ border-top:1px solid var(--line); padding:1.3rem 0; } .faq:last-child{ border-bottom:1px solid var(--line); } .faq__q{ font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .faq__q::-webkit-details-marker{ display:none; } .faq__q::after{ content:"+"; font-family:var(--sans); font-weight:400; color:var(--bronze); font-size:1.7rem; line-height:1; transition:transform .3s var(--ease); } .faq[open] .faq__q::after{ transform:rotate(45deg); } .faq__a{ font-family:var(--sans); font-weight:300; color:var(--driftwood); margin-top:.8rem; font-size:1rem; max-width:62ch; } /* ================================================================= ROOMS PAGE ================================================================= */ .rooms-page{ background:var(--cream); } .rcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:3rem; } .rcard{ background:var(--paper); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s; } .rcard:hover{ transform:translateY(-5px); box-shadow:0 26px 54px -30px rgba(15,50,87,.4); } .rcard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; } .rcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .rcard:hover .rcard__img img{ transform:scale(1.05); } .rcard__cap{ position:absolute; top:1rem; left:1rem; background:rgba(15,50,87,.85); color:var(--champagne); font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; padding:.45rem .9rem; border-radius:100px; } .rcard__body{ padding:1.8rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .rcard__tag{ font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); } .rcard__name{ font-size:1.8rem; } .rcard__desc{ font-size:.96rem; color:var(--driftwood); flex:1; } .rcard__foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; padding-top:1.1rem; border-top:1px solid var(--line); flex-wrap:wrap; } .rcard__price{ font-family:var(--serif); font-size:1.3rem; color:var(--navy); } .rcard__price small{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); } .amenities{ background:var(--navy); color:var(--cream); } .amenities .kicker{ color:var(--champagne); } .amen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem; } .amen{ display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; border:1px solid rgba(231,207,154,.22); } .amen__icon{ width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; } .amen__icon svg{ width:26px; height:26px; fill:none; stroke:var(--champagne); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .amen span{ font-family:var(--serif); font-size:1.15rem; color:#fff; } /* ================================================================= DINING PAGE — venue rows ================================================================= */ .dvenue{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); margin-bottom:1.6rem; background:var(--cream); overflow:hidden; } .dvenue:nth-child(even) .dvenue__media{ order:2; } .dvenue__media{ position:relative; min-height:300px; overflow:hidden; } .dvenue__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .dvenue:hover .dvenue__media img{ transform:scale(1.05); } .dvenue__body{ padding:clamp(2rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center; } .dvenue__tag{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:.6rem; } .dvenue__name{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:.8rem; } .dvenue__desc{ font-size:1.02rem; color:var(--driftwood); margin-bottom:1.2rem; } .dvenue__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; } .dvenue__link{ font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--brass); padding-bottom:.2rem; transition:.25s var(--ease); } .dvenue__link:hover{ color:var(--bronze); border-color:var(--bronze); } /* ================================================================= RESPONSIVE ================================================================= */ @media (max-width:1024px){ .rooms__grid,.hap__grid,.around__grid{ grid-template-columns:repeat(2,1fr); } .exp__grid{ grid-template-columns:repeat(2,1fr); } .quotes{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } .footer__top{ grid-template-columns:1fr 1fr; } .plan-form{ grid-template-columns:1fr; } .gallery{ grid-template-columns:repeat(2,1fr); } .ev-faq__wrap{ grid-template-columns:1fr; } .ev-faq__head{ position:static; } .amen-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ .main-nav{ display:none; } .nav-toggle{ display:block; } .main-nav.open{ display:flex; flex-direction:column; gap:0; position:fixed; top:0; right:0; bottom:0; width:min(80vw,320px); background:var(--navy); padding:6rem 2rem 2rem; z-index:99; } .main-nav.open a{ color:#fff !important; padding:1rem 0; border-bottom:1px solid rgba(231,207,154,.2); font-size:1.1rem; } .story__grid,.dining__grid{ grid-template-columns:1fr; } .audiences{ grid-template-columns:1fr; } .rfp__row{ grid-template-columns:1fr; } .evtype-grid{ grid-template-columns:repeat(2,1fr); } .gallery{ grid-auto-rows:170px; } .rcards{ grid-template-columns:1fr; } .dvenue{ grid-template-columns:1fr; } .dvenue:nth-child(even) .dvenue__media{ order:0; } .dvenue__media{ min-height:240px; } .amen-grid{ grid-template-columns:1fr; } .story__img .badge{ width:96px; height:96px; font-size:.9rem; } .venue{ aspect-ratio:16/11; } .footer__top{ grid-template-columns:1fr; } .bookbar__field{ border-right:none; } } @media (max-width:520px){ .rooms__grid,.hap__grid,.around__grid,.exp__grid{ grid-template-columns:1fr; } .hero__cta{ flex-direction:column; } .hero__cta .btn{ justify-content:center; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } } /* Explore Cape May hero fix — let the guide-hub hero fill the top under the fixed header */ body.page-id-127 article > h2.stitle{ display:none; } body.page-id-127 #main{ padding-top:0 !important; } body.page-id-127 section.section{ padding-top:0; } body.page-id-127 .icmgh-hub{ margin-top:0; } body.page-id-127 article > div{ margin-top:0; } /* Explore Cape May (page 127) — hero background image + header spacing */ body.page-id-127 .icmgh-hero{ background-image: linear-gradient(100deg, rgba(10,24,38,.92) 0%, rgba(15,35,58,.85) 45%, rgba(15,29,38,.7) 100%), url("/wp-content/uploads/2026/07/Inn-of-Cape-May-Hero.jpg"); background-size: cover; background-position: center; padding-top: 9rem; padding-bottom: 6rem; } body.page-id-127 .icmgh-hero h2{ color: #F5EFE3; text-shadow: 0 2px 12px rgba(0,0,0,.45); } /* ============================================================ Inquire form styles (restored) ============================================================ */ .inquire-section { padding: 4rem 1.25rem; background: var(--paper); } .inquire-form-wrap { max-width: 720px; margin: 2rem auto 0; } .inquire-form { display: flex; flex-direction: column; gap: 1.25rem; } .inquire-form__row { display: flex; flex-wrap: wrap; gap: 1.25rem; } .inquire-form__row > label { flex: 1 1 220px; } .inquire-form label { display: flex; flex-direction: column; gap: 0.4rem; font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-deep); font-weight: 600; } .inquire-form input, .inquire-form select, .inquire-form textarea { width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; border: 1px solid rgba(21,69,119,0.25); border-radius: 4px; background: var(--cream); color: var(--navy-deep); font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .inquire-form textarea { min-height: 140px; resize: vertical; } .inquire-form input:focus, .inquire-form select:focus, .inquire-form textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(196,162,101,0.25); } .inquire-form .btn { align-self: flex-start; margin-top: 0.5rem; } @media (max-width: 560px) { .inquire-form__row { flex-direction: column; gap: 1.25rem; } } /* ============================================================ Inquire page (163) hero flush to top behind fixed header (mirrors page-127 pattern) ============================================================ */ body.page-id-163 #main { padding-top: 0 !important; } body.page-id-163 > #main > .section { padding-top: 0 !important; } /* ============================================================ Events & Entertainment page (280) hero flush to top behind fixed header (mirrors page-127 pattern) ============================================================ */ body.page-id-280 #main { padding-top: 0 !important; } body.page-id-280 > #main > .section { padding-top: 0 !important; } /* ============================================================ v2 — Integrated interior pages, room singles, on-site booking ============================================================ */ /* Booking bar — real form controls */ .bookbar__field input, .bookbar__field select{ font-family:var(--serif); font-size:1.05rem; color:var(--cream); background:rgba(255,255,255,.06); border:1px solid rgba(231,207,154,.35); padding:.45rem .7rem; min-height:44px; min-width:150px; color-scheme:dark; } .bookbar__field input:focus-visible, .bookbar__field select:focus-visible{ outline:2px solid var(--champagne); outline-offset:2px; } .bookbar__inner .btn{ margin-left:.4rem; } /* Plain / compact ev-hero variants (pages without a photo) */ .ev-hero--plain{ min-height:44vh; background:linear-gradient(160deg,var(--navy-deep),var(--navy)); } .ev-hero--plain .ev-hero__media{ display:none; } .ev-hero--compact{ min-height:34vh; padding:8rem 0 3rem; } /* Generic page prose */ .page-prose{ max-width:820px; font-size:1.06rem; line-height:1.75; color:var(--ink,#333); } .page-prose > * + *{ margin-top:1.1rem; } .page-prose a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; } .page-prose--center{ margin:1.4rem auto; text-align:left; } .page-cta-row{ text-align:center; margin-top:2.6rem; } /* Careers page */ .careers-page__inner{ max-width:760px; margin-inline:auto; text-align:center; } .careers-page__inner .ssub{ margin-inline:auto; } .careers-page__inner .btn{ margin-top:2rem; } /* Room single */ .room-single__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.4rem,6vw,5rem); align-items:center; } .room-single__desc{ margin-top:1.3rem; font-size:1.08rem; line-height:1.75; } .room-single__facts{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; } .room-single__facts .fact{ border:1px solid rgba(21,69,119,.16); padding:.9rem 1.2rem; min-width:150px; display:flex; flex-direction:column; gap:.15rem; background:var(--cream); } .room-single__facts .fact__label{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); } .room-single__facts .fact b{ font-family:var(--serif); font-weight:500; } .room-single__ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; } .room-single__img img{ width:100%; aspect-ratio:4/3.2; object-fit:cover; box-shadow:0 24px 64px rgba(21,69,119,.18); } .rcards--three{ grid-template-columns:repeat(3,1fr); } .rcard__name a:hover{ color:var(--bronze); } /* Events-family pages: FAQ list reused outside the events template */ .plan-event .ev-faq__list{ max-width:820px; margin:0 auto 3rem; } /* On-site booking engine embed */ .book-embed .wrap{ max-width:1100px; } .book-embed__intro{ margin-bottom:1.8rem; } .book-embed__frame{ width:100%; height:min(82vh,960px); min-height:620px; border:1px solid rgba(21,69,119,.16); background:#fff; box-shadow:0 12px 40px rgba(21,69,119,.1); } .book-embed__fallback{ margin-top:1.1rem; font-family:var(--sans); font-size:.92rem; } .book-embed__fallback a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; } @media (max-width:900px){ .room-single__grid{ grid-template-columns:1fr; } .rcards--three{ grid-template-columns:1fr; } .bookbar__field{ width:100%; } .bookbar__field input,.bookbar__field select{ width:100%; } .bookbar__inner .btn{ width:100%; margin-left:0; justify-content:center; } } /* ============================================================ v2.1 — Editable page rebuilds, CPT listings, newsletter, SEO ============================================================ */ .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .iq-hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .kicker--onnavy{ color:var(--champagne); } /* History — intro + timeline + chapters */ .hs-intro__body{ max-width:820px; margin:0 auto; font-size:1.1rem; line-height:1.8; color:var(--ink,#333); } .hs-intro__body p + p{ margin-top:1.1rem; } .tline{ background:var(--cream); } .tline__list{ list-style:none; max-width:860px; margin:0 auto; position:relative; padding-left:0; } .tline__list::before{ content:""; position:absolute; left:88px; top:8px; bottom:8px; width:1px; background:var(--brass); opacity:.45; } .tline__item{ display:grid; grid-template-columns:72px 1fr; gap:2.2rem; padding:1.4rem 0; position:relative; } .tline__item::before{ content:""; position:absolute; left:84px; top:2.05rem; width:9px; height:9px; border-radius:50%; background:var(--brass); } .tline__year{ font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--navy); text-align:right; line-height:1.2; } .tline__name{ font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--navy); } .tline__text{ margin-top:.4rem; font-family:var(--sans); font-weight:300; color:var(--driftwood); max-width:60ch; } .hs-chapter--tint{ background:var(--paper); } .hs-chapter__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.4rem,6vw,5rem); align-items:center; } .hs-chapter__grid--flip .hs-chapter__body{ order:2; } .hs-chapter__grid--flip .hs-chapter__img{ order:1; } .hs-chapter__body p{ margin-top:1.1rem; font-family:var(--sans); font-weight:300; line-height:1.75; color:var(--ink,#333); } .hs-chapter__img img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; box-shadow:0 24px 64px rgba(21,69,119,.16); } /* FAQs + policy blocks (also reused on Inquire) */ .fq-wrap{ max-width:900px; } .fq-list{ margin-top:1rem; } .fq-policies{ background:var(--cream); } .fq-pol__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; } .fq-pol__grid--two{ max-width:900px; margin-inline:auto; } .fq-pol{ border:1px solid rgba(21,69,119,.14); background:#fff; padding:1.8rem 1.7rem; } .fq-pol__title{ font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--navy); margin-bottom:.7rem; } .fq-pol__body p, .fq-pol > p{ font-family:var(--sans); font-weight:300; color:var(--driftwood); line-height:1.7; margin-top:.6rem; } .fq-pol__body ul{ margin:.7rem 0 0 1.1rem; font-family:var(--sans); font-weight:300; color:var(--driftwood); line-height:1.7; } /* Inquire contact list */ .iq-contact{ list-style:none; margin-top:1.2rem; padding:0; } .iq-contact li{ padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.16); font-family:var(--sans); font-weight:300; line-height:1.5; } .iq-contact li:last-child{ border-bottom:none; } .iq-contact span{ display:block; font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne); margin-bottom:.15rem; } .iq-contact a{ color:inherit; text-decoration:underline; text-underline-offset:2px; } /* Events & Entertainment listing */ .ee-upcoming{ background:var(--cream); } .ee-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; } .ee-card{ border:1px solid rgba(21,69,119,.14); background:#fff; display:flex; flex-direction:column; } .ee-card__img{ width:100%; aspect-ratio:16/8; object-fit:cover; } .ee-card__body{ padding:1.7rem 1.7rem 1.9rem; } .ee-card__when{ font-family:var(--sans); font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze); font-weight:600; } .ee-card__title{ font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--navy); margin-top:.35rem; } .ee-card__desc{ margin-top:.6rem; font-family:var(--sans); font-weight:300; color:var(--driftwood); line-height:1.7; } .ee-card__desc ul{ margin:.5rem 0 0 1.1rem; } .ee-card__link{ display:inline-block; margin-top:.9rem; font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); } .ee-card__link:hover{ color:var(--navy); } .ee-none{ text-align:center; margin-inline:auto; } /* Offers listing */ .offers-list{ background:var(--cream); padding-top:0; } .offers__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; } .offer-card{ border:1px solid rgba(21,69,119,.14); background:#fff; display:flex; flex-direction:column; } .offer-card__img{ width:100%; aspect-ratio:16/8; object-fit:cover; } .offer-card__body{ padding:1.9rem 1.8rem 2rem; display:flex; flex-direction:column; align-items:flex-start; } .offer-card__tag{ font-family:var(--sans); font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bronze); font-weight:600; } .offer-card__title{ font-family:var(--serif); font-size:1.7rem; font-weight:500; color:var(--navy); margin-top:.3rem; } .offer-card__price{ font-family:var(--serif); font-size:1.15rem; color:var(--bronze); margin-top:.2rem; } .offer-card__desc{ margin-top:.7rem; font-family:var(--sans); font-weight:300; color:var(--driftwood); line-height:1.7; } .offer-card__code{ margin-top:.7rem; font-family:var(--sans); font-size:.9rem; } .offer-card__ends{ margin-top:.3rem; font-family:var(--sans); font-size:.8rem; color:var(--driftwood); } .offer-card__body .btn{ margin-top:1.2rem; } /* Cape May Guide homepage section */ .guides{ background:var(--paper); } .guides__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } .guide-card{ background:#fff; border:1px solid rgba(21,69,119,.14); display:block; transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .guide-card:hover{ transform:translateY(-4px); box-shadow:0 18px 48px rgba(21,69,119,.14); } .guide-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; } .guide-card__body{ padding:1.4rem 1.5rem 1.6rem; } .guide-card__title{ font-family:var(--serif); font-size:1.3rem; font-weight:500; color:var(--navy); line-height:1.25; } .guide-card__more{ display:inline-block; margin-top:.7rem; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); } .guides__cta{ text-align:center; margin-top:2.4rem; } /* Footer newsletter */ .footer__newsletter{ display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; border-top:1px solid rgba(255,255,255,.14); margin-top:3rem; padding-top:2.4rem; } .footer__newsletter-title{ font-family:var(--serif); font-size:1.6rem; font-weight:500; color:#fff; margin-bottom:.4rem; } .footer__newsletter-copy p{ font-family:var(--sans); font-weight:300; color:rgba(255,255,255,.85); line-height:1.6; } .footer__newsletter-form{ display:flex; gap:.7rem; flex-wrap:wrap; } .footer__newsletter-form input[type="email"]{ flex:1; min-width:220px; padding:.85rem 1rem; font-family:var(--sans); font-size:.95rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); color:#fff; min-height:48px; } .footer__newsletter-form input[type="email"]::placeholder{ color:rgba(255,255,255,.7); } .footer__newsletter-form input[type="email"]:focus-visible{ outline:2px solid var(--champagne); outline-offset:2px; } .footer__newsletter-status{ font-family:var(--sans); color:var(--champagne); } .footer__newsletter-status--err{ color:#F3B9B9; width:100%; } /* 404 + search */ .err-actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; } .err-links{ text-align:center; max-width:720px; } .err-links__row{ display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; margin:1.2rem 0 2rem; } .err-links__row a{ font-family:var(--serif); font-size:1.15rem; color:var(--navy); text-decoration:underline; text-underline-offset:3px; } .err-links__row a:hover{ color:var(--bronze); } .err-links .search-form, .search-form{ display:flex; gap:.6rem; justify-content:center; } .search-form input[type="search"]{ padding:.7rem 1rem; border:1px solid rgba(21,69,119,.3); font-family:var(--sans); min-width:240px; min-height:44px; } .search-form input[type="submit"], .search-form button{ padding:.7rem 1.4rem; background:var(--navy); color:#fff; border:none; font-family:var(--sans); letter-spacing:.12em; text-transform:uppercase; font-size:.76rem; cursor:pointer; min-height:44px; } .search-hit{ padding:1.6rem 0; border-bottom:1px solid rgba(21,69,119,.12); } .search-hit__title{ font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--navy); } .search-hit__title a:hover{ color:var(--bronze); } .search-hit__excerpt{ margin-top:.4rem; font-family:var(--sans); font-weight:300; color:var(--driftwood); line-height:1.7; } /* Room gallery */ .room-gallery{ background:var(--paper); } .room-gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .room-gallery__grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; } @media (max-width:900px){ .hs-chapter__grid{ grid-template-columns:1fr; } .hs-chapter__grid--flip .hs-chapter__body{ order:1; } .hs-chapter__grid--flip .hs-chapter__img{ order:2; } .fq-pol__grid, .ee-grid, .offers__grid{ grid-template-columns:1fr; } .guides__grid, .room-gallery__grid{ grid-template-columns:1fr; } .footer__newsletter{ grid-template-columns:1fr; } .tline__list::before{ left:64px; } .tline__item{ grid-template-columns:48px 1fr; gap:1.6rem; } .tline__item::before{ left:60px; } .tline__year{ font-size:1.15rem; } } /* FAQ / concierge CTA row */ .events-ctas--center{ justify-content:center; margin-top:1.4rem; } /* Event singles */ .event-single__past{ font-family:var(--sans); background:var(--paper); border-left:3px solid var(--brass); padding:.9rem 1.2rem; margin-bottom:1.6rem; } .event-single__body{ margin-top:1.8rem; } .ee-card__title a:hover{ color:var(--bronze); } .hap__name a:hover{ color:var(--bronze); } .ee-card__link + .ee-card__link{ margin-left:1.2rem; }