/* ───────────────────────────────────────────────────────────── Accessibility menu — shared by every page. Two halves: the widget's own chrome, and the adjustment classes it puts on . The adjustments are written to survive a page that was not designed with them in mind, so most carry !important; the site's own rules are specific and would otherwise win. Palette comes from the page's tokens where they exist, with literal fallbacks so this file also works on the legal pages. ───────────────────────────────────────────────────────────── */ :root { --a11y-navy: var(--navy, #050F1E); --a11y-lift: var(--navy-3, #0C1626); --a11y-gold: var(--gold, #D9B063); --a11y-hi: var(--gold-hi, #F2D286); --a11y-cream: var(--cream, #F6F1E9); --a11y-muted: var(--muted, #A8B2BD); --a11y-line: var(--line, rgba(217, 176, 99, .28)); } /* ---------- skip link ---------- */ .a11y-skip { position: fixed; inset-inline-start: 1rem; top: -100px; z-index: 10001; padding: .85rem 1.5rem; background: var(--a11y-gold); color: var(--a11y-navy); font-weight: 700; border-radius: 999px; text-decoration: none; transition: top .2s ease; } .a11y-skip:focus { top: 1rem; } /* ---------- the launcher ---------- */ .a11y-fab { position: fixed; inset-block-end: 1.15rem; inset-inline-end: 1.15rem; z-index: 9998; width: 52px; height: 52px; display: grid; place-items: center; background: var(--a11y-navy); color: var(--a11y-hi); border: 1px solid var(--a11y-line); border-radius: 50%; cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); transition: transform .25s ease, border-color .25s ease, background .25s ease; } .a11y-fab:hover { transform: translateY(-2px); border-color: var(--a11y-gold); } .a11y-fab:focus-visible { outline: 3px solid var(--a11y-hi); outline-offset: 3px; } .a11y-fab svg { width: 26px; height: 26px; } /* ---------- panel ---------- */ .a11y-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(3, 9, 18, .55); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .a11y-overlay.is-open { opacity: 1; pointer-events: auto; } .a11y-panel { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 10000; width: min(400px, 100%); display: flex; flex-direction: column; background: var(--a11y-navy); border-inline-start: 1px solid var(--a11y-line); transform: translateX(100%); transition: transform .3s cubic-bezier(.22, 1, .36, 1); overflow: hidden; } [dir="rtl"] .a11y-panel { transform: translateX(-100%); } .a11y-panel.is-open, [dir="rtl"] .a11y-panel.is-open { transform: none; } .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--a11y-line); } .a11y-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--a11y-cream); } .a11y-close { width: 40px; height: 40px; display: grid; place-items: center; background: transparent; color: var(--a11y-muted); border: 1px solid var(--a11y-line); border-radius: 50%; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .a11y-close:hover { color: var(--a11y-hi); border-color: var(--a11y-gold); } .a11y-close:focus-visible { outline: 3px solid var(--a11y-hi); outline-offset: 2px; } .a11y-body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem 1.35rem 1.35rem; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .a11y-opt { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1rem .6rem .8rem; background: var(--a11y-lift); color: var(--a11y-cream); border: 1px solid var(--a11y-line); border-radius: 14px; font: inherit; font-size: .95rem; font-weight: 600; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; } .a11y-opt svg { width: 24px; height: 24px; color: var(--a11y-gold); } /* An inline with only a viewBox has no intrinsic size and falls back to the replaced-element default, which is far bigger than any of these buttons. Every icon in the widget gets an explicit box. */ .a11y-panel svg, .a11y-fab svg { flex: 0 0 auto; } .a11y-close svg { width: 20px; height: 20px; } .a11y-reset svg { width: 18px; height: 18px; } .a11y-opt small { font-size: .78rem; font-weight: 400; color: var(--a11y-muted); } .a11y-opt:hover { border-color: var(--a11y-gold); } .a11y-opt:focus-visible { outline: 3px solid var(--a11y-hi); outline-offset: 2px; } .a11y-opt[aria-pressed="true"] { border-color: var(--a11y-gold); background: rgba(217, 176, 99, .13); } .a11y-opt[aria-pressed="true"] small { color: var(--a11y-hi); } .a11y-reset { width: 100%; margin-top: .9rem; padding: .95rem 1rem; display: flex; align-items: center; justify-content: center; gap: .6rem; background: transparent; color: var(--a11y-cream); border: 1px solid var(--a11y-line); border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .a11y-reset:hover { border-color: var(--a11y-gold); color: var(--a11y-hi); } .a11y-reset:focus-visible { outline: 3px solid var(--a11y-hi); outline-offset: 2px; } .a11y-foot { padding: 1rem 1.35rem 1.25rem; border-top: 1px solid var(--a11y-line); text-align: center; } .a11y-foot a { color: var(--a11y-gold); font-size: .92rem; font-weight: 600; } .a11y-foot a:focus-visible { outline: 3px solid var(--a11y-hi); outline-offset: 2px; } @media (max-width: 460px) { .a11y-panel { width: 100%; } .a11y-opt { padding: .85rem .5rem .7rem; font-size: .9rem; } } /* ═══════════════ the adjustments themselves ═══════════════ */ /* Text scale rides the root font-size, which is what every rem on the page is measured against. clamp() values that mix rem and vw scale only in their rem half — acceptable, and far safer than rewriting every declaration. */ html.a11y-text-1 { font-size: 112.5%; } html.a11y-text-2 { font-size: 125%; } html.a11y-line-1 * { line-height: 1.9 !important; } html.a11y-line-2 * { line-height: 2.3 !important; } html.a11y-space-1 * { letter-spacing: .06em !important; word-spacing: .12em !important; } html.a11y-space-2 * { letter-spacing: .12em !important; word-spacing: .22em !important; } /* High contrast drops the photographic ground entirely — the textures are the one thing on this page that can push body copy under the ratio, and in this mode they have to go. */ html.a11y-contrast body { background: #000 !important; } html.a11y-contrast .pagebg, html.a11y-contrast .tex, html.a11y-contrast .hero-media::after, html.a11y-contrast .prop-media::after { display: none !important; } html.a11y-contrast section, html.a11y-contrast footer, html.a11y-contrast .legal-main { background: #000 !important; } html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast dt, html.a11y-contrast dd, html.a11y-contrast label, html.a11y-contrast td, html.a11y-contrast th { color: #fff !important; } html.a11y-contrast a { color: #FFE79A !important; } html.a11y-contrast .prop-link, html.a11y-contrast .field input, html.a11y-contrast .field select { background: #000 !important; border-color: #fff !important; color: #fff !important; } html.a11y-contrast .btn-gold { background: #FFE79A !important; color: #000 !important; border-color: #FFE79A !important; } html.a11y-contrast .prop-flag { background: #FFE79A !important; color: #000 !important; } html.a11y-contrast .hero-media img { filter: brightness(.35) contrast(1.1) !important; } html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; } html.a11y-font, html.a11y-font * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; } /* Nothing here may leave content invisible: the page's scroll reveals start at opacity 0 and are animated in, so switching animation off has to also settle them. */ html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-noanim [data-reveal], html.a11y-noanim [data-hero-el] { opacity: 1 !important; transform: none !important; } html.a11y-noanim .role-word { display: none; } html.a11y-noanim .role-word.is-on { display: block; opacity: 1 !important; transform: none !important; } html.a11y-noanim .props-rail { scroll-snap-type: none !important; } /* Decorative imagery goes; the property photographs carry meaning for a listing, so they are replaced by their own frame rather than removed, keeping the card's shape intact. */ html.a11y-noimg .pagebg, html.a11y-noimg .tex, html.a11y-noimg .hero-media, html.a11y-noimg .hero-logo, html.a11y-noimg .footer-logo { display: none !important; } html.a11y-noimg .prop-media img { visibility: hidden !important; } html.a11y-noimg .prop-media { background: var(--a11y-lift) !important; } html.a11y-noimg .hero { min-height: 0 !important; padding-block: 4rem 3rem !important; } html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l26 15-11 3-4 12z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor select, html.a11y-cursor input { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4c-2 0-3 1.5-3 3v18l-4-4c-1.5-1.5-4-1-5 .5s-.5 3.5.5 4.5l10 12c1 1.2 2.4 2 4 2h11c3 0 5-2 5-5V21c0-2-1.5-3-3-3s-3 1-3 3v-2c0-2-1.5-3-3-3s-3 1-3 3v-2c0-2-1.5-3-3-3s-3 1-3 3V7c0-1.5-1-3-3-3z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4, pointer !important; }