/* ========================================================================== Valencia Car Wash & Oil Change — Global Styles ========================================================================== */ :root { --primary: #02537E; --primary-dark: #013A59; --primary-light: #E6F0F5; --white: #FFFFFF; --text: #1A1A1A; --muted: #6B7280; --gold: #F5C451; } /* Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; /* offset anchor jumps so content isn't hidden under the sticky navbar */ scroll-padding-top: 90px; /* NOTE: no `scrollbar-gutter: stable` here. Bootstrap already compensates for the scrollbar it removes when a modal or offcanvas opens; reserving a gutter as well left a blank strip down the right edge while the dialog was open. */ } body { font-family: "Inter", system-ui, -apple-system, sans-serif; color: var(--text); margin: 0; /* Guard against sideways scroll from wide decorative glows/marquees. `clip` (not `hidden`) — `hidden` would make body a scroll container and break the sticky site header. */ overflow-x: clip; } /* Bootstrap pads by (window.innerWidth - documentElement.clientWidth) when a modal or offcanvas opens, to stand in for the scrollbar it hides. On mobile browsers those two numbers differ because of the visual-viewport scale, not a scrollbar — the birthday popup ended up pushing the page ~112px left and leaving a blank strip down the right. Phones and tablets use overlay scrollbars and never need the compensation, so drop it there. Desktop, where the scrollbar really does take space, keeps Bootstrap's behaviour. */ @media (max-width: 991.98px) { body { padding-right: 0 !important; } } /* Never let an image force the page wider than the viewport */ img { max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", system-ui, sans-serif; } a { text-decoration: none; } /* Accessibility: disable scroll animations when reduced motion is requested */ @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } /* Also stop the partner marquee and the WhatsApp pulse ring */ .clients-track, .whatsapp-float::before { animation: none !important; } html { scroll-behavior: auto; } } /* ========================================================================== HEADER ========================================================================== */ /* Top bar -------------------------------------------------------------------------- */ .top-bar { background-color: var(--primary-dark); color: var(--white); font-size: 0.875rem; } .top-bar .container { min-height: 42px; flex-wrap: wrap; } .top-bar-info { gap: 1.5rem; } .top-bar-item { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--white); } .top-bar-item i { color: var(--gold); } .top-bar-item:hover { color: var(--primary-light); } .top-bar-social { gap: 1rem; } .top-bar-social a { color: var(--gold); font-size: 1rem; line-height: 1; transition: color 0.2s ease; } .top-bar-social a:hover { color: var(--primary-light); } /* Hide hours on small screens, keep phone + social */ @media (max-width: 575.98px) { .top-bar-hours { display: none !important; } } /* Wherever the burger shows, the top bar is redundant — the slide-in nav panel already carries the address, hours, phone and socials. Dropping it also gives the sticky header back ~42-70px of screen. */ @media (max-width: 1199.98px) { .top-bar { display: none; } } /* Main navbar -------------------------------------------------------------------------- */ /* Whole header sticks to top (navbar alone can't stick past the short header box) */ .site-header { position: sticky; top: 0; z-index: 1030; } .main-navbar { background-color: var(--white); padding-top: 0.65rem; padding-bottom: 0.65rem; transition: box-shadow 0.25s ease, padding 0.25s ease; } /* Subtle shadow + tighter padding once the user scrolls (toggled in JS) */ .main-navbar.scrolled { box-shadow: 0 2px 14px rgba(1, 58, 89, 0.12); padding-top: 0.4rem; padding-bottom: 0.4rem; } .brand-logo { height: 90px; width: auto; margin-right: 0.65rem; } .brand-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--primary); line-height: 1.1; } .brand-name-sub { color: var(--muted); font-weight: 600; } .main-navbar .navbar-nav { gap: 1.5rem; } .main-navbar .nav-link { font-weight: 500; font-size: 17px; color: var(--text); padding: 0.5rem 1.35rem; position: relative; } .main-navbar .nav-link:hover, .main-navbar .nav-link:focus { color: var(--primary); } /* Primary navbar CTA (Book Appointment) inline-flex so the icon is centred against the label instead of sitting on the text baseline, which is what made it look bolted on. */ .btn-call { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); font-weight: 600; border: none; border-radius: 50px; padding: 0.62rem 1.5rem; white-space: nowrap; box-shadow: 0 8px 18px rgba(2, 83, 126, 0.25); transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease; } /* Icon in its own circle — reads as a button affordance at 16px, where a bare glyph just looks like stray punctuation. */ .btn-call i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); font-size: 0.82rem; line-height: 1; transition: background-color 0.2s ease, transform 0.2s ease; } .btn-call:hover, .btn-call:focus { color: var(--white); filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 26px rgba(2, 83, 126, 0.34); } .btn-call:hover i, .btn-call:focus i { background: var(--gold); color: var(--primary-dark); transform: scale(1.06); } .nav-cta { margin-left: 0.75rem; } @media (max-width: 1199.98px) { .nav-cta { margin-left: 0; margin-top: 0.5rem; } .btn-call { display: inline-block; } } /* Dropdown menus -------------------------------------------------------------------------- */ .main-navbar .dropdown-menu { border: none; border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(1, 58, 89, 0.15); padding: 0.4rem 0; margin-top: 0.35rem; } .main-navbar .dropdown-item { font-weight: 500; color: var(--text); padding: 0.5rem 1.1rem; } .main-navbar .dropdown-item:hover, .main-navbar .dropdown-item:focus { background-color: var(--primary-light); color: var(--primary); } .main-navbar .dropdown-toggle::after { margin-left: 0.35rem; vertical-align: middle; } /* Open dropdown on hover — desktop only (where the menu is not collapsed) */ @media (min-width: 1200px) { /* keep menu in the DOM so it can animate; hide via opacity, not display */ .hover-dropdown > .dropdown-menu { display: block; margin-top: 0; top: 100%; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none; } .hover-dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* stagger each item in on reveal */ .hover-dropdown > .dropdown-menu .dropdown-item { opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .hover-dropdown:hover > .dropdown-menu .dropdown-item { opacity: 1; transform: translateY(0); } .hover-dropdown:hover > .dropdown-menu .dropdown-item { transition-delay: 0.06s; } .hover-dropdown:hover > .dropdown-menu li:nth-child(2) .dropdown-item { transition-delay: 0.10s; } .hover-dropdown:hover > .dropdown-menu li:nth-child(3) .dropdown-item { transition-delay: 0.14s; } .hover-dropdown:hover > .dropdown-menu li:nth-child(4) .dropdown-item { transition-delay: 0.18s; } .hover-dropdown:hover > .dropdown-menu li:nth-child(5) .dropdown-item { transition-delay: 0.22s; } /* subtle slide on the item itself when hovered */ .main-navbar .dropdown-item { transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .main-navbar .dropdown-item:hover { padding-left: 1.4rem; } } /* Empty anchor targets for nav links — no height until filled in later phases */ .section-placeholder { min-height: 0; } /* ========================================================================== HERO SLIDER ========================================================================== */ .hero-slider { width: 100%; height: 85vh; min-height: 500px; } .hero-slide { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; } /* Dark blue gradient overlay for text readability */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(1, 58, 89, 0.75) 0%, rgba(2, 83, 126, 0.55) 60%, rgba(2, 83, 126, 0.4) 100% ); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: left; /* override Swiper's default centering */ color: var(--white); } /* Animate hero text in on the active slide (stagger title → text → button) */ .hero-content > * { opacity: 0; transform: translateY(28px); } .swiper-slide-active .hero-content > * { animation: heroTextIn 0.8s ease-out forwards; } .swiper-slide-active .hero-content > .hero-title { animation-delay: 0.25s; } .swiper-slide-active .hero-content > .hero-text { animation-delay: 0.45s; } .swiper-slide-active .hero-content > .btn-hero { animation-delay: 0.65s; } @keyframes heroTextIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-content > * { opacity: 1; transform: none; animation: none; } } .hero-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.1; margin-bottom: 1rem; max-width: 620px; /* constrain text, block stays left-aligned */ } .hero-text { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, 0.85); margin-bottom: 1.75rem; max-width: 540px; } /* Book Now button — white with blue text */ .btn-hero { display: inline-block; background-color: var(--white); color: var(--primary); font-weight: 600; border-radius: 50px; padding: 0.75rem 2rem; font-size: 1.05rem; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-hero:hover, .btn-hero:focus { background-color: var(--primary); color: var(--white); transform: translateY(-2px); box-shadow: 0 0 24px rgba(2, 83, 126, 0.65); } /* Swiper arrows — branded */ .hero-slider .swiper-button-prev, .hero-slider .swiper-button-next { color: var(--white); width: 48px; height: 48px; background-color: rgba(2, 83, 126, 0.55); border-radius: 50%; transition: background-color 0.2s ease; } .hero-slider .swiper-button-prev:hover, .hero-slider .swiper-button-next:hover { background-color: var(--primary); } .hero-slider .swiper-button-prev::after, .hero-slider .swiper-button-next::after { font-size: 1.25rem; font-weight: 700; } /* Swiper pagination dots — branded */ .hero-slider .swiper-pagination-bullet { background-color: var(--white); opacity: 0.6; width: 11px; height: 11px; transition: opacity 0.2s ease, transform 0.2s ease; } .hero-slider .swiper-pagination-bullet-active { background-color: var(--white); opacity: 1; transform: scale(1.25); } /* Responsive: shorter on mobile, hide arrows on small screens */ @media (max-width: 767.98px) { .hero-slider { height: 70vh; min-height: 420px; } .hero-slider .swiper-button-prev, .hero-slider .swiper-button-next { display: none; } } /* ========================================================================== SHARED SECTION HELPERS ========================================================================== */ .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.8rem; color: var(--primary); margin-bottom: 0.75rem; } /* Pill eyebrow (dot + label) — used on every section header */ .eyebrow-pill { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--primary-light); color: var(--primary); padding: 0.45rem 1.1rem 0.45rem 0.85rem; border-radius: 50px; margin-bottom: 1rem; } .eyebrow-pill i { margin-right: 0.35rem; } /* On sections whose background is already --primary-light (Services, AutoCare) */ .eyebrow-pill-inverse { background-color: var(--white); color: var(--primary); } /* On dark gradient sections (Location, Videos, Reviews) */ .eyebrow-pill-dark { background-color: rgba(255, 255, 255, 0.15); color: var(--white); } .eyebrow-pill-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background-color: var(--gold); } /* Two-tone heading accent — wrap the key term/phrase in this span */ .accent-gold { color: var(--gold); } .section-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.5rem); line-height: 1.15; color: #023D5D; margin-bottom: 1.1rem; } .section-text { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1rem; } /* Solid brand-blue button */ .btn-primary-brand { display: inline-block; background-color: var(--primary); color: var(--white); font-weight: 600; border-radius: 50px; padding: 0.7rem 1.9rem; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary-brand:hover, .btn-primary-brand:focus { background-color: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 0 24px rgba(2, 83, 126, 0.6); } /* ========================================================================== ABOUT US (light) ========================================================================== */ .about-section { background-color: var(--white); padding: 80px 0; } .about-image-wrap { position: relative; } .about-image { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 40px rgba(1, 58, 89, 0.18); display: block; } .about-badge { position: absolute; bottom: -18px; right: 22px; background-color: var(--primary); color: var(--white); font-family: "Poppins", sans-serif; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 50px; box-shadow: 0 8px 20px rgba(1, 58, 89, 0.25); } .about-highlights { list-style: none; padding: 0; margin: 0 0 1.75rem; } .about-highlights li { display: flex; align-items: center; gap: 0.65rem; font-weight: 500; color: var(--text); margin-bottom: 0.7rem; } .about-highlights li i { color: var(--primary); font-size: 1.15rem; } /* ========================================================================== SERVICES (dark) — Swiper cards ========================================================================== */ .services-section { background-color: var(--primary-light); padding: 90px 0; } .services-header { max-width: 640px; margin: 0 auto 2.5rem; } .services-subtitle { color: var(--muted); margin-bottom: 0; } .services-swiper { position: relative; padding: 10px 0 60px; } /* Slides stretch to the tallest card so every card in the row lines up. */ .services-swiper .swiper-slide { height: auto; } .service-card { background-color: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); height: 100%; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3); } .service-img { height: 340px; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; background-color: var(--primary-light); } .service-body { padding: 1.5rem; flex: 1 1 auto; display: flex; flex-direction: column; } .service-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--text); margin-bottom: 0.5rem; /* Two lines max, so a long name can't push one card taller than the rest. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Clamped to 3 lines and reserving that height, so short and long copy produce the same card and every "Learn More" sits on the same line. */ .service-desc { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(0.95rem * 1.6 * 3); } .service-link { margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 0.35rem; transition: gap 0.2s ease, color 0.2s ease; } .service-link:hover { color: var(--primary-dark); gap: 0.6rem; } /* Services Swiper controls — branded for light bg */ .services-swiper .swiper-button-prev, .services-swiper .swiper-button-next { color: var(--primary); width: 44px; height: 44px; background-color: var(--white); border-radius: 50%; box-shadow: 0 4px 14px rgba(1, 58, 89, 0.15); top: 40%; transition: background-color 0.2s ease, color 0.2s ease; } .services-swiper .swiper-button-prev:hover, .services-swiper .swiper-button-next:hover { background-color: var(--primary); color: var(--white); } .services-swiper .swiper-button-prev::after, .services-swiper .swiper-button-next::after { font-size: 1.1rem; font-weight: 700; } .services-swiper .swiper-pagination { bottom: 0; } .services-swiper .swiper-pagination-bullet { background-color: var(--primary); opacity: 0.4; width: 10px; height: 10px; transition: opacity 0.2s ease, transform 0.2s ease; } .services-swiper .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.25); } @media (max-width: 767.98px) { .services-swiper .swiper-button-prev, .services-swiper .swiper-button-next { display: none; } } /* ========================================================================== TRUSTED CLIENTS — CSS marquee (two rows, square tiles) ========================================================================== */ .clients-section { background-color: var(--white); padding: 85px 0; overflow: hidden; } .clients-header { max-width: 640px; margin: 0 auto 2.5rem; } .clients-subtitle { margin-bottom: 0; } /* Row wrapper: clip + edge fade */ .clients-marquee { overflow: hidden; padding: 0.5rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .clients-marquee + .clients-marquee { margin-top: 1.25rem; } /* Track = two copies (200% wide) */ .clients-track { display: flex; width: max-content; } .clients-track-left { animation: clients-scroll-left 40s linear infinite; } .clients-track-right { animation: clients-scroll-right 40s linear infinite; } .clients-marquee:hover .clients-track { animation-play-state: paused; } @keyframes clients-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes clients-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Uniform tiles, grayscale logos that bloom to color on hover */ .client-tile { flex: 0 0 auto; width: 150px; height: 90px; margin: 0 10px; background-color: var(--white); border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 4px 14px rgba(1, 58, 89, 0.06); display: flex; align-items: center; justify-content: center; padding: 16px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .client-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(1, 58, 89, 0.16); } .client-tile img { max-width: 100%; max-height: 50px; object-fit: contain; } @media (max-width: 575.98px) { .client-tile { width: 110px; height: 70px; margin: 0 10px; padding: 12px; } .client-tile img { max-height: 38px; } } /* ========================================================================== CAR WASH NEAR ME — location + map + form ========================================================================== */ .location-section { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: 90px 0; } /* dark-mode header text */ .location-section .section-title { color: var(--white); } .location-section .location-subtitle { color: rgba(255, 255, 255, 0.82); } .location-header { max-width: 640px; margin: 0 auto 2.5rem; } .location-subtitle { margin-bottom: 0; } .location-card { background-color: var(--white); border-radius: 16px; border-left: 5px solid var(--primary); padding: 2rem; height: 100%; box-shadow: 0 10px 28px rgba(1, 58, 89, 0.1); animation: card-glow 2.2s ease-in-out infinite; } /* Pulsing glow on the left border */ @keyframes card-glow { 0%, 100% { box-shadow: 0 10px 28px rgba(1, 58, 89, 0.1), -6px 0 14px -4px rgba(2, 83, 126, 0.45); } 50% { box-shadow: 0 10px 28px rgba(1, 58, 89, 0.1), -6px 0 24px 2px rgba(2, 83, 126, 0.85); } } .location-city { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--primary); margin-bottom: 0.85rem; } .location-contact { list-style: none; padding: 0; margin: 1.25rem 0; } .location-contact li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.85rem; color: var(--text); } .location-contact li i { color: var(--primary); font-size: 1.1rem; margin-top: 0.15rem; } .location-contact a { color: var(--text); transition: color 0.2s ease; } .location-contact a:hover { color: var(--primary); } .location-hours { background-color: var(--primary-light); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .hours-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--primary-dark); margin-bottom: 0.85rem; } .hours-title i { margin-right: 0.4rem; } .hours-list { list-style: none; padding: 0; margin: 0 0 0.75rem; } .hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px dashed rgba(2, 83, 126, 0.15); font-size: 0.95rem; color: var(--text); } .hours-list li:last-child { border-bottom: none; } .hours-list li span:last-child { font-weight: 600; white-space: nowrap; } .hours-note { font-size: 0.88rem; color: var(--muted); margin: 0; } /* Map — fills full column height to match the info card */ .location-map { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(1, 58, 89, 0.1); height: 100%; min-height: 300px; } .location-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; } /* ========================================================================== BIRTHDAY WASH — ticket-style voucher ========================================================================== */ .birthday-section { position: relative; overflow: hidden; padding: 90px 0; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); /* backing color behind the ticket — drives the die-cut notch fill */ --ticket-bg: var(--primary-dark); } .birthday-header { max-width: 640px; margin: 0 auto 2.75rem; } .birthday-badge { display: inline-flex; align-items: center; gap: 0.45rem; background-color: rgba(245, 196, 81, 0.15); border: 1px solid rgba(245, 196, 81, 0.4); color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 600; padding: 0.45rem 1.1rem; border-radius: 50px; margin-bottom: 1.25rem; } .birthday-subtitle { color: rgba(255, 255, 255, 0.82); margin: 0 auto; max-width: 620px; } /* Ticket sits directly on the dark section */ .ticket-stage { max-width: 900px; margin: 0 auto; } /* The ticket */ .birthday-ticket { position: relative; display: flex; align-items: stretch; border-radius: 16px; box-shadow: 0 10px 28px rgba(1, 58, 89, 0.18); overflow: hidden; } /* Left tab — vertical BIRTHDAY */ .ticket-tab { flex: 0 0 64px; background-color: var(--primary); display: flex; align-items: center; justify-content: center; } .ticket-tab span { transform: rotate(-90deg); white-space: nowrap; color: var(--white); font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.95rem; } /* Perforation between tab and body */ .ticket-perf { position: relative; width: 0; border-left: 2px dashed rgba(2, 83, 126, 0.4); margin: 0; z-index: 3; } /* Die-cut punch holes (filled with backing color) */ .ticket-notch { position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--ticket-bg); } .ticket-notch-top { top: -10px; } .ticket-notch-bottom { bottom: -10px; } /* Body with halftone dots */ .ticket-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.75rem; min-height: 340px; padding: 2.5rem 2.25rem; background-color: var(--white); background-image: radial-gradient(#02537E18 1.5px, transparent 1.5px); background-size: 13px 13px; } /* Top row: offer left, value right */ .ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } /* Disclaimer sits on the ticket */ .ticket-disclaimer { margin: 0; padding-top: 1.25rem; border-top: 1px dashed rgba(2, 83, 126, 0.25); color: var(--muted); font-size: 0.78rem; line-height: 1.6; } .ticket-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 600; color: var(--primary); margin-bottom: 0.4rem; } .ticket-free { display: block; font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; color: var(--primary-dark); margin-bottom: 0.5rem; } .ticket-terms { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.1rem; } /* Gold CTA */ .btn-ticket { display: inline-flex; align-items: center; gap: 0.45rem; background-color: var(--gold); color: var(--primary-dark); font-weight: 700; border-radius: 50px; padding: 0.7rem 1.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-ticket:hover, .btn-ticket:focus { color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 0 26px rgba(245, 196, 81, 0.75); } /* Right side of body */ .ticket-side { text-align: center; } .ticket-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.15rem; margin-bottom: 0.85rem; } .ticket-value { border: 1.5px dashed var(--primary); border-radius: 12px; padding: 0.85rem 1.5rem; } .value-label { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 600; color: var(--muted); } .value-amount { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 2rem; color: var(--primary-dark); } .birthday-disclaimer { text-align: center; color: var(--muted); font-size: 0.8rem; line-height: 1.6; max-width: 760px; margin: 1.75rem auto 0; } /* Mobile: the side-by-side ticket falls apart on a phone — the rotated stub eats ~64px of an already narrow card, the CTA wraps onto two lines, and the stars/value block gets squeezed into a column. Below 576px the ticket becomes a top-to-bottom stub, so the body keeps the full width. */ @media (max-width: 575.98px) { .ticket-stage { padding: 0; } .birthday-ticket { flex-direction: column; border-radius: 18px; } /* Stub across the top instead of down the side */ .ticket-tab { flex: 0 0 auto; padding: 0.6rem 1rem; } .ticket-tab span { transform: none; font-size: 0.75rem; letter-spacing: 0.24em; } /* Perforation runs horizontally, notches move to the left/right edges */ .ticket-perf { width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(2, 83, 126, 0.4); } .ticket-notch { left: auto; top: -10px; } .ticket-notch-top { left: -11px; } .ticket-notch-bottom { right: -11px; bottom: auto; } .ticket-body { min-height: 0; gap: 1.25rem; padding: 1.6rem 1.25rem 1.4rem; text-align: center; } .ticket-top { flex-direction: column; align-items: stretch; gap: 1.25rem; } .ticket-free { font-size: 2.4rem; } .ticket-terms { margin-bottom: 1rem; } /* Full-width CTA so the label never wraps */ .btn-ticket { display: flex; justify-content: center; width: 100%; padding: 0.85rem 1.25rem; } /* Stars and the value box side by side, not stacked */ .ticket-side { display: flex; align-items: center; justify-content: center; gap: 0.9rem; text-align: center; } .ticket-stars { margin-bottom: 0; font-size: 0.95rem; letter-spacing: 0.1rem; } .ticket-value { padding: 0.6rem 1.1rem; } .value-amount { font-size: 1.6rem; } .ticket-disclaimer { font-size: 0.72rem; padding-top: 1rem; text-align: left; } } /* Modal */ .birthday-modal .modal-content { border: none; border-radius: 16px; overflow: hidden; } .birthday-modal .modal-header { background-color: var(--primary-light); border-bottom: none; align-items: flex-start; padding: 1.5rem; } .birthday-modal .modal-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--primary); margin: 0; } .birthday-modal .modal-title i { margin-right: 0.4rem; } .birthday-modal .modal-sub { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--muted); } .birthday-modal .modal-body { padding: 1.5rem; } .birthday-modal .form-label { font-weight: 600; font-size: 0.9rem; color: var(--text); } .birthday-modal .form-label i { color: var(--primary); margin-right: 0.3rem; } .birthday-modal .form-control { border-radius: 10px; border: 1px solid rgba(2, 83, 126, 0.2); padding: 0.65rem 0.9rem; } .birthday-modal .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(2, 83, 126, 0.15); } .modal-disclaimer { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin: 1rem 0 0; } /* ========================================================================== AWARDS — clean row of award seals ========================================================================== */ .awards-section { background-color: var(--white); padding: 80px 0; border-bottom: 1px solid #e5e7eb; /* subtle divider */ } .awards-header { max-width: 600px; margin: 0 auto 3rem; } /* Eyebrow with thin gold underline */ .awards-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; color: var(--primary); padding-bottom: 0.4rem; margin-bottom: 1rem; border-bottom: 2px solid var(--gold); } .awards-subtitle { margin-bottom: 0; } /* Plain seals row — no cards/boxes */ .awards-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3.5rem; } .award-seal { max-height: 140px; width: auto; object-fit: contain; transition: transform 0.25s ease, filter 0.25s ease; } .award-seal:hover { transform: scale(1.06); filter: saturate(1.1); } @media (max-width: 991.98px) { .awards-row { gap: 2rem 3rem; } .award-seal { max-height: 120px; } } @media (max-width: 575.98px) { .awards-row { gap: 1.75rem 2rem; } .award-seal { max-height: 95px; } } /* ========================================================================== CAR WASH VIDEOS ========================================================================== */ .videos-section { padding: 90px 0; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); } .videos-header { max-width: 640px; margin: 0 auto 3rem; } .videos-subtitle { color: rgba(255, 255, 255, 0.82); margin-bottom: 0; } .video-frame { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; } .video-frame:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4); } .video-frame iframe { border: 0; } .video-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--white); margin: 1.1rem 0 0.2rem; } .video-caption { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; margin-bottom: 0; } .videos-swiper { padding: 0 0 60px; } /* White controls to suit dark bg */ .videos-swiper .swiper-button-prev, .videos-swiper .swiper-button-next { color: var(--white); width: 44px; height: 44px; background-color: rgba(255, 255, 255, 0.15); border-radius: 50%; top: 38%; transition: background-color 0.2s ease; } .videos-swiper .swiper-button-prev:hover, .videos-swiper .swiper-button-next:hover { background-color: var(--white); color: var(--primary); } .videos-swiper .swiper-button-prev::after, .videos-swiper .swiper-button-next::after { font-size: 1.1rem; font-weight: 700; } .videos-swiper .swiper-pagination { bottom: 0; } .videos-swiper .swiper-pagination-bullet { background-color: var(--white); opacity: 0.55; width: 10px; height: 10px; transition: opacity 0.2s ease, transform 0.2s ease; } .videos-swiper .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.25); } @media (max-width: 767.98px) { .videos-swiper .swiper-button-prev, .videos-swiper .swiper-button-next { display: none; } } /* White pill CTA (used by the videos section) */ .btn-birthday { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--white); color: var(--primary); font-weight: 700; border-radius: 50px; padding: 0.8rem 2.2rem; transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .btn-birthday:hover, .btn-birthday:focus { color: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 0 26px rgba(255, 255, 255, 0.75); } .videos-section .btn-birthday { margin-top: 1.5rem; } /* ========================================================================== VALENCIA AUTO CARE CENTER — asymmetric hub panels ========================================================================== */ .autocare-section { background-color: var(--primary-light); padding: 90px 0; } /* Left-aligned editorial header */ .autocare-header { max-width: 620px; margin-bottom: 3.5rem; } .autocare-subtitle { margin-bottom: 0; } /* Panel — grid so the media column keeps a fixed share of the row and the circle can sit centered inside it instead of hugging the text. */ .autocare-panel { position: relative; display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: 2.5rem; margin-bottom: 3.5rem; } .autocare-panel:last-child { margin-bottom: 0; } /* Reverse panels: same source order, swapped columns. */ .autocare-reverse { grid-template-columns: 1fr 46%; } .autocare-reverse .autocare-media { grid-column: 2; grid-row: 1; } .autocare-reverse .autocare-content { grid-column: 1; grid-row: 1; } /* Big watermark number */ .autocare-num { position: absolute; top: -2.2rem; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 7rem; line-height: 1; color: var(--primary); opacity: 0.08; z-index: 0; pointer-events: none; } .autocare-panel .autocare-num { left: 1rem; } .autocare-reverse .autocare-num { left: auto; right: 1rem; } /* Media — circular. Width and height come from the same clamp so the box stays a true square at every viewport; object-fit crops the photo into it. */ .autocare-media { justify-self: center; align-self: center; width: clamp(240px, 32vw, 360px); height: clamp(240px, 32vw, 360px); border-radius: 50%; overflow: hidden; box-shadow: 0 16px 38px rgba(1, 58, 89, 0.16); border: 6px solid var(--white); } .autocare-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .autocare-media:hover img { transform: scale(1.06); } /* Content */ .autocare-content { position: relative; z-index: 1; flex: 1; } .autocare-tag { display: inline-block; background-color: var(--primary); color: var(--white); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35rem 0.9rem; border-radius: 50px; margin-bottom: 1rem; } .autocare-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--text); margin-bottom: 0.85rem; } .autocare-name i { color: var(--primary); margin-right: 0.4rem; } .autocare-text { color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; } /* Mobile: stack image on top, content below */ @media (max-width: 767.98px) { .autocare-panel, .autocare-reverse { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.75rem; } /* Single column — reset the desktop column swap so image stays on top. */ .autocare-reverse .autocare-media, .autocare-reverse .autocare-content { grid-column: 1; grid-row: auto; } /* Circle stays a circle — centered, capped so it never fills the screen. */ .autocare-media { width: min(72vw, 280px); height: min(72vw, 280px); } .autocare-num { font-size: 4.5rem; top: -1.4rem; } } /* ========================================================================== CAR WASH BLOG ========================================================================== */ .blog-section { background-color: var(--white); padding: 90px 0; } .blog-header { max-width: 620px; margin: 0 auto 3rem; } .blog-subtitle { margin-bottom: 0; } .blog-pill { display: inline-block; width: max-content; background-color: var(--primary); color: var(--white); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.7rem; border-radius: 50px; } .blog-meta { color: var(--muted); font-size: 0.85rem; margin: 0; } .blog-meta i { margin-right: 0.3rem; } /* Featured card */ .blog-featured { height: 100%; background-color: var(--white); border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(1, 58, 89, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .blog-featured:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(1, 58, 89, 0.14); } .blog-featured-media { position: relative; display: block; overflow: hidden; } .blog-featured-media .blog-pill { position: absolute; top: 1rem; left: 1rem; z-index: 2; } .blog-featured-media img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.4s ease; } .blog-featured:hover .blog-featured-media img { transform: scale(1.05); } .blog-featured-body { padding: 1.5rem; } .blog-featured-body .blog-meta { margin-bottom: 0.6rem; } .blog-featured-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.4rem; line-height: 1.3; margin-bottom: 0.7rem; } .blog-featured-title a { color: var(--primary); transition: color 0.2s ease; } .blog-featured-title a:hover { color: var(--primary-dark); } .blog-excerpt { color: var(--muted); line-height: 1.7; margin-bottom: 1.1rem; } .blog-read { font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 0.35rem; transition: gap 0.2s ease; } .blog-read:hover { gap: 0.6rem; color: var(--primary-dark); } /* Mini list cards */ .blog-mini-list { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; } .blog-mini { display: flex; gap: 1rem; background-color: var(--white); border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; padding: 0.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .blog-mini:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(1, 58, 89, 0.12); } .blog-mini-thumb { flex: 0 0 120px; border-radius: 10px; overflow: hidden; } .blog-mini-thumb img { width: 120px; height: 100%; min-height: 110px; object-fit: cover; display: block; } .blog-mini-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.35rem 0.5rem 0.35rem 0; } .blog-mini-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.35; margin: 0; } .blog-mini-title a { color: var(--primary); transition: color 0.2s ease; } .blog-mini-title a:hover { color: var(--primary-dark); } .blog-cta { margin-top: 3rem; } @media (max-width: 575.98px) { .blog-mini { flex-direction: column; } .blog-mini-thumb { flex-basis: auto; width: 100%; } .blog-mini-thumb img { width: 100%; height: 180px; } } /* ========================================================================== TESTIMONIALS — Google-style review slider ========================================================================== */ .reviews-section { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: 90px 0; } /* dark-mode header text */ .reviews-section .section-title { color: var(--white); } .reviews-header { max-width: 680px; margin: 0 auto 3rem; } /* Google rating summary pill */ .google-summary { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; background-color: var(--white); border-radius: 50px; padding: 0.6rem 1.5rem; margin-top: 1.25rem; box-shadow: 0 6px 18px rgba(1, 58, 89, 0.1); } .google-g i { font-size: 1.4rem; color: #4285F4; } .google-label { font-weight: 600; color: var(--text); } .google-score { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--text); } .google-stars { color: #FBBC05; font-size: 1.05rem; } .google-count { color: var(--muted); font-size: 0.9rem; } /* Slider */ .reviews-swiper { position: relative; padding: 10px 0 60px; } /* Review card */ .review-card { position: relative; height: 100%; background-color: var(--white); border-radius: 16px; padding: 1.75rem; box-shadow: 0 8px 24px rgba(1, 58, 89, 0.08); } .review-g { position: absolute; top: 1.25rem; right: 1.25rem; } .review-g i { font-size: 1.3rem; color: #4285F4; } .review-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; } .review-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.1rem; } .review-name { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text); margin: 0; } .review-sub { color: var(--muted); font-size: 0.82rem; margin: 0; } .review-stars { color: #FBBC05; font-size: 1rem; margin-bottom: 0.75rem; } .review-text { color: var(--text); line-height: 1.7; margin-bottom: 1rem; } .review-date { color: var(--muted); font-size: 0.85rem; margin: 0; } /* Controls */ .reviews-swiper .swiper-button-prev, .reviews-swiper .swiper-button-next { color: var(--primary); width: 44px; height: 44px; background-color: var(--white); border-radius: 50%; box-shadow: 0 4px 14px rgba(1, 58, 89, 0.15); top: 42%; transition: background-color 0.2s ease, color 0.2s ease; } .reviews-swiper .swiper-button-prev:hover, .reviews-swiper .swiper-button-next:hover { background-color: var(--primary); color: var(--white); } .reviews-swiper .swiper-button-prev::after, .reviews-swiper .swiper-button-next::after { font-size: 1.1rem; font-weight: 700; } .reviews-swiper .swiper-pagination { bottom: 0; } .reviews-swiper .swiper-pagination-bullet { background-color: var(--white); opacity: 0.5; width: 10px; height: 10px; transition: opacity 0.2s ease, transform 0.2s ease; } .reviews-swiper .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.25); } .reviews-cta { margin-top: 2.5rem; } .reviews-cta i { margin-right: 0.4rem; } @media (max-width: 767.98px) { .reviews-swiper .swiper-button-prev, .reviews-swiper .swiper-button-next { display: none; } } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { position: relative; overflow: hidden; background-color: var(--primary-dark); color: rgba(255, 255, 255, 0.85); padding: 64px 0 32px; border-top: 3px solid var(--gold); } /* Decorative glow, purely visual */ .footer-glow { position: absolute; top: -70px; left: -70px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); filter: blur(60px); pointer-events: none; } .footer-brand { gap: 0.6rem; margin-bottom: 1rem; } .footer-logo { height: 112px; width: auto; } .footer-heading { font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; } .footer-about { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.25rem; } /* Newsletter (column 1) */ .footer-newsletter-group { position: relative; display: flex; align-items: center; } .footer-newsletter-input { width: 100%; padding: 0.7rem 3.2rem 0.7rem 1rem; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.08); color: var(--white); font-size: 0.92rem; } .footer-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.55); } .footer-newsletter-input:focus { outline: none; border-color: var(--gold); background-color: rgba(255, 255, 255, 0.12); color: var(--white); } .footer-newsletter-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 50%; background-color: var(--gold); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .footer-newsletter-btn:hover { background-color: var(--white); transform: translateY(-50%) scale(1.06); box-shadow: 0 0 18px rgba(245, 196, 81, 0.7); } /* Quick links (column 2) */ .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.6rem; } .footer-links a { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; transition: color 0.2s ease; /* Roomy enough to tap on a phone — the bare text line was only ~19px tall. */ display: inline-flex; align-items: center; min-height: 40px; } .footer-links a:hover { color: var(--gold); } /* Contact (column 3) */ .footer-contact { list-style: none; padding: 0; margin: 0; } .footer-contact li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.85rem; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; } .footer-contact li i { margin-top: 0.15rem; color: var(--gold); } .footer-contact a { color: rgba(255, 255, 255, 0.75); transition: color 0.2s ease; } .footer-contact a:hover { color: var(--gold); } /* Follow us (column 4) */ .footer-social { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--white); font-size: 1.1rem; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .footer-social a:hover { background-color: var(--gold); border-color: var(--gold); color: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 0 18px rgba(245, 196, 81, 0.7); } .footer-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--gold); border: 1px solid rgba(245, 196, 81, 0.4); border-radius: 50px; padding: 0.4rem 0.9rem; } /* Bottom bar */ .footer-bottom { position: relative; margin-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 1.1rem 0; } /* The floating WhatsApp button (58px tall, 24px from each edge) sat on top of the legal links. Below xl the bottom row centres and gains clearance; from xl up the container is wide enough that the links never reach that corner. */ @media (max-width: 1199.98px) { .footer-bottom { padding-bottom: 6.5rem; } .footer-bottom-inner { flex-direction: column; text-align: center; } } /* At xl the row stays side by side; reserve the button's column so the last legal link is not sitting under it on ~1440px screens. Scoped to .footer-bottom because the base .footer-legal rule below resets padding. */ @media (min-width: 1200px) { .footer-bottom .footer-legal { padding-right: 4.5rem; } } .footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .footer-copy { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); } .footer-legal { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; } .footer-legal a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); transition: color 0.2s ease; } .footer-legal a:hover { color: var(--gold); } @media (max-width: 767.98px) { .footer-bottom-inner { flex-direction: column; text-align: center; } } /* ---- Footer on phones ----------------------------------------------------- Long values (the email especially) used to run past the column edge, the two half-width columns squeezed the contact lines into 3-4 word wraps, and the whole block ran ~1150px tall. */ @media (max-width: 575.98px) { .site-footer { padding: 44px 0 24px; text-align: center; } /* Quick Links and Contact stop sharing a row — full width each, so nothing wraps mid-address. */ .site-footer .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } /* Stacked columns would otherwise run ~1200px tall — tighten the rhythm. */ .site-footer .row.gy-5 { --bs-gutter-y: 2rem; } .footer-logo { height: 78px; } .footer-heading { margin-top: 0.25rem; margin-bottom: 0.75rem; font-size: 1rem; } .footer-about { margin-left: auto; margin-right: auto; margin-bottom: 1rem; } /* Links read as a centred two-column list instead of one long ladder. */ .footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; text-align: left; max-width: 320px; margin-inline: auto; } .footer-links a { min-height: 38px; } .footer-contact { max-width: 320px; margin-inline: auto; text-align: left; } .footer-contact li { margin-bottom: 0.6rem; } .footer-social { margin-bottom: 0.9rem; } /* Emails and long URLs break instead of overflowing the column. */ .footer-contact li, .footer-contact a { overflow-wrap: anywhere; word-break: break-word; } .footer-newsletter { max-width: 340px; margin-inline: auto; } .footer-social { justify-content: center; } .footer-badge { display: inline-flex; } .footer-legal { flex-wrap: wrap; justify-content: center; } } /* ========================================================================== FLOATING WHATSAPP BUTTON (site-wide) ========================================================================== */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; background-color: #25D366; color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .whatsapp-float:hover, .whatsapp-float:focus { color: var(--white); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); } /* Pulsing ring, purely decorative */ .whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: rgba(37, 211, 102, 0.55); z-index: -1; animation: whatsapp-pulse 2.4s ease-out infinite; } @keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } .whatsapp-float-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background-color: var(--primary-dark); color: var(--white); font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .whatsapp-float-tooltip::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--primary-dark); } .whatsapp-float:hover .whatsapp-float-tooltip { opacity: 1; visibility: visible; } @media (max-width: 575.98px) { .whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 18px; right: 18px; } .whatsapp-float-tooltip { display: none; } } /* ========================================================================== PAGE BANNER (reusable inner-page hero) — page-banner.php ========================================================================== */ .page-banner { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: center; background: radial-gradient(120% 140% at 85% 0%, rgba(2, 83, 126, 0.55) 0%, rgba(1, 24, 38, 0) 55%), linear-gradient(150deg, #06222F 0%, #041722 55%, #010E16 100%); color: var(--white); text-align: left; padding: 3.2rem 0; } /* Soft ambient glow bottom-left, echoing the premium hero look */ .page-banner-glow { position: absolute; left: -8%; bottom: -60%; width: 55%; height: 160%; background: radial-gradient(circle, rgba(2, 83, 126, 0.35) 0%, rgba(2, 83, 126, 0) 68%); pointer-events: none; } .page-banner .container { width: 100%; position: relative; z-index: 1; } /* Eyebrow pill on the dark banner: translucent gold-outlined chip */ .page-banner-eyebrow { background: rgba(245, 196, 81, 0.1); color: var(--gold); border: 1px solid rgba(245, 196, 81, 0.4); margin-bottom: 1.1rem; } .page-banner-eyebrow .eyebrow-pill-dot { background: var(--gold); } .page-banner-title { color: var(--white); font-family: "Poppins", sans-serif; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.12; margin: 0 0 1rem; } .page-banner-crumb { font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); } .page-banner-crumb a { color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; gap: 0.35rem; } .page-banner-crumb a:hover { color: var(--gold); } .page-banner-crumb .sep { margin: 0 0.5rem; opacity: 0.5; } .page-banner-crumb .current { color: var(--gold); font-weight: 500; } /* Standard inner-page section spacing helper */ .section-pad { padding: 4rem 0; } @media (max-width: 575.98px) { .page-banner { min-height: 220px; padding: 2.4rem 0; } .section-pad { padding: 2.5rem 0; } } /* ========================================================================== APPOINTMENTS PAGE — appointments.php ========================================================================== */ .booking-section { background-color: var(--primary-light); } /* Booking form card */ .booking-card { background: var(--white); border-radius: 16px; box-shadow: 0 12px 40px rgba(1, 58, 89, 0.10); padding: 2.5rem; } .booking-card .eyebrow { display: inline-block; color: var(--primary); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; margin-bottom: 0.4rem; } .booking-title { color: var(--primary-dark); font-weight: 700; margin-bottom: 1.5rem; } .booking-form .form-label { font-weight: 500; font-size: 0.9rem; color: var(--text); margin-bottom: 0.35rem; } .booking-form .form-label i { color: var(--primary); margin-right: 0.25rem; } .booking-form .form-control, .booking-form .form-select { border-radius: 10px; padding: 0.6rem 0.85rem; border-color: #d9e2e8; } .booking-form .form-control:focus, .booking-form .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(2, 83, 126, 0.15); } /* Submit button */ .btn-book { background-color: var(--primary); border: none; color: var(--white); font-weight: 600; padding: 0.85rem 1rem; border-radius: 50px; transition: background-color 0.2s ease, transform 0.1s ease; } .btn-book:hover { background-color: var(--primary-dark); color: var(--white); transform: translateY(-1px); } .booking-alt-contact { margin-top: 1.25rem; margin-bottom: 0; font-size: 0.95rem; color: var(--muted); } .booking-alt-contact a { color: var(--primary); font-weight: 500; } .booking-alt-contact .sep { margin: 0 0.5rem; opacity: 0.5; } /* Info sidebar — sticky on desktop */ .info-stack { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; } @media (max-width: 991.98px) { .info-stack { position: static; top: auto; } } .info-card { background: var(--white); border-radius: 14px; padding: 1.5rem; box-shadow: 0 6px 24px rgba(1, 58, 89, 0.07); } .info-card-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 0.9rem; } .info-card-title { color: var(--primary-dark); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; } .info-card-text { color: var(--text); margin-bottom: 1rem; } .info-card-list { list-style: none; padding: 0; margin: 0; } .info-card-list li { padding: 0.2rem 0; color: var(--text); font-size: 0.95rem; } .info-card-list li.muted { color: var(--muted); font-size: 0.875rem; margin-top: 0.4rem; } .btn-directions { background: var(--primary-light); color: var(--primary); font-weight: 600; border-radius: 50px; padding: 0.5rem 1.15rem; } .btn-directions:hover { background: var(--primary); color: var(--white); } .info-card-checks { list-style: none; padding: 0; margin: 0; } .info-card-checks li { padding: 0.3rem 0; color: var(--text); font-size: 0.95rem; } .info-card-checks i { color: #2e9e5b; margin-right: 0.5rem; } /* Trust strip */ .trust-strip { background: var(--primary-dark); color: var(--white); padding: 1rem 0; } .trust-strip-text { margin: 0; text-align: center; font-size: 0.95rem; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; } .trust-strip-text i { color: var(--gold); margin-right: 0.3rem; } .trust-strip-text .sep { opacity: 0.5; } /* ========================================================================== FAQ PAGE — faq.php ========================================================================== */ .faq-section { background-color: var(--primary-light); } /* Search bar */ .faq-search { position: relative; margin-bottom: 1.25rem; } .faq-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.1rem; } .faq-search-input { width: 100%; border: 1px solid #d9e2e8; border-radius: 12px; padding: 0.85rem 1rem 0.85rem 2.8rem; font-size: 1rem; background: var(--white); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(2, 83, 126, 0.15); } /* Category pills */ .faq-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .faq-pill { border: 1.5px solid var(--primary); background: transparent; color: var(--primary); font-weight: 500; font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .faq-pill:hover { background: rgba(2, 83, 126, 0.08); } .faq-pill.active { background: var(--primary); color: var(--white); } /* Accordion — premium restyle */ .faq-accordion .accordion-item { background: var(--white); border: 1px solid #e3ebef; border-radius: 14px !important; margin-bottom: 0.9rem; overflow: hidden; box-shadow: 0 4px 18px rgba(1, 58, 89, 0.05); } .faq-accordion .accordion-header { margin: 0; } .faq-accordion .accordion-button { display: flex; align-items: center; gap: 0.75rem; padding: 1.15rem 1.35rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--text); background: var(--white); border-left: 3px solid transparent; box-shadow: none !important; } .faq-accordion .accordion-button:focus { box-shadow: none !important; } /* Open state — brand accent + left border */ .faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); background: var(--primary-light); border-left-color: var(--primary); } /* Hide default Bootstrap caret */ .faq-accordion .accordion-button::after { display: none; } /* Small category pill inside the header */ .faq-cat-pill { flex: 0 0 auto; font-family: "Inter", sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--primary); background: var(--primary-light); border: 1px solid rgba(2, 83, 126, 0.2); border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap; } .faq-accordion .accordion-button:not(.collapsed) .faq-cat-pill { background: var(--white); } .faq-q { flex: 1 1 auto; } /* Custom +/− icon that rotates on open */ .faq-icon { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-light); color: var(--primary); transition: transform 0.3s ease, background-color 0.2s ease; } .faq-accordion .accordion-button:not(.collapsed) .faq-icon { background: var(--primary); color: var(--white); transform: rotate(135deg); /* + turns into × */ } .faq-accordion .accordion-body { padding: 0 1.35rem 1.3rem; color: var(--muted); line-height: 1.65; } /* No results */ .faq-no-results { background: var(--white); border: 1px dashed #c7d5dd; border-radius: 12px; padding: 1.5rem; text-align: center; color: var(--muted); } .faq-no-results i { color: var(--primary); margin-right: 0.35rem; } /* Sidebar */ .faq-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.25rem; } .faq-help-card { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); border-radius: 16px; padding: 1.75rem; } .faq-help-title { color: var(--white); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.4rem; } .faq-help-text { color: rgba(255, 255, 255, 0.85); margin-bottom: 1.25rem; font-size: 0.95rem; } .faq-help-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; background: var(--white); color: var(--primary); font-weight: 600; border-radius: 10px; padding: 0.65rem; margin-bottom: 0.6rem; } .faq-help-btn:hover { background: var(--gold); color: var(--primary-dark); } .faq-help-email { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--white); font-weight: 500; font-size: 0.95rem; margin-top: 0.25rem; } .faq-help-email:hover { color: var(--gold); } /* Hours mini-card */ .faq-mini-card { background: var(--white); border-radius: 14px; padding: 1.25rem; display: flex; align-items: flex-start; gap: 0.9rem; box-shadow: 0 6px 24px rgba(1, 58, 89, 0.06); } .faq-mini-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .faq-mini-title { color: var(--primary-dark); font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; } .faq-mini-text { margin: 0; color: var(--muted); font-size: 0.9rem; } .faq-book-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--gold); color: var(--primary-dark); font-weight: 700; border-radius: 12px; padding: 0.85rem; } .faq-book-btn:hover { background: var(--primary); color: var(--white); } /* Mobile: sidebar drops below, un-stick */ @media (max-width: 991.98px) { .faq-sidebar { position: static; top: auto; } } /* ========================================================================== GIFT STORE PAGE — gift-store.php ========================================================================== */ /* 1) Intro */ .gift-intro { background-color: var(--white); } .gift-intro-title { color: var(--primary-dark); font-weight: 700; margin: 0.5rem 0 1rem; } .gift-intro-text { color: var(--muted); font-size: 1.05rem; line-height: 1.7; } /* 2) Gift card band */ .gift-card-band { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: 4.5rem 0; } .gift-card-title { color: var(--white); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 1rem; } .gift-card-text { color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1rem; } .gift-card-note { color: var(--gold); font-weight: 600; margin-bottom: 1.5rem; } .gift-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .gift-btn-light { background: var(--white); color: var(--primary); font-weight: 600; border-radius: 50px; padding: 0.7rem 1.6rem; } .gift-btn-light:hover { background: var(--gold); color: var(--primary-dark); } .gift-btn-outline { border: 2px solid rgba(255, 255, 255, 0.7); color: var(--white); font-weight: 600; border-radius: 50px; padding: 0.7rem 1.6rem; } .gift-btn-outline:hover { background: var(--white); color: var(--primary); } /* Gift card visual */ .gift-card-visual { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .gift-card-img { width: 100%; height: 300px; object-fit: cover; display: block; } .gift-card-bow { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; border-radius: 50%; background: var(--gold); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } /* 3) Product grid */ .gift-products { background-color: var(--primary-light); } .gift-products-title { color: var(--primary-dark); font-weight: 700; margin-top: 0.4rem; } .gift-product { background: var(--white); border-radius: 14px; overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: 0 6px 22px rgba(1, 58, 89, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .gift-product:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(1, 58, 89, 0.14); } .gift-product-media { position: relative; border: none; padding: 0; cursor: pointer; background: var(--primary-light); display: block; overflow: hidden; aspect-ratio: 4 / 3; } .gift-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .gift-product-media img.gift-img-fallback { object-fit: contain; padding: 1.5rem; opacity: 0.6; } .gift-product:hover .gift-product-media img { transform: scale(1.07); } .gift-product-zoom { position: absolute; bottom: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(2, 83, 126, 0.9); color: var(--white); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .gift-product:hover .gift-product-zoom { opacity: 1; transform: translateY(0); } .gift-product-body { padding: 1.2rem; display: flex; flex-direction: column; flex: 1 1 auto; } .gift-tag { align-self: flex-start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--primary); background: var(--primary-light); border: 1px solid rgba(2, 83, 126, 0.2); border-radius: 999px; padding: 0.2rem 0.6rem; margin-bottom: 0.6rem; } .gift-product-name { color: var(--primary-dark); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; } .gift-product-desc { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.9rem; flex: 1 1 auto; } .gift-available { font-size: 0.82rem; color: #2e9e5b; font-weight: 600; } .gift-available i { margin-right: 0.3rem; } /* 4) Experience strip */ .gift-strip { background: var(--primary-dark); color: var(--white); padding: 1rem 0; } .gift-strip-text { margin: 0; text-align: center; font-size: 0.95rem; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; } .gift-strip-text i { color: var(--gold); margin-right: 0.3rem; } .gift-strip-text .sep { opacity: 0.5; } /* 5) Visit CTA */ .gift-visit { background-color: var(--white); } .gift-visit-card { max-width: 640px; margin: 0 auto; text-align: center; background: var(--primary-light); border-radius: 18px; padding: 3rem 2rem; } .gift-visit-icon { width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 14px; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .gift-visit-title { color: var(--primary-dark); font-weight: 700; margin-bottom: 0.6rem; } .gift-visit-address { color: var(--text); font-size: 1.05rem; margin-bottom: 0.35rem; } .gift-visit-hours { color: var(--muted); margin-bottom: 1.5rem; } .gift-visit-hours i { color: var(--primary); margin-right: 0.3rem; } .gift-visit-btn { background: var(--primary); color: var(--white); font-weight: 600; border-radius: 50px; padding: 0.75rem 1.75rem; } .gift-visit-btn:hover { background: var(--primary-dark); color: var(--white); } /* Lightbox */ .gift-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .gift-lightbox[hidden] { display: none; } .gift-lightbox-backdrop { position: absolute; inset: 0; background: rgba(1, 20, 33, 0.9); } .gift-lightbox-figure { position: relative; z-index: 1; margin: 0; max-width: 800px; width: 100%; text-align: center; } .gift-lightbox-img { max-width: 100%; max-height: 78vh; border-radius: 12px; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .gift-lightbox-caption { color: var(--white); font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.15rem; margin-top: 1rem; } .gift-lightbox-btn { position: absolute; z-index: 2; border: none; background: rgba(255, 255, 255, 0.15); color: var(--white); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; cursor: pointer; transition: background-color 0.2s ease; } .gift-lightbox-btn:hover { background: var(--primary); } .gift-lightbox-close { top: 1.25rem; right: 1.25rem; } .gift-lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); } .gift-lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); } @media (max-width: 575.98px) { .gift-lightbox-prev { left: 0.5rem; } .gift-lightbox-next { right: 0.5rem; } .gift-lightbox-btn { width: 42px; height: 42px; font-size: 1.1rem; } .gift-card-img { height: 220px; } } /* ========================================================================== FUNDRAISING PAGE — fundraising.php ========================================================================== */ /* 1) Hero */ .fund-hero { background-color: var(--white); } .fund-hero-title { color: var(--primary-dark); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.6rem); margin: 0.5rem 0 1rem; } .fund-hero-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.75rem; } .fund-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .fund-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); font-weight: 700; border: none; border-radius: 50px; padding: 0.85rem 1.65rem; box-shadow: 0 10px 24px rgba(2, 83, 126, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .fund-btn-primary i { transition: transform 0.2s ease; } .fund-btn-primary:hover, .fund-btn-primary:focus { color: var(--white); filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(2, 83, 126, 0.34); } .fund-btn-primary:hover i { transform: translateX(3px); } .fund-btn-primary:disabled { opacity: 0.7; transform: none; box-shadow: none; } .fund-btn-outline { border: 2px solid var(--primary); color: var(--primary); font-weight: 600; border-radius: 50px; padding: 0.75rem 1.65rem; } .fund-btn-outline:hover { background: var(--primary); color: var(--white); } .fund-hero-visual { border-radius: 18px; overflow: hidden; box-shadow: 0 16px 44px rgba(1, 58, 89, 0.15); } .fund-hero-img { width: 100%; object-fit: cover; display: block; } .fund-img-fallback { object-fit: contain !important; padding: 2rem; background: var(--primary-light); opacity: 0.6; } /* Shared section title */ .fund-section-title { color: var(--primary-dark); font-weight: 700; margin-top: 0.4rem; } /* 2) Steps */ .fund-steps { background-color: var(--primary-light); } .fund-step { position: relative; background: var(--white); border-radius: 14px; padding: 2rem 1.5rem 1.5rem; height: 100%; text-align: center; box-shadow: 0 6px 22px rgba(1, 58, 89, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .fund-step:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(1, 58, 89, 0.13); } .fund-step-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--primary-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .fund-step-icon { width: 60px; height: 60px; margin: 0.5rem auto 1rem; border-radius: 15px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; } .fund-step-title { color: var(--primary-dark); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; } .fund-step-text { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; } /* 3) Stat band */ .fund-stat-band { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: 3.5rem 0; } .fund-stat-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; } .fund-stat-num { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 1; color: var(--gold); } .fund-stat-copy { text-align: left; max-width: 420px; } .fund-stat-lead { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.35rem; } .fund-stat-sub { color: rgba(255, 255, 255, 0.82); margin: 0; } /* 4) Inquiry form */ .fund-inquiry { background-color: var(--white); } .fund-form-card { position: relative; background: var(--white); border: 1px solid #e3ebef; border-radius: 22px; overflow: hidden; /* keeps the tinted head inside the radius */ box-shadow: 0 18px 50px rgba(1, 58, 89, 0.12); } /* Gold hairline across the very top of the card */ .fund-form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--gold), #ffe6a3, var(--gold)); } /* Tinted header band so the heading reads as part of the form, not floating */ .fund-form-head { background: linear-gradient(160deg, var(--primary-light) 0%, #f6fafc 100%); border-bottom: 1px solid #e3ebef; padding: 2.2rem 2.5rem 1.6rem; } .fund-form-title { color: var(--primary-dark); font-weight: 700; margin-bottom: 0.35rem; } .fund-form-sub { color: var(--muted); margin-bottom: 0; } /* Three quick reassurance chips under the heading */ .fund-form-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.1rem 0 0; } .fund-form-perks li { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--white); border: 1px solid rgba(2, 83, 126, 0.14); border-radius: 50px; padding: 0.35rem 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--primary); } .fund-form-perks i { color: var(--gold); font-size: 0.95rem; } .fund-form { padding: 1.8rem 2.5rem 2.2rem; } .fund-form .form-label { font-weight: 600; font-size: 0.86rem; color: #023d5d; margin-bottom: 0.4rem; } .fund-form .form-label i { color: var(--primary); margin-right: 0.25rem; } .fund-form .form-label .text-muted { font-weight: 500; } /* Inputs sit on a soft tint and lift to white on focus */ .fund-form .form-control { border-radius: 12px; padding: 0.72rem 0.95rem; border: 1.5px solid #dfe8ee; background: #f7fafc; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .fund-form .form-control::placeholder { color: #9fb0bb; } .fund-form .form-control:hover { border-color: #c3d5e0; } .fund-form .form-control:focus { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 4px rgba(2, 83, 126, 0.12); } .fund-form textarea.form-control { min-height: 120px; resize: vertical; } /* Privacy / response-time line under the submit button */ .fund-form-note { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.9rem 0 0; color: #8a97a1; font-size: 0.8rem; line-height: 1.55; } .fund-form-note i { color: var(--primary); margin-top: 0.15rem; } @media (max-width: 575.98px) { .fund-form-head { padding: 1.6rem 1.3rem 1.3rem; } .fund-form { padding: 1.4rem 1.3rem 1.8rem; } .fund-form-perks li { font-size: 0.76rem; padding: 0.3rem 0.7rem; } } /* Sidebar */ .fund-sidebar { display: flex; flex-direction: column; gap: 1.25rem; } .fund-info-card { background: var(--primary-light); border-radius: 14px; padding: 1.5rem; } .fund-info-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 0.9rem; } .fund-info-title { color: var(--primary-dark); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; } .fund-info-text { color: var(--muted); font-size: 0.92rem; line-height: 1.65; margin: 0; } .fund-checks { list-style: none; padding: 0; margin: 0; columns: 2; } .fund-checks li { padding: 0.25rem 0; font-size: 0.92rem; color: var(--text); break-inside: avoid; } .fund-checks i { color: #2e9e5b; margin-right: 0.4rem; } .fund-info-contact { display: flex; flex-direction: column; gap: 1rem; } .fund-mini-title { color: var(--primary-dark); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; } .fund-mini-title i { color: var(--primary); margin-right: 0.3rem; } .fund-mini-text { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.6rem; } .fund-btn-directions { background: var(--white); color: var(--primary); border: 1px solid var(--primary); font-weight: 600; border-radius: 50px; padding: 0.5rem 1.15rem; font-size: 0.9rem; } .fund-btn-directions:hover { background: var(--primary); color: var(--white); } /* 5) Download band */ .fund-download-band { background: var(--primary-dark); color: var(--white); padding: 3rem 0; } .fund-download-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .fund-download-title { color: var(--white); font-weight: 700; font-size: 1.5rem; margin-bottom: 0.35rem; } .fund-download-text { color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 620px; } .fund-download-btn { background: var(--gold); color: var(--primary-dark); font-weight: 700; border-radius: 50px; padding: 0.85rem 1.9rem; white-space: nowrap; } .fund-download-btn:hover { background: var(--white); color: var(--primary-dark); } /* 6) Causes */ .fund-causes { background-color: var(--primary-light); } .fund-cause { display: block; background: var(--white); border-radius: 14px; overflow: hidden; height: 100%; color: inherit; text-decoration: none; box-shadow: 0 6px 22px rgba(1, 58, 89, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .fund-cause:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(1, 58, 89, 0.14); color: inherit; } .fund-cause-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--primary-light); } .fund-cause-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .fund-cause:hover .fund-cause-media img { transform: scale(1.06); } .fund-cause-body { padding: 1.35rem; } .fund-cause-title { color: var(--primary-dark); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; } .fund-cause-title i { font-size: 0.8rem; color: var(--primary); } .fund-cause-text { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; } @media (max-width: 575.98px) { .fund-stat-copy { text-align: center; } .fund-download-btn { width: 100%; text-align: center; } } /* ========================================================================== APPOINTMENTS — service showcase grid + filter tabs ========================================================================== */ .appt-services { background-color: var(--white); } .appt-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; } /* Filter tabs */ .appt-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.75rem 0 2.5rem; } /* On phones the pills wrapped onto three ragged rows (~150px of chrome before any service showed). Below md they become one swipeable row instead. */ @media (max-width: 767.98px) { .appt-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ margin: 1.25rem 0 1.75rem; /* Bleed to the screen edges so the strip reads as scrollable, and pad the ends back so the first/last pill are not glued to the edge. */ margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5); margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5); padding: 0.25rem calc(var(--bs-gutter-x, 1.5rem) * 0.5); } .appt-tabs::-webkit-scrollbar { display: none; } /* Safari / Chrome */ .appt-tab { flex: 0 0 auto; scroll-snap-align: start; font-size: 0.86rem; padding: 0.5rem 1.1rem; } } .appt-tab { border: 1.5px solid var(--primary); background: transparent; color: var(--primary); font-weight: 600; font-size: 0.92rem; padding: 0.5rem 1.4rem; border-radius: 50px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .appt-tab:hover { background: rgba(2, 83, 126, 0.08); } .appt-tab.active { background: var(--primary); color: var(--white); } /* Service card */ .appt-card { background: var(--white); border: 1px solid #e3ebef; border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: 0 6px 22px rgba(1, 58, 89, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .appt-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(1, 58, 89, 0.15); } .appt-card-media { position: relative; overflow: hidden; background: var(--primary-light); } .appt-card-media img { width: 100%; object-fit: cover; transition: transform 0.4s ease; } .appt-card-media img.appt-img-fallback { object-fit: contain; padding: 1.75rem; opacity: 0.6; } .appt-card:hover .appt-card-media img:not(.appt-img-fallback) { transform: scale(1.06); } .appt-badge { position: absolute; top: 12px; right: 12px; background: var(--gold); color: var(--primary-dark); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.3rem 0.7rem; border-radius: 50px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .appt-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; } .appt-card-name { color: var(--primary-dark); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; } .appt-card-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.4rem; } .appt-card-meta i { color: var(--primary); margin-right: 0.25rem; } .appt-card-price { margin-bottom: 1.1rem; } .appt-card-price .price-now { color: var(--primary); font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.35rem; } .appt-card-price .price-was { color: var(--muted); text-decoration: line-through; font-size: 0.95rem; margin-left: 0.4rem; } .appt-card-body .btn-book { margin-top: auto; } /* ========================================================================== MOBILE TAP TARGETS — keep interactive pills/tabs/icons at ~44px on phones. Padding/colors untouched; only a minimum height is enforced. ========================================================================== */ @media (max-width: 575.98px) { .faq-pill, .appt-tab { min-height: 44px; } .gift-lightbox-btn { width: 44px; height: 44px; } .footer-newsletter-btn, .footer-social a, .top-bar-social a { min-width: 44px; min-height: 44px; } } /* ========================================================================== SMOG PROS PAGE — moved out of the page's inline