/* ========================================================================= Taeliore - Design Tokens Editorial real-estate brand. Navy + gold + warm ivory. Classic, refined. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cinzel:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ============================================================ COLORS ============================================================ */ /* Brand - Navy (from the logo mark and wordmark re) */ --color-navy: #00274b; --color-navy-dark: #001a35; /* hover/press */ --color-navy-soft: #1d3555; /* body emphasis on ivory */ --color-navy-tint: #e8ecf1; /* very subtle navy-tinted surface */ /* Brand - Gold (from the bowtie, window, and search-lens accent) Aligned 2026-05-23 with the canonical assets/taeliore/tokens.css and DESIGN.md (Property Gold #b4975b). The earlier darker variant (#80611f / #654b17 / #caa95e / #f4ecd8) was the outlier; brought into line so portal builds inherit one palette regardless of which token file is loaded. */ --color-gold: #b4975b; --color-gold-dark: #9a7e44; /* hover/press */ --color-gold-light: #d4b87a; /* highlight, hairline accent */ --color-gold-tint: #f5efde; /* gold-tinted surface */ /* Surface */ --color-canvas: #fafaf6; /* warm ivory page floor */ --color-white: #ffffff; --color-cream: #f5f1e8; /* warmer cream band */ --color-surface-navy: #00274b; --color-surface-navy-soft: #002d56; --color-hairline: #e5e3dc; /* 1px border on ivory */ --color-hairline-on-navy: #14365a; /* 1px border on dark navy */ /* Text */ --color-ink: #1a1a1a; /* near-black, primary headings */ --color-body-strong: #2c2c2c; --color-body: #4a4a4a; --color-muted: #6b6b6b; --color-muted-soft: #8d8d8d; --color-on-navy: #ffffff; --color-on-navy-soft: #a8b5c5; --color-on-gold: #ffffff; /* Semantic */ --color-success: #2e7d4f; --color-success-bg: #e8f3ec; --color-success-fg: #1c5a36; --color-warning: #b8860b; --color-warning-bg: #fbf4e4; --color-warning-fg: #7a5d10; --color-error: #b03434; --color-error-bg: #fbeded; --color-error-fg: #7d2424; /* ============================================================ TYPE ============================================================ */ /* Display - refined transitional serif, editorial headlines */ --font-display: "Playfair Display", "Cormorant Garamond", Garamond, "Times New Roman", serif; /* Caps - Trajan-style Roman caps; supports the Taeliore wordmark system. Reserved for the wordmark, section eyebrows, all-caps moments. */ --font-caps: "Cinzel", "Trajan Pro", "Playfair Display", serif; /* Body - clean humanist sans for UI, body, navigation */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Mono - data tables, source pills, numeric grids */ --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* Type scale */ --type-display-xl: 72px; --type-display-lg: 52px; --type-display-md: 40px; --type-display-sm: 30px; --type-title-lg: 22px; --type-title-md: 18px; --type-title-sm: 16px; --type-body-lg: 18px; --type-body-md: 16px; --type-body-sm: 14px; --type-caption: 13px; --type-eyebrow: 12px; --type-button: 14px; --type-nav-link: 15px; /* ============================================================ SPACING (4px base) ============================================================ */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* Radii - restrained, in keeping with a classic real-estate brand */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 9999px; --radius-full: 9999px; /* Elevation - low-saturation navy-tinted shadows, no pure black */ --shadow-none: none; --shadow-card: 0 1px 2px rgba(0, 39, 75, 0.04), 0 4px 12px rgba(0, 39, 75, 0.05); --shadow-lift: 0 4px 8px rgba(0, 39, 75, 0.06), 0 18px 36px rgba(0, 39, 75, 0.10); --shadow-photo: 0 12px 32px rgba(0, 39, 75, 0.14); /* Layout */ --container-max: 1240px; --nav-height: 72px; /* Motion - ease-out curves only (no bounce/elastic), product-paced */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-fast: 130ms; --motion-base: 200ms; --motion-slow: 320ms; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--color-canvas); color: var(--color-body); font-family: var(--font-body); font-size: var(--type-body-md); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } /* Glide on in-page jumps + go-to-top; reduced-motion resets this to auto below. */ html { scroll-behavior: smooth; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); font-weight: 500; margin: 0; letter-spacing: -0.01em; } h1 { font-size: var(--type-display-xl); line-height: 1.05; letter-spacing: -0.02em; } h2 { font-size: var(--type-display-lg); line-height: 1.10; letter-spacing: -0.015em; } h3 { font-size: var(--type-display-md); line-height: 1.15; } h4 { font-size: var(--type-display-sm); line-height: 1.20; } p { font-family: var(--font-body); font-size: var(--type-body-md); color: var(--color-body); line-height: 1.65; margin: 0 0 var(--space-md) 0; text-wrap: pretty; } small { font-size: var(--type-body-sm); color: var(--color-muted); } a { color: var(--color-navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms ease; } a:hover { border-bottom-color: var(--color-gold); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 14px; } /* ============================================================ UTILITY CLASSES ============================================================ */ /* The signature eyebrow: gold rule + small Cinzel caps. */ .u-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-caps); font-size: var(--type-eyebrow); font-weight: 500; color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.22em; line-height: 1; } .u-eyebrow::before, .u-eyebrow::after { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; } /* Display + title utilities, mirror the React component sizing. */ .u-display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-xl); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-ink); } .u-display-lg { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-lg); line-height: 1.10; letter-spacing: -0.015em; color: var(--color-ink); } .u-display-md { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-md); line-height: 1.15; color: var(--color-ink); } .u-display-sm { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-sm); line-height: 1.20; color: var(--color-ink); } .u-title-lg { font-family: var(--font-body); font-weight: 600; font-size: var(--type-title-lg); line-height: 1.30; color: var(--color-ink); } .u-title-md { font-family: var(--font-body); font-weight: 600; font-size: var(--type-title-md); line-height: 1.40; color: var(--color-ink); } .u-title-sm { font-family: var(--font-body); font-weight: 600; font-size: var(--type-title-sm); line-height: 1.40; color: var(--color-ink); } .u-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--type-body-lg); line-height: 1.60; color: var(--color-body); } .u-body-md { font-family: var(--font-body); font-weight: 400; font-size: var(--type-body-md); line-height: 1.65; color: var(--color-body); } .u-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--type-body-sm); line-height: 1.60; color: var(--color-body); } .u-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--type-caption); line-height: 1.40; color: var(--color-muted); } .u-mono { font-family: var(--font-mono); font-weight: 400; font-size: 14px; } /* Decorative gold hairline used between section title + body, or as section divider. */ .u-gold-rule { display: inline-block; width: 56px; height: 1px; background: var(--color-gold); } /* ============================================================ MOTION - shared keyframes + utilities Restrained, state-conveying; mirrors the house ease-out-quint curve. Every animated surface inherits these. Reduced-motion is honored by the global guard at the foot of this file. ============================================================ */ @keyframes rev-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rev-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rev-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes rev-pop { 0% { transform: scale(1); } 42% { transform: scale(1.16); } 100% { transform: scale(1); } } @keyframes rev-spin { to { transform: rotate(360deg); } } @keyframes rev-shimmer { from { background-position: 180% 0; } to { background-position: -180% 0; } } /* Mount entrance: fade + 10px rise on the house curve. */ .u-rise { animation: rev-rise var(--motion-slow) var(--ease-out-quint) both; } .u-fade { animation: rev-fade var(--motion-base) var(--ease-out-quart) both; } /* Stagger direct children (hero stacks, tile grids, entrance lists). */ .u-stagger > * { animation: rev-rise var(--motion-slow) var(--ease-out-quint) both; } .u-stagger > *:nth-child(1) { animation-delay: 40ms; } .u-stagger > *:nth-child(2) { animation-delay: 90ms; } .u-stagger > *:nth-child(3) { animation-delay: 140ms; } .u-stagger > *:nth-child(4) { animation-delay: 190ms; } .u-stagger > *:nth-child(5) { animation-delay: 240ms; } .u-stagger > *:nth-child(6) { animation-delay: 290ms; } .u-stagger > *:nth-child(7) { animation-delay: 340ms; } .u-stagger > *:nth-child(8) { animation-delay: 390ms; } /* Reveal-on-scroll: starts hidden, .is-in (added by IntersectionObserver) plays it. */ .u-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow) var(--ease-out-quint), transform var(--motion-slow) var(--ease-out-quint); } .u-reveal.is-in { opacity: 1; transform: none; } /* Skeleton shimmer for loading placeholders. */ .u-skeleton { background: linear-gradient(100deg, var(--color-hairline) 30%, var(--color-cream) 50%, var(--color-hairline) 70%); background-size: 200% 100%; animation: rev-shimmer 1.25s linear infinite; border-radius: var(--radius-sm); } /* Spinner ring. */ .u-spin { animation: rev-spin .8s linear infinite; } /* Two-tone wordmark "re" — navy gradient clipped to the glyphs. Solid navy is the fallback wherever background-clip:text is unsupported. */ .eli-re { color: var(--color-navy); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .eli-re { background: linear-gradient(180deg, #2f5388 0%, #00274b 52%, #001426 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* Accessibility: collapse all motion when the user asks for it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .u-reveal { opacity: 1; transform: none; } }