/* Coastal luxury theme (Coronado, San Clemente, Carlsbad, La Jolla sites). Loaded AFTER styles.css / blog.css / media.css. Turned on by . Hero art is hero-1920.webp / hero-1280.webp, pre-rendered from the site's hero-art.svg by sites\make-hero-images.ps1. To use a real photo instead, save it over those two WebP files in the site folder (1920x1080 and 1280x720). */ html.theme-coastal { --coast-sans: "Avenir Next", "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --coast-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --primary: #16324a; --primary-2: #0b1f31; --ink: #1b2733; --muted: #66737f; --cream: #faf7f1; --card: #ffffff; --border: #e6dfd2; --accent: #c6a15b; --accent-2: #b48f49; --radius: 0px; --radius-sm: 0px; --shadow: 0 18px 50px rgba(11, 31, 49, 0.14); --shadow-sm: none; --topbar-h: 84px; color-scheme: light; } html.theme-coastal[data-coast="aqua-sand"] { --primary: #1d5b6b; --primary-2: #0d3541; --accent: #d1ad76; --accent-2: #bd9760; --cream: #f8f5ee; --border: #e4ddcf; } html.theme-coastal[data-coast="dusk-coral"] { --primary: #2a3a5c; --primary-2: #131c36; --accent: #e0916b; --accent-2: #cc7c57; --cream: #fbf6f1; --border: #eadfd6; } html.theme-coastal[data-coast="terracotta"] { --primary: #23364f; --primary-2: #0f1b2b; --accent: #c96f4a; --accent-2: #b45c39; --cream: #faf5ee; --border: #eadccd; } html.theme-coastal[data-coast="ranunculus"] { --primary: #2b4a6a; --primary-2: #13283c; --accent: #e07a5f; --accent-2: #cb664b; --cream: #fbf7f2; --border: #eadfd4; } html.theme-coastal[data-coast="lajolla"] { --primary: #12454f; --primary-2: #072a32; --accent: #c9b07a; --accent-2: #b39a63; --cream: #f6f5ef; --border: #e2ded0; } html.theme-coastal[data-coast="sage"] { --primary: #3f5f52; --primary-2: #1c2f27; --accent: #c8ad78; --accent-2: #b09462; --cream: #f6f6f0; --border: #e0e3da; } html.theme-coastal[data-coast="slate-rose"] { --primary: #33475b; --primary-2: #16222f; --accent: #d0a08a; --accent-2: #bb8a73; --cream: #f7f5f3; --border: #e6dfda; } html.theme-coastal[data-coast="plum"] { --primary: #4a3550; --primary-2: #221827; --accent: #d8b46a; --accent-2: #c09c52; --cream: #f8f5f6; --border: #e6dfe3; } html.theme-coastal[data-coast="midnight"] { --primary: #1f2a44; --primary-2: #0c1222; --accent: #aebbd0; --accent-2: #8a9ab3; --cream: #f5f6f8; --border: #dfe3ea; } html.theme-coastal[data-coast="hillside"] { --primary: #1f5c66; --primary-2: #0e3239; --accent: #e0b070; --accent-2: #c99a58; --cream: #f7f6f0; --border: #e3e0d3; } html.theme-coastal[data-coast="sienna"] { --primary: #5a3624; --primary-2: #2c1a12; --accent: #e08a4a; --accent-2: #c9743a; --cream: #fbf6ef; --border: #ebdfd0; } html.theme-coastal[data-coast="warm"] { --primary: #2f4b6b; --primary-2: #15283d; --accent: #f0a04b; --accent-2: #d98a35; --cream: #fdf8f0; --border: #efe4d2; } html.theme-coastal[data-coast="forest"] { --primary: #24493a; --primary-2: #0f251c; --accent: #c98a5a; --accent-2: #b3764a; --cream: #f6f5ef; --border: #e1e0d3; } html.theme-coastal[data-coast="navybrick"] { --primary: #1e3556; --primary-2: #0c192c; --accent: #c0523f; --accent-2: #a94433; --cream: #f6f5f3; --border: #e2e0dc; } html.theme-coastal[data-coast="lake"] { --primary: #14606a; --primary-2: #0b2f36; --accent: #d98a5f; --accent-2: #c4744a; --cream: #f6f6f1; --border: #e1e3d8; } html.theme-coastal[data-coast="graphite"] { --primary: #2c3238; --primary-2: #12161a; --accent: #c8a95b; --accent-2: #b0924a; --cream: #f6f5f2; --border: #e4e2dc; } .theme-coastal body { font-family: var(--coast-sans); background: var(--cream); color: var(--ink); line-height: 1.7; } .theme-coastal p { color: var(--ink); line-height: 1.8; } .theme-coastal h1, .theme-coastal h2, .theme-coastal h3 { font-family: var(--coast-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.3; color: var(--primary-2); } .theme-coastal h1 { font-size: clamp(1.7rem, 4.2vw, 3.1rem); font-weight: 300; letter-spacing: 0.16em; } .theme-coastal h2 { font-size: clamp(1.25rem, 2.4vw, 1.85rem); } .theme-coastal h3 { font-size: 0.98rem; letter-spacing: 0.12em; } /* ---------- header ---------- */ .theme-coastal .topbar { position: sticky; top: 0; z-index: 40; min-height: var(--topbar-h); padding: 16px 40px; gap: 18px; background: rgba(9, 24, 38, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.25s ease; } .theme-coastal .brand { color: #fff; font-family: var(--coast-sans); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; } .theme-coastal .brand .logo { color: var(--accent); width: 32px; height: 32px; } .theme-coastal .brand-text { font-size: 0.9rem; } .theme-coastal .brand-text .accent { color: var(--accent); } .theme-coastal .nav-links { gap: 26px; } .theme-coastal .nav-links a { color: #fff; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 500; } .theme-coastal .nav-links a:hover { color: var(--accent); } .theme-coastal .nav-links .btn { color: var(--primary-2); } .theme-coastal .nav-links .btn:hover { color: var(--primary-2); } /* homepage: transparent header floating over the hero on wide screens, pinned and solid once you scroll. It only floats while the menu fits on ONE row: below 1000px, or whenever coastal.js sees the menu wrap (bigger fonts, browser zoom), it becomes a normal solid bar above the hero so it can never sit on the headline. */ .theme-coastal #app { position: relative; } html.theme-coastal[data-page="home"] .topbar { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: rgba(255, 255, 255, 0.2); } html.theme-coastal[data-page="home"].is-scrolled .topbar { position: fixed; background: rgba(9, 24, 38, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-coastal[data-page="home"].hdr-stack .topbar, html.theme-coastal[data-page="home"].hdr-stack.is-scrolled .topbar { position: sticky; top: 0; background: rgba(9, 24, 38, 0.97); } html.theme-coastal.hdr-stack .hero { padding-top: 64px; } .theme-coastal .compliance-bar-inner { justify-content: center; } .theme-coastal .compliance-agent { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 1180px) { .theme-coastal .topbar { padding: 14px 24px; } .theme-coastal .nav-links { gap: 14px 18px; } .theme-coastal .nav-links a { letter-spacing: 0.1em; font-size: 0.66rem; } .theme-coastal .brand { letter-spacing: 0.14em; } } @media (max-width: 1100px) { .theme-coastal .compliance-sep { display: none; } } @media (max-width: 1000px) { html.theme-coastal[data-page="home"] .topbar, html.theme-coastal[data-page="home"].is-scrolled .topbar { position: sticky; top: 0; background: rgba(9, 24, 38, 0.97); } html.theme-coastal .hero { padding-top: 64px; } } /* ---------- buttons ---------- */ .theme-coastal .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 600; padding: 15px 30px; box-shadow: none; } .theme-coastal .btn-sm { padding: 11px 20px; font-size: 0.66rem; } .theme-coastal .btn-primary { background: var(--accent); color: var(--primary-2); } .theme-coastal .btn-primary:hover { background: #fff; color: var(--primary-2); transform: none; } .theme-coastal .btn-outline { color: var(--primary-2); border: 1px solid var(--primary-2); background: transparent; } .theme-coastal .btn-outline:hover { background: var(--primary-2); color: #fff; border-color: var(--primary-2); } /* ---------- hero ---------- */ .theme-coastal .hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(92vh, 880px); padding: calc(var(--topbar-h) + 70px) 24px 90px; color: #fff; background-color: var(--primary-2); background-image: linear-gradient(180deg, rgba(5, 16, 28, 0.55) 0%, rgba(5, 16, 28, 0.12) 42%, rgba(5, 16, 28, 0.62) 100%), url(hero-1920.webp); background-size: cover, cover; background-position: center, center bottom; background-repeat: no-repeat; } .theme-coastal .hero .container { max-width: 900px; } .theme-coastal .hero .eyebrow { display: block; background: none; border-radius: 0; padding: 0; margin-bottom: 26px; letter-spacing: 0.34em; font-size: 0.7rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); } .theme-coastal .hero h1 { color: #fff; max-width: none; margin: 0 auto 22px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); } .theme-coastal .hero p.lead { color: rgba(255, 255, 255, 0.92); font-size: 0.98rem; letter-spacing: 0.05em; max-width: 640px; margin: 0 auto 34px; } .theme-coastal .hero .hero-phone { display: block; margin: 34px auto 0; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 300; letter-spacing: 0.1em; color: #fff; text-decoration: none; } .theme-coastal .hero .hero-phone:hover { color: var(--accent); } .theme-coastal .hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.75); } .theme-coastal .hero .btn-outline:hover { background: #fff; color: var(--primary-2); border-color: #fff; } /* sub-page hero (blog, articles, media) */ .theme-coastal .hero-sub { display: flex; align-items: flex-end; min-height: 340px; padding: 96px 24px 54px; text-align: left; background-color: var(--primary-2); background-image: linear-gradient(180deg, rgba(5, 16, 28, 0.35), rgba(5, 16, 28, 0.7)), url(hero-1280.webp); background-size: cover, cover; background-position: center, center 72%; background-repeat: no-repeat; } .theme-coastal .hero-sub .container { width: 100%; } .theme-coastal .hero-sub h1 { font-family: var(--coast-serif); text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.2; color: #fff; } .theme-coastal .hero-sub p.lead { color: rgba(255, 255, 255, 0.9); } .theme-coastal .hero-sub .eyebrow { background: none; padding: 0; letter-spacing: 0.3em; font-size: 0.7rem; color: var(--accent); } /* ---------- sections ---------- */ .theme-coastal section { padding: 100px 24px; background-color: var(--cream); } .theme-coastal section:nth-of-type(even) { background-color: #fff; } .theme-coastal .section-head { max-width: 720px; margin-bottom: 54px; } .theme-coastal .section-head .kicker { color: var(--accent-2); letter-spacing: 0.34em; font-size: 0.68rem; font-weight: 600; } .theme-coastal .section-head h2 { margin-top: 12px; } .theme-coastal .section-head h2::after { content: ""; display: block; width: 56px; height: 1px; background: var(--accent); margin: 22px auto 0; } .theme-coastal .section-head p { color: var(--muted); letter-spacing: 0.02em; } .theme-coastal .feature-card { background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 0; box-shadow: none; text-align: center; padding: 40px 26px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .theme-coastal section:nth-of-type(even) .feature-card { background: var(--cream); } .theme-coastal .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .theme-coastal .feature-card .icon { color: var(--accent-2); width: 34px; height: 34px; margin: 0 auto 20px; display: block; stroke-width: 1.2; } .theme-coastal .feature-card p { color: var(--muted); font-size: 0.93rem; line-height: 1.75; } .theme-coastal .about-wrap { border: 0; border-radius: 0; box-shadow: var(--shadow); background: #fff; padding: 60px; grid-template-columns: 300px 1fr; gap: 56px; } .theme-coastal .avatar-cluster { flex-direction: row; gap: 12px; } .theme-coastal .avatar, .theme-coastal .avatar-secondary { width: 138px; height: 178px; border-radius: 0; object-fit: cover; box-shadow: none; } .theme-coastal .about-copy .badge { border-radius: 0; background: none; padding: 0; color: var(--accent-2); letter-spacing: 0.3em; font-size: 0.68rem; } .theme-coastal .about-copy .title { color: var(--muted); letter-spacing: 0.06em; } .theme-coastal .footer-logos, .theme-coastal .about-logos { border-radius: 0; } .theme-coastal section:has(> .cta-banner) { background-color: var(--primary-2); } .theme-coastal .cta-banner { background: transparent; border-radius: 0; padding: 20px; } .theme-coastal .cta-banner h2 { color: #fff; } .theme-coastal .cta-banner p { color: rgba(255, 255, 255, 0.86); } .theme-coastal .contact-wrap { border: 0; border-radius: 0; box-shadow: var(--shadow); background: #fff; padding: 56px; } .theme-coastal label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; font-weight: 600; color: var(--muted); } .theme-coastal input, .theme-coastal select, .theme-coastal textarea { background: transparent; border: 0; border-bottom: 1px solid #cfc6b4; border-radius: 0; padding: 12px 2px; font-size: 1rem; } .theme-coastal input:focus, .theme-coastal select:focus, .theme-coastal textarea:focus { border-bottom-color: var(--accent-2); } .theme-coastal .form-status { border-radius: 0; } .theme-coastal footer { background: var(--primary-2); padding: 56px 24px 40px; letter-spacing: 0.06em; } .theme-coastal footer .container div { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; } .theme-coastal footer a[href^="mailto"] { text-transform: none; letter-spacing: 0.04em; } .theme-coastal footer .fh-note, .theme-coastal footer .copyright { text-transform: none; letter-spacing: 0.02em; } /* ---------- blog / articles ---------- */ .theme-coastal .blog-card { border-radius: 0; border: 1px solid var(--border); box-shadow: none; } .theme-coastal .blog-card h3 { color: var(--primary-2); } .theme-coastal .blog-card .blog-kicker, .theme-coastal .blog-kicker { color: var(--accent-2); letter-spacing: 0.26em; } .theme-coastal .article-content { font-size: 1.04rem; } .theme-coastal .article-content p { line-height: 1.9; } .theme-coastal .article-content h2 { font-family: var(--coast-serif); text-transform: none; letter-spacing: 0.01em; font-weight: 600; font-size: 1.55rem; color: var(--primary-2); margin-top: 38px; } .theme-coastal .scenic-banner { border-radius: 0; } .theme-coastal .social-bar a { border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; } .theme-coastal .breadcrumb { background: transparent; } /* ---------- media page ---------- */ .theme-coastal .media-chip { border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; } .theme-coastal .media-chip[aria-pressed="true"] { color: var(--primary-2); } /* ---------- small screens ---------- */ @media (max-width: 860px) { .theme-coastal .topbar { padding: 14px 20px; } html.theme-coastal[data-page="home"] .topbar, html.theme-coastal[data-page="home"].is-scrolled .topbar { position: sticky; top: 0; background: rgba(9, 24, 38, 0.97); } .theme-coastal .nav-links { gap: 14px 18px; } .theme-coastal .hero { padding-top: 64px; min-height: 78vh; } .theme-coastal section { padding: 70px 20px; } .theme-coastal .about-wrap { padding: 32px 22px; grid-template-columns: 1fr; gap: 28px; } .theme-coastal .avatar-cluster { justify-content: center; } .theme-coastal .contact-wrap { padding: 32px 22px; } .theme-coastal .hero-sub { min-height: 260px; padding-top: 60px; } } /* ========================================================================== Deluxe pass (appended to coastal.css by make-coastal.ps1). Real self-hosted type (Cormorant Garamond + Montserrat, SIL OFL), serif display headings, hairline gold detailing, slow hero motion and scroll reveals. All motion is off for prefers-reduced-motion. CSP-safe: no inline styles, fonts served from ./fonts/. ========================================================================== */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/cormorant-garamond-300.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-500.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-400-italic.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); } @font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 111.85%; ascent-override: 86.55%; descent-override: 22.44%; line-gap-override: 0%; } @font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); size-adjust: 94.9%; ascent-override: 97.4%; descent-override: 30.3%; line-gap-override: 0%; } html.theme-coastal { --coast-sans: "Montserrat", "Montserrat Fallback", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --coast-serif: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", Georgia, "Times New Roman", serif; --gold-line: color-mix(in srgb, var(--accent) 42%, transparent); scroll-behavior: smooth; } .theme-coastal ::selection { background: var(--accent); color: var(--primary-2); } .theme-coastal body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 15.5px; line-height: 1.85; } .theme-coastal section[id] { scroll-margin-top: 92px; } /* ---------- type: serif display, quiet sans for reading and UI ---------- */ .theme-coastal h1, .theme-coastal h2, .theme-coastal h3 { font-family: var(--coast-serif); text-transform: none; } .theme-coastal h1 { font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.12; font-size: clamp(2.1rem, 5.2vw, 4rem); } .theme-coastal h2 { font-weight: 500; letter-spacing: 0.01em; line-height: 1.16; font-size: clamp(2rem, 3.6vw, 2.9rem); } .theme-coastal h3 { font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; font-size: 1.45rem; } .theme-coastal p { letter-spacing: 0.005em; } .theme-coastal .brand, .theme-coastal .nav-links a, .theme-coastal .btn, .theme-coastal label { font-family: var(--coast-sans); } .theme-coastal .hero .eyebrow, .theme-coastal .section-head .kicker, .theme-coastal .hero-sub .eyebrow { font-family: var(--coast-sans); } .theme-coastal .hero .hero-phone { font-family: var(--coast-serif); font-weight: 300; letter-spacing: 0.08em; font-size: clamp(1.9rem, 4.4vw, 3rem); } .theme-coastal .hero p.lead { font-size: 1.02rem; line-height: 1.85; } /* ---------- hero: slow drift, staged entrance, scroll cue ---------- */ .theme-coastal .hero:not(.hero-sub) { overflow: hidden; isolation: isolate; background: var(--primary-2); background-image: none; } .theme-coastal .hero:not(.hero-sub)::before { content: ""; position: absolute; inset: -4%; z-index: -1; background-image: linear-gradient(180deg, rgba(5, 16, 28, 0.55) 0%, rgba(5, 16, 28, 0.12) 42%, rgba(5, 16, 28, 0.62) 100%), url(hero-1920.webp); background-size: cover, cover; background-position: center, center bottom; background-repeat: no-repeat; animation: coast-drift 42s ease-in-out infinite alternate; will-change: transform; } .theme-coastal .hero:not(.hero-sub)::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: 1px; height: 56px; z-index: 1; background: linear-gradient(var(--accent), transparent); transform-origin: top; animation: coast-cue 2.8s ease-in-out infinite; } .theme-coastal .hero:not(.hero-sub) .container { position: relative; z-index: 2; } .theme-coastal .hero:not(.hero-sub) .eyebrow { animation: coast-rise 1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .theme-coastal .hero:not(.hero-sub) h1 { animation: coast-rise 1.1s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .theme-coastal .hero:not(.hero-sub) p.lead { animation: coast-rise 1s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .theme-coastal .hero:not(.hero-sub) .hero-actions { animation: coast-rise 1s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .theme-coastal .hero:not(.hero-sub) .hero-phone { animation: coast-rise 1s 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes coast-drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.4%, -0.9%, 0); } } @keyframes coast-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes coast-cue { 0%, 100% { opacity: 0.25; transform: scaleY(0.35); } 50% { opacity: 0.95; transform: scaleY(1); } } /* ---------- header ---------- */ html.theme-coastal[data-page="home"].is-scrolled .topbar { border-bottom-color: var(--gold-line); box-shadow: 0 10px 30px rgba(5, 16, 28, 0.25); } .theme-coastal .nav-links a:not(.btn) { position: relative; padding: 6px 0; } .theme-coastal .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right 0.35s ease; } .theme-coastal .nav-links a:not(.btn):hover::after { right: 0; } /* ---------- buttons: hairline gold, colour sweep ---------- */ .theme-coastal .btn { font-weight: 600; letter-spacing: 0.2em; font-size: 0.68rem; padding: 17px 34px; border: 1px solid transparent; transition: background-size 0.45s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .theme-coastal .btn-sm { padding: 12px 22px; font-size: 0.64rem; } .theme-coastal .btn-primary, .theme-coastal .btn-primary:hover { background-color: var(--accent); background-image: linear-gradient(var(--sweep, var(--primary-2)), var(--sweep, var(--primary-2))); background-repeat: no-repeat; background-position: left center; } .theme-coastal .btn-primary { border-color: var(--accent); background-size: 0% 100%; } .theme-coastal .btn-primary:hover { background-size: 100% 100%; color: #fff; border-color: var(--primary-2); } .theme-coastal .hero .btn-primary, .theme-coastal .cta-banner .btn-primary, .theme-coastal .topbar .btn-primary { --sweep: #fff; } .theme-coastal .hero .btn-primary:hover, .theme-coastal .cta-banner .btn-primary:hover, .theme-coastal .topbar .btn-primary:hover { color: var(--primary-2); border-color: #fff; } .theme-coastal .btn-outline, .theme-coastal .btn-outline:hover { background-color: transparent; background-image: linear-gradient(var(--sweep, var(--primary-2)), var(--sweep, var(--primary-2))); background-repeat: no-repeat; background-position: left center; } .theme-coastal .btn-outline { background-size: 0% 100%; } .theme-coastal .btn-outline:hover { background-size: 100% 100%; color: #fff; } .theme-coastal .hero .btn-outline { --sweep: #fff; } .theme-coastal .hero .btn-outline:hover { color: var(--primary-2); border-color: #fff; } /* ---------- sections: room to breathe, ornamented headings ---------- */ .theme-coastal section { padding: 124px 24px; } /* hero spacing: the floating homepage header (84px) must never sit on the content, however short the window is */ .theme-coastal section.hero:not(.hero-sub) { padding-top: calc(var(--topbar-h) + 56px); padding-bottom: 96px; } .theme-coastal section.hero-sub { padding-top: 76px; } html.theme-coastal.hdr-stack section.hero:not(.hero-sub) { padding-top: 64px; } @media (max-width: 1000px) { html.theme-coastal section.hero:not(.hero-sub) { padding-top: 64px; } } @media (max-width: 860px) { html.theme-coastal section.hero:not(.hero-sub) { padding-bottom: 70px; } html.theme-coastal section.hero-sub { padding-top: 56px; } } .theme-coastal .section-head { margin-bottom: 64px; } .theme-coastal .section-head .kicker { font-size: 0.66rem; letter-spacing: 0.38em; } .theme-coastal .section-head h2 { position: relative; padding-bottom: 46px; margin-top: 14px; } .theme-coastal .section-head h2::before { content: ""; position: absolute; left: 50%; bottom: 14px; width: 8px; height: 8px; background: var(--accent); transform: translateX(-50%) rotate(45deg); } .theme-coastal .section-head h2::after { content: ""; position: absolute; left: 50%; bottom: 17px; width: 132px; height: 1px; margin: 0; transform: translateX(-50%); background: linear-gradient(90deg, var(--accent) 0 50px, transparent 50px 82px, var(--accent) 82px 132px); } .theme-coastal .section-head p { font-size: 1.02rem; max-width: 640px; margin-left: auto; margin-right: auto; } /* ---------- cards: framed, quiet, lifted on hover ---------- */ .theme-coastal .feature-card { position: relative; padding: 48px 30px 44px; transition: transform 0.45s ease, box-shadow 0.45s ease; } .theme-coastal .feature-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold-line); pointer-events: none; opacity: 0.7; transition: opacity 0.45s ease, inset 0.45s ease; } .theme-coastal .feature-card:hover { transform: translateY(-6px); } .theme-coastal .feature-card:hover::before { opacity: 1; inset: 6px; } .theme-coastal .feature-card .icon { box-sizing: border-box; width: 58px; height: 58px; padding: 15px; border: 1px solid var(--accent); border-radius: 50%; margin: 0 auto 24px; } .theme-coastal .feature-card h3 { margin-bottom: 12px; } .theme-coastal .feature-card p { font-size: 0.92rem; } /* ---------- about: framed portraits ---------- */ .theme-coastal .about-wrap { grid-template-columns: 330px 1fr; padding: 68px; } .theme-coastal .avatar-cluster { gap: 30px; } .theme-coastal .avatar, .theme-coastal .avatar-secondary { width: 136px; height: 176px; outline: 1px solid var(--accent); outline-offset: 9px; } .theme-coastal .about-copy h2 { margin-bottom: 4px; } .theme-coastal .about-copy p { line-height: 1.95; } /* ---------- call-to-action band: the site's own scene behind the words ---------- */ .theme-coastal section:has(> .cta-banner) { background-image: linear-gradient(rgba(9, 24, 38, 0.88), rgba(9, 24, 38, 0.93)), url(hero-1280.webp); background-size: cover; background-position: center 78%; } .theme-coastal .cta-banner h2 { font-weight: 300; font-size: clamp(2rem, 4vw, 3.1rem); color: #fff; } .theme-coastal .cta-banner p { font-size: 1.04rem; } /* ---------- forms ---------- */ .theme-coastal .contact-wrap { padding: 64px; } .theme-coastal input, .theme-coastal select, .theme-coastal textarea { font-family: var(--coast-sans); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .theme-coastal input:focus, .theme-coastal select:focus, .theme-coastal textarea:focus { box-shadow: 0 1px 0 0 var(--accent-2); outline: none; } /* ---------- footer ---------- */ .theme-coastal footer { position: relative; padding: 76px 24px 48px; border-top: 1px solid var(--gold-line); } .theme-coastal footer::before { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; background: var(--accent); transform: translateX(-50%) rotate(45deg); } .theme-coastal footer .container div:first-child strong { display: block; font-family: var(--coast-serif); font-size: 1.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: none; margin-bottom: 8px; } /* ---------- blog + media ---------- */ .theme-coastal .blog-card { transition: transform 0.45s ease, box-shadow 0.45s ease; } .theme-coastal .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .theme-coastal .blog-card h3 { font-size: 1.55rem; } .theme-coastal .article-content h2 { font-size: 1.85rem; } /* ---------- scroll reveals (coastal.js adds .reveal to below-the-fold blocks, then .in) ---------- */ .theme-coastal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.95s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1); } .theme-coastal .reveal.in { opacity: 1; transform: none; } @media (max-width: 860px) { .theme-coastal body { font-size: 15px; } .theme-coastal section { padding: 78px 20px; } .theme-coastal .section-head { margin-bottom: 44px; } .theme-coastal .about-wrap { grid-template-columns: 1fr; padding: 36px 24px; } .theme-coastal .contact-wrap { padding: 34px 22px; } .theme-coastal .avatar, .theme-coastal .avatar-secondary { width: 120px; height: 156px; } .theme-coastal .hero:not(.hero-sub)::after { display: none; } } @media (prefers-reduced-motion: reduce) { html.theme-coastal { scroll-behavior: auto; } .theme-coastal .hero:not(.hero-sub)::before, .theme-coastal .hero:not(.hero-sub)::after, .theme-coastal .hero:not(.hero-sub) .eyebrow, .theme-coastal .hero:not(.hero-sub) h1, .theme-coastal .hero:not(.hero-sub) p.lead, .theme-coastal .hero:not(.hero-sub) .hero-actions, .theme-coastal .hero:not(.hero-sub) .hero-phone { animation: none; } .theme-coastal .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Safeguards for sites whose base stylesheet ships a dark mode or other variable names (EastLake): the coastal look is always light, and the old --lake/--lake-2 names follow the palette. ========================================================================== */ html.theme-coastal[data-coast] { --ink: #1b2733; --muted: #66737f; --card: #ffffff; --radius: 0px; --radius-sm: 0px; --lake: var(--primary); --lake-2: var(--primary-2); --success: #2f7a4f; --success-bg: #e7f3ea; --danger: #b1463f; --danger-bg: #fbeae8; --shadow: 0 18px 50px rgba(11, 31, 49, 0.14); --shadow-sm: none; color-scheme: light; } /* ========================================================================== Collapsed menu: when a header has a long list of links (EastLake has 15) coastal.js adds html.nav-menu, shows brand + call-to-action + MENU, and opens the links as a full-screen panel. ========================================================================== */ .theme-coastal .nav-tools { display: none; } html.theme-coastal.nav-menu .topbar { flex-wrap: nowrap; } html.theme-coastal.nav-menu .topbar > .nav-links { display: none; } html.theme-coastal.nav-menu .nav-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; } .theme-coastal .nav-toggle { display: inline-flex; align-items: center; gap: 12px; font: 600 0.66rem/1 var(--coast-sans); letter-spacing: 0.22em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); padding: 14px 18px 14px 16px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease; } .theme-coastal .nav-toggle:hover, .theme-coastal .nav-toggle:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; } .theme-coastal .nav-toggle .bars { position: relative; display: block; width: 18px; height: 1px; background: currentColor; } .theme-coastal .nav-toggle .bars::before, .theme-coastal .nav-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; } .theme-coastal .nav-toggle .bars::before { top: -5px; } .theme-coastal .nav-toggle .bars::after { top: 5px; } .theme-coastal .nav-close { display: none; } html.theme-coastal.nav-open { overflow: hidden; } html.theme-coastal.nav-open .topbar, html.theme-coastal[data-page="home"].is-scrolled.nav-open .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; } html.theme-coastal.nav-menu.nav-open .topbar > .nav-links { display: grid; position: fixed; inset: 0; z-index: 90; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 2px 56px; padding: 110px max(24px, 9vw) 60px; overflow-y: auto; background-image: linear-gradient(rgba(9, 24, 38, 0.955), rgba(9, 24, 38, 0.985)), url(hero-1280.webp); background-size: cover; background-position: center 70%; animation: coast-fade 0.4s ease both; } .theme-coastal .nav-open .nav-links a:not(.btn) { font-family: var(--coast-serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; letter-spacing: 0.02em; text-transform: none; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #fff; transition: color 0.3s ease, padding-left 0.3s ease; } .theme-coastal .nav-open .nav-links a:not(.btn):hover { color: var(--accent); padding-left: 10px; } .theme-coastal .nav-open .nav-links a:not(.btn)::after { display: none; } .theme-coastal .nav-open .nav-links .btn { grid-column: 1 / -1; justify-self: start; margin-top: 30px; } html.theme-coastal.nav-open .nav-close { display: block; position: fixed; top: 20px; right: 28px; z-index: 95; width: 46px; height: 46px; font: 300 2rem/1 var(--coast-serif); color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; } html.theme-coastal.nav-open .nav-close:hover, html.theme-coastal.nav-open .nav-close:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; } @keyframes coast-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 640px) { html.theme-coastal.nav-menu.nav-open .topbar > .nav-links { grid-template-columns: 1fr; padding-top: 96px; } html.theme-coastal.nav-menu .nav-tools .nav-cta { display: none; } } @media (prefers-reduced-motion: reduce) { html.theme-coastal.nav-menu.nav-open .topbar > .nav-links { animation: none; } } /* compliance strip: Montserrat is wider than the old system font, so it gets a smaller size and more room to stay on one row */ .theme-coastal .compliance-bar { font-size: 0.84rem; padding: 8px 24px; letter-spacing: 0; } .theme-coastal .compliance-bar-inner { max-width: 1320px; } .theme-coastal .compliance-logo { height: 38px; } /* links inside dark hero bands stay legible */ .theme-coastal .hero a:not(.btn):not(.hero-phone) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .theme-coastal .breadcrumb { font-family: var(--coast-sans); font-size: 0.78rem; letter-spacing: 0.04em; } /* keep the lead paragraph and headline readable over bright building walls */ .theme-coastal .hero p.lead, .theme-coastal .hero .eyebrow { text-shadow: 0 1px 14px rgba(5, 16, 28, 0.75), 0 0 2px rgba(5, 16, 28, 0.35); } .theme-coastal .hero h1 { text-shadow: 0 2px 34px rgba(5, 16, 28, 0.55), 0 1px 3px rgba(5, 16, 28, 0.3); } /* sub-page heroes: left-aligned lead text (the home hero's centred lead rule must not indent it) and an eyebrow that stays readable on the art */ .theme-coastal .hero-sub p.lead { margin: 0 0 14px; max-width: 720px; } .theme-coastal .hero-sub .eyebrow { color: color-mix(in srgb, var(--accent) 52%, #ffffff); text-shadow: 0 1px 12px rgba(5, 16, 28, 0.7); } .theme-coastal .hero-sub h1 { text-shadow: 0 2px 26px rgba(5, 16, 28, 0.6); } @media print { .theme-coastal .reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================================== Speed + accessibility pass ========================================================================== */ /* phones and tablets get the smaller pre-rendered images, cropped toward the landmark (--hero-x is set per site) and without the slow drift */ @media (max-width: 860px) { .theme-coastal .hero:not(.hero-sub)::before { background-image: linear-gradient(180deg, rgba(5, 16, 28, 0.55) 0%, rgba(5, 16, 28, 0.12) 42%, rgba(5, 16, 28, 0.62) 100%), url(hero-1280.webp); background-position: center, var(--hero-x, 50%) bottom; animation: none; inset: 0; } .theme-coastal .hero-sub { background-position: center, var(--hero-x, 50%) 72%; } } /* the Fair Housing / copyright lines in the footer were dark-on-dark; keep every footer line readable */ .theme-coastal footer p, .theme-coastal footer .fh-note, .theme-coastal footer .copyright { color: rgba(255, 255, 255, 0.74); } .theme-coastal footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; } .theme-coastal footer a:hover { color: var(--accent); } /* keyboard users: visible focus everywhere, and a skip link */ .theme-coastal a:focus-visible, .theme-coastal button:focus-visible, .theme-coastal input:focus-visible, .theme-coastal select:focus-visible, .theme-coastal textarea:focus-visible, .theme-coastal summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-coastal .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: var(--primary-2); font: 600 0.72rem/1 var(--coast-sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 20px; text-decoration: none; transition: top 0.2s ease; } .theme-coastal .skip-link:focus { top: 12px; } .theme-coastal main { display: block; } .theme-coastal main:focus { outline: none; } /* long-nav sites: keep the header the same height before and after scripts run (the MENU button is written into the page, so nothing jumps) */ html.theme-coastal.nav-menu .topbar { min-height: var(--topbar-h); } /* whatever markup a site's footer uses, its text is light on the dark footer */ .theme-coastal footer, .theme-coastal footer div, .theme-coastal footer strong, .theme-coastal footer span { color: rgba(255, 255, 255, 0.86); } .theme-coastal footer strong { color: #fff; } /* ========================================================================== Guide / FAQ pages, the homepage "Explore" cards and the footer link row ========================================================================== */ .theme-coastal .faq-list { margin: 30px 0 10px; border-top: 1px solid var(--border); } .theme-coastal .faq-item { border-bottom: 1px solid var(--border); } .theme-coastal .faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 26px 56px 26px 4px; font-family: var(--coast-serif); font-size: 1.42rem; font-weight: 600; line-height: 1.3; color: var(--primary-2); transition: color 0.3s ease; } .theme-coastal .faq-item summary::-webkit-details-marker { display: none; } .theme-coastal .faq-item summary::before, .theme-coastal .faq-item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1px; background: var(--accent-2); transition: transform 0.35s ease; } .theme-coastal .faq-item summary::after { transform: rotate(90deg); } .theme-coastal .faq-item[open] summary::after { transform: rotate(0deg); } .theme-coastal .faq-item summary:hover { color: var(--accent-2); } .theme-coastal .faq-a { padding: 0 4px 26px; max-width: 720px; } .theme-coastal .faq-a p { margin: 0 0 12px; color: var(--ink); } .theme-coastal .article-content .lede { font-size: 1.14rem; line-height: 1.85; color: var(--primary-2); } .theme-coastal .article-content ul, .theme-coastal .article-content ol { margin: 0 0 18px 1.2em; line-height: 1.9; } .theme-coastal .article-content li { margin-bottom: 6px; } .theme-coastal .article-content .note { border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; margin: 26px 0; color: var(--muted); font-style: italic; } .theme-coastal .explore-card { display: block; text-decoration: none; color: inherit; } .theme-coastal .explore-card h3 { margin-bottom: 12px; } .theme-coastal .explore-more { display: inline-block; margin-top: 18px; font: 600 0.64rem/1 var(--coast-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-2); border-bottom: 1px solid var(--gold-line); padding-bottom: 6px; transition: color 0.3s ease, border-color 0.3s ease; } .theme-coastal .explore-card:hover .explore-more { color: var(--primary-2); border-color: var(--primary-2); } .theme-coastal .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 10px 0 6px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .theme-coastal .footer-links a { font: 600 0.66rem/1.4 var(--coast-sans); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; } /* the banner under an article/guide header: a slim caption strip instead of a tall gradient block */ .theme-coastal .hero-sub + .scenic-banner { min-height: 0; height: auto; padding: 16px 24px; display: flex; align-items: center; justify-content: center; } .theme-coastal .hero-sub + .scenic-banner .scenic-icon { display: none; } .theme-coastal .hero-sub + .scenic-banner .scenic-caption { position: static; margin: 0; } /* three-up card row (some sites' base stylesheets only define the four-up grid) */ .theme-coastal .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; } @media (max-width: 900px) { .theme-coastal .grid-3 { grid-template-columns: 1fr; } } /* long brand names (e.g. "SAN CLEMENTE REAL ESTATE NEWS") must fit on one line in the fallback font AND the web font at phone width, otherwise the header changes height when the font swaps and the whole page jumps */ @media (max-width: 560px) { .theme-coastal .brand { letter-spacing: 0.1em; gap: 8px; } .theme-coastal .brand-text { font-size: 0.78rem; letter-spacing: 0.1em; } .theme-coastal .brand .logo { width: 28px; height: 28px; } } /* list numerals in accent colour were too light on white (contrast 2.9:1) */ .theme-coastal .list-card .num, .theme-coastal .num { color: color-mix(in srgb, var(--accent-2) 60%, #000); } html.theme-coastal { --hero-x: 52%; }