/* ================================================================ ESTATES BY LevD&C — Premium Villa Design System A quieter, more editorial sub-brand for premium villa marketing. Relationship to parent: same family, more elevated. Shares: 0px architectural edges · LevD&C wordmark Distinct: warm stone palette · all-serif typography · vast whitespace Apply .mode-estates to or any wrapper to scope. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap'); /* ── Estates Mode ──────────────────────────────────────────── */ .mode-estates, :root.mode-estates { /* ── COLORS ─────────────────────────────────────────────── */ /* Ink — warmer than parent's pure black */ --ink: #14110D; /* Paper Black — primary text */ --ink-soft: #4A453E; /* Warm Graphite — secondary text */ --ink-muted: #8B847A; /* Warm Stone — captions, labels */ --ink-faint: #BFB7AB; /* Pale Stone — hairlines, disabled */ /* Backgrounds — warm whites & stones */ --bg: #FAF7F2; /* Bone — page background */ --bg-warm: #F2ECE0; /* Stone — alternate sections */ --bg-deep: #E8E0D0; /* Sand — accent surfaces */ --bg-dark: #1A1612; /* Ink Black — full-bleed dark sections */ --bg-dark2: #2A241D; /* Warm Charcoal — hover on dark */ /* Borders — hairline only */ --border: rgba(20,17,13,0.10); /* Hairline on light */ --border-soft: rgba(20,17,13,0.06); /* Whisper hairline */ --border-dark: rgba(245,241,234,0.12); /* Hairline on dark */ /* Accent — deep warm olive/bronze (replaces parent's teal) */ --accent: #5A5240; /* Olive Bronze — primary accent, links */ --accent-hover: #423B2D; /* Deep Bronze — hover */ --accent-soft: #7C7259; /* Faded Bronze — accent on dark */ /* Metallic — restrained champagne, never overused */ --champagne: #A8946B; /* Champagne — gilt details, monograms */ --champagne-soft:#C9B68D; /* Champagne Pale — highlights on dark */ /* Utility */ --white: #FFFFFF; --paper: #FAF7F2; --black: #14110D; /* ── SEMANTIC ALIASES ───────────────────────────────────── */ --fg1: var(--ink); --fg2: var(--ink-soft); --fg3: var(--ink-muted); --surface: var(--bg); --surface-alt: var(--bg-warm); --surface-deep:var(--bg-deep); --surface-dark:var(--bg-dark); /* ── TYPOGRAPHY ─────────────────────────────────────────── */ /* Font families — all-serif editorial, geometric sans for micro */ --display: 'Cormorant Garamond', 'Cormorant', Didot, Georgia, serif; --body: 'Lora', Georgia, 'Times New Roman', serif; --mono-sans: 'Jost', 'Futura', system-ui, sans-serif; /* Semantic type roles */ --font-h1: var(--display); --font-h2: var(--display); --font-h3: var(--display); --font-body: var(--body); --font-label: var(--mono-sans); /* tiny uppercase labels */ --font-eyebrow: var(--mono-sans); /* Type scale — fluid, larger than parent for editorial weight */ --text-hero: clamp(5.5rem, 17vw, 13rem); /* Cover wordmark */ --text-display: clamp(4rem, 9vw, 7.5rem); /* Hero display */ --text-xl: clamp(3rem, 6vw, 5.5rem); /* Section titles */ --text-lg: clamp(2rem, 3.4vw, 3.25rem); /* Sub-section */ --text-md: clamp(1.5rem, 2vw, 1.875rem); /* Card titles */ --text-body-l: 1.0625rem; /* Lead paragraph */ --text-body: 0.9375rem; /* Standard body */ --text-body-s: 0.8125rem; /* Secondary body */ --text-label: 0.6875rem; /* Uppercase labels */ --text-caption: 0.625rem; /* Captions, tags */ /* Letter spacing — tighter display, much wider labels */ --ls-display: -0.025em; /* Cormorant display headings */ --ls-heading: -0.015em; /* Smaller headings */ --ls-body: 0.005em; /* Body — almost neutral */ --ls-label: 0.22em; /* Uppercase labels */ --ls-eyebrow: 0.32em; /* Section eyebrows */ --ls-button: 0.26em; /* Buttons */ /* Line heights */ --lh-hero: 0.92; --lh-display: 1.02; --lh-heading: 1.15; --lh-body: 1.75; --lh-lead: 1.85; /* Font weights — Cormorant looks best at 300–500 */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; /* ── SPACING (8pt grid, more generous than parent) ────────── */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 144px; /* Section padding desktop */ --space-9: 208px; /* Hero, feature sections */ /* Layout */ --max: 1240px; /* Slightly wider than parent */ --max-text: 680px; /* Reading column for prose */ --max-wide: 1440px; /* Cinematic galleries */ --nav-h: 88px; /* Taller nav for editorial feel */ /* ── BORDER RADIUS ──────────────────────────────────────── */ /* Inherited from parent — 0px throughout, architectural edges */ --r-sm: 0; --r-md: 0; --r-lg: 0; /* ── SHADOWS ─────────────────────────────────────────────── */ /* Near-flat. Estates relies on hairlines & whitespace, not lift. */ --sh-sm: 0 1px 2px rgba(20,17,13,0.03); --sh-md: 0 8px 28px rgba(20,17,13,0.06); --sh-lg: 0 24px 64px rgba(20,17,13,0.10); /* ── EASING & MOTION ────────────────────────────────────── */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-slow: cubic-bezier(0.22, 0.61, 0.36, 1); --fast: 200ms; --base: 400ms; /* Slower than parent — more deliberate */ --slow: 700ms; } /* ── Semantic defaults when .mode-estates is in scope ──────── */ .mode-estates { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: var(--text-body); font-weight: var(--w-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mode-estates h1, .mode-estates h2, .mode-estates h3, .mode-estates h4 { font-family: var(--display); font-weight: var(--w-regular); letter-spacing: var(--ls-display); line-height: var(--lh-display); color: var(--ink); margin: 0; } .mode-estates h1 { font-size: var(--text-xl); } .mode-estates h2 { font-size: var(--text-lg); } .mode-estates h3 { font-size: var(--text-md); letter-spacing: var(--ls-heading); } .mode-estates h4 { font-size: var(--text-body-l); letter-spacing: var(--ls-heading); } .mode-estates p { font-family: var(--body); font-weight: var(--w-regular); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ink-soft); margin: 0; } .mode-estates .lead { font-family: var(--display); font-weight: var(--w-light); font-style: italic; font-size: var(--text-body-l); line-height: var(--lh-lead); color: var(--ink-soft); letter-spacing: 0; } .mode-estates .eyebrow { font-family: var(--font-eyebrow); font-size: var(--text-label); font-weight: var(--w-regular); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); display: inline-block; } .mode-estates .label, .mode-estates label { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--w-regular); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); } .mode-estates .caption { font-family: var(--font-label); font-size: var(--text-caption); font-weight: var(--w-regular); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .mode-estates a { color: var(--accent); text-decoration: none; transition: color var(--fast) var(--ease); } .mode-estates a:hover { color: var(--accent-hover); }