/* ========================================================================== WINSPER LAND INVESTMENTS — Design Tokens ========================================================================== */ :root { /* ---- Premium Brand Colors ---- */ --color-red: #E63946; /* Refined vibrant red */ --color-red-dark: #C1121F; --color-red-light: #FDEAEA; --color-green: #9ac95d; /* Luminous emerald green */ --color-green-dark: #7ba646; --color-green-light: #f4f9eb; --color-green-lighter: #f9fcf5; --color-blue: #2563EB; /* Premium electric blue */ --color-blue-dark: #1D4ED8; --color-blue-light: #DBEAFE; --color-navy: #0B132B; /* Deep sophisticated navy */ --color-navy-light: #1C2541; /* ---- Neutrals ---- */ --color-charcoal: #17212B; --color-charcoal-80: rgba(23, 33, 43, 0.80); --color-charcoal-60: rgba(23, 33, 43, 0.60); --color-charcoal-40: rgba(23, 33, 43, 0.40); --color-charcoal-20: rgba(23, 33, 43, 0.20); --color-charcoal-10: rgba(23, 33, 43, 0.10); --color-charcoal-05: rgba(23, 33, 43, 0.05); --color-white: #FFFFFF; --color-off-white: #F7F9F7; --color-gray-100: #f3f5f3; --color-gray-200: #e5e8e5; --color-gray-300: #cdd1cd; --color-gray-400: #9ca39c; --color-gray-500: #6b756b; --color-gray-600: #4a524a; --color-primary: var(--color-green); --color-primary-dark: var(--color-green-dark); --color-primary-light: var(--color-green-light); --color-secondary: var(--color-blue); --color-secondary-dark: var(--color-blue-dark); --color-accent: var(--color-red); --color-accent-dark: var(--color-red-dark); --color-text: var(--color-charcoal); --color-text-inverse: var(--color-white); --color-text-secondary: var(--color-gray-500); --color-text-muted: var(--color-gray-400); --color-bg: var(--color-white); --color-bg-alt: var(--color-off-white); --color-bg-dark: var(--color-navy); --color-border: var(--color-gray-200); --color-border-dark: rgba(255, 255, 255, 0.1); /* ---- Gradients & Effects ---- */ --gradient-brand: linear-gradient(135deg, var(--color-blue) 0%, var(--color-green) 100%); --gradient-brand-hover: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-green-dark) 100%); --gradient-accent: linear-gradient(135deg, var(--color-red) 0%, #FF9A9E 100%); --gradient-dark: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-light) 100%); --gradient-text: linear-gradient(to right, var(--color-blue), var(--color-green)); --glow-primary: 0 8px 24px rgba(46, 204, 113, 0.4); --glow-secondary: 0 8px 24px rgba(37, 99, 235, 0.4); --glow-accent: 0 8px 24px rgba(230, 57, 70, 0.4); /* ---- Typography ---- */ --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font sizes (fluid) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 2.75rem; /* 44px */ --text-5xl: 3.25rem; /* 52px */ --text-6xl: 3.75rem; /* 60px */ /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ---- Spacing ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section padding */ --section-py: var(--space-20); --section-py-lg: var(--space-24); --container-max: 1280px; --container-narrow: 960px; --container-px: var(--space-6); /* ---- Border Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(23, 33, 43, 0.04); --shadow-sm: 0 1px 3px rgba(23, 33, 43, 0.06), 0 1px 2px rgba(23, 33, 43, 0.04); --shadow-md: 0 4px 6px rgba(23, 33, 43, 0.05), 0 2px 4px rgba(23, 33, 43, 0.04); --shadow-lg: 0 10px 15px rgba(23, 33, 43, 0.05), 0 4px 6px rgba(23, 33, 43, 0.03); --shadow-xl: 0 20px 25px rgba(23, 33, 43, 0.06), 0 8px 10px rgba(23, 33, 43, 0.03); --shadow-2xl: 0 25px 50px rgba(23, 33, 43, 0.1); --shadow-card: 0 1px 3px rgba(23, 33, 43, 0.06), 0 8px 24px rgba(23, 33, 43, 0.04); --shadow-card-hover: 0 4px 12px rgba(23, 33, 43, 0.08), 0 16px 40px rgba(23, 33, 43, 0.06); /* ---- Transitions ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; /* ---- Z-Index ---- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-fab: 600; /* ---- Overlay & Glassmorphism ---- */ --overlay-dark: rgba(11, 19, 43, 0.7); --overlay-darker: rgba(11, 19, 43, 0.85); --overlay-light: rgba(255, 255, 255, 0.85); --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-dark: rgba(11, 19, 43, 0.6); --glass-border: rgba(255, 255, 255, 0.2); --glass-border-dark: rgba(255, 255, 255, 0.05); --glass-blur: blur(12px); } /* ============ CUSTOM SCROLLBAR ============ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-off-white); border-radius: 0; } ::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 4px; border: 2px solid var(--color-off-white); } ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); } /* For Firefox */ html { scrollbar-width: thin; scrollbar-color: var(--color-gray-300) var(--color-off-white); }