/* ============================================================= THANJAI PROPERTY — PROPERTY DETAIL PAGE styles.css | External Stylesheet ============================================================= */ /* ── GOOGLE FONTS (import in HTML or here) ─────────── */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Damion&family=Nunito:wght@400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&display=swap'); /* ══════════════════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTIES (TOKENS) ══════════════════════════════════════════════════════════════ */ :root { /* Property-detail palette */ --red: #b42628; --red-light: #fff0f0; --red-mid: #e8302e; --navy: #0f1f3d; --bg: #f5f0eb; --card: #ffffff; --text: #1e1b18; --muted: #7a6b5a; --border: #e2d9d0; --gold: #b8860b; --green: #1a7a4a; --radius: 14px; /* Listing / sidebar palette */ --red-list: #c8102e; --red-light-list: #fff0f2; --navy-list: #0f1f3d; --bg-list: #f4f1ee; --card-list: #ffffff; --text-list: #111; --muted-list: #6b7280; --border-list: #e2ddd8; --green-list: #1a7a4a; --gold-list: #b8860b; /* Search bar */ --primary-accent: #d8232a; --primary-hover: #b51d22; --soft-tint: #fff1f2; --ui-border: #e5e7eb; --base-dark: #1f2937; --base-muted: #6b7280; /* Global brand */ --primary-red: #d8232a; --text-dark: #2d2d2d; --text-light: #888888; --bg-gray: #f8f9fa; } /* ══════════════════════════════════════════════════════════════ 2. RESET & BASE ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { overflow-x: hidden; width: 100%; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); } .libre-font { font-family: 'Libre Baskerville', serif; } .damion-font { font-family: 'Damion', cursive; } /* ══════════════════════════════════════════════════════════════ 3. TAILWIND CONFIG COLORS (reference — applied via class) (Defined in tailwind.config inside