/* CSS Variables - EXACT from header.html and hero.html */ :root { --top-bar-height: 36px; /* Palette tokens */ --color-primary: #78e119; --color-secondary: #62676a; --color-accent: #d32534; --color-dark-base: #121212; --color-light-base: #f5f6f4; --color-highlight: #a8acaf; --text-on-light: #1c232b; --text-on-dark: #f5f1e8; --muted-on-dark: rgba(245, 241, 232, 0.7); --btn-primary-bg: var(--color-accent); --btn-primary-text: #ffffff; --btn-primary-hover: #b81524; /* Hero CTA Variables */ --btn-hero-bg: var(--color-highlight); --btn-hero-hover: var(--color-secondary); --btn-hero-text: var(--color-dark-base); --btn-secondary-bg: var(--color-light-base); --btn-secondary-text: var(--color-primary); --card-bg-dark: #0b1320; --card-bg-mid: #243b53; --card-bg-accent: #d9a441; --card-bg-light: #4f6d7a; --card-icon-bg: rgba(245, 241, 232, 0.08); --card-icon-line: #f5f1e8; /* Template variable mappings */ --ink-dark: var(--text-on-light); --graphite: var(--color-dark-base); --aluminium: var(--color-light-base); --mist: var(--color-light-base); --accent-red-500: var(--color-accent); --accent-red-600: #b81524; --accent-red-700: #9f101d; --blush-tint: var(--color-highlight); --white: #ffffff; /* Old Site Colors */ --old-site-bg-dark: var(--color-dark-base); --old-site-accent-cyan: var(--color-accent); --old-site-text-light: var(--color-light-base); /* Spacing scale */ --space-0: 0px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-7: 64px; --space-8: 80px; /* Global spacing */ --section-gap: var(--space-8); --section-pad-y: clamp(40px, 8vw, 120px); --section-pad-x: clamp(20px, 5vw, 50px); --content-gap: var(--space-4); --content-gap-tight: var(--space-2); /* Hero Spacing Variables - Responsive for desktop */ --hero-spacing-unit: calc((100vh - 160px) / 12); --hero-headline-to-subtitle: calc(var(--hero-spacing-unit) * 0.8); --hero-subtitle-to-logo: calc(var(--hero-spacing-unit) * 0.6); --hero-logo-to-button: calc(var(--hero-spacing-unit) * 0.6); --hero-button-bottom-spacing: 0px; /* Hero Vertical Position */ --hero-vertical-offset: 0px; /* Mobile Section Spacing */ --mobile-section-spacing: 40px; --mobile-fallback-btn-margin-top: 74px; --mobile-fallback-btn-margin-bottom: 5px; --booking-visual-mobile-top-space: 40px; /* Reviews Section Symmetrical Spacing */ --reviews-stack-gap: var(--content-gap); --reviews-top-spacing: var(--section-pad-y); --reviews-bottom-spacing: 10px; /* Adjustable spacing */ --why-choose-desktop-image-gap-top: 40px; --why-choose-desktop-image-gap-bottom: 0px; --reviews-widget-bottom-gap: 35px; --rating-summary-bottom-gap: 10px; --reviews-widget-bottom-gap-mobile: 5px; --rating-summary-bottom-gap-mobile: 5px; --services-stack-gap: var(--content-gap); --services-title-gap: calc(var(--services-stack-gap) + var(--space-1)); --services-bottom-gap: calc(var(--section-gap) + var(--space-1)); --faq-stack-gap: var(--content-gap); --faq-title-gap: var(--section-gap); --faq-item-gap: var(--space-3); --why-choose-text-gap: 14px; } /* Reset - EXACT from both files */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; color: var(--ink-dark); line-height: 1.6; overflow-x: hidden; background-color: var(--white); padding-top: 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) var(--old-site-bg-dark); } #main-content { display: flex; flex-direction: column; gap: var(--section-gap); padding-bottom: 0; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: var(--old-site-bg-dark); } body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 6px; } body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } /* Skip navigation for accessibility */ .skip-nav { position: absolute; left: -9999px; z-index: 999; padding: 8px; background: var(--white); color: var(--ink-dark); text-decoration: none; } .skip-nav:focus { left: 6px; top: 7px; } /* Top Contact Bar - Hidden on Desktop, Shown on Mobile */ .top-bar { background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-dark-base) 100%); color: var(--white); text-align: center; padding: 8px 0; font-size: 14px; font-weight: 500; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1001 !important; display: flex; align-items: center; justify-content: center; min-height: var(--top-bar-height); padding-left: 24px; padding-right: 24px; } .top-bar a { color: var(--white); text-decoration: none; font-weight: 700; letter-spacing: 0.1px; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; } .top-bar .scroll-text { display: inline-block; white-space: nowrap; overflow: hidden; width: 52ch; clip-path: inset(0 100% 0 0); animation: reveal 6s steps(52, end) infinite; } @keyframes reveal { 0% { clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); } 80% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } } /* Header Styles - Desktop with scroll behavior */ .header { background: transparent; backdrop-filter: none; border-bottom: none; position: fixed !important; top: var(--top-bar-height) !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s ease; padding: 0; } .header.scrolled { background: rgba(11, 14, 31, 0.82); backdrop-filter: blur(10px); border-bottom: none; } .header.hidden { transform: translateY(-100%); } .header-content { position: relative; height: auto; padding: 60px 0; display: flex; align-items: center; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .logo { position: absolute; left: 30px; top: 50%; transform: translateY(calc(-50% + 4px)); display: flex; align-items: center; } .logo a { display: flex; align-items: center; line-height: 0; } nav { position: absolute; left: 50%; transform: translateX(-50%); } .header-buttons { position: absolute; right: 12px; display: flex; align-items: center; gap: 6px; } .header.scrolled .header-content { padding: 40px 0; height: auto; } .logo img { display: block; height: 80px; width: auto; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); border-radius: 16px; } .header.scrolled .logo img { height: 55px; } .nav-menu { display: flex; list-style: none; gap: 18px; } .nav-menu a { text-decoration: none; color: var(--white); font-weight: 500; position: relative; transition: color 0.3s ease; } .nav-menu a:visited { color: var(--white); } .nav-menu a::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 0; height: 2px; background: var(--accent-red-600); transition: all 0.3s ease; transform: translateX(-50%); } .nav-menu a:hover { color: var(--accent-red-600); } .nav-menu a:hover::after { width: 100%; } /* Large desktop nav sizing */ @media (min-width: 1400px) { .nav-menu { gap: 24px; } .nav-menu a { font-size: 16px; letter-spacing: 0.1px; } } @media (min-width: 1680px) { .nav-menu { gap: 30px; } .nav-menu a { font-size: 17px; } } /* Services dropdown */ .nav-menu li { position: relative; } .services-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--white); border-radius: 8px; box-shadow: 0 8px 24px rgba(30, 30, 30, 0.15); padding: 15px 0; min-width: 220px; opacity: 0; visibility: hidden; transition: all 0.3s ease; margin-top: 10px; z-index: 1001; } .nav-menu li:hover .services-dropdown { opacity: 1; visibility: visible; margin-top: 5px; } .services-dropdown a { display: block; padding: 12px 20px; color: var(--ink-dark); text-decoration: none; font-size: 14px; font-weight: 400; transition: all 0.3s ease; border-left: 3px solid transparent; } .services-dropdown a:visited { color: var(--ink-dark); } .services-dropdown a::after { display: none; } .services-dropdown a:hover { background: var(--accent-red-600); color: var(--white); border-left-color: var(--accent-red-700); padding-left: 25px; } .header-buttons { display: flex; gap: 8px; } .header-cta-group { display: flex; align-items: center; gap: 6px; } .cta-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border: none; color: var(--white); background: transparent; box-shadow: none; height: 40px; min-width: 130px; } .cta-pill.call { border-radius: 50%; } .cta-pill.whatsapp { border-radius: 50%; } .cta-pill img { height: 30px; width: auto; display: block; } /* Mobile: Hide all CTA buttons */ @media (max-width: 767px) { .header-cta-group { display: none; } } /* Medium screens: Show call and WhatsApp, hide quote button */ @media (min-width: 768px) and (max-width: 1099px) { .header-cta-group .btn-primary { display: none !important; } } .header-buttons .btn-primary { border-radius: 28px; padding: 10px 20px; font-size: 14px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .btn { padding: 10px 20px; border: none; border-radius: 50px; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; text-align: center; white-space: nowrap; } .btn-primary { background: var(--accent-red-500); color: var(--btn-primary-text); position: relative; overflow: hidden; border: 2px solid var(--accent-red-500); transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(12, 15, 23, 0.08); transition: left 0.3s ease; z-index: -1; } .btn-primary:hover::before { left: 0; } .btn-primary:hover, .btn-primary:focus-visible { color: var(--btn-primary-text) !important; border-color: var(--accent-red-600); background: var(--accent-red-600); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(12, 15, 23, 0.25); position: relative; z-index: 1; } .hero .btn-primary { background: var(--btn-hero-bg); color: var(--btn-hero-text); border-color: var(--btn-hero-bg); font-weight: 600; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .hero .btn-primary::before { background: rgba(177, 13, 16, 0.12); } .hero .btn-primary:hover, .hero .btn-primary:focus-visible { background: var(--btn-hero-hover); color: #ffffff !important; border-color: var(--btn-hero-hover); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } /* Special rule for primary CTA button */ .header-buttons a[href="contact.html#contact"].btn-primary { background: var(--accent-red-500); color: var(--btn-primary-text); position: relative; overflow: hidden; z-index: 1; border: 2px solid var(--accent-red-500); transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .header-buttons a[href="contact.html#contact"].btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(12, 15, 23, 0.08); transition: left 0.3s ease; z-index: -1; } .header-buttons a[href="contact.html#contact"].btn-primary:hover::before { left: 0; } .header-buttons a[href="contact.html#contact"].btn-primary:hover { color: var(--btn-primary-text); border-color: var(--accent-red-600); background: var(--accent-red-600); box-shadow: 0 12px 28px rgba(12, 15, 23, 0.25); } /* Service Button - Bright Orange */ .btn-service { background: #FF6B35; /* Bright Sunset Orange */ color: var(--white); border: 2px solid #FF6B35; position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-service:hover, .btn-service:focus-visible { background: #FF5211; /* Darker/Vivid Orange on hover */ border-color: #FF5211; color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 107, 53, 0.3); } .btn-secondary { background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, 0.55); position: relative; overflow: hidden; } .btn-secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--old-site-text-light); transition: left 0.3s ease; z-index: -1; } .btn-secondary:hover::before { left: 0; } .btn-secondary:hover { color: var(--old-site-bg-dark) !important; border-color: var(--old-site-text-light); position: relative; z-index: 1; } /* WhatsApp button - desktop only */ .btn-whatsapp { background: transparent; color: var(--white); border: 2px solid rgba(37, 211, 102, 0.6); position: relative; overflow: hidden; } .btn-whatsapp::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #25D366; transition: left 0.3s ease; z-index: -1; } .btn-whatsapp:hover::before { left: 0; } .btn-whatsapp:hover { color: var(--white) !important; border-color: #25D366; position: relative; z-index: 1; } /* Button improvements */ .header-buttons .btn { font-size: 14px; transition: font-size 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Tablet / mid-size: hide nav at 1100 and show hamburger while keeping CTA buttons visible */@media (max-width: 1100px) { nav .nav-menu { display: none !important; } .mobile-menu-toggle { display: flex !important; left: 20px !important; right: auto !important; top: 50%; transform: translateY(-50%) !important; }}.header.scrolled .header-buttons .btn { padding: 10px 18px; font-size: 13px; } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; flex-direction: column; gap: 4px; cursor: pointer; z-index: 1001; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 36px; height: 28px; justify-content: center; align-items: center; } .mobile-menu-toggle span { width: 100%; height: 3px; background: var(--white); transition: all 0.3s ease; } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* Mobile Menu - KFORD Style Overlay */ .mobile-menu { position: fixed; top: calc(var(--top-bar-height) + 90px); left: 0; width: 100%; background: var(--white); box-shadow: 0 2px 10px rgba(30, 30, 30, 0.1); z-index: 1100; transform: translateY(-100%); overflow: hidden; visibility: hidden; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.4s ease; clip-path: inset(0 0 0 0); } .mobile-menu.active { transform: translateY(0); visibility: visible; } .mobile-menu-item { border-bottom: 1px solid rgba(30, 30, 30, 0.6); } .mobile-menu-item:last-child { border-bottom: none; } .mobile-menu-item.services-expanded { border-bottom: none; } .services-submenu { border-bottom: 1px solid rgba(30, 30, 30, 0.6); } .mobile-menu-link { display: block; padding: 15px 20px; color: var(--white); background: var(--ink-dark); text-decoration: none; font-size: 16px; font-weight: 500; transition: background-color 0.3s ease; } .mobile-menu-link:visited { color: var(--white); } .mobile-menu-link:hover, .mobile-menu-link.active { background: var(--accent-red-600); color: var(--white); } .mobile-menu-link.home-active { background: var(--accent-red-600); color: var(--white); } /* Services Submenu */ .services-submenu { background: var(--graphite); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-top: -1px; } .services-submenu.expanded { max-height: 250px; } .services-submenu a { display: block; padding: 12px 40px; color: var(--white); text-decoration: none; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .services-submenu a:visited { color: var(--white); } .services-submenu a:hover { background: rgba(255, 255, 255, 0.1); } .services-submenu a:last-child { border-bottom: none; } .services-arrow { float: right; } .services-arrow.rotated { transform: rotate(180deg); } /* HERO SECTION CSS - EXACT from hero.html */ .hero { --hero-gap: clamp(40px, 6vh, 60px); --hero-top-gap: clamp(200px, 18vh, 260px); --hero-bottom-gap: clamp(60px, 8vh, 100px); background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service-1/service-1-01.webp'); background-size: cover; background-position: center; background-attachment: fixed; min-height: clamp(720px, 96vh, 920px); display: flex; align-items: center; justify-content: center; padding: var(--hero-top-gap) 50px var(--hero-bottom-gap); margin-top: 0; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; background-size: 110%; background-position: center; animation: heroZoom 20s ease-in-out infinite alternate; z-index: -1; } @keyframes heroZoom { 0% { transform: scale(1) translateX(0); } 50% { transform: scale(1.05) translateX(-2%); } 100% { transform: scale(1) translateX(0); } } .hero-content { max-width: 80%; width: 100%; color: var(--white); text-align: center; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: clamp(500px, 72vh, 680px); gap: var(--hero-gap); padding: 0; } .hero h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; margin: 0; text-transform: none; color: var(--white); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.4); line-height: 1.2; letter-spacing: -0.02em; flex-shrink: 0; } .hero .hero-subtitle { font-size: clamp(14px, 1.8vw, 20px); font-weight: 700; margin: 0; background: none; color: var(--white); padding: 0; border-radius: 0; backdrop-filter: none; box-shadow: none; line-height: 1.4; max-width: clamp(450px, 50vw, 600px); flex-shrink: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .hero-service-links { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 18px); } .hero-service-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 1.8vw, 20px); padding: clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px); border-radius: 28px; text-decoration: none; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; text-align: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 16px 36px rgba(13, 27, 42, 0.12); transition: all 0.3s ease; width: clamp(170px, 16vw, 210px); height: clamp(200px, 22vw, 230px); color: var(--ink-dark); border: none; } .hero-service-link:hover, .hero-service-link:focus-visible { transform: translateY(-5px); background: rgba(255, 255, 255, 0.95); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } /* Hover states for icons and text */ .hero-service-link:hover .hero-service-icon, .hero-service-link:focus-visible .hero-service-icon { background: var(--color-primary); border-color: var(--color-primary); transform: scale(1.1); } .hero-service-link:hover .hero-service-icon img, .hero-service-link:focus-visible .hero-service-icon img { filter: brightness(0) invert(1); transform: scale(1.1); } .hero-service-link:hover .hero-service-text, .hero-service-link:focus-visible .hero-service-text { color: var(--color-primary); } .hero-service-icon { width: clamp(64px, 7vw, 90px); height: clamp(64px, 7vw, 90px); display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: all 0.3s ease; } .hero-service-link--aircon .hero-service-icon, .hero-service-link--bathrooms .hero-service-icon, .hero-service-link--roof-repairs .hero-service-icon { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .hero-service-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); transition: all 0.3s ease; } .hero-service-link--roof-repairs .hero-service-icon img { border-radius: 50%; } .hero-service-text { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.35; color: inherit; display: flex; flex-direction: column; gap: 2px; text-transform: uppercase; letter-spacing: 1px; text-align: center; transition: color 0.3s ease; } .hero-service-text span { display: block; } .hero-service-link--install { background: linear-gradient(155deg, #1f2b36 0%, #0b0f14 100%); color: var(--text-on-dark); } .hero-service-link--repairs { background: linear-gradient(155deg, #5b6a75 0%, #1f2b36 100%); color: var(--text-on-dark); } .hero-service-link--aircon { background: linear-gradient(155deg, #b10d10 0%, #1f2b36 100%); color: var(--text-on-dark); } /* Hover effect for cards 1-3: turn white */ .hero-service-link--install:hover, .hero-service-link--install:focus-visible, .hero-service-link--repairs:hover, .hero-service-link--repairs:focus-visible, .hero-service-link--aircon:hover, .hero-service-link--aircon:focus-visible { background: rgba(255, 255, 255, 0.95) !important; background-image: none !important; color: var(--color-primary); } .hero-service-link--install:hover .hero-service-icon, .hero-service-link--install:focus-visible .hero-service-icon, .hero-service-link--repairs:hover .hero-service-icon, .hero-service-link--repairs:focus-visible .hero-service-icon, .hero-service-link--aircon:hover .hero-service-icon, .hero-service-link--aircon:focus-visible .hero-service-icon { background: var(--color-primary); border-color: var(--color-primary); transform: scale(1.1); } .hero-service-link--bathrooms { background: linear-gradient(155deg, #d5dde4 0%, #f4f6f8 100%); color: var(--text-on-light); } .hero-service-link--bathrooms:hover, .hero-service-link--bathrooms:focus-visible { background: linear-gradient(155deg, #1f2b36 0%, #0b0f14 100%); color: var(--text-on-dark); } .hero-service-link--bathrooms:hover .hero-service-text, .hero-service-link--bathrooms:focus-visible .hero-service-text { color: #ffffff !important; } .hero-service-link--bathrooms:hover .hero-service-icon, .hero-service-link--bathrooms:focus-visible .hero-service-icon { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } .hero-service-link--roof-repairs { background: linear-gradient(155deg, #b10d10 0%, #5b6a75 100%); color: var(--text-on-dark); } .hero-service-link.active { box-shadow: 0 22px 48px rgba(13, 20, 26, 0.28), 0 0 0 2px rgba(177, 13, 16, 0.45); transform: translateY(-8px); } /* Desktop: force five cards on one row */ @media (min-width: 1270px) { .hero-service-links { flex-wrap: nowrap; } .hero-service-link { flex: 1 1 19%; max-width: 19%; min-width: 160px; } } @media (min-width: 1024px) and (max-width: 1269px) { .hero-service-links { flex-wrap: wrap; } .hero-service-link { flex: 1 1 30%; max-width: 30%; } } @media (min-width: 768px) and (max-width: 1023px) { .hero-service-links { flex-wrap: wrap; } .hero-service-link { flex: 1 1 30%; max-width: 30%; } } .hero .btn { margin-bottom: clamp(24px, 3.4vw, 40px); font-size: clamp(13px, 1.6vw, 16px); padding: clamp(12px, 1.5vw, 16px) clamp(38px, 4.4vw, 64px); min-width: clamp(320px, 32vw, 460px); flex-shrink: 0; } /* Responsive scaling for larger screens */ @media (min-width: 1920px) { :root { --hero-spacing-unit: calc((100vh - 280px) / 8); } .hero h1 { font-size: clamp(48px, 6vw, 80px); } .hero .hero-subtitle { font-size: clamp(18px, 2.5vw, 28px); max-width: clamp(500px, 55vw, 700px); } .hero-service-link { width: clamp(220px, 20vw, 260px); height: clamp(260px, 30vw, 300px); } .hero .btn { font-size: clamp(16px, 2.5vw, 22px); padding: clamp(14px, 2vw, 20px) clamp(28px, 4vw, 40px); } } /* Increase hero card spacing on very large screens without affecting laptop sizing */ @media (min-width: 1400px) { .hero-service-links { gap: clamp(18px, 1.6vw, 26px); } .hero-service-link { width: clamp(190px, 15vw, 235px); height: clamp(210px, 22vw, 260px); } } @media (min-width: 1680px) { .hero-service-links { gap: clamp(22px, 1.4vw, 30px); } .hero-service-link { width: clamp(200px, 13vw, 250px); height: clamp(230px, 20vw, 280px); } } /* Animations - EXACT from hero.html */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease-out; } /* Hero load animation for subtle page-change cue */ @keyframes heroFloatIn { 0% { opacity: 0; transform: translateY(22px) scale(0.985); } 55% { opacity: 1; transform: translateY(-4px) scale(1); } 100% { opacity: 1; transform: translateY(0); } } .hero .fade-in { opacity: 0; animation: heroFloatIn 1s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; will-change: transform, opacity; } .hero .hero-subtitle.fade-in { animation-delay: 0.14s; } .hero .hero-service-links.fade-in { animation-delay: 0.26s; } .hero .hero-service-link { opacity: 0; transform: translateY(18px) scale(0.99); animation: heroFloatIn 0.95s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; will-change: transform, opacity; } .hero .hero-service-link:nth-of-type(1) { animation-delay: 0.28s; } .hero .hero-service-link:nth-of-type(2) { animation-delay: 0.34s; } .hero .hero-service-link:nth-of-type(3) { animation-delay: 0.4s; } .hero .hero-service-link:nth-of-type(4) { animation-delay: 0.46s; } .hero .btn-primary { opacity: 0; transform: translateY(20px) scale(0.99); animation: heroFloatIn 1.05s cubic-bezier(0.2, 0.6, 0.3, 1) 0.6s forwards; will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { .hero .fade-in, .hero .hero-service-link, .hero .btn-primary { animation: none !important; opacity: 1; transform: none; filter: none; } } /* HOW WE WORK SECTION CSS - EXACT from how-we-work.html */ .divider { width: 60px; height: 3px; background: var(--old-site-bg-dark); margin: 15px 0 20px 0; border-radius: 2px; } .how-we-work { padding: var(--section-pad-y) var(--section-pad-x) 30px; background: var(--mist); } .how-we-work-container { max-width: 1200px; margin: 0 auto; } .work-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; } .work-step { text-align: center; background: var(--white); padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(30, 30, 30, 0.1); } .work-step-icon { width: 200px; height: 200px; border-radius: 50%; background: transparent; border: 2px solid var(--aluminium); display: flex; align-items: center; justify-content: center; margin: 30px auto 20px; font-size: 24px; color: var(--accent-red-600); } .work-step-icon img { width: 200px !important; height: 200px !important; object-fit: cover !important; background: transparent !important; border-radius: 50% !important; } .work-step h3 { font-size: 24px; margin-bottom: 15px; color: var(--ink-dark); } .work-step p { color: var(--graphite); line-height: 1.6; } /* Prevent mid-width overflow on How We Work */ @media (max-width: 1024px) and (min-width: 768px) { .how-we-work { padding: var(--section-pad-y) 24px 24px; } .how-we-work-container { max-width: 100%; } .work-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .work-step { padding: 24px; } .work-step-icon, .work-step-icon img { width: 160px !important; height: 160px !important; } } /* Desktop CTA Banner - Dark blue with barely visible light blue lines */ .desktop-cta-banner-container { text-align: center; margin: 0; background: var(--mist); } .desktop-cta-banner { display: none; /* Hidden on mobile by default */ background: var(--old-site-bg-dark); padding: 18px 20px; /* Reduced height padding */ margin: 0 auto; max-width: min(860px, calc(100vw - 40px)); /* Wider banner with responsive scaling */ width: 860px; /* Target width ~60px wider than 800px */ border-radius: 20px; border: 1px solid rgba(145, 222, 255, 0.15); box-shadow: 0 2px 15px rgba(21, 33, 38, 0.3), 0 0 0 1px rgba(145, 222, 255, 0.1); position: relative; overflow: hidden; } /* Barely visible light blue geometric patterns */ .desktop-cta-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, transparent 40%, rgba(145, 222, 255, 0.03) 41%, rgba(145, 222, 255, 0.03) 43%, transparent 44%), linear-gradient(-45deg, transparent 40%, rgba(145, 222, 255, 0.03) 41%, rgba(145, 222, 255, 0.03) 43%, transparent 44%), radial-gradient(circle at 20% 80%, rgba(145, 222, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(145, 222, 255, 0.05) 0%, transparent 50%); background-size: 60px 60px, 60px 60px, 200px 200px, 200px 200px; pointer-events: none; } /* Animated sweep effect with light blue */ .desktop-cta-banner::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(145, 222, 255, 0.05), transparent); animation: futuristicSweep 4s infinite; pointer-events: none; } @keyframes futuristicSweep { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .cta-banner-content { text-align: center; position: relative; z-index: 2; } .desktop-cta-banner h3 { color: var(--white); font-size: clamp(16px, 2.5vw, 22px); font-weight: 600; margin-bottom: 12px; /* Reduced for shorter height */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); line-height: 1.3; letter-spacing: 0.3px; } .cta-banner-btn { display: inline-block; background: var(--old-site-accent-cyan); color: var(--old-site-text-light); padding: 10px 24px; border-radius: 50px; font-size: 14px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: border-color 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden; } .cta-banner-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--old-site-text-light); transition: left 0.3s ease; z-index: -1; } .cta-banner-btn:hover::before { left: 0; } .cta-banner-btn:hover { color: var(--old-site-bg-dark); border-color: var(--old-site-text-light); } .cta-banner-btn:hover { color: var(--old-site-accent-cyan) !important; border-color: var(--white); position: relative; z-index: 1; } /* Show banner on desktop only, hide mobile fallback */ @media (min-width: 768px) { body { background: var(--white) !important; } .desktop-cta-banner { display: block; } .desktop-cta-banner-container { background: var(--white) !important; } .desktop-cta-banner-container .desktop-cta-banner, .desktop-cta-banner-container { box-shadow: none !important; } .why-choose-container { align-items: stretch; } .why-choose-image { padding-top: 0; padding-bottom: var(--why-choose-desktop-image-gap-bottom); margin-bottom: 0; height: 100%; display: flex; max-width: none; } .why-choose-image img { height: 100%; width: 100%; max-width: none; min-height: 100%; object-fit: cover; } .mobile-fallback-btn { display: none; } .why-choose { box-shadow: none !important; /* remove separator shadow on white background */ } .faq-section { background: var(--white) !important; } } /* Show mobile fallback on mobile, hide banner */ @media (max-width: 767px) { :root { --section-gap: var(--space-5); --faq-stack-gap: var(--content-gap-tight); --faq-title-gap: 80px; --faq-item-gap: var(--content-gap-tight); --services-stack-gap: var(--content-gap-tight); --services-title-gap: var(--services-stack-gap); --why-choose-mobile-top-padding: 80px; --why-choose-mobile-bottom-padding: 80px; } body { background: var(--white) !important; } .service-card { background: var(--white) !important; } .desktop-cta-banner-container { background: transparent !important; padding: 0 !important; } .desktop-cta-banner { display: none !important; } .mobile-fallback-btn { display: block; width: fit-content; margin: var(--mobile-fallback-btn-margin-top) auto var(--mobile-fallback-btn-margin-bottom); text-align: center; } /* Mobile Spacing Polish */ .rating-summary { margin-bottom: 40px !important; } .why-choose-container { padding: var(--why-choose-mobile-top-padding) 24px var(--why-choose-mobile-bottom-padding) !important; } .why-choose-content { padding: 0; /* Container has padding now */ text-align: center; gap: 24px; } .why-choose-heading { justify-content: center; } .why-choose-image { margin-top: 24px; } .faq-section .section-title { margin-bottom: 0 !important; } } /* Booking/Guarantees Section */ .booking-section { padding: var(--services-bottom-gap) var(--section-pad-x) var(--section-pad-y); margin-top: calc(-1 * var(--section-gap)); /* Cancel flex gap for equal visual spacing */ background: var(--old-site-bg-dark); color: var(--white); } .booking-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 4vw, 50px); align-items: start; } .booking-copy h3 { font-size: clamp(32px, 3vw, 44px); margin-bottom: 12px; line-height: 1.2; } .booking-copy p.lede { font-size: 18px; margin-bottom: 18px; color: var(--aluminium); } .booking-list { list-style: none; display: grid; gap: 12px; margin: 22px 0 24px 0; padding: 0; } .booking-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .booking-list li:last-child { border-bottom: none; } .booking-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(230, 126, 34, 0.16); color: var(--white); font-weight: 700; font-size: 16px; } .booking-list span { font-size: 16px; color: var(--white); line-height: 1.4; } .booking-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; width: 100%; } .booking-cta .btn { width: clamp(280px, 40vw, 420px); justify-content: center; padding: 16px 22px; font-size: 18px; border-radius: 14px; } .booking-ratings { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .rating-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); padding: 10px 14px; border-radius: 12px; font-size: 14px; color: var(--white); } .rating-pill .stars { color: #F4B400; letter-spacing: 1px; font-size: 15px; } .booking-visual { background: var(--color-light-base); border-radius: 18px; padding: clamp(16px, 2vw, 24px); box-shadow: 0 16px 40px rgba(11, 14, 31, 0.35); } .booking-visual img { width: 100%; height: auto; display: block; border-radius: 14px; } .rating-pill .brand-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } /* REVIEWS SECTION CSS - EXACT from reviews.html */ .reviews-section { /* padding: var(--reviews-top-spacing) 50px var(--reviews-bottom-spacing);*/ padding-top: 20px; padding-bottom: 0; margin-bottom: calc(-1 * var(--section-gap)); background: #ffffff; position: relative; overflow: hidden; } .reviews-section::before { display: none; } .reviews-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--reviews-stack-gap); } .facebook-reviews-header { text-align: center; max-width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0; } .rating-summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-bottom: var(--rating-summary-bottom-gap); } .rating-summary h2 { font-size: 40px; font-weight: 700; margin: 0; color: var(--ink-dark); text-shadow: none; line-height: 1.1; } .recommend-text { font-size: 20px; font-weight: 500; color: var(--graphite); margin: 0; text-shadow: none; line-height: 1.4; font-style: italic; } .review-count { margin: 0; } .google-logo { display: inline-flex; align-items: center; gap: 2px; font-size: 30px; font-weight: 700; font-family: 'Inter', sans-serif; letter-spacing: -0.5px; } .google-logo .g { color: #4285F4; } .google-logo .o1 { color: #EA4335; } .google-logo .o2 { color: #FBBC05; } .google-logo .g2 { color: #4285F4; } .google-logo .l { color: #34A853; } .google-logo .e { color: #EA4335; } @media (min-width: 992px) { .rating-summary h2, .rating-summary .recommend-text, .rating-summary .review-count { white-space: nowrap; } } .facebook-brand { font-size: 32px; font-weight: 700; color: #4267B2; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -0.5px; margin: 0; text-shadow: 0 2px 4px rgba(66, 103, 178, 0.2); line-height: 1.1; } .reviews-carousel-container { position: relative; margin-bottom: 0; } .reviews-grid { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding: 10px 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ touch-action: pan-x; /* Enable horizontal touch scrolling */ cursor: grab; } .reviews-grid::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .reviews-grid:active { cursor: grabbing; } .review-card { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(30, 30, 30, 0.1); position: relative; min-width: 280px; max-width: 280px; flex-shrink: 0; transition: all 0.3s ease; cursor: pointer; } .review-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(30, 30, 30, 0.15); z-index: 10; } .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-red-600); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; flex-shrink: 0; } .review-author { flex-grow: 1; } .review-name { font-weight: 600; font-size: 14px; color: var(--ink-dark); } .review-stars { color: var(--accent-red-600); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; font-size: 14px; } .verified-check { width: 14px; height: 14px; background: #4267B2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 9px; } .review-text { font-size: 14px; line-height: 1.5; color: var(--ink-dark); margin-bottom: 5px; } .facebook-icon { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--ink-dark); box-shadow: 0 2px 8px rgba(30, 30, 30, 0.15); transition: all 0.3s ease; z-index: 100; } .carousel-nav:hover { background: white; transform: translateY(-50%) scale(1.1); } .carousel-nav.prev { left: -20px; } .carousel-nav.next { right: -20px; } /* SERVICES SECTION CSS - EXACT from services-component.html */ .services-section { padding: var(--services-stack-gap) var(--section-pad-x) var(--services-bottom-gap); background: var(--white); } .services-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--services-title-gap); } .services-section .section-title { margin-bottom: 0; } .section-title { text-align: center; font-size: clamp(32px, 5vw, 56px); font-weight: 600; margin-bottom: 30px; color: var(--ink-dark); } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 0; max-width: 1200px; margin-left: auto; margin-right: auto; } .service-card.service-card--center { grid-column: 1 / -1; width: calc(50% - 20px); justify-self: center; } .service-card { display: flex; flex-direction: column; background: var(--white); border-radius: 15px; box-shadow: 0 10px 30px rgba(30, 30, 30, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card.tone-light { background: var(--aluminium); } .service-card.tone-secondary { background: rgba(91, 106, 117, 0.12); } .service-card.tone-accent { background: rgba(177, 13, 16, 0.12); } .service-card.tone-highlight { background: rgba(213, 221, 228, 0.55); } .service-card.tone-repairs { background: rgba(177, 13, 16, 0.08); } .service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30, 30, 30, 0.15); } .service-image { width: 100%; height: 250px; overflow: hidden; } .service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .service-card:hover .service-image img { transform: scale(1.05); } .service-content { padding: 30px; flex: 1; display: flex; flex-direction: column; } .service-content h3, .service-content h4 { font-size: 24px; font-weight: 600; margin-bottom: 15px; text-transform: capitalize; color: var(--ink-dark); } .service-content h3 a, .service-content h4 a { color: var(--ink-dark); text-decoration: none; transition: color 0.3s ease; } .service-content h3 a:hover, .service-content h4 a:hover { color: var(--accent-red-600); } .divider { width: 60px; height: 3px; background: var(--old-site-bg-dark); margin: 15px 0 20px 0; border-radius: 2px; } .service-content p { margin-bottom: 20px; color: var(--graphite); line-height: 1.6; font-size: 14px; } .service-content ul { list-style: none; margin-bottom: 25px; flex: 1; } .service-content ul li { padding: 8px 0; padding-left: 25px; position: relative; color: var(--graphite); font-size: 14px; line-height: 1.5; } .service-content ul li:before { content: "\2713"; position: absolute; left: 0; color: var(--old-site-bg-dark); font-weight: bold; font-size: 16px; } .service-content .btn { margin-top: auto; } /* WHY CHOOSE SECTION - redesigned */ .why-choose { padding: 0 var(--section-pad-x); background: var(--white); /* outer area white on mobile too */ color: var(--ink-dark); border-radius: 28px; box-shadow: none; max-width: 1260px; margin: 0 auto; overflow: hidden; } .why-choose-container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: start; background: var(--color-dark-base); border-radius: 24px; padding: var(--section-gap) 32px 96px; box-shadow: none; color: var(--text-on-dark); } .why-choose-heading { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 0; } .why-choose-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--text-on-dark); border-radius: 50%; box-shadow: 0 8px 18px rgba(177, 13, 16, 0.35); flex-shrink: 0; } .why-choose-content { text-align: left; display: flex; flex-direction: column; gap: var(--why-choose-text-gap); } .why-choose-image { text-align: center; } .why-choose h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 700; text-align: left; margin: 0; color: var(--text-on-dark); line-height: 1.15; } .why-choose p { margin-bottom: 0; font-size: 16px; line-height: 1.55; color: var(--muted-on-dark); } .why-choose-image { max-width: 460px; } .why-choose-image img { width: 100%; border-radius: 20px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); } /* FAQ SECTION CSS */ .faq-section { padding: 0 var(--section-pad-x) var(--section-pad-y); background: var(--white); } .faq-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--faq-title-gap); } .faq-body { display: flex; flex-direction: column; gap: var(--faq-stack-gap); } .faq-section .section-title { margin-bottom: 0; } /* Modern FAQ Cards */ .faq-item { margin-bottom: 0; border: none; border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 2px 8px rgba(30, 30, 30, 0.08); transition: all 0.3s ease; } .faq-item:hover { box-shadow: 0 4px 16px rgba(30, 30, 30, 0.12); transform: translateY(-1px); } .faq-question { padding: 24px; background: var(--white); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--ink-dark); font-size: 16px; border-left: 4px solid transparent; transition: all 0.3s ease; } .faq-question:hover { border-left-color: var(--accent-red-600); background: var(--blush-tint); } .faq-item.active .faq-question { border-left-color: var(--old-site-accent-cyan); background: var(--blush-tint); } .faq-arrow { transition: all 0.3s ease; color: var(--old-site-bg-dark); font-size: 18px; font-weight: bold; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(246, 179, 87, 0.1); } .faq-item.active .faq-arrow { transform: rotate(180deg); background: var(--old-site-accent-cyan); color: var(--white); } .faq-answer { padding: 0 24px; max-height: 0; overflow: hidden; transition: all 0.4s ease; background: var(--white); } .faq-item.active .faq-answer { padding: 0 24px 24px 24px; max-height: 500px; } .faq-answer p { color: var(--graphite); font-size: 15px; line-height: 1.6; margin: 0; padding-top: 16px; border-top: 1px solid var(--mist); } /* FAQ Filter Buttons */ .faq-filters { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; } .filter-btn { padding: 12px 24px; border-radius: 25px; border: 2px solid var(--aluminium); background: var(--white); color: var(--old-site-bg-dark); font-size: 14px; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; white-space: nowrap; font-family: 'Inter', sans-serif; z-index: 1; } .filter-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--old-site-accent-cyan); transition: left 0.3s ease; z-index: -1; } .filter-btn:hover::before { left: 0; } .filter-btn:hover { color: var(--old-site-bg-dark); border-color: var(--old-site-accent-cyan); z-index: 2; } /* Active state - highlighted like Get a Quote button */ .filter-btn.active { background: var(--old-site-bg-dark); color: var(--white); border-color: var(--old-site-bg-dark); } .filter-btn.active::before { background: var(--old-site-bg-dark); } /* FAQ Category Title - Modern Design */ .faq-category-title { margin: 0; text-align: center; } .faq-items { display: flex; flex-direction: column; gap: var(--faq-item-gap); } .faq-category-title h3 { font-size: 24px; font-weight: 700; color: var(--ink-dark); margin: 0; padding: 0; background: none; border: none; font-family: 'Inter', sans-serif; position: relative; } .faq-category-title h3::after { content: ''; display: block; width: 60px; height: 3px; background: var(--old-site-bg-dark); margin: 12px auto 0; border-radius: 2px; } /* Mobile Styles - Combined from both files */ @media (max-width: 767px) { :root { --reviews-top-spacing: var(--section-pad-y); --reviews-bottom-spacing: var(--section-pad-y); --reviews-stack-gap: var(--content-gap-tight); } body { padding-top: 0; margin: 0; padding-left: 0; padding-right: 0; overflow-x: hidden; max-width: 100vw; } .top-bar { display: flex; /* Show on mobile */ position: absolute !important; top: 0 !important; } .header { position: absolute !important; top: var(--top-bar-height) !important; height: 80px; } .header-buttons { display: flex !important; } .mobile-menu { position: absolute !important; top: calc(var(--top-bar-height) + 80px) !important; /* Align menu directly under header */ padding-top: 0; /* Remove extra padding */ } .header-content { padding: 0; height: 80px; display: block; position: relative; width: 100%; } .logo { position: absolute; left: 20px; top: 50%; transform: translateY(calc(-50% + 4px)); margin: 0; } .logo img { height: 50px !important; display: block; } .mobile-menu-toggle { position: absolute; left: 20px; right: auto; top: 50%; transform: translateY(-50%); } .nav-menu { display: none; } .btn-whatsapp { display: none !important; /* Hide WhatsApp button on mobile */ } .mobile-menu-toggle { display: flex; } /* Hero Mobile Styles */ .hero { --hero-gap: clamp(24px, 6vw, 32px); --hero-top-gap: clamp(80px, 20vh, 150px); --hero-bottom-gap: 80px; --hero-mobile-pill-height: clamp(62px, 18vw, 80px); padding: var(--hero-top-gap) 20px var(--hero-bottom-gap); margin-top: 0; text-align: center; background-attachment: scroll !important; background-position: center center; background-size: cover; min-height: auto !important; align-items: flex-start !important; } .hero-content { max-width: 100%; padding: 0; transform: translateY(0) !important; min-height: unset; gap: var(--hero-gap); } .hero h1 { font-size: clamp(32px, 9vw, 46px); margin-bottom: 0 !important; } .hero .hero-subtitle { font-size: clamp(16px, 4vw, 18px); margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; padding: 0 clamp(22px, 6vw, 30px); min-height: auto; display: block; text-align: center; } .hero-service-links { gap: clamp(16px, 4vw, 22px); flex-direction: column; align-items: stretch; } .hero-service-link { min-width: 100%; height: var(--hero-mobile-pill-height) !important; min-height: var(--hero-mobile-pill-height); max-height: var(--hero-mobile-pill-height); border-width: 2px; padding: 0 clamp(16px, 4.2vw, 22px); gap: clamp(6px, 2vw, 10px); justify-content: flex-start; align-items: center; flex-direction: row; border-radius: clamp(20px, 5.8vw, 28px); text-align: left; } .hero-service-link:nth-of-type(1), .hero-service-link:nth-of-type(2), .hero-service-link:nth-of-type(3) { width: 100% !important; height: var(--hero-mobile-pill-height) !important; } .hero-service-text { text-align: left; align-items: center; gap: 0.25em; flex-direction: row; white-space: nowrap; font-size: clamp(12px, 2.4vw, 13px); } .hero-service-text span { letter-spacing: 0.4px; display: inline-block; } .hero-service-icon { width: clamp(42px, 14vw, 62px); height: auto; flex-shrink: 0; } .hero-service-icon img { width: 100%; height: auto; } .hero-service-link--roof-repairs .hero-service-icon img { border-radius: 50%; } .btn { padding: 12px 24px; font-size: 16px; } .hero .btn { margin-bottom: var(--hero-button-bottom-spacing); padding: clamp(14px, 4vw, 18px) clamp(26px, 8vw, 36px); font-size: clamp(16px, 4.6vw, 18px); min-width: min(360px, 100%); } /* How We Work Mobile Styles - EXACT from how-we-work.html */ .how-we-work { padding: 60px 0; width: 100%; max-width: 100vw; overflow-x: hidden; margin: 0; } .section-title { font-size: clamp(36px, 10vw, 52px); text-align: center; margin-bottom: 30px; } .work-steps { grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0; } .work-step { width: 100%; margin: 0; padding: 20px; border-radius: 0; box-shadow: none; border: none; } .work-step::before, .work-step::after { display: none !important; } .work-step-icon { width: min(400px, calc(100vw - 40px)) !important; height: min(400px, calc(100vw - 40px)) !important; } .work-step-icon img { width: min(350px, calc(100vw - 90px)) !important; height: min(350px, calc(100vw - 90px)) !important; } /* Checkatrade Mobile Styles - EXACT from checkatrade.html */ .checkatrade-section { background-attachment: scroll !important; background-position: center center; background-size: cover; padding: var(--section-pad-y) 20px 60px; } .checkatrade-section h3 { font-size: clamp(24px, 6vw, 36px); margin-bottom: 25px; line-height: 1.3; } /* Services Mobile Styles - EXACT from services-component.html */ .services-section { /* padding: 60px 0 60px;*/ padding: var(--services-stack-gap) var(--section-pad-x) var(--section-pad-y); } .services-section h2, .section-title, .booking-copy h3 { font-size: clamp(36px, 10vw, 52px); text-align: center; margin-bottom: 30px; } .services-section .section-title, .services-section h2 { margin-bottom: 0 !important; } .booking-section { padding: 80px 20px 60px; } .booking-inner { grid-template-columns: 1fr; gap: 20px; } .booking-list { margin-top: 12px; } .booking-visual { padding-top: 14px; padding-bottom: 14px; margin-top: var(--booking-visual-mobile-top-space); } .booking-cta { width: 100%; } .booking-cta .btn { width: 100%; padding: 18px 22px; font-size: 18px; } .services-grid { grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0; } .service-card { width: 100%; margin: 0; padding: 20px; border-radius: 0; border: none !important; box-shadow: none; position: relative; } .service-card.service-card--center { width: 100%; } .service-card::before, .service-card::after { display: none !important; } .service-image { border-radius: 10px; overflow: hidden; } .service-image img { border-radius: 10px; } .service-card:last-child { padding-bottom: 0px; } /* How We Work Mobile Styles - EXACT from how-we-work.html */ .how-we-work { padding: 90px 0 30px; } .section-title { font-size: clamp(36px, 10vw, 52px); text-align: center; margin-bottom: 30px; } .work-steps { grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0; } .work-step { width: 100%; margin: 0; padding: 20px; border-radius: 0; box-shadow: none; border: none; background: var(--mist) !important; } .work-step::before, .work-step::after { display: none !important; } .work-step-icon { width: min(400px, calc(100vw - 40px)) !important; height: min(400px, calc(100vw - 40px)) !important; margin: -5px auto 10px !important; } .work-step-icon img { width: min(350px, calc(100vw - 90px)) !important; height: min(350px, calc(100vw - 90px)) !important; } /* Mobile spacing adjustments - aggressive reduction to move images up */ .work-step:first-child .work-step-icon { margin-top: -15px !important; /* First image moved up most aggressively */ } .work-step h3 { margin: 10px 0 8px !important; } .work-step p { margin: 0 0 -5px !important; /* Negative margin to pull next image up */ } /* Why Choose Mobile Styles - redesigned */ .why-choose { padding: 0; margin: 0 var(--section-pad-x); width: auto; position: relative; left: auto; right: auto; transform: none; border-radius: 22px; overflow: hidden; } .why-choose h2 { font-size: clamp(26px, 7vw, 34px); font-weight: 700; text-align: left; margin-bottom: 10px; line-height: 1.1; } .why-choose-container { grid-template-columns: 1fr; gap: 22px; text-align: left; max-width: none; margin: 0; padding: 0; width: 100%; box-sizing: border-box; } .why-choose-content { text-align: left; } .why-choose-image { width: 100%; max-width: none; margin: 0 auto; } .why-choose-image img { max-width: 460px; width: 100%; display: block; } /* FAQ Mobile Styles */ .faq-section { padding: 0 var(--section-pad-x) var(--section-pad-y); margin-top: 40px; } .faq-section h2, .section-title { font-size: clamp(32px, 8vw, 48px); text-align: center; margin-bottom: 15px; line-height: 1.2; } .faq-section .section-title { margin-bottom: 0; } .faq-container { padding: 0; max-width: none; margin: 0; } /* Modern mobile FAQ styling */ .faq-item { border-radius: 12px; } .faq-question { padding: 20px; font-size: 15px; } .faq-answer { padding: 0 20px; } .faq-item.active .faq-answer { padding: 0 20px 20px 20px; } .faq-answer p { font-size: 14px; padding-top: 12px; } /* Mobile filter buttons */ .faq-filters { gap: 10px; padding: 0 10px; } .filter-btn { padding: 10px 18px; font-size: 13px; border-radius: 20px; } /* Mobile category title */ .faq-category-title { margin: 0; } .faq-category-title h3 { font-size: 20px; } .faq-category-title h3::after { width: 50px; height: 2px; margin: 10px auto 0; } /* Reviews Mobile Styles - EXACT from reviews.html */ .reviews-section { padding: 40px 20px 0; } .reviews-container { gap: 0 !important; } .rating-summary { margin-bottom: 0 !important; gap: 0 !important; padding: 0 !important; } .facebook-reviews-header { margin: 0 !important; padding: 0 !important; } .review-count { margin: 0 !important; } .facebook-reviews-header { margin-bottom: 0; } .reviews-carousel-container { margin-bottom: 0; } .reviews-grid { scroll-snap-type: x mandatory; gap: 15px; padding: 10px 20px; } .review-card { scroll-snap-align: center; min-width: calc(100vw - 80px); max-width: calc(100vw - 80px); flex-shrink: 0; margin-right: 15px; } .carousel-nav { width: 35px; height: 35px; font-size: 16px; } .carousel-nav.prev { left: -15px; } .carousel-nav.next { right: -15px; } } /* Services Mobile Styles for smaller screens - EXACT from services-component.html */ @media (max-width: 480px) { .service-image { height: 320px; } } /* Footer - EXACT from footer.html */ .footer { background: var(--old-site-bg-dark); color: var(--white); padding: var(--section-pad-y) 0 30px; } .footer-content { max-width: 900px; margin: 0 auto; padding: 0 50px; } .footer-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; align-items: flex-start; justify-items: center; margin-bottom: 40px; max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; } .footer-section { width: 100%; max-width: 260px; } .footer-section h2, .footer-section h3 { font-size: 18px; margin-bottom: 8px; color: var(--old-site-accent-cyan); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .footer-section p { margin-bottom: 0; line-height: 1.6; color: var(--aluminium); } .footer-section a { color: var(--old-site-accent-cyan); text-decoration: none; transition: color 0.3s ease; } .footer-section a:hover { color: var(--white); } .contact-item { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--aluminium); } .contact-item:last-child { margin-bottom: 0; } .contact-item svg { width: 18px; height: 18px; margin-right: 12px; fill: var(--accent-red-500); stroke: none; flex-shrink: 0; } .contact-item a { color: var(--aluminium); white-space: nowrap; /* keep phone/email on a single line */ } .contact-item a:hover { color: var(--accent-red-500); } .social-links { display: flex; gap: 15px; margin-top: 8px; justify-content: center; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(230, 126, 34, 0.1); border-radius: 50%; transition: all 0.3s ease; } .social-link:hover { background: var(--accent-red-500); transform: translateY(-2px); } .social-link svg { width: 18px; height: 18px; fill: var(--white); } .social-link:hover svg { fill: var(--white); } .footer-map { width: 100%; max-width: 1100px; margin: 40px auto 20px auto; } .map-container { width: 100%; height: 350px; } .map-container iframe { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); border: 0; } .footer-bottom { text-align: center; padding: 30px 50px 20px; margin-top: 40px; color: var(--aluminium); } .footer-bottom p { margin-bottom: 15px; font-size: 14px; } .footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 15px; flex-wrap: wrap; } .footer-links a { color: var(--aluminium); text-decoration: none; transition: color 0.3s ease; font-size: 14px; } .footer-links a:hover { color: var(--old-site-accent-cyan); } .powered-by { margin-top: 15px; } .powered-by a { color: var(--old-site-accent-cyan); text-decoration: none; font-weight: 600; } /* WhatsApp Button Styles */ .whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: white !important; padding: 12px 24px; border-radius: 25px; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.3s ease; margin-top: 3px; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3); vertical-align: top; } .whatsapp-button:hover { background: #20BA5A; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); color: white !important; } .whatsapp-button:visited { color: white !important; } .whatsapp-button svg { width: 18px; height: 18px; fill: white; } /* Desktop alignment fix for WhatsApp button */ @media (min-width: 768px) { .whatsapp-button { margin-top: 1px; align-self: flex-start; } } /* Footer Mobile Styles - EXACT from footer.html */ @media (max-width: 767px) { .footer-content { padding: 0; width: 100%; display: flex; flex-direction: column; align-items: center; } .footer-top { display: flex; flex-direction: column; gap: 40px; margin-bottom: 30px; text-align: center; max-width: none; width: 100%; align-items: center; justify-content: center; } .footer-section { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-section h2, .footer-section h3 { text-align: center; margin-bottom: 8px; } .contact-item { display: inline-flex; justify-content: center; align-items: center; margin-bottom: 8px; text-align: center; width: 100%; } .map-container { height: 250px; margin: 0 20px; width: calc(100% - 40px); } .social-links { justify-content: center; margin-top: 8px; display: flex; align-items: center; } .whatsapp-button { display: flex; align-items: center; justify-content: center; margin: 0 auto; text-align: center; } .whatsapp-button { margin-top: 3px; } .footer-links { flex-direction: column; gap: 15px; text-align: center; } .footer-bottom { padding: 20px; text-align: center; } }/* ===== FYLDE OVERRIDES ===== */:root { --color-primary: #78e119; --color-secondary: #62676a; --color-accent: #d32534; --color-dark-base: #121212; --color-light-base: #f5f6f4; --color-highlight: #a8acaf; --btn-primary-hover: #b81524; --btn-hero-bg: var(--color-accent); --btn-hero-hover: #D97B1F; --btn-hero-text: #ffffff;}.hero h1 { white-space: nowrap;}.hero .hero-subtitle { max-width: clamp(520px, 55vw, 760px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}@media (max-width: 1023px) { .hero h1 { white-space: normal; }}.hero-service-link--aircon .hero-service-icon,.hero-service-link--bathrooms .hero-service-icon,.hero-service-link--roof-repairs .hero-service-icon,.hero-service-link--gas .hero-service-icon,.hero-service-link--plumbing .hero-service-icon { background: rgba(15, 34, 51, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);}.hero-service-link--install { background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%); color: var(--text-on-dark);}.hero-service-link--repairs { background: linear-gradient(155deg, var(--color-secondary) 0%, var(--color-primary) 100%); color: var(--text-on-dark);}.hero-service-link--aircon { background: linear-gradient(155deg, #F28C28 0%, #D97B1F 100%); color: var(--text-on-dark);}.hero-service-link--bathrooms { background: linear-gradient(155deg, #E0EDF7 0%, var(--color-light-base) 100%); color: var(--text-on-light);}.hero-service-link--roof-repairs { background: linear-gradient(155deg, var(--color-highlight) 0%, var(--color-primary) 100%); color: var(--text-on-dark);}.hero-service-link--gas { background: linear-gradient(155deg, var(--color-dark-base) 0%, #D97B1F 100%); color: var(--text-on-dark);}.hero-service-link--plumbing { background: linear-gradient(155deg, var(--color-secondary) 0%, var(--color-highlight) 100%); color: #ffffff;}.hero-service-link.active { box-shadow: 0 22px 48px rgba(15, 34, 51, 0.28), 0 0 0 2px rgba(31, 78, 121, 0.45); transform: translateY(-8px);}@media (min-width: 1270px) { .hero-service-links { flex-wrap: wrap; max-width: 980px; margin-left: auto; margin-right: auto; } .hero-service-link { flex: 0 1 23%; max-width: 220px; min-width: 180px; }}.desktop-cta-banner-container { background: var(--white) !important;}.desktop-cta-banner { background: var(--old-site-bg-dark) !important; border: 1px solid rgba(145, 222, 255, 0.15); box-shadow: 0 8px 26px rgba(15, 34, 51, 0.26);}.desktop-cta-banner::before,.desktop-cta-banner::after { content: none !important;}.desktop-cta-banner h3 { color: var(--white) !important; text-shadow: none !important;}.cta-banner-btn { background: var(--color-accent) !important; color: #ffffff !important;}.cta-banner-btn:hover { background: var(--btn-primary-hover) !important; color: #ffffff !important;}.hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/general/2026-02-12.webp') !important; background-size: cover !important; background-position: center !important;}/* Service-specific hero photography */body[data-service='boiler-installations'] .hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/website-photo.jpg') !important;}body[data-service="boiler-servicing"] .hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/service1/servicing-filter-red.webp') !important;}body[data-service="boiler-repairs"] .hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/service2/repair-boiler-unit.webp') !important;}body[data-service='central-heating'] .hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/general/website-photo.jpg') !important;}body[data-service='bathrooms'] .hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/general/2026-02-12.webp') !important;}body[data-service='gas-services'] .hero { background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/general/website-photo.jpg') !important;}/* ===== SERVICE DETAIL LAYOUT FIXES ===== */.about-service-description { padding: var(--service-content-gap, 80px) var(--section-pad-x); background: var(--white);}.about-service-description .section-title { font-size: clamp(26px, 3vw, 38px); margin-bottom: 24px; line-height: 1.2; text-align: center;}.about-service-description-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: stretch;}.about-service-content { display: flex; flex-direction: column; gap: 18px; color: var(--graphite); font-size: 18px; line-height: 1.7;}.about-service-content p { margin: 0;}.mobile-why-choose-title { display: none;}.about-service-specs { display: flex; align-items: stretch; justify-content: center;}.about-specs-container { width: 100%; border-radius: 20px; padding: 32px; background: linear-gradient(140deg, rgba(217, 164, 65, 0.14) 0%, rgba(138, 210, 243, 0.18) 45%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 18px 36px rgba(13, 27, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); border: 1px solid rgba(79, 109, 122, 0.25);}.about-specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch;}.about-specs-side { background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(138, 210, 243, 0.18) 100%); border-radius: 16px; border: 1px solid rgba(79, 109, 122, 0.18); padding: 28px 24px; text-align: center; box-shadow: 0 12px 28px rgba(13, 27, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); position: relative; display: grid; grid-template-rows: auto 1fr; row-gap: 32px; height: 100%;}.about-specs-side::before { content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);}.about-specs-highlight { background: linear-gradient(150deg, rgba(36, 59, 83, 0.16) 0%, rgba(36, 59, 83, 0.05) 100%);}.about-specs-highlight .about-specs-main-value { color: var(--color-primary);}.about-specs-main-item { min-height: 130px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; padding-top: 6px;}.about-specs-main-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--graphite); margin-bottom: 10px;}.about-specs-secondary-label { font-size: 13px; font-weight: 600; color: rgba(30, 30, 30, 0.7); letter-spacing: 0.6px; text-transform: uppercase;}.about-specs-main-value { font-size: 26px; font-weight: 700; color: var(--accent-red-600); line-height: 1.3;}.about-specs-secondary { display: grid; grid-template-rows: repeat(2, 1fr); row-gap: 30px; align-items: stretch;}.about-specs-secondary-item { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-height: 90px; text-align: center;}.about-specs-secondary-value { font-size: 16px; font-weight: 600; color: var(--ink-dark);}.gallery-section { padding: var(--service-content-gap, 80px) 50px; background: #f7f0e0;}.gallery-container { max-width: 1200px; margin: 0 auto;}.gallery-section .section-title { font-size: clamp(26px, 3vw, 38px); margin-bottom: 24px; line-height: 1.2; text-align: center;}.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;}.gallery-item { border-radius: 14px; overflow: hidden; box-shadow: 0 12px 26px rgba(13, 27, 42, 0.12); background: var(--white);}.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block;}.contact-main-section { padding: var(--service-content-gap, 80px) var(--section-pad-x) 0; background: var(--white);}.contact-main-container { max-width: 1200px; margin: 0 auto;}.contact-main-container .section-title { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; line-height: 1.2; text-align: center;}.contact-intro { max-width: 840px; margin: 0 auto 28px; text-align: center; color: var(--ink-dark);}.contact-main-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--content-gap); margin-bottom: var(--service-content-gap, 80px);}.contact-main-card { background: var(--old-site-bg-dark); border-radius: 18px; padding: 28px 24px; box-shadow: 0 18px 36px rgba(11, 14, 31, 0.24); display: flex; flex-direction: column; gap: 12px; text-align: center;}.contact-main-card h3 { margin: 0; font-size: 24px; color: var(--white);}.contact-main-card p { margin: 0; color: var(--aluminium); line-height: 1.5;}.contact-main-card .contact-main-meta { font-size: 14px; opacity: 0.9;}.contact-main-card .btn { align-self: center;}.contact-main-map { text-align: center;}.contact-main-map h3 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 8px; color: var(--ink-dark);}.contact-main-map p { margin-bottom: 20px; color: var(--ink-dark);}.map-container-main { width: 100%; height: 420px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 42px rgba(11, 14, 31, 0.22);}.map-container-main iframe { width: 100%; height: 100%; border: 0;}@media (max-width: 767px) { .contact-main-grid { margin-bottom: 48px; } .map-container-main { height: 340px; }}/* ===== SERVICE PAGE - UNIFORM SECTION SPACING ===== *//* One fixed value for ALL vertical gaps - consistency over responsiveness */body[data-service] { --service-content-gap: 80px;}body[data-service] #main-content { gap: 0;}body[data-service] .hero { align-items: flex-end; padding-bottom: var(--service-content-gap);}body[data-service] .hero-content { min-height: 0; justify-content: flex-end;}body[data-service] .hero .btn { margin-bottom: 0;}body[data-service] .reviews-section { margin-bottom: 0; padding-top: var(--service-content-gap); padding-bottom: var(--service-content-gap);}body[data-service] .faq-section { margin-top: 0; padding-top: 0; padding-bottom: var(--service-content-gap);}body[data-service] .footer { padding-top: var(--service-content-gap);}/* ===== HOME PAGE SPACING ===== *//* Same 80px fixed gaps - following the color-change rule *//* Remove flex gap between Google logo and iframe in reviews */body[data-service] .reviews-container { gap: 0;}/* Reviews -> Services is same color (white->white): merge to one 80px */body:is([data-service="home"], [data-service="services"]) .reviews-section { padding-bottom: 0;}/* Services: 80px top (provides the merged gap from reviews) + 80px bottom (symmetrical) */body:is([data-service="home"], [data-service="services"]) .services-section { padding-top: var(--service-content-gap); padding-bottom: var(--service-content-gap);}/* Gap between "Our Services" title and the cards grid = 80px */body:is([data-service="home"], [data-service="services"]) .services-container { gap: var(--service-content-gap);}/* Booking: color change from services. Remove negative margin, set 80px top+bottom */body:is([data-service="home"], [data-service="services"]) .booking-section { margin-top: 0; padding-top: var(--service-content-gap); padding-bottom: var(--service-content-gap);}/* CTA banner container: 80px top, 0 bottom (same color as why-choose below - merge) */body:is([data-service="home"], [data-service="services"]) .desktop-cta-banner-container { padding-top: var(--service-content-gap); padding-bottom: 0;}/* Why Choose: 80px top, 0 bottom (same color as FAQ below - merge) */body:is([data-service="home"], [data-service="services"]) .why-choose { padding-top: var(--service-content-gap); padding-bottom: 0;}/* FAQ: 80px top+bottom (color changes on both sides) */body:is([data-service="home"], [data-service="services"]) .faq-section { padding-top: var(--service-content-gap); padding-bottom: var(--service-content-gap);}/* Footer: 80px top padding */body:is([data-service="home"], [data-service="services"]) .footer { padding-top: var(--service-content-gap);}/* Active service highlight requested by user */.hero-service-link.active { border: 2px solid #ff2b2b !important; box-shadow: 0 0 0 2px rgba(255, 43, 43, 0.35), 0 0 24px rgba(255, 43, 43, 0.45), 0 18px 36px rgba(15, 34, 51, 0.22) !important; transform: translateY(-8px);}@media (max-width: 1100px) { .about-service-description-container { grid-template-columns: 1fr; gap: 32px; } .about-specs-grid { grid-template-columns: 1fr; gap: 18px; } .mobile-why-choose-title { display: block; margin: 0; font-size: 22px; color: var(--color-primary); }}@media (max-width: 640px) { .about-service-content { font-size: 17px; line-height: 1.6; } .about-specs-main-value { font-size: 22px; } .gallery-section { padding: var(--service-content-gap, 80px) 20px; } .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }}body[data-service='faq'] .faq-section { padding-top: var(--service-content-gap); padding-bottom: var(--service-content-gap);}body[data-service='faq'] .reviews-section { padding-top: 0;}/* ===== UTILITY PAGES (NO HERO) ===== */.utility-main { padding: calc(var(--service-content-gap, 80px) + 120px) var(--section-pad-x) var(--service-content-gap); background: linear-gradient(180deg, #2f343a 0%, #e2e5e9 100%);}.utility-container { max-width: 1100px; margin: 0 auto;}.utility-container--narrow { max-width: 780px;}.utility-card { background: var(--white); border-radius: 18px; padding: clamp(24px, 3vw, 42px); box-shadow: 0 18px 38px rgba(11, 14, 31, 0.12);}.utility-card--center { text-align: center;}.utility-card--notfound { border: 1px solid rgba(36, 59, 83, 0.12);}.utility-title { margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; color: var(--ink-dark);}.utility-subtitle { margin: 0 0 28px; color: rgba(28, 35, 43, 0.82); font-size: clamp(17px, 2.1vw, 21px);}.utility-content { display: grid; gap: 18px; color: var(--ink-dark);}.utility-content h2 { margin: 8px 0 0; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.25;}.utility-content p { margin: 0;}.utility-content ul { margin: 0; padding-left: 22px; display: grid; gap: 8px;}.utility-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px;}.utility-actions { margin-top: 12px;}@media (max-width: 767px) { .utility-main { padding: calc(var(--service-content-gap, 80px) + 96px) 20px var(--service-content-gap); } .utility-subtitle { margin-bottom: 22px; } .utility-content { gap: 14px; }}
/* Mobile header alignment override: keep logo + menu toggle on right */
@media (max-width: 1100px) {
.header-content .logo {
left: 20px !important;
right: auto !important;
top: 50% !important;
transform: translateY(calc(-50% + 4px)) !important;
}
.header-content .mobile-menu-toggle {
left: auto !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
}
@media (max-width: 767px) {
.header-content .logo {
left: 20px !important;
right: auto !important;
top: 50% !important;
transform: translateY(calc(-50% + 4px)) !important;
}
.header-content .mobile-menu-toggle {
left: auto !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
}
/* Mobile reliability fixes: show full services list + keep hero copy to max 2 lines */
@media (max-width: 1100px) {
.mobile-menu {
max-height: calc(100vh - var(--top-bar-height) - 80px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.services-submenu.expanded {
max-height: 1000px !important;
}
}
@media (max-width: 767px) {
.hero h1 {
font-size: clamp(26px, 7.2vw, 34px) !important;
line-height: 1.15 !important;
max-width: 15ch;
margin-left: auto;
margin-right: auto;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-wrap: balance;
}
.hero .hero-subtitle {
font-size: clamp(14px, 3.8vw, 16px) !important;
line-height: 1.35 !important;
max-width: 32ch;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px !important;
padding-right: 16px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Hero copy: no truncation dots; render full text cleanly */
.hero h1,
.hero .hero-subtitle {
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
overflow: visible !important;
text-overflow: clip !important;
}
@media (max-width: 767px) {
.hero h1 {
display: block !important;
max-width: none !important;
}
.hero .hero-subtitle {
display: block !important;
max-width: 34ch !important;
}
}
/* Top CTA: separate desktop and mobile copy */
.top-bar .scroll-text-mobile {
display: none;
}
@media (max-width: 767px) {
.top-bar .scroll-text-desktop {
display: none;
}
.top-bar .scroll-text-mobile {
display: inline-block;
width: auto;
clip-path: none;
animation: none;
}
}
/* ===== Home Hero Reference Rebuild ===== */
body[data-service="home"] .header.hero-reference-header {
top: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 14px 22px 0;
background: transparent !important;
backdrop-filter: none !important;
border: 0 !important;
}
body[data-service="home"] .header.hero-reference-header.scrolled {
background: transparent !important;
backdrop-filter: none !important;
border: 0 !important;
}
body[data-service="home"] .header.hero-reference-header.hidden {
transform: translateY(0) !important;
}
body[data-service="home"] .hero-reference-header-content {
position: static;
max-width: 1480px;
margin: 0 auto;
min-height: 56px;
border-radius: 8px;
padding: 0 20px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
background: linear-gradient(90deg, #7db71f 0%, #9acd32 100%);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
body[data-service="home"] .hero-reference-left {
display: flex;
align-items: center;
gap: 18px;
}
body[data-service="home"] .hero-reference-header-content .logo {
position: static;
transform: none;
display: flex;
align-items: center;
}
body[data-service="home"] .hero-reference-header-content .logo a {
display: flex;
align-items: center;
}
body[data-service="home"] .hero-reference-header-content .logo img {
width: auto;
height: 52px;
max-height: 52px;
border-radius: 0;
}
body[data-service="home"] .hero-inline-phone {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ffffff;
text-decoration: none;
font-size: 22px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: opacity 0.2s ease;
}
body[data-service="home"] .hero-inline-phone:hover {
opacity: 0.85;
}
body[data-service="home"] .hero-inline-phone-icon {
width: 15px;
height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
}
body[data-service="home"] .hero-inline-phone-icon svg {
width: 100%;
height: 100%;
fill: #ffffff;
}
body[data-service="home"] .header.hero-reference-header nav {
position: static;
transform: none;
justify-self: center;
}
body[data-service="home"] .hero-reference-header-content .nav-menu {
gap: 0;
align-items: center;
}
body[data-service="home"] .hero-reference-header-content .nav-menu li {
padding: 0 18px;
border-left: 1px solid rgba(255, 255, 255, 0.28);
}
body[data-service="home"] .hero-reference-header-content .nav-menu li:first-child {
border-left: 0;
}
body[data-service="home"] .hero-reference-header-content .nav-menu a {
color: #f8f8f8;
font-size: 15px;
font-weight: 600;
}
body[data-service="home"] .hero-reference-header-content .nav-menu a::after {
background: #ffffff;
}
body[data-service="home"] .hero-reference-header-content .nav-menu a.active::after {
width: 100%;
}
body[data-service="home"] .header.hero-reference-header .header-buttons {
position: static;
right: auto;
}
body[data-service="home"] .header.hero-reference-header .header-cta-group {
display: flex;
align-items: center;
gap: 10px;
}
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 22px;
border-radius: 9px;
border: 0;
background: linear-gradient(180deg, #c8222f 0%, #ad1521 100%);
color: #ffffff;
font-size: 14px;
font-weight: 700;
box-shadow: 0 10px 20px rgba(82, 11, 17, 0.24);
}
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-whatsapp {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 22px;
border-radius: 9px;
border: 0;
background: linear-gradient(180deg, #25d366 0%, #1da851 100%);
color: #ffffff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 20px rgba(13, 82, 40, 0.24);
transition: opacity 0.2s ease;
}
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-whatsapp:hover {
opacity: 0.9;
}
body[data-service="home"] .hero-whatsapp-pill {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(8, 9, 10, 0.32);
border: 1px solid rgba(255, 255, 255, 0.35);
text-decoration: none;
}
body[data-service="home"] .hero-whatsapp-pill img {
width: 22px;
height: 22px;
object-fit: contain;
}
body[data-service="home"] .home-hero-reference {
min-height: 100vh;
padding: 90px 0 28px !important;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
radial-gradient(circle at 14% 34%, rgba(12, 15, 22, 0.72) 0%, rgba(12, 15, 22, 0.02) 44%),
linear-gradient(112deg, rgba(8, 9, 12, 0.78) 0%, rgba(8, 9, 12, 0.45) 50%, rgba(8, 9, 12, 0.55) 100%),
url('../pictures/general/2026-02-12.webp') center 40% / cover no-repeat !important;
}
body[data-service="home"] .home-hero-content {
width: min(1480px, calc(100% - 64px));
margin: 0 auto;
max-width: 1480px;
align-items: flex-start;
text-align: left;
min-height: auto;
justify-content: flex-start;
flex: 0 0 auto;
}
body[data-service="home"] .home-hero-content h1 {
margin: 0;
font-size: clamp(36px, 3.5vw, 50px);
line-height: 1.08;
color: #ffffff;
text-shadow: 0 5px 24px rgba(0, 0, 0, 0.7);
}
body[data-service="home"] .home-hero-content .hero-subtitle {
margin-top: 10px;
max-width: 520px;
font-size: clamp(16px, 1.3vw, 20px);
line-height: 1.35;
color: rgba(245, 246, 244, 0.95);
}
body[data-service="home"] .hero-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
}
body[data-service="home"] .hero-actions .btn {
min-height: 40px;
border-radius: 9px;
font-size: 14px;
font-weight: 700;
padding: 9px 22px;
}
body[data-service="home"] .hero-actions .btn-call-now {
border: 1px solid rgba(255, 255, 255, 0.18);
background: linear-gradient(160deg, rgba(79, 84, 94, 0.95) 0%, rgba(41, 44, 52, 0.95) 100%);
color: #ffffff;
}
body[data-service="home"] .hero-actions .btn-get-quote {
border: 0;
background: linear-gradient(180deg, #d32534 0%, #b81524 100%);
color: #ffffff;
}
body[data-service="home"] .hero-actions .hero-action-whatsapp {
width: 44px;
height: 44px;
border-radius: 10px;
border-color: rgba(255, 255, 255, 0.22);
}
body[data-service="home"] .hero-bottom-cards {
width: min(1480px, calc(100% - 64px));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
body[data-service="home"] .hero-bottom-card {
padding: 18px 24px 16px;
border-radius: 12px;
background: linear-gradient(160deg, rgba(37, 41, 49, 0.86) 0%, rgba(18, 20, 28, 0.86) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
text-decoration: none;
color: #ffffff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body[data-service="home"] .hero-bottom-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 34px rgba(0, 0, 0, 0.34);
}
body[data-service="home"] .hero-bottom-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
filter: brightness(0) invert(1);
}
body[data-service="home"] .hero-bottom-card h3 {
margin: 8px 0 0;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.15;
}
body[data-service="home"] .hero-card-divider {
display: block;
width: 100px;
height: 3px;
margin: 10px 0 8px;
border-radius: 999px;
background: #8ed237;
}
body[data-service="home"] .hero-bottom-card p {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: rgba(245, 246, 244, 0.9);
}
@media (max-width: 1100px) {
body[data-service="home"] .hero-reference-header-content {
grid-template-columns: 1fr auto;
gap: 12px;
}
body[data-service="home"] .hero-inline-phone {
font-size: 26px;
}
body[data-service="home"] .header.hero-reference-header nav {
display: none;
}
body[data-service="home"] .header.hero-reference-header .mobile-menu-toggle {
display: flex !important;
position: static !important;
transform: none !important;
width: 36px;
height: 30px;
}
body[data-service="home"] .mobile-menu {
top: 96px !important;
}
body[data-service="home"] .home-hero-reference {
min-height: 100vh;
padding-top: 100px !important;
}
body[data-service="home"] .home-hero-content {
width: calc(100% - 40px);
}
body[data-service="home"] .hero-bottom-cards {
width: calc(100% - 40px);
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
body[data-service="home"] .header.hero-reference-header {
padding: 14px 10px 0;
}
body[data-service="home"] .hero-reference-header-content {
min-height: 66px;
padding: 8px 14px;
}
body[data-service="home"] .hero-inline-phone {
display: none;
}
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary {
min-height: 40px;
padding: 8px 14px;
font-size: 13px;
}
body[data-service="home"] .btn-whatsapp {
display: none !important;
}
body[data-service="home"] .home-hero-reference {
min-height: 760px;
padding-top: 124px !important;
padding-bottom: 28px !important;
}
body[data-service="home"] .home-hero-content h1 {
font-size: clamp(44px, 11vw, 72px) !important;
}
body[data-service="home"] .home-hero-content .hero-subtitle {
font-size: clamp(19px, 5.6vw, 29px) !important;
}
body[data-service="home"] .hero-actions {
flex-wrap: wrap;
gap: 12px;
}
body[data-service="home"] .hero-actions .btn {
width: 100%;
justify-content: center;
}
body[data-service="home"] .hero-bottom-card {
padding: 22px 20px;
}
}
/* ===== Home Hero Tightening (User Requested) ===== */
body[data-service="home"] .header.hero-reference-header {
transition: transform 0.32s ease, opacity 0.22s ease !important;
}
body[data-service="home"] .header.hero-reference-header.hidden {
transform: translateY(-130%) !important;
opacity: 0 !important;
pointer-events: none;
}
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary,
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary:visited,
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary:hover,
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary:focus-visible {
color: #ffffff !important;
}
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary:hover,
body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary:focus-visible {
background: linear-gradient(180deg, #b81423 0%, #9f101d 100%) !important;
border-color: #8f0e1a !important;
}
body[data-service="home"] .home-hero-reference {
min-height: 88vh;
padding: 78px 0 16px !important;
background-position: center 54% !important;
}
body[data-service="home"] .home-hero-content h1 {
font-size: clamp(34px, 3.1vw, 46px);
}
body[data-service="home"] .home-hero-content .hero-subtitle {
margin-top: 8px;
font-size: clamp(15px, 1.1vw, 18px);
max-width: 500px;
}
body[data-service="home"] .hero-bottom-cards {
gap: 14px;
}
body[data-service="home"] .hero-bottom-card {
padding: 14px 18px 12px;
}
body[data-service="home"] .hero-bottom-icon {
width: 34px;
height: 34px;
}
body[data-service="home"] .hero-bottom-card h3 {
margin-top: 6px;
font-size: clamp(17px, 1.35vw, 20px);
}
body[data-service="home"] .hero-card-divider {
margin: 8px 0 6px;
}
body[data-service="home"] .hero-bottom-card p {
font-size: 13px;
line-height: 1.35;
}
@media (min-width: 768px) {
body[data-service="home"] .hero-actions {
gap: 8px;
margin-top: 14px;
}
body[data-service="home"] .hero-actions .btn {
min-height: 36px;
padding: 7px 12px;
border-radius: 8px;
font-size: 13px;
}
body[data-service="home"] .hero-actions .btn-call-now {
min-width: 116px;
}
body[data-service="home"] .hero-actions .btn-get-quote {
min-width: 140px;
}
body[data-service="home"] .hero-actions .hero-action-whatsapp {
width: 38px;
height: 38px;
}
}
/* Services page: remove extra gap before reviews */
body[data-service='services'] .services-section {
padding-bottom: 0;
}
/* Home why-choose image: preserve aspect ratio (no distortion) */
body[data-service="home"] .why-choose-image {
align-self: start;
}
body[data-service="home"] .why-choose-image img {
height: auto;
min-height: 0;
object-fit: contain;
}
/* Index hero subtitle mobile size reduction */
@media (max-width: 767px) {
body[data-service="home"] .hero .hero-subtitle {
font-size: clamp(11px, 3vw, 13px) !important;
line-height: 1.3 !important;
max-width: 36ch !important;
}
}