/* ========================================================================== realestate-egy.com - site layer Loaded AFTER assets/css/theme.css. This file adds structure only. It defines no colour, size, radius, shadow or timing value of its own: every declaration below resolves through a var(--...) that theme.css owns. Layout and typographic feel inherited from palmhills-theme (the measured winner): letter-spaced light display capitals, near-square controls, a single accent colour, full-bleed photography. Tap-target discipline inherited from agerli-theme instead: every interactive element is at least var(--target-min) in BOTH axes. ========================================================================== */ /* -------------------------------------------------------------------------- Skip link -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--color-surface-media); color: var(--color-text-on-media); font-size: var(--text-sm); text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- Broker disclosure band. In normal document flow at the very top of , so it is inside the initial viewport on load and then scrolls away. Never sticky, never an overlay, never dismissible: it is a legal statement, not a notification. Opaque background + opaque text by construction. A prior audit measured a disclosure at 1.01:1 because its colour carried alpha, so no alpha is used here and no photograph is ever placed behind it. -------------------------------------------------------------------------- */ .disclosure { display: block; } /* WCAG 2.5.8 exempts a link that sits inline in a sentence, but a target only as tall as its own text is still miserable on a phone, so it is padded up to the minimum target token. */ .disclosure a { display: inline-block; min-height: var(--space-6); padding-inline: var(--space-1); } .disclosure__inner { max-width: var(--container-max); margin-inline: auto; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { background: var(--color-surface-page); border-bottom: var(--border-hairline) solid var(--color-border-default); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--space-16); flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); color: var(--color-text-primary); text-decoration: none; } .brand__mark { flex: none; } .brand__word { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-light); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; white-space: nowrap; } .brand__word b { font-weight: var(--weight-medium); color: var(--color-action-primary); } /* Navigation. No JavaScript is required to open it: the control is a native

disclosure on small screens and the list is always visible from the medium breakpoint up. */ .nav__toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target-min); min-width: var(--target-min); padding-inline: var(--space-4); background: var(--color-action-secondary); color: var(--color-text-primary); border: var(--border-control) solid var(--color-border-strong); border-radius: var(--radius-control); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; cursor: pointer; list-style: none; } .nav__toggle[aria-expanded="true"] { background: var(--color-surface-subtle); } /* Collapsed by default on small screens. A