/* ============================================================= 4homes — Design Tokens CSS custom properties. Import this before any component styles. Do NOT add rules here — tokens only. ============================================================= */ /* Fonts loaded via in PHP : Cormorant Garamond (300,400,600 + italic) — headings DM Sans (300,400,500) — body / UI Google Fonts URL documented in index.php */ :root { /* ── Colour ──────────────────────────────────────────────── */ /* Accent — orange, used sparingly: CTAs, hover lines, tiny decorative elements */ --c-accent: #E87722; --c-accent-dark: #C4611A; /* pressed/active state */ --c-accent-muted: rgba(232, 119, 34, 0.10); /* tint for focus rings etc. */ --c-accent-border: #F0A040; /* lighter orange — button borders */ /* Backgrounds */ --c-bg: #FFFFFF; --c-bg-soft: #F9F8F6; /* off-white — section alternates */ --c-bg-dark: #1A1A1A; /* footer, dark sections */ --c-bg-overlay: rgba(26, 26, 26, 0.38); /* hero image overlay */ /* Text */ --c-text: #1A1A1A; /* near-black — primary */ --c-text-secondary: #5C5C5C; /* captions, metadata, secondary labels */ --c-text-inverse: #FFFFFF; /* text on dark backgrounds */ --c-text-inverse-muted: rgba(255, 255, 255, 0.65); /* Borders & dividers */ --c-border: #E8E5DF; --c-border-subtle: #F0EDE8; /* Navigation */ --c-nav-bg: #FFFFFF; --c-nav-text: #1A1A1A; --c-nav-hover: #E87722; --c-nav-shadow: 0 1px 0 #E8E5DF; /* ── Typography ──────────────────────────────────────────── */ --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale — unitless ratio applied via clamp() in style.css */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.25rem; /* 52px */ --text-5xl: 4.5rem; /* 72px */ --text-6xl: 6rem; /* 96px */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-base: 1.6; --leading-loose: 1.8; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* use for uppercase labels */ /* Heading weight — Cormorant Garamond reads best at 300–400 at display sizes */ --fw-display: 300; --fw-heading: 400; --fw-subhead: 500; --fw-body: 400; --fw-ui: 500; --fw-bold: 600; /* ── Spacing — 8px base grid ─────────────────────────────── */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-5: 2.5rem; /* 40px */ --sp-6: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-10: 5rem; /* 80px */ --sp-12: 6rem; /* 96px */ --sp-16: 8rem; /* 128px */ --sp-20: 10rem; /* 160px */ /* ── Layout ──────────────────────────────────────────────── */ --container-max: 1280px; --container-narrow: 780px; --container-pad-x: var(--sp-2); /* mobile — overridden at breakpoints */ /* ── Navigation ──────────────────────────────────────────── */ --nav-height: 4rem; /* 64px — update also in JS if used for offset */ --nav-height-scroll: 3.5rem; /* condensed when scrolled */ /* ── Hero ─────────────────────────────────────────────────── */ --hero-min-h: 92svh; /* svh for mobile address-bar awareness */ --hero-min-h-fb: 92vh; /* fallback for older browsers */ /* ── Cards / tiles ───────────────────────────────────────── */ --card-radius: 0px; /* square — luxury aesthetic */ --card-shadow: 0 2px 20px rgba(26, 26, 26, 0.07); --card-shadow-hover: 0 8px 40px rgba(26, 26, 26, 0.13); /* ── Buttons ─────────────────────────────────────────────── */ --btn-radius: 0.375rem; --btn-height: 3rem; /* 48px — touch-friendly */ --btn-height-lg: 3.5rem; /* 56px — hero CTA */ --btn-pad-x: var(--sp-3); --btn-font-size: var(--text-sm); --btn-tracking: var(--tracking-caps); --btn-fw: var(--fw-ui); /* ── Footer ──────────────────────────────────────────────── */ --footer-bg: #1A1A1A; --footer-border: rgba(255, 255, 255, 0.09); --footer-accent: #E87722; /* ── Gallery ─────────────────────────────────────────────── */ --gallery-gap: 2px; --gallery-cols-sm: 2; --gallery-cols-md: 3; --gallery-cols-lg: 4; /* ── Transitions ─────────────────────────────────────────── */ --ease-fast: 150ms ease; --ease-base: 250ms ease; --ease-slow: 400ms ease; --ease-in-out: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Elevation / z-index ─────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 50; --z-nav: 100; --z-modal: 200; --z-toast: 300; }