/* ========================================================================== Design Tokens - Single Source of Truth ========================================================================== */ :root { /* ======================================== Color System - RGB Format for Opacity Support ======================================== */ /* Brand Colors - Base RGB Values */ --color-brand-blue-rgb: 30 82 140; /* #1e528c - Primary Blue */ --color-brand-orange-rgb: 245 134 52; /* #f58634 - Secondary Orange */ --color-brand-green-rgb: 34 197 94; /* #22c55e - Success Green */ --color-brand-muted-rgb: 148 180 220; /* #94b4dc - Muted Blue (lighter variant) */ --color-white-rgb: 255 255 255; /* #ffffff - White */ /* Semantic Colors - RGB Values */ --color-primary-rgb: 30 82 140; /* #1e528c - Primary Blue */ --color-secondary-rgb: 245 134 52; /* #f58634 - Secondary Orange */ --color-success-rgb: 34 197 94; /* #22c55e - Success Green */ --color-error-rgb: 239 68 68; /* #ef4444 - Error Red */ /* Brand Colors - Semantic (with opacity support) */ --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-success: rgb(var(--color-success-rgb)); --color-error: rgb(var(--color-error-rgb)); /* Neutral Colors - RGB Values */ --color-neutral-50-rgb: 248 250 252; /* #f8fafc */ --color-neutral-100-rgb: 241 245 249; /* #f1f5f9 */ --color-neutral-200-rgb: 226 232 240; /* #e2e8f0 */ --color-neutral-400-rgb: 148 163 184; /* #94a3b8 */ --color-neutral-600-rgb: 71 85 105; /* #475569 */ --color-neutral-700-rgb: 51 65 85; /* #334155 */ --color-neutral-800-rgb: 30 41 59; /* #1e293b */ --color-neutral-900-rgb: 15 23 42; /* #0f172a */ --color-neutral-950-rgb: 4 3 3; /* #040303 */ /* Semantic Colors - Light Theme */ --color-bg-primary: rgb(var(--color-neutral-50-rgb)); --color-bg-secondary: rgb(var(--color-neutral-100-rgb)); --color-text-primary: rgb(var(--color-neutral-950-rgb)); --color-text-secondary: rgb(74 85 104); /* #4a5568 - keeping for compatibility */ --color-text-tertiary: rgb(100 116 139); /* #64748b */ --color-text-muted: rgb(107 114 128); /* #6b7280 */ --color-border-primary: rgb(var(--color-neutral-200-rgb)); } /* ========================================================================== Brand-Specific Color Overrides ========================================================================== */ /* * Brand selection is controlled by NEXT_PUBLIC_APP_ID environment variable. * The app ID is set as data-app attribute on via app/[locale]/layout.tsx * CSS selectors use [data-app="kiss-mortgage"] or [data-app="piero"] to apply brand-specific styles. * * Flow: NEXT_PUBLIC_APP_ID → getAppId() → data-app attribute → CSS selectors */ /* KISS Mortgage - Override secondary color to gold (#c79f4f) instead of orange */ [data-app="kiss-mortgage"] { --color-secondary-rgb: 199 159 79; /* #c79f4f - KISS Mortgage Gold */ --color-secondary: rgb(var(--color-secondary-rgb)); } /* KISS Mortgage - Primary blue override (#05668d) */ [data-app="kiss-mortgage"] { --color-primary-rgb: 5 102 141; /* #05668d - KISS Mortgage Primary Blue */ --color-primary: rgb(var(--color-primary-rgb)); } /* Dark Theme Overrides - Must be at root level, not nested */ [data-theme="dark"] { --color-primary-rgb: 91 163 255; /* #5ba3ff - Lighter brand blue for dark theme */ --color-primary: rgb(var(--color-primary-rgb)); --color-secondary-rgb: 255 163 102; /* #ffa366 - Lighter brand orange for dark theme */ --color-secondary: rgb(var(--color-secondary-rgb)); --color-success-rgb: 74 222 128; /* #4ade80 - Lighter green for dark theme */ --color-success: rgb(var(--color-success-rgb)); --color-error-rgb: 248 113 113; /* #f87171 - Lighter red for dark theme */ --color-error: rgb(var(--color-error-rgb)); --color-bg-primary: rgb(var(--color-neutral-900-rgb)); --color-bg-secondary: rgb(var(--color-neutral-800-rgb)); --color-text-primary: rgb(var(--color-neutral-100-rgb)); --color-text-secondary: rgb(203 213 225); /* #cbd5e1 */ --color-text-tertiary: rgb(148 163 184); /* #94a3b8 */ --color-text-muted: rgb(156 163 175); /* #9ca3af */ --color-border-primary: rgb(var(--color-neutral-400-rgb) / 0.2); /* Dark Theme Glass Shadows */ --shadow-glass: 0 8px 32px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.05), inset 0 -1px 0 rgb(0 0 0 / 0.2); --shadow-glass-lg: 0 12px 40px rgb(0 0 0 / 0.5), 0 6px 20px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.3); } /* KISS Mortgage - Dark Theme Overrides */ [data-app="kiss-mortgage"][data-theme="dark"] { --color-primary-rgb: 91 163 255; /* #5ba3ff - Lighter blue for dark theme */ --color-primary: rgb(var(--color-primary-rgb)); --color-secondary-rgb: 199 159 79; /* #c79f4f - Keep gold in dark mode (can adjust if needed) */ --color-secondary: rgb(var(--color-secondary-rgb)); } /* Legacy Support - Keep for backward compatibility during migration */ :root { --mortgage-blue: var(--color-primary); --mortgage-gold: var(--color-secondary); --mortgage-blue-dark: rgb(91 163 255); /* Updated to match brand dark mode */ --mortgage-gold-dark: rgb(255 163 102); /* Updated to match brand dark mode (Team Piero) */ } /* KISS Mortgage - Legacy variable overrides */ [data-app="kiss-mortgage"] { --mortgage-gold: var(--color-secondary); /* Will use gold (#c79f4f) */ } [data-app="kiss-mortgage"][data-theme="dark"] { --mortgage-gold-dark: rgb(199 159 79); /* KISS Mortgage gold in dark mode */ } /* Legacy Support - Keep for backward compatibility during migration */ :root { --mortgage-blue: var(--color-primary); --mortgage-gold: var(--color-secondary); --mortgage-blue-dark: rgb(91 163 255); /* Updated to match brand dark mode */ --mortgage-gold-dark: rgb(255 163 102); /* Updated to match brand dark mode (Team Piero) */ /* ======================================== Spacing Scale (4px base - 0.25rem increments) ======================================== */ --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 */ /* ======================================== Typography Scale ======================================== */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ======================================== Border Radius ======================================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* Pill */ /* Standard border radius for buttons and inputs */ --radius-button: 1.125rem; /* 18px - Standard for all buttons */ --radius-input: 1.125rem; /* 18px - Standard for all input fields */ /* ======================================== Shadows ======================================== */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Glass Shadows - Light Theme */ --shadow-glass: 0 8px 32px rgb(0 0 0 / 0.08), 0 4px 16px rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(255 255 255 / 0.1); --shadow-glass-lg: 0 12px 40px rgb(0 0 0 / 0.12), 0 6px 20px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.2); /* ======================================== Blur Values (Standardized) ======================================== */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 12px; --blur-xl: 16px; --blur-2xl: 20px; --blur-3xl: 24px; /* Legacy blur values - mapped to new scale */ /* Old: 7px -> New: 8px (--blur-md) */ /* Old: 10px -> New: 12px (--blur-lg) */ /* Old: 12px -> New: 12px (--blur-lg) */ /* Old: 15px -> New: 16px (--blur-xl) */ /* Old: 18px -> New: 20px (--blur-2xl) */ /* Old: 20px -> New: 20px (--blur-2xl) */ /* Old: 24px -> New: 24px (--blur-3xl) */ /* ======================================== Motion & Animation ======================================== */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 400ms; --easing-base: cubic-bezier(0.4, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Legacy support */ --animation-easing: var(--easing-base); /* ======================================== Z-Index Scale ======================================== */ --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-modal-backdrop: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; /* ======================================== Backdrop Filter Saturation ======================================== */ --backdrop-saturate: 180%; /* ======================================== Component Tokens - Single Source of Truth ======================================== */ /* Button tokens */ --button-padding-x: var(--space-4); --button-padding-y: var(--space-2); --button-padding-x-sm: var(--space-3); --button-padding-y-sm: var(--space-1); --button-radius: var(--radius-button); --button-font-size: var(--font-size-base); --button-font-size-sm: var(--font-size-sm); --button-font-weight: var(--font-weight-semibold); /* Card tokens */ --card-padding: var(--space-6); --card-padding-sm: var(--space-4); --card-radius: var(--radius-lg); --card-bg: rgb(255 255 255); --card-bg-dark: rgb(var(--color-neutral-800-rgb)); --card-border: 1px solid var(--color-border-primary); --card-shadow: var(--shadow-md); /* Input tokens */ --input-padding-x: var(--space-4); --input-padding-y: var(--space-2); --input-radius: var(--radius-input); --input-border: 1px solid rgb(var(--color-neutral-200-rgb)); --input-border-dark: 1px solid rgb(var(--color-neutral-600-rgb)); --input-bg: rgb(255 255 255); --input-bg-dark: rgb(var(--color-neutral-700-rgb)); --input-focus-ring: 2px solid rgb(var(--color-primary-rgb) / 0.3); /* Modal tokens */ --modal-backdrop: rgb(0 0 0 / 0.5); --modal-backdrop-blur: var(--blur-sm); --modal-padding: var(--space-6); --modal-radius: var(--radius-lg); --modal-max-width: 42rem; /* 672px */ --modal-shadow: var(--shadow-xl); /* Badge tokens */ --badge-padding-x: var(--space-2); --badge-padding-y: 0.125rem; /* 2px */ --badge-radius: var(--radius-sm); --badge-font-size: var(--font-size-xs); --badge-font-weight: var(--font-weight-medium); /* Status badge tokens - uses status colors from Tailwind config */ --status-badge-radius: var(--radius-full); --status-badge-padding-x: var(--space-2); --status-badge-padding-y: 0.125rem; } /* ========================================================================== CSS Variables - Legacy Compatibility Layer ========================================================================== */ /* Import new design token system */ /* Legacy variable mappings for backward compatibility */ :root { /* Semantic Colors - Legacy Support */ --bg-primary: var(--color-bg-primary); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-tertiary: var(--color-text-tertiary); --text-muted: var(--color-text-muted); --border-primary: var(--color-border-primary); /* Dark mode colors (legacy) */ --dark-bg-primary: rgb(var(--color-neutral-900-rgb)); --dark-bg-secondary: rgb(var(--color-neutral-800-rgb)); --dark-bg-tertiary: rgb(var(--color-neutral-800-rgb)); } [data-theme="dark"] { --bg-primary: var(--color-bg-primary); --bg-secondary: var(--color-bg-secondary); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-tertiary: var(--color-text-tertiary); --text-muted: var(--color-text-muted); } /* ========================================================================== Responsive Design System - Centralized Breakpoints & Fluid Scaling ========================================================================== */ /* ========================================================================== Breakpoint Definitions ========================================================================== */ :root { /* Standard breakpoints aligned with Tailwind */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1920px; } /* ========================================================================== Fluid Typography Scale ========================================================================== */ :root { /* Fluid typography using clamp() for smooth scaling across viewports */ --fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */ --fluid-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* 14-16px */ --fluid-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem); /* 16-18px */ --fluid-lg: clamp(1.125rem, 1.025rem + 0.5vw, 1.25rem); /* 18-20px */ --fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20-24px */ --fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24-32px */ --fluid-3xl: clamp(1.875rem, 1.575rem + 1.5vw, 2.5rem); /* 30-40px */ --fluid-4xl: clamp(2.25rem, 1.85rem + 2vw, 3rem); /* 36-48px */ --fluid-5xl: clamp(3rem, 2.4rem + 3vw, 4rem); /* 48-64px */ --fluid-6xl: clamp(3.75rem, 2.85rem + 4.5vw, 5rem); /* 60-80px */ } /* ========================================================================== Responsive Spacing Multipliers ========================================================================== */ :root { --space-multiplier: 1; } @media (min-width: 640px) { :root { --space-multiplier: 1.125; } } @media (min-width: 1024px) { :root { --space-multiplier: 1.25; } } /* ========================================================================== Container Sizing ========================================================================== */ :root { /* Fluid container padding that scales with viewport */ --container-padding-x: clamp(1rem, 3vw, 2rem); --container-max-width: 80rem; /* 1280px */ } /* ========================================================================== Touch Target Sizes ========================================================================== */ :root { /* Minimum touch target sizes for accessibility */ --touch-target-sm: 40px; --touch-target: 44px; /* WCAG recommended minimum */ --touch-target-lg: 48px; } /* ========================================================================== Responsive Grid Gaps ========================================================================== */ :root { --grid-gap-sm: var(--space-3); --grid-gap-md: var(--space-4); --grid-gap-lg: var(--space-6); } @media (min-width: 768px) { :root { --grid-gap-sm: var(--space-4); --grid-gap-md: var(--space-6); --grid-gap-lg: var(--space-8); } } /* ========================================================================== Base Styles & Resets ========================================================================== */ html { font-size: clamp(13px, 1vw + 11px, 18px); scroll-padding-top: 0; overflow-x: hidden; height: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================================== Transitions - Removed Global Rules ========================================================================== */ /* Global transitions removed to prevent specificity wars. Use utility classes from _transitions.css instead: - .transition-base for common transitions - .transition-interactive for buttons/links - .transition-theme for theme-aware elements - .no-transition to explicitly disable transitions */ /* Content-wrapper should not have transitions to preserve backdrop-filter */ .content-wrapper { /* No transitions needed - utility classes handle this */ } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; /* Background - covered by content-wrapper and other elements on most pages */ background-color: rgb(var(--color-neutral-50-rgb)); color: var(--text-primary); line-height: var(--line-height-normal); min-height: 100vh; position: relative; overflow-x: hidden; } /* Dark theme background */ [data-theme="dark"] body { background-color: rgb(var(--color-neutral-900-rgb)); } /* ========================================================================== Home Page Background ========================================================================== */ /* Home page body - subtle off-white background for better contrast */ body.home-page { background: rgb(var(--color-neutral-100-rgb)); background-image: none; } /* Dark mode - pure dark background */ [data-theme="dark"] body.home-page { background: rgb(var(--color-neutral-900-rgb)); background-image: none; } /* Strip ALL background styling from sections below hero on home page */ /* IMPORTANT: Exclude #hero and all its children to protect hero background image */ body.home-page .parallax-section:not(#hero), body.home-page section:not(#hero), body.home-page main > section:not(#hero), body.home-page main > section:not(#hero) > * { background: transparent; background-color: transparent; background-image: none; } /* Remove any pseudo-element backgrounds from sections below hero (exclude hero) */ body.home-page .parallax-section:not(#hero)::before, body.home-page .parallax-section:not(#hero)::after, body.home-page section:not(#hero)::before, body.home-page section:not(#hero)::after, body.home-page section:not(#hero) *::before, body.home-page section:not(#hero) *::after { display: none; content: none; background: none; background-color: transparent; background-image: none; } /* Strip background from all containers and wrappers in sections below hero (exclude hero) */ body.home-page .parallax-section:not(#hero) .container, body.home-page .parallax-section:not(#hero) .container > *, body.home-page section:not(#hero) .container, body.home-page section:not(#hero) .container > *, body.home-page section:not(#hero) > div, body.home-page section:not(#hero) > div > * { background: transparent; background-color: transparent; background-image: none; } /* Explicitly protect hero background image from being removed */ body.home-page #hero .hero-bg { background-image: url('/assets/images/pexels-heyho-7031607Compressed.webp'); } /* Ensure main element has no background and doesn't create stacking context */ body.home-page main { background: transparent; background-color: transparent; background-image: none; /* CRITICAL: Prevent stacking context that breaks backdrop-filter on content-wrapper */ isolation: auto; transform: none; opacity: 1; filter: none; } /* Keep glass cards with their glassmorphism - they should remain semi-transparent */ /* Glass cards are already styled separately and should show through to white background */ /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: inherit; margin: inherit; overflow: visible; clip: auto; white-space: normal; } /* ========================================================================== Hero Section Styles ========================================================================== */ .mobile-hero-container { padding-top: 0; } @media (min-width: 768px) { .mobile-hero-container { padding-top: 0; } } /* Hero section - consolidated text colors - Always white on dark backgrounds */ #hero, #hero h1, #hero h2, #hero h3, #hero p, #hero .hero-title { color: rgb(var(--color-white-rgb)) !important; } /* Hero section - Fixed positioning for scroll overlay effect */ /* CRITICAL: Ensure hero doesn't create stacking context that breaks backdrop-filter */ #hero { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100vh; height: 100dvh; /* Dynamic viewport height - will be locked by JavaScript on mobile */ height: var(--hero-initial-height, 100dvh); /* Use locked height on mobile if available */ z-index: 1; overflow: hidden; /* CRITICAL: Prevent stacking context creation */ isolation: auto; transform: none; -webkit-transform: none; opacity: 1; filter: none; /* Performance hints for scroll effects */ will-change: auto; } /* Content wrapper - Scrolls over hero section with glassmorphic effect */ /* PERFORMANCE: Removed backdrop-filter - blur is now applied directly to hero background */ /* Using semi-transparent overlay instead for better performance */ .content-wrapper { position: relative; z-index: var(--z-dropdown); margin-top: 100vh; margin-top: 100svh; /* Small viewport height - more stable on mobile */ margin-top: var(--hero-initial-height, 100svh); /* Use locked hero height on mobile if available */ /* Match footer opacity for consistency */ background-color: rgb(202 213 229 / 0.75); background-image: none; background-attachment: scroll; /* backdrop-filter removed - blur is now on hero background for better performance */ min-height: 100vh; min-height: 100svh; /* Small viewport height - more stable on mobile */ padding-bottom: 0; /* No longer need special stacking context handling since backdrop-filter is removed */ isolation: auto; transform: none; opacity: 1; /* Removed will-change: backdrop-filter - no longer needed */ contain: none; filter: none; transition: none; animation: none; } /* Ensure content-wrapper extends to footer on home page to prevent gap where hero is visible */ body.home-page .content-wrapper { padding-bottom: 0; margin-bottom: 0; } /* Ensure main element extends content-wrapper background to footer */ body.home-page main { position: relative; z-index: 10; } /* Dark mode background for content wrapper with glassmorphism */ /* PERFORMANCE: Removed backdrop-filter - blur is now applied directly to hero background */ [data-theme="dark"] .content-wrapper { /* Match footer opacity for consistency */ background-color: rgb(var(--color-neutral-900-rgb) / 0.75); background-image: none; background-attachment: scroll; /* backdrop-filter removed - blur is now on hero background for better performance */ } /* Contact section now has consistent padding like other sections */ /* Bottom padding is maintained to match section spacing pattern */ /* Ensure footer starts immediately after content-wrapper with consistent spacing */ body.home-page main + footer { margin-top: 0; padding-top: var(--space-8); /* Match section padding - consistent spacing between sections and footer (py-8 = 2rem) */ } /* Responsive footer padding on home page to match section padding pattern */ @media (min-width: 640px) { body.home-page main + footer { padding-top: var(--space-10); /* Match sm:py-10 = 2.5rem */ } } @media (min-width: 1024px) { body.home-page main + footer { padding-top: var(--space-12); /* Match lg:py-12 = 3rem */ } } /* Child sections - simplified since backdrop-filter is no longer used */ .content-wrapper > section, .content-wrapper > div { isolation: auto; transform: none; opacity: 1; filter: none; transition: none; animation: none; } /* News article images - simplified since backdrop-filter is no longer used */ #market-updates, #market-updates *, #news-column, #news-column *, #news-feed, #news-feed * { isolation: auto; } /* CRITICAL: Ensure images in news articles don't create stacking contexts */ #news-feed img, #news-column img, .news-article-image { /* Prevent transforms and filters that create stacking contexts */ transform: none; filter: none; /* Use will-change sparingly - only when needed for performance */ will-change: auto; /* Ensure absolute positioning doesn't create stacking context */ isolation: auto; } /* CRITICAL: Ensure image containers don't create stacking contexts */ #news-feed [class*="relative"], #news-column [class*="relative"] { isolation: auto; transform: none; } /* Custom scrollbar styling for news feed */ #news-feed { scrollbar-width: thin; scrollbar-color: rgb(0 0 0 / 0.2) transparent; } #news-feed::-webkit-scrollbar { width: 6px; } #news-feed::-webkit-scrollbar-track { background: transparent; } #news-feed::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 0.2); border-radius: 3px; } #news-feed::-webkit-scrollbar-thumb:hover { background: rgb(0 0 0 / 0.3); } [data-theme="dark"] #news-feed { scrollbar-color: rgb(255 255 255 / 0.2) transparent; } [data-theme="dark"] #news-feed::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.2); } [data-theme="dark"] #news-feed::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.3); } /* Mobile content-wrapper - simplified since backdrop-filter is no longer used */ @media (max-width: 767px) { .content-wrapper { background-image: none; background-attachment: scroll; /* backdrop-filter removed - blur is now on hero background for better performance */ /* Use locked hero height for margin-top to prevent address bar movement from affecting positioning */ margin-top: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */ } [data-theme="dark"] .content-wrapper { background-image: none; background-attachment: scroll; /* backdrop-filter removed - blur is now on hero background for better performance */ } /* Child elements - simplified since backdrop-filter is no longer used */ #market-updates *, #news-column *, #news-feed * { isolation: auto; } /* Images - simplified */ #news-feed img, #news-column img, .news-article-image { transform: none; isolation: auto; } /* Hover transforms on mobile */ #news-feed a:hover img, #news-column a:hover img, a:hover .news-article-image { transform: none; scale: 1; } /* Image containers */ #news-feed [class*="relative"], #news-column [class*="relative"] { isolation: auto; } } /* Hero background with image and gradient overlay - Enhanced */ /* Desktop: Uses CSS background image */ /* PERFORMANCE: Uses transform scale instead of blur for better performance */ /* Transform is GPU-accelerated and much faster than filter blur */ .hero-bg { background-image: url('/assets/images/pexels-heyho-7031607Compressed.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; /* background-attachment: fixed removed - hero section is now fixed, so background stays in place */ position: absolute; inset: 0; width: 100%; height: 100%; /* Use transform scale for better performance than filter blur */ transform: scale(var(--hero-bg-scale, 1)) translateZ(0); -webkit-transform: scale(var(--hero-bg-scale, 1)) translateZ(0); /* Smooth transition */ transition: transform 0.05s ease-out; /* Keep saturation for visual effect */ filter: saturate(130%); -webkit-filter: saturate(130%); /* Performance hints */ will-change: transform; transform-origin: center center; } /* Mobile: Uses img element for better control and stability */ .hero-bg-img { display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; /* Dimensions will be locked via JavaScript on mobile */ /* Use transform scale for better performance than filter blur */ transform: scale(var(--hero-bg-scale, 1)) translateZ(0); -webkit-transform: scale(var(--hero-bg-scale, 1)) translateZ(0); /* Smooth transition */ transition: transform 0.05s ease-out; /* Keep saturation for visual effect */ filter: saturate(130%); -webkit-filter: saturate(130%); /* Performance hints */ will-change: transform; transform-origin: center center; } /* Smooth parallax effect on scroll */ /* CRITICAL: will-change: transform creates stacking context - use with caution */ @media (prefers-reduced-motion: no-preference) { .hero-bg { /* Removed will-change: transform as it can create stacking context issues */ /* Use transform3d(0,0,0) instead for hardware acceleration without will-change */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } } /* Light mode gradient overlay - Darkened for better text contrast */ /* Desktop: Applied via ::before pseudo-element on .hero-bg */ .hero-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(var(--color-primary-rgb) / 0.5) 0%, rgb(var(--color-neutral-900-rgb) / 0.75) 100%); z-index: 0; } /* Dark mode gradient overlay - Desktop */ [data-theme="dark"] .hero-bg::before { background: linear-gradient(135deg, rgb(var(--color-neutral-900-rgb) / 0.6) 0%, rgb(var(--color-neutral-800-rgb) / 0.75) 100%); } /* Mobile: Separate gradient overlay element (since .hero-bg is hidden on mobile) */ .hero-gradient-overlay { background: linear-gradient(135deg, rgb(var(--color-primary-rgb) / 0.5) 0%, rgb(var(--color-neutral-900-rgb) / 0.75) 100%); pointer-events: none; /* Ensure it covers the full hero area */ width: 100%; height: 100%; /* Ensure it's visible and properly positioned */ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } [data-theme="dark"] .hero-gradient-overlay { background: linear-gradient(135deg, rgb(var(--color-neutral-900-rgb) / 0.6) 0%, rgb(var(--color-neutral-800-rgb) / 0.75) 100%); } /* Lock gradient overlay height on mobile to match hero */ @media (max-width: 767px) { .hero-gradient-overlay { /* CRITICAL: Use locked pixel height only - no viewport units that can change */ height: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */ min-height: var(--hero-initial-height) !important; max-height: var(--hero-initial-height) !important; display: block !important; } } /* Hero text container - Enhanced spacing and layout */ .hero-text-container { position: relative; } /* Hero text elements - Premium styling */ .hero-accent-line { width: 5rem; height: 0.3rem; background: linear-gradient(to right, var(--color-secondary), rgb(var(--color-secondary-rgb) / 0.9), rgb(var(--color-secondary-rgb) / 0.5), transparent); border-radius: var(--radius-full); filter: drop-shadow(0 2px 12px rgb(var(--color-secondary-rgb) / 0.4)); transition: width var(--animation-duration-long) var(--animation-easing); } /* KISS Mortgage - Use gold color instead of orange */ [data-app="kiss-mortgage"] .hero-accent-line { background: linear-gradient(to right, rgb(199 159 79), rgb(199 159 79 / 0.9), rgb(199 159 79 / 0.5), transparent); filter: drop-shadow(0 2px 12px rgb(199 159 79 / 0.4)); } [data-app="kiss-mortgage"][data-theme="dark"] .hero-accent-line { background: linear-gradient(to right, rgb(199 159 79), rgb(199 159 79 / 0.9), rgb(199 159 79 / 0.5), transparent); filter: drop-shadow(0 2px 12px rgb(199 159 79 / 0.4)); } @media (min-width: 768px) { .hero-accent-line { width: 6rem; height: 0.35rem; } } .hero-title-main { text-shadow: 0 2px 20px rgb(0 0 0 / 0.3), 0 4px 30px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5); letter-spacing: -0.02em; } /* Enhanced text shadows for light mode */ :root:not([data-theme="dark"]) .hero-title-main { text-shadow: 0 2px 20px rgb(0 0 0 / 0.5), 0 4px 40px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.7), 0 0 10px rgb(0 0 0 / 0.3); } .hero-title-gold { color: #f5e6b8; text-shadow: 0 0 30px rgb(245 230 184 / 0.8), 0 0 60px rgb(245 230 184 / 0.4), 0 0 90px rgb(245 230 184 / 0.2), 0 2px 20px rgb(0 0 0 / 0.3); letter-spacing: -0.02em; } /* Enhanced text shadows for light mode */ :root:not([data-theme="dark"]) .hero-title-gold { text-shadow: 0 0 30px rgb(245 230 184 / 0.9), 0 0 60px rgb(245 230 184 / 0.5), 0 0 90px rgb(245 230 184 / 0.3), 0 2px 20px rgb(0 0 0 / 0.5), 0 4px 40px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.7), 0 0 10px rgb(0 0 0 / 0.4); } .hero-subtitle { text-shadow: 0 1px 10px rgb(0 0 0 / 0.2); } /* Enhanced text shadows for light mode */ :root:not([data-theme="dark"]) .hero-subtitle { text-shadow: 0 1px 10px rgb(0 0 0 / 0.4), 0 2px 20px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.6); } /* Enhanced text shadows for light mode - badge text */ :root:not([data-theme="dark"]) #hero p { text-shadow: 0 1px 8px rgb(0 0 0 / 0.4), 0 2px 16px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.6); } /* Simplified z-index system for hero */ .hero-content { position: relative; z-index: 1; /* Use CSS custom property for opacity from JavaScript */ opacity: var(--hero-content-opacity, 1); /* Smooth transition for opacity changes */ transition: opacity 0.05s ease-out; /* Performance hint */ will-change: opacity; } /* Adjust hero content for desktop viewport - reduce font sizes and spacing */ @media (min-width: 768px) { .hero-content { padding-top: clamp(5rem, 8vh, 6rem) !important; /* Clear navbar */ padding-bottom: clamp(1rem, 3vh, 2rem) !important; align-items: center; justify-content: center; } /* Ensure grid displays as two columns at 768px+ */ .hero-content > div.grid, .hero-content > div.flex.flex-col.md\:grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(1rem, 2vw, 2rem) !important; align-items: start; width: 100%; max-width: 100%; } /* Reduce spacing in left column container */ #hero .hero-content > div > div.text-left > * + * { margin-top: clamp(0.75rem, 1.5vh, 1.25rem) !important; } /* Optimize left column for two-column layout */ #hero .hero-content > div > div.text-left { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; max-height: 100%; } /* Reduce spacing in hero text container */ .hero-text-container { gap: clamp(0.5rem, 1vh, 0.75rem) !important; } /* Reduce title size at 768px for better fit - override Tailwind classes */ #hero .hero-title { font-size: clamp(1.5rem, 3.5vw + 0.5rem, 2rem) !important; line-height: 1.1 !important; } .hero-title span.block { margin-top: clamp(0.125rem, 0.5vh, 0.25rem) !important; } /* Reduce subtitle size at 768px - override Tailwind classes */ #hero .hero-subtitle, #hero .hero-subtitle span { font-size: clamp(0.75rem, 1.5vw + 0.25rem, 0.9375rem) !important; line-height: 1.4 !important; } .hero-subtitle span.block { margin-bottom: clamp(0.375rem, 1vh, 0.5rem) !important; } /* Reduce badge text size */ .hero-text-content p { font-size: clamp(0.625rem, 1.2vw + 0.25rem, 0.75rem) !important; margin-top: clamp(0.125rem, 0.5vh, 0.25rem) !important; margin-bottom: clamp(0.125rem, 0.5vh, 0.25rem) !important; } /* Desktop button sizing - smaller at 768px */ .hero-primary-btn { padding: clamp(0.625rem, 1.25vh, 0.75rem) clamp(1rem, 2.5vw, 1.5rem) !important; font-size: clamp(0.75rem, 1vw + 0.25rem, 0.875rem) !important; width: auto; min-width: -moz-fit-content; min-width: fit-content; } .hero-primary-btn svg { width: clamp(0.875rem, 1.5vw, 1.125rem) !important; height: clamp(0.875rem, 1.5vw, 1.125rem) !important; } /* Desktop trust indicators */ #hero .text-left > div.flex.items-center.justify-center { gap: clamp(0.75rem, 2vw, 1.25rem) !important; font-size: clamp(0.75rem, 1.2vw + 0.25rem, 0.9375rem) !important; margin-top: clamp(0.5rem, 1vh, 0.75rem) !important; } #hero .text-left > div.flex.items-center.justify-center svg { width: clamp(0.875rem, 1.5vw, 1.125rem) !important; height: clamp(0.875rem, 1.5vw, 1.125rem) !important; } /* Right column - Journey box */ #hero .hero-content > div > div:not(.text-left) { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; max-height: 100%; align-items: stretch; } /* Desktop quick actions */ .hero-quick-actions-box { padding: clamp(0.875rem, 2vh, 1.25rem) !important; height: -moz-fit-content; height: fit-content; max-height: 100%; } .hero-quick-actions-title { font-size: clamp(0.9375rem, 2vw + 0.25rem, 1.25rem) !important; margin-bottom: clamp(0.25rem, 0.5vh, 0.5rem) !important; } .hero-quick-actions-box .text-center { margin-bottom: clamp(0.5rem, 1.5vh, 0.75rem) !important; } .hero-quick-actions-box p { font-size: clamp(0.6875rem, 1.2vw + 0.25rem, 0.8125rem) !important; } .hero-quick-action-btn { padding: clamp(0.5rem, 1.5vh, 0.75rem) !important; } .hero-quick-action-btn span.text-5xl { font-size: clamp(1.5rem, 4vw, 2rem) !important; margin-bottom: clamp(0.25rem, 0.75vh, 0.5rem) !important; } .hero-quick-action-text { font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.875rem) !important; margin-bottom: 0 !important; } .hero-quick-action-btn span.text-xs { font-size: clamp(0.5625rem, 1vw + 0.25rem, 0.6875rem) !important; margin-top: 0 !important; } .hero-quick-actions-box .grid { gap: clamp(0.5rem, 1.5vw, 0.75rem) !important; } /* Larger desktop adjustments */ @media (min-width: 1024px) { .hero-content > div.grid { gap: clamp(2rem, 3vw, 3rem) !important; } #hero .hero-content > div > div.text-left > * + * { margin-top: clamp(1rem, 2vh, 1.5rem) !important; } .hero-primary-btn { padding: clamp(0.875rem, 2vh, 1rem) clamp(1.5rem, 4vw, 2rem) !important; font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem) !important; } .hero-quick-actions-box { padding: clamp(1rem, 3vh, 1.5rem) !important; } .hero-quick-actions-title { font-size: clamp(1rem, 2.5vw + 0.25rem, 1.5rem) !important; } } } /* Mobile: Apply same fixed scroll effect as desktop */ @media (max-width: 767px) { #hero { overflow-x: hidden !important; overflow-y: hidden !important; position: fixed !important; align-items: center !important; padding-top: 0; /* CRITICAL: Use locked pixel height only - no viewport units that can change */ height: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */ min-height: var(--hero-initial-height) !important; max-height: var(--hero-initial-height) !important; /* Lock max height too */ width: 100vw !important; /* Lock width to viewport */ /* CRITICAL: Ensure no stacking context creation */ isolation: auto !important; transform: none !important; -webkit-transform: none !important; /* Prevent viewport changes from affecting positioning */ will-change: auto !important; /* Prevent layout shifts - prevent recalculation without breaking size constraints */ contain: layout style paint !important; /* Prevent any transitions that could cause scaling */ transition: none !important; /* Prevent any recalculation based on viewport changes */ box-sizing: border-box !important; } /* Lock hero-bg-img (img element) dimensions to prevent scaling when address bar moves */ /* Using img element on mobile provides more stable rendering than CSS background */ #hero .hero-bg-img { /* CRITICAL: Use locked pixel height only - no viewport units that can change */ height: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */ min-height: var(--hero-initial-height) !important; max-height: var(--hero-initial-height) !important; width: 100% !important; /* Use 100% of parent container */ max-width: 100% !important; /* object-fit: cover is more stable than background-size: cover on mobile */ -o-object-fit: cover !important; object-fit: cover !important; -o-object-position: center center !important; object-position: center center !important; /* Force hardware acceleration and prevent repaints */ transform: translateZ(0) scale(1) !important; -webkit-transform: translateZ(0) scale(1) !important; /* Prevent any scaling or transformation */ will-change: auto !important; /* Prevent the element from responding to container size changes */ box-sizing: border-box !important; /* Ensure the element is completely isolated from viewport changes */ position: absolute !important; /* Parent (#hero) is fixed, so absolute is correct */ top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; /* Prevent layout shifts and contain rendering - but allow object-fit to work */ contain: layout style paint !important; /* Prevent any transitions or animations that could cause scaling */ transition: none !important; animation: none !important; /* Lock aspect ratio to prevent scaling */ aspect-ratio: unset !important; /* Prevent image from responding to any container size changes */ flex-shrink: 0 !important; flex-grow: 0 !important; } /* Hide CSS background on mobile since we're using img element */ #hero .hero-bg { display: none !important; } .hero-content { padding-top: 2rem !important; /* 32px - reduced from 6rem to minimize top spacing on mobile */ padding-bottom: var(--space-2) !important; /* Internal spacing - padding for hero content */ padding-inline-start: var(--space-3) !important; /* Internal spacing - padding for hero content */ padding-inline-end: var(--space-3) !important; /* Internal spacing - padding for hero content */ display: flex; flex-direction: column !important; /* Force vertical stacking on mobile */ align-items: flex-start; /* Use locked height - no viewport unit fallback */ min-height: var(--hero-initial-height); /* Use locked height to prevent address bar movement from affecting positioning */ height: var(--hero-initial-height); } /* Ensure direct children of hero-content can use grid on desktop */ .hero-content > div.flex.flex-col { width: 100%; flex-shrink: 0; } .hero-content > div { width: 100%; } /* Spacer divs for vertical centering - equal flex for balanced spacing */ .hero-content > div.flex-1 { flex: 1 1 0; min-height: 0; } /* Bottom spacer - slightly smaller to account for navbar being visually present */ .hero-content > div.hero-buttons-bottom-spacer { flex: 1 1 0; min-height: calc(80px + var(--space-3)); } .hero-content > div.grid { gap: var(--space-3) !important; /* External spacing - gap between grid items */ } /* Reduce spacing in left column on mobile */ #hero .hero-content > div > div.text-left > * + * { margin-top: var(--space-3) !important; /* External spacing - margin between elements */ } /* Reduce hero text container spacing */ .hero-text-container { gap: var(--space-3) !important; /* External spacing - gap between flex items */ } .hero-text-container > * + * { margin-top: var(--space-3) !important; /* External spacing - margin between elements */ } /* Reduce title size on mobile */ .hero-title { font-size: 2rem !important; /* 32px */ line-height: 1.1 !important; } .hero-title span.block { margin-top: var(--space-1) !important; /* External spacing - margin between title blocks */ } /* Reduce subtitle size on mobile */ .hero-subtitle { font-size: 0.875rem !important; /* 14px */ line-height: 1.4 !important; } .hero-subtitle span.block { margin-bottom: var(--space-2) !important; /* External spacing - margin below subtitle blocks */ } .hero-subtitle span.block:last-child { margin-bottom: 0 !important; /* No margin on last block */ } /* Reduce accent line and badge text */ .hero-accent-line { width: 4rem !important; height: 0.25rem !important; } .hero-text-content p { font-size: 0.625rem !important; /* 10px */ margin-top: var(--space-1) !important; /* External spacing - margin above paragraph */ margin-bottom: var(--space-1) !important; /* External spacing - margin below paragraph */ } /* Reduce button sizes on mobile */ .hero-primary-btn { padding: 1.25rem 1rem !important; /* Taller buttons: py-5 (1.25rem) px-4 (1rem) */ font-size: 0.875rem !important; min-width: 0 !important; /* Remove min-width constraint to allow narrower buttons */ max-width: 100% !important; /* Allow buttons to respect max-width constraints */ width: auto !important; } .hero-primary-btn svg { width: 1rem !important; height: 1rem !important; } /* Apply column layout to flex containers, but exclude Fast Pre-Approvals tagline */ #hero .hero-content > div > div.text-left > div.flex:not(.hero-fast-preapprovals) { gap: 0.5rem !important; flex-direction: column !important; } /* Ensure Fast Pre-Approvals tagline stays inline horizontally and centered */ #hero .hero-content > div > div.text-left > div.hero-fast-preapprovals { flex-direction: row !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 0.5rem !important; } /* Reduce trust indicators */ #hero .text-left > div.flex.items-center.justify-center { flex-direction: row !important; flex-wrap: nowrap !important; gap: var(--space-3) !important; /* External spacing - gap between trust indicators */ font-size: 0.75rem !important; margin-top: var(--space-2) !important; /* External spacing - margin above trust indicators */ } #hero .text-left > div.flex.items-center.justify-center svg { width: 0.875rem !important; height: 0.875rem !important; } /* Make quick actions box more compact */ .hero-quick-actions-box { padding: var(--space-3) !important; /* Internal spacing - padding for quick actions box */ margin-top: var(--space-2) !important; /* External spacing - margin above quick actions box */ } .hero-quick-actions-box .text-center { margin-bottom: var(--space-2) !important; /* External spacing - margin below center text */ } .hero-quick-actions-title { font-size: 0.875rem !important; margin-bottom: var(--space-1) !important; /* External spacing - margin below title (approx 0.125rem) */ } .hero-quick-actions-box p { font-size: 0.625rem !important; } .hero-quick-action-btn { padding: var(--space-2) !important; /* Internal spacing - padding for quick action button */ } .hero-quick-action-btn span.text-5xl { font-size: 1.75rem !important; margin-bottom: var(--space-1) !important; /* External spacing - margin below emoji */ } .hero-quick-action-text { font-size: 1.5rem !important; margin-bottom: 0 !important; line-height: 1.3 !important; } .hero-quick-action-btn span.text-xs { font-size: 0.5625rem !important; margin-top: 0 !important; line-height: 1.2 !important; } .hero-quick-actions-box .grid { gap: var(--space-1) var(--space-2) !important; /* External spacing - gap between grid items (approx 0.375rem) */ } /* On mobile, content wrapper blur is handled by base rule with !important flags */ /* No additional rules needed - base rule ensures consistency */ /* Dark mode content wrapper blur on mobile */ [data-theme="dark"] .content-wrapper { background-color: rgb(var(--color-neutral-900-rgb) / 0.75); backdrop-filter: blur(var(--blur-lg)) saturate(var(--backdrop-saturate)); } } .hero-text-content { position: relative; z-index: 1; } /* Hero Quick Actions Box */ /* Light mode: Match navbar styling for consistency */ .hero-quick-actions-box { background-color: rgb(255 255 255 / 0.65); border: 1px solid rgb(255 255 255 / 0.35); border-radius: var(--radius-2xl); position: relative; isolation: isolate; transition-property: background-color, border-color, box-shadow, transform, opacity; transition-duration: var(--animation-duration-long); transition-timing-function: var(--animation-easing); box-shadow: 0 8px 32px rgb(0 0 0 / 0.1), 0 4px 16px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.1) inset, 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 -1px 0 rgb(255 255 255 / 0.15) inset, 0 0 60px rgb(255 255 255 / 0.12); backdrop-filter: blur(var(--blur-lg)) saturate(var(--backdrop-saturate)); } /* Ensure backdrop-filter works properly on hero elements */ .hero-quick-actions-box, .hero-primary-btn, .hero-quick-action-btn { isolation: isolate; transform: translateZ(0); } /* Prevent text effects in Quick Actions */ .hero-quick-actions-box *, .hero-quick-actions-box .hero-quick-actions-title, .hero-quick-actions-box .hero-quick-action-text, .hero-quick-actions-box h3, .hero-quick-actions-box span { filter: none; } .hero-quick-actions-glow { background: radial-gradient(circle at 50% 0%, rgb(255 255 255 / 0.18) 0%, transparent 70%); opacity: 0.7; } .hero-quick-actions-title { color: rgb(var(--color-white-rgb)) !important; text-shadow: 0 2px 8px rgb(0 0 0 / 0.4); filter: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero-quick-action-btn { background-color: rgb(var(--color-primary-rgb) / 0.25); border: 1px solid rgb(var(--color-primary-rgb) / 0.4); position: relative; isolation: isolate; transform: translateZ(0); box-shadow: 0 4px 16px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(var(--color-primary-rgb) / 0.2) inset, 0 2px 0 rgb(255 255 255 / 0.1) inset; transition-property: all; transition-duration: var(--animation-duration-long); transition-timing-function: var(--animation-easing); backdrop-filter: blur(var(--blur-md)) saturate(var(--backdrop-saturate)); } .hero-quick-action-btn:hover { background-color: rgb(var(--color-primary-rgb) / 0.35); border-color: rgb(var(--color-primary-rgb) / 0.55); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(var(--color-primary-rgb) / 0.3) inset, 0 2px 0 rgb(255 255 255 / 0.15) inset, 0 0 20px rgb(var(--color-primary-rgb) / 0.2); transform: translateY(-2px) translateZ(0); } .hero-quick-action-btn:active { transform: translateY(0) scale(0.98) translateZ(0); } .hero-quick-action-text { color: rgb(var(--color-white-rgb)) !important; text-shadow: 0 1px 4px rgb(0 0 0 / 0.4); filter: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero-quick-actions-divider { border-color: rgb(255 255 255 / 0.35); } /* Dark theme - Hero Quick Actions */ /* Match navbar styling for consistency */ [data-theme="dark"] .hero-quick-actions-box { background-color: rgb(var(--color-neutral-900-rgb) / 0.65); border-color: rgb(255 255 255 / 0.12); transform: translateZ(0); isolation: isolate; transition-property: background-color, border-color, box-shadow, transform, opacity; transition-duration: var(--animation-duration-long); transition-timing-function: var(--animation-easing); box-shadow: 0 8px 32px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05) inset, 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 -1px 0 rgb(0 0 0 / 0.2) inset, 0 0 60px rgb(var(--color-primary-rgb) / 0.15); backdrop-filter: blur(var(--blur-lg)) saturate(var(--backdrop-saturate)); } [data-theme="dark"] .hero-quick-actions-glow { background: radial-gradient(circle at 50% 0%, rgb(var(--color-primary-rgb) / 0.2) 0%, transparent 70%); opacity: 0.8; } [data-theme="dark"] .hero-quick-actions-title { color: rgb(var(--color-white-rgb)) !important; text-shadow: 0 2px 8px rgb(0 0 0 / 0.5); } [data-theme="dark"] .hero-quick-action-btn { background-color: rgb(var(--color-primary-rgb) / 0.2); border: 1px solid rgb(var(--color-primary-rgb) / 0.35); position: relative; isolation: isolate; transform: translateZ(0); box-shadow: 0 4px 16px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(var(--color-primary-rgb) / 0.25) inset, 0 2px 0 rgb(255 255 255 / 0.08) inset; backdrop-filter: blur(var(--blur-md)) saturate(var(--backdrop-saturate)); } [data-theme="dark"] .hero-quick-action-btn:hover { background-color: rgb(var(--color-primary-rgb) / 0.3); border-color: rgb(var(--color-primary-rgb) / 0.5); box-shadow: 0 6px 20px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(var(--color-primary-rgb) / 0.35) inset, 0 2px 0 rgb(255 255 255 / 0.12) inset; } [data-theme="dark"] .hero-quick-action-text { color: rgb(var(--color-white-rgb)) !important; text-shadow: 0 1px 4px rgb(0 0 0 / 0.5); } [data-theme="dark"] .hero-quick-actions-divider { border-color: rgb(var(--color-neutral-400-rgb) / 0.3); } /* ========================================================================== Auth Pages (Signup/Signin) & Dashboard - Override fixed hero positioning ========================================================================== */ /* Auth pages and the client dashboard now use a separate hero and content body */ /* This prevents footer overlap and ensuring proper scrolling on all devices */ /* Target hero sections that are direct children of main (these pages) */ /* ONLY apply when using body.auth-page or body.dashboard-page class */ /* Ensure main element has no top spacing on auth pages */ body.auth-page main { margin-top: 0 !important; padding-top: 0 !important; } body.auth-page main > section#hero, body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { position: relative !important; height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 0.75rem !important; padding-top: 0 !important; /* No top padding - start at very top */ margin-top: 0 !important; /* No top margin */ align-items: flex-start !important; /* Align to top */ } /* Add more padding-top for auth/dashboard heroes on larger screens */ @media (min-width: 640px) { body.auth-page main > section#hero, body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { padding-top: 3rem !important; /* Reduced from 6rem to decrease gap between nav and welcome box */ min-height: 35vh !important; } /* Dashboard hero should fit content on medium screens too */ body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { min-height: auto !important; } } @media (min-width: 768px) { body.auth-page main > section#hero { padding-top: 6rem !important; min-height: 40vh !important; } /* Auth page hero content: reduced top padding on desktop only */ body.auth-page .hero-content { padding-top: 4rem !important; /* 64px - matches md:pt-16, reduced from mobile */ } /* Dashboard hero on desktop: only as tall as content needs */ body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { padding-top: 2rem !important; /* Reduced top padding on desktop to decrease gap */ padding-bottom: 2rem !important; /* Increased bottom padding on desktop */ min-height: auto !important; /* Fit content only */ height: auto !important; } /* Move welcome back box up slightly on desktop */ body.dashboard-page main > section#hero .hero-content .glass-card, body.profile-settings-page main > section#hero .hero-content .glass-card { margin-top: -1rem !important; } } /* Dashboard page specific hero adjustments */ body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { background-color: var(--color-bg-primary); } /* Ensure auth heroes have proper bottom padding */ @media (min-width: 640px) { body.auth-page main > section#hero { padding-bottom: 3rem !important; } } /* Ensure footer doesn't overlap on auth/dashboard pages */ body.auth-page main:has(> section#hero) + footer, body.dashboard-page main + footer, body.profile-settings-page main + footer { margin-top: 0 !important; position: relative; z-index: 1; } /* ========================================================================== Auth Pages - Static blur on background images (no scroll effect) ========================================================================== */ /* Apply static blur to background images on auth/dashboard pages ONLY */ /* This overrides any dynamic blur from scroll effects */ /* ONLY apply when using body.auth-page or body.dashboard-page class */ body.auth-page main > section#hero .hero-bg, body.dashboard-page main > section#hero .hero-bg, body.profile-settings-page main > section#hero .hero-bg { filter: blur(var(--blur-md)) saturate(130%) !important; -webkit-filter: blur(var(--blur-md)) saturate(130%) !important; transition: none !important; } body.auth-page main > section#hero .hero-bg-img, body.dashboard-page main > section#hero .hero-bg-img, body.profile-settings-page main > section#hero .hero-bg-img { filter: blur(var(--blur-md)) saturate(130%) !important; -webkit-filter: blur(var(--blur-md)) saturate(130%) !important; transition: none !important; } /* Ensure hero content opacity stays at 1 (no fade effect on scroll) */ /* ONLY apply when using body.auth-page or body.dashboard-page class */ body.auth-page main > section#hero .hero-content, body.dashboard-page main > section#hero .hero-content, body.profile-settings-page main > section#hero .hero-content { opacity: 1 !important; transition: none !important; /* Padding is handled by responsive rules below - don't override here */ padding-bottom: 0 !important; min-height: auto !important; } /* Make hero section scrollable for auth pages (form inside hero) */ body.auth-page main > section#hero { position: relative !important; height: auto !important; min-height: auto !important; /* Changed from 100vh/100svh to auto for proper scrolling */ max-height: none !important; /* Remove any max-height restrictions */ overflow: visible !important; } /* Dashboard hero: fit content on all screen sizes */ body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { position: relative !important; height: auto !important; min-height: auto !important; overflow: visible !important; } /* Desktop: Dashboard hero should only be as tall as its content */ @media (min-width: 768px) { body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { min-height: auto !important; } } /* Ensure background covers full hero height for auth pages */ body.auth-page main > section#hero .hero-bg, body.dashboard-page main > section#hero .hero-bg, body.profile-settings-page main > section#hero .hero-bg { position: absolute !important; height: 100% !important; min-height: 100% !important; } /* Dashboard hero background should fit content */ body.dashboard-page main > section#hero .hero-bg, body.profile-settings-page main > section#hero .hero-bg { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } body.auth-page main > section#hero .hero-bg-img, body.dashboard-page main > section#hero .hero-bg-img { position: absolute !important; /* On mobile, use locked height; on desktop, use 100% */ height: 100% !important; min-height: 100% !important; /* Prevent image from responding to container size changes on mobile */ -o-object-fit: cover !important; object-fit: cover !important; -o-object-position: center center !important; object-position: center center !important; /* Prevent any scaling or transformation */ transform: translateZ(0) scale(1) !important; -webkit-transform: translateZ(0) scale(1) !important; will-change: auto !important; transition: none !important; animation: none !important; } /* Dashboard hero background image should fit content */ body.dashboard-page main > section#hero .hero-bg-img { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } body.auth-page main > section#hero .hero-gradient-overlay, body.dashboard-page main > section#hero .hero-gradient-overlay { position: absolute !important; height: 100% !important; min-height: 100% !important; } /* Dashboard hero gradient overlay should fit content */ body.dashboard-page main > section#hero .hero-gradient-overlay { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } /* Desktop: Smooth transition for hero background */ @media (min-width: 768px) { body.auth-page main > section#hero .hero-bg::after, body.dashboard-page main > section#hero .hero-bg::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20%; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; } } /* ========================================================================== Sign Up Page - Two Column Layout Optimization ========================================================================== */ /* Optimize sign up page for 2019 MacBook Pro 16" viewport (~1728x1117px) */ /* Desktop: Optimize spacing for two-column layout */ @media (min-width: 768px) { body.auth-page main > section#hero .hero-content { padding-top: 3rem !important; /* Reduced top padding for compact fit */ padding-bottom: 1.5rem !important; /* Reduced bottom padding */ } /* Compact form card padding on signup page */ body.auth-page main > section#hero .glass-card { padding: 1.5rem !important; } /* Optimize benefits card spacing */ body.auth-page main > section#hero .glass-card h2 { font-size: 1.5rem !important; line-height: 1.3 !important; } body.auth-page main > section#hero .glass-card p { font-size: 0.875rem !important; } body.auth-page main > section#hero .glass-card ul { margin-top: 0.75rem !important; } body.auth-page main > section#hero .glass-card li { font-size: 0.875rem !important; } } /* Large desktop: Optimize for MacBook Pro 16" specifically */ @media (min-width: 1024px) and (max-width: 1920px) { body.auth-page main > section#hero .hero-content { padding-top: 2.5rem !important; padding-bottom: 2rem !important; } body.auth-page main > section#hero .glass-card { padding: 2rem !important; } /* Slightly larger text on larger viewports */ body.auth-page main > section#hero .glass-card h2 { font-size: 1.75rem !important; } body.auth-page main > section#hero .glass-card li { font-size: 0.9375rem !important; } } /* Mobile optimizations for auth pages */ @media (max-width: 767px) { body.auth-page main > section#hero, body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { /* Use locked height variable to prevent address bar movement from affecting hero */ min-height: auto !important; /* Changed from 100dvh to auto to allow proper scrolling */ height: auto !important; /* Ensure height is auto for proper scrolling */ max-height: none !important; /* Remove any max-height restrictions */ margin-bottom: 0 !important; /* Remove margin, let padding handle spacing */ margin-top: 0 !important; /* No top margin */ padding-bottom: 0 !important; /* Remove padding-bottom, let hero-content handle it */ padding-top: 0 !important; /* No top padding - start at very top */ } /* Dashboard hero should fit content on mobile too */ body.dashboard-page main > section#hero, body.profile-settings-page main > section#hero { min-height: auto !important; padding-bottom: 1.5rem !important; /* Reduced padding for tighter spacing */ padding-top: 1.5rem !important; /* Reduced top padding on mobile to decrease gap */ } body.auth-page main > section#hero .hero-content, body.dashboard-page main > section#hero .hero-content, body.profile-settings-page main > section#hero .hero-content { padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important; /* Minimal top padding for safe area only */ padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important; /* Reduced bottom padding to minimize gap to theme toggle */ margin-top: 0 !important; /* Ensure no top margin */ min-height: auto !important; max-height: none !important; align-items: flex-start !important; justify-content: flex-start !important; } /* Reduce bottom padding for dashboard hero content */ /* Mobile: navbar is at bottom, so minimal top padding needed - just match bottom padding visual */ body.dashboard-page main > section#hero .hero-content, body.profile-settings-page main > section#hero .hero-content { padding-bottom: 2rem !important; /* Reduced from 6rem for tighter spacing */ padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important; /* Slightly reduced padding on mobile */ } /* Lock hero image dimensions on mobile to prevent scaling when address bar moves */ body.auth-page main > section#hero .hero-bg-img, body.dashboard-page main > section#hero .hero-bg-img { /* CRITICAL: Lock image height to prevent scaling when address bar moves */ height: var(--hero-initial-height, 100dvh) !important; min-height: var(--hero-initial-height, 100dvh) !important; max-height: var(--hero-initial-height, 100dvh) !important; width: 100% !important; max-width: 100% !important; /* Prevent image from responding to container size changes */ -o-object-fit: cover !important; object-fit: cover !important; -o-object-position: center center !important; object-position: center center !important; /* Force hardware acceleration and prevent repaints */ transform: translateZ(0) scale(1) !important; -webkit-transform: translateZ(0) scale(1) !important; /* Prevent any scaling or transformation */ will-change: auto !important; box-sizing: border-box !important; /* Prevent layout shifts and contain rendering */ contain: layout style paint !important; /* Prevent any transitions or animations that could cause scaling */ transition: none !important; animation: none !important; /* Lock aspect ratio to prevent scaling */ aspect-ratio: unset !important; flex-shrink: 0 !important; flex-grow: 0 !important; /* Smooth transition: fade out hero background at bottom */ mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); } /* Lock gradient overlay to match hero image height */ body.auth-page main > section#hero .hero-gradient-overlay, body.dashboard-page main > section#hero .hero-gradient-overlay { height: var(--hero-initial-height, 100dvh) !important; min-height: var(--hero-initial-height, 100dvh) !important; max-height: var(--hero-initial-height, 100dvh) !important; /* Smooth transition: fade out hero background at bottom */ mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); } } /* Desktop: Ensure hero content accounts for navbar */ @media (min-width: 768px) { body.auth-page main > section#hero .hero-content { padding-top: 2rem !important; /* Reduced from 7rem to decrease gap between nav and welcome box */ } body.dashboard-page main > section#hero .hero-content, body.profile-settings-page main > section#hero .hero-content { padding-top: 4.5rem !important; /* Slightly reduced from 6rem - accounts for navbar height (~96px) plus spacing */ } } /* ========================================================================== Qualification Page - Override fixed hero positioning ========================================================================== */ /* Qualification page should not use fixed positioning - needs normal document flow */ /* This prevents footer overlap on qualification page */ body.qualification-page main > section#hero { position: relative !important; height: auto !important; min-height: 100vh; min-height: 100svh; overflow: visible !important; padding-bottom: var(--space-12) !important; padding-top: 4rem !important; /* Add top padding to clear navbar - mobile */ align-items: center !important; /* Center content vertically */ } /* Add more padding-top for qualification page on larger screens */ @media (min-width: 640px) { body.qualification-page main > section#hero { padding-top: 5rem !important; /* 80px */ } } @media (min-width: 768px) { body.qualification-page main > section#hero { padding-top: 6rem !important; /* 96px */ } } @media (min-width: 1024px) { body.qualification-page main > section#hero { padding-top: 7rem !important; /* 112px */ } } /* Ensure qualification page has proper bottom padding to prevent footer overlap */ @media (min-width: 640px) { body.qualification-page main > section#hero { padding-bottom: var(--space-16) !important; } } @media (min-width: 1024px) { body.qualification-page main > section#hero { padding-bottom: var(--space-20) !important; } } /* Ensure footer doesn't overlap on qualification page */ body.qualification-page main:has(> section#hero) { margin-bottom: 0; } body.qualification-page main:has(> section#hero) + footer { margin-top: 0 !important; position: relative; z-index: 1; } /* Remove content-wrapper margin-top on qualification page since hero is relative */ body.qualification-page .content-wrapper { margin-top: 0 !important; } /* Ensure content sections on qualification page have proper background and positioning */ body.qualification-page main > section.parallax-section { position: relative; z-index: 1; background-color: rgb(202 213 229 / 0.75); } [data-theme="dark"] body.qualification-page main > section.parallax-section { background-color: rgb(var(--color-neutral-900-rgb) / 0.75); } /* Apply static blur to background images on qualification page */ body.qualification-page main > section#hero .hero-bg { filter: blur(var(--blur-md)) saturate(130%) !important; -webkit-filter: blur(var(--blur-md)) saturate(130%) !important; transition: none !important; } body.qualification-page main > section#hero .hero-bg-img { filter: blur(var(--blur-md)) saturate(130%) !important; -webkit-filter: blur(var(--blur-md)) saturate(130%) !important; transition: none !important; } /* Ensure hero content opacity stays at 1 (no fade effect on scroll) */ body.qualification-page main > section#hero .hero-content { opacity: 1 !important; transition: none !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: calc(100vh - 4rem) !important; /* Account for navbar padding */ } /* Adjust min-height for larger screens to account for navbar padding */ @media (min-width: 640px) { body.qualification-page main > section#hero .hero-content { min-height: calc(100vh - 5rem) !important; /* Account for 80px navbar padding */ } } @media (min-width: 768px) { body.qualification-page main > section#hero .hero-content { min-height: calc(100vh - 6rem) !important; /* Account for 96px navbar padding */ } } @media (min-width: 1024px) { body.qualification-page main > section#hero .hero-content { min-height: calc(100vh - 7rem) !important; /* Account for 112px navbar padding */ } } /* Ensure inner content div is centered on qualification page */ body.qualification-page main > section#hero .hero-content > div { width: 100% !important; max-width: 100% !important; display: block !important; text-align: center !important; } /* ========================================================================== Homepage Scroll to Top Button - Positioned next to hero title ========================================================================== */ .homepage-scroll-to-top-btn { position: absolute; top: 0; left: 100%; /* Position to the right of the title container */ margin-left: 1.5rem; /* Add spacing from the title */ z-index: 10; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; display: none; /* Hidden by default, shown on desktop */ align-items: center; justify-content: center; background: rgb(255 255 255 / 0.7); border: 1px solid rgb(255 255 255 / 0.3); box-shadow: 0 4px 20px rgb(0 0 0 / 0.15), 0 2px 8px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.5); /* Use CSS variable for brand-aware colors */ color: var(--color-secondary); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.8); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s, background 0.3s ease, box-shadow 0.3s ease; -webkit-tap-highlight-color: transparent; } /* Kiss Mortgage - Use primary blue for scroll-to-top button (light mode only) */ [data-app="kiss-mortgage"]:not([data-theme="dark"]) .homepage-scroll-to-top-btn { color: var(--color-primary); /* #05668d */ } /* Show on desktop only where there's space to the right */ @media (min-width: 768px) { .homepage-scroll-to-top-btn { display: flex; } } /* Adjust spacing for larger screens */ @media (min-width: 1024px) { .homepage-scroll-to-top-btn { margin-left: 2rem; } } @media (min-width: 1280px) { .homepage-scroll-to-top-btn { margin-left: 2.5rem; } } .homepage-scroll-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s, background 0.3s ease, box-shadow 0.3s ease; } .homepage-scroll-to-top-btn:hover { background: rgb(255 255 255 / 0.85); box-shadow: 0 6px 24px rgb(0 0 0 / 0.2), 0 3px 10px rgb(0 0 0 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.6); transform: translateY(-2px) scale(1.05); } .homepage-scroll-to-top-btn:active { transform: translateY(0) scale(0.95); background: rgb(255 255 255 / 0.9); } .homepage-scroll-to-top-btn:focus-visible { /* Use CSS variable for brand-aware colors */ outline: 2px solid rgb(var(--color-secondary-rgb) / 0.5); outline-offset: 2px; } /* Kiss Mortgage - Blue focus outline */ [data-app="kiss-mortgage"] .homepage-scroll-to-top-btn:focus-visible { outline: 2px solid rgb(var(--color-primary-rgb) / 0.5); } /* Kiss Mortgage - Blue in dark mode */ body[data-app="kiss-mortgage"][data-theme="dark"] .homepage-scroll-to-top-btn, [data-app="kiss-mortgage"][data-theme="dark"] .homepage-scroll-to-top-btn { color: rgb(91 163 255) !important; /* Lighter blue for dark mode - #5ba3ff */ } .homepage-scroll-to-top-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; display: block; margin: 0; flex-shrink: 0; } /* Global scroll-to-top button now appears on all pages including homepage */ /*# sourceMappingURL=b11e40e0ac4ce1d0.css.map*/