/* Custom Styles for Friends Medical Services */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } body { font-family: "Inter", sans-serif; overflow-x: hidden; } /* =================================== Header Scroll Behavior Styles =================================== */ /* Header at top - transparent overlay, absolute position (homepage desktop only) */ #main-header.header-top { position: absolute; background-color: rgba(0, 0, 0, .25); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .22); } /* Header when scrolled - fixed with solid background, slides in from top */ #main-header.header-scrolled { position: fixed !important; top: 0; background-color: #071c3c; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06); animation: slideDown .4s ease-out; } /* Slide down animation */ @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Slide up animation when scrolling back to top */ #main-header.header-sliding-up { position: fixed !important; animation: slideUp .4s ease-out forwards; } @keyframes slideUp { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* Prevent animation on initial page load */ #main-header.no-transition { animation: none !important; transition: none !important; } /* Ensure smooth transitions on header elements */ #main-header { will-change: background-color, box-shadow, transform; z-index: 9999 !important; } #main-header.header-top, #main-header.header-scrolled { z-index: 9999 !important; } /* Keep only main header navigation links white */ #main-header nav > a, #main-header nav > .group > a, #main-header nav > .relative > a { color: white !important; } /* Keep header buttons and icons white (but not in menus) */ #main-header > div > div > div button, #main-header > div > div > div .material-icons { color: white !important; } /* Ensure mega menu and dropdown icons keep their original colors */ .mega-menu .material-icons, .dropdown-menu .material-icons { color: inherit !important; } /* Add text shadow for better readability on transparent header */ #main-header.header-top nav > a, #main-header.header-top nav > .group > a, #main-header.header-top nav > .relative > a, #main-header.header-top button:not(.mega-menu button):not(.dropdown-menu button) { text-shadow: 0 2px 4px rgba(0, 0, 0, .3); } /* Remove text shadow when scrolled */ #main-header.header-scrolled nav > a, #main-header.header-scrolled nav > .group > a, #main-header.header-scrolled nav > .relative > a, #main-header.header-scrolled button:not(.mega-menu button):not(.dropdown-menu button) { text-shadow: none; } /* Ensure mega menu and dropdown menu elements don't get text shadow */ .mega-menu *, .dropdown-menu * { text-shadow: none !important; } /* Mobile header adjustments */ @media (max-width: 1024px) { /* Always show header on mobile with solid background and fixed position */ #main-header.header-top { position: fixed !important; background-color: #071c3c !important; backdrop-filter: none; } #main-header.header-scrolled { position: fixed !important; background-color: #071c3c !important; } /* Keep solid background when mobile drawer is open */ body.drawer-open #main-header.header-top { background-color: #071c3c !important; } /* Add padding to homepage hero to account for fixed header on mobile (image slides) */ .hero-slider-section:not(:has(.hero-slide-video.active)) { padding-top: 4.5rem; /* 72px — clear space for fixed header (h-16) */ padding-bottom: 4.5rem; } } /* Page masthead — taller with vertically centred content below header */ .page-masthead, .service-category-masthead { --header-height: 4rem; /* matches h-16 */ --masthead-content-height: 14rem; display: flex !important; align-items: center !important; min-height: calc(var(--header-height) + var(--masthead-content-height)) !important; padding-top: var(--header-height) !important; padding-bottom: 0 !important; box-sizing: border-box; } .page-masthead > div, .service-category-masthead > div { padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; } @media (min-width: 1024px) { .page-masthead, .service-category-masthead { --header-height: 6rem; /* matches lg:h-24 */ --masthead-content-height: 22rem; } } /* Mobile mastheads — content-driven height with even vertical spacing */ @media (max-width: 1023px) { .page-masthead, .service-category-masthead { min-height: auto !important; height: auto !important; align-items: stretch !important; padding-bottom: 2rem !important; } .page-masthead > div, .service-category-masthead > div { padding-top: 2rem !important; padding-bottom: 2rem !important; } } /* Promo Call CTAs — styled like buttons but non-interactive */ .fm-call-cta-display { cursor: default; pointer-events: none; } /* Footer layout — CSS-only grid (avoids Tailwind column conflicts) */ .site-footer .footer-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 2rem; width: 100%; margin-bottom: 2.5rem; } .site-footer .footer-col { min-width: 0; } .site-footer .footer-col-title { margin: 0 0 1.25rem; color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em; } .site-footer .footer-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; } .site-footer .footer-link { display: inline-block; max-width: 100%; color: rgba(255, 255, 255, .78); font-size: .875rem; line-height: 1.45; text-decoration: none; transition: color .25s ease; word-break: break-word; } .site-footer .footer-link-list .footer-link { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem 0; transition: color .25s ease, transform .25s ease; } .site-footer .footer-link-list .footer-link:hover { color: #fff; transform: translateX(3px); } .site-footer .footer-link-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; color: #38bdf8; opacity: .55; transform: translateX(-2px); transition: color .25s ease, opacity .25s ease, transform .25s ease; } .site-footer .footer-link-list .footer-link:hover .footer-link-icon { color: #7dd3fc; opacity: 1; transform: translateX(0); } .site-footer .footer-link-text { transition: color .25s ease; } @media (prefers-reduced-motion: reduce) { .site-footer .footer-link-list .footer-link, .site-footer .footer-link-list .footer-link-icon { transition: color .25s ease, opacity .25s ease; transform: none; } .site-footer .footer-link-list .footer-link:hover { transform: none; } } .site-footer .footer-link:hover { color: #fff; } .site-footer .footer-col-brand p { max-width: 22rem; } .site-footer .footer-contact-list { display: flex; flex-direction: column; gap: 1rem; } .site-footer .footer-contact-item { display: flex; align-items: flex-start; gap: .625rem; min-width: 0; } .site-footer .footer-contact-icon { flex-shrink: 0; margin-top: .125rem; color: #38bdf8; font-size: 1.125rem; line-height: 1; } .site-footer .footer-contact-body { min-width: 0; } .site-footer .footer-contact-line { margin: 0 0 .375rem; font-size: .875rem; line-height: 1.45; } .site-footer .footer-contact-line:last-child { margin-bottom: 0; } .site-footer .footer-contact-label { color: #fff; font-weight: 600; margin-right: .25rem; } .site-footer .footer-contact-email { flex: 1; min-width: 0; } /* Tablet — brand full width, three link columns below */ @media (min-width: 768px) and (max-width: 1023px) { .site-footer .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.75rem; } .site-footer .footer-col-brand { grid-column: 1/-1; } } /* Desktop — 30 / 20 / 25 / 25 in one row, even spacing */ @media (min-width: 1024px) { .site-footer .footer-columns { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2.5fr) minmax(0, 2.5fr); column-gap: 2.5rem; row-gap: 0; align-items: start; } .site-footer .footer-col:not(:last-child) { padding-right: 2.5rem; border-right: 1px solid rgba(255, 255, 255, .1); } } /* Ensure page content doesn't jump when header becomes fixed */ .page-masthead, .hero-slider-section, .photo-masthead { position: relative; z-index: 1; } /* Photo masthead — blue gradient overlay on top of background image */ .photo-masthead .photo-masthead-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .photo-masthead .photo-masthead-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .photo-masthead-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 28, 60, .92) 0%, rgba(7, 28, 60, .72) 45%, rgba(0, 141, 204, .78) 100%); } .photo-masthead-hex { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: .25; } /* Make sure other content is not obscured by fixed header */ body { position: relative; } /* Custom Tailwind Configuration */ @layer utilities { .container { max-width: 1440px; } } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Custom Button Hover Effects */ button { transition: all .3s ease; } button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, .1); } button:active { transform: translateY(0); } /* Material Icons Styling */ .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } /* Card Hover Effects */ /* Note: Individual card hover effects are handled inline with Tailwind classes */ /* Link Hover Effects */ a { transition: color .2s ease; } /* Header Navigation Link Overrides for WordPress */ header nav a, header nav a:link, header nav a:visited { text-decoration: none !important; } /* Ensure main navigation links stay white */ header nav > a, header nav > .group > a, header nav > .relative > a { color: white !important; } header nav > a:hover, header nav > .group > a:hover, header nav > .relative > a:hover { color: #38bdf8 !important; } /* Gradient Text Effect */ .gradient-text { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #0284c7; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #0369a1; } /* Mega Menu Styles */ .mega-menu { transition: all .3s ease; } .mega-menu:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, .15); } /* Override WordPress default link styling in mega menus */ .mega-menu a, .mega-menu a:link, .mega-menu a:visited { color: #4b5563 !important; /* text-gray-600 */ text-decoration: none !important; } .mega-menu a:hover, .mega-menu a:focus { color: #0284c7 !important; /* text-sky-600 */ text-decoration: none !important; } .mega-menu h3 { color: #111827 !important; } /* Dropdown Menu Styles */ .dropdown-menu { transition: all .2s ease; } .dropdown-menu:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0, 0, 0, .1); } /* Override WordPress default link styling in dropdown menus */ .dropdown-menu a, .dropdown-menu a:link, .dropdown-menu a:visited { color: #4b5563 !important; /* text-gray-600 */ text-decoration: none !important; } .dropdown-menu a:hover, .dropdown-menu a:focus { color: #0284c7 !important; /* text-sky-600 */ background-color: #f0f9ff !important; /* bg-sky-50 */ text-decoration: none !important; } /* Full Width Mega Menu */ .mega-menu { position: fixed !important; top: 64px !important; /* Match header height h-16 */ left: 0 !important; right: 0 !important; width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; transform: translateY(-10px); transition: all .3s cubic-bezier(.4, 0, .2, 1); } /* Adjust mega menu position for larger screens */ @media (min-width: 1024px) { .mega-menu { top: 96px !important; } } /* Mega Menu Content Alignment */ .mega-menu .container { margin-left: auto; margin-right: auto; padding-left: 5rem; padding-right: 5rem; } /* Mega Menu Hover States */ .mega-menu:hover { opacity: 1 !important; visibility: visible !important; transform: translateY(0); } /* Group hover with delay */ .group:hover .mega-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0); transition-delay: .1s; } /* Smooth closing with delay */ .group:not(:hover) .mega-menu { opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px); transition-delay: .2s; } /* Ensure mega menu doesn't interfere with page content */ .mega-menu { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06); } /* Smooth transitions for all menu states */ .mega-menu { transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1); } /* Enhanced hover effects */ .group:hover .mega-menu { transition-delay: .1s; } .group:not(:hover) .mega-menu { transition-delay: .2s; } /* Mobile Menu Adjustments */ @media (max-width: 1300px) { .mega-menu .container { padding-left: 2rem; padding-right: 2rem; } } @media (max-width: 1024px) { .mega-menu .grid-cols-3, .mega-menu .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .mega-menu .grid-cols-5, .mega-menu .grid-cols-6 { grid-template-columns: repeat(3, 1fr); } .mega-menu .container { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 768px) { .mega-menu .grid-cols-3, .mega-menu .grid-cols-4, .mega-menu .grid-cols-5, .mega-menu .grid-cols-6 { grid-template-columns: 1fr; } .mega-menu .container { padding-left: 1rem; padding-right: 1rem; } } /* Tighter spacing for 5–6 column mega menus on desktop */ .mega-menu .mega-menu-grid.grid-cols-5, .mega-menu .mega-menu-grid.grid-cols-6 { gap: 1.5rem; } /* Desktop column dividers — xl matches when the desktop nav / mega menu is shown */ @media (min-width: 1280px) { .mega-menu .mega-menu-grid { gap: 0; align-items: stretch; } .mega-menu .mega-menu-column { position: relative; padding: .25rem 2rem; } .mega-menu .mega-menu-column:first-child { padding-left: 0; } .mega-menu .mega-menu-column:last-child { padding-right: 0; } .mega-menu .mega-menu-grid.grid-cols-2 .mega-menu-column:not(:nth-child(2n))::after, .mega-menu .mega-menu-grid.grid-cols-3 .mega-menu-column:not(:nth-child(3n))::after, .mega-menu .mega-menu-grid.grid-cols-4 .mega-menu-column:not(:nth-child(4n))::after, .mega-menu .mega-menu-grid.grid-cols-5 .mega-menu-column:not(:nth-child(5n))::after, .mega-menu .mega-menu-grid.grid-cols-6 .mega-menu-column:not(:nth-child(6n))::after { content: ""; position: absolute; top: .5rem; right: 0; bottom: .5rem; width: 1px; background: linear-gradient(to bottom, transparent 0%, #dbeafe 15%, #cbd5e1 50%, #dbeafe 85%, transparent 100%); } } /* Mobile Drawer Menu Styles */ #mobile-drawer { pointer-events: none; z-index: 10000; } #mobile-drawer.drawer-open { pointer-events: auto; } /* Backdrop fade animation */ #drawer-backdrop { opacity: 0; transition: opacity .3s ease-in-out; z-index: 1; } #mobile-drawer.drawer-open #drawer-backdrop { opacity: 1; } /* Drawer slide animation - delayed to happen after backdrop */ #drawer-content { transform: translateX(-100%); transition: transform .3s ease-in-out; transition-delay: .15s; /* Starts sliding after backdrop begins fading */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Prevent scroll from leaking to page behind */ height: 100vh; height: 100dvh; /* Dynamic viewport height — accounts for mobile browser chrome */ z-index: 2; } #mobile-drawer.drawer-open #drawer-content { transform: translateX(0); transition-delay: .15s; } /* Prevent the page from scrolling behind the open drawer */ body.drawer-open { overflow: hidden; overscroll-behavior: none; touch-action: none; } /* Restore touch-action inside the drawer so it can still scroll */ #drawer-content { touch-action: pan-y; } /* Mobile Drawer - Full Width on Mobile, Fixed Width on Desktop */ @media (max-width: 767px) { #drawer-content { width: 100% !important; background-color: #071c3c !important; } } /* Hide RCB widget behind the mobile drawer when drawer is open. #mobile-drawer is inside
which forms its own stacking context — the entire header paints at 9999 in root. Any root z-index >= 9999 still ends up on top, so we must go clearly below the header's level. */ body.drawer-open #rcb-widget { z-index: 100; } /* Mobile Accordion Styles */ .mobile-accordion-icon { transition: transform .3s ease-in-out; } .mobile-accordion-content { transition: all .3s ease-in-out; max-height: 0; overflow: hidden; } .mobile-accordion-content:not(.hidden) { max-height: 1000px; } /* Responsive Design Helpers */ @media (max-width: 1300px) { .container { padding-left: 2rem; padding-right: 2rem; } } @media (max-width: 768px) { header { height: auto !important; } .container { padding-left: 1rem; padding-right: 1rem; } h1 { font-size: 2rem !important; } .grid-cols-2 { grid-template-columns: 1fr; } .grid-cols-4, .grid-cols-5 { grid-template-columns: 1fr; } } /* Animation Keyframes */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn .6s ease-out; } /* Loading State */ .loading { position: relative; pointer-events: none; opacity: .6; } .loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #0284c7; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Focus States for Accessibility */ button:focus, a:focus { outline: 2px solid #0284c7; outline-offset: 2px; } /* Print Styles */ @media print { header, footer, button, nav { display: none !important; } body { background: white !important; } section { page-break-inside: avoid; } } /* Partners Carousel Animation */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-scroll { animation: scroll 30s linear infinite; } .partners-carousel:hover { animation-play-state: paused; } .partners-carousel-wrap { position: relative; width: 100vw; max-width: 100%; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; } .partners-carousel-wrap::before, .partners-carousel-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(4rem, 12vw, 10rem); z-index: 10; pointer-events: none; } .partners-carousel-wrap::before { left: 0; background: linear-gradient(to right, #f9fafb 0%, rgba(249, 250, 251, 0) 100%); } .partners-carousel-wrap::after { right: 0; background: linear-gradient(to left, #f9fafb 0%, rgba(249, 250, 251, 0) 100%); } /* Rich Text Content Styling (Service Content Area) */ .service-content { font-size: 1rem; line-height: 1.75; color: #374151; } .service-content > * + * { margin-top: 1.25rem; } .service-content h1, .service-content h2, .service-content h3, .service-content h4, .service-content h5, .service-content h6 { color: #0c4a6e; font-weight: 700; line-height: 1.3; margin-top: 2rem; margin-bottom: 1rem; } .service-content h1 { font-size: 2.25rem; } .service-content h2 { font-size: 1.875rem; } .service-content h3 { font-size: 1.5rem; } .service-content h4 { font-size: 1.25rem; } .service-content h5, .service-content h6 { font-size: 1.125rem; } .service-content p { margin-bottom: 1.25rem; } .service-content strong, .service-content b { font-weight: 600; color: #111827; } .service-content em, .service-content i { font-style: italic; } .service-content a { color: #0284c7; text-decoration: underline; transition: color .2s ease; } .service-content a:hover { color: #0369a1; } .service-content ul, .service-content ol { margin-left: 1.5rem; margin-bottom: 1.25rem; padding-left: .5rem; } .service-content ul { list-style-type: disc; } .service-content ol { list-style-type: decimal; } .service-content li { margin-bottom: .5rem; padding-left: .25rem; } .service-content li::marker { color: #0284c7; } .service-content blockquote { border-left: 4px solid #0284c7; padding-left: 1.5rem; margin-left: 0; margin-right: 0; margin-bottom: 1.25rem; font-style: italic; color: #4b5563; } .service-content code { background-color: #f3f4f6; color: #ef4444; padding: .125rem .375rem; border-radius: .25rem; font-size: .875em; font-family: "Courier New", Courier, monospace; } .service-content pre { background-color: #1f2937; color: #f9fafb; padding: 1rem; border-radius: .5rem; overflow-x: auto; margin-bottom: 1.25rem; } .service-content pre code { background-color: transparent; color: inherit; padding: 0; } .service-content hr { border: none; border-top: 2px solid #e5e7eb; margin: 2rem 0; } .service-content img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1.5rem 0; } .service-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; } .service-content table th, .service-content table td { border: 1px solid #e5e7eb; padding: .75rem; text-align: left; } .service-content table th { background-color: #f3f4f6; font-weight: 600; color: #111827; } .service-content table tr:nth-child(even) { background-color: #f9fafb; } /* WordPress alignment classes */ .service-content .alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; } .service-content .alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; } .service-content .aligncenter { display: block; margin-left: auto; margin-right: auto; } /* WordPress Gutenberg blocks support */ .service-content .wp-block-image { margin-bottom: 1.5rem; } .service-content .wp-block-quote { border-left: 4px solid #0284c7; padding-left: 1.5rem; margin: 1.5rem 0; } .service-content .wp-block-button__link { background-color: #0284c7; color: white; padding: .75rem 1.5rem; border-radius: .5rem; text-decoration: none; display: inline-block; transition: background-color .2s ease; } .service-content .wp-block-button__link:hover { background-color: #0369a1; } /* =================================== Hero Slider Styles =================================== */ /* Hero Slider Container — fills the section absolutely */ .hero-slider-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; } /* Individual Slides — fill the wrapper, content vertically centred */ .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--slider-transition, 1000ms) ease-in-out, visibility var(--slider-transition, 1000ms) ease-in-out; z-index: 1; } .hero-slide.active { opacity: 1; visibility: visible; z-index: 2; } /* Slide Content Animations */ .hero-slide.active .slide-title { animation: slideInUp .8s ease-out .2s both; } .hero-slide.active .slide-description { animation: slideInUp .8s ease-out .4s both; } .hero-slide.active .slide-cta { animation: slideInUp .8s ease-out .6s both; } .hero-slide.active .slide-stats { animation: slideInUp .8s ease-out .8s both; } .hero-slide.active .slide-image { animation: slideInRight 1s ease-out .3s both; } /* Keyframe Animations */ @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Slider Navigation Dots */ .slider-controls { display: flex; gap: 24px; justify-content: center; align-items: center; } .slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 2px solid rgba(255, 255, 255, .8); cursor: pointer; transition: all .3s ease; padding: 0; } .slider-dot:hover { background: rgba(255, 255, 255, .8); transform: scale(1.2); } .slider-dot.active { width: 40px; border-radius: 6px; background: #0ea5e9; border-color: #0ea5e9; } /* Navigation Arrows - Hidden */ .slider-nav { display: none !important; } .slider-nav:hover { background: rgba(14, 165, 233, .9); border-color: rgba(14, 165, 233, 1); transform: scale(1.1); } .slider-nav:active { transform: scale(.95); } .slider-nav .material-icons { font-size: 28px; } /* Responsive Adjustments */ @media (max-width: 1023px) { .slider-nav { width: 40px; height: 40px; } .slider-nav .material-icons { font-size: 24px; } /* Hide navigation dots on mobile */ .slider-controls { display: none !important; } } /* Hide navigation when only one slide */ .hero-slider-wrapper:has(.hero-slide:only-of-type) .slider-controls, .hero-slider-wrapper:has(.hero-slide:only-of-type) .slider-nav { display: none; } /* Smooth transitions for stats grid */ .slide-stats { transition: all .5s ease; } /* Loading state for images */ .slide-image img { transition: opacity .3s ease; } .slide-image img.loading { opacity: .5; } /* Image slide — flat photo: no shadow, radius, or extra frame spacing */ .hero-slide-image .slide-image, .hero-slide-image .slide-image img { border-radius: 0; box-shadow: none; filter: none; padding: 0; margin: 0; background: none; } .hero-slide-image .slide-image { line-height: 0; overflow: visible; } .hero-slide-image .slide-image img { display: block; width: 100%; } /* =================================== Video Slide Styles =================================== */ /* Video Backgrounds Container - holds all video backgrounds */ .hero-video-backgrounds-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; overflow: hidden; pointer-events: none; } /* Individual Video Background */ .hero-video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity var(--slider-transition, 1000ms) ease-in-out, visibility var(--slider-transition, 1000ms) ease-in-out; } /* Show active video background */ .hero-video-background.active { opacity: 1; visibility: visible; } /* Hide static background image when a video slide is active */ .hero-slider-section:has(.hero-slide-video.active) { background-image: none !important; background-color: #071c3c; } .hero-slider-section:has(.hero-slide-video.active).nitro-lazy { background-image: none !important; } /* Video Slide — centred on both axes (inherits position: absolute + display: flex from .hero-slide) */ .hero-slide-video { --hero-video-pad-block: 4.5rem; flex-direction: column; justify-content: center; align-items: center; padding-top: var(--hero-video-pad-block); padding-bottom: var(--hero-video-pad-block); box-sizing: border-box; } @media (min-width: 1024px) { .hero-slide-video { --hero-video-pad-block: 6rem; } } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Video Overlay - Dark overlay for better text readability */ .hero-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(7, 28, 60, .7) 0%, rgba(7, 28, 60, .5) 50%, rgba(7, 28, 60, .7) 100%); z-index: 2; } /* Video Content Overlay */ .hero-video-content { position: relative; z-index: 20; width: 100%; padding: 0 1rem; } /* Video slide title */ .hero-slide-video .slide-title { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.15; color: #fff; margin-bottom: 1.5rem; } /* Video slide description */ .hero-slide-video .slide-description { font-size: clamp(1rem, 2vw, 1.375rem); line-height: 1.75; color: rgba(255, 255, 255, .92); margin-bottom: 2.5rem; max-width: 48rem; margin-left: auto; margin-right: auto; } /* Video Slide Animations - Override for centered layout */ .hero-slide-video.active .slide-title { animation: fadeInScale 1s ease-out .2s both; } .hero-slide-video.active .slide-description { animation: fadeInScale 1s ease-out .5s both; } .hero-slide-video.active .slide-cta { animation: fadeInScale 1s ease-out .8s both; } /* Hero CTA band — fluid buttons that keep labels on one line (desktop + iPad) */ .slide-cta { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .slide-cta { flex-direction: row; flex-wrap: wrap; align-items: center; } } .hero-slide-video .slide-cta { justify-content: center; } .hero-slide-image .slide-cta { justify-content: flex-start; } .hero-cta-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: clamp(.375rem, .45vw, .75rem); padding: clamp(.625rem, .35vw + .5rem, 1rem) clamp(.75rem, 1vw + .35rem, 2rem); font-size: clamp(.8125rem, .42vw + .55rem, 1.125rem); font-weight: 600; line-height: 1.2; white-space: nowrap; border-radius: .5rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .hero-cta-btn .material-icons { font-size: 1.15em; flex-shrink: 0; } .hero-cta-btn--primary { background-color: #0284c7; color: #fff; } .hero-cta-btn--primary:hover { background-color: #0369a1; } .hero-cta-btn--outline { border: 2px solid #fff; color: #fff; backdrop-filter: blur(4px); } .hero-cta-btn--outline:hover { background-color: #fff; color: #071c3c; } /* Hero CTAs — keep large button size on mobile */ @media (max-width: 639px) { .hero-cta-btn { font-size: 1.125rem; padding: 1rem 2rem; gap: .75rem; } } /* Two-column image slides: tighten CTAs between lg and xl */ @media (min-width: 1024px) and (max-width: 1279px) { .hero-slide-image .hero-cta-btn { font-size: clamp(.75rem, .35vw + .5rem, .9375rem); padding-inline: clamp(.625rem, .8vw + .25rem, 1.25rem); } } @keyframes fadeInScale { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Responsive adjustments for video slides */ @media (max-width: 1023px) { /* Full viewport height — content centred in visible area below header */ .hero-slider-section:has(.hero-slide-video.active) { min-height: 100svh; min-height: 100dvh; padding-top: 0; padding-bottom: 0; } .hero-video-content { padding: 0 1rem; width: 100%; } } /* Accessibility - Focus states */ .slider-dot:focus, .slider-nav:focus { outline: 3px solid rgba(14, 165, 233, .5); outline-offset: 3px; } /* Pause indicator removed - not needed */ /* Ensure proper z-index stacking - hero stays below service cards */ .hero-slider-section { position: relative; z-index: 1; isolation: isolate; } /* Performance optimization - GPU acceleration */ .hero-slide, .slide-title, .slide-description, .slide-cta, .slide-stats, .slide-image { will-change: transform, opacity; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* =================================== Service Cards Overlap Fix =================================== */ /* Service cards section - ensure it overlaps hero */ .services-grid-section { position: relative; z-index: 100 !important; } /* Service cards wrapper with negative margin */ .services-cards-wrapper { position: relative; z-index: 100; } /* Individual service cards - highest z-index and proper stacking */ .services-grid-section .grid { position: relative; z-index: 100; } .services-grid-section a.group { position: relative; z-index: 101; background-color: white; } /* Ensure hero section stays below */ .hero-slider-section { position: relative; z-index: 1 !important; } /* Container inside image slides — sits within the slider wrapper stacking context */ .hero-slide-image .container { position: relative; z-index: 1; } /* =================================== Consultant Rich Text Content Styles =================================== */ .consultant-rich-text { font-size: 16px; line-height: 1.75; } /* Paragraphs */ .consultant-rich-text p { margin-bottom: 1rem; } .consultant-rich-text p:last-child { margin-bottom: 0; } /* Headings in rich text */ .consultant-rich-text h1, .consultant-rich-text h2, .consultant-rich-text h3, .consultant-rich-text h4, .consultant-rich-text h5, .consultant-rich-text h6 { font-family: "Poppins", sans-serif; font-weight: 600; color: #0c4a6e; margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.3; } .consultant-rich-text h1 { font-size: 2rem; } .consultant-rich-text h2 { font-size: 1.75rem; } .consultant-rich-text h3 { font-size: 1.5rem; } .consultant-rich-text h4 { font-size: 1.25rem; } .consultant-rich-text h5 { font-size: 1.125rem; } .consultant-rich-text h6 { font-size: 1rem; } /* Bold and Strong */ .consultant-rich-text strong, .consultant-rich-text b { font-weight: 700; color: #1e293b; } /* Italic and Emphasis */ .consultant-rich-text em, .consultant-rich-text i { font-style: italic; } /* Underline */ .consultant-rich-text u { text-decoration: underline; } /* Unordered Lists (Bullets) */ .consultant-rich-text ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; padding-left: .5rem; } .consultant-rich-text ul li { margin-bottom: .5rem; padding-left: .25rem; } .consultant-rich-text ul li::marker { color: #0ea5e9; font-size: 1.1em; } /* Nested unordered lists */ .consultant-rich-text ul ul { list-style-type: circle; margin-top: .5rem; margin-bottom: .5rem; } .consultant-rich-text ul ul ul { list-style-type: square; } /* Ordered Lists (Numbers) */ .consultant-rich-text ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1rem; padding-left: .5rem; } .consultant-rich-text ol li { margin-bottom: .5rem; padding-left: .25rem; } .consultant-rich-text ol li::marker { color: #0ea5e9; font-weight: 600; } /* Nested ordered lists */ .consultant-rich-text ol ol { list-style-type: lower-alpha; margin-top: .5rem; margin-bottom: .5rem; } .consultant-rich-text ol ol ol { list-style-type: lower-roman; } /* Links */ .consultant-rich-text a { color: #0284c7; text-decoration: underline; transition: color .2s ease; } .consultant-rich-text a:hover { color: #0ea5e9; } /* Blockquotes */ .consultant-rich-text blockquote { border-left: 4px solid #0ea5e9; padding-left: 1.5rem; margin-left: 0; margin-right: 0; margin-bottom: 1.5rem; font-style: italic; color: #475569; background-color: #f0f9ff; padding: 1rem 1.5rem; border-radius: .5rem; } .consultant-rich-text blockquote p { margin-bottom: .5rem; } .consultant-rich-text blockquote p:last-child { margin-bottom: 0; } /* Code blocks */ .consultant-rich-text code { background-color: #f1f5f9; padding: .2rem .4rem; border-radius: .25rem; font-family: "Courier New", Courier, monospace; font-size: .9em; color: #e11d48; } .consultant-rich-text pre { background-color: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: .5rem; overflow-x: auto; margin-bottom: 1rem; } .consultant-rich-text pre code { background-color: transparent; padding: 0; color: inherit; } /* Horizontal Rules */ .consultant-rich-text hr { border: none; border-top: 2px solid #e2e8f0; margin: 2rem 0; } /* Tables */ .consultant-rich-text table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .consultant-rich-text table th, .consultant-rich-text table td { padding: .75rem; border: 1px solid #e2e8f0; text-align: left; } .consultant-rich-text table th { background-color: #f1f5f9; font-weight: 600; color: #0c4a6e; } .consultant-rich-text table tr:nth-child(even) { background-color: #f8fafc; } /* Images */ .consultant-rich-text img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1rem 0; } /* Definition Lists */ .consultant-rich-text dl { margin-bottom: 1rem; } .consultant-rich-text dt { font-weight: 600; color: #1e293b; margin-top: .5rem; } .consultant-rich-text dd { margin-left: 1.5rem; margin-bottom: .5rem; } /* Subscript and Superscript */ .consultant-rich-text sub, .consultant-rich-text sup { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; } .consultant-rich-text sup { top: -.5em; } .consultant-rich-text sub { bottom: -.25em; } /* =================================== Modal Z-Index Overrides Scale (low → high): header 9999, search drawer 10001, RCB widget 10002, full-screen modals 100000, WP admin bar 999999. =================================== */ /* Theme full-screen modals — above header, drawers, RCB, mega menus */ .fm-modal, #booking-modal, #enquiry-modal, #page-enquiry-modal, .modal, .dialog, .popup, [role="alertdialog"], [role="dialog"][aria-modal="true"], .mfp-wrap, .fancybox-container, .ui-dialog, .swal2-container { z-index: 100000 !important; } /* WordPress media modal */ .media-modal, .media-modal-backdrop { z-index: 100000 !important; } /* Slide-out panels are not full-screen overlays — keep within widget layer (desktop) */ @media (min-width: 641px) { #rcb-panel[role="dialog"] { z-index: auto !important; } } /* WordPress admin bar should still be on top */ #wpadminbar { z-index: 999999 !important; } /* =================================== Search Drawer Styles =================================== */ /* Search Drawer Container */ #search-drawer { pointer-events: none; z-index: 10001; } #search-drawer.search-drawer-open { pointer-events: auto; } /* Backdrop fade animation */ #search-backdrop { opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; } #search-drawer.search-drawer-open #search-backdrop { opacity: 1; pointer-events: auto; } /* Drawer slide animation from right - Dark Theme */ #search-drawer-content { transform: translateX(100%); transition: transform .3s ease-in-out; height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ box-shadow: -4px 0 20px rgba(0, 0, 0, .5); } #search-drawer.search-drawer-open #search-drawer-content { transform: translateX(0); } /* Responsive widths - Mobile first approach */ @media (max-width: 767px) { #search-drawer-content { width: 100% !important; } } /* iPad and Desktop widths */ @media (min-width: 768px) { #search-drawer-content { width: 40% !important; /* 40% on iPad and Desktop */ min-width: 320px; } } /* Very large screens - optional max width for better UX */ @media (min-width: 1920px) { #search-drawer-content { max-width: 600px; } } /* Search input focus state - Dark Theme */ #search-input:focus { border-color: #0ea5e9 !important; outline: none; box-shadow: 0 0 0 2px rgba(14, 165, 233, .3) !important; } #search-input { transition: all .2s ease; } /* Search result items hover effect */ #search-results-content a { text-decoration: none; display: block; } #search-results-content a:hover { text-decoration: none; } /* Smooth scrollbar for search results - Dark Theme */ #search-drawer-content::-webkit-scrollbar { width: 8px; } #search-drawer-content::-webkit-scrollbar-track { background: #0a1628; } #search-drawer-content::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } #search-drawer-content::-webkit-scrollbar-thumb:hover { background: #475569; } /* Ensure search drawer is above header */ #search-drawer { z-index: 10001 !important; } /* Prevent body scroll when drawer is open */ body:has(#search-drawer.search-drawer-open) { overflow: hidden; } /* Search suggestion pills hover effect */ .search-suggestion { transition: all .2s ease; } .search-suggestion:hover { transform: translateY(-1px); } .search-suggestion:active { transform: translateY(0); } /* =================================== FAQ Rich Text Content Styles =================================== */ /* Style for rich text content in FAQ answers */ .faq-content p { margin-bottom: .75rem; } .faq-content p:last-child { margin-bottom: 0; } /* Lists in FAQ content */ .faq-content ul, .faq-content ol { margin: .75rem 0; padding-left: 1.5rem; } .faq-content ul { list-style-type: disc; } .faq-content ol { list-style-type: decimal; } .faq-content li { margin-bottom: .375rem; line-height: 1.6; } .faq-content li:last-child { margin-bottom: 0; } /* Links in FAQ content */ .faq-content a { color: #0284c7; text-decoration: underline; transition: color .2s ease; } .faq-content a:hover { color: #0369a1; } /* Bold and italic text */ .faq-content strong { font-weight: 600; color: #1f2937; } .faq-content em { font-style: italic; } /* Blockquotes in FAQ content */ .faq-content blockquote { border-left: 4px solid #0ea5e9; padding-left: 1rem; margin: 1rem 0; font-style: italic; color: #4b5563; } /* Headings in FAQ content */ .faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4, .faq-content h5, .faq-content h6 { font-weight: 600; color: #111827; margin-top: 1rem; margin-bottom: .5rem; } .faq-content h1 { font-size: 1.5rem; } .faq-content h2 { font-size: 1.375rem; } .faq-content h3 { font-size: 1.25rem; } .faq-content h4 { font-size: 1.125rem; } .faq-content h5 { font-size: 1rem; } .faq-content h6 { font-size: .875rem; } /* Responsive adjustments for mobile */ @media (max-width: 640px) { .faq-content ul, .faq-content ol { padding-left: 1.25rem; } .faq-content h1 { font-size: 1.25rem; } .faq-content h2 { font-size: 1.125rem; } .faq-content h3 { font-size: 1rem; } .faq-content h4 { font-size: .938rem; } } /* =================================== Request a Call Back Widget =================================== */ /* Outer wrapper — flex row, fixed to left edge, vertically centred */ #rcb-widget { position: fixed; left: 0; top: 0; bottom: 0; height: fit-content; margin-block: auto; z-index: 10002; display: flex; flex-direction: row; align-items: flex-start; } /* ── Tab strip: toggle + tab + phone, seamlessly joined ── */ #rcb-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 0; /* no gap — flush joins between elements */ flex-shrink: 0; box-shadow: 3px 0 12px rgba(0, 0, 0, .28); } /* Keep strip buttons equal width — Safari can mis-size writing-mode buttons */ #rcb-tabs > * { width: 100%; align-self: stretch; flex-shrink: 0; box-sizing: border-box; } /* Reset native button chrome — Safari mis-renders writing-mode on