/* Google Fonts moved to for performance - see header.php */ @import url('variables.css'); /* Reset & Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-dark); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition-base); } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-text-dark); margin-bottom: var(--spacing-md); } .hero-title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; line-height: 1.1; color: var(--color-primary-navy); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin-bottom: var(--spacing-md); } .text-lg { font-size: var(--fs-body-lg); line-height: 1.7; } .eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-teal); display: block; margin-bottom: var(--spacing-sm); } /* Layout */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--container-padding); } .section { padding: var(--spacing-4xl) 0; } .section-sm { padding: var(--spacing-3xl) 0; } .section-lg { padding: 6rem 0; } /* Grid System */ .grid { display: grid; gap: var(--spacing-lg); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } @media (min-width: 768px) { .md\:grid-2 { grid-template-columns: repeat(2, 1fr); } .md\:grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Flex Utilities */ .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-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); } .gap-xl { gap: var(--spacing-xl); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; border-radius: var(--border-radius-sm); transition: all var(--transition-base); text-decoration: none; cursor: pointer; border: 2px solid transparent; } .btn-primary { background-color: var(--color-accent-teal); color: var(--color-white); border-color: var(--color-accent-teal); } .btn-primary:hover { background-color: #0e7490; border-color: #0e7490; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background-color: var(--color-primary-navy); color: var(--color-white); border-color: var(--color-primary-navy); } .btn-secondary:hover { background-color: var(--color-navy-light); border-color: var(--color-navy-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline { background-color: transparent; color: var(--color-primary-navy); border-color: var(--color-primary-navy); } .btn-outline:hover { background-color: var(--color-primary-navy); color: var(--color-white); transform: translateY(-2px); } .btn-lg { padding: 1.25rem 2.5rem; font-size: 1.125rem; } /* Cards */ .card { background-color: var(--color-white); border-radius: var(--border-radius); padding: var(--spacing-xl); box-shadow: var(--shadow); transition: all var(--transition-base); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-8px); } .card-icon { width: 64px; height: 64px; background-color: var(--color-light-gray); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); color: var(--color-accent-teal); font-size: 2rem; } .card-title { font-size: var(--fs-h4); margin-bottom: var(--spacing-sm); } .card-text { color: var(--color-text-medium); margin-bottom: var(--spacing-md); } .card-link { color: var(--color-accent-teal); font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap var(--transition-base); } .card-link:hover { gap: 0.75rem; } /* Header */ .header { background-color: var(--color-white); padding: 1rem 0; position: sticky; top: 0; z-index: var(--z-sticky); transition: all var(--transition-base); border-bottom: 1px solid transparent; } .logo-img { height: 120px !important; width: auto !important; max-width: 100%; transition: height 0.3s ease !important; } .header.scrolled { box-shadow: var(--shadow-md); border-bottom-color: var(--color-gray-200); padding: 0.5rem 0; } .header.scrolled .logo-img { height: 60px !important; } /* Responsive logo sizing */ @media (max-width: 1200px) { .logo-img { height: 100px !important; } .header.scrolled .logo-img { height: 50px !important; } } @media (max-width: 768px) { .logo-img { height: 80px !important; } .header.scrolled .logo-img { height: 40px !important; } } .header-container { display: flex; align-items: center; justify-content: space-between; } .logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-primary-navy); text-decoration: none; } .nav { display: none; } @media (min-width: 992px) { .nav { display: flex; gap: 2rem; align-items: center; } } .nav-link { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-dark); padding: 0.5rem 0; position: relative; transition: color var(--transition-base); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-accent-teal); transition: width var(--transition-base); } .nav-link:hover, .nav-link.active { color: var(--color-accent-teal); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-phone { display: none; font-family: var(--font-heading); font-weight: 600; color: var(--color-accent-teal); align-items: center; gap: 0.5rem; transition: color var(--transition-base); } .nav-phone:hover { color: var(--color-primary-navy); } .nav-phone i { font-size: 0.9rem; } @media (min-width: 992px) { .nav-phone { display: flex; } } .mobile-nav-phone { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-accent-teal); padding: 1rem; margin-bottom: 1.5rem; background-color: var(--color-light-gray); border-radius: var(--border-radius-sm); transition: all var(--transition-base); } .mobile-nav-phone:hover { background-color: var(--color-accent-teal); color: var(--color-white); } .header-cta { display: none; } @media (min-width: 992px) { .header-cta { display: flex; gap: 1rem; } } /* Mobile Menu */ .mobile-menu-toggle { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; cursor: pointer; } @media (min-width: 992px) { .mobile-menu-toggle { display: none; } } .mobile-menu-toggle span { width: 24px; height: 2px; background-color: var(--color-primary-navy); transition: all var(--transition-base); } .mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; height: 100vh; background-color: var(--color-white); box-shadow: var(--shadow-xl); padding: 2rem; transition: right var(--transition-slow); z-index: var(--z-modal); overflow-y: auto; } .mobile-menu.active { right: 0; } .mobile-menu-close { position: absolute; top: 1rem; right: 1rem; font-size: 2rem; color: var(--color-text-dark); cursor: pointer; } .mobile-nav { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3rem; } .mobile-nav-link { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--color-text-dark); padding: 0.5rem 0; border-bottom: 1px solid var(--color-gray-200); } /* Footer */ .footer { background-color: var(--color-primary-navy); color: var(--color-white); padding: var(--spacing-4xl) 0 var(--spacing-lg) 0; } .footer-grid { display: grid; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-brand { max-width: 400px; } .footer-logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-white); margin-bottom: var(--spacing-md); } .footer-tagline { color: var(--color-gray-300); margin-bottom: var(--spacing-lg); } .footer-heading { font-size: 1rem; font-weight: 700; margin-bottom: var(--spacing-md); color: var(--color-white) !important; } .footer-links { list-style: none; padding: 0; } .footer-link { color: var(--color-gray-300); margin-bottom: var(--spacing-sm); transition: color var(--transition-base); display: block; } .footer-link:hover { color: var(--color-accent-teal); } .footer-newsletter { margin-top: var(--spacing-lg); } .newsletter-form { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .newsletter-input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--color-gray-400); border-radius: var(--border-radius-sm); font-size: 1rem; } .newsletter-input:focus { outline: none; border-color: var(--color-accent-teal); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--spacing-lg); margin-top: var(--spacing-2xl); display: flex; flex-direction: column; gap: var(--spacing-md); align-items: center; text-align: center; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-disclaimer { font-size: var(--fs-body-sm); color: var(--color-gray-400); max-width: 800px; } .social-links { display: flex; gap: var(--spacing-md); } .social-link { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--color-white); transition: all var(--transition-base); } .social-link:hover { background-color: var(--color-accent-teal); transform: translateY(-2px); } /* Hero Section */ .hero { padding: var(--spacing-3xl) 0; background-color: var(--color-white); } .hero-grid { display: grid; gap: var(--spacing-3xl); align-items: center; } @media (min-width: 992px) { .hero-grid { grid-template-columns: 1fr 1fr; } } .hero-content { max-width: 600px; } .hero-subtitle { font-size: var(--fs-body-lg); color: var(--color-text-medium); margin-bottom: var(--spacing-xl); line-height: 1.7; } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); } .hero-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .hero-image { border-radius: var(--border-radius); overflow: hidden; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-lg); } .hero-image:first-child { grid-row: 1 / 3; } /* Stats Bar */ .stats-bar { background-color: var(--color-light-gray); padding: var(--spacing-3xl) 0; } .stats-grid { display: grid; gap: var(--spacing-xl); text-align: center; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-number { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; color: var(--color-primary-navy); display: block; margin-bottom: var(--spacing-xs); } .stat-label { font-size: var(--fs-body); color: var(--color-text-medium); } /* Section Headings */ .section-header { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-3xl) auto; } .section-title { margin-bottom: var(--spacing-md); } .section-subtitle { font-size: var(--fs-body-lg); color: var(--color-text-medium); } /* Background Colors */ .bg-white { background-color: var(--color-white); } .bg-light { background-color: var(--color-light-gray); } .bg-navy { background-color: var(--color-primary-navy); color: var(--color-white); } /* Text Colors */ .text-navy { color: var(--color-primary-navy); } .text-teal { color: var(--color-accent-teal); } .text-gold { color: var(--color-warm-gold); } .text-white { color: var(--color-white); } /* Spacing Utilities */ .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mt-xl { margin-top: var(--spacing-xl); } .mt-2xl { margin-top: var(--spacing-2xl); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .mb-xl { margin-bottom: var(--spacing-xl); } .mb-2xl { margin-bottom: var(--spacing-2xl); } /* Testimonial Slider */ .testimonial-slider { position: relative; padding: var(--spacing-2xl) 0; } .testimonial-card { max-width: 800px; margin: 0 auto; text-align: center; } .testimonial-photo { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto var(--spacing-lg) auto; object-fit: cover; border: 4px solid var(--color-white); box-shadow: var(--shadow-lg); } .testimonial-quote { font-size: var(--fs-h4); font-style: italic; margin-bottom: var(--spacing-lg); line-height: 1.6; } .testimonial-author { font-weight: 600; margin-bottom: var(--spacing-xs); } .testimonial-role { color: var(--color-gray-400); font-size: var(--fs-body-sm); } /* FAQ Accordion */ .faq-item { border-bottom: 1px solid var(--color-gray-200); } .faq-question { width: 100%; text-align: left; padding: var(--spacing-lg) 0; font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; color: var(--color-text-dark); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color var(--transition-base); } .faq-question:hover { color: var(--color-accent-teal); } .faq-icon { transition: transform var(--transition-base); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .faq-item.active .faq-answer { max-height: 500px; padding-bottom: var(--spacing-lg); } .faq-answer-text { color: var(--color-text-medium); line-height: 1.7; } /* CTA Banner */ .cta-banner { background: linear-gradient(rgba(15, 39, 68, 0.9), rgba(15, 39, 68, 0.9)), url('/assets/images/hero/cta-bg.jpg'); background-size: cover; background-position: center; color: var(--color-white); padding: var(--spacing-4xl) 0; text-align: center; } .cta-banner-title { color: var(--color-white); margin-bottom: var(--spacing-md); } .cta-banner-subtitle { font-size: var(--fs-body-lg); color: var(--color-gray-300); margin-bottom: var(--spacing-xl); max-width: 600px; margin-left: auto; margin-right: auto; } /* Form Styles */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-text-dark); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--color-gray-300); border-radius: var(--border-radius-sm); font-size: 1rem; font-family: var(--font-body); transition: all var(--transition-base); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent-teal); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1); } .form-textarea { resize: vertical; min-height: 150px; } /* Tab Styles */ .tab-container { display: flex; gap: 0; } .tab-button { flex: 1; padding: 1.25rem 2rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; border: none; cursor: pointer; transition: all 0.3s ease; } .tab-button:not(.active):hover { background-color: var(--color-gray-100) !important; } .tab-content { animation: fadeIn 0.5s ease-in-out; } /* Partner Carriers */ /* Uniform carrier logo boxes */ .carrier-logo-box { width: 120px; height: 60px; display: flex; align-items: center; justify-content: center; padding: 0.5rem; transition: all 0.3s ease; } .carrier-logo-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(20%); opacity: 0.75; transition: all 0.3s ease; } .carrier-logo-box:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.1); } .carrier-logo img { filter: grayscale(20%); transition: all 0.3s ease; } .carrier-logo img:hover { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1.1); } .carrier-logos-wrapper { max-width: 100%; } @media (max-width: 991px) { .carrier-logos-wrapper { gap: 2.5rem !important; } .carrier-logo img { height: 40px !important; } } @media (max-width: 767px) { .carrier-logos-wrapper { gap: 2rem !important; } .carrier-logo img { height: 35px !important; } } /* Responsive */ @media (max-width: 991px) { .section { padding: var(--spacing-3xl) 0; } :root { --container-padding: 1rem; } .tab-button { font-size: 1rem; padding: 1rem 1.5rem; } } @media (max-width: 767px) { .hero-cta { flex-direction: column; width: 100%; } .btn { width: 100%; } .tab-container { flex-direction: column; } .tab-button { font-size: 0.95rem; padding: 0.875rem 1rem; } }