/* Campaign website — Classic design (generic template) */ /* ============================================================ THEMES Every visual is driven by these variables. A theme is just a [data-theme="..."] block overriding them. The live switcher (partials/theme-switcher.html) flips data-theme on and can override individual colors via inline style on . ============================================================ */ /* The campaign palette switcher (static/js/palette.js) sets the canonical --c-* variables on . We map the design's own variables onto them, with the original Classic Navy values as fallbacks if JS is unavailable. */ :root { --brand: var(--c-primary, #0A2540); /* header text, hero/footer base */ --brand-deep: var(--c-primary-deep, #06182B); /* gradient bottom */ --hero-glow: var(--c-primary-lift, #15406B); /* hero radial highlight */ --link: var(--c-primary-lift, #15406B); /* links / primary mid */ --accent: var(--c-accent, #F2B544); /* buttons / highlights */ --ink: var(--c-ink, #16202E); /* body text */ --muted: var(--c-muted, #5A6B7D); /* secondary text */ --paper: var(--c-bg, #FFFFFF); /* page background */ --mist: var(--c-bg-alt, #F2F5F9); /* section background */ --line: var(--c-line, #E0E7EF); /* borders */ --font-head: "Lora", Georgia, serif; --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --radius: 14px; /* cards / images */ --btn-radius: 999px; /* button corners */ } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; color: var(--brand); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; } /* Buttons */ .btn { display: inline-block; padding: 13px 26px; border-radius: var(--btn-radius); font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; border: 2px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--accent); color: var(--brand-deep); } .btn-primary:hover { box-shadow: 0 12px 24px -10px var(--accent); } .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); } .btn-ghost:hover { background: rgba(255,255,255,.12); } .btn-light { background: #fff; color: var(--brand); } .btn-light:hover { box-shadow: 0 18px 40px -24px rgba(0,0,0,.45); } /* Header / nav */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; } .brand { display: flex; flex-direction: column; line-height: 1.05; } .brand:hover { text-decoration: none; } .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--brand); } .brand-office { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .site-nav { display: flex; align-items: center; gap: 26px; } .site-nav a { color: var(--brand); font-weight: 600; } .site-nav a.active { color: var(--link); } .nav-cta { background: var(--brand); color: #fff !important; padding: 9px 18px; border-radius: var(--btn-radius); } .nav-cta:hover { background: var(--link); text-decoration: none; } .nav-toggle, .nav-burger { display: none; } /* Hero */ .hero { background: radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--hero-glow) 70%, transparent) 0%, transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--brand) 86%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 90%, transparent) 100%), url("/img/townhomes.jpg"); background-size: auto, auto, cover; background-position: center, center, center 55%; background-repeat: no-repeat; color: #fff; padding: 72px 0 84px; } .hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; color: var(--accent); margin: 0 0 12px; } .hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0 0 14px; } /* Logo lockup stands in for the headline on the dark hero. */ .hero-logo { margin: 0 0 18px; } /* Campaign logo: a full-color image (two variants — light-text for dark backgrounds, dark-text for light). It keeps its own colors, but is tinted toward the active palette via a hue-rotate filter the switcher sets in --logo-filter (none for the logo's native Classic Navy palette). */ .campaign-logo { display: block; width: 100%; height: auto; filter: var(--logo-filter, none); transition: filter .25s ease; } .campaign-logo--hero { max-width: 360px; } .hero-tagline { font-size: 1.3rem; color: #d6e2f1; max-width: 30ch; margin: 0 0 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero-photo { display: flex; justify-content: center; } .hero-photo img { border-radius: var(--radius); box-shadow: 0 18px 40px -24px rgba(0,0,0,.55); width: 100%; max-width: 380px; object-fit: cover; } .photo-placeholder { width: 100%; max-width: 360px; aspect-ratio: 4/5; border: 2px dashed rgba(255,255,255,.4); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-align: center; color: rgba(255,255,255,.7); font-weight: 600; background: rgba(255,255,255,.04); } /* Sections */ .section-title { font-size: clamp(1.8rem, 4vw, 2.5rem); text-align: center; margin: 0 0 38px; } .pillars { padding: 76px 0; background: var(--mist); } .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } .pillar { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: 0 10px 30px -22px rgba(0,0,0,.4); } .pillar h3 { margin: 0 0 10px; font-size: 1.3rem; } .pillar p { margin: 0; color: var(--muted); } .pillars-more { text-align: center; margin: 36px 0 0; font-weight: 700; } /* CTA band */ .cta-band { background: var(--link); color: #fff; padding: 56px 0; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .cta-band h2 { color: #fff; margin: 0 0 6px; } .cta-band p { margin: 0; color: rgba(255,255,255,.85); } /* Generic page */ .page-hero { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; padding: 60px 0; } .page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; } .page-subtitle { color: #d6e2f1; font-size: 1.25rem; margin: 12px 0 0; } .prose { max-width: 760px; padding-top: 48px; padding-bottom: 64px; } .prose h2 { margin: 1.8em 0 .5em; font-size: 1.7rem; } .prose h3 { margin: 1.4em 0 .4em; font-size: 1.3rem; } .prose p, .prose li { font-size: 1.1rem; } .prose ul { padding-left: 1.2em; } .prose li { margin: .4em 0; } .bio-photo { float: right; width: 300px; max-width: 42%; margin: 6px 0 18px 28px; border-radius: var(--radius); box-shadow: 0 16px 40px -18px rgba(0,0,0,.5); } @media (max-width: 600px) { .bio-photo { float: none; width: 100%; max-width: 100%; margin: 0 0 18px; } } .prose blockquote { margin: 1.5em 0; padding: 4px 22px; border-left: 4px solid var(--accent); color: var(--brand); font-family: var(--font-head); font-size: 1.25rem; font-style: italic; } .issue { padding: 22px 0; border-bottom: 1px solid var(--line); } .issue:last-child { border-bottom: 0; } /* Footer */ .site-footer { background: var(--brand-deep); color: rgba(255,255,255,.78); padding: 56px 0 40px; } .footer-cta { text-align: center; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 28px; } .footer-cta h2 { color: #fff; margin: 0 0 18px; } .footer-meta { text-align: center; font-size: .92rem; } .footer-meta .brand-name { color: #fff; font-size: 1.15rem; } .footer-meta .brand-name span { color: rgba(255,255,255,.6); font-family: var(--font-body); font-size: .85rem; } .footer-meta .disclaimer { color: rgba(255,255,255,.55); margin: 14px 0; } .footer-meta a { color: var(--accent); } .meta-note { max-width: 640px; margin: 32px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.5); font-style: italic; } /* Responsive */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-photo { order: -1; } .photo-placeholder { max-width: 280px; } .pillar-grid { grid-template-columns: 1fr; } .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; } .nav-burger span { width: 24px; height: 2px; background: var(--brand); display: block; } .site-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 0; } .site-nav a { padding: 12px 22px; width: 100%; } .nav-cta { margin: 8px 22px; text-align: center; } .nav-toggle:checked ~ .site-nav { display: flex; } } /* The preview palette switcher injects its own styles from static/js/palette.js, so no switcher CSS lives here. */