/* Cross-site primitives — included in every template's compiled bundle. * * Contains: * - The @layer base reset * - Document defaults (html/body) * - Box-model primitives (.tr-section, .tr-container) * - Universal tokens: spacing scale, motion, control-chrome * * NOT here: font @import, per-template colors/fonts/type/radii/shadow/layout * (those come from compileThemeToCss(theme)), or the --tr-header-height * step (@media override — that's the HEADER_HEIGHT_STEP constant in * ci/build-css.ts). Component styling is co-located Tailwind utilities in * each primitive/section file; the only hand-authored residue is runtime.css * (lightbox, map markers/popups, rich-text — un-scannable by Tailwind). */ /* ----- Reset (lightweight; assume modern browsers) ---------------------- * * Wrapped in `@layer base` so Tailwind utility classes in * `homepages.css` (which compiles into `@layer utilities`) win over * these element-level defaults. Otherwise unlayered rules like * `a { color: inherit }` beat the layered `.text-ink` utility because * unlayered always wins over layered in the CSS cascade. */ @layer base { *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } } /* ----- Document defaults ------------------------------------------------ */ html { scroll-behavior: smooth; scroll-padding-top: var(--tr-header-height); } body { font-family: var(--tr-font-sans); color: var(--tr-color-ink); background: var(--tr-color-background); font-size: var(--tr-text-base); line-height: 1.5; } /* ----- Primitives ------------------------------------------------------- */ /* Section is the full-bleed root for every section. Always 100% wide, * zero default padding/margin — adjacent sections butt edge-to-edge so * the page composes as a vertical stack with no framework-injected * whitespace. Per-section CSS (e.g. .tr-hero, .tr-amenities) handles * its own background and internal padding. */ .tr-section { display: block; width: 100%; padding: 0; margin: 0; } /* Long single-property pages stack many image-heavy sections; their combined GPU/raster memory makes Chrome evict the live Mapbox GL JS map's WebGL layer on scroll (the neighborhood map blanks to its background). content-visibility lets off-screen sections skip rendering so they stop consuming that memory, keeping the map's layer alive. Scoped under `.tr-root` (set by the publisher on , absent in the editor) so it is PUBLISHED-ONLY. Excludes the sticky header and the `.tr-nbhd` map section (which must stay painted and whose mobile dropdowns must not be `contain: paint`-clipped). `contain-intrinsic-size: auto` remembers each section's rendered height to avoid scroll jank. See the GPU-memory-fix spec. */ .tr-root .tr-section:not(header):not(.tr-nbhd) { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* Container is the centered, max-width inner well. Used *inside* a * Section when content needs to be horizontally constrained. */ .tr-container { width: 100%; max-width: var(--tr-container-max); margin-inline: auto; padding-inline: var(--tr-container-pad); } /* ----- Universal tokens ------------------------------------------------- */ :root { /* Spacing scale */ --tr-space-1: 0.25rem; --tr-space-2: 0.5rem; --tr-space-3: 0.75rem; --tr-space-4: 1rem; --tr-space-5: 1.25rem; --tr-space-6: 1.5rem; --tr-space-8: 2rem; --tr-space-10: 2.5rem; --tr-space-12: 3rem; --tr-space-16: 4rem; --tr-space-20: 5rem; --tr-space-24: 6rem; --tr-space-32: 8rem; /* Motion */ --tr-duration-fast: 150ms; --tr-duration-base: 250ms; --tr-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Dark control well — used by carousel arrows (gallery, agent carousel, * floorplan pagination). White icon on near-black circular button. */ --tr-control-bg-dark: rgba(17, 20, 24, 0.85); --tr-control-bg-dark-hover: #111418; --tr-control-fg-light: #ffffff; }