/* ============================================ Pool Service NJ — Main Styles Typography: Inter only (loaded in each HTML ) ============================================ */ :root { --color-deep: #0f2a33; --color-pool: #1a4b5d; --color-teal: #1f7475; /* CTA / accent — pool blue (no gold/yellow) */ --color-accent: #3d8fb8; --color-accent-hover: #52a8cc; --color-light: #f6f6f4; --color-white: #ffffff; --color-muted: #5c6b72; --color-border: rgba(255, 255, 255, 0.12); /* Single font stack site-wide */ --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --radius: 12px; --radius-lg: 20px; --radius-xl: 24px; --transition: 0.28s ease; --header-height: 72px; --shadow-sm: 0 2px 8px rgba(10, 44, 58, 0.06); --shadow-md: 0 8px 30px rgba(10, 44, 58, 0.08); --shadow-lg: 0 20px 50px rgba(10, 44, 58, 0.12); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-deep); background: var(--color-light); overflow-x: hidden; font-feature-settings: 'kern' 1; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-body); color: var(--color-deep); letter-spacing: -0.02em; line-height: 1.3; font-weight: 600; text-wrap: balance; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } /* Skip link */ .skip-link { position: absolute; top: -100px; left: var(--space-md); z-index: 1000; padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-white); font-weight: 600; border-radius: var(--radius); transition: top var(--transition); } .skip-link:focus { top: var(--space-md); } /* Global page loader: timing in page-loader.js (gallery 3s, home 2s, others ~1.2s) */ .page-loader { position: fixed; inset: 0; z-index: 10000; background: var(--color-teal, #147d7d); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, visibility 0.2s ease; } .page-loader.page-loader--hidden { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader-inner { display: flex; align-items: center; justify-content: center; } .page-loader-logo { max-width: 180px; height: auto; display: block; animation: page-loader-bounce 1.2s ease-in-out infinite; } @keyframes page-loader-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ============================================ Header ============================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-height); /* Fully clear bar over heroes — no frosted blur on any page */ background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; transition: background var(--transition), box-shadow var(--transition), border-color var(--transition); } .site-header.scrolled { /* Solid strip when scrolled (readable over light sections) — still no blur */ background: rgba(10, 44, 58, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-md); border-bottom-color: var(--color-border); } .page-home .site-header:not(.scrolled), .page-gallery .site-header:not(.scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; } .page-home .site-header:not(.scrolled) .logo, .page-gallery .site-header:not(.scrolled) .logo, .page-home .site-header:not(.scrolled) .sm-toggle, .page-gallery .site-header:not(.scrolled) .sm-toggle { color: var(--color-white); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 max(var(--space-md), env(safe-area-inset-right, 0px)) 0 max(var(--space-md), env(safe-area-inset-left, 0px)); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .header-contact { display: none; align-items: center; gap: var(--space-lg); flex: 1; justify-content: center; } .site-header.scrolled .header-contact { display: flex; } .header-contact-link { font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.95); white-space: nowrap; transition: color var(--transition); } .header-contact-link:hover { color: var(--color-white); } @media (max-width: 900px) { .header-contact { display: none !important; } } .logo { display: flex; align-items: center; gap: 0.35em; font-family: var(--font-body); font-weight: 700; font-size: 1.35rem; color: var(--color-white); } .logo img.logo-img { height: clamp(2.5rem, 11vw, 5rem); max-height: 80px; width: auto; object-fit: contain; display: block; /* Readable on bright or dark hero backgrounds when header is transparent */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35)); } .page-home .site-header.scrolled .logo img.logo-img, .page-gallery .site-header.scrolled .logo img.logo-img { filter: none; } .logo img.logo-img-failed { display: none !important; } /* When logo image is present and loaded, hide text logo */ .logo:has(.logo-img:not(.logo-img-failed)) .logo-text, .logo:has(.logo-img:not(.logo-img-failed)) .logo-state { display: none; } .logo-text { letter-spacing: 0.02em; } .logo-state { color: var(--color-accent); font-size: 1.1em; } /* Nav toggle (mobile) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--color-white); border-radius: var(--radius); } .nav-toggle:hover { background: rgba(255, 255, 255, 0.1); } .hamburger, .hamburger::before, .hamburger::after { width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: var(--transition); } .hamburger { position: relative; } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; } .hamburger::before { top: -7px; } .hamburger::after { top: 7px; } .nav-open .hamburger { background: transparent; } .nav-open .hamburger::before { top: 0; transform: rotate(45deg); } .nav-open .hamburger::after { top: 0; transform: rotate(-45deg); } .main-nav ul { display: flex; align-items: center; gap: var(--space-lg); } .main-nav a { color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 0.95rem; padding: var(--space-xs) 0; position: relative; transition: color var(--transition); } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-accent); transition: width var(--transition); } .main-nav a:hover { color: var(--color-white); } .main-nav a:hover::after { width: 100%; } .nav-cta { background: var(--color-accent); color: var(--color-deep) !important; padding: var(--space-xs) var(--space-md) !important; border-radius: var(--radius); } .nav-cta::after { display: none; } .nav-cta:hover { background: var(--color-accent-hover); } .main-nav a.nav-active { color: var(--color-accent); } .main-nav a.nav-active::after { width: 100%; } /* ============================================ Hero ============================================ */ .hero { position: relative; height: 100vh; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(var(--header-height) + var(--space-xl)) var(--space-md) var(--space-xl); padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom, 0)); overflow: hidden; perspective: 1000px; /* So when the image is shifted down, the top strip isn’t body grey */ background: var(--color-deep); } /* Pool image: container only slightly taller than viewport so image stays 1:1 = sharp */ .hero-sky-container { position: absolute; top: 0; left: 0; width: 100%; height: 130vh; will-change: transform; transform-origin: center top; } /* Desktop: hero MP4. Phone: .hero-mobile-slides (see hero-effect.js). */ .hero-sky-container .hero-mobile-slides { display: none; position: absolute; inset: 0; z-index: 0; } .hero-sky-container .hero-mobile-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .hero-sky-container .hero-mobile-slide.is-active { opacity: 1; z-index: 1; } .hero-sky-container .hero-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media (max-width: 767px) { .hero-sky-container { will-change: auto; } .hero-sky-container .hero-mobile-slides { display: block; } .hero-sky-container .hero-bg-video { display: none !important; } /* Slightly darker overlay on phone so text reads over rotating stills */ .page-home .hero-overlay { background: linear-gradient(180deg, rgba(10, 44, 58, 0.48) 0%, rgba(10, 44, 58, 0.4) 42%, rgba(10, 44, 58, 0.82) 100%); } } @media (min-width: 768px) { .hero-sky-container .hero-mobile-slides { display: none !important; } .hero-sky-container .hero-bg-video { display: block; } } /* Light overlay so the pool pic shows through; text still readable */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 44, 58, 0.35) 0%, rgba(10, 44, 58, 0.25) 40%, rgba(10, 44, 58, 0.7) 100%); pointer-events: none; z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 720px; padding: 0 var(--space-md); } .hero-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-white); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); margin-bottom: var(--space-md); opacity: 0; } .hero h1 { font-family: var(--font-body); font-size: clamp(1.65rem, 4.25vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; color: var(--color-white); margin: 0 0 var(--space-md); opacity: 0; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.18); } .hero-sub { font-size: clamp(0.875rem, 2vw, 1rem); line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-xl); max-width: 520px; margin-left: auto; margin-right: auto; opacity: 0; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; opacity: 0; } .hero-actions .btn-primary { box-shadow: 0 4px 20px rgba(61, 143, 184, 0.45); } /* Animations on load */ .animate-in.visible { animation: fadeUp 0.8s var(--transition) forwards; } .hero-tag.visible { animation-delay: 0.1s; } .hero h1.visible { animation-delay: 0.2s; } .hero-sub.visible { animation-delay: 0.35s; } .hero-actions.visible { animation-delay: 0.5s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-scroll { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, currentColor, transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } /* Page hero (subpages) */ .page-hero { padding: calc(var(--header-height) + var(--space-2xl)) var(--space-md) var(--space-xl); background: linear-gradient(135deg, var(--color-deep) 0%, var(--color-pool) 100%); text-align: center; color: var(--color-white); } /* Service page hero with full-width background image */ .page-hero--with-bg { position: relative; min-height: 55vh; padding: calc(var(--header-height) + var(--space-2xl)) var(--space-md) var(--space-2xl); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-deep); } .page-hero-bg { position: absolute; inset: 0; z-index: 0; } .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; /* Native asset resolution drives sharpness; avoid extra compositor layers that soften on some GPUs */ } .page-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0, 40, 55, 0.75) 0%, rgba(0, 55, 65, 0.85) 100%); } .page-hero--with-bg .container { position: relative; z-index: 2; } .page-hero .section-label { color: var(--color-accent); } .page-hero h1 { font-family: var(--font-body); font-size: clamp(1.85rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-white); margin: 0 0 var(--space-sm); } .page-hero-desc { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; max-width: 560px; margin-left: auto; margin-right: auto; } .section-cta { text-align: center; margin-top: var(--space-xl); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.75rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .btn-primary { background: var(--color-accent); color: var(--color-deep); } .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(61, 143, 184, 0.4); } .btn-secondary { background: transparent; color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.5); } .btn-secondary:hover { border-color: var(--color-white); background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .btn-full { width: 100%; } /* ============================================ Sections ============================================ */ .section { padding: var(--space-2xl) 0; scroll-margin-top: var(--header-height); } .page-home .section { padding: clamp(3rem, 5vw, 5rem) 0; } .hero { scroll-margin-top: 0; } .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-md); } .page-home .container { padding: 0 clamp(var(--space-md), 4vw, var(--space-xl)); } .container-narrow { max-width: 720px; } .section-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-teal); margin-bottom: var(--space-xs); } .section-header { text-align: center; max-width: 580px; margin: 0 auto var(--space-xl); } .section-header h2 { font-family: var(--font-body); font-size: clamp(1.65rem, 3.5vw, 2.15rem); font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); letter-spacing: -0.02em; line-height: 1.28; } .section-desc { color: var(--color-muted); margin: 0; font-size: 1.05rem; line-height: 1.6; } /* Scroll-triggered animation */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } .animate-on-scroll[data-delay="1"].visible { transition-delay: 0.08s; } .animate-on-scroll[data-delay="2"].visible { transition-delay: 0.16s; } .animate-on-scroll[data-delay="3"].visible { transition-delay: 0.24s; } .animate-on-scroll[data-delay="4"].visible { transition-delay: 0.32s; } .animate-on-scroll[data-delay="5"].visible { transition-delay: 0.4s; } /* Service long-form body: main SEO copy must not depend on scroll/IO timing (intermittent blank area on mobile + fast menu nav). */ .service-deep .animate-on-scroll { opacity: 1; transform: none; } /* Services grid */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .service-card { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 44, 58, 0.06); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(10, 44, 58, 0.08); } .service-card h2, .service-card h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); line-height: 1.3; } .service-card p { color: var(--color-muted); margin: 0; font-size: 0.95rem; line-height: 1.6; } .service-card-link { display: block; color: inherit; } .service-card-link .card-link-text { display: inline-block; margin-top: var(--space-md); font-size: 0.9rem; font-weight: 600; color: var(--color-teal); transition: transform var(--transition); } .service-card-link:hover .card-link-text { transform: translateX(4px); } .page-links-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); padding-top: var(--space-md); } .page-links-cta .btn-secondary { background: var(--color-teal); color: #fff; border-color: var(--color-teal); } .page-links-cta .btn-secondary:hover { background: #0d5f6d; border-color: #0d5f6d; color: #fff; } /* Parallax background for Explore Our Services (home) */ .home-services-parallax { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4rem) 0; } .home-services-parallax .container { max-width: 1280px; } .page-home .home-services-parallax .services-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-xl); } .home-services-parallax-bg { position: absolute; /* Hi-res still from pool-samples (not used on service deep-dives); modest inset for parallax slack */ inset: -6%; background-image: url('images/pool-samples/Pools%20samples%20/20210528_093514.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; will-change: transform; } @media (max-width: 767px) { .home-services-parallax-bg { inset: 0; background-image: url('images/pool-samples/Pools%20samples%20/20210528_093514.jpg'); background-position: center 35%; will-change: auto; } /* First cards were tucking under the fixed header when section follows a tall hero */ .home-services-parallax { padding-top: max(3.25rem, calc(var(--header-height) + 1rem)); } .home-services-grid .service-card-link:first-child { scroll-margin-top: calc(var(--header-height) + 12px); } } .home-services-parallax-overlay { position: absolute; inset: 0; background: rgba(10, 44, 58, 0.55); z-index: 1; } .home-services-parallax-content { position: relative; z-index: 2; } .home-services-parallax-content .section-label, .home-services-parallax-content .section-header h2, .home-services-parallax-content .section-desc { color: #fff; } /* Trust bar (home) */ .trust-bar { background: var(--color-deep); color: rgba(255, 255, 255, 0.92); padding: var(--space-lg) var(--space-md); border-bottom: none; } .trust-bar-inner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: clamp(0.35rem, 1.5vw, 1rem); font-size: clamp(0.68rem, 0.55vw + 0.62rem, 0.875rem); font-weight: 500; letter-spacing: 0.02em; max-width: 1100px; margin-left: auto; margin-right: auto; } .trust-item { display: inline-flex; align-items: center; gap: 0.35rem; flex: 1 1 0; min-width: 0; line-height: 1.25; text-align: center; justify-content: center; white-space: nowrap; } a.trust-item { color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; transition: transform 0.22s cubic-bezier(0.34, 1.45, 0.64, 1), color 0.2s ease, opacity 0.2s ease; } a.trust-item:hover { transform: translateY(-5px); color: var(--color-white); opacity: 1; } a.trust-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .trust-icon { color: var(--color-accent); font-weight: 700; } /* Home intro */ .home-intro { background: var(--color-white); } .intro-block { max-width: 640px; margin: 0 auto; text-align: center; padding: 0 var(--space-sm); } .intro-block h2 { font-family: var(--font-body); font-size: clamp(1.5rem, 3.25vw, 2rem); font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-lg); line-height: 1.3; letter-spacing: -0.02em; } .intro-lead { font-size: 1.08rem; line-height: 1.75; color: var(--color-muted); margin: 0 0 var(--space-lg); } .link-arrow { display: inline-block; font-weight: 600; color: var(--color-teal); transition: color var(--transition), transform var(--transition); } .link-arrow:hover { color: var(--color-deep); transform: translateX(4px); } /* Home socials — compact C21-inspired layout (site palette) */ .page-home .home-socials.section { padding-top: clamp(2rem, 4vw, 2.75rem); padding-bottom: clamp(2rem, 4vw, 2.75rem); } .home-socials { background: var(--color-white); } .home-socials .container { max-width: 720px; } .home-socials-header { text-align: center; max-width: 36rem; margin: 0 auto; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(10, 44, 58, 0.1); margin-bottom: 0.65rem; } .home-socials-main-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 0.65rem; margin: 0 0 0.45rem; font-family: var(--font-body); font-size: inherit; font-weight: 600; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; } .home-socials-kicker-muted { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; color: var(--color-muted); white-space: nowrap; } .home-socials-kicker-strong { font-size: clamp(1.05rem, 2.8vw, 1.35rem); font-weight: 600; letter-spacing: 0.08em; color: var(--color-deep); white-space: nowrap; } .home-socials-kicker-divider { width: 1px; height: 1.15em; align-self: center; background: rgba(61, 143, 184, 0.65); flex-shrink: 0; } .home-socials-tagline { margin: 0 0 0.35rem; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.5; max-width: 28rem; margin-left: auto; margin-right: auto; } .home-socials-handle-row { margin: 0; } .home-socials-handle-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; color: var(--color-teal); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: color var(--transition); } .home-socials-handle-link:hover { color: var(--color-deep); } .home-socials-handle-link:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; border-radius: 4px; } .home-socials-handle-ig { width: 1rem; height: 1rem; flex-shrink: 0; } .home-socials-handle-text { letter-spacing: 0.03em; } .home-socials-cta { margin-top: 0.65rem; } .home-socials .section-cta.home-socials-cta { margin-top: 0.65rem; } .home-socials .home-socials-cta .btn-primary { padding: 0.55rem 1.2rem; font-size: 0.875rem; } .home-socials-icons { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } /* Ghost circles — minimal, compact */ .home-socials-icon-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--color-deep); background: transparent; border: 1px solid rgba(10, 44, 58, 0.22); transition: color var(--transition), border-color var(--transition), background var(--transition); } .home-socials-icon-link svg { width: 17px; height: 17px; } .home-socials-icon-link:hover { color: var(--color-teal); border-color: var(--color-teal); background: rgba(20, 125, 125, 0.06); transform: none; } .home-socials-icon-link--primary { color: var(--color-teal); border-color: rgba(20, 125, 125, 0.55); background: transparent; } .home-socials-icon-link--primary:hover { color: var(--color-pool); border-color: var(--color-pool); background: rgba(26, 75, 93, 0.06); } /* Home socials grid — tight 3×2 gutters */ .home-socials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 100%; margin: 0 auto; } .home-socials-grid-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--color-light); border-radius: 0; transition: opacity var(--transition); } .home-socials-grid-item:hover { opacity: 0.9; } .home-socials-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .home-socials-grid-item:hover img { transform: scale(1.04); } @media (max-width: 767px) { .home-socials-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; } } @media (max-width: 480px) { .home-socials-grid { gap: 2px; } } /* New pool builds — style gallery on home */ .home-builds { background: var(--color-light); } .home-builds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); } .home-builds-card { margin: 0; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 44, 58, 0.06); transition: transform var(--transition), box-shadow var(--transition); } .home-builds-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .home-builds-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .home-builds-card figcaption { padding: var(--space-sm) var(--space-md) var(--space-md); font-size: 0.95rem; font-weight: 600; color: var(--color-deep); line-height: 1.35; } .home-builds-card .home-builds-caption-sub { display: block; font-weight: 400; font-size: 0.875rem; color: var(--color-muted); margin-top: 0.25rem; } .home-builds-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; align-items: center; margin-top: var(--space-xl); } .home-builds-cta .btn-secondary { color: var(--color-deep); border: 2px solid rgba(10, 44, 58, 0.28); background: var(--color-white); } .home-builds-cta .btn-secondary:hover { background: rgba(26, 75, 93, 0.08); border-color: var(--color-pool); color: var(--color-deep); transform: translateY(-2px); } @media (max-width: 767px) { .home-builds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } } @media (max-width: 480px) { .home-builds-grid { grid-template-columns: 1fr; } } /* Home why — wider cards (2×2 on desktop instead of skinny 4-across) */ .home-why { background: var(--color-light); } .home-why .container { max-width: 1240px; } .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); } @media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } } .why-item { background: var(--color-white); padding: var(--space-xl) clamp(var(--space-lg), 4vw, 2.5rem); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 44, 58, 0.06); transition: transform var(--transition), box-shadow var(--transition); } .why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .why-num { display: block; font-family: var(--font-body); font-size: 1.4rem; font-weight: 600; color: var(--color-teal); margin-bottom: var(--space-sm); opacity: 0.9; } .why-item h3 { font-family: var(--font-body); font-size: clamp(1.2rem, 2vw, 1.35rem); font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); } .why-item p { margin: 0; font-size: 1.02rem; color: var(--color-muted); line-height: 1.65; max-width: 52ch; } /* CTA band (home) */ .cta-band { background: linear-gradient(135deg, var(--color-pool) 0%, var(--color-deep) 100%); color: var(--color-white); padding: clamp(3.5rem, 8vw, 5rem) var(--space-md); } .cta-band-inner { text-align: center; max-width: 540px; margin: 0 auto; } .cta-band-inner h2 { font-family: var(--font-body); font-size: clamp(1.65rem, 3.5vw, 2rem); font-weight: 600; color: var(--color-white); margin: 0 0 var(--space-md); letter-spacing: -0.02em; line-height: 1.3; } .cta-band-inner p { margin: 0 0 var(--space-xl); color: rgba(255, 255, 255, 0.92); font-size: 1.08rem; line-height: 1.55; } .cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } .cta-band-actions .btn-primary { background: var(--color-accent); color: var(--color-deep); box-shadow: 0 4px 20px rgba(61, 143, 184, 0.4); } .cta-band-actions .btn-primary:hover { background: var(--color-accent-hover); } .cta-band-actions .btn-secondary { border: 2px solid rgba(255, 255, 255, 0.7); color: var(--color-white); } .cta-band-actions .btn-secondary:hover { border-color: var(--color-white); background: rgba(255, 255, 255, 0.12); } /* Process steps (home) */ .home-process { background: var(--color-white); } .home-process .container { max-width: 1280px; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); align-items: stretch; } @media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .process-steps { grid-template-columns: 1fr; } } .process-step { display: flex; flex-direction: column; text-align: center; padding: var(--space-lg) var(--space-md); background: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 44, 58, 0.06); transition: transform var(--transition), box-shadow var(--transition); } .process-step p { flex: 1; margin: 0; font-size: 0.95rem; color: var(--color-muted); line-height: 1.55; } .process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .process-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--color-teal); color: var(--color-white); font-family: var(--font-body); font-size: 1.4rem; font-weight: 700; border-radius: 50%; margin-bottom: var(--space-md); align-self: center; } .process-step h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); } /* Testimonials (home preview + testimonials page) */ .home-testimonials { background: var(--color-light); } .testimonials-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); } @media (max-width: 700px) { .testimonials-preview { grid-template-columns: 1fr; } } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .testimonial-card { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 44, 58, 0.06); margin: 0; transition: transform var(--transition), box-shadow var(--transition); } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .testimonial-stars { color: var(--color-accent); font-size: 1rem; letter-spacing: 0.05em; margin-bottom: var(--space-md); } .testimonial-text { font-style: italic; color: var(--color-deep); margin: 0 0 var(--space-md); line-height: 1.65; font-size: 1.02rem; } .testimonial-author { font-size: 0.9rem; color: var(--color-muted); margin: 0; } .testimonials-cta, .faq-cta { text-align: center; margin-top: var(--space-xl); } .faq-cta p, .testimonials-cta p { margin-bottom: var(--space-sm); } /* FAQ */ .faq-section { background: var(--color-light); } .faq-list { margin: 0; padding: 0; list-style: none; } .faq-item { border-bottom: 1px solid rgba(10, 44, 58, 0.1); padding: var(--space-md) 0; } .faq-item:first-child { padding-top: 0; } .faq-question { font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-xs); } .faq-answer { margin: 0; color: var(--color-muted); line-height: 1.65; font-size: 1rem; } .faq-answer a { color: var(--color-teal); font-weight: 500; } .faq-answer a:hover { text-decoration: underline; } /* Service area */ .service-area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); } .service-area-card { background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid rgba(10, 44, 58, 0.08); } .service-area-card h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-teal); } .service-area-card ul { margin: 0; padding: 0; list-style: none; } .service-area-card li { padding: 0.25rem 0; color: var(--color-muted); font-size: 0.95rem; } .service-area-grid--towns { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; } .service-area-card--wide { width: 100%; } .service-area-town-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem 1.25rem; } @media (max-width: 700px) { .service-area-town-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .service-area-town-list a { color: var(--color-teal); font-weight: 500; text-decoration: none; } .service-area-town-list a:hover { color: var(--color-pool); text-decoration: underline; } /* Coverage page: photo strip above town list */ .service-area-showcase { margin-bottom: var(--space-xl); } .service-area-showcase .section-header { margin-bottom: var(--space-md); } .service-area-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); } .service-area-showcase-grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .service-area-showcase-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } @media (max-width: 768px) { .service-area-showcase-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } } /* Town landing pages (generated) */ .town-landing-lead { max-width: 640px; margin: 0 auto var(--space-xl); text-align: center; color: var(--color-muted); font-size: 1.05rem; line-height: 1.65; } .town-landing-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); } .town-landing-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; align-items: center; } .town-landing-actions-below { width: 100%; text-align: center; padding-top: 0.15rem; } /* Town pages: .btn-secondary defaults to white-on-transparent for dark heroes; here we need dark text on light bg */ .town-landing-actions .btn-secondary { color: var(--color-pool); border: 2px solid var(--color-pool); background: var(--color-white); } .town-landing-actions .btn-secondary:hover { background: rgba(61, 143, 184, 0.14); border-color: var(--color-accent); color: var(--color-deep); transform: translateY(-2px); } .town-landing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; max-width: 900px; margin-left: auto; margin-right: auto; } .town-landing-grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .town-landing-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } @media (max-width: 600px) { .town-landing-grid { grid-template-columns: 1fr; } } .town-landing-services-grid { max-width: 900px; margin-left: auto; margin-right: auto; } /* Pricing */ .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); } .pricing-card { background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid rgba(10, 44, 58, 0.08); transition: transform var(--transition); } .pricing-card:hover { transform: translateY(-2px); } .pricing-card h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); } .pricing-card p { margin: 0 0 var(--space-md); color: var(--color-muted); font-size: 0.95rem; line-height: 1.55; } .btn-block { width: 100%; display: block; text-align: center; } .pricing-notes { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-light); border-radius: var(--radius-lg); } .pricing-notes h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); } .pricing-notes ul { margin: 0; padding-left: 1.25rem; color: var(--color-muted); font-size: 0.95rem; line-height: 1.6; } /* Tips */ .tips-section { background: var(--color-light); } .tip-card { background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); border: 1px solid rgba(10, 44, 58, 0.06); box-shadow: 0 2px 12px rgba(10, 44, 58, 0.06); } .tip-label { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-teal); margin-bottom: var(--space-xs); } .tip-card h2 { font-family: var(--font-body); font-size: 1.35rem; font-weight: 600; color: var(--color-deep); line-height: 1.35; margin: 0 0 var(--space-sm); } .tip-card p { margin: 0; color: var(--color-muted); line-height: 1.65; } .tips-cta { text-align: center; margin-top: var(--space-xl); } .tips-cta p { margin-bottom: var(--space-md); } /* Pool type blocks (in-ground / above-ground) */ .pool-types-alt { background: var(--color-white); } .pool-type-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .pool-type-block.reverse .pool-type-content { order: 2; } .pool-type-block.reverse .pool-type-media { order: 1; } .pool-desc { color: var(--color-muted); margin-bottom: var(--space-md); font-size: 1.05rem; } .feature-list { margin-bottom: var(--space-lg); } .feature-list li { position: relative; padding-left: 1.5rem; margin-bottom: var(--space-xs); color: var(--color-deep); } .feature-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; } .pool-type-block h2 { font-family: var(--font-body); font-size: clamp(1.65rem, 3vw, 2.05rem); font-weight: 600; color: var(--color-deep); line-height: 1.28; margin: 0 0 var(--space-sm); } .media-placeholder { aspect-ratio: 4/3; background: linear-gradient(135deg, rgba(20, 125, 125, 0.15) 0%, rgba(13, 79, 92, 0.2) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 0.9rem; border: 2px dashed rgba(20, 125, 125, 0.3); } .about-media img { width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; display: block; } .pool-type-media img { width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; } /* Products grid */ .products { background: var(--color-white); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); } .product-card { background: var(--color-light); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(10, 44, 58, 0.06); transition: transform var(--transition), box-shadow var(--transition); } .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(10, 44, 58, 0.1); } .product-placeholder { aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(20, 125, 125, 0.12) 0%, rgba(13, 79, 92, 0.15) 100%); display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 0.85rem; } .product-card h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; margin: var(--space-md) var(--space-md) var(--space-xs); color: var(--color-deep); } .product-card p { margin: 0 var(--space-md) var(--space-md); color: var(--color-muted); font-size: 0.95rem; } /* Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .gallery-item { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; transition: transform var(--transition); /* Placeholder while image loads */ background: linear-gradient(135deg, rgba(20, 125, 125, 0.15) 0%, rgba(13, 79, 92, 0.25) 100%); } .gallery-item:hover { transform: scale(1.02); } .gallery-placeholder { aspect-ratio: 1; background: linear-gradient(135deg, rgba(20, 125, 125, 0.12) 0%, rgba(13, 79, 92, 0.18) 100%); display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 0.85rem; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease; } .gallery-item img.gallery-img-loaded { opacity: 1; } .gallery-grid-label { margin: 0 0 var(--space-sm); font-size: 1rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; } .page-gallery .gallery .gallery-item img { opacity: 1; } /* About */ .about { background: var(--color-white); } .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .about-content h2 { font-family: var(--font-body); font-size: clamp(1.65rem, 3vw, 2.05rem); font-weight: 600; color: var(--color-deep); line-height: 1.32; margin: 0 0 var(--space-md); } .about-content p { color: var(--color-muted); margin-bottom: var(--space-md); } .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); } .about-features li { padding-left: 1.25rem; position: relative; color: var(--color-deep); font-weight: 500; } .about-features li::before { content: '✓'; position: absolute; left: 0; color: var(--color-teal); font-weight: 700; } .about-placeholder { aspect-ratio: 4/3; max-height: 320px; } /* CPO online registration */ .page-cpo-register .cpo-register-section { background: var(--color-light); } /* Bouncing “register now!” cue above registration form */ .cpo-register-now-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; margin-bottom: var(--space-md); text-decoration: none; color: var(--color-teal); font-weight: 700; scroll-margin-top: calc(var(--header-height) + 1rem); } .cpo-register-now-hint:hover, .cpo-register-now-hint:focus-visible { color: var(--color-deep); outline: none; } .cpo-register-now-hint:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); border-radius: var(--radius); } .cpo-register-now-arrow { display: block; font-size: 1.75rem; line-height: 1; animation: cpo-register-bounce 1.25s ease-in-out infinite; } .cpo-register-now-text { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: lowercase; } @keyframes cpo-register-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } .cpo-register-now-hint--in-about { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(10, 44, 58, 0.08); } @media (prefers-reduced-motion: reduce) { .cpo-register-now-arrow { animation: none; } } .cpo-register-intro { text-align: center; max-width: 42rem; margin: 0 auto var(--space-xl); } .cpo-register-intro h2 { font-family: var(--font-body); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; color: var(--color-deep); line-height: 1.28; margin: 0 0 var(--space-sm); scroll-margin-top: calc(var(--header-height) + 1rem); } .cpo-register-intro p { color: var(--color-muted); margin: 0; line-height: 1.65; } .cpo-register-card { position: relative; max-width: 40rem; margin: 0 auto; padding: var(--space-xl); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0 12px 42px rgba(10, 44, 58, 0.1); border: 1px solid rgba(10, 44, 58, 0.06); } .cpo-register-callout { margin: var(--space-md) 0; padding: var(--space-md); background: rgba(20, 125, 125, 0.09); border-radius: var(--radius); color: var(--color-deep); font-weight: 500; line-height: 1.5; } .cpo-register-callout a { color: var(--color-teal); font-weight: 600; } .cpo-register-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-md); } .label-required { color: var(--color-teal); font-weight: 700; font-size: 0.85em; } .cpo-register-honey { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cpo-register-footnote { font-size: 0.875rem; color: var(--color-muted); margin: var(--space-sm) 0 0; line-height: 1.55; } .cpo-register-footnote code { font-size: 0.8em; background: rgba(10, 44, 58, 0.06); padding: 0.1em 0.35em; border-radius: 4px; } .cpo-register-footnote a { color: var(--color-teal); font-weight: 500; } .cpo-register-alt { max-width: 40rem; margin: var(--space-xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid rgba(10, 44, 58, 0.1); } .cpo-register-alt h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; color: var(--color-deep); margin: 0 0 var(--space-sm); } .cpo-register-resource-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .cpo-register-resource-list a { color: var(--color-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .cpo-register-resource-list a:hover { color: var(--color-deep); } /* Contact */ /* Schedule page booking block */ .page-schedule .schedule-booking .section-cta { text-align: left; display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } .page-schedule .schedule-booking .btn-secondary { color: var(--color-deep); border: 2px solid rgba(10, 44, 58, 0.28); background: var(--color-white); } .page-schedule .schedule-booking .btn-secondary:hover { background: rgba(20, 125, 125, 0.08); border-color: rgba(10, 44, 58, 0.42); } .page-schedule .schedule-booking .about-content h2 { line-height: 1.34; padding-bottom: 0.08em; } .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; max-width: 1000px; margin: 0 auto; } .contact-info h2 { font-family: var(--font-body); font-size: clamp(1.65rem, 3vw, 2rem); font-weight: 600; color: var(--color-deep); line-height: 1.28; margin: 0 0 var(--space-sm); } .contact-info p { color: var(--color-muted); margin-bottom: var(--space-md); } .contact-details { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(10, 44, 58, 0.1); } .contact-details p { margin-bottom: var(--space-xs); } .contact-nap { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(10, 44, 58, 0.1); } .contact-nap p { margin-bottom: var(--space-xs); } .contact-nap a { color: var(--color-teal); font-weight: 500; } .contact-nap a:hover { text-decoration: underline; } .contact-business-name { margin-bottom: var(--space-sm); } .contact-phone { font-size: 1.1rem; } .contact-area { margin-top: var(--space-sm); } .contact-social { display: flex; gap: var(--space-md); margin-top: var(--space-md); } .contact-social a { color: var(--color-teal); font-weight: 500; font-size: 0.95rem; } .contact-social a:hover { text-decoration: underline; } .contact-newsletter-label { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.9rem; color: var(--color-muted); cursor: pointer; } .contact-newsletter-label input { width: auto; } .contact-form { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-form label { font-weight: 600; font-size: 0.9rem; color: var(--color-deep); } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-size: 1rem; padding: 0.75rem 1rem; border: 1px solid rgba(10, 44, 58, 0.2); border-radius: var(--radius); background: var(--color-white); transition: border-color var(--transition), box-shadow var(--transition); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 3px rgba(20, 125, 125, 0.15); } .contact-form textarea { resize: vertical; min-height: 100px; } /* Footer */ .site-footer { background: var(--color-deep); color: rgba(255, 255, 255, 0.8); padding: var(--space-xl) 0 var(--space-lg); } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); text-align: left; } .footer-brand-block { max-width: 280px; } .footer-logo { display: block; margin-bottom: var(--space-md); } .footer-logo img { height: 4rem; width: auto; max-width: 180px; object-fit: contain; vertical-align: middle; } .footer-brand { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; margin-bottom: var(--space-xs); } .footer-brand .logo-state { color: var(--color-accent); } .footer-tagline { margin-bottom: var(--space-md); font-size: 0.9rem; line-height: 1.5; } .footer-contact-mini { margin-bottom: var(--space-md); font-size: 0.95rem; } .footer-contact-mini a { display: block; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.25rem; transition: color var(--transition); } .footer-contact-mini a:hover { color: var(--color-accent); } .footer-phone { font-weight: 600; } .footer-social { display: flex; gap: var(--space-md); } .footer-social a { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; transition: color var(--transition); } .footer-social a:hover { color: var(--color-accent); } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-xl); } .footer-nav-col { display: flex; flex-direction: column; gap: var(--space-xs); } .footer-nav-title { font-weight: 600; font-size: 0.9rem; color: var(--color-white); margin-bottom: var(--space-xs); } .footer-nav a { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; transition: color var(--transition); } .footer-nav a:hover { color: var(--color-accent); } .footer-newsletter { max-width: 260px; } .footer-newsletter-title { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-sm); color: var(--color-white); } .newsletter-form { display: flex; flex-direction: column; gap: var(--space-xs); } .newsletter-form input { font-family: var(--font-body); font-size: 1rem; padding: 0.6rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); color: var(--color-white); } .newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.6); } .newsletter-form .btn { padding: 0.6rem 1rem; font-size: 0.9rem; } .footer-copy { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin: 0; padding-top: var(--space-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .footer-credit { font-size: 0.78rem; color: rgba(255, 255, 255, 0.42); margin: 0.65rem 0 0; padding: 0; text-align: center; letter-spacing: 0.02em; } .footer-credit a { color: rgba(255, 255, 255, 0.78); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: color var(--transition), border-color var(--transition); } .footer-credit a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } /* Legacy single-column footer (index redirect page has no footer-grid) */ .footer-inner { text-align: center; } .footer-inner .footer-nav { justify-content: center; } .footer-inner .footer-nav a { color: rgba(255, 255, 255, 0.85); } .footer-inner .footer-tagline { margin-bottom: var(--space-md); } /* ============================================ Responsive ============================================ */ @media (max-width: 900px) { .pool-type-block, .pool-type-block.reverse { grid-template-columns: 1fr; gap: var(--space-lg); } .pool-type-block.reverse .pool-type-content, .pool-type-block.reverse .pool-type-media { order: unset; } .about-inner { grid-template-columns: 1fr; } .contact-inner { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-brand-block { max-width: none; } .footer-nav { justify-content: center; } .footer-newsletter { max-width: none; margin: 0 auto; } } @media (max-width: 768px) { :root { --header-height: 64px; } .container { padding: 0 max(1.25rem, env(safe-area-inset-left, 0px)) 0 max(1.25rem, env(safe-area-inset-right, 0px)); } .page-home .container { padding: 0 max(1.25rem, env(safe-area-inset-left, 0px)) 0 max(1.25rem, env(safe-area-inset-right, 0px)); } .page-home .section { padding: 2.5rem 0; } .page-home .hero h1 { font-size: clamp(1.5rem, 6.5vw, 2.25rem); line-height: 1.15; } .page-home .hero-sub { font-size: 0.9rem; margin-bottom: var(--space-lg); max-width: 36rem; } .page-home .hero-actions { flex-direction: column; gap: var(--space-sm); align-items: stretch; } .page-home .hero-actions .btn { width: 100%; max-width: none; } .page-home .services-grid { grid-template-columns: 1fr; gap: var(--space-md); } .page-home .service-card { padding: var(--space-lg); } .page-home .trust-bar-inner { gap: clamp(0.3rem, 1.2vw, 0.75rem); font-size: clamp(0.62rem, 0.5vw + 0.55rem, 0.78rem); flex-wrap: nowrap; justify-content: space-between; } .nav-toggle { display: flex; } .main-nav { position: fixed; top: var(--header-height); left: 0; right: 0; background: rgba(10, 44, 58, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--space-lg); max-height: 0; overflow: hidden; transition: max-height var(--transition); border-bottom: 1px solid var(--color-border); } .main-nav.is-open { max-height: 80vh; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .main-nav li { border-bottom: 1px solid var(--color-border); } .main-nav a { display: block; padding: var(--space-md); } .nav-cta { text-align: center; margin-top: var(--space-sm); } .hero { min-height: 100svh; min-height: 100dvh; padding: calc(var(--header-height) + 1.25rem) max(1rem, env(safe-area-inset-left)) max(3.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right)); align-items: center; justify-content: center; } .hero-sky-container .hero-bg-video, .hero-sky-container .hero-mobile-slide { object-position: center 42%; } .hero-content { padding: 0 max(0.5rem, env(safe-area-inset-left)) 0 max(0.5rem, env(safe-area-inset-right)); width: 100%; max-width: 100%; } .hero-tag { font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: var(--space-sm); } .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; } .page-home .hero-actions .btn, .hero-actions .btn { max-width: none; width: 100%; } .btn { min-height: 48px; padding: 0.9rem 1.5rem; } .hero-scroll { bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px)); } .section { padding: var(--space-xl) 0; } .about-inner { gap: var(--space-lg); } .about-content { padding: 0; order: 1; } .about-content h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.3; } .about-content p { margin-bottom: 1rem; } .section-cta { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin-top: 1.5rem; text-align: center; } .section-cta .btn { width: 100%; max-width: 100%; justify-content: center; } .about-features { grid-template-columns: 1fr; } .cpo-register-card { padding: var(--space-md); } .page-hero { padding: calc(var(--header-height) + 1.5rem) max(1rem, env(safe-area-inset-left)) 2rem max(1rem, env(safe-area-inset-right)); } .page-hero--with-bg { min-height: min(72vh, 620px); padding-top: calc(var(--header-height) + 1.75rem); } .page-hero h1 { font-size: clamp(1.65rem, 6vw, 2.25rem); line-height: 1.22; } .page-hero-desc { font-size: 1rem; } .service-deep { padding-top: var(--space-lg); padding-bottom: var(--space-xl); } .service-deep-intro h2 { font-size: clamp(1.45rem, 5vw, 2rem); line-height: 1.28; } } @media (max-width: 480px) { .logo img.logo-img { max-height: 56px; height: clamp(2.25rem, 12vw, 3.5rem); } .container { padding: 0 max(1rem, env(safe-area-inset-left)) 0 max(1rem, env(safe-area-inset-right)); } .page-home .container { padding: 0 max(1rem, env(safe-area-inset-left)) 0 max(1rem, env(safe-area-inset-right)); } .page-home .hero h1 { font-size: clamp(1.4rem, 7.5vw, 2rem); line-height: 1.15; } .page-home .hero-sub { font-size: 0.8125rem; line-height: 1.55; } .hero { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } .hero-content { padding-left: 0.25rem; padding-right: 0.25rem; } .hero-scroll { display: none; } .page-home .trust-bar-inner { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 0.65rem; font-size: 0.62rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 0.2rem; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } .page-home .trust-bar-inner::-webkit-scrollbar { height: 3px; } .page-home .trust-bar-inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; } .trust-bar { padding: 0.85rem 0; } .trust-item { flex: 0 0 auto !important; white-space: nowrap; text-align: left; justify-content: flex-start; } .section-cta { gap: 0.65rem; } .section-cta .btn { min-height: 48px; } .gallery-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .animate-on-scroll { opacity: 1; transform: none; } } /* Service pages: stacked text + image pairs (SEO-rich layout) */ .service-deep { background: var(--color-white); padding-top: var(--space-xl); padding-bottom: var(--space-2xl); } .service-deep-intro { max-width: 900px; margin-bottom: var(--space-2xl); } .service-deep-intro h2 { font-family: var(--font-body); font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 600; color: var(--color-deep); line-height: 1.28; margin: 0 0 var(--space-md); } .service-deep-intro .lead { font-size: 1.125rem; color: var(--color-deep); font-weight: 500; line-height: 1.65; margin-bottom: var(--space-md); } .service-deep-intro p { color: var(--color-muted); line-height: 1.75; margin-bottom: var(--space-md); } .service-deep-intro p:last-child { margin-bottom: 0; } .service-stack { display: flex; flex-direction: column; gap: var(--space-2xl); } .service-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; padding-bottom: var(--space-2xl); border-bottom: 1px solid rgba(10, 44, 58, 0.08); } .service-pair:last-of-type { border-bottom: none; padding-bottom: 0; } .service-pair--reverse .service-pair__text { order: 2; } .service-pair--reverse .service-pair__media { order: 1; } .service-pair__text h3 { font-family: var(--font-body); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 600; color: var(--color-deep); margin: 0 0 var(--space-sm); } .service-pair__text p { color: var(--color-muted); line-height: 1.75; margin: 0 0 var(--space-md); } .service-pair__text p:last-child { margin-bottom: 0; } .service-pair__text ul { margin: var(--space-sm) 0 var(--space-md); padding-left: 1.15rem; color: var(--color-deep); } .service-pair__text li { margin-bottom: var(--space-xs); line-height: 1.6; } .service-pair__text li::marker { color: var(--color-teal); } .service-pair__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #e9f0ef; } .service-pair__media img { width: 100%; height: auto; min-height: 260px; object-fit: cover; display: block; } .service-deep-cta { text-align: center; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid rgba(10, 44, 58, 0.1); } .service-deep-cta p { color: var(--color-muted); max-width: 560px; margin: 0 auto var(--space-md); line-height: 1.65; } @media (max-width: 900px) { .service-pair { grid-template-columns: 1fr; gap: var(--space-lg); padding-bottom: var(--space-xl); } .service-pair--reverse .service-pair__text, .service-pair--reverse .service-pair__media { order: unset; } .service-pair__media { order: -1; } } .service-photo-gallery { background: var(--color-light); } .service-photo-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .service-photo-item { border-radius: var(--radius-lg); overflow: hidden; background: #e9f0ef; box-shadow: var(--shadow-sm); } .service-photo-item img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; } @media (max-width: 900px) { .service-photo-gallery-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .service-photo-gallery-grid { grid-template-columns: 1fr; } }