/* ============================================================ Public Haus Living — shared stylesheet Brand color: change --brand / --brand-deep in :root Dark is the DEFAULT theme (set data-theme="dark" on ) ============================================================ */ :root { --ink: #1a1c1a; --ink-soft: #5c635c; --paper: #f8f7f3; /* warm off-white */ --paper-2: #efeee8; --card: #ffffff; --line: #e5e3da; --brand: #2b2d2b; /* charcoal accent */ --brand-deep: #1a1c1a; /* near-black for buttons */ --radius: 14px; --shadow: 0 18px 50px -22px rgba(26,28,26,.35); --shadow-sm: 0 6px 22px -12px rgba(26,28,26,.4); --maxw: 1220px; --display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- Dark theme ---------- */ [data-theme="dark"] { --ink: #ececea; --ink-soft: #a6aca5; --paper: #121412; --paper-2: #1b1e1b; --card: #1a1d1a; --line: #2b2f2b; --brand: #d8dbd6; --brand-deep: #ececea; --shadow: 0 18px 50px -22px rgba(0,0,0,.75); --shadow-sm: 0 6px 22px -12px rgba(0,0,0,.7); } [data-theme="dark"] header { background: rgba(18,20,18,.82); } [data-theme="dark"] .btn-primary { color: #141614; } [data-theme="dark"] .btn-primary:hover { background: #fff; color: #141614; } [data-theme="dark"] .band { background: #0d0f0d; } [data-theme="dark"] .listing .tag { color: #141614; } [data-theme="dark"] .quote .av { color: #141614; } [data-theme="dark"] .contact-info .ic { background: var(--paper-2); border-color: var(--line); } [data-theme="dark"] footer { background: #0c0e0c; } html { color-scheme: dark; } [data-theme="light"] html, html[data-theme="light"] { color-scheme: light; } /* Theme toggle */ .theme-toggle { background: transparent; border: 1px solid var(--line); border-radius: 999px; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: border-color .2s, color .2s, background .2s; flex: none; } .theme-toggle:hover { border-color: var(--ink); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ic-sun { display: none; } [data-theme="dark"] .theme-toggle .ic-sun { display: block; } [data-theme="dark"] .theme-toggle .ic-moon { display: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; margin: 0; } p { margin: 0 0 1rem; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 18px; } .bg-card { background: var(--card); } .bg-alt { background: var(--paper-2); } .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--sans); font-weight: 500; font-size: 14.5px; letter-spacing: .01em; padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s, border-color .2s; } .btn-primary { background: var(--brand-deep); color: #fff; } .btn-primary:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .btn-outline-light:hover { background: #fff; color: #141614; } .btn-light { background: #fff; color: #141614; } .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* ---------- Logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 12px; } .logo-mark { width: 40px; height: 34px; color: var(--brand); flex: none; } .logo-word { display: flex; flex-direction: column; line-height: 1; } .logo-word b { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; } .logo-word span { font-family: var(--display); font-weight: 400; font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; margin-left: 2px; } /* ---------- Header ---------- */ header { position: sticky; top: 0; z-index: 50; background: rgba(248,247,243,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 78px; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color .15s; white-space: nowrap; } .nav-links a:hover { color: var(--ink); } .nav-links a[aria-current="page"] { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-cta .btn { white-space: nowrap; } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; } /* ---------- Home hero (full-bleed, photo-forward) ---------- */ .hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,16,14,.42) 0%, rgba(14,16,14,.12) 34%, rgba(14,16,14,.64) 76%, rgba(14,16,14,.92) 100%), linear-gradient(90deg, rgba(14,16,14,.68) 0%, rgba(14,16,14,.28) 46%, rgba(14,16,14,0) 82%); } .hero-inner .eyebrow, .hero h1, .hero p.lead { text-shadow: 0 1px 22px rgba(0,0,0,.38); } .hero-stats .num, .hero-stats .lbl { text-shadow: 0 1px 16px rgba(0,0,0,.4); } .hero-inner { position: relative; z-index: 2; color: #fff; padding: 0 28px 74px; width: 100%; } .hero h1 { font-size: clamp(38px, 6vw, 76px); font-weight: 300; letter-spacing: -0.02em; max-width: 17ch; } .hero p.lead { font-size: clamp(16px, 1.6vw, 20px); font-weight: 400; max-width: 48ch; margin: 22px 0 30px; color: rgba(255,255,255,.9); } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero-eyebrow { color: rgba(255,255,255,.9); letter-spacing: .24em; } .hero-stats { display: flex; gap: 0; margin-top: 54px; border-top: 1px solid rgba(255,255,255,.28); padding-top: 26px; max-width: 640px; } .hero-stats > div { padding-right: 46px; } .hero-stats .num { font-family: var(--display); font-weight: 300; font-size: 32px; } .hero-stats .lbl { font-size: 13px; color: rgba(255,255,255,.78); letter-spacing: .02em; } /* ---------- Interior page hero (shorter, centered) ---------- */ .page-hero { position: relative; overflow: hidden; padding: 118px 0 78px; text-align: center; color: #fff; } .page-hero .page-hero-bg { position: absolute; inset: 0; z-index: 0; } .page-hero .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero .page-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,16,14,.62), rgba(14,16,14,.78)); } .page-hero .wrap { position: relative; z-index: 2; } .page-hero .eyebrow { color: rgba(255,255,255,.85); } .page-hero h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 300; max-width: 20ch; margin: 0 auto; text-shadow: 0 1px 22px rgba(0,0,0,.4); } .page-hero p { font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,.9); max-width: 56ch; margin: 20px auto 0; text-shadow: 0 1px 18px rgba(0,0,0,.4); } /* ---------- Sections ---------- */ section { padding: 96px 0; } .section-head { max-width: 640px; margin-bottom: 52px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 300; } .section-head p { font-size: 18px; color: var(--ink-soft); margin-top: 16px; } /* Feature trio (why us) */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .trio .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; } .trio .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--paper-2); color: var(--brand-deep); display: grid; place-items: center; margin-bottom: 18px; } [data-theme="dark"] .trio .ic { background: var(--paper); } .trio .ic svg { width: 22px; height: 22px; } .trio h3 { font-family: var(--display); font-weight: 500; font-size: 20px; margin-bottom: 8px; } .trio h3 .kicker { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); font-family: var(--sans); font-weight: 600; margin-bottom: 8px; } .trio p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } .card-benefits { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; } .card-benefits li { font-size: 14px; color: var(--ink-soft); position: relative; padding-left: 20px; line-height: 1.55; } .card-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-deep); font-weight: 700; } [data-theme="dark"] .card-benefits li::before { color: #7ad19b; } .trio .card.featured { border-color: var(--brand); box-shadow: var(--shadow); position: relative; } .rec-badge { position: absolute; top: -12px; left: 34px; background: #7ad19b; color: #0f2318; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5); } .trio.duo { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; } .trio.duo .card:last-child { grid-column: auto; } @media (max-width: 680px) { .trio.duo { grid-template-columns: 1fr; } } .trio.quad { grid-template-columns: repeat(3, 1fr); } @media (max-width: 960px) { .trio.quad { grid-template-columns: repeat(2, 1fr); } .trio.quad .card:last-child { grid-column: auto; } } @media (max-width: 680px) { .trio.quad { grid-template-columns: 1fr; } } /* Two paths */ .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .path-card { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; padding: 40px; } .path-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,20,.05) 30%, rgba(20,22,20,.82) 100%); z-index: 1; } .path-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; } .path-card:hover img { transform: scale(1.05); } .path-card > * { position: relative; z-index: 2; } .path-card .eyebrow { color: rgba(255,255,255,.85); } .path-card h3 { font-size: 30px; font-weight: 300; margin-bottom: 10px; } .path-card p { color: rgba(255,255,255,.9); font-size: 15.5px; max-width: 40ch; } .path-card .btn { margin-top: 18px; align-self: flex-start; } /* Listings */ .listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .listing { background: transparent; border-radius: var(--radius); overflow: hidden; } .listing .photo { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); position: relative; border-radius: var(--radius); } .listing .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .listing:hover .photo img { transform: scale(1.04); } .listing .tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.95); color: var(--brand-deep); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; } .listing .body { padding: 18px 4px 0; } .listing .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .listing h3 { font-size: 19px; font-weight: 500; } .listing .amt { font-family: var(--display); font-weight: 400; font-size: 15px; white-space: nowrap; color: var(--ink-soft); } .listing .loc { font-size: 14px; color: var(--ink-soft); margin: 3px 0 12px; } .listing .meta { display: flex; gap: 18px; font-size: 13.5px; color: var(--ink-soft); } .listing .meta b { color: var(--ink); font-weight: 600; } .listing .cta-row { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; } .listing:hover .cta-row { color: var(--brand-deep); } /* Owners / feature list */ .owners { background: var(--card); } .owners-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .owners-grid.rev { grid-template-columns: 1fr 1.05fr; } .owners-visual { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; } .owners-visual img { width: 100%; height: 100%; object-fit: cover; } .feature-list { list-style: none; padding: 0; margin: 30px 0 34px; display: grid; gap: 22px; } .feature-list li { display: flex; gap: 16px; align-items: flex-start; } .feature-list .ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--paper-2); color: var(--brand-deep); display: grid; place-items: center; } [data-theme="dark"] .feature-list .ic { background: var(--paper); } .feature-list .ic svg { width: 20px; height: 20px; } .feature-list h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin: 0 0 3px; } .feature-list p { margin: 0; font-size: 14.5px; color: var(--ink-soft); } /* Stat band */ .band { background: var(--brand-deep); color: #fff; } .band .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; padding-top: 60px; padding-bottom: 60px; } .band .num { font-family: var(--display); font-weight: 300; font-size: clamp(34px, 4vw, 48px); white-space: nowrap; } .band .lbl { font-size: 14px; color: rgba(255,255,255,.82); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .step { padding: 0 30px; border-left: 1px solid var(--line); } .step:first-child { padding-left: 0; border-left: 0; } .step .n { font-family: var(--display); font-weight: 300; font-size: 15px; color: var(--brand); letter-spacing: .1em; margin-bottom: 16px; } .step h4 { font-family: var(--display); font-weight: 500; font-size: 20px; margin-bottom: 8px; } .step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } /* Testimonials */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .quote { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; } .quote .stars { color: var(--brand); letter-spacing: 3px; margin-bottom: 16px; font-size: 14px; } .quote p { font-size: 17px; color: var(--ink); font-family: var(--display); font-weight: 300; line-height: 1.5; } .quote .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; } .quote .av { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-deep); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; } .quote .who b { font-size: 14.5px; display: block; } .quote .who span { font-size: 13px; color: var(--ink-soft); } /* Management teaser (home bottom) */ .teaser { position: relative; overflow: hidden; } .teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .teaser-visual { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/11; } .teaser-visual img { width: 100%; height: 100%; object-fit: cover; } .teaser h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 300; } .teaser p { color: var(--ink-soft); font-size: 17px; margin-top: 16px; } .teaser .mini { display: flex; gap: 28px; margin: 24px 0 30px; } .teaser .mini .num { font-family: var(--display); font-weight: 300; font-size: 26px; } .teaser .mini .lbl { font-size: 13px; color: var(--ink-soft); } /* Contact */ .contact { background: var(--paper-2); } .contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; } .contact h2 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 300; } .contact .lead { color: var(--ink-soft); font-size: 18px; margin-top: 16px; } .contact-info { margin-top: 34px; display: grid; gap: 16px; } .contact-info a, .contact-info div { display: flex; gap: 13px; align-items: center; font-size: 15.5px; color: var(--ink); } .contact-info .ic { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; color: var(--brand-deep); } .contact-info .ic svg { width: 18px; height: 18px; } form { background: var(--card); border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; letter-spacing: .01em; } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--paper); transition: border .15s, box-shadow .15s, background .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(120,120,120,.18); background: var(--card); } /* ===== Keyboard focus states (visible only during keyboard navigation) ===== */ a:focus-visible, button:focus-visible, .btn:focus-visible, .listing:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* Always-dark sections keep a light ring for contrast in both themes */ .hero a:focus-visible, .hero button:focus-visible, .page-hero a:focus-visible, .page-hero button:focus-visible, footer a:focus-visible { outline-color: #fff; } .field textarea { resize: vertical; min-height: 118px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } form .btn-primary { width: 100%; justify-content: center; margin-top: 6px; } .form-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 14px 0 0; } .field-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: -1px 0 8px; } .form-success { display: none; text-align: center; padding: 24px 0; } .form-success.show { display: block; } .form-success .check { width: 58px; height: 58px; border-radius: 50%; background: var(--paper-2); color: var(--brand-deep); font-size: 28px; display: grid; place-items: center; margin: 0 auto 16px; } /* Footer */ footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 66px 0 32px; } [data-theme="light"] footer { background: #1a1c1a; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 46px; } footer .logo-mark { color: #fff; } footer .logo-word b, footer .logo-word span { color: #fff; } footer .logo-word span { color: rgba(255,255,255,.6); } footer .tagline { font-size: 14.5px; max-width: 34ch; margin-top: 18px; } footer h5 { color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 0 0 16px; letter-spacing: .06em; text-transform: uppercase; } footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } footer ul a { font-size: 14.5px; color: rgba(255,255,255,.68); transition: color .15s; } footer ul a:hover { color: #fff; } .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; } /* ---------- Highlight callout (e.g. book direct) ---------- */ .callout-pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px; backdrop-filter: blur(4px); } .callout-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #7ad19b; box-shadow: 0 0 0 4px rgba(122,209,155,.25); } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .trust-strip .wrap { padding: 22px 28px; text-align: center; } .trust-strip p { margin: 0; font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; } /* ---------- Text + image split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .split .visual { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; } .split .visual img { width: 100%; height: 100%; object-fit: cover; } .split h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; } .split p { color: var(--ink-soft); font-size: 16.5px; margin-top: 16px; } .split .btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } /* ---------- Listing detail page ---------- */ .detail { padding-top: 40px; } .breadcrumb { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 20px; } .breadcrumb a:hover { color: var(--ink); } .detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; } .detail-head h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 300; } .detail-head .loc { color: var(--ink-soft); font-size: 15.5px; margin-top: 8px; } .spec-row { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14.5px; color: var(--ink-soft); } .spec-row b { color: var(--ink); font-weight: 600; } .gallery { display: grid; gap: 10px; } .gallery a { display: block; overflow: hidden; border-radius: var(--radius); } .gallery img { width: 100%; object-fit: cover; transition: transform .5s ease; } .gallery a:hover img { transform: scale(1.05); } .gallery .g-main img { aspect-ratio: 16/9; } .gallery .g-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .gallery .g-thumbs img { aspect-ratio: 4/3; } .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; margin-top: 56px; } .detail-body h2 { font-size: 24px; font-weight: 500; margin: 0 0 14px; } .detail-body h2:not(:first-child) { margin-top: 44px; } .detail-body p { color: var(--ink-soft); font-size: 16px; } .amenity-grid { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .amenity-grid li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--ink); } .amenity-grid li::before { content: "✓"; flex: none; color: var(--brand-deep); font-weight: 700; } [data-theme="dark"] .amenity-grid li::before { color: #7ad19b; } .inquire-card { position: sticky; top: 100px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .inquire-card .price { font-family: var(--display); font-weight: 300; font-size: 24px; } .inquire-card .price span { font-size: 14px; color: var(--ink-soft); font-family: var(--sans); } .inquire-card .rate-note { font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 20px; } .inquire-card .il { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .inquire-card .il:first-of-type { border-top: 0; } .inquire-card .il b { font-weight: 600; } .inquire-card .btn { width: 100%; justify-content: center; margin-top: 20px; } .inquire-card .assurance { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; } /* ---------- Legal / long-form pages ---------- */ .legal { padding: 56px 0 90px; } .legal .wrap { max-width: 820px; } .legal h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 300; margin-bottom: 8px; } .legal .updated { color: var(--ink-soft); font-size: 14px; margin-bottom: 26px; } .legal .note { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 34px; } .legal h2 { font-family: var(--display); font-weight: 500; font-size: 21px; margin: 38px 0 10px; } .legal h3 { font-family: var(--sans); font-weight: 600; font-size: 16px; margin: 22px 0 8px; color: var(--ink); } .legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; } .legal ul { padding-left: 22px; margin: 0 0 16px; } .legal a { color: var(--ink); text-decoration: underline; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- Footer legal / equal housing ---------- */ .foot-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 8px; padding-top: 34px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; margin-bottom: 34px; } .foot-legal h5 { color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 0 0 12px; letter-spacing: .06em; text-transform: uppercase; } .foot-legal p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0; } .foot-legal .fh-badge { display: flex; align-items: center; gap: 12px; } .foot-legal .fh-badge svg { width: 40px; height: 40px; flex: none; color: rgba(255,255,255,.85); } .foot-legal .fh-badge span { font-size: 13px; color: rgba(255,255,255,.7); } .foot-legal ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .foot-legal ul a { font-size: 12.5px; color: rgba(255,255,255,.6); } .foot-legal ul a:hover { color: #fff; } /* Responsive */ @media (max-width: 960px) { .owners-grid, .owners-grid.rev, .contact-grid, .teaser-grid { grid-template-columns: 1fr; gap: 40px; } .owners-visual { max-width: 480px; } .listing-grid, .quotes, .trio { grid-template-columns: repeat(2, 1fr); } .trio .card:last-child { grid-column: 1 / -1; } .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 0; } .step:nth-child(3) { padding-left: 0; border-left: 0; } .band .wrap { grid-template-columns: repeat(2, 1fr); gap: 34px; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1100px) { .nav-links, .nav-cta .btn { display: none; } .menu-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 78px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px 28px; gap: 20px; } } @media (max-width: 680px) { .paths, .listing-grid, .quotes, .trio, .row2, .foot-grid, .foot-legal, .split { grid-template-columns: 1fr; } .split { gap: 30px; } .trio .card:last-child { grid-column: auto; } .steps { grid-template-columns: 1fr; } .step { padding-left: 0; border-left: 0; } section { padding: 64px 0; } .hero { min-height: 90vh; } .hero-stats { flex-wrap: wrap; gap: 22px; } .hero-stats > div { padding-right: 30px; } form { padding: 26px; } .band .num { font-size: 32px; } .band .wrap { grid-template-columns: 1fr; gap: 30px; } .detail-grid { grid-template-columns: 1fr; gap: 36px; } .inquire-card { position: static; } .page-hero { padding: 92px 0 62px; } }