/* ========================================================================== WESTSHORE LAND SALES — design tokens Palette: teal (dominant), white/mist, with orange as a sharp accent. Type: Big Shoulders Display (display) / Newsreader (body) / IBM Plex Mono (labels) ========================================================================== */ :root { --teal-deep: #0a5c62; /* dominant dark — header, hero overlay, footer */ --teal-deepest: #073e42; --teal: #00838f; /* links, eyebrow text, secondary accents */ --teal-soft: #8fd9de; /* light teal for text/emphasis on dark */ --orange: #f2761e; /* ACCENT ONLY — primary CTA, ticks, markers, tags */ --orange-dark: #cc5f13; --mist: #f7fbfb; /* page background (bright, near-white) */ --mist-dark: #e9f4f4; /* alternating section background */ --bright: #4bc7d2; /* clean, bright color-block panels (color-row) */ --chrome-dark: #167f8a; /* header / page-head — darkened version of --bright */ --chrome-darkest: #0d5058; /* footer / nav dropdown — darker still */ --ink: #1a2b2c; /* body text */ --muted: #55706f; /* secondary text on light */ --line: #d3e4e3; /* borders */ --paper: #ffffff; /* cards */ /* Fonts (loaded via to Google Fonts in each HTML ) */ --font-display: "Big Shoulders Display", Impact, sans-serif; --font-body: "Newsreader", Georgia, serif; --font-mono: "IBM Plex Mono", monospace; --maxw: 1120px; --radius: 2px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--font-body), Georgia, serif; font-size: 1.075rem; line-height: 1.65; color: var(--ink); background: var(--mist); } img, video { max-width: 100%; display: block; } a { color: var(--teal); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---- shared type roles -------------------------------------------------- */ .display { font-family: var(--font-display), Impact, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; } .eyebrow { font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); } .on-dark .eyebrow { color: var(--teal-soft); } .section { padding: 64px 0; } .section-head { max-width: 680px; margin-bottom: 48px; } .section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 10px 0 14px; } .section-head p { color: var(--muted); } /* ---- buttons ------------------------------------------------------------ */ .btn { display: inline-block; font-family: var(--font-mono), monospace; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); padding: 15px 26px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-orange { background: var(--orange); color: #fff; font-weight: 500; } .btn-orange:hover { background: var(--orange-dark); } .btn-ghost { background: transparent; color: var(--mist); border-color: rgba(238, 241, 246, 0.45); } .btn-ghost:hover { border-color: #fff; background: rgba(238, 241, 246, 0.08); } .btn-teal { background: var(--teal-deep); color: #fff; } .btn-teal:hover { background: var(--teal-deepest); } /* ---- header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--chrome-dark); border-bottom: 1px solid rgba(238, 241, 246, 0.12); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; } .brand { text-decoration: none; color: #fff; display: flex; align-items: baseline; gap: 10px; } .brand-mark { font-size: 1.45rem; letter-spacing: 0.03em; } .brand-sub { font-family: var(--font-mono), monospace; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-soft); } .site-nav { display: flex; align-items: center; gap: 26px; } .site-nav a { font-family: var(--font-mono), monospace; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); text-decoration: none; } .site-nav a:hover { color: var(--teal-soft); } .site-nav .btn { padding: 10px 18px; } .site-nav .btn-orange:hover { color: #fff; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; } .nav-toggle-bar { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; } /* ---- nav dropdown ------------------------------------------------------- */ .nav-has-dropdown { position: relative; } .nav-trigger { display: inline-flex !important; align-items: center; gap: 5px; cursor: pointer; } .caret { font-size: 0.6em; transition: transform 0.16s ease; } .nav-has-dropdown:hover .caret, .nav-has-dropdown:focus-within .caret, .nav-has-dropdown.open .caret { transform: rotate(180deg); } .dropdown { position: absolute; top: 100%; right: 0; min-width: 232px; max-width: calc(100vw - 32px); margin-top: 0; padding: 20px 8px 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 60; } .dropdown-inner { background: var(--chrome-darkest); border: 1px solid rgba(238, 241, 246, 0.14); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); padding: 8px; display: grid; gap: 2px; } .nav-has-dropdown:hover .dropdown, .nav-has-dropdown:focus-within .dropdown, .nav-has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); text-decoration: none; padding: 10px 12px; border-radius: var(--radius); } .dropdown a:hover { background: rgba(238, 241, 246, 0.08); color: var(--teal-soft); } /* ---- hero ---------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; color: var(--mist); background: var(--teal-deep); } .hero-slides { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; animation: kbFade 44s ease-in-out infinite; } .hero-slide:nth-child(2) { animation-delay: 11s; } .hero-slide:nth-child(3) { animation-delay: 22s; } .hero-slide:nth-child(4) { animation-delay: 33s; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; animation: kbZoom 44s ease-in-out infinite; } .hero-slide:nth-child(2) img { animation-delay: 11s; } .hero-slide:nth-child(3) img { animation-delay: 22s; } .hero-slide:nth-child(4) img { animation-delay: 33s; } .hero-slides::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(7, 62, 66, 0.32) 0%, rgba(7, 62, 66, 0.62) 100% ); } @keyframes kbFade { 0% { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @keyframes kbZoom { 0% { transform: scale(1.05); } 25% { transform: scale(1.14); } 100% { transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .hero-slide:first-child { opacity: 1; } .hero-slide img { animation: none; } } .hero .wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; padding-top: 140px; padding-bottom: 140px; } .hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 16px 0 18px; } .hero h1 em { font-style: normal; color: var(--teal-soft); } .hero-lede { max-width: 56ch; margin: 0 auto 32px; color: #eaf6f6; } .hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; } .hero-phone { font-family: var(--font-mono), monospace; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--teal-soft); } .hero-phone a { color: #fff; text-decoration-color: var(--orange); } .phone-link { display: inline-flex; align-items: center; vertical-align: middle; } .phone-word { font-weight: 700; font-size: 1.35em; letter-spacing: 0.06em; } /* ---- communities (parcel cards) ------------------------------------------ */ .parcel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .parcel { background: var(--paper); border: 1px solid var(--line); outline: 1px dashed var(--line); outline-offset: 5px; overflow: hidden; display: flex; flex-direction: column; position: relative; } .parcel-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .parcel-media img { width: 100%; height: 100%; object-fit: cover; } .parcel-body { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .parcel-no { font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--orange); } .parcel h3 { font-size: 1.9rem; } .parcel-meta { font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--teal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .parcel p { font-size: 0.98rem; color: var(--muted); flex: 1; } .parcel .btn { align-self: flex-start; } /* ---- alternating color-block rows ---------------------------------------- A colored panel fills one half of the section behind the media column, flipping sides row to row. Desktop only — collapses to a plain background once the layout stacks to one column. ---------------------------------- */ @media (min-width: 921px) { .color-row { position: relative; } .color-row::before { content: ""; position: absolute; inset: 0; left: 50%; background: var(--bright); z-index: 0; } .color-row.flip::before { left: 0; right: 50%; } .color-row > .wrap { position: relative; z-index: 1; } .color-row .dev-media { border-color: rgba(255, 255, 255, 0.7); outline-color: rgba(255, 255, 255, 0.55); } .color-row .dev-media .plat-tag { background: var(--teal-deepest); } .color-row .video-frame { border-color: rgba(255, 255, 255, 0.55); } } /* ---- how to purchase (deed document) ------------------------------------- */ .package-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; } .package-grid.flip { grid-template-columns: 0.9fr 1.1fr; } .package-grid.flip .media-stack { order: 1; } .media-stack { display: grid; gap: 24px; } /* video placeholder */ .video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--teal-deepest); border: 1px dashed var(--line); display: grid; place-items: center; } .video-inner { text-align: center; padding: 24px; } .play-btn { width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(242, 118, 30, 0.92); color: #fff; font-size: 1.5rem; cursor: pointer; margin-bottom: 16px; } .play-btn:hover { background: var(--orange-dark); } .video-inner p { font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-soft); } .video-frame.video-filled { border-style: solid; padding: 0; } .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .deed { background: var(--paper); border: 1px solid var(--line); padding: 36px 34px; box-shadow: 6px 6px 0 var(--mist-dark); } .deed-head { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; color: var(--teal); border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 20px; } .deed ul { list-style: none; } .deed li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--line); font-size: 1rem; } .deed li:last-child { border-bottom: 0; } .deed li::before { content: "\2713"; color: var(--orange); font-family: var(--font-mono), monospace; font-weight: 700; } /* ---- financing ----------------------------------------------------------- */ .fin-centered { text-align: center; } .fin-centered .section-head { margin-left: auto; margin-right: auto; } .fin-centered .fin-bullets { max-width: 640px; margin-left: auto; margin-right: auto; text-align: left; } .fin-bullets { list-style: none; display: grid; gap: 4px; margin-top: 8px; } .fin-bullets li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; } .fin-bullets li::before { content: "\2713"; color: var(--orange); font-family: var(--font-mono), monospace; font-weight: 700; } .fin-bullets strong { color: var(--ink); } .fin-disclaimer { margin-top: 20px; font-size: 0.86rem; font-style: italic; color: var(--muted); } /* ---- contact ------------------------------------------------------------- */ .contact { background: var(--mist-dark); } .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; } .contact-form { background: var(--paper); border: 1px solid var(--line); padding: 36px; display: grid; gap: 18px; } .field { display: grid; gap: 6px; } .field label { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); } .field input, .field select, .field textarea { font-family: var(--font-body), Georgia, serif; font-size: 1rem; color: var(--ink); background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; width: 100%; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-consent { font-size: 0.74rem; line-height: 1.55; color: var(--muted); } .form-error { font-size: 0.85rem; color: var(--orange); border: 1px solid var(--orange); border-radius: var(--radius); padding: 10px 14px; margin: 0; } .form-success { background: var(--paper); border: 1px dashed var(--orange); padding: 48px 36px; text-align: center; display: grid; gap: 12px; } /* ---- blog post body ------------------------------------------------------- */ .post-body { max-width: 74ch; } .post-body h2 { font-family: var(--font-display), Impact, sans-serif; font-weight: 500; text-transform: uppercase; font-size: 1.6rem; margin: 32px 0 12px; } .post-body h3 { font-family: var(--font-display), Impact, sans-serif; font-weight: 500; text-transform: uppercase; font-size: 1.3rem; margin: 26px 0 10px; } .post-body p { margin-bottom: 18px; } .post-body ul, .post-body ol { margin: 0 0 18px 22px; } .post-body li { margin-bottom: 8px; } .post-body img { margin: 24px 0; border: 1px solid var(--line); max-width: 100%; } .post-body blockquote { border-left: 3px solid var(--orange); padding-left: 18px; color: var(--muted); font-style: italic; margin: 24px 0; } /* ---- gallery ------------------------------------------------------------- */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gallery-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: var(--mist-dark); } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; } .gallery-tile.ph { display: grid; place-items: center; } .gallery-tile.ph::after { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--line); pointer-events: none; } .gallery-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono), monospace; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); } .gallery-ph svg { width: 32px; height: 32px; color: #b8c2d4; } /* clickable gallery tiles (button reset) */ button.gallery-tile { padding: 0; margin: 0; cursor: zoom-in; display: block; width: 100%; } button.gallery-tile:hover img { transform: scale(1.04); } button.gallery-tile img { transition: transform 0.35s ease; } /* ---- lightbox ------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 20, 21, 0.94); } .lightbox.open { display: flex; } .lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: min(1120px, 92vw); max-height: 86vh; width: auto; height: auto; border: 1px solid rgba(238, 241, 246, 0.14); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } .lightbox-cap { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; color: var(--teal-soft); font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.08em; } .lightbox-btn { position: absolute; border: 0; background: rgba(238, 241, 246, 0.1); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease; } .lightbox-btn:hover { background: var(--orange); } .lightbox-close { top: 20px; right: 22px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; line-height: 1; } .lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 1.5rem; line-height: 1; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-count { position: absolute; top: 26px; left: 24px; color: var(--teal-soft); font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.1em; } @media (max-width: 600px) { .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-close { top: 10px; right: 12px; } } /* ---- blog ---------------------------------------------------------------- */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .post-card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; } .post-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .post-card-media img { width: 100%; height: 100%; object-fit: cover; } .post-card-body { padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .post-card .eyebrow::before { display: none; } .post-card h3 { font-size: 1.6rem; line-height: 1.05; } .post-card h3 a { color: var(--ink); text-decoration: none; } .post-card h3 a:hover { color: var(--orange-dark); } .post-card p { font-size: 0.95rem; color: var(--muted); flex: 1; } .post-meta { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; } /* ---- blog post hero image -------------------------------------------------- */ .post-hero { aspect-ratio: 21 / 9; overflow: hidden; } .post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 921px) { .post-hero { aspect-ratio: auto; display: flex; justify-content: center; padding: 32px 24px; } .post-hero img { width: 100%; max-width: var(--maxw); height: 320px; border: 1px solid var(--line); } } /* ---- interior page head -------------------------------------------------- */ .page-head { background: var(--chrome-dark); color: var(--mist); padding: 28px 0; } .page-head h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-top: 8px; } /* ---- footer -------------------------------------------------------------- */ .site-footer { background: var(--chrome-darkest); color: var(--teal-soft); padding: 56px 0 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .site-footer h4 { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 14px; font-weight: 500; } .site-footer ul { list-style: none; display: grid; gap: 8px; } .site-footer a { color: var(--teal-soft); text-decoration: none; font-size: 0.92rem; } .site-footer a:hover { color: #fff; } .footer-brand { color: #fff; font-size: 1.4rem; margin-bottom: 10px; } .footer-blurb { font-size: 0.92rem; max-width: 42ch; } .footer-legal { border-top: 1px solid rgba(238, 241, 246, 0.14); padding-top: 22px; font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.06em; line-height: 1.8; } /* ---- developer page ------------------------------------------------------ */ .subnav { position: sticky; top: 56px; z-index: 40; background: var(--mist-dark); border-bottom: 1px solid var(--line); } .subnav .wrap { display: flex; gap: 8px; overflow-x: auto; } .subnav a { font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); text-decoration: none; padding: 15px 14px; white-space: nowrap; border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--orange-dark); border-bottom-color: var(--orange); } .dev-section { scroll-margin-top: 112px; } .dev-section.alt { background: var(--mist-dark); } .dev-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .dev-split.flip .dev-media { order: -1; } /* text top-left, its image top-right; second image bottom-left, checklist bottom-right */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px; align-items: start; } .dev-copy .eyebrow { margin-bottom: 10px; } .dev-copy h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; } .dev-copy p { color: var(--muted); margin-bottom: 16px; } .dev-copy p:last-child { margin-bottom: 0; } .dev-media { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); outline: 1px dashed var(--line); outline-offset: 6px; overflow: hidden; } .dev-media img { width: 100%; height: 100%; object-fit: cover; } .dev-media .plat-tag { position: absolute; bottom: 12px; left: 12px; font-family: var(--font-mono), monospace; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(7, 62, 66, 0.82); padding: 6px 10px; } .commitment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; } .commitment-item { background: var(--paper); padding: 28px 24px; } .commitment-item h3 { font-size: 1.4rem; margin: 0 0 8px; } .commitment-item p { font-size: 0.94rem; color: var(--muted); } .story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .story-card { background: var(--paper); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; } .story-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .story-media img { width: 100%; height: 100%; object-fit: cover; } .story-status { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono), monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--orange); padding: 5px 9px; } .story-status.soon { background: var(--teal-deep); } .story-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .story-body h3 { font-size: 1.5rem; } .story-meta { font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--teal); text-transform: uppercase; } .story-body p { font-size: 0.94rem; color: var(--muted); } .story-body .btn { align-self: flex-start; margin-top: 4px; } /* ---- community landing page ---------------------------------------------- */ .chero { position: relative; overflow: hidden; color: var(--mist); background: var(--teal-deep); } .chero-bg { position: absolute; inset: 0; z-index: 0; } .chero-bg img { width: 100%; height: 100%; object-fit: cover; } .chero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 62, 66, 0.42) 0%, rgba(7, 62, 66, 0.18) 100%); } .chero .wrap { position: relative; z-index: 2; padding: 116px 24px; } .chero h1, .chero .eyebrow, .chero-lede, .chero-meta span { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .chero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 14px 0 16px; } .chero-lede { max-width: 54ch; color: #d7deea; } .chero-meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 26px; font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-soft); } .chero-meta span { display: flex; align-items: center; gap: 8px; } .chero-meta span::before { content: "\2605"; color: var(--orange); } .feature-list { list-style: none; display: grid; gap: 12px; margin-top: 8px; } .feature-list li { display: flex; gap: 14px; font-size: 1.02rem; } .feature-list li::before { content: "\2713"; color: var(--orange); font-family: var(--font-mono), monospace; font-weight: 700; } .feature-list.cols-2 { grid-template-columns: 1fr 1fr; column-gap: 32px; } /* ---- ad landing pages ----------------------------------------------------- */ .cta-banner { background: var(--mist-dark); color: var(--ink); text-align: center; padding: 64px 0; } .cta-banner .eyebrow { justify-content: center; color: var(--teal); } .cta-banner h2 { font-size: clamp(2.6rem, 7vw, 4.4rem); color: var(--orange-dark); margin: 12px 0 20px; } .cta-banner p { max-width: 62ch; margin: 0 auto 16px; color: var(--muted); } .cta-banner .btn { margin-top: 12px; } .lp-banner-contact { margin-top: 20px; font-family: var(--font-mono), monospace; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); } .lp-banner-contact a { color: var(--teal); text-decoration-color: var(--orange); } /* site plan (plat map) */ .plat-section .section-head { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } .plat-frame { display: block; width: 100%; max-width: 900px; margin: 0 auto; padding: 0; border: 1px solid var(--line); background: var(--paper); cursor: zoom-in; } .plat-frame img { display: block; width: 100%; height: auto; } .plat-frame:hover { border-color: var(--teal); } .plat-hint { text-align: center; margin-top: 10px; font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* minimal header (no site nav) */ .lp-header-cta { display: flex; align-items: center; gap: 22px; } .lp-header-cta .phone-link { font-family: var(--font-mono), monospace; font-size: 0.8rem; letter-spacing: 0.08em; color: #fff; text-decoration: none; text-align: right; } .lp-header-cta .phone-link:hover { color: var(--teal-soft); } .lp-header-cta .btn { padding: 10px 18px; } /* hero: headline + video + form above the fold */ .lp-hero { position: relative; overflow: hidden; background: var(--teal-deepest); color: var(--mist); } .lp-hero-bg { position: absolute; inset: 0; z-index: 0; } .lp-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .lp-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 22, 24, 0.94) 0%, rgba(7, 46, 50, 0.88) 100%); } .lp-hero .wrap { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 48px; } .lp-hero-head { text-align: center; max-width: 880px; margin: 0 auto 30px; } .lp-hero-head .eyebrow { justify-content: center; } .lp-hero-head h1 { font-size: clamp(2.9rem, 6vw, 4.6rem); color: #fff; margin: 12px 0 6px; } .lp-hero-tagline { font-family: var(--font-display), Impact, sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.55rem); letter-spacing: 0.05em; color: var(--teal-soft); margin-bottom: 14px; } .lp-hero-lede { color: #eaf6f6; max-width: 64ch; margin: 0 auto 10px; } .lp-urgency-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 auto 20px; padding: 0; max-width: 640px; font-family: var(--font-mono), monospace; font-size: 0.78rem; letter-spacing: 0.02em; color: #eaf6f6; } .lp-urgency-list li { display: flex; align-items: center; gap: 7px; white-space: nowrap; } .lp-urgency-list li::before { content: "\2713"; color: var(--orange); font-weight: 700; } .lp-contact-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 32px; font-family: var(--font-mono), monospace; font-size: 0.85rem; letter-spacing: 0.06em; } .lp-contact-row a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .lp-contact-row a:hover { color: var(--teal-soft); } .lp-contact-row .lp-ico { color: var(--orange); } .lp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; } .lp-hero-grid .video-frame { border-color: rgba(255, 255, 255, 0.4); } .lp-form-card { background: var(--paper); border: 1px solid var(--line); padding: 24px 24px 22px; display: grid; gap: 13px; color: var(--ink); } .lp-form-head { text-align: center; display: grid; gap: 4px; margin-bottom: 2px; } .lp-form-kicker { font-family: var(--font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-dark); } .lp-form-head h2 { font-size: 1.65rem; } .lp-form-card .field input, .lp-form-card .field select { padding: 10px 13px; } .lp-form-card .form-consent { font-size: 0.66rem; } @media (max-width: 920px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 20px; } .lp-hero .wrap { padding-top: 28px; padding-bottom: 36px; } .lp-hero-head { margin-bottom: 22px; } } @media (max-width: 700px) { .lp-hide-sm { display: none; } .lp-urgency-list { flex-direction: column; align-items: center; gap: 6px; font-size: 0.74rem; } /* phone + email stay visible in the hero contact row, so the header slims down to brand + CTA to keep the fold tight */ .lp-header-cta .phone-link { display: none; } .lp .brand-sub { display: none; } .lp .brand-mark { font-size: 1.1rem; } .lp-header-cta .btn { padding: 9px 12px; font-size: 0.68rem; letter-spacing: 0.06em; } .lp-hero-head h1 { font-size: clamp(2.4rem, 10vw, 3rem); } .lp-contact-row { font-size: 0.78rem; gap: 8px 20px; } } /* ---- responsive ---------------------------------------------------------- */ @media (max-width: 920px) { .section { padding: 48px 0; } .hero .wrap { padding-top: 96px; padding-bottom: 96px; } .parcel-grid { grid-template-columns: 1fr; } .post-grid { grid-template-columns: 1fr 1fr; } .package-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; } .footer-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr 1fr; } .site-header .wrap { flex-wrap: wrap; } .nav-toggle { display: flex; } .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 20px; } .site-nav.is-open { display: flex; } .site-nav .nav-link { display: block; padding: 12px 2px; } .nav-has-dropdown { display: block; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 0; padding: 0 0 4px 14px; display: grid; } .dropdown-inner { background: transparent; border: 0; box-shadow: none; padding: 0; } .caret { display: none; } .site-nav .btn { display: inline-flex; margin-top: 10px; } .subnav { top: 0; } .dev-split { grid-template-columns: 1fr; gap: 32px; } .dev-split.flip .dev-media { order: 0; } .package-grid.flip { grid-template-columns: 1fr; } .package-grid.flip .media-stack { order: 0; } .why-grid { grid-template-columns: 1fr; gap: 24px; } .commitment-grid, .story-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .feature-list.cols-2 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .post-grid, .field-row, .footer-grid, .commitment-grid, .story-grid, .gallery-grid { grid-template-columns: 1fr; } .brand { flex-wrap: wrap; row-gap: 0; } .brand-sub { font-size: 0.55rem; letter-spacing: 0.14em; } }