/* ========================================================================== AEROVISTA - RESET, TYPOGRAPHY, GRID ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The scroll lock fixes , which takes the document scrollbar away with it — the whole page then jumped sideways by the scrollbar's width when the gate opened, and back again on close. scrollbar-gutter is not enough here: a fixed stops propagating its overflow to the viewport, so the gutter declaration goes with it. Making the scroll container in its own right fixes both halves: the gutter is reserved so nothing shifts, and because it is `auto` rather than `scroll` the scrollbar itself disappears while the body is fixed — an open sheet shows reserved space, not a dead scrollbar. A no-op where scrollbars overlay content (phones, macOS). */ overflow-y: auto; scrollbar-gutter: stable; /* The nav is fixed, so an anchor jump that puts a section's top edge at the viewport top hides its eyebrow and heading behind the bar. Offsetting the scroll port by the nav height lands every section head in clear view -- this covers in-page links, deep links with a hash, and scrollIntoView. */ scroll-padding-top: calc(var(--nav-h) + var(--s-sm)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The page ground carries the grain once, on . Light sections are then transparent so they inherit it rather than each painting an opaque slab over the top — one texture layer for the whole document, not one per section. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; /* behind everything, including the hero */ background-image: var(--paper); opacity: var(--paper-opacity); pointer-events: none; } body { margin: 0; background: var(--c-warm-white); color: var(--c-ink); font-family: var(--font); font-weight: var(--w-normal); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* nothing should ever need this - it is a backstop */ /* This element is where overflow propagates to the viewport from, so the gutter has to be declared here too — on alone it is ignored, and the page still jumped sideways when the gate locked the body. */ scrollbar-gutter: stable; } /* Body is scroll-locked by fixing it in place, not by hiding overflow. overflow:hidden jumps to the top on iOS; this preserves position. */ body.is-locked { position: fixed; width: 100%; overflow: hidden; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; /* removes the 300ms tap delay */ } a { color: inherit; text-decoration: none; touch-action: manipulation; } /* --- Focus --------------------------------------------------------------- DESIGN.md 38. Visible, and never removed. Terracotta reads clearly on both the warm-white and the black ground. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-xs); } ::selection { background: var(--c-accent); color: var(--c-white); } /* --- Type scale ---------------------------------------------------------- */ /* Everything in this block sets in the serif. The pairing is the theme: serif for anything that is a heading, a figure or a name, sans for anything that is read as a sentence or tapped as a control. */ .t-display-xl, .t-display-l, .t-display-m { font-family: var(--font-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; } .t-display-xl { font-size: var(--t-display-xl); } .t-display-l { font-size: var(--t-display-l); } .t-display-m { font-size: var(--t-display-m); } .t-h1, .t-h2, .t-h3 { font-family: var(--font-display); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; } .t-h1 { font-size: var(--t-h1); } .t-h2 { font-size: var(--t-h2); } .t-h3 { font-size: var(--t-h3); } .t-body-l { font-size: var(--t-body-l); line-height: 1.5; font-weight: var(--w-light); text-wrap: pretty; } .t-body { font-size: var(--t-body); } .t-small { font-size: var(--t-small); } /* Uppercase metadata. DESIGN.md 04 - used sparingly. */ .t-meta { font-size: var(--t-small); font-weight: var(--w-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-stone-text); } .t-micro { font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-stone-text); } /* --- Named text styles --------------------------------------------------- Report, "Typography direction". These are semantic names, not size names, so a template says what a piece of text *is* and the scale can be retuned in one place. They deliberately overlap the raw scale above rather than replacing it — .t-h2 is still the heading size, .t-section-title is the heading *role*. */ /* Eyebrow: developer name, section label, "Actual site photograph". 12px floor, never smaller, because it frequently carries a real fact. */ .t-eyebrow { font-size: var(--t-ui); font-weight: var(--w-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-accent-text); } .mode-dark .t-eyebrow { color: var(--c-accent-bright); } /* Numeric display — prices, areas, possession, distances. Tabular figures so a column of prices aligns on the decimal instead of shimmering. */ .t-property-stat { font-family: var(--font-display); font-size: var(--t-stat); font-weight: var(--w-display); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .t-property-stat-label { font-size: var(--t-ui); font-weight: var(--w-normal); line-height: var(--lh-tight); color: var(--c-stone-text); } /* Action label — buttons, sticky bar, nav. Sentence case is allowed here; uppercase is reserved for short single words. */ .t-action-label { font-size: var(--t-ui); font-weight: var(--w-medium); line-height: var(--lh-tight); letter-spacing: .04em; } /* Caption — image dates, plan labels, map notes. Sentence case, never a fact a visitor is entitled to read at full size. */ .t-caption { font-size: var(--t-caption); font-weight: var(--w-normal); line-height: 1.45; color: var(--c-stone-text); } /* Trust note — RERA, possession, channel-partner disclosure, form consent. Deliberately higher contrast than a caption: this is the copy that must not look like it is being hidden. */ .t-trust-note { font-size: var(--t-caption); font-weight: var(--w-normal); line-height: 1.6; color: var(--c-stone-text); } /* The menu panel is a dark surface without carrying .mode-dark, so it is named here too rather than left to inherit the light-ground colour. */ .mode-dark .t-trust-note, .menu .t-trust-note { color: var(--c-warm-white); } .mode-dark .t-caption, .menu .t-caption { color: var(--c-stone-on-dark); } /* Measure. Copy is short by design - this stops it running wide anyway. */ .t-measure { max-width: 34ch; } .t-measure-lg { max-width: 52ch; } .t-muted { color: var(--c-stone-text); } /* Accent text. On a light ground the deeper value is required for contrast; on a dark section the brighter one is both readable and correct. */ .t-accent { color: var(--c-accent-text); } .mode-dark .t-accent { color: var(--c-accent-bright); } /* --- Grid ---------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 1600px) { .wrap { max-width: var(--grid-max-lg); } } .wrap-bleed { width: 100%; } /* full-bleed, intentional only */ .grid { display: grid; gap: var(--col-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); /* mobile: 4 col */ } @media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } /* tablet: 8 col */ } @media (min-width: 1200px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* desktop: 12 col */ } /* --- Section rhythm ------------------------------------------------------ */ .sec { padding-block: var(--sec-md); } .sec-sm { padding-block: var(--sec-sm); } .sec-lg { padding-block: var(--sec-lg); } /* Colour modes. DESIGN.md 39 - the site has no theme switch; it moves between designed modes section by section. Light is the default and carries roughly three quarters of the page. Dark is an accent: one statement, one footer. Inverting a dark UI is not the same as designing a light one, so the light sections get their own composition rules below rather than borrowed ones. */ /* Transparent, so the grain on shows through. Anything that needs an opaque ground (a white surface, a dark section) states it explicitly. */ /* The nav is fixed and opaque, so the document has to start below it. One offset here rather than a --nav-h compensation inside every component that happens to sit at the top of a page. */ main { padding-top: var(--nav-h); } .mode-light { background: transparent; color: var(--c-ink); } .mode-alt { background: var(--c-surface); color: var(--c-ink); } /* The demo has two dark grounds, not one: #10184B under the statement bands and #0B0624 under the footer. .mode-dark is the band; the footer overrides it in sections.css. */ .mode-dark { background: var(--c-ink-soft); color: var(--c-warm-white); } .mode-dark .t-meta, .mode-dark .t-micro, .mode-dark .t-muted { color: var(--c-stone-on-dark); } /* --- Hairlines ----------------------------------------------------------- */ .rule { border-top: var(--border-width) solid var(--hairline); } .mode-dark .rule { border-top-color: var(--hairline-dark); } .rule-b { border-bottom: var(--border-width) solid var(--hairline); } .mode-dark .rule-b { border-bottom-color: var(--hairline-dark); } /* --- Utility ------------------------------------------------------------- */ /* `hidden` is only a UA-stylesheet rule, so ANY author rule that sets display silently defeats it — and this file's own components set display constantly. The lightbox was the casualty: it is display:grid, so hiding it left a transparent position:fixed sheet across the whole viewport that swallowed every subsequent click. Close the viewer, and nothing on the page could be clicked again, including the next photograph. One rule, at author level, so the attribute means what it says everywhere. !important is deliberate: `hidden` is not a style suggestion, and the whole failure mode is a more specific selector quietly winning against it. */ [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .stack > * + * { margin-top: var(--s-sm); } .stack-md > * + * { margin-top: var(--s-md); } /* Blur has exactly one home now: the fixed header, where the demo theme makes the bar a pane of frosted paper. Anywhere else — over a photograph, behind a modal, on a card — it is still a mistake. This class is the escape hatch for asserting that on a subtree. */ .no-blur-guard { backdrop-filter: none !important; filter: none !important; }