/* Theme Name: DreamDeals Theme URI: http://dreamdeals.sg/blog Author: Yasser Khan Version: 18.08.2025 v1.2.0 /14.08.2025 v1.1/ /14.07.2025 v1.0/ */ :root { /* ===== TYPING TEXT GLOBAL SCALE VARIABLE ===== */ --typing-scale-multiplier: 0.775; /* 0.75 = 25% reduction, 1.0 = normal, 1.25 = 25% increase */ /* Primitive Color Tokens */ --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-cream-50: rgba(252, 252, 249, 1); --color-cream-100: rgba(255, 255, 253, 1); --color-gray-200: rgba(245, 245, 245, 1); --color-gray-300: rgba(167, 169, 169, 1); --color-gray-400: rgba(119, 124, 124, 1); --color-slate-500: rgba(98, 108, 113, 1); --color-brown-600: rgba(94, 82, 64, 1); --color-charcoal-700: rgba(31, 33, 33, 1); --color-charcoal-800: rgba(38, 40, 40, 1); --color-slate-900: rgba(19, 52, 59, 1); --color-teal-300: rgba(50, 184, 198, 1); --color-teal-400: rgba(45, 166, 178, 1); --color-teal-500: rgba(33, 128, 141, 1); --color-teal-600: rgba(29, 116, 128, 1); --color-teal-700: rgba(26, 104, 115, 1); --color-teal-800: rgba(41, 150, 161, 1); --color-red-400: rgba(255, 84, 89, 1); --color-red-500: rgba(192, 21, 47, 1); --color-orange-400: rgba(230, 129, 97, 1); --color-orange-500: rgba(168, 75, 47, 1); /* RGB versions for opacity control */ --color-brown-600-rgb: 94, 82, 64; --color-teal-500-rgb: 33, 128, 141; --color-slate-900-rgb: 160, 28, 33; --color-slate-500-rgb: 98, 108, 113; --color-red-500-rgb: 192, 21, 47; --color-red-400-rgb: 255, 84, 89; --color-orange-500-rgb: 168, 75, 47; --color-orange-400-rgb: 230, 129, 97; /* Semantic Color Tokens (Light Mode) */ --color-background: var(--color-cream-50); --color-surface: var(--color-cream-100); --color-text: var(--color-slate-900); --color-text-secondary: var(--color-slate-500); --color-primary: var(--color-teal-500); --color-primary-hover: var(--color-teal-600); --color-primary-active: var(--color-teal-700); --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); --color-border: rgba(var(--color-brown-600-rgb), 0.2); --color-btn-primary-text: var(--color-cream-50); --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); --color-error: var(--color-red-500); --color-success: var(--color-teal-500); --color-warning: var(--color-orange-500); --color-info: var(--color-slate-500); --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); /* Common style patterns */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for opacity control */ --color-success-rgb: 33, 128, 141; --color-error-rgb: 192, 21, 47; --color-warning-rgb: 168, 75, 47; --color-info-rgb: 98, 108, 113; /* Typography */ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-xs: 0.7rem; /* Original 11px OR 0.6875rem */ --font-size-sm: 0.75rem; /* Original 12px OR 0.75rem*/ --font-size-base: 0.875rem; /* Original 14px */ --font-size-md: 0.875rem; /* Original 14px */ --font-size-lg: 1rem; /* Original 16px */ --font-size-xl: 1.175rem; /* Original 18px OR 1.125rem */ --font-size-2xl: 1.55rem; /* Original 20px OR 1.25rem */ --font-size-3xl: 1.85rem; /* Original 24px OR 1.5rem */ --font-size-4xl: 2.25rem; /* Original 30px OR 1.875rem */ --font-size-5xl: 2.75rem; --font-weight-normal: 450; /* Original 400 */ --font-weight-medium: 600; /* Original 500 */ --font-weight-semibold: 750; /* Original 550 */ --font-weight-bold: 950; /* Original 600 */ --line-height-tight: 1.2; --line-height-normal: 1.5; --letter-spacing-tight: -0.01em; /* Spacing */ --space-0: 0; --space-1: 1px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; /* Border Radius */ --radius-sm: 6px; --radius-base: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-3xl: 18px; --radius-4x1: 20px; --radius-5xl: 22px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03); /* Animation */ --duration-fast: 150ms; --duration-normal: 250ms; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; } /* Also add to your CSS variables section */ :root { /* Add this after your existing font family variables */ --font-display: swap; } /* Dark mode colors */ @media (prefers-color-scheme: dark) { :root { /* RGB versions for opacity control (dark mode) */ --color-gray-400-rgb: 119, 124, 124; --color-teal-300-rgb: 50, 184, 198; --color-gray-300-rgb: 167, 169, 169; --color-gray-200-rgb: 245, 245, 245; /* Semantic Color Tokens (Dark Mode) */ --color-background: var(--color-charcoal-700); --color-surface: var(--color-charcoal-800); --color-text: var(--color-gray-200); --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); --color-primary: var(--color-teal-300); --color-primary-hover: var(--color-teal-400); --color-primary-active: var(--color-teal-800); --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); --color-border: rgba(var(--color-gray-400-rgb), 0.3); --color-error: var(--color-red-400); --color-success: var(--color-teal-300); --color-warning: var(--color-orange-400); --color-info: var(--color-gray-300); --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); --color-btn-primary-text: var(--color-slate-900); --color-card-border: rgba(var(--color-gray-400-rgb), 0.2); --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15); --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); /* Common style patterns - updated for dark mode */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for dark mode */ --color-success-rgb: var(--color-teal-300-rgb); --color-error-rgb: var(--color-red-400-rgb); --color-warning-rgb: var(--color-orange-400-rgb); --color-info-rgb: var(--color-gray-300-rgb); } } /* Data attribute for manual theme switching */ [data-color-scheme="dark"] { /* RGB versions for opacity control (dark mode) */ --color-gray-400-rgb: 119, 124, 124; --color-teal-300-rgb: 50, 184, 198; --color-gray-300-rgb: 167, 169, 169; --color-gray-200-rgb: 245, 245, 245; /* Semantic Color Tokens (Dark Mode) */ --color-background: var(--color-charcoal-700); --color-surface: var(--color-charcoal-800); --color-text: var(--color-gray-200); --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); --color-primary: var(--color-teal-300); --color-primary-hover: var(--color-teal-400); --color-primary-active: var(--color-teal-800); --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); --color-border: rgba(var(--color-gray-400-rgb), 0.3); --color-error: var(--color-red-400); --color-success: var(--color-teal-300); --color-warning: var(--color-orange-400); --color-info: var(--color-gray-300); --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); --color-btn-primary-text: var(--color-slate-900); --color-card-border: rgba(var(--color-gray-400-rgb), 0.15); --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15); --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); /* Common style patterns - updated for dark mode */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for dark mode */ --color-success-rgb: var(--color-teal-300-rgb); --color-error-rgb: var(--color-red-400-rgb); --color-warning-rgb: var(--color-orange-400-rgb); --color-info-rgb: var(--color-gray-300-rgb); } /* SURGICAL DARK MODE TEXT COLOR FIXES */ @media (prefers-color-scheme: dark) { /* Fix the root cause - override the variable itself */ :root { --color-btn-primary-text: #fff !important; } /* 1. All buttons need white text in dark mode */ .btn, .btn--primary, .btn--secondary, .btn--outline { color: #fff !important; } /* 2. Footer section h4 and h2 (banner) need white text */ .footer__section h3, .footer__section h4, .footer-banner h3, .footer-banner__headline { color: #fff !important; margin-bottom: 24px !important; } /* 3. Contact, blog, podcast, about section paragraphs need white text */ .contact__info p, .contact__details p, .blog-card p, .podcast__episodes p, .about__content > p, .about__card p { color: #fff !important; } /* 4. Done for you section li need white text */ .comparison__list li, .done-for-you-section .favicon-list li { color: #fff !important; } /* 5. Services section service-card__description needs BLACK text */ .services .service-card__description { color: #000 !important; } /* 6. Case studies section h3 and description need BLACK text */ .case-studies h3, .case-studies .case-study-description, .case-studies .case-study-description p { color: #000 !important; } /* 7. Testimonials section h2 needs brand secondary color */ .testimonials h2, .testimonials .section-title { color: var(--color-brand-secondary) !important; /* #2c99f2 */ } } /* SURGICAL DARK MODE TEXT COLOR FIXES */ [data-color-scheme="dark"] { /* 1. All buttons need white text in dark mode */ .btn, .btn--primary, .btn--secondary, .btn--outline { color: #fff !important; } /* 2. Footer section h4 and h2 (banner) need white text */ .footer__section h3, .footer__section h4, .footer-banner__headline { color: #fff !important; } /* 3. Contact, blog, podcast, about section paragraphs need white text */ .contact__info p, .contact__details p, .blog-card p, .podcast__episodes p, .about__content > p, .about__card p { color: #fff !important; } /* 4. Done for you section li need white text */ .done-for-you-section .comparison__list li, .done-for-you-section .favicon-list li { color: #fff !important; } /* 5. Services section service-card__description needs BLACK text */ .services .service-card__description { color: #000 !important; } /* 6. Case studies section h3 and description need BLACK text */ .case-studies h3, .case-studies .case-study-description, .case-studies .case-study-description p { color: #000 !important; } /* 7. Testimonials section h2 needs brand secondary color */ .testimonials h2, .testimonials .section-title { color: var(--color-brand-secondary) !important; /* #2c99f2 */ } } /* TESTIMONIALS SECTION MISSING FIXES */ .testimonial-card__quote, .testimonial-card__quote p { color: #000 !important; } .testimonials .testimonial-card h4, .testimonials h4 { color: #000 !important; } [data-color-scheme="light"] { /* RGB versions for opacity control (light mode) */ --color-brown-600-rgb: 94, 82, 64; --color-teal-500-rgb: 33, 128, 141; --color-slate-900-rgb: 160, 28, 33; /* Semantic Color Tokens (Light Mode) */ --color-background: var(--color-cream-50); --color-surface: var(--color-cream-100); --color-text: var(--color-slate-900); --color-text-secondary: var(--color-slate-500); --color-primary: var(--color-teal-500); --color-primary-hover: var(--color-teal-600); --color-primary-active: var(--color-teal-700); --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); --color-border: rgba(var(--color-brown-600-rgb), 0.2); --color-btn-primary-text: var(--color-cream-50); --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); --color-error: var(--color-red-500); --color-success: var(--color-teal-500); --color-warning: var(--color-orange-500); --color-info: var(--color-slate-500); --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); /* RGB versions for light mode */ --color-success-rgb: var(--color-teal-500-rgb); --color-error-rgb: var(--color-red-500-rgb); --color-warning-rgb: var(--color-orange-500-rgb); --color-info-rgb: var(--color-slate-500-rgb); } /* Place in your main stylesheet (e.g. style.css), at top or where other :root overrides live */ /* ─── BRAND COLOUR VARIABLE OVERRIDES ───────────────────────────────────────── */ :root { /* Primary (thumb) and Secondary (track/gutter) brand colours */ --color-brand-primary: #c02026; --color-brand-secondary: #2c99f2; /* Hover/active variants */ --color-brand-primary-hover: #a01c21; --color-brand-secondary-hover: #1a7dd9; } /* ─── WEBKIT SCROLLBAR STYLING (Chrome, Safari, Edge) ───────────────────────── */ ::-webkit-scrollbar { width: 12px; /* 4. Scrollbar width on desktop */ background-color: var(--color-brand-secondary); /* 3. Scrollbar background */ } ::-webkit-scrollbar-track { background-color: var(--color-brand-secondary-hover); } ::-webkit-scrollbar-thumb { background-color: var(--color-brand-primary); /* 1. Thumb = primary brand */ border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-brand-primary-hover); } /* ─── STANDARD SCROLLBAR PROPERTIES (Firefox, modern Chromium) ──────── */ html { scrollbar-width: thin; /* 4. width: thin/auto/none */ scrollbar-color: var(--color-brand-primary) /* thumb = primary */ var(--color-brand-secondary); /* track = secondary */ } /* ─── FULL‐BLEED BACKGROUND & SAFE‐AREA INSETS (iOS notches) ────────── */ body { background-color: var(--color-background); /* your existing page bg */ min-height: 100svh; /* fills small viewport height */ padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); } /* ===== ADVANCED BROWSER UI CUSTOMIZATIONS ===== */ /* Add this section after your existing webkit scrollbar rules */ /* 1. OVERSCROLL BEHAVIOR CONTROL */ /* Prevent scroll chaining and rubber-band bounce on specific containers */ .hero, .services, .testimonials, .case-studies, .contact { overscroll-behavior: contain; } /* Disable overscroll on mobile completely for smoother experience */ @media (max-width: 768px) { body { overscroll-behavior-y: none; } } /* 2. SCROLL SNAPPING FOR SECTIONS */ /* Enable smooth section-to-section scrolling on desktop */ @media (min-width: 769px) { .main-content { scroll-snap-type: y proximity; } .hero, .services, .testimonials, .case-studies, .about, .contact { scroll-snap-align: start; } } /* 3. RESPECT REDUCED MOTION PREFERENCES */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Disable your typing animation for accessibility */ .typing-cursor { animation: none !important; } } /* 4. CUSTOM TAP HIGHLIGHTS */ /* Remove default blue tap highlights and add brand-colored ones */ a, button, .btn, .nav__link, .service-card, .testimonial-card { -webkit-tap-highlight-color: rgba(192, 32, 38, 0.3); /* Brand primary with opacity */ -webkit-touch-callout: none; } /* Special highlight for secondary brand elements */ .service-card__btn, .about__card__btn, .footer-banner__cta { -webkit-tap-highlight-color: rgba(44, 153, 242, 0.3); /* Brand secondary with opacity */ } /* 5. BRANDED TEXT SELECTION */ ::selection { background-color: var(--color-brand-primary); color: white; } ::-moz-selection { background-color: var(--color-brand-primary); color: white; } /* Secondary brand selection for specific elements */ .services ::selection, .footer ::selection { background-color: var(--color-brand-secondary); color: white; } .services ::-moz-selection, .footer ::-moz-selection { background-color: var(--color-brand-secondary); color: white; } /* 6. FORM CONTROL ACCENT COLORS */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--color-brand-primary); } /* Secondary accent for specific form areas */ .contact input[type="checkbox"], .contact input[type="radio"] { accent-color: var(--color-brand-secondary); } /* 7. HIGH CONTRAST MODE SUPPORT */ @media (forced-colors: active) { /* Preserve brand colors for key elements in high contrast mode */ .nav__logo, .hero__headline, .btn--primary { forced-color-adjust: none; } /* Ensure sufficient contrast for interactive elements */ .btn, .form-control { border: 2px solid ButtonText; } } /* 8. ENHANCED FOCUS MANAGEMENT */ /* Improve focus visibility beyond your existing focus-ring */ .btn:focus-visible, .form-control:focus-visible, .nav__link:focus-visible { outline: 3px solid var(--color-brand-secondary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Skip-to-content link for keyboard navigation */ .skip-link { position: absolute; top: -40px; left: 6px; background: var(--color-brand-primary); color: white; padding: 8px; border-radius: var(--radius-sm); text-decoration: none; z-index: 9999; transition: top 0.3s; } .skip-link:focus { top: 6px; } /* 9. SMOOTH SCROLLBAR TRANSITIONS */ /* Enhance your existing scrollbar with smooth transitions */ ::-webkit-scrollbar-thumb { transition: background-color var(--duration-fast) var(--ease-standard); } ::-webkit-scrollbar-track { transition: background-color var(--duration-fast) var(--ease-standard); } /* 10. BROWSER-SPECIFIC OPTIMIZATIONS */ /* Safari-specific enhancements */ @supports (-webkit-appearance: none) { /* Improve Safari form styling */ input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } } /* Chrome-specific optimizations */ @supports (background: paint(something)) { /* Enhanced Chrome performance */ .hero, .services, .testimonials { contain: layout style paint; } } /* ===== END ADVANCED BROWSER UI CUSTOMIZATIONS ===== */ /* Base styles */ html { font-size: 115%; font-family: var(--font-family-base); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; box-sizing: border-box; } body { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-md); } p { margin: 0 0 var(--space-16) 0; } a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } a:hover { color: var(--color-primary-hover); } code, pre { font-family: var(--font-family-mono); font-size: calc(var(--font-size-base) * 0.95); background-color: var(--color-secondary); border-radius: var(--radius-sm); } code { padding: var(--space-1) var(--space-4); } pre { padding: var(--space-16); margin: var(--space-16) 0; overflow: auto; border: 1px solid var(--color-border); } pre code { background: none; padding: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; text-align: center; justify-content: center; padding: var(--space-8) var(--space-16); border-radius: var(--radius-base); font-size: var(--font-size-base); font-weight: 600; line-height: 1.5; cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); border: none; text-decoration: none; position: relative; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn--primary { background: var(--color-primary); color: var(--color-btn-primary-text); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--primary:active { background: var(--color-primary-active); } .btn--secondary { background: var(--color-secondary); color: var(--color-text); } .btn--secondary:hover { background: var(--color-secondary-hover); } .btn--secondary:active { background: var(--color-secondary-active); } .btn--outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); } .btn--outline:hover { background: var(--color-secondary); } .btn--sm { padding: var(--space-4) var(--space-12); font-size: var(--font-size-sm); border-radius: var(--radius-sm); } .btn--lg { padding: var(--space-10) var(--space-20); font-size: var(--font-size-lg); border-radius: var(--radius-md); } .btn--xl { background: var(--color-primary); padding: var(--space-10) var(--space-20); font-size: var(--font-size-x1); border-radius: var(--radius-md); text-align: center !important; width: 100%; } .btn--full-width { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Contact Form elements */ .form-control { display: block; width: 100%; padding: var(--space-8) var(--space-12); font-size: var(--font-size-lg); line-height: 1.5; color: white !important; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-base); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } textarea.form-control { font-family: var(--font-family-base); font-size: var(--font-size-lg); color: white !important; } select.form-control { padding: var(--space-8) var(--space-12); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--select-caret-light); background-repeat: no-repeat; background-position: right var(--space-12) center; background-size: 16px; padding-right: var(--space-32); } /* Enhanced contact form labels with required indicators */ .form-label { display: block; margin-bottom: var(--space-8); font-weight: var(--font-weight-bold); /* Bolder for better visibility */ font-size: var(--font-size-md); /* Larger label text */ color: white !important; } /* Required field indicator styling */ .form-label.required::after { content: " (required)"; color: white !important; /* Your brand red */ font-weight: var(--font-weight-bold); font-size: var(--font-size-md); } /* Alternative asterisk approach if you prefer */ .form-label.required-asterisk::after { content: " *"; color: white !important; font-weight: var(--font-weight-bold); font-size: var(--font-size-md); margin-left: 2px; } /* Mobile responsive form field sizing */ @media (max-width: 768px) { .form-control { font-size: 1rem !important; /* 16px on mobile to prevent zoom on iOS */ padding: var(--space-10) var(--space-12); } .form-label { font-size: 0.95rem; } } /* Add a dark mode specific caret */ @media (prefers-color-scheme: dark) { select.form-control { background-image: var(--select-caret-dark); } } /* Also handle data-color-scheme */ [data-color-scheme="dark"] select.form-control { background-image: var(--select-caret-dark); } [data-color-scheme="light"] select.form-control { background-image: var(--select-caret-light); } .form-control:focus { border-color: var(--color-primary); outline: var(--focus-outline); } .form-label { display: block; margin-bottom: var(--space-8); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); } .form-group { margin-bottom: var(--space-16); } /* Card component */ .card { background-color: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-card-border); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--duration-normal) var(--ease-standard); } .card:hover { box-shadow: var(--shadow-md); } .card__body { padding: var(--space-16); } .card__header, .card__footer { padding: var(--space-16); border-bottom: 1px solid var(--color-card-border-inner); } /* Status indicators - simplified with CSS variables */ .status { display: inline-flex; align-items: center; padding: var(--space-6) var(--space-12); border-radius: var(--radius-full); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); } .status--success { background-color: rgba( var(--color-success-rgb, 33, 128, 141), var(--status-bg-opacity) ); color: var(--color-success); border: 1px solid rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); } .status--error { background-color: rgba( var(--color-error-rgb, 192, 21, 47), var(--status-bg-opacity) ); color: var(--color-error); border: 1px solid rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); } .status--warning { background-color: rgba( var(--color-warning-rgb, 168, 75, 47), var(--status-bg-opacity) ); color: var(--color-warning); border: 1px solid rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); } .status--info { background-color: rgba( var(--color-info-rgb, 98, 108, 113), var(--status-bg-opacity) ); color: var(--color-info); border: 1px solid rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); } /* Container layout */ .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: var(--space-16); padding-left: var(--space-16); } @media (min-width: 640px) { .container { max-width: var(--container-sm); } } @media (min-width: 768px) { .container { max-width: var(--container-md); } } @media (min-width: 1024px) { .container { max-width: var(--container-lg); } } @media (min-width: 1280px) { .container { max-width: var(--container-xl); } } /* Utility classes */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: var(--space-4); } .gap-8 { gap: var(--space-8); } .gap-16 { gap: var(--space-16); } .m-0 { margin: 0; } .mt-8 { margin-top: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); } .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .p-0 { padding: 0; } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } .px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } .block { display: block; } .hidden { display: none; } /* Accessibility */ .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-visible { outline: var(--focus-outline); outline-offset: 2px; } /* Dark mode specifics */ [data-color-scheme="dark"] .btn--outline { border: 1px solid var(--color-border-secondary); } @font-face { font-family: 'FKGroteskNeue'; src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2'); font-display: swap; /* ADD THIS LINE */ } /* END PERPLEXITY DESIGN SYSTEM */ /* === Popup Form Styles ==== */ #popupFormOverlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; } #popupForm { background: var(--color-surface); border-radius: var(--radius-md); max-width: 700px; margin: 5% auto; padding: var(--space-32); position: relative; box-shadow: var(--shadow-lg); } #popupClose { position: absolute; top: var(--space-16); right: var(--space-16); background: none; border: none; font-size: var(--font-size-3xl); color: var(--color-text-secondary); cursor: pointer; } @media (max-width: 768px) { #popupForm { width: 90%; margin: 12% auto; } } /* Style for inputs, selects, textareas using .form class */ /* Form element styling based on contact form without colors */ .form { display: block; width: 100%; padding: var(--space-8) var(--space-12); font-size: var(--font-size-lg); line-height: 1.5; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-base); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); font-family: var(--font-family-base); } /* Textarea specific styling */ textarea.form { font-family: var(--font-family-base); font-size: var(--font-size-lg); resize: vertical; min-height: 120px; } /* Select dropdown styling */ select.form { padding: var(--space-8) var(--space-12); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--select-caret-light); background-repeat: no-repeat; background-position: right var(--space-12) center; background-size: 16px; padding-right: var(--space-32); cursor: pointer; } /* Focus states */ .form:focus { border-color: var(--color-primary); outline: var(--focus-outline); box-shadow: var(--focus-ring); } /* Disabled state */ .form:disabled { opacity: 0.5; cursor: not-allowed; } /* Mobile responsive form field sizing */ @media (max-width: 768px) { .form { font-size: 1rem !important; /* 16px on mobile to prevent zoom on iOS */ padding: var(--space-10) var(--space-12); } } /* Dark mode caret for select elements */ @media (prefers-color-scheme: dark) { select.form { background-image: var(--select-caret-dark); } } [data-color-scheme="dark"] select.form { background-image: var(--select-caret-dark); } [data-color-scheme="light"] select.form { background-image: var(--select-caret-light); } /* iOS Safari specific fixes */ @supports (-webkit-touch-callout: none) { @media (max-width: 768px) { .form { -webkit-appearance: none !important; -webkit-border-radius: var(--radius-base); -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } /* Prevent zoom on iOS Safari */ .form[type="text"], .form[type="email"], .form[type="tel"], textarea.form { font-size: 16px !important; -webkit-text-size-adjust: 100%; } /* Remove iOS Safari default styling for selects */ select.form { -webkit-appearance: none !important; } } } /* Enhanced form group styling for popup */ #popupFormElement .form { width: 100%; margin-bottom: var(--space-4); } /* Label styling for popup form */ #popupFormElement label { display: block; margin-bottom: var(--space-8); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); } /* Checkbox styling */ #popupFormElement input[type="checkbox"] { margin-right: var(--space-8); accent-color: var(--color-primary); } /* Required asterisk styling */ #popupFormElement label span { margin-left: var(--space-2); } /* Form grid layout improvements */ #popupFormElement > div { display: flex; flex-direction: column; } /* Flex container for country/phone layout */ #popupFormElement div[style*="display:flex"] > div { display: flex; flex-direction: column; } /* Ensure proper spacing in flex layouts */ #popupFormElement div[style*="display:flex"] .form { margin-bottom: 0; } /* Enhanced popup overlay */ #popupFormOverlay { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.8) !important; z-index: 99999 !important; overflow-y: auto !important; } #popupFormOverlay.show { display: block !important; } /* Prevent background scrolling when popup is open */ body.popup-open { overflow: hidden !important; } /* ensure typed text uses semantic text color */ .form { color: var(--color-text); } /* dark‐mode override for typed text */ @media (prefers-color-scheme: dark) { .form { color: var(--color-text); } } [data-color-scheme="dark"] .form { color: var(--color-text); } /* make select text use semantic text color */ select.form { color: var(--color-text); } /* dark-mode override for select text */ @media (prefers-color-scheme: dark) { select.form { color: var(--color-text); } } [data-color-scheme="dark"] select.form { color: var(--color-text); } /*===== END POPUP FORM STYLE ====*/ /* Custom brand colors override */ :root { --color-brand-primary: #c02026; --color-brand-secondary: #2c99f2; --color-primary: var(--color-brand-primary); --color-primary-hover: #a01c21; --color-primary-active: #801519; --color-secondary-accent: var(--color-brand-secondary); --color-secondary-accent-hover: #1a7dd9; --color-secondary-accent-active: #0f5fb0; } /* Header Styles */ .header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: var(--shadow-sm); } /* Desktop: Make header static/absolute positioning */ @media (min-width: 769px) { .header { position: absolute !important; background: transparent !important; box-shadow: none !important; } /* Ensure desktop header never gets scrolled background */ .header.scrolled { background: transparent !important; backdrop-filter: none !important; } } .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) 0; } .nav__logo { display: inline-block; cursor: pointer; padding: 0; /* var(--space-2) */ border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-standard); } .nav__logo:hover { background-color: rgba(var(--color-primary-rgb), 0.3); } .nav__logo img { display: block; width: 250px; height: auto; max-width: 100%; } .nav__logo h2 { color: var(--color-primary); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin: 0; } .nav__menu { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-32); } .nav__link { color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-bold)!important; transition: color var(--duration-fast) var(--ease-standard); } .nav__link:hover { color: var(--color-primary); } .nav__cta { white-space: nowrap; } .nav__toggle { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: var(--space-8); } .nav__toggle span { width: 25px; height: 3px; background: var(--color-text); margin: 3px 0; transition: 0.3s; } /* === TOP Hero Section === */ .hero { padding: 120px 0 80px; background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%); text-align: center; border-bottom: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .hero__content { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* Tablet hero content centering */ @media (min-width: 769px) and (max-width: 1024px) { .hero__content { align-items: center !important; margin: 0 auto; max-width: 90vw; } } /* Desktop hero content left-aligned */ @media (min-width: 1025px) { .hero__content { align-items: flex-start; margin: 0; } } .hero__headline { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: var(--space-24); color: var(--color-text); } @media (min-width: 769px) { .hero__headline { text-align: left; } } /* Desktop-only: nudge hero button lower without altering hero height */ .hero__cta { margin-top: 45px; /* adjust as needed to shift button downward */ } @media (min-width: 769px) { .hero__cta { justify-content: flex-start; } } .hero__typing { font-size: calc(var(--font-size-3xl) * var(--typing-scale-multiplier)); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-bottom: var(--space-32); min-height: 60px; display: flex; align-items: center; justify-content: center; gap: var(--space-4); } @media (min-width: 769px) { .hero__typing { justify-content: flex-start; } } .typing-container { position: relative; display: inline-block; } .typing-text { display: inline-block; } .typing-cursor { position: absolute; top: 0; left: 0; animation: blink 1s infinite; color: var(--color-primary); transition: left 0.05s ease-out; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .hero__cta { margin-bottom: var(--space-32); } /* Section Styles */ .section-title { text-align: center; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-32); color: var(--color-text); } /* Media Section */ .media-section { padding: 60px 0; background: var(--color-surface); border-top: 2px solid var(--color-border); } .media-section__title { text-align: center; font-size: var(--font-size-xl); color: var(--color-text); margin-bottom: var(--space-32); text-transform: uppercase; letter-spacing: 1px; font-weight: var(--font-weight-medium); } /* PEAK LOGO SPECIFIC - MULTIPLE TARGETING APPROACHES */ .media-logo.peak-logo, .media-logo[src*="peak-logo"], .media-logo[src*="peak"], img[src*="peak-logo.svg"] { /* Force red coloring */ filter: invert(15%) sepia(60%) saturate(5500%) hue-rotate(0deg) brightness(1.2) contrast(1.2) !important; } /* ========= FUTURE-PROOF MEDIA LOGO SYSTEM ========= */ .media-section__logos { display: flex; justify-content: center; align-items: center; gap: clamp(var(--space-16), 4vw, var(--space-32)); flex-wrap: nowrap; max-width: 100vw; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .media-section__logos::-webkit-scrollbar { display: none; } /* UNIVERSAL LOGO STYLING - WORKS FOR ANY NEW LOGO */ .media-logo { /* Responsive sizing - adapts to any logo automatically */ max-height: clamp(35px, 4vw, 45px); width: auto; /* Maintains aspect ratio */ object-fit: contain; display: inline-block; transition: filter var(--duration-fast) var(--ease-standard); /* UNIVERSAL RED FILTER - APPLIES TO ALL LOGOS BY DEFAULT */ filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(0deg) saturate(100) !important; /* Cross-browser compatibility */ -webkit-filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(0deg) saturate(100) !important; } /* FLEXIBLE SIZE OVERRIDES VIA DATA ATTRIBUTES */ /* Usage: */ .media-logo[data-size="small"] { max-height: clamp(30px, 3vw, 38px); } .media-logo[data-size="large"] { max-height: clamp(40px, 5vw, 55px); } /* CUSTOM FILTER OVERRIDES VIA DATA ATTRIBUTES */ /* Usage: */ .media-logo[data-filter="blue"] { filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(200deg) /* Blue instead of red */ saturate(100) !important; } .media-logo[data-filter="green"] { filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(90deg) /* Green instead of red */ saturate(100) !important; } /* ORIGINAL COLOR PRESERVATION */ /* Usage: */ .media-logo[data-preserve-color="true"] { filter: none !important; -webkit-filter: none !important; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .media-section { padding: 40px 0; overflow-x: hidden; } .media-section__title { font-size: var(--font-size-lg); margin-bottom: var(--space-24); } .media-section__logos { gap: var(--space-16); flex-wrap: wrap; padding: 0 var(--space-16); } /* Slightly smaller logos on mobile */ .media-logo { max-height: clamp(30px, 3.5vw, 40px); } } /* Enhanced Services Section - Primary Brand Background */ .services { background-color: var(--color-primary); /* #c02026 */ padding: 80px 0; color: white; position: relative; border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .services .section-title { color: white; font-size: 2.8rem; font-weight: var(--font-weight-bold); margin-bottom: 48px; text-align: center; } .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(385px, 1fr)); gap: 20px; max-width: 1300px; margin: 0 auto; padding: 0 var(--space-16); } /* Enhanced Service Cards with Secondary Brand Borders */ .service-card { background-color: white; border: 3px solid var(--color-secondary-accent); /* #2c99f2 */ border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); transition: all var(--duration-normal) var(--ease-standard); display: flex; flex-direction: column; align-items: center; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); border-color: var(--color-secondary-accent-hover); /* #1a7dd9 */ } /* Enhanced Circular Images - Full Circle Fill */ .service-card__icon { width: 250px; height: 250px; border-radius: 50%; border: 0px solid var(--color-secondary-accent); /* #2c99f2 */ overflow: hidden; margin-bottom: var(--space-24); box-shadow: 0 4px 12px rgba(44, 153, 242, 0.45); transition: all var(--duration-normal) var(--ease-standard); display: flex; /* Added for better centering */ align-items: center; /* Added for vertical centering */ justify-content: center; /* Added for horizontal centering */ } .service-card:hover .service-card__icon { border-color: var(--color-secondary-accent-hover); box-shadow: 0 6px 20px rgba(44, 153,); } /* UPDATED: Icons now fill entire circle */ .service-card__icon img { width: 100%; height: 100%; object-fit: cover; /* Ensures image covers entire circle */ object-position: center; /* Centers the image within the circle */ border-radius: 50%; /* Ensures circular clipping */ transform: scale(1.00); /* Slightly scale up to ensure no gaps */ } /* Alternative approach if you want even more fill */ .service-card__icon img.full-fill { transform: scale(1.00); /* More aggressive scaling for maximum fill */ } /* Mobile responsiveness maintained */ @media (max-width: 768px) { .service-card__icon { width: 195px; height: 195px; } /* Ensure mobile icons also fill properly */ .service-card__icon img { transform: scale(1.02); /* Slightly more scale on mobile for better fill */ } } /* Brand-Consistent Typography */ .service-card__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-secondary-accent); /* #2c99f2 */ margin-bottom: var(--space-16); line-height: var(--line-height-tight); } .service-card__description { color: var(--color-text); font-size: calc(var(--font-size-base) * 1.25) !important; /* 25% larger */ line-height: var(--line-height-normal); margin-bottom: var(--space-32); flex-grow: 1; } /* Secondary Brand Color Buttons */ .service-card__btn { background-color: var(--color-secondary-accent); /* #2c99f2 */ color: white; border: none; border-radius: var(--radius-base); padding: 12px 24px; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); text-decoration: none; display: inline-block; box-shadow: 0 2px 8px rgba(44, 153, 242, 0.3); } .service-card__btn:hover { background-color: var(--color-secondary-accent-hover); /* #1a7dd9 */ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44, 153, 242, 0.4); } .service-card__btn:active { background-color: var(--color-secondary-accent-active); /* #0f5fb0 */ transform: translateY(0); } /* Mobile Responsiveness */ @media (max-width: 768px) { .services { padding: 60px 0; } .services .section-title { font-size: 2.2rem; margin-bottom: 32px; } .services__grid { grid-template-columns: 1fr; gap: 32px; } .service-card { padding: 32px 24px; } .service-card__icon { width: 150px; height: 150px; } } /* Force emoji icons to scale up and center */ .service-card__icon { /* ensure the emoji itself is treated like an image layer */ display: flex; align-items: center; justify-content: center; font-size: 64px; /* increase until the emoji fills the circle */ line-height: 1; /* prevent extra line spacing */ } /* Optionally adjust on mobile if needed */ @media (max-width: 768px) { .service-card__icon { font-size: 56px; /* slightly smaller for 100×100 circle */ } } /* ==== Enhanced TESTIMONIALS Section ==== - Brand Consistent Styling */ /* TESTIMONIALS SECTION - FORCE CONSTRUCTION BACKGROUND */ .testimonials { padding: 60px 0 !important; /* FORCE the construction background with higher specificity */ background: linear-gradient(rgba(192, 32, 38, 0.3), rgba(192, 32, 38, 0.3)), /*0,0,0,0,0*/ url("/construction.png") !important; /*default .jpg*/ background-size: cover !important; background-position: 50% 100% !important; background-repeat: no-repeat !important; width: 100%; border-top: 1px solid var(--color-secondary-accent); position: relative; } /* Dark overlay to darken the existing background */ .testimonials::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.0); /* CHANGED: black overlay */ z-index: 0; /* Above background, below content */ } .testimonials .container { position: relative; z-index: 1; /* Keep content above overlay */ } /* Ensure the H2 sits above the */ .testimonials .hero__headline .section-title { position: relative; z-index: 2; } /* Apply service card border styling to testimonial cards */ .testimonials .testimonial-card { border: 3px solid var(--color-secondary-accent); /* #2c99f2 - reusing service card border */ box-shadow: 0 8px 24px rgba(44, 153, 242, 0.15); /* Enhanced shadow with brand color */ } /* === ADD THIS: TESTIMONIALS H2 BRAND SECONDARY COLOR === */ .testimonials h2, .testimonials .section-title, .testimonials h2.section-title { color: var(--color-brand-secondary) !important; /* #2c99f2 - blue in both light and dark modes */ } .testimonials .testimonial-card:hover { transform: translateY(-8px); border-color: var(--color-secondary-accent-hover); box-shadow: 0 16px 40px rgba(44, 153, 242, 0.2); } /* Avatar styling - reusing service-card__icon approach */ .testimonials .testimonial-card__avatar { width: 130px; /* Slightly smaller than service icons for testimonials */ height: 130px; margin-bottom: var(--space-16); /* Less margin than service icons */ } .testimonials .testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; transform: scale(1.030); /* Ensure full fill like service icons */ } /* Author info styling - consistent with hero testimonial */ .testimonials .testimonial-card__author { display: flex; align-items: center; gap: var(--space-16); justify-content: flex-start; /* Left-align like other testimonials */ } .testimonials .testimonial-card__info h4 { font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-4); font-size: var(--font-size-lg); } .testimonials .testimonial-card__info p { font-size: var(--font-size-sm); color: var(--color-secondary-accent); /* Company name in brand secondary */ margin: 0; font-weight: var(--font-weight-medium); } /* Mobile responsiveness */ @media (max-width: 768px) { .testimonials { padding: 40px 0; /* Further reduced padding on mobile */ } .testimonials .testimonial-card__avatar { width: 110px; height: 110px; margin-bottom: var(--space-12); } .testimonials .testimonial-card__author { flex-direction: column; text-align: center; gap: var(--space-12); } } /* Comparison Section */ .comparison { padding: 80px 0; background: var(--color-surface); border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .comparison__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-32); margin-top: var(--space-32); } .comparison__column { background: var(--color-background); border-radius: var(--radius-lg); padding: var(--space-32); border: 1px solid var(--color-border); } .comparison__column h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--space-24); text-align: center; } /* Case Studies Section - Enhanced with Brand Styling */ /* Case Studies Section */ .case-studies { padding: 80px 0; background: var(--color-secondary-accent); /* Light blue brand secondary #2c99f2 */ border-top: 2px solid var(--color-primary); /* Brand primary border */ } /* Change section title to brand primary */ .case-studies .section-title { color: var(--color-primary); /* Brand primary #c02026 */ } /* New 3-column grid for video cards */ .case-study__content { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 equal columns on desktop */ gap: var(--space-32); /* Spacing between cards */ margin-top: var(--space-32); } /* Individual case study card (reusing service card styling) */ .case-study-card { background-color: white; border: 3px solid var(--color-primary); /* Brand primary border */ border-radius: var(--radius-lg); padding: 0; /* No padding around video */ text-align: center; box-shadow: 0 8px 24px rgba(192, 32, 38, 0.15); /* Brand primary shadow */ transition: all var(--duration-normal) var(--ease-standard); display: flex; flex-direction: column; overflow: hidden; /* Ensure clean edges */ } .case-study-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(192, 32, 38, 0.2); border-color: var(--color-primary-hover); } /* Clean video container - NO padding or borders around wistia */ .video-placeholder { background: none; /* Remove background */ border: none; /* Remove border */ padding: 0; /* Remove all padding */ margin: 0; /* Remove margin */ min-height: auto; /* Remove min-height */ display: block; /* Simple block display */ width: 100%; } .video-placeholder:has(.wistia-wrapper) { padding: 0; /* Keep clean */ width: 100%; /* Full width of card */ height: auto; /* Natural height */ min-height: auto; /* Remove fixed height */ margin: 0; /* No margin */ } /* Clean wistia wrapper */ .wistia-wrapper { position: relative; width: 100%; /* Full width of container */ height: 0; padding-bottom: 100%; /* 1:1 aspect ratio */ margin: 0; /* Remove margin */ overflow: hidden; } .wistia-wrapper wistia-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Case study description below video */ .case-study-description { padding: var(--space-24); /* Padding only for text area */ color: var(--color-text); font-size: var(--font-size-base); line-height: var(--line-height-normal); } .case-study-description h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); /* Brand primary for titles */ margin-bottom: var(--space-12); } .case-study-description p { color: var(--color-text); margin: 0; } /* Mobile responsiveness */ @media (max-width: 768px) { .case-studies { padding: 60px 0; } .case-study__content { grid-template-columns: 1fr; /* Stack vertically on mobile */ gap: var(--space-24); } .case-study-card { margin-bottom: var(--space-16); } .case-study-description { padding: var(--space-16); } .case-study-description h4 { font-size: var(--font-size-lg); } } /* Podcast Section */ .podcast { padding: 80px 0; background: var(--color-background); text-align: center; border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .podcast__episodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-24); margin: var(--space-32) 0; } .episode-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-24); border: 1px solid var(--color-border); text-align: left; } .episode-card h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-12); } .episode-card p { color: var(--color-text); margin-bottom: var(--space-16); line-height: 1.2; } .podcast__cta { margin-top: var(--space-32); } /* Podcast card featured images */ .episode-card__image { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: var(--space-16); object-fit: cover; } /* Clickable podcast images */ .episode-card__image-link { display: block; text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-16); } .episode-card__image-link:hover { transform: translateY(-2px); } .episode-card__image-link:hover .episode-card__image { transform: scale(1.065); } /* Ensure images remain responsive within clickable containers */ .episode-card__image-link .episode-card__image { margin-bottom: 0; /* Remove default margin since link handles spacing */ transition: transform var(--duration-fast) var(--ease-standard); } /* About Section - Consolidated */ .about { padding: 80px 0; background: var(--color-surface); border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } /* Company Description Container */ .about__content { max-width: 800px; margin: 0 auto; text-align: center; margin-bottom: var(--space-32); } .about__content > p { font-size: var(--font-size-lg); color: var(--color-text); line-height: var(--line-height-normal); margin-bottom: var(--space-32); } /* Stats Grid */ .about__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-32); margin-bottom: var(--space-32); } .stat { text-align: center; } .stat h3 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--space-8); } .stat p { color: var(--color-text); font-weight: var(--font-weight-medium); margin: 0; } /* Info Cards Grid */ .about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-32); margin-top: 25px; } .about__card { background: var(--color-background); border-radius: var(--radius-lg); padding: var(--space-32); text-align: center; border: 1px solid var(--color-border); transition: transform var(--duration-normal) var(--ease-standard); } .about__card:hover { transform: translateY(-5px); } .about__card h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-16); } .about__card p { color: var(--color-text); margin-bottom: var(--space-24); } .about__card .btn--secondary { background: var(--color-secondary-accent); color: var(--color-surface); } .about__card .btn--secondary:hover { background: var(--color-secondary-accent-hover); } /* Mobile Responsiveness for About Section */ @media (max-width: 768px) { .about { padding: 60px 0; } .about__stats { grid-template-columns: 1fr; gap: var(--space-24); } .about__grid { grid-template-columns: 1fr; gap: var(--space-24); } .about__card { padding: var(--space-24); } } @media (max-width: 480px) { .about { padding: 60px 0; } .about__card { padding: var(--space-24); } } /* About Card Icons - Cloned from Service Card Styling */ .about__card__icon { width: 160px; height: 160px; border-radius: 50%; border: 0px solid var(--color-secondary-accent); /* #2c99f2 */ overflow: hidden; margin: 0 auto var(--space-24); box-shadow: 0 4px 12px rgba(44, 153, 242, 0.3); transition: all var(--duration-normal) var(--ease-standard); display: flex; align-items: center; justify-content: center; } .about__card:hover .about__card__icon { border-color: var(--color-secondary-accent-hover); box-shadow: 0 6px 20px rgba(44, 153, 242, 0.4); } /* If using actual images instead of emojis */ .about__card__icon img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; transform: scale(1.000); /* Ensures full fill like service icons */ } /* About Card Button Styling */ .about__card__btn { background-color: var(--color-secondary-accent); /* #2c99f2 */ color: white; border: none; border-radius: var(--radius-base); padding: 12px 24px; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); text-decoration: none; display: inline-block; box-shadow: 0 2px 8px rgba(44, 153, 242, 0.3); margin-top: auto; /* Push button to bottom of card */ } .about__card__btn:hover { background-color: var(--color-secondary-accent-hover); /* #1a7dd9 */ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44, 153, 242, 0.4); } .about__card__btn:active { background-color: var(--color-secondary-accent-active); /* #0f5fb0 */ transform: translateY(0); } /* Mobile Responsiveness */ @media (max-width: 768px) { .about__card__icon { width: 130px; height: 130px; font-size: 60px; /* Slightly smaller for mobile */ } } /* Ensure about cards have flex layout for proper button positioning */ .about__card { display: flex; flex-direction: column; align-items: center; } /* Blog Section */ .blog { padding: 80px 0; background: var(--color-background); border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ margin-bottom: 32px !important; } .blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-24); margin: var(--space-32) 0 !important; /*from margin-top to margin */ } .blog-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-24); border: 1px solid var(--color-border); transition: transform var(--duration-normal) var(--ease-standard); } .blog-card:hover { transform: translateY(-6px); } .blog-card h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-12); } .blog-card p { color: var(--color-text); margin-bottom: var(--space-16); } .blog-card__link { color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); display: inline-block; /* required for margin bottom */ /* padding-bottom: var(--space-12); */ } .blog-card__link:hover { color: var(--color-primary-hover); } /* Add this at the bottom of style.css */ .blog-card__image { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: var(--space-16); object-fit: cover; } /* Clickable blog images */ .blog-card__image-link { display: block; text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-20); } .blog-card__image-link:hover { transform: translateY(-2px); } .blog-card__image-link .blog-card__image { margin-bottom: 0; transition: transform var(--duration-fast) var(--ease-standard); } .blog-card__image-link:hover .blog-card__image { transform: scale(1.095); } /* ============ CONTACT FORM SECTION ==================== */ /* UPDATED: Contact wrapper - full width with brand background */ .contact-wrapper { background-color: var(--color-primary); /* #c02026 - like footer-banner-wrapper */ width: 100%; display: flex; justify-content: center; /* Originally top/bottom in primary brand colour= padding: 80px 0; */ padding-bottom: 80px; padding-top: 0px !important; } /* UPDATED: Contact form content container - background image */ .contact { position: relative; width: 100%; max-width: 90%; text-align: left; padding-bottom: 20px !important; /* Originally padding: 20px; */ padding-top: 5px !important; background-color: transparent; /* remove existing background-image */ isolation: isolate; /* create stacking context */ } /* 1) Grayscale background image layer */ .contact::before { content: ""; position: absolute; inset: 0; background-image: url("/skyline.webp"); background-position: 50% 0%; /* X% Y% */ background-size: cover; background-repeat: no-repeat; filter: grayscale(96%); z-index: 0; pointer-events: none; } /* 2) Red semi-transparent overlay layer */ .contact::after { content: ""; position: absolute; inset: 0; background: rgba(192, 32, 38, 0.72); z-index: 1; pointer-events: none; } /* 3) Bring content above both layers */ .contact > * { position: relative; z-index: 2; } /* Keep existing contact form content styles */ .contact__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32); margin-top: var(--space-10); } .contact h2 { color: white !important; } .contact__info h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: white; margin-bottom: var(--space-16); } .contact__info p { color: white; margin-bottom: var(--space-24); } .contact__details p { color: white; margin-bottom: var(--space-8); font-weight: var(--font-weight-bold); } .contact__form { font-size: var(--font-size-xl) !important; color: white !important; background: 0; border-radius: 0; padding: var(--space-32); border: none; } /* ========== CONTACT FORM MOBILE WIDTH FIX ========== */ @media (max-width: 768px) { .contact-wrapper { padding: 0px 0px; /* Reduced padding on mobile */ } .contact { padding: 0px 0px; /* Updated: increase top/bottom padding, keep side padding */ max-width: calc(100% - 0px); /* Ensure left/right primary color padding visibility originally (100% - 40px) */ margin: 0 auto; /* Center the contact section to show side padding */ } .contact__content { grid-template-columns: 1fr; } /* FIX: Make contact form match the text content width */ .contact__form { width: 100% !important; /* Full width within its container */ max-width: none !important; /* Remove any max-width constraints */ padding: 0; /* Remove any internal padding that constrains width */ margin: 0; /* Remove any margins */ } /* Ensure form controls take full width */ .contact__form .form-control { width: 100% !important; box-sizing: border-box; /* Include padding/border in width calculation */ } /* Ensure submit button follows the same width pattern */ .contact__form .btn { width: 100% !important; box-sizing: border-box; } /* Ensure form groups are full width too */ .contact__form .form-group { width: 100%; margin-bottom: var(--space-16); } } /* ========== iOS SAFARI CONTACT FORM WIDTH FIX ========== */ @media (max-width: 768px) { .contact-wrapper { padding: 10px 0; } .contact { padding: 20px 10px; max-width: calc(100% - 40px); margin: 0 auto; } .contact__content { grid-template-columns: 1fr; } /* iOS Safari-specific form width fix */ .contact__form { width: 100% !important; max-width: 100% !important; /* iOS Safari fix: explicit 100% instead of none */ padding: 0 !important; margin: 0 !important; -webkit-box-sizing: border-box !important; /* iOS Safari webkit prefix */ box-sizing: border-box !important; display: block !important; /* Force block display for iOS Safari */ } /* iOS Safari form controls fix */ .contact__form .form-control { width: 100% !important; max-width: 100% !important; /* iOS Safari explicit width */ -webkit-box-sizing: border-box !important; /* iOS Safari webkit prefix */ box-sizing: border-box !important; -webkit-appearance: none !important; /* Remove iOS Safari default styling */ display: block !important; margin: 0 !important; } /* iOS Safari submit button fix */ .contact__form .btn { width: 100% !important; max-width: 100% !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-appearance: none !important; /* Remove iOS Safari button styling */ display: block !important; } /* iOS Safari form groups fix */ .contact__form .form-group { width: 100% !important; max-width: 100% !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; margin-bottom: var(--space-16); display: block !important; } /* iOS Safari textarea specific fix */ .contact__form textarea.form-control { resize: vertical; /* Only allow vertical resize on iOS Safari */ min-height: 120px; -webkit-appearance: none !important; } /* iOS Safari viewport fix for forms */ .contact__form input[type="text"], .contact__form input[type="email"], .contact__form input[type="tel"], .contact__form textarea { font-size: 16px !important; /* Prevent iOS Safari zoom on focus */ -webkit-text-size-adjust: 100%; } } /* Additional iOS Safari-only fixes */ @supports (-webkit-touch-callout: none) { /* This targets iOS Safari specifically */ @media (max-width: 768px) { .contact__form { -webkit-transform: translateZ(0); /* Force hardware acceleration */ transform: translateZ(0); } .contact__form .form-control { -webkit-transform: translateZ(0); transform: translateZ(0); } } } /* ========== HONEYPOT FIELD PROTECTION ========== */ .honeypot-container { position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; opacity: 0 !important; z-index: -999 !important; } .honeypot-field { position: absolute !important; left: -9999px !important; display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Additional protection */ input[name="honeypot"] { display: none !important; visibility: hidden !important; position: absolute !important; left: -10000px !important; } /* Footer */ .footer { background: var(--color-primary); color: var(--color-surface); padding: var(--space-32) 0; border-top: 1px solid var(--color-secondary-accent); /* #2c99f2 */ } .footer__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-32); margin-bottom: var(--space-32); } .footer__section h3, .footer__section h4 { color: var(--color-surface); margin-bottom: var(--space-16); } .footer__section p { color: rgba(255, 255, 255, 0.8); margin-bottom: var(--space-16); } .footer__links { list-style: none; padding: 0; margin: 0; } .footer__links li { margin-bottom: var(--space-8); } .footer__links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .footer__links a:hover { color: var(--color-surface); } .footer__bottom { text-align: center; padding-top: var(--space-24); border-top: 1px solid rgba(255, 255, 255, 0.2); } .footer__bottom p { color: rgba(255, 255, 255, 0.8); margin: 0; } /* Responsive Design */ @media (max-width: 768px) { .nav__menu { position: fixed; top: 0; left: 0; right: 0; background: var(--color-surface); flex-direction: column; padding: var(--space-24); box-shadow: var(--shadow-lg); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all var(--duration-normal) var(--ease-standard); gap: var(--space-16); z-index: 1002; /* Ensure above header: was z-index:1001 */ } .nav__menu.active { transform: translateY(0); opacity: 1; visibility: visible; } .nav__toggle { display: flex; } .nav__cta { display: none; } .hero__headline { font-size: var(--font-size-3xl); } .hero__typing { font-size: calc(var(--font-size-lg) * var(--typing-scale-multiplier)); /* originally x1*/ } .services__grid { grid-template-columns: 1fr; } .case-study__content { grid-template-columns: 1fr; } .contact__content { grid-template-columns: 1fr; } .media-logos { gap: var(--space-16); } .about__stats { grid-template-columns: 1fr; } .comparison__grid { grid-template-columns: 1fr; } .get-to-know__grid { grid-template-columns: 1fr; } .podcast__episodes { grid-template-columns: 1fr; } .blog__grid { grid-template-columns: 1fr; } .footer__content { grid-template-columns: 1fr; } .footer img { max-width: 100%; height: auto; } } @media (max-width: 480px) { .hero { padding: 100px 0 60px; } .hero__headline { font-size: var(--font-size-2xl); } .hero__typing { font-size: var(--font-size-md); } .section-title { font-size: var(--font-size-2xl); } .services, .testimonials, .comparison, .case-studies, .get-to-know, .podcast, .about, .blog, .contact { padding: 60px 0; } .service-card, .testimonial-card, .comparison__column, .info-card, .episode-card, .blog-card, .contact__form { padding: var(--space-24); } } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* GPU ACCELERATION FOR SCROLL ELEMENTS */ .service-card, .testimonial-card, .case-study-card, .about__card, .blog-card { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; } /* Remove will-change after animations complete */ .service-card:not(:hover), .testimonial-card:not(:hover), .case-study-card:not(:hover), .about__card:not(:hover), .blog-card:not(:hover) { will-change: auto; } /* Button overrides for brand colors */ .btn--primary { background: var(--color-primary); border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn--primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); } /* Only prevent scrolling when the nav overlay is active on mobile */ @media (max-width: 768px) { .nav__menu.active { position: fixed; inset: 0; /* top/right/bottom/left: 0 */ overflow-y: auto; /* allow the menu itself to scroll if long */ background: var(--color-surface); z-index: 1001; } } /* HERO BACKGROUND OVERRIDE */ .hero { /* Solid red overlay */ background-color: rgb(192, 32, 38); /* Underlay construction image */ background-image: url("/construction.jpg"); /* Ensure full coverage and centering */ background-size: cover; background-position: center; background-repeat: no-repeat; /* Keep your gradient fallback removed if present */ } /* Mobile: darken hero overlay */ @media (max-width: 768px) { .hero { /* Add a dark overlay using multiple backgrounds: existing image + semi-transparent black layer */ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/construction.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } } @media (max-width: 768px) { .hero__headline { color: #FFFFFF !important; } } /* Desktop: hero headline black above mobile breakpoint */ @media (min-width: 769px) { .hero__headline { color: #000000 !important; } } /* Ensure text remains visible on red primary buttons when hovered/active/focused */ .btn--primary, .btn--primary:hover, .btn--primary:active, .btn--primary:focus { color: var(--color-btn-primary-text) !important; } /* Mobile Menu: fixed background in both light & dark modes */ @media (max-width: 768px) { .nav__menu, .nav__menu.active { background: var(--color-surface) !important; } } @media (max-width: 768px) and (prefers-color-scheme: dark) { .nav__menu, .nav__menu.active { background: var(--color-surface) !important; } } /* Header scroll effect with dark mode support */ .header.scrolled { background-color: rgba(var(--color-surface-rgb, 252, 252, 249), 0.95); backdrop-filter: blur(10px); } @media (prefers-color-scheme: dark) { .header.scrolled { background-color: rgba(var(--color-surface-rgb, 38, 40, 40), 0.95); backdrop-filter: blur(10px); } } /* Desktop: full-page hero */ @media (min-width: 769px) { .hero { min-height: 100vh !important; display: flex; flex-direction: column; justify-content: center; } } /* Hide break on mobile and tablets, show ONLY on desktop */ .desktop-br { display: none; } @media (min-width: 1489px) { .desktop-br { display: inline; } } /* ===== COMPLETE HERO HEADLINE RESPONSIVE SCALING ===== */ /* Base responsive hero headline scaling using clamp() */ .hero__headline { font-size: clamp(2.5rem, 6vw, 4rem) !important; line-height: clamp(1.2, 1.5vw, 1.1) !important; white-space: normal !important; } /* Mobile: Keep existing mobile styling intact (768px and below) */ @media (max-width: 768px) { .hero__headline { font-size: 2.5rem !important; /* Override clamp for mobile consistency */ text-align: center; line-height: 1.2 !important; } .hero__typing { font-size: calc(clamp(1.5rem, 4vw, 2.45rem) * var(--typing-scale-multiplier)) !important; } } /* Tablet-specific hero headline (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .hero__headline { text-align: center !important; max-width: 90vw; margin: 0 auto; font-size: clamp(3rem, 5vw, 3.5rem) !important; /* Tablet-specific scaling */ line-height: 1.15 !important; } .hero__content { max-width: 90vw !important; margin: 0 auto; } } /* Desktop: Force two-line hero headline (1025px and above) */ @media (min-width: 1025px) { .hero__headline { font-size: 4rem !important; /* Slightly reduce from 4.5rem to fit without extra wraps */ white-space: normal !important; /* Allow wrapping; override any nowrap */ line-height: 1.1 !important; /* Tighten for better two-line flow */ text-align: left !important; } .hero__content { max-width: 1080px !important; /* Widen container to accommodate text */ } .desktop-br { display: inline !important; /* Ensure break shows on desktop */ } .section-title { font-size: 2.8rem !important; /* increase from default 2.5rem */ } } /* Transparent header until scroll >200px - MOBILE ONLY */ @media (max-width: 768px) { .header { background: transparent !important; transition: background-color var(--duration-normal) var(--ease-standard); } .header.scrolled { background: var(--color-surface) !important; backdrop-filter: blur(10px); } } /* Dark-mode override - MOBILE ONLY */ @media (max-width: 768px) and (prefers-color-scheme: dark) { .header.scrolled { background: var(--color-charcoal-800) !important; backdrop-filter: blur(10px); } } /* Desktop: Always transparent, never changes */ @media (min-width: 769px) { .header { background: transparent !important; position: absolute !important; } .header.scrolled { background: transparent !important; backdrop-filter: none !important; } } /* Replace straight underline with hand-drawn cursive underline in blue */ u { /* Remove default underline */ text-decoration: none; /* Allow the element’s background to size to its own width */ display: inline-block; /* Swish-style background underline (brand-secondary #2c99f2) */ background-image: url("data:image/svg+xml;charset=UTF-8,\ \ \ "); background-repeat: repeat-x; background-position: 0 100%; /* Stretch the swish to match the ’s full width */ background-size: 100% 14px; /* Ensure proper display and positioning */ display: inline; position: relative; /* Lift text slightly to clear the swish */ padding-bottom: -1px; } /* On very narrow screens, if wrapping is needed */ @media (max-width: 768px) { u { /* Allow breaks but keep each segment underlined */ display: inline; background-size: auto 14px; text-decoration-skip-ink: none; } } @media (max-width: 768px) { a.btn[href="/call"], a.btn[href="http://dreamdeals.sg/call"] { color: #FFFFFF !important; } } /* Responsive typing text scaling - smooth transition */ .hero__typing { font-size: calc(clamp(1.5rem, 4vw, 2.45rem) * var(--typing-scale-multiplier)) !important; max-width: clamp(300px, 90vw, 1080px) !important; } /* Tablet-specific adjustments (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .hero__typing { white-space: normal !important; /* Allow wrapping on tablets */ overflow-wrap: break-word !important; display: flex !important; align-items: center; justify-content: center; text-align: center; font-size: calc(clamp(1.5rem, 4vw, 2.45rem) * var(--typing-scale-multiplier)) !important; } .typing-prefix { white-space: pre; /* Keeps prefix fixed without shifts */ } } /* Desktop: maintain existing behavior */ @media (min-width: 1025px) { .hero__typing { white-space: nowrap !important; overflow-wrap: normal !important; display: inline-flex; align-items: center; justify-content: flex-start; } } /* ==== COMPLETE TYPING CONTAINER RESPONSIVE SCALING ==== */ /* Base responsive typing container using clamp() */ .typing-container { min-width: clamp(12ch, 20vw, 18ch); } /* Mobile: Keep existing mobile behavior (768px and below) */ @media (max-width: 768px) { .typing-container { text-align: center; min-width: 12ch; } } /* Tablet-specific typing container (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .typing-container { text-align: center; min-width: 15ch; } #typingText { display: inline-block; white-space: normal; /* Allow wrapping on tablets */ } .typing-cursor { margin-left: 0; } } /* Desktop: Keep only the dynamic typing span fixed width to prevent shifts (1025px and above) */ @media (min-width: 1025px) { .typing-container { min-width: 18ch; text-align: left; } #typingText { display: inline-block; white-space: nowrap; } .typing-cursor { margin-left: 0; } } /* Override header bottom border color to #2c99f2 */ .header { border-bottom: 1px solid #2c99f2 !important; } /* Mobile: narrower header with explicit height cap */ @media (max-width: 768px) { .header { padding: var(--space-4) 0 !important; /* Further reduce to 4px vertical padding (8px total) */ max-height: 60px !important; /* Cap total height to 50px */ overflow: hidden !important; /* Prevent content overflow */ } .nav { padding: var(--space-4) 0 !important; /* Match reduced nav padding */ align-items: center !important; /* Center items vertically */ } .nav__logo img { max-width: 48px !important; /* Shrink logo */ content: url("/favicon-48x48.png") !important; height: auto !important; } .nav__toggle { padding: var(--space-4) !important; /* Reduce toggle padding */ } } /* Enhanced branding for Done For You Or Done With You section */ .done-for-you-section { background-color: var(--color-primary); /* #c02026 */ color: varcolor-btn-primary-text); /* cream/white for text */ padding: var(--space-40, 80px) 0; border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .done-for-you-section h2, .done-for-you-section h3, .done-for-you-section h4 { color: #ffffff; /* Force headings to white */ } .done-for-you-section h3 { font-size: var(--font-size-3xl); /* Match service-card__title size: 1.85rem */ } .done-for-you-section h4 { font-size: var(--font-size-2xl); /* Match service-card__title size: 1.55rem */ } .done-for-you-section .comparison__column { background-color: var(--color-primary); /* Cards use primary */ border: 3px solid var(--color-secondary-accent); /* Card border: #2c99f2 */ color: var(--color-btn-primary-text); border-radius: var(--radius-lg); padding: var(--space-32); text-align: center; box-shadow: 0 8px 24px rgba(44, 153, 242, 0.3); transition: all var(--duration-normal) var(--ease-standard); } .done-for-you-section .comparison__column:hover { border-color: var(--color-secondary-accent-hover); box-shadow: 0 16px 40px rgba(44, 153, 242, 0.4); transform: translateY(-8px); } .done-for-you-section .comparison__list li { color: var(--color-btn-primary-text); } .done-for-you-section .comparison__list li:last-child { border-bottom: none; } .done-for-you-section .comparison__column u { background-image: none !important; color: var(--color-btn-primary-text) !important; border-bottom: 2px solid var(--color-secondary-accent) !important; } .done-for-you-section .btn { background-color: var(--color-secondary-accent); color: var(--color-btn-primary-text); border: none; border-radius: var(--radius-base); padding: var(--space-8) var(--space-16); font-weight: var(--font-weight-semibold); transition: background-color var(--duration-fast) var(--ease-standard); } .done-for-you-section .btn:hover { background-color: var(--color-secondary-accent-hover); transform: translateY(-2px); } .done-for-you-section .btn:active { background-color: var(--color-secondary-accent-active); transform: translateY(0); } /* ====== Remove extra right padding on lists ======= */ .done-for-you-section .comparison__list { padding-right: 0 !important; /* eliminate right padding */ margin-right: 0 !important; /* eliminate right margin */ } /* ======= Force list items left-align on mobile ======= */ @media (max-width: 768px) { .done-for-you-section .comparison__column { padding: var(--space-16) !important; /* even tighter on mobile */ } .done-for-you-section .favicon-list li { text-align: left !important; /* override centered wrap */ padding-right: var(--space-16) !important; /* give breathing room */ } } /* Base styling for favicon lists */ .favicon-list { list-style: none; padding-left: 0; } .favicon-list li { position: relative; padding-left: 34px; margin-bottom: 2px; display: flex; align-items: left; } .favicon-list li::before { content: ""; position: absolute; left: 0; width: 26px; height: 26px; background-image: url('/favicon-48x48.png'); background-size: 26px 26px; background-repeat: no-repeat; background-position: center; } /* Responsive adjustments to favicon lists */ @media (max-width: 768px) { .favicon-list li { padding-left: 32px; } .favicon-list li::before { width: 24px; height: 24px; background-size: 24px 24px; } } /* Persistent Banner-Style Contact Form Notification on submit */ .form-message { position: relative; width: 100%; padding: var(--space-12) var(--space-16); margin: var(--space-16) 0; border-radius: var(--radius-base); font-family: var(--font-family-base); font-size: 18px; /* Minimum 18px as requested */ font-weight: var(--font-weight-bold); line-height: 1.4; display: flex; align-items: center; gap: var(--space-8); box-shadow: var(--shadow-sm); animation: slideIn 0.3s ease-out; } .form-message.status--success { background-color: #28a745; /* Success green */ color: white; border: 1px solid #1e7e34; } .form-message.status--warning { background-color: #fd7e14; /* Warning orange */ color: white; border: 1px solid #e55100; } .form-message.status--error { background-color: #dc3545; /* Error red */ color: white; border: 1px solid #c82333; } .form-message-icon { font-size: 20px; flex-shrink: 0; } .form-message-text { flex: 1; font-weight: var(--font-weight-bold); } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Mobile responsiveness */ @media (max-width: 768px) { .form-message { font-size: 16px; /* Slightly smaller on mobile but still bold */ padding: var(--space-10) var(--space-12); } .form-message-icon { font-size: 18px; } } /* ==== Make Done For You cards narrower and compact ====== */ .done-for-you-section .comparison__column { max-width: 550px !important; /* Limit max width to reduce breadth */ padding: 30px !important; /* Reduce padding for more compact content */ box-sizing: border-box; /* Ensure padding internal to width */ } /* === Increase list font size in Done For You section (desktop only) == */ @media (min-width: 769px) { .done-for-you-section .favicon-list li { font-size: calc(var(--font-size-base) * 1.25) !important; /* 25% larger */ } } /* ——— Surgical fix: indent for favicon-list in Done For You section ——— */ .done-for-you-section .favicon-list li { position: relative; padding-left: 42px !important; /* desired indent */ margin-bottom: 5px; /* optional spacing */ } /* ======= Hero Testimonial Section B MANI RAJA ========== */ .hero-testimonial { padding: 80px 0; background-image: url('/Mono-blue.png'); background-size: contain; background-position: 43.5% center; background-repeat: no-repeat; background-attachment: fixed; position: relative; border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .hero-testimonial::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); /* Semi-transparent black overlay */ z-index: 1; } .hero-testimonial .container { position: relative; z-index: 2; } .hero-testimonial__content { max-width: 1080px; margin: 0 auto; text-align: center; color: white; } .hero-testimonial__quote { margin-bottom: 40px; } .hero-testimonial__quote p { font-size: 1.9rem; line-height: 1.2; font-weight: var(--font-weight-medium); font-style: normal; margin: 0; position: relative; } .hero-testimonial__quote p::before { content: '"'; font-size: 4rem; position: absolute; top: -20px; left: -40px; color: var(--color-secondary-accent); /* #2c99f2 */ font-family: serif; } .hero-testimonial__quote p::after { content: '"'; font-size: 4rem; position: absolute; bottom: -40px; right: -40px; color: var(--color-secondary-accent); /* #2c99f2 */ font-family: serif; } .hero-testimonial__author { display: flex; align-items: center; justify-content: center; gap: 20px; } .hero-testimonial__avatar { width: 170px; height: 170px; border-radius: 50%; background: url('mani.png'); background-size: cover; background-position: center; border: 3px solid var(--color-secondary-accent); /* #2c99f2 */ box-shadow: 0 0 20px rgba(44, 153, 242, 0.3); } .hero-testimonial__info h4 { font-size: 1.7rem; font-weight: var(--font-weight-bold); color: white; margin: 0 0 5px 0; } .hero-testimonial__info p { font-size: 1.4rem; color: var(--color-secondary-accent); /* #2c99f2 */ margin: 0; font-weight: var(--font-weight-medium); } /* Mobile Responsive */ @media (max-width: 768px) { .hero-testimonial { padding: 80px 0; background-attachment: scroll; } .hero-testimonial__quote p { font-size: 1.5rem; line-height: 1.1; } .hero-testimonial__quote p::before, .hero-testimonial__quote p::after { font-size: 2.5rem; } .hero-testimonial__quote p::before { top: -15px; left: -20px; } .hero-testimonial__quote p::after { bottom: -25px; right: -20px; } .hero-testimonial__author { flex-direction: column; gap: 15px; } .hero-testimonial__avatar { width: 140px; height: 140px; } } @media (max-width: 480px) { .hero-testimonial { padding: 60px 0; } .hero-testimonial__quote p { font-size: 1.2rem; padding: 0 10px; } .hero-testimonial__quote p::before { left: -10px; top: -10px; font-size: 2rem; } .hero-testimonial__quote p::after { right: -10px; bottom: -20px; font-size: 2rem; } } /* FOOTER SECTION STYLING */ /* Alternative approach using a wrapper div - if you prefer this method */ .footer-banner-wrapper { background-color: var(--color-primary); /* #c02026 */ width: 100%; display: flex; justify-content: center; border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ padding: 80px 0; /* ADDED: Extra padding top/bottom in primary brand colour */ } .footer-banner { /* Construction background only on content area */ background: linear-gradient(rgba(192, 32, 38, 0.3), rgba(192, 32, 38, 0.3)), /*usual 0.65*/ url("/construction.png"); /*originally .jpg*/ background-size: cover; /*default is cover*/ background-position: 50% 62.5%; /* ADDED: Shifts position slightly below center (horizontal: center, vertical: 62.5% from top) */ background-repeat: no-repeat; padding: 80px 40px; text-align: center; width: 100%; max-width: 90%; position: relative; } .footer-banner__headline { font-size: 2.8rem !important; /* Matches .section-title size; adjust if needed (e.g., to 4rem for hero-like) */ font-weight: var(--font-weight-bold); color: var(--color-btn-primary-text); /* cream/white text */ margin: 0 0 var(--space-24) 0; } .footer-banner__cta { /* NEW: Secondary brand colour button */ background-color: var(--color-secondary-accent); /* #2c99f2 */ color: white; border: none; font-size: var(--font-size-lg); padding: var(--space-12) var(--space-32); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); text-decoration: none; display: inline-block; cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); box-shadow: 0 4px 12px rgba(44, 153, 242, 0.3); } .footer-banner__cta:hover { background-color: var(--color-secondary-accent-hover); /* #1a7dd9 */ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44, 153, 242, 0.4); } .footer-banner__cta:active { background-color: var(--color-secondary-accent-active); /* #0f5fb0 */ transform: translateY(0); } /* Responsive tweak: tighten spacing on small screens */ @media (max-width: 768px) { .footer-banner-wrapper { padding: 24px 0; /* ADDED: Reduced padding on mobile */ } .footer-banner { padding: 48px 20px; max-width: calc(100% - 40px); /* ADDED: Ensure left/right primary color padding visibility */ margin: 0 auto; /* ADDED: Center the banner to show side padding */ } .footer-banner__headline { font-size: var(--font-size-3xl); } .footer-banner__cta { font-size: var(--font-size-base); padding: var(--space-12) var(--space-24); } } /* Desktop only: Navigation link color changes based on scroll state and theme */ @media (min-width: 769px) { /* LIGHT MODE - Red links in both states */ .header .nav__link { color: var(--color-brand-primary) !important; /* #c02026 red */ transition: color var(--duration-normal) var(--ease-standard); } .header.scrolled .nav__link { color: var(--color-brand-primary) !important; /* Keep red in scrolled state too */ } /* DARK MODE - Red unscrolled, blue scrolled */ @media (prefers-color-scheme: dark) { .header .nav__link { color: var(--color-brand-primary) !important; /* #c02026 red for unscrolled */ } .header.scrolled .nav__link { color: var(--color-brand-secondary) !important; /* blue for scrolled state */ } } /* Manual theme switching support */ [data-color-scheme="dark"] .header .nav__link { } [data-color-scheme="dark"] .header.scrolled .nav__link { color: var(--color-brand-secondary) !important; } [data-color-scheme="light"] .header .nav__link { color: var(--color-brand-primary) !important; } [data-color-scheme="light"] .header.scrolled .nav__link { color: var(--color-brand-primary) !important; } } /* 1. Disable fixed bg in Chrome */ @media screen and (-webkit-min-device-pixel-ratio:0) { .hero-testimonial { background-attachment: scroll !important; } } /* 2. Promote heavy sections to their own layer */ .service-card, .hero-testimonial { transform: translate3d(0, 0, 0); will-change: transform, opacity; } footer p a { color: var(--color-secondary-accent) !important; text-decoration: underline; } /* ==== HERO TESTIMONIAL A TOMMY TEO COLOUR TOKENS ==== */ :root{ /* TODO: swap these for your brand colours */ --pp-primary: #c02026; /* primary brand */ --pp-primary-soft: rgba(44, 153, 242, 0.06); /* light secondary --pp-text: #fff; /* default heading/body colour */ } /* ========= LAYOUT ========== */ .pp-hero-testimonial{ position: relative; padding: 3.5rem 0; background: var(--pp-primary-soft); overflow: hidden; border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } /* Faint, enlarged logo watermark - shifted down by 5% */ .pp-hero-testimonial::before { content: ""; position: absolute; inset: 0; background: url("/Mono-red.png") 18% 65%/contain no-repeat; /* Horizontal shirt: 18% [left]| Vertical shift: center (50%) + 5% = 55% */ opacity: .25; pointer-events: none; } /* responsive wrapper */ .pp-hero-testimonial__container{ max-width:1300px; margin:0 auto; padding:0 1.25rem; display:flex; align-items:center; /* changed from 'center' due to iOS oval shape */ gap:4rem; } @media (max-width:950px){ .pp-hero-testimonial__container{ flex-direction:column; text-align:center; } } /* ===== MEDIA SIDE [iOS Complete Working Version] ===== */ .pp-hero-testimonial__media { position: relative; width: 400px; height: 400px; flex-shrink: 0; user-select: none; } /* Ensure proper rendering on iOS Safari (Complete Working version) */ .pp-hero-testimonial__photo { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: center; } /* magazine cover in front of image circle */ .pp-hero-testimonial__cover{ position:absolute; bottom:-20px; right:-25px; width:150px; box-shadow:0 6px 18px rgba(0,0,0,.50); border-radius:4px; } /* ========= COPY SIDE ========== */ .pp-hero-testimonial__copy{ flex:1 1 0; color:var(--pp-text); font-size:1.1rem; line-height:1.45; } .pp-hero-testimonial__copy u{ text-decoration-thickness:3px; text-underline-offset:3px; text-decoration-color:var(--pp-primary); } .pp-hero-testimonial blockquote{ margin:0 0 1.5rem; font-style:italic; } .pp-hero-testimonial__author{ margin:0 0 .25rem; font-size:1.2rem; font-weight:700; } .pp-hero-testimonial__subtitle{ margin:0; font-size:.95rem; opacity:.8; } @media (prefers-color-scheme:dark){ :root{ --pp-text:#fff; --pp-primary-soft:#262828; } .pp-hero-testimonial__ring, .pp-hero-testimonial__ring::before{ border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.15); } } /* mimic selection highlight */ .highlighted { background-color: #c02026; /* system highlight color (usually blue) */ line-height: 0.95 !important; /* match your text’s line height */ padding: 0 .1em; /* zero top/bottom, small left/right */ color: HighlightText; border-radius: 0px; user-select: none; } /* === SURGICAL FIX: Light mode text colors for pp-hero-testimonial === */ /* Default light mode colors for pp-hero-testimonial */ .pp-hero-testimonial__copy { color: #000000; /* Black text for light mode */ } .pp-hero-testimonial__copy p { color: #000000 !important; /* Ensure paragraph text is black in light mode */ } /* Keep dark mode styles intact */ @media (prefers-color-scheme: dark) { .pp-hero-testimonial__copy { color: #ffffff; /* White text for dark mode */ } .pp-hero-testimonial__copy p { color: #ffffff !important; /* White paragraph text for dark mode */ } } /* Manual theme switching support */ [data-color-scheme="light"] .pp-hero-testimonial__copy, [data-color-scheme="light"] .pp-hero-testimonial__copy p, [data-color-scheme="light"] .pp-hero-testimonial__info h4 { color: #000000 !important; } [data-color-scheme="dark"] .pp-hero-testimonial__copy, [data-color-scheme="dark"] .pp-hero-testimonial__copy p, [data-color-scheme="dark"] .pp-hero-testimonial__info h4 { color: #ffffff !important; } /* ========= SURGICAL FIX: Tommy Teo h4 class targeting ========= */ /* Fix the targeting - h4 HAS the class, not contains it */ h4.pp-hero-testimonial__info { color: #000000 !important; /* Black text for light mode */ } /* Keep dark mode styles intact */ @media (prefers-color-scheme: dark) { h4.pp-hero-testimonial__info { color: #ffffff !important; /* White text for dark mode */ } } /* Manual theme switching support */ [data-color-scheme="light"] h4.pp-hero-testimonial__info { color: #000000 !important; } [data-color-scheme="dark"] h4.pp-hero-testimonial__info { color: #ffffff !important; } /* Enhanced Heading hierarchy patch (mobile) =========== Ensures proper heading hierarchy: h1 > h2 > h3 > h4 on mobile. Uses higher specificity AT BOTTOM !important to override conflicts ------------------------------------------------------ */ @media (max-width: 768px) { /* Strong override for h2 elements - higher specificity */ section.hero.testimonials h2.hero__headline.section-title, h2.hero__headline.section-title, h2.section-title, h2.footer-banner__headline, h2.hero__headline { font-size: var(--font-size-3xl) !important; /* 1.85rem */ line-height: 1.25 !important; } /* Ensure h1 is clearly larger than h2 on mobile */ h1 { font-size: var(--font-size-4xl) !important; /* 2.25rem */ line-height: 1.2 !important; } /* set h3 to medium size for proper hierarchy */ .comparison__header h3 { font-size: var(--font-size-2xl); /* 1.55 rem */ } /* ensure h4 is smaller than h3 in done-for-you section */ .done-for-you-section h4 { font-size: var(--font-size-xl); /* 1.15 rem */ } /* === ADD THIS: MOBILE TESTIMONIALS H2 COLOR OVERRIDE === */ section.hero.testimonials h2.hero__headline.section-title, .testimonials h2.section-title, .testimonials .section-title { color: var(--color-brand-secondary) !important; /* Force blue on mobile */ } /* MISSING UTILITY CLASS - Brand secondary text color */ .text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 blue */ } /* SURGICAL FIX: Force brand secondary color on the specific hero testimonial paragraph */ .hero-testimonial__info p.text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 blue */ } } /* ALWAYS AT BOTTOM === END enhanced heading hierarchy patch */ /* === COMPLETE SURGICAL FIX: Brand secondary color for hero testimonial paragraph === */ /* Base rule - Targets the exact nested structure with maximum specificity */ .pp-hero-testimonial__copy .hero-testimonial__author .hero-testimonial__info p.text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 - overrides black !important */ } /* Dark mode support - Ensure same blue in dark mode */ @media (prefers-color-scheme: dark) { .pp-hero-testimonial__copy .hero-testimonial__author .hero-testimonial__info p.text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 */ } } /* Manual theme switching support */ [data-color-scheme="light"] .pp-hero-testimonial__copy .hero-testimonial__author .hero-testimonial__info p.text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 */ } [data-color-scheme="dark"] .pp-hero-testimonial__copy .hero-testimonial__author .hero-testimonial__info p.text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 */ } /* Mobile override - Ensure it works on small screens */ @media (max-width: 768px) { .pp-hero-testimonial__copy .hero-testimonial__author .hero-testimonial__info p.text-brand-secondary { color: var(--color-brand-secondary) !important; /* #2c99f2 */ } } /* Nuclear option - If still not working due to variable issues, hardcode the color */ .pp-hero-testimonial__copy .hero-testimonial__author .hero-testimonial__info p.text-brand-secondary { color: #2c99f2 !important; /* Direct hex fallback */ } /* ============ LIGHTWEIGHT PROTECTION CSS ============ */ /* Image protection */ img { pointer-events: none; -webkit-user-drag: none; -moz-user-drag: none; user-drag: none; } /* Print protection */ @media print { * { visibility: hidden !important; } body::after { content: "Content is protected and cannot be printed."; visibility: visible !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28 px; color: #000; } } /* Focus protection */ body:not(:focus-within) .protect-blur { filter: blur(15px); transition: filter 0.3s ease; } /* Mobile screenshot protection */ @media (max-width: 768px) { .mobile-protect { -webkit-touch-callout: none; -webkit-user-select: none; } } /* Hero CTA Large Padding Utility Class - Desktop Only */ @media (min-width: 769px) { .hero-cta-large { padding: 20px 40px !important; } } /* ===== SURGICAL FIX: MOBILE TYPING TEXT LEFT-ALIGN ======= */ .hero__typing { font-size: calc(var(--font-size-3xl) * var(--typing-scale-multiplier)); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-bottom: var(--space-32); min-height: 60px; display: flex; align-items: center; justify-content: flex-start; /* CHANGED: Default to left-align */ gap: var(--space-4); } /* Mobile-specific override (768px and below) - FORCE LEFT ALIGN */ @media (max-width: 768px) { .hero__typing { justify-content: flex-start !important; /* FORCE left alignment on mobile */ text-align: left !important; } .typing-container { text-align: left !important; /* CHANGED: Left-align container on mobile */ min-width: 12ch; } } /* Tablet-specific adjustments (769px - 1024px) - CENTER ONLY FOR TABLETS */ @media (min-width: 769px) and (max-width: 1024px) { .hero__typing { white-space: normal !important; overflow-wrap: break-word !important; display: flex !important; align-items: center; justify-content: center !important; /* Keep centered on tablets */ text-align: center; font-size: calc(clamp(1.5rem, 4vw, 2.45rem) * var(--typing-scale-multiplier)) !important; } } /* Desktop (1025px and above) - LEFT ALIGN */ @media (min-width: 1025px) { .hero__typing { justify-content: flex-start !important; /* Left-align on desktop */ text-align: left; } .typing-container { text-align: left; min-width: 18ch; } } /* ============ END SURGICAL FIX ============ */ @media (max-width: 768px) { /* Ensure typing text flows like a normal sentence on mobile */ .hero__typing { display: block !important; white-space: normal !important; overflow-wrap: break-word !important; text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; } /* Ensure the cursor stays just after the text, on its own line if necessary */ .typing-container { text-align: left !important; min-width: 12ch !important; display: inline-block !important; } .typing-cursor { left: auto !important; margin-left: 0 !important; display: inline-block !important; } } /* ========== DESKTOP NAVIGATION DROPDOWN STYLING ========== */ /* Dropdown container */ .nav__dropdown { position: relative; } /* Submenu styling */ .nav__submenu { position: absolute; top: 100%; left: 0; background: var(--color-surface); min-width: 200px; box-shadow: var(--shadow-lg); border-radius: var(--radius-base); border: 1px solid var(--color-border); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--duration-normal) var(--ease-standard); z-index: 1002; /* 1000 */ list-style: none; padding: var(--space-8) 0; margin: 0; } /* Show submenu on hover (desktop) */ @media (min-width: 769px) { .nav__dropdown:hover .nav__submenu { opacity: 1; visibility: visible; transform: translateY(7px) !important; /* was 0 without importance */ } } /* Submenu links */ .nav__sublink { display: block; padding: var(--space-10) var(--space-16); color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-base); transition: all var(--duration-fast) var(--ease-standard); border-radius: var(--radius-sm); margin: 0 var(--space-8); } .nav__sublink:hover { background: var(--color-secondary); color: var(--color-primary); } /* ─── MOBILE-ONLY: flat, indented submenu ─── */ @media (max-width: 768px) { /* Force submenu open and static on mobile */ .nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 0; max-height: none; overflow: visible; transition: none; } /* Indent each link */ .nav__sublink { display: block; margin: 0; padding: var(--space-8) var(--space-16); padding-left: calc(var(--space-16) * 2); border-left: 3px solid var(--color-secondary-accent); background: none; font-size: var(--font-size-x1); color: var(--color-text-secondary); } .mobile-nav-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-16) var(--space-24); background: var(--color-surface); } /* instead of .mobile-nav-logo, use: */ .nav__mobile-logo { background: url("/favicon-48x48.png") no-repeat left; width: 48px; height: 48px; } .mobile-nav-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-text); cursor: pointer; } /* Hook the close button to hide the menu */ .mobile-nav-close:hover { opacity: 0.7; } } /* ─── MOBILE-ONLY MENU HEADER ROW ─── */ @media (max-width: 768px) { /* container that holds logo + X */ .nav__mobile-header { background: var(--color-surface); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-16); } .nav__mobile-logo img { filter: none !important; } .nav__toggle.active span { background: var(--color-primary) !important; } /* favicon logo */ .nav__mobile-logo img { background: url("/favicon-48x48.png"); width: 48px; height: 48px; } /* position drawer below the header row */ .nav__menu { padding-top: 60px; /* same height as header row */ } /* transform hamburger into an X when active */ .nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(8px); } .nav__toggle.active span:nth-child(2) { opacity: 0; } .nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-8px); } /* thinner bars for cleaner X */ .nav__toggle span { height: 4px; transition: transform .3s var(--ease-standard), opacity .3s var(--ease-standard); } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .nav__submenu { background: var(--color-surface); border-color: var(--color-border); } } [data-color-scheme="dark"] .nav__submenu { background: var(--color-surface); border-color: var(--color-border); } /* 4. ENSURE MOBILE REMAINS UNCHANGED (preserve existing mobile functionality) */ @media (max-width: 768px) { /* Mobile navigation keeps all existing styles - DO NOT MODIFY */ .nav { /* Existing mobile styles preserved */ } } /* ===== END SURGICAL FIX ===== */ /* ================ AWARDS CAROUSEL SECTION ================ */ .awards-carousel { padding: 50px 0; /* original 80px */ background: var(--color-surface); border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ overflow: hidden; position: relative; } .awards-carousel .section-title { text-align: center; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-32); color: var(--color-text); } /* Awards Track Container */ .awards-track { display: flex; width: calc(280px * 38); /* 13 awards × 2 for seamless loop */ /* original 280px */ animation: scroll-awards 45s linear infinite; /* 13s */ gap: var(--space-24); } /* Seamless scrolling animation */ @keyframes scroll-awards { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-280px * 19 - 19 * var(--space-24))); } } /* Individual Award Card */ .award-card { flex: 0 0 auto; width: 280px; /* original 280px */ height: 155px; /* original 200px */ perspective: 1000px; } /* Award Plaque - 3D angled effect */ .award-plaque { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(44, 153, 242, 0.1) 50%, rgba(192, 32, 38, 0.1) 75%, rgba(255, 255, 255, 0.85) 100% ); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg); padding: var(--space-20); display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), inset 2px 2px 8px rgba(255, 255, 255, 0.3), inset -2px -2px 8px rgba(0, 0, 0, 0.2); transform: rotateY(-5deg) rotateX(2deg); transition: all var(--duration-normal) var(--ease-standard); position: relative; } /* Hover effect */ .award-plaque:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.05); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), inset 2px 2px 12px rgba(255, 255, 255, 0.5), inset -2px -2px 12px rgba(0, 0, 0, 0.3); } /* Award Header */ .award-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: var(--space-8); } .award-header h3 { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-primary); /* #c02026 red */ margin: 0; text-transform: uppercase; letter-spacing: 1px; } .award-year { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); background: rgba(255, 255, 255, 0.85); padding: 2px 6px; border-radius: var(--radius-sm); } /* Award Name - Client Name in Bold */ .award-name { font-size: var(--font-size-xl) !important; /* xl not 2xI */ font-weight: var(--font-weight-bold); color: var(--color-text); margin: var(--space-12) 0; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0); /* last value 0.5*/ } /* Award Achievement */ .award-achievement { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary-accent); /* #c02026 red */ text-transform: uppercase; letter-spacing: 0.5px; } /* Decorative elements */ .award-plaque::before { content: "★"; position: absolute; top: 8px; left: 8px; color: var(--color-secondary-accent); /* #2c99f2 blue star */ font-size: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .award-plaque::after { content: "🏆"; position: absolute; bottom: 8px; right: 8px; color: var(--color-secondary-accent); /* #2c99f2 blue star */ font-size: 23px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } /* Mobile Responsiveness */ @media (max-width: 768px) { .awards-carousel { padding: 60px 0; } .awards-track { width: calc(235px * 38); /* Smaller cards on mobile */ animation: scroll-awards-mobile 45s linear infinite; gap: var(--space-16); } @keyframes scroll-awards-mobile { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-235px * 19 - 19 * var(--space-16))); } } .award-card { width: 235px; height: 160px; } .award-plaque { padding: var(--space-16); transform: rotateY(-3deg) rotateX(1deg); } .award-header h3 { font-size: var(--font-size-xs); } .award-name { font-size: var(--font-size-base); margin: var(--space-8) 0; } .award-achievement { font-size: var(--font-size-xs); } } /* Tablet Responsiveness */ @media (min-width: 769px) and (max-width: 1024px) { .award-card { width: 240px; height: 180px; } .awards-track { width: calc(240px * 38); animation: scroll-awards-tablet 45s linear infinite; gap: var(--space-20); } @keyframes scroll-awards-tablet { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-240px * 19 - 19 * var(--space-20))); } } } /* Pause animation on hover - Desktop only */ @media (min-width: 769px) { .awards-carousel:hover .awards-track { animation-play-state: paused; } } /* Dark mode adjustments */ @media (prefers-color-scheme: dark) { .award-plaque { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(44, 153, 242, 0.1) 50%, rgba(192, 32, 38, 0.1) 75%, rgba(255, 255, 255, 0.85) 100% ); backdrop-filter: blur(10px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 2px 2px 8px rgba(255, 255, 255, 0.2), inset -2px -2px 8px rgba(0, 0, 0, 0.4); } .award-year { background: rgba(255, 255, 255, 0.9); color: var(--color-primary); } } [data-color-scheme="dark"] .award-plaque { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(44, 153, 242, 0.1) 50%, rgba(192, 32, 38, 0.1) 75%, rgba(255, 255, 255, 0.85) 100% ); backdrop-filter: blur(10px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 2px 2px 8px rgba(255, 255, 255, 0.2), inset -2px -2px 8px rgba(0, 0, 0, 0.4); } [data-color-scheme="dark"] .award-year { background: rgba(255, 255, 255, 0.9); color: var(--color-text); } /* ================= EMAIL SUBSCRIPTION FORM =============== */ /* Email subscription container */ .email-subscription { margin-top: var(--space-16); } /* Input group styling */ .email-input-group { display: flex; gap: 0; margin-bottom: var(--space-12); border-radius: 0; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-surface); } /* Email input styling */ .email-input { flex: 1; padding: var(--space-12) var(--space-16); border: none; background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-base); font-family: var(--font-family-base); outline: none; transition: all var(--duration-fast) var(--ease-standard); } .email-input::placeholder { color: var(--color-text-secondary); opacity: 0.7; } .email-input:focus { background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-secondary-accent); /* #2c99f2 */ } /* Submit button styling */ .email-submit-btn { padding: var(--space-12) var(--space-20); background: var(--color-secondary-accent); /* #2c99f2 */ color: white; border: none; cursor: pointer; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); transition: all var(--duration-fast) var(--ease-standard); display: flex; align-items: center; justify-content: center; min-width: 100px; } .email-submit-btn:hover:not(:disabled) { background: var(--color-secondary-accent-hover); /* #1a7dd9 */ transform: translateY(-1px); } .email-submit-btn:active:not(:disabled) { background: var(--color-secondary-accent-active); /* #0f5fb0 */ transform: translateY(0); } .email-submit-btn:disabled { background: var(--color-text-secondary); cursor: not-allowed; opacity: 0.6; } /* ====== EMAIL SUBSCRIPTION FORM THEME ADJUSTMENTS ====== */ /* Privacy notice */ .privacy-notice { color: var(--color-surface); /* match footer text */ } .privacy-link { color: var(--color-surface); /* match footer text */ } .privacy-link:hover { color: var(--color-surface); /* unchanged on hover */ } /* Message styling */ .subscription-message { color: var(--color-text) !important; /* match footer text */ } .subscription-message.success { background: rgba(var(--color-success-rgb), 0.15); border: 1px solid rgba(var(--color-success-rgb), 0.25); } .subscription-message.error { background: rgba(var(--color-error-rgb), 0.15); border: 1px solid rgba(var(--color-error-rgb), 0.25); } /* Mobile responsiveness */ @media (max-width: 768px) { .email-input-group { flex-direction: column; gap: 1px; } .email-submit-btn { border-radius: 0; } .email-input { border-radius: 0; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .email-input { background: var(--color-surface); color: var(--color-text); } .privacy-notice { color: rgba(245, 245, 245, 0.8); } } [data-color-scheme="dark"] .email-input { background: var(--color-surface); color: var(--color-text); } [data-color-scheme="dark"] .privacy-notice { color: rgba(245, 245, 245, 0.8); } /*====== Footer 5-column layout fix - UPDATED =========*/ /* Apply different layouts for different screen sizes */ /* Tablet Portrait: 3-column layout (769px - 1027px) */ /* Mobile (≤768px): single column */ @media (max-width: 768px) .footer__content { display: grid; grid-template-columns: 1fr; gap: var(--space-24); } /* Desktop (nav+): full five columns */ @media (min-width: 1028px) { .footer__content { display: grid; grid-template-columns: 2.25fr repeat(3, minmax(110px, 1fr)) 2.5fr; gap: 28px; } } /* Surgical fix: force justify email description from tablets */ @media (min-width: 1028px) { .footer__section .email-description { text-align: justify !important; text-align-last: justify !important; } @media (min-width: 1028px) and (max-width: 1366px) { body, .container, .main-content { overflow-x: hidden; } } /*== CONTACT FORM INPUT TEXT COLORS ACROSS GLOBAL DEVICES ===*/ .contact__form .form-control, .contact__form input, .contact__form textarea, .contact__form select { color: var(--color-text) !important; } } /*=END CONTACT FORM INPUT TEXT COLORS ACROSS GLOBAL DEVICES=*/ /* === HEADER PADDING== */ /* ─── Desktop header spacer for /contact */ @media (min-width: 769px) { body.header-padding::before { content: ""; display: block; height: var(--desktop-header-height, 99px); /* default 100 px */ background: transparent; width: 100%; } } @media (max-width: 768px) { body.header-padding::before { content: ""; display: block; height: var(--mobile-header-height, 0px); /* default 10 px */ background: transparent; width: 100%; } } /* OPTIONAL – keep the value in sync with the real menu height */ :root { --desktop-header-height: 99px; /* update if your header is taller */ --mobile-header-height: 0px; } /* =============== INTRO SECTION STYLING ================ */ #intro.intro { padding: 190px 0; background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), /*default 0.45*/ url("/construction.jpg") !important; background-size: cover !important; background-position: 50% 35% !important; background-repeat: no-repeat !important; width: 100%; border-top: 1px solid var(--color-secondary-accent); border-bottom: 2px solid var(--color-secondary-accent); position: relative; text-align: center !important; /* center headings globally */ } #intro.intro h1, #intro.intro h2, #intro.intro h3, #intro.intro h4 { color: #FFFFFF !important; /* make all headings white */ margin-bottom: var(--space-16); line-height: 1.2 !important; } /* Responsive font scaling */ #intro.intro h1 { font-size: clamp(2.5rem, 6vw, 4rem) !important; } #intro.intro h2 { font-size: clamp(1.75rem, 3vw, 2.25rem) !important; } #intro.intro h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important; } /* Mobile-specific overrides */ @media (max-width: 768px) { #intro.intro h1 { font-size: 2.5rem !important; } #intro.intro h2 { font-size: 1.75rem !important; } #intro.intro h3 { font-size: 1.25rem !important; } } /* Tablet-specific overrides */ @media (min-width: 769px) and (max-width: 1024px) { #intro.intro h1 { font-size: clamp(3rem, 5vw, 3.5rem) !important; } #intro.intro h2 { font-size: clamp(2rem, 4vw, 2.25rem) !important; } #intro.intro h3 { font-size: clamp(1.35rem, 3vw, 1.75rem) !important; } } /* Button styling */ #intro.intro .btn { display: inline-block; margin-top: var(--space-24); text-align: center; } /* =============== END INTRO SECTION STYLING =============== */ /* =============== START CONTEXT SECTION STYLING =============== */ .context { padding: 70px 0; background: var(--color-surface); border-top: 2px solid var(--color-secondary-accent); /* #2c99f2 */ border-bottom: 2px solid var(--color-secondary-accent); /* #2c99f2 */ text-align: center; /* Center align all content */ } .context .container { max-width: 1200px; margin: 0 auto; text-align: center; } .context h2, .context h3, .context p { text-align: center !important; /* Force center alignment for all headings and paragraphs */ } .context h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-16); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } .context h2.section-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-32); color: var(--color-text); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } .context .about__content { max-width: 1080px; margin: 0 auto; text-align: center; } .context .about__content p { font-size: var(--font-size-lg); /* Default from about section */ color: var(--color-text); line-height: var(--line-height-normal); margin: 0; /* Remove default paragraph margin for cleaner spacing */ } /* Mobile Responsiveness */ @media (max-width: 768px) { .context { padding: 60px 0; } .context h3 { font-size: var(--font-size-xl); } .context h2.section-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-24); } .context .about__content p { font-size: var(--font-size-base); } } @media (max-width: 480px) { .context { padding: 60px 0; } .context h3 { font-size: var(--font-size-lg); } .context h2.section-title { font-size: var(--font-size-xl); } } /* =============== END CONTEXT SECTION STYLING =============== */ /* ========== FOUNDER SECTION YASSER KHAN STYLING ========== */ /* Founder Section - Based on pp-hero-testimonial structure */ .founder { position: relative; padding: 4.8rem 0; background: var(--pp-primary-soft); border-top: 1px solid var(--color-secondary-accent); border-bottom: 1px solid var(--color-secondary-accent); overflow: hidden; } /* Responsive wrapper */ .founder__container { max-width: 1400px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; gap: 2.8rem; } @media (max-width: 1080px) { .founder__container { flex-direction: column; text-align: center; } } /* ===== FOUNDER MEDIA SIDE ===== */ .founder__media { position: relative; width: 500px; height: 500px; flex-shrink: 0; user-select: none; } /* Ensure proper rendering on iOS Safari */ .founder__photo { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: center; } /* Book cover in front of image circle */ .book { position: absolute; bottom: -20px; right: -25px; width: 180px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.0); border-radius: 0px; } /* ========= FOUNDER COPY SIDE ========== */ .founder__copy { flex: 1 1 0; color: var(--pp-text); font-size: 1.3rem; line-height: 1.2; } /* Proper paragraph spacing for founder content */ .founder__copy p { margin-bottom: 1.1rem !important; font-size: 1.2rem; line-height: 1.2; } .founder__copy u { text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-color: var(--pp-primary); } .founder blockquote { margin: 0 0 1.5rem; font-style: normal; } .founder__quote { margin-bottom: 1.2rem; } .founder__quote p { font-style: normal; font-size: 1.2rem; line-height: 1.25; margin: 0; } .founder__name { margin: 0 0 0.25rem; font-size: 1.3rem; font-weight: 900; } .founder__info { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 700; color: var(--pp-text); } .founder__info h4 { margin: 0 0 0.25rem; font-size: 1.4rem; font-weight: 900; color: var(--pp-text); } /* Mobile responsiveness */ @media (max-width: 768px) { .founder__media { width: 440px; height: 440px; } .book { width: 160px; bottom: -15px; right: -20px; } .founder__copy { font-size: 1.2rem; margin-bottom: 1.2rem !important; } } @media (max-width: 480px) { .founder__media { width: 380px; height: 380px; } .book { width: 120px; bottom: -10px; right: -15px; } .founder__copy { font-size: 1.1rem; margin-bottom: 1.1rem !important; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .founder__copy { color: #ffffff; } .founder__copy p { color: #ffffff !important; } .founder__info h4 { color: #ffffff !important; } } /* Manual theme switching support */ [data-color-scheme="light"] .founder__copy, [data-color-scheme="light"] .founder__copy p, [data-color-scheme="light"] .founder__info h4 { color: #000000 !important; } [data-color-scheme="dark"] .founder__copy, [data-color-scheme="dark"] .founder__copy p, [data-color-scheme="dark"] .founder__info h4 { color: #ffffff !important; } /* Ensure proper text color inheritance */ .founder__copy { color: var(--pp-text); } .founder__copy p { color: inherit; } .founder__info h4 { color: inherit; } /* =============== END FOUNDER SECTION STYLING =============== */ /* ============ START BOOKINGS SECTION STYLING ============ */ .bookings-section { background-color: var(--color-primary); /* #c02026 - same red as services */ padding: 40px 0; color: white; position: relative; border-bottom: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .bookings-section .title { color: white; font-size: 2.8rem; font-weight: var(--font-weight-bold); margin-bottom: 2px; text-align: center; } .bookings__grid { display: grid; grid-template-columns: 1fr 1fr; /* Two equal columns */ gap: 50px; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-16); align-items: center; } .bookings__column { display: flex; flex-direction: column; } .bookings__column h3 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: white; margin-bottom: var(--space-24); line-height: var(--line-height-tight); } /* Image column specific styling */ .bookings__image-column { display: flex; justify-content: center; align-items: center; position: relative; /* ADD THIS: Creates positioning context for the overlay */ } .bookings__image { max-width: 90%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform var(--duration-normal) var(--ease-standard); user-select: none; } .bookings__image:hover { transform: translateY(-8px); } /*Logo overlay positioned on top right - on parent container */ .bookings__image-column { position: relative; overflow: visible; /* allow the ::after to show */ } /* Logo overlay on the container */ .bookings__image-column::after { content: ""; position: absolute; /* Move the overlay 50px down plus half its own height (75px) */ top: calc(50px - 30px); /* Move the overlay 50px left from the right edge minus half its width */ right: calc(50px - 70px); width: 155px; height: 155px; background: url("/Mono-blue.png") no-repeat center center; background-size: contain; z-index: 10; pointer-events: none; opacity: 0.55; transition: opacity var(--duration-normal) var(--ease-standard); } @media (max-width: 768px) { .bookings__image-column::after { width: 100px; height: 100px; top: calc(8px + 10px); /* 8px + half of 80px */ right: calc(8px - 10px); /* 8px minus half of 80px */ } } /* Ensure favicon-list styling works in bookings section */ .bookings-section .favicon-list li { color: white !important; font-size: calc(var(--font-size-base) * 1.25) !important; /* 25% larger like service cards */ line-height: var(--line-height-normal); margin-bottom: 8px; } /* Mobile Responsiveness */ @media (max-width: 768px) { .bookings-section { padding: 60px 0; } .bookings-section .title { font-size: 2.2rem; margin-bottom: 2px; } .bookings__grid { grid-template-columns: 1fr; /* Stack vertically on mobile */ gap: 32px; } .bookings__column h3 { font-size: var(--font-size-2xl); text-align: center; } .bookings__image { max-width: 105%; } } @media (max-width: 480px) { .bookings-section { padding: 40px 0; } .bookings__grid { gap: 24px; } .bookings__column { padding: 0 var(--space-16); } } /* ============ END BOOKINGS SECTION STYLING ============ */ /* ============ START CLOSINGS SECTION STYLING ============ */ .closings-section { background-color: var(--color-secondary-accent); /* #2c99f2 */ padding: 40px 0; color: white; position: relative; border-bottom: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .closings-section .title { color: white; font-size: 2.8rem; font-weight: var(--font-weight-bold); margin-bottom: 2px; text-align: center; } .closings__grid { display: grid; grid-template-columns: 1fr 1fr; /* Two equal columns */ gap: 50px; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-16); align-items: center; } .closings__column { display: flex; flex-direction: column; } .closings__column h3 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: white; margin-bottom: var(--space-24); line-height: var(--line-height-tight); } /* Image column specific styling */ .closings__image-column { display: flex; justify-content: center; align-items: center; position: relative; /* For positioning context for overlay */ } .closings__image { max-width: 90%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform var(--duration-normal) var(--ease-standard); user-select: none; } .closings__image:hover { transform: translateY(-8px); } /*Logo overlay positioned on top right - on parent container */ .closings__image-column { position: relative; overflow: visible; /* allow the ::after to show */ } /* Logo overlay on the container */ .closings__image-column::after { content: ""; position: absolute; /* Move the overlay 50px down plus half its own height (75px) */ top: calc(50px + 100px); /* Move the overlay 50px left from the right edge minus half its width */ left: calc(50px - 70px); width: 155px; height: 155px; background: url("/Mono-red.png") no-repeat center center; background-size: contain; z-index: 10; pointer-events: none; opacity: 0.55; transition: opacity var(--duration-normal) var(--ease-standard); } @media (max-width: 768px) { .closings__image-column::after { width: 100px; height: 100px; top: calc(10px + 90px); /* 8px + half of 80px */ right: calc(8px - 10px); /* 8px minus half of 80px */ } } /* Ensure favicon-list styling works in bookings section */ .closings-section .favicon-list li { color: white !important; font-size: calc(var(--font-size-base) * 1.25) !important; /* 25% larger like service cards */ line-height: var(--line-height-normal); margin-bottom: 8px; } /* Mobile Responsiveness */ @media (max-width: 768px) { .closings-section { padding: 60px 0; } .closings-section .title { font-size: 2.2rem; margin-bottom: 2px; } .closings__grid { grid-template-columns: 1fr; /* Stack vertically on mobile */ gap: 32px; } .closings__column h3 { font-size: var(--font-size-2xl); text-align: center; } .closings__image { max-width: 105%; } } @media (max-width: 480px) { .closings-section { padding: 40px 0; } .closings__grid { gap: 24px; } .closings__column { padding: 0 var(--space-16); } } /* Mobile (≤768px): coaching section image ABOVE text */ @media (max-width: 768px) { .bookings-section .bookings__grid { display: flex; flex-direction: column; } /* Image column first */ .bookings-section .bookings__image-column { order: 1; margin-bottom: 1rem; /* space to text */ } /* Text column second */ .bookings-section .bookings__column:not(.bookings__image-column) { order: 2; } /* Ensure full-width image */ .bookings-section .bookings__image { max-width: 100%; height: auto; } .bookings-section .btn--xl, .bookings-section .hero-cta-large { font-size: var(--font-size-lg) !important; } } /* ============ END CLOSINGS SECTION STYLING ============ */ /*!--====== [START] FOOTER ICONS DARK MODE SUPPORT ====--!*/ @media (prefers-color-scheme: dark) { /* Footer social icons: invert white to black */ .footer__section.footer__social a svg { filter: invert(1) !important; /* Turns white to black */ } } /*!--====== [END] FOOTER ICONS DARK MODE SUPPORT ====--!*/ /*--===============[START] TERMS SECTION ===========--*/ .terms { padding-top: 25px !important; } .terms .terms h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin: var(--space-32) 0 var(--space-16) 0; line-height: var(--line-height-tight); } .terms .terms h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: var(--space-24) 0 var(--space-12) 0; line-height: var(--line-height-tight); } .terms .terms p { font-size: var(--font-size-base); line-height: var(--line-height-tight); margin-bottom: var(--space-8); color: var(--color-text); text-align: left; } .terms address { font-size: var(--font-size-base); line-height: var(--line-height-tight); margin-bottom: var(--space-12); color: var(--color-text); text-align: left; font-style: normal; /* Remove default italic styling */ } .terms .terms ul { margin: var(--space-16) 0; padding-left: var(--space-32); } .terms .terms li { font-size: var(--font-size-base); line-height: var(--line-height-tight); margin-bottom: var(--space-6); color: var(--color-text); } .terms .terms a { color: var(--color-primary); text-decoration: underline; } .terms .terms a:hover { color: var(--color-primary-hover); } .terms .terms strong { font-weight: var(--font-weight-bold); } /* Ensure proper spacing for the datetime script section */ .terms .terms script { display: block; margin: var(--space-16) 0; } /* Mobile responsive adjustments for terms page */ @media (max-width: 768px) { .terms .terms h3 { font-size: var(--font-size-lg); margin: var(--space-24) 0 var(--space-12) 0; } .terms .terms h4 { font-size: var(--font-size-base); margin: var(--space-16) 0 var(--space-8) 0; } .terms .terms p { font-size: var(--font-size-sm); } .terms address { font-size: var(--font-size-sm); } .terms .terms ul { padding-left: var(--space-20); } .terms .terms li { font-size: var(--font-size-sm); } .terms { padding-top: 12px !important; } } /*--===============[END] TERMS SECTION ===========--*/ /* ============ FULLBANNER SECTION STYLING =========== */ /* Fullbanner wrapper - matches footer-banner-wrapper */ /* ======= FULLBANNER SECTION SURGICAL FIX ========= */ /* Outer wrapper (primary red background) */ #fullbanner .fullbanner-wrapper { background-color: var(--color-primary); /* red */ border-top: 2px solid var(--color-secondary-accent); border-bottom: 2px solid var(--color-secondary-accent); padding: 0px 0; display: flex; justify-content: center; } /* Inner banner container (construction bg + overlay) */ #fullbanner .fullbanner { background: linear-gradient(rgba(192,32,38,0.80), rgba(192,32,38,0.80)), url("/pastel.jpg") center/cover no-repeat; background-position: 50% 45.5% !important; width: 100%; max-width: 100%; /* adjust as needed */ padding: 90px 40px; text-align: center; position: relative; } /* Content alignment */ #fullbanner .fullbanner__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); } /* Headline styling */ #fullbanner .fullbanner-headline { font-size: 4rem !important; font-weight: var(--font-weight-bold); color: var(--color-btn-primary-text); margin: 0 0 var(--space-24) 0; line-height: var(--line-height-tight); } /* Reuse existing CTA styles */ #fullbanner .footer-banner__cta { /* no additional overrides needed */ } /* Mobile tweaks */ @media (max-width: 768px) { #fullbanner .fullbanner-wrapper { padding: 24px 0; } #fullbanner .fullbanner { padding: 48px 20px; max-width: calc(100% - 40px); } #fullbanner .fullbanner-headline { font-size: var(--font-size-4xl) !important; } } @media (max-width: 480px) { #fullbanner .fullbanner { padding: 32px 16px; } #fullbanner .fullbanner-headline { font-size: var(--font-size-4xl) !important; } } /* === SURGICAL FIX: Fullbanner Headings White in Light Mode ==== */ /* Target fullbanner headings (h3 or h4) */ #fullbanner .fullbanner h3, #fullbanner .fullbanner h4, #fullbanner .fullbanner-headline { color: #fff !important; } /* Scope specifically to light mode */ @media (prefers-color-scheme: light), [data-color-scheme="light"] { #fullbanner .fullbanner h3, #fullbanner .fullbanner h4, #fullbanner .fullbanner-headline { color: #fff !important; } } /* If nested inside the wrapper */ #fullbanner .fullbanner-wrapper .fullbanner h3, #fullbanner .fullbanner-wrapper .fullbanner h4, #fullbanner .fullbanner-wrapper .fullbanner-headline { color: #fff !important; } /* ============ END FULLBANNER SECTION STYLING ============ */ /* Ensure contact page section headings are white in light mode */ @media (prefers-color-scheme: light), [data-color-scheme="light"] { .contact-wrapper .contact#contact .contact__info h4 { color: #fff !important; } } /* Also apply regardless of theme, if nested under contact-wrapper */ .contact-wrapper .contact#contact .contact__info h4 { color: #fff !important; text-align: center !important; } /* ======= DEFINITIVE PILL FIX (replaces previous attempts) ======= */ /* 1. Base .pill style for standalone use (e.g., in headings) */ .pill { display: inline-block; /* Allows padding/border */ border-radius: var(--radius-full); box-sizing: border-box; padding: 0.10em 0.45em; /* Default padding for headings/standalone */ background-color: transparent; color: inherit !important; font-weight: inherit !important; line-height: 1.0; /* A standard line-height for block-like pills */ text-align: center; border: 2px solid var(--color-secondary-accent); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } /* 2. SURGICAL FIX: Override for elements */ p.pill { display: inline !important; /* Keep it inline, not block */ font-size: inherit !important; /* Match parent paragraph font size */ line-height: inherit !important; /* Match parent line-height */ vertical-align: baseline !important; /* Align with text baseline */ padding: 0.10em 0.45em !important; /* Minimal vertical padding */ margin: 0 0.2em !important; /* Small horizontal gap */ } .pill.h3, h3.pill { display: inline-block; /* Block for headings is okay */ padding: 0.4em 0.8em; line-height: 1.2; /* Specific line-height for headings */ } .pill.h4, h4.pill { display: inline-block; /* Block for headings is okay */ padding: 0.35em 0.6em; line-height: 1.10; /* Specific line-height for headings */ } /* === ADDED TO PRESERVE H5 PILL STYLE === */ .pill.h5, h5.pill { display: inline-block; /* Keep as block-level for headings */ padding: 0.3em 0.6em; /* Custom padding for h5 */ line-height: 0.85; /* Consistent line-height for headings */ } /* === END ADDITION === */ /* Responsive: mobile (≤768px) = even tighter for mobile readability */ @media (max-width: 768px) { .pill { padding: 0.2em 0.5em; /* REDUCED: tighter on mobile */ font-size: 0.9em; /* ADDED: slightly smaller on mobile */ text-align: center !important; /* This centers inline content inside the pill, BUT: */ display: inline-block !important; margin-left: auto !important; margin-right: auto !important; } /* Ensure parent centers children: */ .pill-container { text-align: center !important; margin-bottom: 20px !important; } .pill.p, p .pill { padding: 0.1em 0.4em; /* REDUCED: very tight for mobile paragraphs */ font-size: 0.85em; /* ADDED: smaller for mobile paragraph text */ } .pill.h3, h3.pill { padding: 0.35em 0.65em; } .pill.h4, h4.pill { padding: 0.20em 0.50em; } /* === ADDED FOR H5 PILL RESPONSIVENESS === */ .pill.h5, h5.pill { padding: 0.2em 0.5em; } /* === END ADDITION === */ } /* Device mode: dark - high contrast pill */ @media (prefers-color-scheme: dark), [data-color-scheme="dark"] { .pill { background-color: transparent; color: inherit !important; border-color: var(--color-secondary-accent-hover); } } /* ============ END: DEVICE-MODE PILL UTILITY ============ */ /* ==== SURGICAL FIX: Footer Banner Light Mode Text & Spacing ===== */ /* Ensure .footer-banner h3 is white, has margin-bottom in light mode */ .footer-banner h3, .footer-banner__headline { color: #fff !important; margin-bottom: 24px !important; } /* Scope only to light mode */ @media (prefers-color-scheme: light), [data-color-scheme="light"] { .footer-banner h3, .footer-banner__headline { color: #fff !important; margin-bottom: 24px !important; } } /* If .footer-banner is nested inside a wrapper, ensure specificity */ .footer-banner-wrapper .footer-banner h3, .footer-banner-wrapper .footer-banner__headline { color: #fff !important; margin-bottom: 24px !important; } /* ============ END SURGICAL FIX ============ */ /* =========================================================== */ /* DEFINITIVE SPACING & CENTERING FIX: Blog Button */ /* This corrects the margin collapsing issue. */ /* =========================================================== */ /* Step 1: REMOVE any bottom margin from the blog grid to prevent conflicts with the button's spacing. */ .blog__grid { margin-bottom: 0 !important; } /* Step 2: Control the button's centering and spacing ENTIRELY from its container. This provides a single source of truth. */ .blog-button-container { text-align: center !important; /* Centers button horizontally */ margin-top: 64px !important; /* Correct gap ABOVE button */ margin-bottom: 0 !important; /* Removes any unwanted space BELOW */ } /* Step 3: Ensure the button itself has no vertical margins and does not stretch to full width. */ .blog__cta { display: inline-block !important; /* Allows centering via text-align */ width: auto !important; /* Shrinks button to fit its text */ margin-top: 0 !important; margin-bottom: 16px !important; } /* 404 illustration image full-bleed without scrollbar */ /* 1. Add this rule for the parent section to hide the overflow * This is the key to removing the horizontal scrollbar. */ .error-404.not-found { overflow-x: hidden; } /*2. Your original code for the illustration remains the same. * It creates the full-bleed effect. */ .error-404-illustration { display: block; width: 100vw; max-width: none; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: auto; opacity: 1; margin-bottom: -120px !important; } /* =========================================================== */ /* FINAL 404 Page 4-Button Grid Alignment */ /* =========================================================== */ /* Make the 4-button container a 2-column grid */ .btn-grid-404 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; width: 100%; max-width: 800px; margin: 0 auto; } .btn-grid-404 .btn { /* CORRECTED 4-BUTTON STYLING */ display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; /* REMOVED height: 100% !important; */ padding: var(--space-12) var(--space-16) !important; /* ADJUSTED PADDING */ box-sizing: border-box !important; } .grid-404 { /* 404 layout: list 3/5, image 2/5 */ display: grid !important; grid-template-columns: 4fr 3fr !important; gap: 32px !important; align-items: start; } /* Mobile (≤768px): single-column and slimmer buttons */ @media (max-width: 768px) { .btn-grid-404 { grid-template-columns: 1fr !important; } .btn-grid-404 .btn { /* ADD THIS to slim buttons on mobile */ padding: var(--space-10) var(--space-16) !important; } .grid-404 { grid-template-columns: 1fr !important; gap: 16px !important; } } /* 404 headings styled like bookings */ .error-404 h2, .error-404 h4 { color: white !important; margin: 0 0 16px 0; line-height: 1.2; font-weight: 950; /* matches --font-weight-bold */ } /* Inherit bookings font sizes */ .error-404 h2 { font-size: 2.8rem; /* same as .bookings-section .title */ } .error-404 h4 { font-size: 1.85rem; /* approx. var(--font-size-3xl) */ } /* Mobile scaling */ @media (max-width: 768px) { .error-404 h2 { font-size: 2.2rem; /* matches mobile bookings */ } .error-404 h4 { font-size: 1.55rem; /* matches mobile bookings sub-title */ } } hr { margin: 60px 0 !important; } @media (max-width: 768px) { hr { margin: 30px 0 !important; } } /* ======== [START] WORDPRESS SINGLE.PHP SINGLE POST STYLING ========*/ /* Ensure main content is offset below fixed header */ .single-post { padding-top: 70px; /* adjust if header height differs */ padding-bottom: 30px; } /* Dark background fix if body inherits charcoal */ .single-post, .single-post .post-entry { background-color: var(--color-background); color: var(--color-text); } /* Ensure links in content are visible */ .post-content a { color: var(--color-primary); } /* Prevent featured image from overflowing */ .post-featured-image img { width: 100%; height: auto; margin-bottom: var(--space-24); } /* Scope container max-width and padding */ .container.single-post.container { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-16); } /* Fix for paragraph margins within content */ .post-content p { margin-bottom: var(--space-16); } /* Ensure pagination nav stands out */ .post-pagination { margin: var(--space-32) 0; text-align: center; } .post-pagination .page-links-title { font-weight: var(--font-weight-medium); margin-right: var(--space-8); } /* Comments area spacing */ .comments-area { margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--color-border); } /* Author link hover state */ .post-meta a:hover { text-decoration: underline; color: var(--color-primary-hover); } @media (max-width: 768px) { .single-post { padding-top: 50px; padding-bottom: 15px; }} /* ========== [END] WORDPRESS SINGLE POST STYLING ==========*/ /* ============ FAQ ACCORDION TOGGLE STYLES ============ */ .faq-accordion { display: flex; flex-direction: column; gap: var(--space-16); } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-base); overflow: hidden; transition: box-shadow var(--duration-normal) var(--ease-standard); } .faq-item:hover { box-shadow: var(--shadow-sm); } .faq-question { width: 100%; padding: var(--space-16) var(--space-20); background: var(--color-surface); border: none; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); transition: all var(--duration-fast) var(--ease-standard); } .faq-question:hover { background: var(--color-secondary); } .faq-question:focus { outline: var(--focus-outline); outline-offset: 2px; } .faq-question span:first-child { flex: 1; margin-right: var(--space-16); } .faq-icon { font-size: var(--font-size-xl); font-weight: var(--font-weight-normal); color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-standard); flex-shrink: 0; } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-standard); } .faq-answer.open { max-height: 200px; } .faq-content { padding: var(--space-16) var(--space-20); background: var(--color-background); border-top: 1px solid var(--color-border); } .faq-content p { margin: 0; color: var(--color-text); line-height: var(--line-height-normal); } /* Mobile responsive adjustments */ @media (max-width: 768px) { .faq-question { padding: var(--space-12) var(--space-16); font-size: var(--font-size-sm); } .faq-content { padding: var(--space-12) var(--space-16); } .faq-answer.open { max-height: 250px; } } /* ============ END FAQ ACCORDION TOGGLE STYLES ============ */ /* ============= TOGGLE FUNCTIONALITY STYLING ============= */ .toggle-container { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-20); } .toggle { border: 1px solid var(--color-border); border-radius: var(--radius-base); overflow: hidden; transition: all var(--duration-normal) var(--ease-standard); } .toggle:hover { border-color: var(--color-btn-primary-text); } .toggle-header { width: 100%; padding: var(--space-16) var(--space-20); background: transparent; border: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all var(--duration-fast) var(--ease-standard); color: var(--color-btn-primary-text); font-family: var(--font-family-base); font-size: var(--font-size-xl); /* scaled up from lg */ font-weight: var(--font-weight-medium); } .toggle-header:hover { background: var(--color-secondary); } .toggle-header:focus { outline: var(--focus-outline); outline-offset: -2px; } .toggle-question { flex: 1; padding-right: var(--space-16); } .toggle-icon { font-size: var(--font-size-2xl); /* scaled up from xl */ font-weight: var(--font-weight-bold); color: var(--color-btn-primary-text); transition: transform var(--duration-fast) var(--ease-standard); display: inline-block; width: 24px; text-align: center; } .toggle-header[aria-expanded="true"] .toggle-icon { transform: rotate(45deg); } .toggle-content { max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-standard); } .toggle-content[aria-hidden="false"] { max-height: 500px; } .toggle-body { padding: 0 var(--space-20) var(--space-16) var(--space-20); } .toggle-body p { margin: 0; color: var(--color-btn-primary-text); line-height: var(--line-height-normal); font-size: var(--font-size-lg); /* scaled up from base */ } /* Mobile Responsiveness */ @media (max-width: 768px) { .toggle-header { padding: var(--space-12) var(--space-16); font-size: var(--font-size-lg); /* scaled up from base */ } .toggle-body { padding: 0 var(--space-16) var(--space-12) var(--space-16); } .toggle-question { padding-right: var(--space-12); } } /* ============ END TOGGLE FUNCTIONALITY STYLING ============ */ /* ============ STEPS SECTION STYLING ============ */ .steps { padding: 60px 0; background: var(--color-surface); /* border-top: 2px solid var(--color-secondary-accent); #2c99f2 */ border-bottom: 2px solid var(--color-secondary-accent); /* #2c99f2 */ } .steps .section-title { text-align: center; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-32); color: var(--color-text); } .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); /* 32 */ max-width: 1400px; margin: 0 auto; padding: 0 var(--space-1); } .steps__card { background: var(--color-background); border: 3px solid var(--color-secondary-accent); /* #2c99f2 */ border-radius: var(--radius-xl); padding: var(--space-20); text-align: center; box-shadow: 0 8px 24px rgba(44, 153, 242, 0.15); transition: all var(--duration-normal) var(--ease-standard); position: relative; display: flex; flex-direction: column; align-items: center; } .steps__card_red { background: var(--color-background); border: 3px solid var(--color-primary); border-radius: var(--radius-xl); padding: var(--space-20); text-align: center; box-shadow: 0 8px 24px rgba(192, 32, 38, 0.15); transition: all var(--duration-normal) var(--ease-standard); position: relative; display: flex; flex-direction: column; align-items: center; } .steps__card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(44, 153, 242, 0.2); border-color: var(--color-secondary-accent-hover); } .steps__card_red:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(192, 32, 38, 0.2); border-color: var(--color-primary-hover); } .steps__number { width: 60px; height: 60px; background: var(--color-secondary-accent); /* #2c99f2 */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-16); box-shadow: 0 4px 12px rgba(44, 153, 242, 0.3); transition: all var(--duration-normal) var(--ease-standard); } .steps__number_red { width: 60px; height: 60px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-16); box-shadow: 0 4px 12px rgba(192, 32, 38, 0.3); transition: all var(--duration-normal) var(--ease-standard); } .steps__card:hover .steps__number { background: var(--color-secondary-accent-hover); box-shadow: 0 6px 20px rgba(44, 153, 242, 0.4); } .steps__card:hover .steps__number_red { background: var(--color-primary-hover); box-shadow: 0 6px 20px rgba(192, 32, 38, 0.4); } .steps__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-8); line-height: var(--line-height-tight); } .steps__description { color: var(--color-text); font-size: var(--font-size-xl); line-height: var(--line-height-tight); margin: 0; flex-grow: 1; } /* Mobile Responsiveness */ @media (max-width: 1024px) { .steps__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); } .steps__card:nth-child(3) { grid-column: 1 / -1; max-width: 650px; margin: 0 auto; } } @media (max-width: 768px) { .steps { padding: 60px 0; } .steps__grid { grid-template-columns: 1fr; gap: var(--space-24); } .steps__card { padding: var(--space-24); } .steps__card_red { padding: var(--space-24); } .steps__card:nth-child(3) { grid-column: auto; max-width: none; } .steps__card_red:nth-child(3) { grid-column: auto; max-width: none; } .steps__number { width: 50px; height: 50px; font-size: var(--font-size-xl); margin-bottom: var(--space-16); } .steps__number_red { width: 50px; height: 50px; font-size: var(--font-size-xl); margin-bottom: var(--space-16); } .steps__title { font-size: var(--font-size-xl); } } @media (max-width: 480px) { .steps__card { padding: var(--space-20); } .steps__card_red { padding: var(--space-20); } .steps__title { font-size: var(--font-size-base); } } /* ============ END STEPS SECTION STYLING ============ */ /* =============== RELATED POSTS NAVIGATION STYLING =============== */ .related-posts-navigation { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-secondary-accent); /* #2c99f2 brand secondary blue */ max-width: 900px; margin-left: auto; margin-right: auto; } .related-post-link { font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); color: var(--color-primary); /* #c02026 brand primary red */ text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .related-post-link:hover { color: var(--color-primary-hover); text-decoration: underline; } .related-post-link.prev-post { text-align: left; } .related-post-link.next-post { text-align: right; } /* Mobile responsiveness */ @media (max-width: 600px) { .related-posts-navigation { flex-direction: column; gap: 12px; max-width: 100%; } .related-post-link { max-width: 100%; white-space: normal; } .related-post-link.next-post { text-align: left; } } /* ====== END RELATED POSTS NAVIGATION STYLING ====== */ /* ========== BUTTON CLICK BEHAVIOR FIXES ========== */ /* SURGICAL FIX: Exclude footer links from button/navigation styling */ /* Updated selectors - exclude footer links */ .btn, .nav__link, a[href*="/call"]:not(.footer a):not(.footer__links a), a[href*="/booking"]:not(.footer a):not(.footer__links a), a[href*="/closings"]:not(.footer a):not(.footer__links a), a[href*="/coaching"]:not(.footer a):not(.footer__links a) { position: relative !important; z-index: 10 !important; pointer-events: auto !important; } /* Navigation menu z-index fixes */ .nav__menu.active { z-index: 1001; pointer-events: auto; } /* Ensure buttons are always clickable unless explicitly disabled */ .btn:not([disabled]):not(.disabled) { pointer-events: auto !important; cursor: pointer !important; } /* Fix for buttons that might have conflicting CSS */ a.btn, button.btn { display: inline-block !important; pointer-events: auto !important; position: relative !important; z-index: 5 !important; } /* Specific fix for call and navigation buttons - EXCLUDE footer links */ a[href*="/call"]:not(.footer a):not(.footer__links a), button[data-href*="/call"], a[href*="/booking"]:not(.footer a):not(.footer__links a), button[data-href*="/booking"], a[href*="/closings"]:not(.footer a):not(.footer__links a), button[data-href*="/closings"], a[href*="/coaching"]:not(.footer a):not(.footer__links a), button[data-href*="/coaching"] { pointer-events: auto !important; cursor: pointer !important; z-index: 15 !important; position: relative !important; min-height: 44px !important; display: inline-block !important; } /* Mobile touch improvements - EXCLUDE footer links */ @media (max-width: 768px) { a[href*="/call"]:not(.footer a):not(.footer__links a), button[data-href*="/call"], a[href*="/booking"]:not(.footer a):not(.footer__links a), button[data-href*="/booking"], a[href*="/closings"]:not(.footer a):not(.footer__links a), button[data-href*="/closings"], a[href*="/coaching"]:not(.footer a):not(.footer__links a), button[data-href*="/coaching"] { -webkit-tap-highlight-color: rgba(192, 32, 38, 0.3) !important; touch-action: manipulation !important; padding: 12px 16px !important; } } /* Prevent pseudo-elements from blocking clicks - EXCLUDE footer links */ .btn::before, .btn::after, a[href*="/call"]:not(.footer a):not(.footer__links a)::before, a[href*="/call"]:not(.footer a):not(.footer__links a)::after { pointer-events: none !important; } /* Modal z-index management */ #popupFormOverlay:not(.show) { pointer-events: none !important; visibility: hidden !important; } /* Service cards - ensure buttons are clickable */ .service-card .btn, .about__card .btn, .testimonial-card .btn { z-index: 2 !important; position: relative !important; } /* ADDITIONAL: Ensure footer links maintain normal behavior */ .footer a, .footer__links a { position: static !important; z-index: auto !important; min-height: auto !important; padding: initial !important; } /* Breadcrumbs */ .breadcrumbs { margin-bottom: var(--space-24); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .breadcrumbs a { color: var(--color-primary); text-decoration: none; } /* Social Share */ .social-share { margin: var(--space-32) 0; padding: var(--space-24); background: var(--color-surface); border-radius: var(--radius-lg); } .share-buttons { display: flex; gap: var(--space-12); flex-wrap: wrap; } .share-btn { padding: var(--space-8) var(--space-16); background: var(--color-primary); color: white; text-decoration: none; border-radius: var(--radius-base); font-size: var(--font-size-sm); transition: transform var(--duration-fast); } .share-btn:hover { transform: translateY(-2px); } /* Related Posts */ .related-posts { margin: var(--space-32) 0; } .related-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-24); margin-top: var(--space-16); } .related-post-card { background: var(--color-surface); padding: var(--space-16); border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .related-post-card h4 { margin: var(--space-12) 0; } .related-post-card img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-sm); } /* ── Enhanced Table of Contents Styling with Collapsible Feature ── */ /* Main TOC Container - Match content width */ .dd-toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin: var(--space-32) 0; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-normal) var(--ease-standard); max-width: 100%; /* Match content width */ width: 100%; /* Full width of content area */ } .dd-toc:hover { box-shadow: var(--shadow-md); } /* TOC Header with Toggle */ .dd-toc__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-20) var(--space-24); border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dd-toc__header:hover { background: var(--color-secondary); } /* TOC Title */ .dd-toc__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; flex: 1; } /* Toggle Button */ .dd-toc__toggle { background: none; border: 2px solid var(--color-primary); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); color: var(--color-primary); font-weight: var(--font-weight-bold); } .dd-toc__toggle:hover { background: var(--color-primary); color: var(--color-btn-primary-text); transform: scale(1.1); } .dd-toc__toggle:focus { outline: var(--focus-outline); outline-offset: 2px; } /* Toggle Icon */ .dd-toc__toggle-icon { font-size: var(--font-size-xl); line-height: 1; transition: transform var(--duration-fast) var(--ease-standard); } /* TOC List Container */ .dd-toc__list { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-standard); } /* When expanded */ .dd-toc[data-toc-collapsed="false"] .dd-toc__list { padding: var(--space-12) var(--space-16) 0 !important; } /* TOC List Items */ .dd-toc__item { margin: 0; line-height: var(--line-height-tight); /* Tighter line height */ } /* Hierarchy Indentation */ .dd-toc__item.toc-h2 { margin-left: 0; margin-bottom: var(--space-12); } .dd-toc__item.toc-h3 { margin-left: var(--space-20); margin-bottom: var(--space-8); } .dd-toc__item.toc-h4 { margin-left: var(--space-32); margin-bottom: var(--space-6); } /* TOC Links */ .dd-toc__link { display: block; text-decoration: none; color: var(--color-text); font-size: var(--font-size-base); /* Use default paragraph size */ font-weight: var(--font-weight-normal); line-height: var(--line-height-tight); /* Tighter line height */ padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--ease-standard); position: relative; } /* Different font weights for hierarchy */ .dd-toc__item.toc-h2 .dd-toc__link { font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); /* Slightly larger for h2 */ } .dd-toc__item.toc-h3 .dd-toc__link { font-weight: var(--font-weight-medium); font-size: var(--font-size-base); /* Default paragraph size */ } .dd-toc__item.toc-h4 .dd-toc__link { font-weight: var(--font-weight-normal); font-size: var(--font-size-base); /* Default paragraph size */ opacity: 0.9; } /* Link Hover States */ .dd-toc__link:hover { background: var(--color-secondary); color: var(--color-primary); transform: translateX(4px); padding-left: var(--space-16); } /* Active/Current Link Indicator */ .dd-toc__link.active { background: var(--color-primary); color: var(--color-btn-primary-text); font-weight: var(--font-weight-medium); } .dd-toc__link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: var(--color-secondary-accent); border-radius: var(--radius-sm); } /* Mobile Responsiveness */ @media (max-width: 768px) { .dd-toc { margin: var(--space-24) 0; border-radius: var(--radius-base); } .dd-toc__header { padding: var(--space-16) var(--space-20); } .dd-toc__title { font-size: var(--font-size-lg); } .dd-toc__toggle { width: 28px; height: 28px; } .dd-toc__toggle-icon { font-size: var(--font-size-lg); } .dd-toc[data-toc-collapsed="false"] .dd-toc__list { padding: var(--space-12) var(--space-16) var(--space-16); } .dd-toc__item.toc-h3 { margin-left: var(--space-16); } .dd-toc__item.toc-h4 { margin-left: var(--space-24); } .dd-toc__link { padding: var(--space-6) var(--space-10); font-size: var(--font-size-sm); /* Smaller on mobile */ } .dd-toc__item.toc-h2 .dd-toc__link { font-size: var(--font-size-base); /* Adjusted for mobile */ } .dd-toc__item.toc-h3 .dd-toc__link, .dd-toc__item.toc-h4 .dd-toc__link { font-size: var(--font-size-sm); /* Consistent smaller size on mobile */ } } /* Dark Mode Support */ @media (prefers-color-scheme: dark) { .dd-toc { border-color: var(--color-border); background: var(--color-surface); } .dd-toc__header { border-bottom-color: var(--color-border); } .dd-toc__header:hover { background: var(--color-secondary); } .dd-toc__toggle { border-color: var(--color-primary); color: var(--color-primary); } .dd-toc__toggle:hover { background: var(--color-primary); color: var(--color-btn-primary-text); } } /* Manual theme switching support */ [data-color-scheme="dark"] .dd-toc { border-color: var(--color-border); background: var(--color-surface); } [data-color-scheme="dark"] .dd-toc__header { border-bottom-color: var(--color-border); } [data-color-scheme="dark"] .dd-toc__header:hover { background: var(--color-secondary); } [data-color-scheme="dark"] .dd-toc__toggle { border-color: var(--color-primary); color: var(--color-primary); } [data-color-scheme="dark"] .dd-toc__toggle:hover { background: var(--color-primary); color: var(--color-btn-primary-text); } /* Smooth scroll for anchor links */ html { scroll-behavior: smooth; } /* Enhanced scroll behavior for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dd-toc__list { transition: none; } .dd-toc__link { transition: none; } .dd-toc__toggle { transition: none; } } /* === SURGICAL FIX: TOC visibility and colors === / .dd-toc { / ensure neutral surface and readable text */ background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } /* force list and link colors to inherit readable text color */ .dd-toc, .dd-toc * { color: var(--color-text) !important; } /* make links clearly visible and not red-on-red */ .dd-toc a, .dd-toc__link { color: var(--color-text) !important; text-decoration: none; } .dd-toc a:hover, .dd-toc__link:hover { color: var(--color-primary-hover) !important; background: rgba(var(--color-brown-600-rgb, 94,82,64), 0.08) !important; } /* collapse panel background fix (remove any red fills) */ .dd-toc__list { background: transparent !important; } /* header row must match surface and not inherit section reds */ .dd-toc__header { background: var(--color-surface) !important; color: var(--color-text) !important; border-bottom: 1px solid var(--color-border) !important; } /* toggle button should use outline with brand primary, not filled red */ .dd-toc__toggle { background: transparent !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .dd-toc__toggle:hover { background: var(--color-primary) !important; color: var(--color-btn-primary-text) !important; } /* tighten line height and keep paragraph-scale font sizes / .dd-toc__item { line-height: var(--line-height-tight) !important; } .dd-toc__link { font-size: var(--font-size-base) !important; / follows paragraph size */ } /* hierarchy weights without forcing red */ .dd-toc__item.toc-h2 .dd-toc__link { font-weight: var(--font-weight-semibold) !important; } .dd-toc__item.toc-h3 .dd-toc__link { font-weight: var(--font-weight-medium) !important; } .dd-toc__item.toc-h4 .dd-toc__link { font-weight: var(--font-weight-normal) !important; } /* active link contrast */ .dd-toc__link.active { background: var(--color-secondary) !important; color: var(--color-text) !important; } /* dark mode parity */ @media (prefers-color-scheme: dark) { .dd-toc, .dd-toc__header { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } .dd-toc a, .dd-toc__link { color: var(--color-primary) !important; } .dd-toc a:hover, .dd-toc__link:hover { background: rgba(var(--color-gray-400-rgb, 119,124,124), 0.15) !important; color: var(--color-primary-hover) !important; } } /* manual theme switching support */ [data-color-scheme="dark"] .dd-toc, [data-color-scheme="dark"] .dd-toc__header { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-color-scheme="dark"] .dd-toc a, [data-color-scheme="dark"] .dd-toc__link { color: var(--color-text) !important; } /* guardrails: never let section wrappers repaint TOC red */ .services .dd-toc, .contact .dd-toc, .footer-banner .dd-toc, .footer-banner-wrapper .dd-toc, .done-for-you-section .dd-toc, .case-studies .dd-toc { background: var(--color-surface) !important; border-color: var(--color-border) !important; } /* remove any accidental background images on TOC */ .dd-toc { background-image: none !important; } /* ensure TOC follows content width, not full-bleed */ .container .dd-toc, .container.single-post.container .dd-toc, .post-entry .dd-toc { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* == SURGICAL FIX: TOC max-width and tighter line-height == */ /* 1. Limit TOC container to the width of longest item */ .dd-toc { display: inline-block !important; max-width: fit-content !important; width: auto !important; } /* 2. Compress TOC line-height */ .dd-toc__list, .dd-toc__item, .dd-toc__link { line-height: 1.1 !important; /* much tighter stacking */ margin-bottom: 0.25em !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 3. Tighter font sizing for hierarchy */ .dd-toc__item.toc-h2 .dd-toc__link { font-size: 0.95em !important; } .dd-toc__item.toc-h3 .dd-toc__link { font-size: 0.90em !important; } .dd-toc__item.toc-h4 .dd-toc__link { font-size: 0.85em !important; } /* Ensure collapsed state still respects fit-content */ .dd-toc[data-toc-collapsed="true"] .dd-toc__list { max-height: 0 !important; overflow: hidden !important; } /* Expandable list uses same fit-content width */ .dd-toc[data-toc-collapsed="false"] { max-width: fit-content !important; width: auto !important; } /* FORCE TOC container always fit-content, both collapsed and expanded */ .dd-toc { display: inline-block !important; max-width: fit-content !important; width: auto !important; } /* Remove any full-width rules */ .dd-toc[style*="width"], .dd-toc[style*="max-width"] { width: auto !important; max-width: fit-content !important; } /* Ensure collapsed list not stretching parent */ .dd-toc[data-toc-collapsed="true"] .dd-toc__list { width: auto !important; } /* Tighter line-height for compact TOC */ .dd-toc__list, .dd-toc__item, .dd-toc__link { line-height: 1.1 !important; margin-bottom: 0.25em !important; padding: 0 !important; } /* When collapsed, shrink TOC container to content width */ .dd-toc[data-toc-collapsed="true"] { width: fit-content !important; max-width: none !important; display: inline-block !important; } /* Ensure list stays hidden but header still sizes to content */ .dd-toc[data-toc-collapsed="true"] .dd-toc__list { max-height: 0; } /* ══SURGICAL FIX: TOC UNCOLLAPSED WIDTH TO FIT HEADER CONTENT ══/ /* This fix ensures the Table of Contents (TOC) in its collapsed/unexpanded state only takes up the width needed for the header content ("Table of Contents" + toggle button) instead of spanning the full content width. */ /* Override the existing full-width TOC styling */ .dd-toc { /* In collapsed state, size to fit header content only */ width: fit-content !important; max-width: fit-content !important; /* Center the collapsed TOC */ margin-left: auto !important; margin-right: auto !important; /* Add smooth transitions for width changes using design system variables */ transition: width var(--duration-normal) var(--ease-standard), max-width var(--duration-normal) var(--ease-standard), margin var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard) !important; /* Apply design system styling */ background-color: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* When expanded (data-toc-collapsed="false"), allow full content width */ .dd-toc[data-toc-collapsed="false"] { width: fit-content !important; max-width: fit-content !important; margin-left: 0 !important; margin-right: 0 !important; box-shadow: var(--shadow-md); } /* Header determines collapsed width - prevent wrapping */ .dd-toc__header { white-space: nowrap !important; min-width: fit-content !important; /* Ensure flex layout works properly */ display: flex !important; justify-content: space-between !important; align-items: center !important; /* Apply design system spacing and styling */ padding: var(--space-16) var(--space-20) !important; border-bottom: 1px solid var(--color-card-border-inner); background-color: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* Title handling in collapsed state */ .dd-toc__title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* Reasonable max-width to prevent excessive width using design system containers */ max-width: fit-content !important; /* Flex properties to work with header layout */ flex: 1 1 auto !important; margin: 0 !important; margin-right: var(--space-12) !important; /* Apply design system typography */ font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } /* Toggle button - fixed size, no shrinking */ .dd-toc__toggle { flex-shrink: 0 !important; flex-grow: 0 !important; margin-left: var(--space-12) !important; /* Apply design system button styling */ background: var(--color-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-8); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); } .dd-toc__toggle:hover { background: var(--color-secondary-hover); transform: scale(1.05); } .dd-toc__toggle:focus { outline: var(--focus-outline); box-shadow: var(--focus-ring); } .dd-toc__toggle-icon { display: inline-block; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); line-height: 1; } /* Responsive adjustments for tablet and smaller */ @media (max-width: 768px) { .dd-toc__title { max-width: min(250px, 60vw) !important; font-size: var(--font-size-md); } .dd-toc__header { padding: var(--space-12) var(--space-16) !important; } .dd-toc__toggle { padding: var(--space-2) var(--space-6); } } /* Mobile portrait - design system breakpoint at 480px */ @media (max-width: 480px) { .dd-toc__title { max-width: min(180px, 50vw) !important; font-size: var(--font-size-base); } .dd-toc__header { padding: var(--space-8) var(--space-12) !important; } .dd-toc__toggle { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); } .dd-toc { border-radius: var(--radius-base); margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; } .dd-toc__header { border-radius: var(--radius-base) var(--radius-base) 0 0; } } /* Ensure the list container doesn't affect collapsed width */ .dd-toc__list { width: fit-content !important; /* List takes full container width when expanded */ margin: 0; padding: var(--space-16); list-style: none; background-color: var(--color-surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .dd-toc__list li { margin-bottom: var(--space-8); } .dd-toc__list li:last-child { margin-bottom: 0; } .dd-toc__list a { display: block; color: var(--color-text) !important; text-decoration: none; font-size: var(--font-size-sm); line-height: var(--line-height-normal); padding: var(--space-4) 0; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-standard); } .dd-toc__list a:hover { color: var(--color-primary); } /* Optional: Add hover effect that shows this is a collapsible element */ .dd-toc[data-toc-collapsed="true"]:hover { transform: scale(1.02); cursor: pointer; box-shadow: var(--shadow-md); } /* Accessibility improvements */ .dd-toc__header[role="button"]:focus { outline: var(--focus-outline); outline-offset: 2px; } /* Animation for the toggle icon rotation */ .dd-toc__toggle-icon { transition: transform var(--duration-fast) var(--ease-standard); } .dd-toc[data-toc-collapsed="false"] .dd-toc__toggle-icon { transform: rotate(45deg); } /* === SURGICAL FIX: Restyle Blog TOC to Match H2 Toggle === */ /* Scope to only the Table of Contents container */ .dd-toc { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-base) !important; /* round corners like h2 toggle */ padding: 0 !important; /* edge-to-edge text */ overflow: visible !important; } /* Header row styling to match H2 toggle */ .dd-toc__header { display: flex !important; align-self: center !important; justify-content: space-between !important; padding: var(--space-6) var(--space-28) !important; /* increased vertical padding */ cursor: pointer !important; background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; border-radius: var(--radius-base) !important; /*min-height: 30px !important; /* ensure adequate height */ } /* Title styling inherits H2 */ .dd-toc__title { margin: 0 !important; font-size: var(--font-size-xl) !important; font-weight: var(--font-weight-bold) !important; color: var(--color-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 1 auto !important; line-height: 0.80 !important; /* ensure consistent line height */ } /* Toggle button styling matches H2 toggle */ .dd-toc__toggle { width: 34px !important; height: 34px !important; background: var(--color-primary) !important; border: none !important; border-radius: 50% !important; display: flex !important; align-self: center !important; justify-content: center !important; color: var(--color-btn-primary-text) !important; transition: transform var(--duration-fast) var(--ease-standard) !important; flex-shrink: 0 !important; /* prevent button from shrinking */ margin-left: var(--space-12) !important; /* add space from title */ } /* Toggle icon default and hover */ .dd-toc__toggle-icon { font-size: var(--font-size-lg) !important; transition: transform var(--duration-fast) var(--ease-standard) !important; } .dd-toc__toggle:hover .dd-toc__toggle-icon { transform: rotate(90deg) !important; /* mimic H2 icon hover if any */ } /* Expanded state rotates icon like H2 */ .dd-toc[data-toc-collapsed="false"] .dd-toc__toggle-icon { transform: rotate(45deg) !important; } /* List items edge-to-edge, minimal padding */ .dd-toc__list { max-height: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* Individual link styling flat */ .dd-toc__link { display: block !important; padding: var(--space-2) var(--space-4) !important; margin: 0 !important; font-size: var(--font-size-sm) !important; color: var(--color-text) !important; text-decoration: none !important; border-radius: var(--radius-sm) !important; transition: background var(--duration-fast) var(--ease-standard) !important; } /* Hover match H2 hover background */ .dd-toc__link:hover { background: var(--color-secondary-hover) !important; } /* Active link highlight */ .dd-toc__link.active { background: var(--color-primary-active) !important; color: var(--color-btn-primary-text) !important; } /* Hierarchy indentation preserved */ .dd-toc__item.toc-h3 .dd-toc__link { margin-left: var(--space-12) !important; } .dd-toc__item.toc-h4 .dd-toc__link { margin-left: var(--space-20) !important; } /* === SURGICAL FIX: Slightly increase collapsed TOC width === */ .dd-toc[data-toc-collapsed="true"] { min-width: 400px !important; /* Adjust this value as needed */ } /* Alternative approach - add padding to header for more breathing room */ .dd-toc[data-toc-collapsed="true"] .dd-toc__header { padding-left: var(--space-24) !important; /* Increase from var(--space-20) */ padding-right: var(--space-24) !important; /* Increase from var(--space-20) */ } /* Simple mobile fix for TOC title truncation */ @media (max-width: 768px) { .dd-toc { min-width: 95vw !important; /* Never exceed 95% of viewport width */ } .dd-toc__title { max-width: 95vw !important; /* Fixed max-width for predictable behavior */ overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* ═══ END TOC SURGICAL FIX ═══ */ /* Smooth scroll for anchor links */ html { scroll-behavior: smooth; } /* ── Mobile Reading Optimizations ─────────────────────────────────────── */ @media (max-width: 768px) { .post-reading-time { display: block; margin-bottom: .5em; font-size: var(--font-size-sm); } .dd-toc { font-size: var(--font-size-xs); } } /* ============ MODERN READING TIME STYLING ============ */ .reading-time { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--color-white) !important; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); font-family: var(--font-family-base); user-select: none; } .reading-time__text { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Mobile responsiveness */ @media (max-width: 768px) { .reading-time { font-size: var(--font-size-xs); padding: var(--space-2) var(--space-8); gap: var(--space-4); } .reading-time__icon { width: 16px; height: 16px; } } /* ============ END READING TIME STYLING ============ */ /* ── Scroll Progress Bar ───────────────────────────────────────────────── */ #dd-reading-progress { position: fixed; top: 0; left: 0; height: 4px; background: var(--color-secondary-accent); /* Light mode: blue */ width: 0; z-index: 9999; } /* Dark mode: switch to primary color (red) */ @media (prefers-color-scheme: dark) { #dd-reading-progress { background: var(--color-primary) !important; } } /* Manual theme switching support */ [data-color-scheme="dark"] #dd-reading-progress { background: var(--color-primary) !important; } [data-color-scheme="light"] #dd-reading-progress { background: var(--color-secondary-accent) !important; } /* ── END Scroll Progress Bar ───────────────────────────────────────── */ /* ========= Custom checkbox styling ========= */ input[type="checkbox"] { /* Hide default checkbox but keep it accessible */ appearance: none; -webkit-appearance: none; width: 1.25em; height: 1.25em; border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; position: relative; vertical-align: middle; transition: background 150ms ease, border-color 150ms ease; } /* Checked state */ input[type="checkbox"]:checked { background: var(--color-primary); border-color: var(--color-primary); } /* Checkmark */ input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 0.15em; left: 0.35em; width: 0.25em; height: 0.6em; border: solid var(--color-surface); border-width: 0 0.2em 0.2em 0; transform: rotate(45deg); } /* Hover state */ input[type="checkbox"]:hover { border-color: var(--color-primary-hover); } /* Focus state */ input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-focus-ring); } /* Disabled state */ input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; } /* Dark mode support */ @media (prefers-color-scheme: dark) { input[type="checkbox"] { border-color: var(--color-gray-400); background: var(--color-surface); } input[type="checkbox"]:checked { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } input[type="checkbox"]:checked::after { border-color: var(--color-surface); } } /* Increase default paragraph & list font size with line-height 1, but exclude Table of Contents */ /* Remove !important and use higher specificity */ .single-post .post-content p, .blog .entry-content p, body.blog p, body.single-post p { font-size: 22px; line-height: 1.20; } .single-post .post-content ul:not(.dd-toc__list), .single-post .post-content ol:not(.dd-toc__list), .blog .entry-content ul:not(.dd-toc__list), .blog .entry-content ol:not(.dd-toc__list) { font-size: 22px; line-height: 1.185; } /* ============ BLOG H2 COLLAPSE FUNCTIONALITY ============ */ /* Blog H2 collapse wrapper - scoped to blog posts only */ .single-post .blog-h2-collapse-wrapper { margin-bottom: var(--space-24); border: 1px solid var(--color-border); border-radius: var(--radius-base); overflow: hidden; background: var(--color-surface); transition: box-shadow var(--duration-normal) var(--ease-standard); } .single-post .blog-h2-collapse-wrapper:hover { box-shadow: var(--shadow-sm); } /* H2 header with toggle button */ .single-post .blog-h2-header { position: relative; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); padding-right: 60px; /* Space for toggle button */ } .single-post .blog-h2-header:hover { background: var(--color-secondary); } /* H2 heading within header */ .single-post .blog-h2-header h2 { margin: 0 !important; padding: var(--space-12) var(--space-20) !important; background: transparent !important; border: none !important; font-size: var(--font-size-3xl) !important; font-weight: var(--font-weight-bold) !important; color: var(--color-text) !important; line-height: var(--line-height-tight) !important; } /* Toggle button */ .single-post .blog-h2-toggle { position: absolute; top: 50%; right: var(--space-16); transform: translateY(-50%); background: var(--color-primary); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); z-index: 2; } .single-post .blog-h2-toggle:hover { background: var(--color-primary-hover); transform: translateY(-50%) scale(1.1); } .single-post .blog-h2-toggle:focus { outline: var(--focus-outline); outline-offset: 2px; } /* Toggle icon */ .single-post .blog-h2-toggle-icon { color: white; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1; transition: transform var(--duration-fast) var(--ease-standard); } /* Expanded state - rotate icon */ .single-post .blog-h2-header[data-collapsed="false"] .blog-h2-toggle-icon { transform: rotate(45deg); } /* Collapsible content */ .single-post .blog-h2-content { max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-standard); padding: 0 var(--space-20); } /* Expanded content */ .single-post .blog-h2-content[aria-hidden="false"] { max-height: 9999px; /* Large enough value */ padding: 0 var(--space-12) 0 var(--space-20) !important; } /* Content styling within collapsed sections */ .single-post .blog-h2-content p, .single-post .blog-h2-content ul, .single-post .blog-h2-content ol, .single-post .blog-h2-content blockquote { margin-bottom: var(--space-12); } .single-post .blog-h2-content h3, .single-post .blog-h2-content h4, .single-post .blog-h2-content h5, .single-post .blog-h2-content h6 { margin-top: var(--space-24); margin-bottom: var(--space-8); } /* Mobile responsiveness */ @media (max-width: 768px) { .single-post .blog-h2-header { padding-right: 50px; } .single-post .blog-h2-header h2 { padding: var(--space-12) var(--space-16) !important; font-size: var(--font-size-2xl) !important; } .single-post .blog-h2-toggle { width: 32px; height: 32px; right: var(--space-12); } .single-post .blog-h2-toggle-icon { font-size: var(--font-size-lg); } .single-post .blog-h2-content[aria-hidden="false"] { padding: 0 var(--space-16) 0 var(--space-16) !important; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .single-post .blog-h2-collapse-wrapper { background: var(--color-surface); border-color: var(--color-border); } .single-post .blog-h2-header h2 { color: var(--color-text) !important; } } [data-color-scheme="dark"] .single-post .blog-h2-collapse-wrapper { background: var(--color-surface); border-color: var(--color-border); } [data-color-scheme="dark"] .single-post .blog-h2-header h2 { color: var(--color-text) !important; } /* ── SURGICAL FIX: Prevent H2 collapse clipping ── */ .single-post .blog-h2-content[aria-hidden="false"] { max-height: none !important; } /* Force spacing between last H2 & penultimate with nuclear specificity */ body.single-post .post-entry .blog-h2-collapse-wrapper:last-child, body.single-post .container .blog-h2-collapse-wrapper:last-child { margin-bottom: var(--space-20) !important; /* 24 */ padding-bottom: var(--space-24) !important; /* Backup */ } body.single-post .post-entry .blog-h2-collapse-wrapper + h2, body.single-post .container .blog-h2-collapse-wrapper + h2 { margin-top: var(--space-24) !important; padding-top: var(--space-24) !important; /* Backup */ } .single-post .post-entry, .single-post .post-content { display: flex; flex-direction: column; gap: var(--space-20); } .single-post .post-entry > *, .single-post .post-content > * { margin-top: 0; margin-bottom: 0; } /* ============ END BLOG H2 COLLAPSE FUNCTIONALITY ============ */ /* ============ BLOG QUOTE ENHANCEMENT - SURGICAL FIX ============ */ /* Target paragraphs in blog posts that contain quotes */ .blog p[data-quote], .post-content p[data-quote], .single-post p[data-quote] { position: relative; font-style: italic; font-weight: bold; color: var(--color-text); background: linear-gradient(90deg, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.08) 0%, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.02) 100%); border-left: 4px solid var(--color-secondary-accent); border-radius: var(--radius-base); padding: var(--space-16) var(--space-20) var(--space-16) var(--space-16); margin: var(--space-12) 0; box-shadow: 0 2px 8px rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.1); transition: all var(--duration-normal) var(--ease-standard); font-size: 22px !important; line-height: 1.20 !important; } /* Decorative quotation marks */ .blog p[data-quote]::before, .post-content p[data-quote]::before, .single-post p[data-quote]::before { content: "\201C"; position: absolute; top: -8px; left: 8px; font-size: 2.85rem; color: var(--color-secondary-accent); font-family: serif; line-height: 1; opacity: 0.6; pointer-events: none; } .blog p[data-quote]::after, .post-content p[data-quote]::after, .single-post p[data-quote]::after { content: "\201D"; position: absolute; bottom: -32px; right: 12px; font-size: 6rem; color: var(--color-secondary-accent); font-family: serif; line-height: 1; opacity: 0.6; pointer-events: none; } /* Hover effect */ .blog p[data-quote]:hover, .post-content p[data-quote]:hover, .single-post p[data-quote]:hover { background: linear-gradient(90deg, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.12) 0%, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.04) 100%); box-shadow: 0 4px 16px rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.15); transform: translateY(-2px); } /* Mobile responsiveness */ @media (max-width: 768px) { .blog p[data-quote], .post-content p[data-quote], .single-post p[data-quote] { padding: var(--space-12) var(--space-12) var(--space-12) var(--space-12); margin: var(--space-12) 0; font-size: 22px !important; } .blog p[data-quote]::before, .post-content p[data-quote]::before, .single-post p[data-quote]::before { font-size: 2.2rem; top: -6px; left: 6px; } .blog p[data-quote]::after, .post-content p[data-quote]::after, .single-post p[data-quote]::after { font-size: 4rem; bottom: -12px; right: 8px; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .blog p[data-quote], .post-content p[data-quote], .single-post p[data-quote] { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.1) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.03) 100%); border-left-color: var(--color-teal-300); } .blog p[data-quote]::before, .blog p[data-quote]::after, .post-content p[data-quote]::before, .post-content p[data-quote]::after, .single-post p[data-quote]::before, .single-post p[data-quote]::after { color: var(--color-teal-300); } } [data-color-scheme="dark"] .blog p[data-quote], [data-color-scheme="dark"] .post-content p[data-quote], [data-color-scheme="dark"] .single-post p[data-quote] { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.1) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.03) 100%); border-left-color: var(--color-teal-300); } [data-color-scheme="dark"] .blog p[data-quote]::before, [data-color-scheme="dark"] .blog p[data-quote]::after, [data-color-scheme="dark"] .post-content p[data-quote]::before, [data-color-scheme="dark"] .post-content p[data-quote]::after, [data-color-scheme="dark"] .single-post p[data-quote]::before, [data-color-scheme="dark"] .single-post p[data-quote]::after { color: var(--color-teal-300); } /* ============ END BLOG QUOTE ENHANCEMENT ============ */ /* ============ REAL LIFE STORY ENHANCEMENT - SURGICAL FIX ============ */ /* Targets any paragraph under .post-content that includes “Beatrice Ng” */ .post-content p:contains("Beatrice Ng") { /* Add your desired styles here */ background-color: rgba(255, 235, 59, 0.2) !important; border-left: 4px solid #c02026 !important; padding: 12px 16px !important; font-style: italic !important; } /* If you have multiple full names, duplicate the selector */ .post-content p:contains("Jane Doe"), .post-content p:contains("John Smith") { background-color: rgba(33, 150, 243, 0.1) !important; border-left: 4px solid #2196f3 !important; padding: 12px 16px !important; font-weight: bold !important; } /* ============ PERSON NAME STYLING - SURGICAL FIX ============ */ /* Target person names identified by the PHP processor */ .blog span[data-person-name="true"], .post-content span[data-person-name="true"], .single-post span[data-person-name="true"], .person-name[data-person-name="true"] { position: relative; font-weight: var(--font-weight-semibold); color: var(--color-text); background: linear-gradient(90deg, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.12) 0%, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.04) 100%); border-radius: var(--radius-sm); padding: 0.1em 0.4em; margin: 0 0.1em; box-shadow: 0 1px 3px rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.15); transition: all var(--duration-fast) var(--ease-standard); font-style: normal; text-decoration: none; display: inline; white-space: nowrap; } /* Subtle icon before person names */ .blog span[data-person-name="true"]::before, .post-content span[data-person-name="true"]::before, .single-post span[data-person-name="true"]::before, .person-name[data-person-name="true"]::before { content: "👤"; font-size: 0.8em; margin-right: 0.3em; opacity: 0.7; vertical-align: baseline; } /* Hover effect for person names */ .blog span[data-person-name="true"]:hover, .post-content span[data-person-name="true"]:hover, .single-post span[data-person-name="true"]:hover, .person-name[data-person-name="true"]:hover { background: linear-gradient(90deg, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.18) 0%, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.08) 100%); box-shadow: 0 2px 6px rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.25); transform: translateY(-1px); cursor: default; } /* Mobile responsiveness for person names */ @media (max-width: 768px) { .blog span[data-person-name="true"], .post-content span[data-person-name="true"], .single-post span[data-person-name="true"], .person-name[data-person-name="true"] { padding: 0.05em 0.3em; margin: 0 0.05em; font-size: 1em; } .blog span[data-person-name="true"]::before, .post-content span[data-person-name="true"]::before, .single-post span[data-person-name="true"]::before, .person-name[data-person-name="true"]::before { font-size: 0.75em; margin-right: 0.2em; } } /* Dark mode support for person names */ @media (prefers-color-scheme: dark) { .blog span[data-person-name="true"], .post-content span[data-person-name="true"], .single-post span[data-person-name="true"], .person-name[data-person-name="true"] { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.15) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.05) 100%); box-shadow: 0 1px 3px rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.2); } .blog span[data-person-name="true"]:hover, .post-content span[data-person-name="true"]:hover, .single-post span[data-person-name="true"]:hover, .person-name[data-person-name="true"]:hover { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.22) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.08) 100%); box-shadow: 0 2px 6px rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.3); } } [data-color-scheme="dark"] .blog span[data-person-name="true"], [data-color-scheme="dark"] .post-content span[data-person-name="true"], [data-color-scheme="dark"] .single-post span[data-person-name="true"], [data-color-scheme="dark"] .person-name[data-person-name="true"] { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.15) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.05) 100%); box-shadow: 0 1px 3px rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.2); } [data-color-scheme="dark"] .blog span[data-person-name="true"]:hover, [data-color-scheme="dark"] .post-content span[data-person-name="true"]:hover, [data-color-scheme="dark"] .single-post span[data-person-name="true"]:hover, [data-color-scheme="dark"] .person-name[data-person-name="true"]:hover { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.22) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.08) 100%); box-shadow: 0 2px 6px rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.3); } /* ============ END PERSON NAME STYLING ============ */ /* ============ END REAL LIFE STORY ENHANCEMENT ============ */ /* ========== BLOG POST TITLE BANNER SURGICAL FIX ========== */ /* Full-width banner wrapper with primary background */ .blog-banner-wrapper { background-color: var(--color-secondary-accent); /* #2c99f2 */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0; margin-bottom: 0; display: flex; overflow-x: hidden !important; justify-content: center; /*border-top: 3px solid var(--color-primary); /* #2c99f2 */ border-bottom: 2px solid var(--color-primary); /* #2c99f2 */ padding: 0; box-sizing: border-box; /* ADDED: Ensure proper box model */ } /* Inner banner container with content constraints */ .blog-banner { width: 100%; max-width: 100%; /* Changed from 100vw to reasonable max-width */ padding: 60px 0px !important; /* Reduced and added horizontal padding */ text-align: center; display: flex; flex-direction: column; gap: 12px; /* Reduced gap */ color: var(--color-btn-primary-text); /* white */ position: relative; box-sizing: border-box; /* ADDED: Ensure proper box model */ } /* Top meta group: breadcrumbs + category + tag */ .blog-banner__meta-top { display: inline !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; /* Reduced from 10px */ flex-wrap: wrap !important; /* default nowrap */ white-space: wrap !important; /* Prevent text wrapping */ overflow: hidden !important; /* Hide overflow */ max-width: 100% !important; font-size: var(--font-size-sm); color: var(--color-btn-primary-text); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.45px; margin-bottom: 8px; } /* Prevent individual elements from wrapping */ .blog-banner__meta-top .breadcrumbs, .blog-banner__meta-top .category, .blog-banner__meta-top .tag { color: var(--color-btn-primary-text) !important; text-decoration: none; flex-shrink: 1; /* Allow shrinking if needed */ white-space: nowrap; overflow: hidden; display: inline !important; } .blog-banner__meta-top .breadcrumbs a, .blog-banner__meta-top .category a, .blog-banner__meta-top .tag a { color: var(--color-btn-primary-text) !important; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-standard); } .blog-banner__meta-top .breadcrumbs a:hover, .blog-banner__meta-top .category a:hover, .blog-banner__meta-top .tag a:hover { opacity: 0.8; } /* Separators between meta elements */ .blog-banner__meta-top > *:not(:last-child)::after { content: "•"; margin-left: 12px; /* Reduced from 20px */ color: var(--color-btn-primary-text); opacity: 0.85; flex-shrink: 0; /* 0 Keep separators fixed */ } /* H1 Title styling - white and prominent */ .blog-banner__title { color: var(--color-btn-primary-text) !important; /* white */ font-size: var(--font-size-5xl); /* was 4xl */ font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); /* 1.2 */ margin: 12px 0; /* Reduced margin */ text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); text-transform: uppercase !important; } /* Bottom meta group: author + gravatar + date + reading time */ .blog-banner__meta-bottom { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--color-btn-primary-text); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); margin-top: 8px; } /* Author gravatar styling */ .blog-banner__author-img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-text) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Author name styling */ .blog-banner__author-name { font-weight: var(--font-weight-bold); color: var(--color-btn-primary-text) !important; } /* Published date and reading time */ .blog-banner__published-date, .blog-banner__reading-time { color: var(--color-btn-primary-text) !important; font-weight: var(--font-weight-bold); } /* Separators in bottom meta */ .blog-banner__meta-bottom > *:not(:first-child):not(.blog-banner__author-img):before { content: "•"; margin-right: 12px; color: var(--color-btn-primary-text); opacity: 0.85; } /* Reduced gap below banner */ .blog-content-gap { height: 12px; /* Reduced from 20px */ background-color: var(--color-background); } /* Ensure single post content starts properly after banner */ .single-post .blog-banner-wrapper + .container { margin-top: 0; padding-top: 10px; /* Reduced from 20px */ } /* Override any existing single post padding that conflicts */ .single-post { padding-top: 0 !important; } /* ========== RESPONSIVE DESIGN ========== */ /* Tablet adjustments */ @media (max-width: 1024px) { .blog-banner { padding: 32px 16px; /* Reduced padding */ } .blog-banner__title { font-size: var(--font-size-3xl); /* 1.85rem */ } } /* Mobile adjustments */ @media (max-width: 768px) { .blog-banner { padding: 24px 16px; /* Reduced padding */ gap: 10px; /* Reduced gap */ } .blog-banner__title { font-size: 2.2rem; line-height: 1.25; margin: 8px 0; /* Reduced margin */ } .blog-banner__meta-top { gap: 12px; font-size: var(--font-size-xs); } .blog-banner__meta-top > *:not(:last-child)::after { margin-left: 8px; } .blog-banner__meta-bottom { gap: 12px; font-size: var(--font-size-sm); } .blog-banner__author-img { width: 50px; height: 50px; } } /* Small mobile adjustments */ @media (max-width: 480px) { .blog-banner { padding: 20px 12px; /* Further reduced padding */ } .blog-banner__title { font-size: 1.85rem; } .blog-banner__meta-bottom { flex-direction: column; gap: 8px; } .blog-banner__meta-bottom > *:not(:first-child):not(.blog-banner__author-img):before { display: none; } .blog-content-gap { height: 8px; /* Further reduced */ } .single-post .blog-banner-wrapper + .container { padding-top: 15px; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .blog-banner__title, .blog-banner__meta-top, .blog-banner__meta-top *, .blog-banner__meta-bottom, .blog-banner__meta-bottom *, .blog-banner__author-name, .blog-banner__published-date, .blog-banner__reading-time { color: var(--color-btn-primary-text) !important; } } [data-color-scheme="dark"] .blog-banner__title, [data-color-scheme="dark"] .blog-banner__meta-top, [data-color-scheme="dark"] .blog-banner__meta-top *, [data-color-scheme="dark"] .blog-banner__meta-bottom, [data-color-scheme="dark"] .blog-banner__meta-bottom *, [data-color-scheme="dark"] .blog-banner__author-name, [data-color-scheme="dark"] .blog-banner__published-date, [data-color-scheme="dark"] .blog-banner__reading-time { color: var(--color-btn-primary-text) !important; } /* Hide any horizontal overflow globally */ html, body { overflow-x: hidden; } /* Full-width banner wrapper fix for horizontal scrollbar */ .fullbanner-wrapper { position: relative; width: 100vw; /* span the full viewport width */ left: 50%; /* shift its left edge to the center of the viewport */ margin-left: -50vw; /* pull it back by half the viewport width */ right: 50%; /* likewise for the right side */ margin-right: -50vw; } /* Inner banner content remains centered within the wrapper */ .fullbanner { max-width: 100%; /* ensure it never exceeds its wrapper */ margin: 0 auto; } /* At very narrow widths, stack items vertically */ @media (max-width: 480px) { .blog-banner__meta-top { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ========== END BLOG POST TITLE BANNER SURGICAL FIX ========== */ /* SURGICAL FIX: Remove unexplainable gap at bottom of blog posts */ .blog-content-gap { height: 0 !important; display: none !important; } .single-post .post-content, .single-post .content-wrapper, .single-post .entry-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } .single-post footer.post-footer, .single-post .post-footer { padding: 0 !important; margin: 0 !important; border-top: none !important; } /* .single-post .container:last-child, .single-post .blog-banner-wrapper + .container { margin-bottom: 0 !important; padding-bottom: 0 !important; } */ .footer { margin-top: 0 !important; } /* Mobile-specific gap removal */ @media (max-width: 768px) { .single-post .post-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } .single-post .content-wrapper { padding-bottom: 0 !important; } } /* Force remove any bottom spacing on post elements */ .single-post article, .single-post .hentry { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Set static page paragraph sizing to blog related posts */ .blog-card p { font-size: var(--font-size-lg) !important; line-height: 1.2 !important; /* was 1.4 */ } /* ============ END BLOG QUOTE ENHANCEMENT ============ */ /* ==== BLOG FEATURED STORIES ENHANCEMENT - SURGICAL FIX ======== */ /* Target paragraphs in blog posts that contain featured stories */ .blog p[data-featured], .post-content p[data-featured], .single-post p[data-featured] { position: relative; font-style: normal; font-weight: var(--font-weight-medium); color: var(--color-text); background: linear-gradient(90deg, rgba(var(--color-red-500-rgb, 192, 32, 38), 0.08) 0%, rgba(var(--color-red-500-rgb, 192, 32, 38), 0.02) 100%); border-left: 4px solid var(--color-primary); border-radius: var(--radius-base); padding: var(--space-16) var(--space-20) var(--space-16) var(--space-24); margin: var(--space-24) 0; box-shadow: 0 2px 8px rgba(var(--color-red-500-rgb, 192, 32, 38), 0.1); transition: all var(--duration-normal) var(--ease-standard); font-size: 22px !important; line-height: 1.20 !important; } /* Decorative person icon at bottom right */ .blog p[data-featured]::after, .post-content p[data-featured]::after, .single-post p[data-featured]::after { content: "🏆"; position: absolute; bottom: -12px; right: 12px; font-size: 2rem; opacity: 0.7; pointer-events: none; background: var(--color-primary); color: white; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(var(--color-red-500-rgb, 192, 32, 38), 0.3); } /* Hover effect */ .blog p[data-featured]:hover, .post-content p[data-featured]:hover, .single-post p[data-featured]:hover { background: linear-gradient(90deg, rgba(var(--color-red-500-rgb, 192, 32, 38), 0.12) 0%, rgba(var(--color-red-500-rgb, 192, 32, 38), 0.04) 100%); box-shadow: 0 4px 16px rgba(var(--color-red-500-rgb, 192, 32, 38), 0.15); transform: translateY(-2px); } .blog p[data-featured]:hover::after, .post-content p[data-featured]:hover::after, .single-post p[data-featured]:hover::after { transform: scale(1.1); box-shadow: 0 4px 12px rgba(var(--color-red-500-rgb, 192, 32, 38), 0.4); } /* Mobile responsiveness */ @media (max-width: 768px) { .blog p[data-featured], .post-content p[data-featured], .single-post p[data-featured] { padding: var(--space-12) var(--space-16) var(--space-12) var(--space-20); margin: var(--space-16) 0; font-size: 22px !important; } .blog p[data-featured]::after, .post-content p[data-featured]::after, .single-post p[data-featured]::after { font-size: 1.4rem; bottom: -10px; right: 8px; width: 30px; height: 30px; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .blog p[data-featured], .post-content p[data-featured], .single-post p[data-featured] { background: linear-gradient(90deg, rgba(var(--color-red-400-rgb, 255, 84, 89), 0.1) 0%, rgba(var(--color-red-400-rgb, 255, 84, 89), 0.03) 100%); border-left-color: var(--color-red-400); } .blog p[data-featured]::after, .post-content p[data-featured]::after, .single-post p[data-featured]::after { background: var(--color-red-400); box-shadow: 0 2px 6px rgba(var(--color-red-400-rgb, 255, 84, 89), 0.3); } .blog p[data-featured]:hover::after, .post-content p[data-featured]:hover::after, .single-post p[data-featured]:hover::after { box-shadow: 0 4px 12px rgba(var(--color-red-400-rgb, 255, 84, 89), 0.4); } } [data-color-scheme="dark"] .blog p[data-featured], [data-color-scheme="dark"] .post-content p[data-featured], [data-color-scheme="dark"] .single-post p[data-featured] { background: linear-gradient(90deg, rgba(var(--color-red-400-rgb, 255, 84, 89), 0.1) 0%, rgba(var(--color-red-400-rgb, 255, 84, 89), 0.03) 100%); border-left-color: var(--color-red-400); } [data-color-scheme="dark"] .blog p[data-featured]::after, [data-color-scheme="dark"] .post-content p[data-featured]::after, [data-color-scheme="dark"] .single-post p[data-featured]::after { background: var(--color-red-400); box-shadow: 0 2px 6px rgba(var(--color-red-400-rgb, 255, 84, 89), 0.3); } [data-color-scheme="dark"] .blog p[data-featured]:hover::after, [data-color-scheme="dark"] .post-content p[data-featured]:hover::after, [data-color-scheme="dark"] .single-post p[data-featured]:hover::after { box-shadow: 0 4px 12px rgba(var(--color-red-400-rgb, 255, 84, 89), 0.4); } /* Highlight agency names inline (no icon) */ .blog span[data-agency-name], .post-content span[data-agency-name], .single-post span[data-agency-name] { padding: 2px 4px; background-color: rgba(var(--color-primary-rgb, 36, 123, 255), 0.1); border-radius: 3px; font-weight: var(--font-weight-semibold); color: var(--color-primary); } /* ======= END BLOG FEATURED STORIES ENHANCEMENT ========= */ /* 1) Remove any bottom margin/padding on the TOC in collapsed state */ .dd-toc, .dd-toc[data-toc-collapsed] { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* 2) Only give it back when truly expanded */ .dd-toc[data-toc-collapsed="false"] { margin-bottom: var(--space-24) !important; padding-bottom: var(--space-16) !important; } /* 3) Do the same for your H2 collapse wrappers */ .blog-h2-collapse-wrapper, .blog-h2-collapse-wrapper[data-collapsed] { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* 4) Only add spacing when they're open */ .blog-h2-collapse-wrapper[data-collapsed="false"] { margin-bottom: var(--space-20) !important; padding-bottom: var(--space-20) !important; } /* ======== CHECKBOX BULLET POINTS - BLOG POSTS ========= */ /* ==== Target blog posts with checkbox symbols ==== */ .blog p:has(.checkbox-bullet), .post-content p:has(.checkbox-bullet), .single-post p:has(.checkbox-bullet), .blog-content p:has(.checkbox-bullet) { position: relative; padding-left: 0; margin-bottom: var(--space-12); font-size: var(--font-size-lg) !important; line-height: 1 !important; } /* Individual checkbox bullet styling */ .checkbox-bullet { display: inline-flex; align-items: flex-start; gap: var(--space-12); width: 100%; margin-bottom: var(--space-8); padding: var(--space-8) var(--space-12); background: linear-gradient(90deg, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.05) 0%, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.01) 100%); border-left: 3px solid var(--color-secondary-accent); border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--ease-standard); font-weight: var(--font-weight-normal); color: var(--color-text); } /* Hover effect for checkbox bullets */ .checkbox-bullet:hover { background: linear-gradient(90deg, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.08) 0%, rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.02) 100%); transform: translateX(3px); box-shadow: 0 2px 8px rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.1); } /* Checkbox icon styling */ .checkbox-bullet::before { content: "☐"; color: var(--color-secondary-accent); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1; margin-right: var(--space-4); flex-shrink: 0; margin-top: 2px; /* Slight vertical alignment */ } /* Checkbox text content */ .checkbox-bullet-text { flex: 1; margin: 0; padding: 0; font-size: inherit; line-height: 1; color: inherit; } /* Mobile responsiveness */ @media (max-width: 768px) { .checkbox-bullet { padding: var(--space-6) var(--space-8); gap: var(--space-8); margin-bottom: var(--space-6); } .checkbox-bullet::before { font-size: var(--font-size-lg); margin-right: var(--space-2); } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .checkbox-bullet { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.08) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.02) 100%); border-left-color: var(--color-teal-300); } .checkbox-bullet::before { color: var(--color-teal-300); } .checkbox-bullet:hover { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.12) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.04) 100%); box-shadow: 0 2px 8px rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.15); } } [data-color-scheme="dark"] .checkbox-bullet { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.08) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.02) 100%); border-left-color: var(--color-teal-300); } [data-color-scheme="dark"] .checkbox-bullet::before { color: var(--color-teal-300); } [data-color-scheme="dark"] .checkbox-bullet:hover { background: linear-gradient(90deg, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.12) 0%, rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.04) 100%); box-shadow: 0 2px 8px rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.15); } /* Ensure proper spacing between checkbox bullets */ .checkbox-bullet + .checkbox-bullet { margin-top: var(--space-4); } /* Points scoring highlight */ .checkbox-bullet-text .points-score { color: var(--color-secondary-accent); font-weight: var(--font-weight-semibold); background: rgba(var(--color-secondary-accent-rgb, 44, 153, 242), 0.1); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 0.9em; margin-left: var(--space-4); } @media (prefers-color-scheme: dark) { .checkbox-bullet-text .points-score { color: var(--color-teal-300); background: rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.15); } } [data-color-scheme="dark"] .checkbox-bullet-text .points-score { color: var(--color-teal-300); background: rgba(var(--color-teal-300-rgb, 50, 184, 198), 0.15); } /* ============= END CHECKBOX BULLET POINTS =============== */ /* ============ CHECKBOX LIST RESCUE (hotfix) ============ */ /* Hide broken 'unticked/unchecked' images and draw a box icon instead */ .post-content li:has(img[alt*="unticked" i]), .post-content li:has(img[alt*="unchecked" i]), .single-post li:has(img[alt*="unticked" i]), .single-post li:has(img[alt*="unchecked" i]) { list-style: none; display: flex; align-items: flex-start; gap: var(--space-8); } .post-content li:has(img[alt*="unticked" i])::before, .post-content li:has(img[alt*="unchecked" i])::before, .single-post li:has(img[alt*="unticked" i])::before, .single-post li:has(img[alt*="unchecked" i])::before { content: "☐"; color: var(--color-secondary-accent); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1; margin-top: 2px; flex-shrink: 0; } /* Hide the broken image itself */ .post-content li img[alt*="unticked" i], .post-content li img[alt*="unchecked" i], .single-post li img[alt*="unticked" i], .single-post li img[alt*="unchecked" i] { display: none !important; } /* Styling for JS/PHP-converted checklist items */ .dd-checkbox-li { list-style: none; display: flex; align-items: flex-start; gap: var(--space-8); margin: 0 0 var(--space-6) 0; } .dd-checkbox-icon { color: var(--color-secondary-accent); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1; margin-top: 2px; flex-shrink: 0; } .dd-checkbox-text { line-height: 1; } .dd-checkbox-text .points-score { color: var(--color-secondary-accent); font-weight: var(--font-weight-semibold); background: rgba(var(--color-secondary-accent-rgb, 44,153,242), 0.1); padding: 2px 6px; border-radius: var(--radius-sm); } /* Dark mode support */ @media (prefers-color-scheme: dark) { .post-content li:has(img[alt*="unticked" i])::before, .post-content li:has(img[alt*="unchecked" i])::before, .single-post li:has(img[alt*="unticked" i])::before, .single-post li:has(img[alt*="unchecked" i])::before, .dd-checkbox-icon { color: var(--color-teal-300); } .dd-checkbox-text .points-score { color: var(--color-teal-300); background: rgba(var(--color-teal-300-rgb, 50,184,198), 0.15); } } [data-color-scheme="dark"] .dd-checkbox-icon { color: var(--color-teal-300); } /* ============ END CHECKBOX LIST RESCUE ============ */ /* ======= ↑ [START HERE] ↑ ALL NEW STYLING ABOVE ↑ ========*/ /*== START MENU STYLING ==!KEEP AT BOTTOM FOR MAX BURGER!==*/ /* MOBILE HEADER & TOGGLE “X” CONSOLIDATION */ @media (max-width: 768px) { /* Header container */ .nav__mobile-header { display: flex; justify-content: space-between; align-items: center; background: var(--color-surface); padding: 0 var(--space-16); height: 60px; border-bottom: 1px solid var(--color-border); position: fixed; top: 0; left: 0; right: 0; z-index: 1002; overflow: visible !important; } /* Logo */ .nav__mobile-logo img { width: 35px; /* was 32px; */ height: 35px; } /* Toggle button */ #navToggle, .nav__toggle { display: flex !important; justify-content: center; align-items: center; width: 48px !important; height: 48px !important; padding: 0 !important; margin-right: 8px !important; position: relative !important; z-index: 1002 !important; overflow: visible !important; pointer-events: auto !important; } /* Bars */ #navToggle span, .nav__toggle span { display: block !important; width: 100% !important; height: 4px !important; margin: 4px 0 !important; background-color: var(--color-text) !important; transition: transform 0.3s ease, opacity 0.3s ease !important; transform-origin: center center !important; overflow: visible !important; } /* Active “X” state */ #navToggle.active span:nth-child(1), .nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } #navToggle.active span:nth-child(2), .nav__toggle.active span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; } #navToggle.active span:nth-child(3), .nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } /* Ensure menu stacking */ .nav__menu { z-index: 1001 !important; } } /* 1) Ensure the mobile header sits above the menu */ .nav__mobile-header { position: fixed !important; /* keep it pinned */ top: 0; left: 0; right: 0; z-index: 1002; /* above .nav__menu (1001) */ } /* 2) Force the logo itself above everything */ .nav__mobile-logo { position: absolute !important; top: 0rem; /* 1rem ← this controls how far down the logo sits */ left: 0rem; /* 1rem */ bottom: 0rem; z-index: 1003; /* to stay above header bar */ } /* 3) Push the menu content below the header bar height */ .nav__menu.active { top: 65px !important; /* 56px; match .nav__mobile-header height */ padding-top: 45px; /* 0px; if you have padding-top, can remove it */ z-index: 1002; /* behind the header 1001 */ } @media (max-width: 768px) { #mobileCta { display: none !important; position: fixed; bottom: calc(env(safe-area-inset-bottom) + 40px); /*16px;*/ left: 50%; transform: translateX(-50%); width: 90%; max-width: 320px; padding: 12px 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); text-align: center; z-index: 9999; } /* show only when menu is open */ .nav__menu.active ~ #mobileCta, .nav__menu.active + #mobileCta, .nav__menu.active #mobileCta { display: block !important; } /* Ensure it doesn't show when menu is closed */ .nav__menu:not(.active) ~ #mobileCta, .nav__menu:not(.active) #mobileCta { display: none !important; } } /* Anchor hover */ a:hover { color: var(--color-primary-hover); } /* Navigation link hover (inherits anchor hover) */ .nav__link:hover { /* inherits anchor hover above */ } /* Smooth transitions for nav links */ .nav__link { transition: background-color 200ms ease, color 200ms ease; } /* Custom background on nav link hover */ .nav__link:hover { background-color: rgba(var(--color-primary-rgb), 0.1); } /* Underline animation on nav link */ .nav__link { position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 3px; background: var(--color-primary); transition: width 200ms ease; } .nav__link:hover::after { width: 100%; } /* Scale effect on nav link hover */ .nav__link:hover { transform: scale(1.06); transition: transform 150ms ease; } /* Dropdown submenu initial state */ .nav__submenu { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease; } /* Show submenu on hover */ @media (min-width: 769px) { .nav__dropdown:hover .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } } @media (max-width: 768px) { /* Force mobile submenu to be visible */ .nav__submenu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: var(--color-surface) !important; border: none !important; padding: var(--space-16) !important; margin: 0 !important; } /* Ensure submenu links are legible */ .nav__sublink { color: var(--color-text) !important; padding: var(--space-8) var(--space-16) !important; background: transparent !important; } /* Dark mode adjustments */ @media (prefers-color-scheme: dark), [data-color-scheme="dark"] { .nav__submenu { background: var(--color-surface) !important; } .nav__sublink { color: var(--color-text) !important; } } } @media (max-width: 768px) { /* Submenu links: base style */ .nav__sublink { color: var(--color-text); background: transparent; transition: background 0.18s var(--ease-standard), color 0.18s var(--ease-standard); } /* Submenu links: hover/tap effect using the existing submenu color */ .nav__sublink:active, .nav__sublink:hover { background: var(--color-secondary) !important; color: var(--color-primary) !important; } /* Dark mode support for hover state */ @media (prefers-color-scheme: dark), [data-color-scheme="dark"] { .nav__sublink:active, .nav__sublink:hover { background: var(--color-secondary) !important; color: var(--color-primary) !important; } } } /* == END MENU STYLING ==!KEEP AT BOTTOM FOR MAX BURGER!== */ /* ==== FINAL DROPDOWN FIX - TABLET CLIPPING ISSUE ======== */ /* 1. Ensure header allows overflow for dropdowns */ .header { overflow: visible !important; height: auto !important; max-height: none !important; } /* 2. Ensure nav container allows overflow */ .nav { overflow: visible !important; height: auto !important; max-height: none !important; } /* 3. Force dropdown positioning and visibility on tablets */ @media (min-width: 769px) and (max-width: 1024px) { .nav__dropdown { position: relative !important; overflow: visible !important; } .nav__submenu { position: absolute !important; top: 100% !important; left: 0 !important; z-index: 9999 !important; /* Much higher z-index */ overflow: visible !important; max-height: none !important; height: auto !important; } .nav__dropdown:hover .nav__submenu { opacity: 1 !important; visibility: visible !important; transform: translateY(0px) !important; display: block !important; } } /* 4. Ensure container allows overflow */ .container { overflow: visible !important; } /* 5. Force any parent wrappers to allow overflow */ .header .container, .nav .container { overflow: visible !important; height: auto !important; max-height: none !important; } /* ============ END DROPDOWN FIX ============ */ /* Mobile CTA - Fixed positioning and z-index */ @media (max-width: 768px) { #mobileCta { display: none !important; /* Hidden by default */ position: fixed !important; /* Fixed to viewport, not menu */ bottom: calc(env(safe-area-inset-bottom) + 30px) !important; /* Bottom of screen */ left: 50% !important; transform: translateX(-50%) !important; width: 90%; max-width: 320px; padding: 12px 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); text-align: center; z-index: 10000 !important; /* Higher than mobile menu (1002) */ background: var(--color-primary); color: white; border-radius: var(--radius-base); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); pointer-events: auto !important; /* Ensure it's clickable */ } /* ONLY show when mobile menu is active */ body.menu-open #mobileCta { display: block !important; } /* Alternative selector if menu-open class isn't on body */ .nav__menu.active ~ #mobileCta { display: block !important; } /* Ensure it doesn't show when menu is closed */ body:not(.menu-open) #mobileCta, .nav__menu:not(.active) ~ #mobileCta { display: none !important; } } body { margin: 0 !important; padding: 0 !important; } .footer { margin-bottom: 0 !important; } .footer__content { margin-bottom: 0 !important; } .footer p:last-child { margin-bottom: 0 !important; } body.admin-bar { margin-top: 0 !important; } .site, .wrapper, .main, #main { margin-bottom: 0 !important; } /* --- end of style.css --- */