/* ========================================================================== Fonts Retro Stereo Wide — the display face. Not on Google Fonts, so it is self-hosted from assets/fonts/. See assets/fonts/README.md for the exact filenames to drop in. Open Sans — body + UI, loaded from Google Fonts in each page's . ========================================================================== */ @font-face { font-family: 'Retro Stereo Wide'; src: url('../assets/fonts/retro-stereo-wide.woff2') format('woff2'), url('../assets/fonts/retro-stereo-wide.woff') format('woff'), url('../assets/fonts/retro-stereo-wide.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================================== Classic Clean Express Car Wash — Design System Vibe: beach boutique / Seaside FL — airy, striped, sun-bleached, coastal. Colors sampled from the Classic Clean logo (bright red + sky blue) and the striped brand-guide swatch. ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Brand — sampled directly from the supplied logo + pinstripe swatch */ --red: #FF0000; /* EXACT logo wordmark red */ --red-deep: #D40000; /* hover / pressed */ --red-ink: #CC0000; /* text-safe red: #FF0000 only hits 4.0:1, which fails AA for normal text. Use this for small text, links and small white-on-red fills. */ --logo-blue: #94C0E0; /* EXACT logo truck + "EXPRESS CAR WASH" blue */ --sky: #A9CCE5; /* EXACT pinstripe base (brand-guide swatch) */ --sky-soft: #C1DAED; /* EXACT pinstripe light tone */ --sky-wash: #EAF4FB; /* palest tint, section backgrounds */ /* Coastal neutrals — the "Seaside" half of the palette */ --navy: #1F3A54; /* body copy + headings (AA on white & sand) */ --navy-deep: #14293D; /* dark sections */ --sand: #F5EDE0; /* warm sand background */ --sand-deep: #E8DAC5; /* sand borders */ --cream: #FDFBF7; /* off-white page ground */ --white: #FFFFFF; --slate: #5A6B7C; /* muted body / captions */ /* Retro coastal accents — sun-faded 1970s Gulf postcard */ --sunset: #E8763C; /* faded sunset orange */ --sun: #F2C368; /* retro sun yellow */ --teal: #26737C; /* vintage surf-shop teal (darkened from the sampled #2E8B96 so white table-header text clears AA at 5.49:1 instead of 4.00:1) */ --terracotta: #853218; /* brick-path clay, darkened so the badge's small caps line clears AA on --sun (5.18:1) */ /* Type — wide retro display over a clean, highly legible body face */ --font-display: 'Retro Stereo Wide', 'Arial Black', Impact, sans-serif; --font-heading: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-accent: 'Open Sans', system-ui, sans-serif; /* Scale */ --step-xs: 0.8125rem; --step-sm: 0.9375rem; --step-md: 1.0625rem; --step-lg: clamp(1.15rem, 0.6vw + 1rem, 1.35rem); --h3: clamp(1.22rem, .8vw + 1rem, 1.5rem); --h2: clamp(1.5rem, 1.7vw + 1rem, 2.35rem); --h1: clamp(1.95rem, 3.4vw + 1rem, 3.5rem); /* Space + shape */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 7vw, 6.5rem); --wrap: 1180px; --wrap-narrow: 780px; --radius: 14px; --radius-lg: 22px; --pill: 999px; --shadow-sm: 0 2px 8px rgba(31, 58, 84, .08); --shadow-md: 0 10px 30px rgba(31, 58, 84, .12); --shadow-lg: 0 22px 60px rgba(31, 58, 84, .16); --shadow-hard: 6px 6px 0 var(--navy); /* retro offset print shadow */ --shadow-hard-red: 6px 6px 0 var(--red); --header-h: 88px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: var(--step-md); line-height: 1.65; color: var(--navy); background: var(--cream); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--red-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--red-deep); } h1, h2, h3, h4 { color: var(--navy); margin: 0 0 .6em; text-wrap: balance; } /* Big headlines get the wide retro display face. */ h1, h2 { font-family: var(--font-display); font-weight: 400; /* the display face ships a single weight */ line-height: 1.12; /* wide faces need a touch more air */ letter-spacing: 0; /* already wide — never add tracking */ } /* Smaller headings stay on the body face so the display face stays special. */ h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.25; letter-spacing: -.005em; } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } /* Accessibility */ :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 200; background: var(--navy); color: var(--white); padding: .8rem 1.4rem; border-radius: 0 0 var(--radius) var(--radius); font-weight: 700; text-decoration: none; } .skip-link:focus { transform: translate(-50%, 0); color: var(--white); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--section-y); } .section--sand { background: var(--sand); } .section--sky { background: var(--sky-wash); } .section--navy { background: var(--navy-deep); color: #DCE7F0; } .section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); } .grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .stack > * + * { margin-top: 1.1rem; } .center { text-align: center; } .center .eyebrow { justify-content: center; } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .center .section-head { margin-inline: auto; } /* ---------- Striped awning motif (the Seaside signature) ---------- */ .stripe-rule { height: 10px; border: 0; margin: 0; background: repeating-linear-gradient(90deg, var(--sky) 0 14px, var(--sky-soft) 14px 28px); } .stripe-rule--red { background: repeating-linear-gradient(90deg, var(--red) 0 14px, var(--white) 14px 28px); } .striped-bg { background: repeating-linear-gradient(90deg, var(--sky) 0 16px, var(--sky-soft) 16px 32px); } /* ---------- Eyebrow label ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-accent); font-weight: 700; font-size: var(--step-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--red-ink); margin: 0 0 .9rem; } .eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--red); } .section--navy .eyebrow { color: var(--sky); } .section--navy .eyebrow::before { background: var(--sky); } /* ---------- Buttons (locked system — nothing else may look like these) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1; text-decoration: none; cursor: pointer; padding: 1rem 1.9rem; border-radius: var(--pill); border: 2px solid transparent; min-height: 52px; /* comfortable mobile tap target */ white-space: nowrap; text-align: center; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } /* PRIMARY #1 marketing CTA — Free Wash. Red, glowing. */ .btn--free { background: var(--red); color: var(--white); box-shadow: 0 8px 24px rgba(237, 28, 36, .34); } .btn--free:hover { background: var(--red-deep); color: var(--white); box-shadow: 0 12px 32px rgba(237, 28, 36, .42); } /* PRIMARY #2 — Join the Unlimited Club. Navy solid. */ .btn--club { background: var(--navy); color: var(--white); box-shadow: var(--shadow-sm); } .btn--club:hover { background: var(--navy-deep); color: var(--white); } /* Secondary — outline, never competes with the two above */ .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); } .btn--ghost:hover { background: var(--navy); color: var(--white); } .btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); } .btn--ghost-light:hover { background: var(--white); color: var(--navy); border-color: var(--white); } .btn--sm { padding: .7rem 1.3rem; font-size: 1.175rem; min-height: 46px; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .85rem; } .center .btn-row { justify-content: center; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(253, 251, 247, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sand-deep); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; } .brand img { height: 68px; width: auto; } .brand__fallback { font-family: var(--font-display); font-weight: 400; font-size: .95rem; color: var(--red); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; } .brand__fallback span { display: block; font-family: var(--font-accent); font-weight: 500; font-size: .6rem; letter-spacing: .18em; color: var(--navy); } .nav { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.4rem); } .nav a:not(.btn) { font-family: var(--font-body); font-weight: 600; font-size: var(--step-sm); color: var(--navy); text-decoration: none; padding: .5rem .2rem; white-space: nowrap; border-bottom: 2px solid transparent; } .nav a:not(.btn):hover { color: var(--red); border-bottom-color: var(--red); } .nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; border-radius: 8px; color: var(--navy); } .nav-toggle svg { width: 30px; height: 30px; } .nav-toggle .icon-x { display: none; } .nav-toggle[aria-expanded="true"] .icon-x { display: block; } .nav-toggle[aria-expanded="true"] .icon-menu { display: none; } @media (max-width: 1040px) { .nav-toggle { display: block; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); border-bottom: 4px solid var(--red); padding: 1rem var(--gutter) 2rem; box-shadow: var(--shadow-lg); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; transform: translateY(-130%); transition: transform .28s ease; } .nav[data-open="true"] { transform: translateY(0); } .nav a:not(.btn) { padding: .95rem .25rem; border-bottom: 1px solid var(--sand-deep); font-size: 1.05rem; } .nav a:not(.btn):hover, .nav a[aria-current="page"] { border-bottom-color: var(--sand-deep); } .nav .btn { margin-top: 1rem; } @media (prefers-reduced-motion: reduce) { .nav { transition: none; } } } /* Header utility strip */ .topbar { background: var(--navy-deep); color: #C9DCEB; font-size: var(--step-xs); font-family: var(--font-accent); letter-spacing: .06em; text-transform: uppercase; } .topbar__inner { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: center; padding-block: .55rem; } .topbar a { color: var(--white); text-decoration: none; font-weight: 500; } .topbar a:hover { color: var(--sky); text-decoration: underline; } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--navy-deep); overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,41,61,.72) 0%, rgba(20,41,61,.55) 45%, rgba(20,41,61,.85) 100%); } .hero__inner { position: relative; z-index: 1; padding-block: clamp(4rem, 12vw, 8.5rem); max-width: 42rem; color: var(--white); } .hero h1 { color: var(--white); text-shadow: 0 2px 20px rgba(0,0,0,.35); } .hero__sub { font-size: var(--step-lg); color: #E4EEF6; margin-bottom: 2rem; max-width: 34rem; } .hero .eyebrow { color: var(--sky); } .hero .eyebrow::before { background: var(--sky); } .hero__note { margin-top: 1.4rem; font-size: var(--step-sm); color: #BFD4E4; } /* Placeholder styling — visible where a photo still needs to be dropped in */ .img-placeholder { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, var(--sky-soft) 0 12px, var(--sky-wash) 12px 24px); color: var(--navy); border: 2px dashed var(--sky); border-radius: var(--radius); padding: 2rem 1.25rem; min-height: 220px; font-family: var(--font-accent); font-size: var(--step-sm); letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; } .img-placeholder code { display: block; margin-top: .5rem; font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--slate); } .hero .img-placeholder { min-height: 100%; height: 100%; border: 0; border-radius: 0; align-content: end; padding: 1rem; font-size: .68rem; letter-spacing: .04em; color: rgba(31,58,84,.55); } .hero .img-placeholder code { color: rgba(31,58,84,.5); font-size: .65rem; } /* ---------- Cards ---------- */ .card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: .85rem; } .card--flat { box-shadow: none; } .card__icon { width: 52px; height: 52px; border-radius: var(--pill); display: grid; place-items: center; font-size: 1.5rem; background: var(--sky-wash); border: 2px solid var(--sky); flex-shrink: 0; } .card h3 { margin: 0; } .card p { color: var(--slate); font-size: var(--step-sm); } .card__spacer { margin-top: auto; } .card--photo { padding: 0; overflow: hidden; } .card--photo img, .card--photo .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0; border-radius: 0; min-height: 0; } .card--photo .card__body { padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: .8rem; flex: 1; } /* Feature list with checks */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step-sm); } .checklist li::before { content: "✓"; flex-shrink: 0; width: 22px; height: 22px; margin-top: .12rem; display: grid; place-items: center; border-radius: var(--pill); background: var(--red-ink); color: var(--white); font-size: .7rem; font-weight: 700; } .section--navy .checklist li::before { background: var(--sky); color: var(--navy-deep); } .checklist--sky li::before { background: var(--sky); color: var(--navy-deep); } /* ---------- Pricing / plan cards ---------- */ .plan { background: var(--white); border: 2px solid var(--sand-deep); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem; position: relative; } .plan--featured { border-color: var(--red); box-shadow: var(--shadow-md); } .plan__flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--red-ink); color: var(--white); border-radius: var(--pill); font-family: var(--font-accent); font-size: var(--step-xs); letter-spacing: .14em; text-transform: uppercase; padding: .35rem 1rem; white-space: nowrap; } .plan__name { font-family: var(--font-heading); font-weight: 800; font-size: var(--h3); margin: 0; } .plan__price { display: flex; align-items: baseline; gap: .3rem; font-family: var(--font-heading); } .plan__price b { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1; color: var(--red); } .plan__price span { font-size: var(--step-sm); color: var(--slate); font-family: var(--font-body); } /* Accordion (what's included) */ .acc { border-top: 1px solid var(--sand-deep); } .acc__btn { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; text-align: left; font-family: var(--font-heading); font-weight: 700; font-size: var(--step-sm); color: var(--navy); } .acc__btn::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--red-ink); flex-shrink: 0; } .acc__btn[aria-expanded="true"]::after { content: "–"; } .acc__panel { padding-bottom: 1.1rem; } .acc__panel[hidden] { display: none; } /* ---------- Table (wash menu) ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; background: var(--white); min-width: 520px; } th, td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--sand-deep); font-size: var(--step-sm); } th { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .09em; background: var(--navy-deep); color: var(--white); font-weight: 500; } tbody tr:nth-child(even) { background: var(--sky-wash); } /* ---------- Split (image + text) ---------- */ .split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .split__media img, .split__media .img-placeholder { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .split--reverse .split__media { order: 2; } @media (max-width: 720px) { .split--reverse .split__media { order: 0; } } /* ---------- Stats ---------- */ .stat { text-align: center; } .stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--red); line-height: 1; } .section--navy .stat b { color: var(--sky); } .stat span { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .12em; font-size: var(--step-xs); color: var(--slate); } .section--navy .stat span { color: #BFD4E4; } /* ---------- Location block ---------- */ .loc-card { display: flex; flex-direction: column; gap: 1rem; } .loc-card address { font-style: normal; font-size: var(--step-sm); color: var(--slate); } .loc-card__meta { display: grid; gap: .45rem; font-size: var(--step-sm); } .loc-card__meta div { display: flex; gap: .6rem; } .loc-card__meta dt { font-weight: 700; color: var(--navy); min-width: 4.5rem; } .loc-card__meta dd { margin: 0; color: var(--slate); } .map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm); background: var(--sky-wash); } .map-embed iframe { width: 100%; height: clamp(280px, 40vh, 420px); border: 0; display: block; } /* ---------- Forms / embeds ---------- */ .embed-slot { border: 2px dashed var(--red); border-radius: var(--radius-lg); background: var(--white); padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .embed-slot h3 { color: var(--red-ink); } .embed-slot p { color: var(--slate); font-size: var(--step-sm); margin-bottom: .6rem; } .embed-slot code { display: inline-block; font-family: ui-monospace, monospace; font-size: .78rem; background: var(--sky-wash); padding: .2rem .5rem; border-radius: 6px; color: var(--navy); } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-deep); color: #C4D6E4; padding-block: clamp(2.75rem, 6vw, 4.25rem) 0; } .site-footer h4 { font-family: var(--font-accent); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: var(--step-xs); color: var(--sky); margin-bottom: 1.1rem; } .site-footer a { color: #DCE7F0; text-decoration: none; } .site-footer a:hover { color: var(--white); text-decoration: underline; } .footer-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: var(--step-sm); } .footer-brand img { height: 104px; width: auto; margin-bottom: 1rem; } .footer-brand p { font-size: var(--step-sm); color: #A9C0D2; } .socials { display: flex; gap: .7rem; margin-top: 1.1rem; } .socials a { width: 42px; height: 42px; border-radius: var(--pill); display: grid; place-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); } .socials a:hover { background: var(--red); border-color: var(--red); } .socials svg { width: 20px; height: 20px; fill: currentColor; } .footer-bottom { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid rgba(255,255,255,.14); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: var(--step-xs); color: #91A9BD; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; } /* ---------- Standalone landing pages (no nav) ---------- */ .bare { min-height: 100dvh; display: flex; flex-direction: column; } .bare__head { padding: clamp(1.75rem, 5vw, 3rem) 0 0; text-align: center; } .bare__head img { height: clamp(90px, 18vw, 132px); width: auto; margin-inline: auto; } .bare__body { flex: 1; display: flex; align-items: center; padding-block: clamp(2rem, 5vw, 3.5rem); } .bare__foot { padding-block: 1.5rem; text-align: center; font-size: var(--step-xs); color: var(--slate); } /* ---------- Legal / long-form copy ---------- */ .prose { max-width: 70ch; } .prose h2 { font-size: var(--h3); margin-top: 2.4rem; } .prose h3 { font-size: var(--step-lg); margin-top: 1.8rem; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: .5rem; } .prose--legal { font-size: var(--step-sm); color: #3C5064; } /* ---------- Scroll reveal ---------- */ /* No-JS safe: content is visible by default and only hidden once the .js class confirms the observer can reveal it again. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } html.js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Utilities ---------- */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .lead { font-size: var(--step-lg); color: #3C5064; } .section--navy .lead { color: #C9DCEB; } .muted { color: var(--slate); font-size: var(--step-sm); } .tag { display: inline-block; font-family: var(--font-accent); font-size: var(--step-xs); letter-spacing: .12em; text-transform: uppercase; background: var(--sky-wash); color: var(--navy); border: 1px solid var(--sky); border-radius: var(--pill); padding: .3rem .8rem; } .desktop-only { display: block; } .mobile-only { display: none; } @media (max-width: 720px) { .desktop-only { display: none; } .mobile-only { display: block; } } /* ========================================================================== COASTAL RETRO LAYER 1970s Gulf-coast postcard cues: sunburst rays, sunset bands, arched frames, chunky offset print shadows. Applied through existing classes so the markup stays clean. ========================================================================== */ /* ---------- Sunset band divider (retro cousin of the awning stripe) ------- */ .sunset-rule { height: 12px; border: 0; margin: 0; background: linear-gradient(90deg, var(--red) 0 20%, var(--sunset) 20% 40%, var(--sun) 40% 60%, var(--sky) 60% 80%, var(--teal) 80% 100%); } /* The awning stripe warms up: sun-faded sky over cream, not flat blue. */ .stripe-rule { background: repeating-linear-gradient(90deg, var(--sky) 0 14px, var(--cream) 14px 28px); } .stripe-rule--red { background: repeating-linear-gradient(90deg, var(--red) 0 14px, var(--sun) 14px 28px); } /* ---------- Sunburst rays ---------- */ /* A faded sun behind the hero and the dark CTA bands. */ .hero::before, .section--navy::before { content: ""; position: absolute; top: -30%; left: 50%; width: min(1100px, 150%); aspect-ratio: 1; transform: translateX(-50%); background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(242, 195, 104, .13) 0deg 7deg, transparent 7deg 14deg); -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 78%); mask-image: radial-gradient(closest-side, #000 35%, transparent 78%); pointer-events: none; z-index: 0; } .section--navy { position: relative; overflow: hidden; } .section--navy > .wrap { position: relative; z-index: 1; } /* A warm horizon glow at the base of the hero. */ .hero__media::after { background: linear-gradient(180deg, rgba(20,41,61,.70) 0%, rgba(20,41,61,.50) 42%, rgba(20,41,61,.86) 100%), linear-gradient(0deg, rgba(232,118,60,.30) 0%, transparent 38%); } /* ---------- Arched frames (Seaside archway / retro postcard) ---------- */ .split__media img, .split__media .img-placeholder { border-radius: 190px 190px var(--radius) var(--radius); border: 3px solid var(--navy); box-shadow: var(--shadow-hard); } .section--sky .split__media img, .section--sky .split__media .img-placeholder { box-shadow: var(--shadow-hard-red); } /* Photo cards get an arched top too. */ .card--photo { border-radius: 150px 150px var(--radius-lg) var(--radius-lg); } .card--photo img, .card--photo .img-placeholder { border-radius: 147px 147px 0 0; } /* ---------- Retro print shadows on cards + plans ---------- */ .card { border-width: 2px; border-color: var(--navy); box-shadow: 4px 4px 0 rgba(31,58,84,.14); } .card--flat { box-shadow: none; border-color: var(--sand-deep); } .plan { border-width: 3px; box-shadow: 5px 5px 0 rgba(31,58,84,.13); } .plan--featured { box-shadow: var(--shadow-hard-red); } .section--navy .card { border-color: rgba(255,255,255,.22); box-shadow: none; } /* Icon chips become sun-colored roundels. */ .card__icon { background: var(--sun); border-color: var(--navy); border-width: 2px; font-family: var(--font-display); font-weight: 400; color: var(--navy); } .section--navy .card__icon { background: var(--sun); border-color: var(--navy); color: var(--navy); } /* ---------- Retro badge seal ---------- */ .badge-seal { display: grid; place-content: center; text-align: center; width: clamp(122px, 17vw, 168px); aspect-ratio: 1; border-radius: var(--pill); background: var(--sun); color: var(--navy); border: 3px solid var(--navy); box-shadow: var(--shadow-hard); font-family: var(--font-display); font-weight: 400; line-height: 1.05; font-size: clamp(.92rem, 1.5vw, 1.15rem); padding: 1rem; transform: rotate(-7deg); } .badge-seal small { display: block; font-family: var(--font-accent); font-weight: 700; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .3rem; color: var(--terracotta); } /* ---------- Buttons: chunky retro edge ---------- */ .btn--free { border-color: var(--navy); box-shadow: 4px 4px 0 var(--navy); } .btn--free:hover { box-shadow: 5px 5px 0 var(--navy); } .btn--club { border-color: var(--navy); box-shadow: 4px 4px 0 var(--sun); } .btn--club:hover { box-shadow: 5px 5px 0 var(--sun); } .btn--sm { box-shadow: 3px 3px 0 var(--navy); } .btn--club.btn--sm { box-shadow: 3px 3px 0 var(--sun); } /* ---------- Tags + table headers pick up the retro tones ---------- */ .tag { background: var(--sun); border-color: var(--navy); font-weight: 700; } th { background: var(--teal); } tbody tr:nth-child(even) { background: #FBF4E8; } /* ---------- Sand sections get a subtle horizon line ---------- */ .section--sand { border-bottom: 3px solid var(--sand-deep); } /* ---------- Reduced motion / narrow screens keep it calm ---------- */ @media (max-width: 620px) { :root { --header-h: 74px; } .brand img { height: 56px; } .split__media img, .split__media .img-placeholder { border-radius: 120px 120px var(--radius) var(--radius); } .card--photo { border-radius: 110px 110px var(--radius-lg) var(--radius-lg); } .card--photo img, .card--photo .img-placeholder { border-radius: 107px 107px 0 0; } } /* ---------- Brand divider (the wave + Bronco graphic) ------------------- */ /* Decorative only — always aria-hidden with empty alt. The PNG background was keyed to transparent, so it sits on any section colour. */ .brand-divider { line-height: 0; overflow: hidden; } .brand-divider img { width: 100%; height: auto; display: block; /* Keeps the wave from collapsing to a sliver on very wide screens */ min-height: 54px; object-fit: cover; object-position: center bottom; } .brand-divider--navy { background: var(--navy-deep); } .brand-divider--sand { background: var(--sand); } .brand-divider--sky { background: var(--sky-wash); }