/** * PNK Group Global Color Scheme Variables * * This file defines all CSS custom properties (variables) for the site's color scheme. * Changing these values will update colors site-wide across all templates. * * These are default values. Actual colors can be customized via: * - WordPress Customizer (Appearance > Customize > PNK Color Scheme) * - ACF Options Page (Appearance > Color Scheme Settings) * * @package PNK_Group * @since 2.0.0 */ :root { /* ========================================== Z-INDEX SCALE ============================================ Use these values for consistent layering. Never use arbitrary z-index values! ============================================ IMPORTANT: If elements overlap incorrectly, DO NOT just increase z-index randomly. Instead: 1. Check this scale to see where element should be 2. Use the appropriate variable 3. If you need a new layer, add it here with a comment 4. Update this documentation ============================================ */ /* Base content layer - Regular content, cards, sections */ --z-base: 1; /* Slightly elevated - Dropdowns, tooltips, popovers */ --z-dropdown: 100; /* Mobile overlay - Slides under header */ --z-mobile-menu: 999; /* Fixed navigation elements */ --z-header: 1002; --z-top-panel: 1003; /* Must be above header */ /* Overlays and modals */ --z-overlay: 9998; --z-modal: 9999; /* Emergency top layer - Only for critical UI (notifications, alerts) */ --z-emergency: 10000; /* ========================================== MOBILE LAYOUT VARIABLES Mobile-specific spacing, dimensions, timing ========================================== */ --mobile-header-height: 56px; --mobile-menu-width: 100%; --touch-target-min: 44px; /* Mobile Spacing Scale */ --mobile-spacing-xs: 8px; --mobile-spacing-sm: 12px; --mobile-spacing-md: 20px; --mobile-spacing-lg: 32px; --mobile-spacing-xl: 48px; /* Mobile Typography */ --mobile-font-size-base: 16px; --mobile-font-size-sm: 14px; --mobile-font-size-lg: 18px; --mobile-line-height: 1.5; /* Mobile-Specific Colors */ --color-mint: #e8f2f0; --mobile-menu-bg: var(--color-mint); --mobile-menu-footer-bg: #2b2b2b; --mobile-overlay-bg: rgba(0, 0, 0, 0.5); /* Animation */ --mobile-transition-speed: 300ms; --mobile-transition-easing: ease-in-out; /* ========================================== PRIMARY BRAND COLORS Used for business model cards, key sections, CTAs ========================================== */ /* Primary Blue - Investor cards, timeline, primary CTAs */ --brand-primary-blue: #2B488D; /* Primary Orange - Developer cards, subscribe button, accents */ --brand-primary-orange: #D87F45; /* Dark Gray - Engineering cards, headings, dark text */ --brand-dark-gray: #3D4959; /* Light Blue-Gray - Production cards, light backgrounds */ --brand-light-blue-gray: #DDE5F0; /* Mid Blue-Gray - General Contractor cards, header backgrounds */ --brand-mid-blue-gray: #5C7B92; /* ========================================== COMMON GRAY SCALE Shared gray colors used across components ========================================== */ --color-white: #ffffff; --color-gray-100: #f8f9fa; --color-gray-200: #e9ecef; --color-gray-500: #adb5bd; --color-gray-700: #54565a; --color-gray-900: #2b2b2b; --color-black: #404040; /* ========================================== TYPOGRAPHY Font families and text styling ========================================== */ --font-sans: 'Lato', sans-serif; /* ========================================== SPACING SCALE (Desktop) Standard spacing units for layout ========================================== */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 2rem; /* 32px */ --spacing-xl: 3rem; /* 48px */ --spacing-2xl: 4rem; /* 64px */ --spacing-3xl: 6rem; /* 96px */ /* ========================================== TEXT COLORS Hierarchy of text colors for content ========================================== */ /* Primary dark text - Headings, important content */ --text-primary: #1a1a1a; /* Secondary text - Body copy, descriptions */ --text-secondary: #525252; /* Tertiary text - Muted text, captions */ --text-tertiary: #737373; /* Muted text - Subtle information, placeholders */ --text-muted: #9ca3af; /* Additional gray variations */ --text-gray-600: #6b7280; --text-gray-700: #374151; --text-gray-800: #1f2937; /* White text - For dark backgrounds */ --text-white: #ffffff; /* ========================================== BACKGROUND COLORS Backgrounds for sections, cards, overlays ========================================== */ /* Pure white background */ --bg-white: #ffffff; /* Light gray backgrounds - Sections, alternating rows */ --bg-light-gray: #f9fafb; --bg-light-gray-alt: #fafafa; /* Medium gray backgrounds */ --bg-gray-100: #f3f4f6; --bg-gray-200: #e5e7eb; /* Dark backgrounds - Hero sections, footers */ --bg-dark: #262626; --bg-dark-alt: #404040; /* ========================================== PROPERTY STATUS BADGE COLORS Property availability indicators ========================================== */ /* Available Now - Blue-gray */ --status-available: #607d8b; /* Available Under Construction - Brown */ --status-construction: #b07a5c; /* Build to Suit - Gray */ --status-build-to-suit: #9e9e9e; /* Portfolio Status Colors */ /* Leased - Greenish-gray */ --status-leased: #75877c; /* Sold - Greenish-gray */ --status-sold: #75877c; /* Leased/Sold Combined - Greenish-gray */ --status-leased-sold: #75877c; /* ========================================== INTERACTIVE STATE COLORS Hover, focus, active states ========================================== */ /* Hover states - Slightly darker versions of brand colors */ --brand-primary-blue-hover: #1e3567; --brand-primary-orange-hover: #c66d31; --brand-dark-gray-hover: #2d3740; /* Focus states */ --focus-ring: #3b82f6; /* Active/selected states */ --active-bg: #eff6ff; /* ========================================== OVERLAY & TRANSPARENCY COLORS Modals, dropdowns, overlays ========================================== */ /* Dark overlay - Over images, hero sections */ --overlay-dark: rgba(0, 0, 0, 0.3); --overlay-dark-strong: rgba(0, 0, 0, 0.5); --overlay-dark-subtle: rgba(0, 0, 0, 0.1); /* Light overlay - Over dark backgrounds */ --overlay-light: rgba(255, 255, 255, 0.9); --overlay-light-subtle: rgba(255, 255, 255, 0.5); /* ========================================== BORDER COLORS Card borders, dividers, inputs ========================================== */ --border-light: #e5e7eb; --border-medium: #d1d5db; --border-dark: #9ca3af; /* ========================================== BUTTON COLORS Primary, secondary, tertiary buttons ========================================== */ /* Primary button */ --btn-primary-bg: var(--brand-primary-blue); --btn-primary-text: var(--text-white); --btn-primary-hover: var(--brand-primary-blue-hover); /* Secondary button */ --btn-secondary-bg: var(--brand-primary-orange); --btn-secondary-text: var(--text-white); --btn-secondary-hover: var(--brand-primary-orange-hover); /* Tertiary button */ --btn-tertiary-bg: transparent; --btn-tertiary-text: var(--brand-primary-blue); --btn-tertiary-border: var(--brand-primary-blue); --btn-tertiary-hover-bg: var(--brand-primary-blue); --btn-tertiary-hover-text: var(--text-white); /* ========================================== SEMANTIC COLORS Success, error, warning, info states ========================================== */ --color-success: #10b981; --color-error: #ef4444; --color-warning: #f59e0b; --color-info: #3b82f6; --color-success-bg: #d1fae5; --color-error-bg: #fee2e2; --color-warning-bg: #fef3c7; --color-info-bg: #dbeafe; } /** * Dark Mode Color Scheme (Optional - Future Implementation) * Uncomment to enable dark mode support */ /* @media (prefers-color-scheme: dark) { :root { --text-primary: #f9fafb; --text-secondary: #e5e7eb; --text-tertiary: #d1d5db; --bg-white: #1f2937; --bg-light-gray: #111827; --bg-dark: #f9fafb; } } */