/* ========================================================================== Digital Realtors — Design Tokens Colour, type, space, motion and elevation extracted from the brand logo. Light is the default; dark is opt-in via :root[data-theme="dark"]. ========================================================================== */ :root { /* --- Brand: deep royal blue (wordmark, roof, outer ring) --------------- */ --dr-blue-900: #082A66; --dr-blue-800: #0B3379; --dr-blue-700: #0F3D91; /* primary */ --dr-blue-600: #1A4FAE; --dr-blue-500: #2A66CC; --dr-blue-400: #3B7BE0; /* glass towers */ --dr-blue-300: #74A4EE; --dr-blue-200: #B4CDF7; --dr-blue-100: #E8F0FB; /* tint */ /* --- Brand: bright orange ("Realtors", crane, inner ring) -------------- */ --dr-orange-700: #C9520F; --dr-orange-600: #F26B21; /* accent */ --dr-orange-500: #FF7A2F; --dr-orange-400: #FF8C42; --dr-orange-200: #FFD2B4; --dr-orange-100: #FFF1E7; /* --- Neutrals --------------------------------------------------------- */ --dr-ink: #0B1220; --dr-ink-soft: #1B2436; --dr-slate-700:#334155; --dr-slate-500:#64748B; --dr-slate-400:#94A3B8; --dr-slate-300:#CBD5E1; --dr-slate-200:#E2E8F0; --dr-mist: #F4F6FA; --dr-white: #FFFFFF; /* --- Semantic (themed) ------------------------------------------------ */ --dr-bg: var(--dr-white); --dr-bg-alt: var(--dr-mist); --dr-bg-invert: var(--dr-blue-900); --dr-surface: var(--dr-white); --dr-surface-raise: var(--dr-white); --dr-border: var(--dr-slate-200); --dr-border-strong: var(--dr-slate-300); --dr-text: var(--dr-ink); --dr-text-soft: var(--dr-slate-500); --dr-text-invert: var(--dr-white); --dr-primary: var(--dr-blue-700); --dr-primary-hover: var(--dr-blue-600); --dr-accent: var(--dr-orange-600); --dr-accent-hover: var(--dr-orange-500); --dr-success: #16A34A; --dr-warning: #D97706; --dr-danger: #DC2626; /* Module accents — one system, three identities (set on ) */ --dr-module: var(--dr-blue-700); --dr-module-soft: var(--dr-blue-100); /* --- Gradients & effects --------------------------------------------- */ --dr-grad-brand: linear-gradient(135deg, var(--dr-blue-700) 0%, var(--dr-blue-500) 55%, var(--dr-blue-400) 100%); --dr-grad-accent: linear-gradient(135deg, var(--dr-orange-600) 0%, var(--dr-orange-400) 100%); --dr-grad-night: linear-gradient(160deg, #061B44 0%, #0B2A63 45%, #103A86 100%); --dr-glass: rgba(255, 255, 255, .72); --dr-glass-brd: rgba(255, 255, 255, .55); --dr-blueprint: rgba(15, 61, 145, .07); /* --- Elevation -------------------------------------------------------- */ --dr-sh-xs: 0 1px 2px rgba(11, 18, 32, .06); --dr-sh-sm: 0 2px 8px rgba(11, 18, 32, .07); --dr-sh-md: 0 10px 24px rgba(11, 18, 32, .09); --dr-sh-lg: 0 20px 48px rgba(11, 18, 32, .12); --dr-sh-xl: 0 32px 72px rgba(11, 18, 32, .17); --dr-sh-brand: 0 18px 40px rgba(15, 61, 145, .22); --dr-sh-accent: 0 14px 32px rgba(242, 107, 33, .30); /* --- Radii (roof-chevron geometry: soft but architectural) ------------ */ --dr-r-xs: 6px; --dr-r-sm: 10px; --dr-r-md: 14px; --dr-r-lg: 20px; --dr-r-xl: 28px; --dr-r-2xl: 36px; --dr-r-pill: 999px; /* --- Space scale ------------------------------------------------------ */ --dr-s-1: 4px; --dr-s-2: 8px; --dr-s-3: 12px; --dr-s-4: 16px; --dr-s-5: 20px; --dr-s-6: 24px; --dr-s-8: 32px; --dr-s-10: 40px; --dr-s-12: 48px; --dr-s-16: 64px; --dr-s-20: 80px; --dr-s-24: 96px; --dr-s-32: 128px; /* --- Typography ------------------------------------------------------- */ --dr-font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; --dr-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --dr-font-bn: 'Hind Siliguri', var(--dr-font-body); --dr-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* Fluid type scale */ --dr-t-xs: clamp(.75rem, .72rem + .12vw, .8rem); --dr-t-sm: clamp(.85rem, .82rem + .15vw, .92rem); --dr-t-base: clamp(1rem, .96rem + .2vw, 1.06rem); --dr-t-lg: clamp(1.12rem, 1.05rem + .35vw, 1.28rem); --dr-t-xl: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); --dr-t-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); --dr-t-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem); --dr-t-4xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem); --dr-t-hero: clamp(2.9rem, 1.9rem + 5vw, 5.6rem); --dr-lh-tight: 1.06; --dr-lh-snug: 1.25; --dr-lh-body: 1.65; --dr-track-tight: -.022em; --dr-track-wide: .08em; /* --- Motion ----------------------------------------------------------- */ --dr-ease: cubic-bezier(.22, .61, .36, 1); --dr-ease-out: cubic-bezier(.16, 1, .3, 1); --dr-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dr-dur-fast: 160ms; --dr-dur-base: 280ms; --dr-dur-slow: 520ms; --dr-dur-slower: 900ms; /* --- Layout ----------------------------------------------------------- */ --dr-container: 1200px; --dr-container-wide: 1440px; --dr-gutter: clamp(1rem, 4vw, 2.5rem); --dr-nav-h: 76px; /* --- Z-index ---------------------------------------------------------- */ --dr-z-base: 1; --dr-z-sticky: 100; --dr-z-nav: 500; --dr-z-dock: 700; --dr-z-drawer: 800; --dr-z-modal: 900; --dr-z-toast: 1000; } /* ========================================================================== Dark theme ========================================================================== */ :root[data-theme="dark"] { --dr-bg: #070E1C; --dr-bg-alt: #0B1526; --dr-bg-invert: #050B17; --dr-surface: #101B30; --dr-surface-raise: #16233C; --dr-border: #1F2E4A; --dr-border-strong: #2C3F63; --dr-text: #E9EFF9; --dr-text-soft: #9AAAC4; --dr-text-invert: #0B1220; --dr-primary: var(--dr-blue-400); --dr-primary-hover: var(--dr-blue-300); --dr-accent: var(--dr-orange-500); --dr-accent-hover: var(--dr-orange-400); --dr-module: var(--dr-blue-400); --dr-module-soft: rgba(59, 123, 224, .16); --dr-glass: rgba(16, 27, 48, .72); --dr-glass-brd: rgba(148, 175, 226, .18); --dr-blueprint: rgba(116, 164, 238, .09); --dr-sh-xs: 0 1px 2px rgba(0, 0, 0, .5); --dr-sh-sm: 0 2px 10px rgba(0, 0, 0, .45); --dr-sh-md: 0 12px 28px rgba(0, 0, 0, .5); --dr-sh-lg: 0 24px 56px rgba(0, 0, 0, .58); --dr-sh-xl: 0 36px 80px rgba(0, 0, 0, .65); --dr-sh-brand: 0 18px 44px rgba(0, 0, 0, .55); } /* ========================================================================== Per-module identity — same system, three moods ========================================================================== */ [data-module="digital-marketing"] { --dr-module: var(--dr-orange-600); --dr-module-soft: var(--dr-orange-100); } [data-module="digital-solutions"] { --dr-module: var(--dr-blue-500); --dr-module-soft: var(--dr-blue-100); } [data-module="legal-consulting"] { --dr-module: var(--dr-blue-900); --dr-module-soft: #F6EEE2; } :root[data-theme="dark"] [data-module="digital-marketing"] { --dr-module-soft: rgba(242,107,33,.16); } :root[data-theme="dark"] [data-module="legal-consulting"] { --dr-module: #D8B98A; --dr-module-soft: rgba(216,185,138,.14); } /* ========================================================================== Reduced motion — one global kill-switch ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dr-dur-fast: 1ms; --dr-dur-base: 1ms; --dr-dur-slow: 1ms; --dr-dur-slower: 1ms; } }