/* ============================================================ KNIGHT CASTLE REAL ESTATE — DESIGN SYSTEM (TOKENS) ------------------------------------------------------------ This is the single source of truth for the brand's look. Change a value here and it updates everywhere on the site. When you get the real brand assets, edit ONLY this file: - Colors -> the "COLORS" block - Fonts -> the "TYPOGRAPHY" block (+ @font-face at bottom) ============================================================ */ :root { /* --------------------------------------------------------- COLORS Gold-on-dark luxury palette pulled from the reference. --------------------------------------------------------- */ /* Brand gold — exact values from Figma (radial gold gradient stops) */ --gold-50: #fbf4e2; --gold-100: #f7ecd0; --gold-200: #efd493; --gold-300: #e9bf59; /* gradient light stop */ --gold-400: #d7a53b; /* PRIMARY gold (gradient mid) */ --gold-500: #c58b1d; /* gradient dark stop / borders */ --gold-600: #a8760f; --gold-700: #835a0c; /* Gold gradient for premium fills (buttons, badges, text) */ --gold-gradient: linear-gradient(135deg, #e9bf59 0%, #d7a53b 50%, #c58b1d 100%); --gold-sheen: linear-gradient(180deg, #e9bf59 0%, #c58b1d 100%); /* Ink = brand NAVY — headings, dark UI, footer (from Figma #06162e) */ --ink-900: #06162e; /* deep navy (primary ink) */ --ink-800: #0a1f3d; --ink-700: #12294a; --ink-600: #1c3763; --ink-500: #2a4a7d; --navy: #06162e; /* semantic alias for the brand navy */ /* Warm greys — body text, muted labels */ --grey-700: #4a4f57; --grey-500: #6b7178; --grey-400: #9aa0a7; --grey-300: #c7ccd1; --grey-200: #e4e7ea; --grey-100: #f1f2f2; /* Surfaces / backgrounds */ --bg-page: #f4f2ed; /* warm off-white page background */ --bg-surface: #ffffff; /* cards, panels */ --bg-muted: #e8e8e8; /* subtle section separation */ /* Feedback */ --success: #3fae6b; --danger: #d0483d; /* Semantic aliases (use THESE in components, not raw colors) */ --color-primary: var(--gold-400); --color-primary-hover: var(--gold-500); --color-on-primary: var(--ink-900); /* text on gold */ --color-heading: var(--ink-900); --color-text: var(--grey-700); --color-text-muted: var(--grey-500); --color-border: var(--grey-200); --color-border-strong: var(--grey-300); /* --------------------------------------------------------- TYPOGRAPHY Display = bold condensed uppercase (headlines) Body = clean humanist sans (paragraphs, UI) Swap the font names when you drop in the real brand fonts. --------------------------------------------------------- */ /* Display = Thunder (brand font, condensed). Bebas Neue is the free stand-in until the real Thunder files are dropped into assets/fonts/. Body = clean neutral sans (readable UI + paragraphs) */ --font-display: "Thunder", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --font-body: "Roboto Condensed", "Inter", "Segoe UI", system-ui, sans-serif; /* Airy tracking to match Thunder's spacing in the Figma design */ --tracking-display: 0.02em; /* Type scale (fluid — grows with viewport) */ --fs-hero: clamp(2.6rem, 6vw, 5rem); /* hero headline */ --fs-h1: clamp(2rem, 4vw, 3.25rem); --fs-h2: clamp(1.6rem, 3vw, 2.5rem); /* section titles */ --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);/* card titles */ --fs-lead: clamp(1rem, 1.3vw, 1.15rem); /* intro paragraphs */ --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; /* heavy display weight for big headlines */ --lh-tight: 1.05; --lh-heading:1.15; --lh-body: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; /* uppercase labels */ --tracking-wider: 0.12em; /* --------------------------------------------------------- SPACING (8px base scale) --------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Section rhythm + page gutters --container caps the content width (Figma content column is 1200px inside a 1440px frame). Set it to 100% for a full-bleed layout. */ --section-y: clamp(3.5rem, 8vw, 7rem); --container: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); /* --------------------------------------------------------- RADII --------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* --------------------------------------------------------- SHADOWS / ELEVATION --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(13, 16, 21, 0.06); --shadow-sm: 0 2px 8px rgba(13, 16, 21, 0.08); --shadow-md: 0 8px 24px rgba(13, 16, 21, 0.10); --shadow-lg: 0 18px 48px rgba(13, 16, 21, 0.14); --shadow-gold: 0 10px 30px rgba(166, 127, 56, 0.35); /* --------------------------------------------------------- GLASSMORPHISM Reusable frosted-glass recipe (light + dark variants). --------------------------------------------------------- */ --glass-blur: 16px; /* Dark glass — used over the bright hero image */ --glass-dark-bg: rgba(13, 16, 21, 0.42); --glass-dark-border: rgba(255, 255, 255, 0.18); --glass-dark-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); /* Light glass — used over dark/photo backgrounds */ --glass-light-bg: rgba(255, 255, 255, 0.14); --glass-light-border: rgba(255, 255, 255, 0.35); --glass-light-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); /* --------------------------------------------------------- MOTION --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* --------------------------------------------------------- LAYERING (z-index scale — avoids random big numbers) --------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-navbar: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* --------------------------------------------------------- HERO CINEMA — defaults for the scroll-driven stage. js/main.js (initHeroCinema) overwrites these every frame; these values are the "top of page, before JS" state. --------------------------------------------------------- */ --h-mx: 0; --h-my: 0; --h-sky-y: 0px; --h-sky-scale: 1.04; --h-glow-y: 0px; --h-glow-scale: 1.02; --h-front-y: 0px; --h-front-scale: 1; --h-split-x: 0vw; --h-split-y: 0px; --h-split-scale: 1; --h-frame2-op: 0; --h-frame2-scale: 1.04; --h-blur: 0px; --h-bright: 1; --h-shade-op: 0.35; --h-panel-op: 1; --h-panel-y: 0px; --h-panel-scale: 1; --h-story-op: 0; --h-story-y: 58px; } /* ============================================================ DARK THEME Activated by (toggle handled by js/theme.js). Only the semantic aliases + surfaces change — the brand gold stays identical and pops beautifully on dark. To edit dark colors, change ONLY the values in this block. ============================================================ */ :root[data-theme="dark"] { /* Surfaces / backgrounds — deep navy-black to match the brand */ --bg-page: #050c18; /* deep navy-black */ --bg-surface: #0d1d34; /* cards, panels */ --bg-muted: #050c18; /* subtle section separation */ /* Text */ --color-heading: #f5f6f7; --color-text: #b9bfc6; --color-text-muted:#8b9199; /* Borders (light, low-opacity over dark) */ --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.20); /* Slightly warmer primary for dark surfaces */ --color-primary: var(--gold-300); --color-primary-hover: var(--gold-400); /* Elevation: dark UI leans on subtle borders, deeper shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 55px rgba(0, 0, 0, 0.6); --shadow-gold: 0 12px 34px rgba(203, 169, 90, 0.28); /* Glass over dark backgrounds → use the light frosted recipe */ --glass-dark-bg: rgba(21, 26, 34, 0.55); --glass-dark-border: rgba(255, 255, 255, 0.14); color-scheme: dark; /* native controls (scrollbars, etc.) go dark */ } /* ---- Component tweaks that only apply in dark mode ---- */ :root[data-theme="dark"] .badge { background: rgba(203, 169, 90, 0.15); color: var(--gold-200); } :root[data-theme="dark"] .chip { background: var(--bg-surface); } :root[data-theme="dark"] .chip--active { background: var(--gold-gradient); color: var(--ink-900); border-color: transparent; } :root[data-theme="dark"] .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.25); } :root[data-theme="dark"] .btn--dark { background: #fff; color: var(--ink-900); border-color: transparent; } :root[data-theme="dark"] .input, :root[data-theme="dark"] .select { background: var(--bg-muted); } /* Property card titles are gold in the dark design */ :root[data-theme="dark"] .card--property .card__title { color: var(--gold-300); } /* keep smooth theme transitions */ :root, .card, .btn, .input, .select, .chip, .badge { transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* ============================================================ FONT LOADING Using Google Fonts for now (Oswald + Inter) as close stand-ins. When you receive the real brand fonts: 1. Drop the files into /assets/fonts/ 2. Replace the @import below with @font-face rules 3. Update --font-display / --font-body above ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;600;700&display=swap"); /* ---- Thunder (brand display font — from Figma) -------------------------- Drop the font files into assets/fonts/ using the names below. These rules are ACTIVE: as soon as a matching file exists it loads and overrides the Bebas Neue fallback. Any format works (woff2 / woff / ttf / otf) — the browser uses the first one it finds, in that order. See assets/fonts/README.md for the exact filenames to use. ------------------------------------------------------------------------- */ @font-face { font-family: "Thunder"; src: url("../assets/fonts/Thunder-Medium.woff2") format("woff2"), url("../assets/fonts/Thunder-Medium.woff") format("woff"), url("../assets/fonts/Thunder-Medium.ttf") format("truetype"), url("../assets/fonts/Thunder-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Thunder"; src: url("../assets/fonts/Thunder-Bold.woff2") format("woff2"), url("../assets/fonts/Thunder-Bold.woff") format("woff"), url("../assets/fonts/Thunder-Bold.ttf") format("truetype"), url("../assets/fonts/Thunder-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Thunder"; src: url("../assets/fonts/Thunder-HC.woff2") format("woff2"), url("../assets/fonts/Thunder-HC.woff") format("woff"), url("../assets/fonts/Thunder-HC.ttf") format("truetype"), url("../assets/fonts/Thunder-HC.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } /* Example @font-face template for real brand fonts (kept commented): @font-face { font-family: "Brand Display"; src: url("../assets/fonts/brand-display.woff2") format("woff2"); font-weight: 700; font-display: swap; } */