/* ============================================================================= ALFIE IP — DESIGN SYSTEM Houston Real Estate Advisor · CGP Realty Group @ eXp Realty Visual target: financial advisor / private banking aesthetic. NOT generic American real estate. NOT eXp blue. ============================================================================= */ /* ── Webfonts — self-hosted via next/font (CSS variables injected on ) ── */ :root { /* ── Color · Ink (primary) ─────────────────────────────────────────────── */ --ink-900: #0F1B33; /* deepest — backgrounds for philosophy section */ --ink-800: #14213D; /* primary brand navy */ --ink-700: #1F2D52; --ink-600: #2C3A66; /* ── Color · Gold (accent) ─────────────────────────────────────────────── */ --gold-700: #8C6F3F; --gold-600: #A88451; /* on light bg */ --gold-500: #B8945F; /* primary accent */ --gold-400: #C9A96E; /* hover / lighter contexts */ --gold-300: #D9BF8A; --gold-100: #F1E8D6; /* tint backgrounds */ /* ── Color · Neutrals ──────────────────────────────────────────────────── */ --ivory: #FAFAF7; /* page background */ --paper: #F4F2EC; /* alt section bg */ --bone: #EAE7DE; /* dividers, soft fills */ --line: #E2DED4; /* hairline borders */ --line-soft:#ECE9E1; --char-900: #14161A; /* primary text */ --char-700: #2A2D33; --char-500: #5B5F66; /* secondary text */ --char-400: #7A7E85; /* tertiary / labels */ --char-300: #A8ABB1; /* disabled */ --char-200: #CFD1D5; --char-100: #ECEDEE; --white: #FFFFFF; /* ── Color · Semantic ──────────────────────────────────────────────────── */ --fg-1: var(--char-900); /* primary text */ --fg-2: var(--char-500); /* secondary text */ --fg-3: var(--char-400); /* labels, captions */ --fg-inverse: var(--ivory); --bg-page: var(--ivory); --bg-alt: var(--paper); --bg-deep: var(--ink-800); --bg-deepest: var(--ink-900); --accent: var(--gold-500); --accent-soft: var(--gold-100); --accent-ink: var(--gold-700); --border: var(--line); --border-soft: var(--line-soft); --border-strong: var(--char-200); /* ── Type · Families ───────────────────────────────────────────────────── */ --font-display: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif; --font-body: var(--font-manrope), 'Manrope', system-ui, sans-serif; --font-zh-display: var(--font-noto-serif-tc), 'Noto Serif TC', serif; --font-zh-body: var(--font-noto-sans-tc), 'Noto Sans TC', sans-serif; --font-mono: 'SFMono-Regular', ui-monospace, 'Menlo', monospace; /* ── Type · Scale (clamped fluid) ──────────────────────────────────────── */ --fs-eyebrow: 0.6875rem; /* 11 — uppercase labels, tracking wide */ --fs-caption: 0.8125rem; /* 13 */ --fs-small: 0.875rem; /* 14 */ --fs-body: 1rem; /* 16 — min for both EN and ZH */ --fs-body-lg: 1.125rem; /* 18 — comfortable reading */ --fs-lead: 1.25rem; /* 20 — section leads */ --fs-h6: 1.125rem; --fs-h5: 1.375rem; --fs-h4: 1.75rem; --fs-h3: 2.25rem; --fs-h2: clamp(2.5rem, 4vw, 3.5rem); --fs-h1: clamp(3rem, 6vw, 5rem); --fs-display: clamp(3.5rem, 8vw, 6.5rem); /* ── Type · Tracking ──────────────────────────────────────────────────── */ --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-wide: 0.04em; --tr-wider: 0.12em; /* eyebrows */ --tr-widest: 0.22em; /* uppercase section labels */ /* ── Type · Leading ───────────────────────────────────────────────────── */ --lh-display: 1.04; --lh-tight: 1.12; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --lh-loose-en: 1.7; --lh-loose-zh: 1.85; /* Chinese needs more breathing room */ /* ── Spacing scale (8px base) ─────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; /* Section rhythm */ --section-py: clamp(64px, 9vw, 128px); --container: 1240px; --container-narrow: 880px; --gutter: clamp(20px, 4vw, 48px); /* ── Radii (restrained — banker aesthetic, not rounded fintech) ───────── */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-pill: 999px; /* ── Borders ──────────────────────────────────────────────────────────── */ --bw-hair: 1px; --bw-line: 1.5px; --bw-heavy: 2px; /* ── Shadows (subtle, paper-like — no fintech glow) ───────────────────── */ --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.04), 0 1px 1px rgba(20, 22, 26, 0.03); --shadow-2: 0 4px 12px rgba(20, 22, 26, 0.06), 0 1px 3px rgba(20, 22, 26, 0.04); --shadow-3: 0 12px 32px rgba(20, 22, 26, 0.08), 0 2px 6px rgba(20, 22, 26, 0.04); --shadow-deep: 0 20px 60px rgba(15, 27, 51, 0.18); /* ── Motion ──────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; /* ── Z-index ─────────────────────────────────────────────────────────── */ --z-nav: 50; --z-sticky-bar: 60; --z-modal: 100; } /* ============================================================================= SEMANTIC ELEMENT STYLES ============================================================================= */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body[lang="zh-Hant"], body[lang^="zh"], [lang="zh-Hant"], .zh { font-family: var(--font-zh-body); line-height: var(--lh-loose-zh); } /* Display headings — serif, refined, advisor */ h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; color: var(--fg-1); } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); font-weight: 500; } h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); font-weight: 500; } h4, .h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 500; } h5, .h5 { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: 600; letter-spacing: var(--tr-snug); line-height: var(--lh-snug); } h6, .h6 { font-family: var(--font-body); font-size: var(--fs-h6); font-weight: 600; letter-spacing: var(--tr-normal); line-height: var(--lh-snug); } .zh h1, .zh h2, .zh h3, .zh h4, [lang^="zh"] h1, [lang^="zh"] h2, [lang^="zh"] h3, [lang^="zh"] h4 { font-family: var(--font-zh-display); letter-spacing: 0.02em; /* CJK reads better with slight positive tracking */ font-weight: 600; } p { margin: 0 0 1em; text-wrap: pretty; max-width: 68ch; } .zh p, [lang^="zh"] p { max-width: 38em; /* CJK char-based measure */ line-height: var(--lh-loose-zh); } /* Eyebrow / section label — uppercase, wide tracking, gold */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--accent); } .zh .eyebrow, [lang^="zh"] .eyebrow { letter-spacing: 0.3em; text-transform: none; } /* Lead paragraph — section intro */ .lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--fg-2); max-width: 60ch; } /* Pull quote — the philosophy line */ .pullquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.25; color: var(--fg-1); letter-spacing: var(--tr-snug); } .zh .pullquote, [lang^="zh"] .pullquote { font-family: var(--font-zh-display); font-style: normal; font-weight: 500; letter-spacing: 0.04em; } /* Caption / small print */ .caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: var(--lh-normal); } /* Number — stats bar */ .stat-number { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: var(--tr-tight); color: var(--ivory); } a { color: var(--fg-1); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-ink); } hr.rule { border: 0; border-top: 1px solid var(--border); margin: var(--sp-12) 0; } /* Hairline divider variant used in Footer / nav */ .hairline { height: 1px; background: var(--border); } /* Motion: smooth anchor scrolling + honor reduced-motion globally. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }