/** * Foundation Layer - Core Design Tokens & Base Styles * * ============================================================================ * ITCSS LAYER: FOUNDATION (01) * ============================================================================ * * This layer contains all foundational design elements including: * - Font imports and @font-face declarations * - Responsive breakpoint definitions * - Core design system variables (colors, typography, spacing) * - Base element styles with variable references * - Responsive variable overrides * * CONSOLIDATED FROM: * - assets/css/variables.css (Core design tokens and base styles) * - assets/css/breakpoints.css (Responsive breakpoint definitions) * * LOAD ORDER: First (after external dependencies like Bootstrap) * DEPENDENCIES: None (foundation layer) * DEPENDENTS: All other CSS files depend on these variables and breakpoints */ /* ============================================================================ * FONT IMPORTS & @FONT-FACE DECLARATIONS * ============================================================================ */ @font-face { font-family: 'Icons Realtor Template'; src: url('https://uploads-ssl.webflow.com/649f1b5831e1f1e01693f73f/649f1b5831e1f1e01693f8b5_icons-realtor-template.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================================ * RESPONSIVE BREAKPOINT DEFINITIONS * ============================================================================ * * BREAKPOINT STRATEGY: * This system defines consistent breakpoint values across all responsive files * and establishes the foundation for future mobile-first migration. * * CURRENT APPROACH: Desktop-First (maintained for compatibility) * - Base: Desktop default (no media query) - 1400px+ * - Large Desktop: min-width 1400px * - Desktop: 1200px-1399px * - Tablet Landscape: 992px-1199px * - Tablet Portrait: 768px-991px * - Mobile: max-width 767px * - Small Mobile: max-width 576px */ :root { /* === BREAKPOINT DEFINITIONS === * Centralized responsive breakpoint system * All breakpoint variables are defined here (--breakpoint-*) * Used by: responsive.css, mobile-consolidated.css, and component files * Note: This is the single source of truth for all breakpoints after optimization */ --breakpoint-mobile-max: 767px; --breakpoint-small-mobile-max: 576px; --breakpoint-tablet-min: 768px; --breakpoint-tablet-max: 991px; --breakpoint-tablet-landscape-min: 992px; --breakpoint-tablet-landscape-max: 1199px; --breakpoint-desktop-min: 1200px; --breakpoint-desktop-max: 1399px; --breakpoint-large-desktop-min: 1400px; /* === RESPONSIVE SPACING === */ --space-header-height-tablet: 80px; --space-header-height-desktop: 90px; /* ============================================================================ * CORE DESIGN SYSTEM VARIABLES * ============================================================================ */ /* === COLOR SYSTEM === */ --color-primary: #000a4a; --color-primary-rgb: 0, 10, 74; --color-accent: #f85757; --color-accent-rgb: 248, 87, 87; --color-text-primary: #000; --color-text-secondary: #222223; --color-text-tertiary: #616066; --color-text-muted: #8d8d91; --color-bg-primary: #fff; --color-bg-secondary: #f8f9fa; --color-bg-tertiary: #e9e9e9; --color-overlay-light: rgba(0, 0, 0, 0.05); --color-border-primary: #e9e9e9; /* === BORDER SYSTEM === */ /* 2-Tier Border Thickness Hierarchy */ --border-width-structural: 1px; /* Cards, forms, containers */ --border-width-interactive: 2px; /* Buttons, clickable elements */ --border-width-emphasis: 2px; /* Decorative accents, status */ /* Border Color System */ --border-color-primary: var(--color-primary); --border-color-secondary: var(--color-border-primary); --border-color-accent: var(--color-accent); --border-color-hover: var(--color-accent); /* Universal hover color */ --border-color-focus: var(--color-accent); /* Universal focus color */ /* === SPACING SYSTEM === */ --space-xs-quarter: 1px; --space-xs-half: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 48px; --space-card-shadow: 10px; --shadow-margin-multiplier-desktop: 1.6; /* Desktop: 1.6x blur radius + buffer */ --shadow-margin-multiplier-tablet: 1.4; /* Tablet: 1.4x blur radius + buffer */ --shadow-margin-multiplier-mobile: 1.2; /* Mobile: 1.2x blur radius + buffer */ --space-header-height: 80px; --space-header-height-mobile: 70px; --space-header-padding-vertical: 8px; --space-nav-item-padding: 8px; --space-header-height-compact: 60px; --space-admin-bar-desktop: 32px; --space-admin-bar-mobile: 46px; --touch-target-min-height: 44px; /* === BORDER RADIUS SYSTEM === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; /* === SHADOW SYSTEM === */ --shadow-sm: 0 3px 20px 0 rgba(8, 15, 52, .06); --shadow-md: 0 6px 12px rgba(0, 0, 0, .175); /* === TYPOGRAPHY SYSTEM === */ --font-family-primary: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-property-title: 21px; --font-size-2xl: 24px; --font-size-2xl-plus: 28px; /* New - fills gap between 24px and 32px */ --font-size-3xl: 32px; --font-size-3xl-plus: 36px; /* New - for tablet responsive scaling */ --font-size-4xl: 48px; --body-text-primary: var(--font-size-lg); /* 18px - Main content paragraphs */ --body-text-secondary: var(--font-size-md); /* 16px - Supporting content, navigation */ --body-text-small: var(--font-size-sm); /* 14px - Captions, metadata, reviews */ --body-text-fine-print: var(--font-size-xs); /* 12px - Legal disclaimers, form validation */ --review-text-size: var(--body-text-small); /* 14px - Standardize review content */ --timestamp-text-size: 13px; /* 13px - Review timestamps (between 12px and 14px) */ --ui-text-size: 15px; /* 15px - UI elements like cookie buttons */ --navigation-text-size: var(--font-size-xl); /* 20px - Navigation links */ --rating-text-size: 21px; /* 21px - Google ratings display */ --heading-size-h1: var(--font-size-4xl); /* 48px */ --heading-size-h2: var(--font-size-3xl); /* 32px */ --heading-size-h3: var(--font-size-2xl); /* 24px */ --heading-size-h4: var(--font-size-xl); /* 20px */ --heading-size-h5: var(--font-size-lg); /* 18px */ --heading-size-h6: var(--font-size-md); /* 16px */ --font-size-property-title-mobile: 28px; --font-size-property-h2-mobile: 20px; --font-size-property-h3-mobile: 18px; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --body-line-height-primary: 1.6; /* Main content readability */ --body-line-height-secondary: 1.5; /* Supporting content */ --body-line-height-small: 1.4; /* Small text compactness */ --body-line-height-fine-print: 1.3; /* Fine print compactness */ --heading-color-primary: var(--color-primary); --heading-color-accent: var(--color-accent); --heading-color-muted: var(--color-text-muted); --heading-margin-top: 0; --heading-margin-bottom: 1.5rem; --heading-line-height-tight: 1.15; --heading-line-height-h1: 1.2; --heading-line-height-h2: 1.3; --heading-line-height-h3: 1.4; --heading-line-height-normal: 1.4; --heading-line-height-small: 1.4; --bs-gutter-x: 1.5rem; /* === MOBILE SPACING SYSTEM === */ --space-mobile-section-sm: 60px; --space-mobile-section: 60px; --space-mobile-section-lg: 100px; --space-mobile-property-banner: 40px; --space-mobile-property-section: 60px; --space-mobile-property-section-lg: 80px; --space-mobile-property-details: 50px; --space-mobile-content: 24px; --space-mobile-content-lg: 40px; --space-mobile-paragraph: 16px; --space-mobile-container: 2rem; --space-mobile-container-sm: 1.5rem; --space-mobile-section-gap: 32px; --space-mobile-section-gap-lg: 64px; /* === CARD SYSTEM VARIABLES === */ --card-padding-sm: 0.75rem; --card-padding: 1.25rem; --card-padding-lg: 2rem; --card-padding-xl: 2.5rem; --card-radius-sm: var(--radius-sm); --card-radius: var(--radius-2xl); --card-radius-lg: var(--radius-lg); --card-radius-xl: var(--radius-xl); --card-image-radius: 5px; --card-shadow-sm: var(--shadow-sm); --card-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12); --card-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10); --card-shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.3); --card-bg: var(--color-bg-primary); --card-bg-hover: var(--color-bg-secondary); --card-border-color: var(--color-border-primary); --card-text-color: var(--color-text-primary); --card-text-muted: var(--color-text-muted); --card-gap: var(--space-md); --card-gap-lg: var(--space-lg); --card-gap-xl: var(--space-xl); --card-grid-cols-mobile: 1; --card-grid-cols-tablet: 2; --card-grid-cols-desktop: 3; --card-grid-cols-wide: 4; --card-grid-min-width: 300px; --card-grid-min-width-sm: 250px; --card-margin-bottom: 25px; /* For default --card-shadow (4px 4px 10px) - 1.6x blur + 5px buffer */ --card-margin-bottom-sm: 37px; /* For --card-shadow-sm (0 3px 20px 0) - 1.6x blur + 5px buffer */ --card-margin-bottom-lg: 53px; /* For --card-shadow-lg (0 10px 30px 0) - 1.6x blur + 5px buffer */ --card-margin-bottom-xl: 69px; /* For --card-shadow-xl (0 20px 40px 0) - 1.6x blur + 5px buffer */ --card-icon-size-sm: 16px; --card-icon-size: 24px; --card-icon-size-lg: 32px; --card-content-gap: 15px; --card-badge-padding: 12px 22px; --card-inner-padding: 40px; --card-compact-padding: 30px; --card-dream-padding: 50px 38px; --card-badge-radius: 60px; --card-special-radius: 24px; --card-city-partial-radius: 24px 0 0 24px; --card-overlay-text: #fff; --card-text-size: 16px; --card-subtitle-size: 22px; --card-text-line-height: 1.6; --card-excerpt-words: 25; /* Used for Ellis Presents excerpt length */ --card-image-aspect-mobile: 4/3; /* 4:3 aspect ratio for mobile */ --card-image-aspect-tablet: 16/9; /* 16:9 aspect ratio for tablet */ --card-image-aspect-desktop: 16/10; /* 16:10 aspect ratio for desktop */ --card-image-aspect-natural: auto; /* Natural aspect ratio for images */ --card-image-height-natural: auto; /* Natural height for images */ /* === LAYOUT VARIABLES === */ --layout-content-max-width: 70%; /* === BLOG SYSTEM VARIABLES === */ --blog-hero-padding: var(--space-3xl) 0; --blog-hero-padding-mobile: var(--space-2xl) 0; --blog-hero-content-gap: var(--space-xl); --blog-title-size: clamp(28px, 4vw, 42px); --blog-title-weight: var(--font-weight-bold); --blog-title-line-height: 1.2; --blog-excerpt-size: var(--font-size-lg); --blog-meta-size: var(--font-size-sm); --blog-image-aspect-ratio: 16/10; --blog-image-border-radius: var(--radius-xl); --blog-image-shadow: var(--card-shadow-lg); --breadcrumb-font-size: var(--font-size-sm); --breadcrumb-separator-color: var(--color-text-muted); --social-link-size: 40px; --social-link-border-radius: var(--radius-md); --social-link-gap: var(--space-sm); /* === BADGE SYSTEM VARIABLES === */ --badge-buyer-questions: #28a745; --badge-seller-questions: #007bff; --badge-market-insights: #6f42c1; --badge-default: var(--color-text-muted); --badge-featured: #dc3545; --badge-primary: #dc3545; --badge-secondary: #6c757d; --badge-font-size: 0.75rem; --badge-padding-vertical: 0.25rem; --badge-padding-horizontal: 0.5rem; --badge-font-weight: 500; --badge-border-radius: var(--radius-sm); --badge-text-color: #fff; --card-featured-image-height-desktop: 415px; --card-featured-image-height-tablet: 320px; --card-featured-image-height-mobile: 240px; } /* ============================================================================ * BASE ELEMENT STYLES * ============================================================================ */ /** * Base heading styles provide fallback when utility classes aren't used. * Component-specific styling is handled in typography layer */ h1, h2, h3, h4, h5, h6 { color: var(--heading-color-primary); margin-top: var(--heading-margin-top); margin-bottom: var(--heading-margin-bottom); font-family: var(--font-family-primary); } h1 { font-size: var(--heading-size-h1); font-weight: var(--font-weight-bold); line-height: var(--heading-line-height-tight); } h2 { font-size: var(--heading-size-h2); font-weight: var(--font-weight-semibold); line-height: var(--heading-line-height-normal); } h3 { font-size: var(--heading-size-h3); font-weight: var(--font-weight-semibold); line-height: var(--heading-line-height-normal); } h4 { font-size: var(--heading-size-h4); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); } h5 { font-size: var(--heading-size-h5); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); } h6 { font-size: var(--heading-size-h6); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); } p { font-size: var(--body-text-primary); margin-bottom: 15px; line-height: var(--body-line-height-primary); } p:last-child { margin-bottom: 0; } img { max-width: 100%; height: auto; } /* === THEME-SPECIFIC TYPOGRAPHY OVERRIDES === */ body.theme-pt h1, body.theme-pt .section-title h1, body.theme-pt .card .card-body h1, body.theme-pt article h1, body.theme-pt section h1 { font-size: var(--heading-size-h1) !important; line-height: var(--heading-line-height-tight) !important; } body.theme-pt h2, body.theme-pt .section-title h2, body.theme-pt .card .card-body h2, body.theme-pt .card-featured h2, body.theme-pt .latest-posts h2, body.theme-pt article h2, body.theme-pt section h2 { font-size: var(--heading-size-h2) !important; font-weight: var(--font-weight-semibold) !important; color: var(--heading-color-primary); line-height: var(--heading-line-height-h2) !important; } body.theme-pt h3, body.theme-pt .section-title h3, body.theme-pt .card .card-body h3, body.theme-pt .card.card-ellis-presents .card-body h3, body.theme-pt .card-title, body.theme-pt article h3, body.theme-pt section h3 { font-size: var(--heading-size-h3) !important; font-weight: var(--font-weight-semibold) !important; color: var(--heading-color-primary) !important; line-height: var(--heading-line-height-h3) !important; } body.theme-pt h4, body.theme-pt .section-title h4, body.theme-pt .card .card-body h4, body.theme-pt article h4, body.theme-pt section h4 { font-size: var(--heading-size-h4) !important; font-weight: var(--font-weight-medium) !important; line-height: var(--heading-line-height-small) !important; } body.theme-pt h5, body.theme-pt .section-title h5, body.theme-pt .card .card-body h5 { font-size: var(--heading-size-h5) !important; line-height: var(--heading-line-height-small) !important; } body.theme-pt h6, body.theme-pt .section-title h6, body.theme-pt .card .card-body h6 { font-size: var(--heading-size-h6) !important; line-height: var(--heading-line-height-small) !important; } body.theme-pt p:not(.card p):not(.wp-google-feedback):not(.fine-print), body.theme-pt .hero-content p, body.theme-pt .content-section p, body.theme-pt .informed-consumers p, body.theme-pt .text-content p, body.theme-pt .main-content p { font-size: var(--body-text-primary) !important; line-height: var(--body-line-height-primary) !important; } body.theme-pt .nav-link, body.theme-pt .navbar-nav .nav-link, body.theme-pt .supporting-text, body.theme-pt .card-text, body.theme-pt .card p, body.theme-pt .card-body p, body.theme-pt .card-property p, body.theme-pt .card-ellis-presents p, body.theme-pt .card-experience p, body.theme-pt .shortIntro { font-size: var(--body-text-secondary) !important; line-height: var(--body-line-height-secondary) !important; } body.theme-pt .wp-google-feedback, body.theme-pt .grw-review .wp-google-feedback, body.theme-pt .review-content, body.theme-pt .card-meta, body.theme-pt .card-meta span, body.theme-pt .card-meta .text-muted, body.theme-pt .card-meta .badge, body.theme-pt .metadata { font-size: var(--body-text-small) !important; line-height: var(--body-line-height-small) !important; } body.theme-pt .wp-google-time, body.theme-pt .timestamp, body.theme-pt .chat-timestamp { font-size: var(--timestamp-text-size) !important; line-height: var(--body-line-height-small) !important; } body.theme-pt .wp-google-powered, body.theme-pt .btn_policies, body.theme-pt .ui-text { font-size: var(--ui-text-size) !important; line-height: var(--body-line-height-secondary) !important; } body.theme-pt mw-messages-form-error, body.theme-pt .form-validation, body.theme-pt .legal-text, body.theme-pt .fine-print { font-size: var(--body-text-fine-print) !important; line-height: var(--body-line-height-fine-print) !important; } body.theme-pt .mc4wp-form label, body.theme-pt .mc4wp-form-197 label, body.theme-pt .subscribe-form .mc4wp-form label, body.theme-pt footer .mc4wp-form label, body.theme-pt .subscribe-form label, body.theme-pt .mc4wp-form-fields p label, body.theme-pt .mc4wp-form.mc4wp-form-197 label { font-size: var(--body-text-small) !important; line-height: var(--body-line-height-secondary) !important; } body.theme-pt .wpml-ls-link, body.theme-pt .wp-google-name, body.theme-pt .navigation-text, body.theme-pt .grw-review .wp-google-name, body.theme-pt .wp-google-left .wp-google-name, body.theme-pt .grw-review-inner .wp-google-name { font-size: var(--navigation-text-size) !important; line-height: var(--body-line-height-secondary) !important; } body.theme-pt .wp-google-rating { font-size: var(--rating-text-size) !important; line-height: var(--body-line-height-secondary) !important; } /* ============================================================================ * RESPONSIVE VARIABLE OVERRIDES * ============================================================================ */ @media (min-width: 768px) and (max-width: 991px) { :root { --heading-size-h1: 40px; /* Between 32px mobile and 48px desktop */ --heading-size-h2: 32px; /* Maintain desktop size for good hierarchy */ --heading-size-h3: 26px; /* Between 22px mobile and 24px desktop */ --heading-size-h4: 21px; /* Between 18px mobile and 20px desktop */ --heading-size-h5: 18px; /* Keep desktop size */ --heading-size-h6: 16px; /* Keep desktop size */ --card-margin-bottom: 23px; /* Tablet: 1.4x blur + 4px buffer */ --card-margin-bottom-sm: 32px; /* Tablet: 1.4x blur + 4px buffer */ --card-margin-bottom-lg: 46px; /* Tablet: 1.4x blur + 4px buffer */ --card-margin-bottom-xl: 60px; /* Tablet: 1.4x blur + 4px buffer */ } } @media (max-width: 767px) { :root { --heading-size-h1: 32px; /* Readable but impactful */ --heading-size-h2: 26px; /* Clear differentiation from H1 (6px difference) */ --heading-size-h3: 22px; /* Clear differentiation from H2 (4px difference) */ --heading-size-h4: 18px; /* Clear differentiation from H3 (4px difference) */ --heading-size-h5: 16px; /* Equal to body text but with weight difference */ --heading-size-h6: 14px; /* Smaller than body text */ --card-margin-bottom: 21px; /* Mobile: 1.2x blur + 3px buffer */ --card-margin-bottom-sm: 27px; /* Mobile: 1.2x blur + 3px buffer */ --card-margin-bottom-lg: 39px; /* Mobile: 1.2x blur + 3px buffer */ --card-margin-bottom-xl: 51px; /* Mobile: 1.2x blur + 3px buffer */ } } /* ============================================================================ * BREAKPOINT USAGE GUIDELINES * ============================================================================ * * DESKTOP-FIRST MEDIA QUERIES (Current Implementation): * * 1. Extra Large Desktop (1400px+): * @media only screen and (min-width: 1400px) { } * * 2. Large Desktop Range (1200px-1399px): * @media only screen and (min-width: 1200px) and (max-width: 1399px) { } * * 3. Tablet Landscape Range (992px-1199px): * @media only screen and (min-width: 992px) and (max-width: 1199px) { } * * 4. Tablet Portrait & Mobile Range (max-width: 991px): * @media only screen and (max-width: 991px) { } * * 5. Tablet Portrait Range (768px-991px): * @media only screen and (min-width: 768px) and (max-width: 991px) { } * * 6. Mobile Range (max-width: 767px): * @media only screen and (max-width: 767px) { } * * 7. Small Mobile Range (max-width: 576px): * @media only screen and (max-width: 576px) { } * * CRITICAL: Ensure no overlapping ranges to prevent cascade conflicts * * ============================================================================ * MOBILE-FIRST MIGRATION PATH (Future Implementation) * ============================================================================ * * When migrating to mobile-first, use these patterns: * * 1. Mobile Base (no media query - default) * 2. Small Tablet: @media (min-width: 576px) { } * 3. Tablet Portrait: @media (min-width: 768px) { } * 4. Tablet Landscape: @media (min-width: 992px) { } * 5. Desktop: @media (min-width: 1200px) { } * 6. Large Desktop: @media (min-width: 1400px) { } * * MIGRATION BENEFITS: * - Smaller CSS bundle size (mobile styles as base) * - Better performance on mobile devices * - Progressive enhancement approach * - Cleaner cascade with minimal overrides * * MIGRATION STRATEGY: * 1. Start with new components using mobile-first * 2. Gradually refactor existing components * 3. Test thoroughly at each breakpoint * 4. Maintain backward compatibility during transition */