/* ========================================================================== Bay Breeze RV Park — stylesheet Direction: hand-painted bait shop sign, cleaned up. Saturated seafoam ground, bone painted boards with hard (blur-free) offset shadows, fat slab lettering, sunset accents. Mobile-first. Single stylesheet. No framework. SYSTEM (2026-08-04 polish pass): every boxed element is ONE card treatment (tokens below), every section uses ONE vertical rhythm, every grid is equal-height. Do not reintroduce per-section card variants. ========================================================================== */ /* --- fonts ----------------------------------------------------------------- */ /* Self-hosted (latin subsets, ~30KB total) so type loads from the same CDN as the page — the Google Fonts request chain cost ~4 Lighthouse perf points. Files preloaded in each page's . */ @font-face { font-family: "Bevan"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/bevan-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); } /* --- tokens --------------------------------------------------------------- */ :root { /* palette */ --ground: #b7d6cb; /* seafoam — page ground */ --ground-dk: #a2c8ba; /* deeper seafoam — alternate band ground */ --bay: #9cbccd; /* bay blue — Why band ground (client asked for a bluer strip under the home hero, 2026-08-05). --deep on it is 6.2:1; keep eyebrows --deep here, rust-dk is only ~4.6:1 */ --panel: #f5f1e6; /* bone — painted board face */ --deep: #0f3a42; /* bay teal — ink, borders, hard shadows */ --rust: #b34320; /* redfish — calls to action */ --rust-dk: #883315; /* darker redfish — small colored text on light grounds. #9c3a1c measured 4.44:1 on the saturated seafoam, just under AA; this shade clears 4.5 with margin */ --sun: #e8a63c; /* sign yellow — icon chips, letter shadows, accents */ --sand: #f0dcab; /* sun-bleached sand — warm band ground */ --ink: #17282b; /* body copy */ --muted: #47605f; /* secondary copy — bone grounds only; it is under AA on seafoam and sand, use --ink there */ /* type — TWO roles only (GHL-style): Bevan for display headings, Poppins for every other piece of text. The old monospace label face is gone; the small-caps label look is Poppins 600 + letter-spacing now. */ --display: Bevan, "Rockwell", Georgia, "Times New Roman", serif; --body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; /* layout system — change these, not per-section values */ --wrap: 75rem; /* one content max-width */ --gutter: 1.25rem; --section-pad: clamp(2.75rem, 7vw, 5.5rem); /* one section rhythm */ --card-pad: clamp(1.25rem, 2.5vw, 2rem); /* one card padding */ --card-gap: 1.25rem; /* one grid gap */ --shadow: 6px 6px 0 var(--deep); /* one offset shadow */ } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* clears the fixed call bar; reset at the 48rem breakpoint where it hides */ padding: 0 0 4.5rem; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.05; } p { margin: 0 0 1em; } a { color: var(--deep); } :focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--sun); color: var(--deep); font-weight: 600; padding: 0.75rem 1rem; z-index: 60; } .skip:focus { left: 0; } /* --- layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .band { padding: var(--section-pad) 0; } /* one uniform section transition: every band boundary is a painted 3px edge, so background changes read as sign construction, not color bleed. The band directly under a hero (or the masthead on agreement.html) skips it — those already carry the rust edge. */ .band { border-top: 3px solid var(--deep); } .hero-photo + .band, main > .band:first-child { border-top: 0; } /* band grounds — alternate them so no two adjacent sections match */ .band-bone { background: var(--panel); } .band-sand { background: var(--sand); } .band-seafoam { background: var(--ground-dk); } .band-bay { background: var(--bay); } .band-deep { background: var(--deep); color: var(--panel); } /* deep band with a faint painted-plank texture, for the closing CTA so it is not a flat slab next to the flat deep footer */ .band-deep-tex { background: repeating-linear-gradient( 135deg, rgba(245, 241, 230, 0.045) 0 2px, transparent 2px 16px ), var(--deep); color: var(--panel); } .band-deep a, .band-deep-tex a { color: var(--sun); } .band-deep :focus-visible, .band-deep-tex :focus-visible { outline-color: var(--sun); } /* agreement page: shorter opening band, the document is the content */ .band-snug { padding-top: clamp(2rem, 4vw, 3rem); } /* --- the card ------------------------------------------------------------- */ /* THE one boxed treatment. Painted bone plank, 3px edge, hard offset shadow. Media mounts (.photo-frame, .map-frame, .flyer) share the shell but not the text padding — they are frames, not text cards. */ .card, .board, .amen li, .rates-grid li, .rules-cards li, .why-cards li, .photo-frame, .map-frame, .flyer { background: var(--panel); border: 3px solid var(--deep); border-radius: 3px; box-shadow: var(--shadow); } .card, .board, .rates-grid li, .rules-cards li, .why-cards li { padding: var(--card-pad); } .photo-frame, .map-frame, .flyer { line-height: 0; } /* --- headings ------------------------------------------------------------- */ /* One rhythm everywhere: eyebrow, heading, one-line intro, content. */ .eyebrow { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust-dk); margin: 0 0 0.75rem; } .band-deep .eyebrow, .band-deep-tex .eyebrow { color: var(--ground); } .band-seafoam .eyebrow, .band-bay .eyebrow { color: var(--deep); } .h-section { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; font-size: clamp(1.5rem, 6.5vw, 2.35rem); color: var(--deep); text-shadow: 3px 3px 0 var(--sun); margin: 0 0 1rem; } .band-deep .h-section, .band-deep-tex .h-section { color: var(--panel); text-shadow: 3px 3px 0 var(--rust); } .h-sub { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.0625rem; letter-spacing: 0.03em; color: var(--deep); margin: 0 0 0.35rem; } /* intro line under a section heading — one look site-wide */ .lede { max-width: 60ch; margin: 0 0 2rem; } .lede-center { margin-left: auto; margin-right: auto; text-align: center; } /* body copy measure inside wide bands */ .measure { max-width: 55ch; } /* centred section head — used where the content itself is centred (flyers) so the intro doesn't left-hang over a wide empty right side */ .band-center .eyebrow, .band-center .h-section { text-align: center; } .band-center .lede { margin-left: auto; margin-right: auto; text-align: center; } .actions { margin-top: 1.75rem; } /* --- header --------------------------------------------------------------- */ .masthead { background: var(--deep); color: var(--panel); border-bottom: 4px solid var(--rust); } .masthead-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; padding-top: 0.3rem; padding-bottom: 0.3rem; } /* min-height 44px on header/footer links — thumb targets on a phone-first site */ .wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: 1.0625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--panel); text-decoration: none; margin-right: auto; } .wordmark:hover { color: var(--sun); } .nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; } .nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ground); text-decoration: none; } .nav a:hover { color: var(--sun); text-decoration: underline; } .nav .is-here { color: var(--sun); text-decoration: underline; } /* --- hero: photo, scrim, type --------------------------------------------- */ .hero-photo { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(26rem, 62svh, 32rem); background: var(--deep); border-bottom: 4px solid var(--rust); overflow: hidden; } .hero-photo picture { display: contents; } .hero-photo-img, .hero-photo-scrim { position: absolute; inset: 0; } .hero-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; z-index: -2; } /* Measured from the BOTTOM in rem so the dark band stays pinned to the copy. Lightened twice on 2026-08-05 (client: hero read too dark blue). The old 0.80+ AA floor is gone — the scrim is now a light veil, and legibility comes from hard --deep text-shadows on every piece of hero copy instead. If text ever goes shadowless again, the floor has to come back. */ .hero-photo-scrim { z-index: -1; background: linear-gradient( to top, rgba(15, 58, 66, 0.55) 0, rgba(15, 58, 66, 0.48) 14rem, rgba(15, 58, 66, 0.20) 22rem, rgba(15, 58, 66, 0) 30rem ); } /* generous bottom padding so the CTA button never collides with the section edge — this was clipping before the polish pass */ .hero-photo-in { padding-top: 3rem; padding-bottom: 3.25rem; } .hero-photo .h-hero { max-width: 42rem; } .hero-photo .call { border-color: var(--sun); box-shadow: 5px 5px 0 var(--sun); color: #fff; } .hero-photo .call:active { box-shadow: 2px 2px 0 var(--sun); } .hero-photo :focus-visible { outline-color: var(--sun); } /* interior pages: shorter banner, smaller headline */ .hero-photo-sub { min-height: clamp(22rem, 48svh, 27rem); } .hero-photo-sub .hero-photo-in { padding-top: 2.5rem; padding-bottom: 2.75rem; } .hero-photo-sub .h-hero .h-big { font-size: clamp(1.85rem, 9vw, 3rem); } .hero-photo-sub .hero-photo-scrim { background: linear-gradient( to top, rgba(15, 58, 66, 0.55) 0, rgba(15, 58, 66, 0.48) 12rem, rgba(15, 58, 66, 0.18) 19rem, rgba(15, 58, 66, 0) 25rem ); } .h-hero { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; color: var(--panel); margin: 0 0 0.6rem; } .h-hero .h-big { display: block; font-size: clamp(2rem, 11vw, 4rem); line-height: 0.95; text-shadow: 1px 1px 0 var(--deep), -1px 1px 0 var(--deep), 1px -1px 0 var(--deep), -1px -1px 0 var(--deep), 4px 4px 0 var(--sun); } .h-hero .h-small { display: block; margin-top: 0.65rem; font-size: clamp(0.95rem, 3.6vw, 1.35rem); line-height: 1.25; color: var(--panel); /* the scrim is a light veil now (2026-08-05) — every hero line needs its own --deep shadow to hold up over the photo */ text-shadow: 1px 1px 0 var(--deep), -1px 1px 0 var(--deep), 1px -1px 0 var(--deep), -1px -1px 0 var(--deep), 2px 2px 0 var(--deep); } /* the one-line page intro, folded into the hero so it never floats alone in dead space below (rates.html) */ .hero-sub { max-width: 44ch; color: var(--panel); margin: 0 0 1.1rem; text-shadow: 1px 1px 0 var(--deep), -1px 1px 0 var(--deep), 1px -1px 0 var(--deep), -1px -1px 0 var(--deep), 2px 2px 0 var(--deep); } .hero-phone { display: block; font-family: var(--display); font-size: clamp(1.6rem, 8vw, 2.5rem); letter-spacing: 0.01em; color: var(--sun); text-decoration: none; margin-bottom: 0.15rem; text-shadow: 1px 1px 0 var(--deep), -1px 1px 0 var(--deep), 1px -1px 0 var(--deep), -1px -1px 0 var(--deep), 3px 3px 0 var(--deep); } .hero-phone:hover { text-decoration: underline; } .hero-phone-note { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--panel); text-shadow: 1px 1px 0 var(--deep), -1px 1px 0 var(--deep), 1px -1px 0 var(--deep), -1px -1px 0 var(--deep); margin: 0 0 1.35rem; } /* --- call button ---------------------------------------------------------- */ .call { display: inline-block; font-family: var(--display); font-size: 1.125rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; background: var(--rust); color: #fff; border: 3px solid var(--deep); border-radius: 3px; box-shadow: 5px 5px 0 var(--deep); padding: 0.85rem 1.5rem; transition: transform 0.08s ease, box-shadow 0.08s ease; } .call:hover { background: #c24b25; } .call:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--deep); } /* full-width variant for column layouts */ .call-block { display: block; text-align: center; } .band-deep .call, .band-deep-tex .call { border-color: var(--sun); box-shadow: 5px 5px 0 var(--sun); } .band-deep .call:active, .band-deep-tex .call:active { box-shadow: 2px 2px 0 var(--sun); } .band-deep .call, .band-deep-tex .call, .foot .call { color: #fff; } /* --- painted lines inside a card ------------------------------------------ */ .lines { margin: 0; padding: 0; list-style: none; } .lines li { padding: 0.85rem 0; border-bottom: 2px solid rgba(15, 58, 66, 0.18); } .lines li:first-child { padding-top: 0; } .lines li:last-child { border-bottom: 0; padding-bottom: 0; } .lines p { margin: 0; color: var(--muted); } /* --- why cards (index) ----------------------------------------------------- */ /* Same uniform card-grid language as the rules and area sections. */ .why-note { max-width: 55ch; margin: 0 0 1.5rem; } .why-cards { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); margin: 0; padding: 0; list-style: none; } .why-cards li { display: flex; flex-direction: column; } .why-cards p { margin: 0; color: var(--muted); font-size: 0.9375rem; } .why-cards li:nth-child(1) { border-top: 8px solid var(--rust); } .why-cards li:nth-child(2) { border-top: 8px solid var(--sun); } .why-cards li:nth-child(3) { border-top: 8px solid var(--deep); } .why-cards li:nth-child(4) { border-top: 8px solid var(--sun); } /* --- amenities ------------------------------------------------------------ */ /* Dense checklist tiles, not feature cards: icon chip, label, done. Flex (not grid) so the 4+3 rows centre their leftovers instead of stranding an orphan card on the left. */ .amen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } /* On a phone the tiles are compact horizontal rows — icon chip left, label right — so seven amenities fit in one screen instead of four. They become centred vertical tiles from 34rem up. */ .amen li { flex: 1 1 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 0.8rem; padding: 0.55rem 0.9rem; font-weight: 600; font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0.02em; color: var(--deep); } /* sign-yellow chip behind every icon; hover flips it to the deep/sun pairing */ .amen .ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); border: 2px solid var(--deep); transition: background 0.12s ease, transform 0.12s ease; } .amen li:hover .ico { background: var(--deep); transform: translateY(-2px); } .amen li:hover svg { stroke: var(--sun); } .amen svg { display: block; width: 22px; height: 22px; stroke: var(--deep); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.12s ease; } /* aerial photo beside the site specs — equal-height pair */ .amen-detail { display: grid; gap: var(--card-gap); margin-top: 2.5rem; } .amen-detail .photo-frame { overflow: hidden; } /* the lone sites card carries the same stripe accent as every other card */ .amen-detail .board { border-top: 8px solid var(--sun); } .amen-detail .photo-plain { width: 100%; height: 100%; object-fit: cover; } /* --- delivered photos ----------------------------------------------------- */ .photo-plain { display: block; width: 100%; height: auto; } /* --- the park's own flyers ------------------------------------------------ */ /* Two printed flyers with different aspect ratios (4:5 and 2:3): both sit in matching fixed-height frames, letterboxed on bone, captions as pill labels in the same spot under each. Capped and centred so the pair reads as handbills pinned to a board, not a photo grid. */ .flyers { display: grid; gap: var(--card-gap); max-width: 48rem; /* collapses with the heading's 1rem bottom margin; keeps the ~2rem gap the lede used to provide before it was removed (2026-08-05) */ margin: 2rem auto 0; padding: 0; list-style: none; } .flyers li { display: flex; flex-direction: column; align-items: center; } .flyer { display: flex; align-items: center; justify-content: center; width: 100%; height: 24rem; padding: 0.75rem; transition: transform 0.12s ease, box-shadow 0.12s ease; } .flyer img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .flyer:hover { transform: translateY(-4px); box-shadow: 8px 10px 0 var(--deep); } .flyer:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--deep); } .flyer-cap { display: inline-block; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--deep); color: var(--panel); border-radius: 999px; padding: 0.35em 1em; margin: 0.9rem 0 0; } /* --- rates teaser (index) -------------------------------------------------- */ .teaser-line { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.15rem, 5vw, 1.75rem); line-height: 1.2; color: var(--sun); margin: 0 0 1.25rem; } /* --- rate cards (rates.html) ---------------------------------------------- */ .rates-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); margin: 0; padding: 0; list-style: none; } .rates-grid li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } /* one painted stripe per palette color so the row reads as three hung signs */ .rates-grid li:nth-child(1) { border-top: 8px solid var(--rust); } .rates-grid li:nth-child(2) { border-top: 8px solid var(--sun); } .rates-grid li:nth-child(3) { border-top: 8px solid var(--deep); } .rate-term { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; } .rate-price { font-family: var(--display); font-size: clamp(2.35rem, 12vw, 3.15rem); line-height: 1; color: var(--rust); text-shadow: 3px 3px 0 var(--deep); margin: 0 0 0.6rem; } .rate-note { font-size: 0.9375rem; line-height: 1.45; color: var(--muted); margin: 0; } /* summary bar under the three cards: same edges as the grid, sand tint */ .included-bar { margin-top: var(--card-gap); background: var(--sand); } .included-bar p { margin: 0; color: var(--ink); } /* --- park rules (rates.html) ---------------------------------------------- */ .rules-cards { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); margin: 0; padding: 0; list-style: none; } .rules-cards li { display: flex; flex-direction: column; } .rules-cards p { margin: 0; color: var(--muted); font-size: 0.9375rem; } /* every card grid carries an accent (system rule): same painted stripes as the rate and area cards, cycling the palette per column */ .rules-cards li:nth-child(3n + 1) { border-top: 8px solid var(--rust); } .rules-cards li:nth-child(3n + 2) { border-top: 8px solid var(--sun); } .rules-cards li:nth-child(3n) { border-top: 8px solid var(--deep); } /* --- the area (rates.html) ------------------------------------------------ */ .area-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); } .area-grid .board { display: flex; flex-direction: column; } .area-grid .board p { color: var(--muted); } .area-grid .board p:last-child { margin-bottom: 0; } /* same painted top stripe the rate cards wear */ .area-grid .board:nth-child(1) { border-top: 8px solid var(--sun); } .area-grid .board:nth-child(2) { border-top: 8px solid var(--rust); } .area-grid .board:nth-child(3) { border-top: 8px solid var(--deep); } .area-grid .board:nth-child(4) { border-top: 8px solid var(--sun); } /* --- location (index) ----------------------------------------------------- */ .loc-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); align-items: start; } .loc-info .card { margin-bottom: 1.5rem; } .loc-media { display: grid; gap: var(--card-gap); } .loc-media .photo-frame { overflow: hidden; } .map-frame iframe { display: block; width: 100%; height: 320px; border: 0; border-radius: 1px; } .facts { margin: 0; } .facts dt { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; } .facts dd { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.45; } .facts dd:last-child { margin-bottom: 0; } .facts a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; } /* --- legal document (agreement.html) --------------------------------------- */ /* The owners' service agreement reproduced as a document: level board, tighter measure, smaller type — paperwork pinned to the wall. */ .legal { max-width: 46rem; font-size: 0.9375rem; line-height: 1.7; } .legal-title { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; color: var(--deep); margin-bottom: 0.25rem; } .legal p { margin-bottom: 1.1em; } .legal-sub { list-style: none; margin: 0 0 1.1em; padding-left: 1.5rem; } .legal-sub li { margin-bottom: 0.5em; } .legal-sign { display: grid; gap: 1.5rem; border-top: 2px solid rgba(15, 58, 66, 0.18); padding-top: 1.25rem; } .legal-checkout { font-weight: 600; letter-spacing: 0.1em; text-align: center; margin-bottom: 0; } /* --- footer --------------------------------------------------------------- */ /* Three tight columns on desktop, one centred column on a phone. */ .foot { background: var(--deep); color: var(--ground); padding: 2.25rem 0 2rem; /* layered accent rule: orange bar with a thin gold line under it */ border-top: 4px solid var(--rust); box-shadow: inset 0 3px 0 var(--sun); text-align: center; } .foot-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sun); } .foot p { margin: 0 0 0.2rem; font-size: 0.9375rem; } .foot-name { font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; color: var(--panel); margin: 0 0 0.35rem; } .foot-tag { color: var(--ground); } .foot-label { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); margin: 0 0 0.5rem; } .foot-legal { font-size: 0.8125rem; color: var(--ground-dk); margin-top: 1rem; } /* --- sticky call bar (phones) --------------------------------------------- */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--rust); color: #fff; border-top: 3px solid var(--deep); padding: 0.85rem 1rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); font-family: var(--display); font-size: 1.125rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; } .callbar:active { background: #9d3a1b; } .callbar:focus-visible { outline-color: #fff; outline-offset: -6px; } /* --- responsive ----------------------------------------------------------- */ @media (min-width: 34rem) { .amen li { flex: 0 1 calc(33.333% - 0.5rem); flex-direction: column; justify-content: center; text-align: center; gap: 0.55rem; padding: 1.1rem 0.75rem; font-size: 0.75rem; } .amen .ico { width: 52px; height: 52px; } .amen svg { width: 28px; height: 28px; } .rates-grid { grid-template-columns: repeat(3, 1fr); } .rules-cards { grid-template-columns: repeat(2, 1fr); } .why-cards { grid-template-columns: 1fr 1fr; } .legal-sign { grid-template-columns: 1fr 1fr; } .flyers { grid-template-columns: 1fr 1fr; } } @media (min-width: 48rem) { :root { --gutter: 2rem; } .hero-photo { min-height: clamp(32rem, 76svh, 42rem); } .hero-photo-in { padding-bottom: 4rem; } .hero-photo-img { object-position: 50% 52%; } .hero-photo-scrim { background: linear-gradient( to top, rgba(15, 58, 66, 0.55) 0, rgba(15, 58, 66, 0.50) 18rem, rgba(15, 58, 66, 0.14) 30rem, rgba(15, 58, 66, 0) 42rem ); } .hero-photo-sub { min-height: clamp(23rem, 52svh, 28rem); } .hero-photo-sub .hero-photo-in { padding-bottom: 3.25rem; } .hero-photo-sub .hero-photo-scrim { background: linear-gradient( to top, rgba(15, 58, 66, 0.55) 0, rgba(15, 58, 66, 0.48) 13rem, rgba(15, 58, 66, 0.16) 20rem, rgba(15, 58, 66, 0) 27rem ); } /* dense 4-up amenity checklist, 4+3 with the last row centred */ .amen li { flex: 0 1 calc(25% - 0.5625rem); padding: 1.1rem 0.75rem; } .amen .ico { width: 60px; height: 60px; } .amen svg { width: 32px; height: 32px; } .amen-detail { grid-template-columns: 1fr 1fr; align-items: stretch; } .rules-cards { grid-template-columns: repeat(3, 1fr); } .area-grid { grid-template-columns: repeat(2, 1fr); } .flyer { height: 28rem; } .loc-grid { grid-template-columns: 1.15fr 1fr; gap: 2rem; } .map-frame iframe { height: 380px; } .foot { text-align: left; } .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; } .callbar { display: none; } body { padding-bottom: 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .call:active, .flyer:hover, .amen li:hover .ico { transform: none; } } @media print { .callbar, .map-frame { display: none; } body { background: #fff; padding-bottom: 0; } }