/* ===================================================================
GREAT BRITAIN TILE - CLEAN PAGES.CSS
Created: 2025-09-17
Purpose: Clean, organized CSS with all essential fixes from site-fixes.md
================================================================== */
/* ===================================================================
CHROME MOBILE FIX - Force White Background
================================================================== */
/* CRITICAL: Chrome Mobile Dark Mode Override Fix - Official Chrome Syntax */
:root {
color-scheme: only light !important;
}
/* TEMPORARILY DISABLED - BLOCKING GREY BACKGROUNDS
html, body {
background-color: #ffffff !important;
background: #ffffff !important;
color-scheme: only light !important;
forced-color-adjust: none !important;
-webkit-color-adjust: exact !important;
color-adjust: exact !important;
}
#page-wrapper {
background-color: #ffffff !important;
background: #ffffff !important;
color-scheme: light !important;
forced-color-adjust: none !important;
-webkit-color-adjust: exact !important;
color-adjust: exact !important;
}
*/
/* Allow natural backgrounds */
html, body {
color-scheme: only light !important;
forced-color-adjust: none !important;
-webkit-color-adjust: exact !important;
color-adjust: exact !important;
}
#page-wrapper {
color-scheme: light !important;
forced-color-adjust: none !important;
-webkit-color-adjust: exact !important;
color-adjust: exact !important;
}
/* EXCEPTION: Allow grey backgrounds for specific sections */
#page-wrapper .force-grey-bg,
#page-wrapper section.force-grey-bg {
background-color: #E9ECED !important;
background: #E9ECED !important;
}
/* NUCLEAR OVERRIDE: Force grey backgrounds with maximum specificity */
html body #page-wrapper section.force-grey-bg,
html body section.force-grey-bg,
body.index section.force-grey-bg {
background-color: #ff0000 !important;
background: #ff0000 !important;
}
/* Force exact colors - prevent browser color adjustments */
* {
forced-color-adjust: none !important;
-webkit-color-adjust: exact !important;
color-adjust: exact !important;
}
/* Force red colors to stay red - EXCEPT footer image block button */
.checkmark-list li::before {
color: #b13138 !important;
background-color: #b13138 !important;
border-color: #b13138 !important;
}
/* Footer image block button - blue with no border */
.home-footer-image-row .btn-primary {
background: #0d3e5f !important;
background-color: #0d3e5f !important;
color: #fff !important;
border: none !important;
border-color: transparent !important;
}
.home-footer-image-row .btn-primary:hover {
background: linear-gradient(135deg, #0d3e5f 0%, #2061ba 100%) !important;
background-color: #2061ba !important;
border: none !important;
border-color: transparent !important;
}
/* DISABLED - Allow natural backgrounds
@media (prefers-color-scheme: dark) {
html, body, #page-wrapper {
background-color: #ffffff !important;
background: #ffffff !important;
color: #333333 !important;
}
}
@media (prefers-contrast: high) {
html, body, #page-wrapper {
background-color: #ffffff !important;
background: #ffffff !important;
color: #333333 !important;
}
}
*/
/* HERO IMAGE OVERLAY - Darken for better text readability */
.rebuilt-hero-overlay {
background-color: rgba(0, 0, 0, 0.30) !important; /* Final subtle adjustment */
}
/* HERO BUTTONS - Prevent text wrapping to ensure single-line display */
.rebuilt-hero .hero-buttons .btn {
white-space: nowrap !important;
}
/* Extra specificity for index page hero buttons */
body.index .rebuilt-hero .hero-buttons .btn {
white-space: nowrap !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* UTILITY CLASS - Removes bottom margin from sections to counteract global spacing rules */
#page-wrapper > section.no-bottom-margin {
margin-bottom: 0 !important;
}
/* DESKTOP-ONLY - Pull 'Why Choose Us' section up to close gap */
@media (min-width: 769px) {
.why-choose-us.navy-band-section {
margin-top: -2rem !important;
}
}
/* MOBILE FIX - Add margin below 'Why Choose Us' title */
@media (max-width: 768px) {
#why.why-choose-us .section-title {
margin-bottom: 3.5rem !important; /* Creates space between title and subtitle on mobile */
}
}
/* DESKTOP NAVIGATION - Final fix for button alignment on all pages */
@media (min-width: 993px) {
.desktop-nav .nav-menu {
align-items: center !important;
flex-wrap: nowrap !important;
gap: 0.4rem !important; /* Increase gap to prevent wrapping */
}
.desktop-nav .nav-cta .btn {
height: 40px !important; /* Force same height */
display: inline-flex !important; /* Use inline-flex instead of flex */
align-items: center !important;
justify-content: center !important;
padding: 0.6rem 1.2rem !important; /* Match header.html padding */
box-sizing: border-box !important;
white-space: nowrap !important;
margin-left: 0.5rem !important; /* Add consistent left margin */
}
/* Extra specificity for index page */
body.index .desktop-nav .nav-cta .btn {
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.6rem 1.2rem !important;
box-sizing: border-box !important;
white-space: nowrap !important;
margin-left: 0.5rem !important;
}
}
/* CONTACT PAGE - Make info and form boxes equal size on desktop */
@media (min-width: 993px) {
.contact-grid {
grid-template-columns: 1fr 1fr !important; /* Equal columns instead of 1fr 1.5fr */
}
}
/* MOBILE MENU - Improve readability, touch targets, and appearance */
@media (max-width: 992px) {
/* 1. Add a semi-transparent background to the overlay */
.mobile-overlay {
background-color: rgba(13, 62, 95, 0.9) !important; /* Navy blue with 10% transparency */
backdrop-filter: blur(10px);
}
/* 2. Make buttons wider for easier tapping */
.mobile-overlay .nav-cta .btn {
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 0.9rem 1rem !important; /* Adjust padding for new size */
font-size: 1.1rem !important; /* Slightly larger font */
}
/* 3. Increase menu item font size for readability */
.mobile-overlay .main-nav .nav-link {
font-size: 1.2rem !important;
}
}
/* Mobile Page Title Spacing Adjustment - Extra Tight */
@media (max-width: 700px) {
#page-wrapper {
padding-top: 60px !important;
}
.section-header {
margin-bottom: 0.25rem !important;
padding-bottom: 0 !important;
margin-top: -1rem !important;
padding-top: 0 !important;
}
/* Brands section gets standard spacing */
.brands-section .section-header {
margin-top: 1rem !important;
}
/* Override legacy about page specific rules */
body.page-about .section-header,
body.page-about .section-title {
margin-top: -1rem !important;
padding-top: 0 !important;
}
.page-title {
margin-bottom: 0.25rem !important;
margin-top: 0 !important;
}
.section-subtitle {
margin-bottom: 0.25rem !important;
}
/* Prevent flashing mobile menu elements during page load */
.mobile-menu-toggle,
.menu-close,
.hamburger-menu,
.nav-toggle,
[class*="close"],
[class*="toggle"] {
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
/* Show menu elements after page loads */
body.loaded .mobile-menu-toggle,
body.loaded .menu-close,
body.loaded .hamburger-menu,
body.loaded .nav-toggle,
body.loaded [class*="close"],
body.loaded [class*="toggle"] {
opacity: 1;
}
/* MAXIMUM SPECIFICITY - MOBILE SECTION TITLE MARGINS - BALANCED */
html body #page-wrapper .container .section-title,
html body #page-wrapper .section-title,
html body .main-page .section-title,
html body .section-title,
html body h2.section-title,
html body .section-title-navy,
html body h2.section-title-navy,
html body .service-content .section-title,
html body section .section-title,
html body .lvp-showroom-block .section-title,
html body .complete-install-band .section-title,
html body .container .section-title {
text-align: center !important;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
padding-top: 0 !important;
}
/* Center value proposition descriptions on mobile */
.value-grid .value-item {
text-align: center !important;
}
.value-grid .value-item p {
text-align: center !important;
}
}
/* Section titles that follow gallery icons - prevent overlap */
html body .service-content .gallery-icon + .section-title,
html body section .gallery-icon + .section-title,
html body .gallery-icon + .section-title {
margin-top: -0.5rem !important;
padding-top: 0 !important;
}
/* Fix for "Complete Installation Service" - reduce section padding and title margin */
@media (width <= 700px) {
html body .complete-install-band {
padding-top: 1rem !important;
padding-bottom: 2rem !important;
}
html body .complete-install-band h2.section-title {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Add margin below installation steps before Get Started button */
html body .install-infographic {
margin-bottom: 2rem !important;
}
/* Remove extra space at end of "Our Installation Process" section on mobile */
html body .experience-section,
html body .band-alt .service-content {
padding-bottom: 1rem !important;
margin-bottom: 0 !important;
}
/* Match "Visit Our Showroom" section bottom margin with "Get Started" section */
html body .lvp-showroom-block {
margin-bottom: 2rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Override any extra padding on the container around LVP showroom */
html body .container[style*="padding"] .lvp-showroom-block {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
html body .service-content-text-wrap {
margin-bottom: 1rem !important;
}
/* Standardize mobile padding for all sections - industry standard */
html body .container,
html body .service-content,
html body .lvp-showroom-block,
html body .service-content-text-wrap {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Universal section spacing - REMOVED: was causing unwanted gaps between sections */
/* section {
margin-bottom: 0.25rem !important;
padding-top: 0 !important;
} */
.service-content {
margin-top: 0 !important;
padding-top: 0.5rem !important;
}
/* Universal icon spacing - Match Desktop */
.service-icon,
.gallery-icon {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Override large inline margins - ZERO */
div[style*="margin-bottom: 3rem"],
div[style*="margin-top: 3rem"] {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
}
/* Red underlines centered - REMOVED - Now using inline spans only */
/* Navigation dropdown subcategories - white text and smaller font */
.main-nav .dropdown-menu .dropdown-item,
nav.main-nav ul .dropdown-menu .dropdown-item,
.main-nav ul .dropdown-menu .dropdown-item,
.main-nav .has-dropdown .dropdown-menu .dropdown-item {
color: #fff !important;
font-size: 0.85rem !important;
font-weight: 400 !important;
}
/* Shop Online button - ensure white text */
.nav-cta .btn-secondary,
.main-nav .btn-secondary {
color: #fff !important;
}
/* Mobile menu - slide-out panel with navy background and tight spacing */
@media (max-width: 992px) {
/* Hide main nav in header, show it in overlay */
.site-header .main-nav {
display: none !important;
}
/* Mobile overlay - slide-out panel, not full screen */
.mobile-overlay {
position: fixed !important;
top: 0 !important;
left: -100% !important;
width: 280px !important;
height: 100vh !important;
background: #0d3e5f !important; /* Navy blue like footer */
z-index: 9999 !important;
transition: left 0.3s ease !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mobile-overlay.active {
left: 0 !important;
}
/* Move main nav inside mobile overlay */
.mobile-overlay .main-nav {
display: block !important;
position: relative !important;
background: transparent !important;
padding: 1rem 0 !important;
}
/* Main menu items - ultra compact spacing */
.main-nav > ul > li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Force left alignment for all mobile menu items - override main.css */
.mobile-overlay .main-nav > ul > li,
.mobile-overlay .main-nav > ul > li > a,
.mobile-overlay .main-nav .installation-link,
.mobile-overlay .main-nav .nav-link {
text-align: left !important;
}
/* Consistent padding for all main menu items */
.mobile-overlay .main-nav > ul > li > a,
.mobile-overlay .main-nav .installation-link,
.mobile-overlay .main-nav .nav-link,
.main-nav > ul > li > a {
padding: 0.2rem 1.5rem !important;
margin: 0 !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.1 !important;
display: block !important;
color: #fff !important;
text-align: left !important;
}
/* Subcategory spacing - slightly more space between items */
.mobile-overlay .main-nav .dropdown-menu .dropdown-item,
.main-nav .dropdown-menu .dropdown-item {
padding: 0.25rem 2.5rem !important;
margin: 0 !important;
font-size: 0.9rem !important;
line-height: 1.2 !important;
display: block !important;
color: #fff !important;
text-align: left !important;
}
/* Zero spacing for dropdown container */
.main-nav .has-dropdown {
margin: 0 !important;
padding: 0 !important;
}
.main-nav .has-dropdown .dropdown-menu {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* CTA button spacing - wider buttons for mobile usability */
.mobile-overlay .main-nav .nav-cta,
.main-nav .nav-cta {
margin: 0.1rem 0.5rem !important;
padding: 0 !important;
width: auto !important;
box-sizing: border-box !important;
}
/* Button styling - wider for better mobile touch targets */
.mobile-overlay .main-nav .nav-cta .btn,
.main-nav .nav-cta .btn {
margin: 0 !important;
padding: 0 1rem !important;
text-align: center !important;
text-indent: 0 !important;
display: block !important;
line-height: 44px !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
width: 100% !important;
max-width: 270px !important;
height: 44px !important;
border-radius: 6px !important;
border: none !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
}
/* Get a Quote button - light blue by default - ultra specific override */
.mobile-overlay .main-nav .nav-cta .btn-primary,
.mobile-overlay .main-nav .nav-cta #get-quote-btn,
.main-nav .nav-cta .btn-primary,
.main-nav .nav-cta #get-quote-btn {
background: #8FBBE6 !important; /* Light blue from color palette */
background-color: #8FBBE6 !important;
border-color: #8FBBE6 !important;
color: #fff !important;
}
.mobile-overlay .main-nav .nav-cta .btn-primary:hover,
.main-nav .nav-cta .btn-primary:hover {
background: linear-gradient(135deg, #0C5298, #8FBBE6) !important;
background-color: #0C5298 !important;
border-color: #0C5298 !important;
transform: translateY(-1px) !important;
transition: all 0.3s ease !important;
}
/* Shop Online button - red */
.main-nav .nav-cta .btn-secondary {
background: #b13138 !important;
border-color: #b13138 !important;
color: #fff !important;
}
.main-nav .nav-cta .btn-secondary:hover {
background: linear-gradient(135deg, #b13138, #E83E4C) !important;
border-color: #b13138 !important;
transform: translateY(-1px) !important;
}
/* Override any inherited spacing from main.css */
.main-nav ul {
margin: 0 !important;
padding: 0 !important;
}
.main-nav ul li {
margin: 0 !important;
padding: 0 !important;
}
/* Mobile menu close button styling - force visibility on all screens */
.mobile-overlay .mobile-menu-close,
.mobile-overlay.active .mobile-menu-close {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
background: rgba(255, 255, 255, 0.9) !important;
border: none !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.2rem !important;
color: #333 !important;
cursor: pointer !important;
z-index: 10000 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
visibility: visible !important;
opacity: 1 !important;
}
.mobile-overlay .mobile-menu-close:hover,
.mobile-overlay.active .mobile-menu-close:hover {
background: rgba(255, 255, 255, 1) !important;
color: #c8102e !important;
}
/* Force close button visibility on all mobile sizes - override any conflicting styles */
@media (max-width: 992px) {
.mobile-overlay .mobile-menu-close,
.mobile-overlay.active .mobile-menu-close {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Smaller size for very small mobile screens */
@media (max-width: 480px) {
.mobile-overlay .mobile-menu-close,
.mobile-overlay.active .mobile-menu-close {
top: 0.5rem !important;
right: 0.5rem !important;
width: 36px !important;
height: 36px !important;
font-size: 1.1rem !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
}
/* Desktop section spacing adjustments */
@media (min-width: 701px) {
/* Reduce margin below "Our Installation Process" section - tighter spacing */
.experience-section .service-content,
.band-alt .service-content {
margin-bottom: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
}
/* Desktop spacing adjustments - NEGATIVE MARGINS */
@media (min-width: 701px) {
/* Universal section title rules */
.section-title {
margin-top: 0 !important;
margin-bottom: 1rem !important;
padding-top: 0 !important;
}
/* Universal section spacing - REMOVED: was causing unwanted gaps between sections */
/* section {
margin-bottom: 0.25rem !important;
padding-top: 0 !important;
} */
/* Sections that come after service icons need proper spacing */
.service-icon + section {
margin-top: 4rem !important;
padding-top: 1rem !important;
}
.service-content {
margin-top: -1rem !important;
padding-top: 0.5rem !important;
}
/* Universal icon spacing */
.service-icon,
.gallery-icon {
margin-top: -1rem !important;
padding-top: 0 !important;
}
/* Page title icons need bottom margin to prevent section overlap */
.service-icon {
margin-bottom: 2rem !important;
}
/* Override large inline margins - but not after page title icons */
div[style*="margin-bottom: 3rem"]:not(.service-icon + * div),
div[style*="margin-top: 3rem"]:not(.service-icon + * div) {
margin-bottom: 0 !important;
margin-top: -1rem !important;
}
/* Specifically target sections that come after page title icons */
.service-icon + section {
margin-top: 0 !important;
padding-top: 1rem !important;
}
/* Override inline styles on index page sections */
.section-header[style*="margin-top"] .section-title,
.section-title[style*="margin-top"],
div[style*="margin-top"] .section-title {
margin-top: 0 !important;
}
/* When there's an icon above a section title, use 0 margin */
.gallery-icon + .section-title,
.service-icon + .section-title,
.gallery-icon ~ .section-title,
.service-icon ~ .section-title {
margin-top: 0 !important;
}
}
/* ===================================================================
0. ESSENTIAL LAYOUT STYLES (from main.css)
================================================================== */
* {
box-sizing: border-box;
max-width: 100vw;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden; /* Prevent horizontal scroll/wobble */
}
html {
overflow-x: hidden; /* Prevent horizontal scroll/wobble */
width: 100%;
max-width: 100vw;
}
/* Universal overflow prevention now handled above in main * selector */
/* Specific elements that commonly cause wobble */
.install-infographic,
.install-step,
.service-content-text-wrap {
max-width: 100% !important;
overflow-x: hidden !important;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
padding-left: 1.5rem !important; /* Universal mobile override */
padding-right: 1.5rem !important; /* Universal mobile override */
}
#page-wrapper {
padding-top: 130px !important;
}
@media (max-width: 700px) {
#page-wrapper {
padding-top: 110px !important; /* Proportionally adjusted for mobile */
}
}
/* ===================================================================
1. CLEAN TITLE SYSTEM - SEPARATE CLASSES FOR DIFFERENT PURPOSES
================================================================== */
/* Page titles (main headers at top of pages) */
.page-title {
font-size: 2.5rem !important;
font-weight: 700 !important;
color: #173c67 !important; /* Navy blue for page titles */
text-align: center !important;
margin: 0 auto -0.6rem !important;
line-height: 1.2 !important;
display: block !important;
position: relative !important;
}
/* Hero section page titles should be white */
.hero-section .page-title,
.hero-content .page-title {
color: white !important;
}
/* Section titles (smaller headers within content) */
.section-title {
font-size: 1.4rem !important;
font-weight: 600 !important;
color: #173c67 !important; /* Navy blue by default */
text-align: center !important;
margin: 0.2rem auto 1.2rem !important;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.2 !important;
display: block !important;
position: relative !important;
}
/* White section titles for navy backgrounds */
.navy-band-section .section-title,
.testimonial-content .section-title,
.cta-card .section-title,
.complete-install-band .section-title,
.section-title-white {
color: #fff !important;
}
/* Complete installation service styling now handled above */
/* Red underlines for page titles only - section titles now use inline spans */
.page-title::after {
content: '' !important;
display: block !important;
width: 48px !important;
height: 4px !important;
background: #c8102e !important;
border-radius: 2px !important;
margin: 0.2rem auto 0 !important; /* PERFECT SPACING - tighter spacing */
position: static !important;
left: auto !important;
right: auto !important;
transform: none !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Mobile red line spacing - page titles only */
@media (width <= 768px) {
.page-title::after {
margin: 0.2rem auto 0 !important; /* Tighter spacing on mobile */
}
/* Ensure titles are centered on mobile and tablet */
.page-title,
.section-title {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
}
/* Consistent mobile padding for all sections */
.container {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.service-content {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
/* Override any inline padding styles on mobile - ORDERED BY SPECIFICITY */
.complete-install-band .container,
section[style*="padding"] .container,
.service-content[style*="padding"] {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
/* Additional container fixes - navy-band-section now handles its own padding */
/* Force padding on any navy band content */
.complete-install-band {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
/* Removed specific overrides - now using standard .service-content padding */
}
/* Section subtitle styling */
.section-subtitle {
font-size: 1.1rem !important; /* Improved readability */
font-weight: 400 !important;
color: #6c757d !important;
max-width: 700px;
margin: 0.5rem auto 1rem !important; /* Increased top margin to center red line */
display: block !important;
text-align: center !important;
line-height: 1.3;
}
/* Desktop spacing improvements for page headers */
@media (width > 768px) {
.page-title {
margin-bottom: 0.35rem !important; /* +0.1rem from 0.25rem */
}
.section-subtitle {
margin-top: 0.6rem !important; /* +0.1rem from 0.5rem */
}
}
/* Contact page subtitle alignment fix */
.page-contact .section-subtitle {
font-size: 1.1rem;
color: var(--medium-gray);
max-width: 700px;
margin: 1rem auto 0 !important;
display: block !important;
text-align: center;
}
/* ===================================================================
2. UNIVERSAL HEADER OVERLAP FIX (from site-fixes.md)
================================================================== */
/* Desktop: Prevent fixed menu from hiding page headers */
/* Mobile: Prevent fixed menu from hiding page headers - desktop rule already defined above */
@media (width <= 700px) {
#page-wrapper {
padding-top: 78px !important;
}
}
/* ===================================================================
3. MOBILE/TABLET: Stack two-column layouts vertically
================================================================== */
/* MOBILE/TABLET: Stack two-column layouts vertically */
@media (max-width: 992px) {
/* Stack integrated hero sections (service pages) */
.integrated-grid[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
/* Stack "Ready to begin your project" sections */
div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
/* Stack featured showcase sections */
.featured-showcase[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
/* Ensure boxes are full width on mobile */
.text-box-left,
.text-box-right {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix about page box spacing */
.text-box-right {
margin-top: 2rem !important;
}
/* NUCLEAR OPTION: Force images to stretch full width with maximum specificity */
html body .integrated-grid .text-box-left img,
html body .integrated-grid .text-box-right img,
html body .text-box-left img,
html body .text-box-right img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
min-width: 100% !important;
max-width: 100% !important;
}
/* Force image containers to full width with maximum specificity */
html body .integrated-grid .text-box-left > div:first-child,
html body .integrated-grid .text-box-right > div:first-child,
html body .text-box-left > div:first-child,
html body .text-box-right > div:first-child {
width: 100% !important;
overflow: hidden !important;
min-width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force the boxes themselves to be full width */
html body .integrated-grid .text-box-left,
html body .integrated-grid .text-box-right {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
}
/* Removed global container padding override - let individual pages control their own padding */
}
/* ===================================================================
4. MOBILE SERVICE ICON SPACING (from site-fixes.md)
================================================================== */
@media (width <= 700px) {
.mobile-spacer {
height: 2.0rem !important;
width: 100% !important;
display: block !important;
}
}
@media (width >= 701px) {
.mobile-spacer {
height: 1.8rem !important;
width: 100% !important;
display: block !important;
}
}
/* ===================================================================
4. SERVICE CONTENT STYLING
================================================================== */
.service-content {
background: #fff;
text-align: left !important;
padding: 68px 64px 36px !important; /* Canonical desktop padding */
box-sizing: border-box;
border-radius: 16px;
box-shadow: 0 10px 30px rgb(13 62 95 / 8%);
margin-bottom: 2rem !important; /* Override 4rem bottom margin from main.css */
}
@media (width <= 700px) {
.service-content {
padding: 1.5rem !important; /* Canonical mobile padding */
}
}
/* Service content card styling */
.service-content.card-style {
background: #fff !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgb(13 62 95 / 8%) !important;
padding: 2.5rem 40px !important;
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
/* UNIVERSAL SECTION SPACING - Now consolidated above in main .service-content rule */
/* Full-width sections without viewport issues */
.band-alt,
.complete-install-band {
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Prevent image flash/layout shift - COMPREHENSIVE FIX */
.service-content-image-float img,
img[src*="GreatBritainTileBuilding"],
img[src*="/images/"],
.lvp-showroom-block img,
.service-content img {
max-width: 100% !important;
height: auto !important;
display: block !important;
width: auto !important;
object-fit: contain !important;
}
/* Specific fix for showroom image */
img[src*="GreatBritainTileBuilding_cropped.webp"] {
max-width: 400px !important;
width: 100% !important;
height: auto !important;
}
/* Container padding now handled by consolidated rule above */
/* REMOVED: Global section padding was preventing seamless section layouts */
/* section {
padding: 1rem 0 !important;
} */
/* Removed conflicting padding overrides - using canonical service-content rule */
/* Ensure all section content has proper bottom spacing */
.service-content-text-wrap {
margin-bottom: 2rem !important; /* Add space below text content */
}
.image-caption {
margin-bottom: 1.5rem !important; /* Ensure image captions have breathing room */
}
@media (width <= 768px) {
/* Prevent mobile wobble/overflow - AGGRESSIVE FIX */
body, html {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
position: relative !important;
}
/* Force all elements to stay within bounds - EXCEPT navigation */
#page-wrapper,
.container,
.service-content,
.band-alt,
.complete-install-band,
.lvp-showroom-block,
section {
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* Allow navigation menus to display properly - COMPREHENSIVE FIX */
.main-nav,
.main-nav.active,
.main-nav.open,
.dropdown-wrapper,
.dropdown-menu,
.nav-link,
.has-dropdown,
nav,
header,
.main-nav ul,
.main-nav li {
overflow: visible !important;
max-width: none !important;
max-height: none !important;
z-index: 9999 !important;
position: static !important;
}
/* Specific mobile navigation fixes */
.main-nav.active,
.main-nav.open {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
height: auto !important;
overflow-y: auto !important;
}
/* Ensure dropdown menus work properly */
.dropdown-menu {
position: relative !important;
display: block !important;
overflow: visible !important;
max-height: none !important;
white-space: normal !important;
width: 100% !important;
}
/* Navigation list items */
.main-nav ul li {
display: block !important;
width: 100% !important;
overflow: visible !important;
}
/* Fix full-width sections that cause overflow and wobble - ORDERED BY SPECIFICITY */
.band-alt,
.complete-install-band,
div[style*="width: 100vw"],
section[style*="width: 100vw"],
div[style*="margin-left: -50vw"],
section[style*="margin-left: -50vw"],
body .band-alt,
body .complete-install-band,
body div[style*="width: 100vw"],
body section[style*="width: 100vw"],
body div[style*="margin-left: -50vw"],
body section[style*="margin-left: -50vw"],
html body .band-alt,
html body .complete-install-band,
html body div[style*="width: 100vw"],
html body section[style*="width: 100vw"],
html body div[style*="margin-left: -50vw"],
html body section[style*="margin-left: -50vw"] {
width: 100% !important;
left: 0 !important;
right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
position: static !important;
}
/* Ensure all containers stay within viewport */
* {
max-width: 100vw !important;
box-sizing: border-box !important;
}
/* REMOVED: Global section padding was preventing seamless layouts */
/* section {
padding: 1.5rem 0 !important;
overflow-x: hidden !important;
} */
/* Keep overflow prevention but remove forced padding */
section {
overflow-x: hidden !important;
}
/* Removed mobile service-content padding override - using canonical rule */
/* Removed conflicting mobile padding overrides - using canonical service-content rule */
/* Override any section-specific padding inconsistencies - ORDERED BY SPECIFICITY */
section .container,
section[style*="padding"],
section div[style*="padding"],
html body section .container,
html body section[style*="padding"],
html body section div[style*="padding"] {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
@media (width <= 768px) {
.service-content.card-style {
padding: 2rem 20px !important;
border-radius: 14px !important;
}
}
/* ===================================================================
5. COMPLETE INSTALLATION SERVICE CARD (from site-fixes.md)
================================================================== */
@media (width <= 991px) {
.install-includes-flex-fix {
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
align-items: stretch !important;
}
.install-includes-flex-fix > .service-content-image-float {
order: 1 !important;
margin: 0 auto 1.2rem !important;
max-width: 90vw !important;
float: none !important;
text-align: center !important;
}
.install-includes-flex-fix > div:not(.service-content-image-float) {
order: 2 !important;
width: 100% !important;
}
}
@media (width >= 992px) {
.install-includes-flex-fix {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 2.5rem !important;
}
.install-includes-flex-fix > .service-content-image-float {
order: 1 !important;
max-width: 55%;
margin: 0 0 20px 20px !important;
float: none !important;
text-align: left !important;
}
.install-includes-flex-fix > div:not(.service-content-image-float) {
order: 2 !important;
flex: 1;
width: auto;
}
}
/* ===================================================================
6. COMMERCIAL PORTFOLIO LAYOUT - Use standard section patterns
================================================================== */
/* Override inline margin-bottom to use standard section spacing */
.container[style*="margin-bottom"] {
margin-bottom: 3rem !important; /* Standard section spacing */
}
/* Commercial Portfolio - Fix button to be navy (should be btn-primary, not btn-secondary) */
.commercial-portfolio-text-bg .btn-secondary {
background: #0d3e5f !important; /* Navy blue like btn-primary */
color: #fff !important;
box-shadow: 0 4px 18px rgb(13 62 95 / 15%);
}
.commercial-portfolio-text-bg .btn-secondary:hover,
.commercial-portfolio-text-bg .btn-secondary:focus {
background: linear-gradient(135deg, #0d3e5f 0%, #2061ba 100%) !important; /* Navy gradient on hover */
color: #fff !important;
box-shadow: 0 8px 30px rgb(13 62 95 / 25%);
}
/* Commercial Portfolio - Fix h3 font size to be smaller than section title */
.commercial-portfolio-text-bg h3 {
font-size: 1.2rem !important; /* Smaller than section title */
font-weight: 600 !important;
}
/* Commercial Portfolio - Mobile/Tablet stacking: title, image, text, button */
@media (width <= 900px) {
.commercial-portfolio-row {
flex-direction: column !important;
min-height: 0 !important;
}
.commercial-portfolio-image {
border-radius: 16px 16px 0 0 !important;
min-height: 200px !important;
background-position: center center !important;
order: 1 !important; /* Image comes after title */
}
.commercial-portfolio-text-bg {
border-radius: 0 0 16px 16px !important;
padding: 24px !important;
order: 2 !important; /* Text/button comes after image */
}
}
/* Commercial Portfolio - Desktop: Left-align title with text */
@media (width > 900px) {
.commercial-portfolio-text-bg .section-title,
.commercial-portfolio-text-bg .section-title-navy {
text-align: left !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Commercial portfolio section titles now use inline spans only */
.commercial-portfolio-text-bg h2,
.commercial-portfolio-text-bg h3 {
text-align: left !important;
}
}
/* Commercial Portfolio - Button sizing fix for all breakpoints */
@media (width > 768px) {
.commercial-portfolio-text-bg .btn-secondary {
width: auto !important;
min-width: 180px !important;
}
}
@media (width <= 768px) {
.commercial-portfolio-text-bg .btn-secondary {
width: 100% !important; /* Full width on mobile only */
max-width: none !important;
padding: 14px 20px !important;
font-size: 1rem !important;
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ===================================================================
7. CHECKMARK LISTS
================================================================== */
.checkmark-list {
list-style: none;
padding: 0;
margin: 12px 0 16px !important;
display: block !important;
}
.checkmark-list li {
padding: 4px 0 4px 28px !important;
position: relative;
color: #444;
line-height: 1.16 !important;
margin-bottom: 0 !important;
}
/* MAXIMUM SPECIFICITY - Force checkmarks to work */
html body .checkmark-list li::before,
body .checkmark-list li::before,
.checkmark-list li::before {
content: '' !important;
position: absolute !important;
left: 4px !important;
top: 8px !important;
width: 6px !important;
height: 12px !important;
border: solid #c8102e !important;
border-width: 0 3px 3px 0 !important;
transform: rotate(45deg) !important;
-webkit-transform: rotate(45deg) !important;
background: transparent !important;
color: transparent !important;
font-size: 0 !important;
display: block !important;
}
/* About page car dealership bullet spacing - reduce gap on tablet/mobile */
@media (max-width: 992px) {
.page-about .project-details div[style*="grid-template-columns: 1fr 1fr"] {
gap: 0.4rem !important;
}
}
@media (max-width: 768px) {
.page-about .project-details div[style*="grid-template-columns: 1fr 1fr"] {
gap: 0.3rem !important;
grid-template-columns: 1fr !important;
}
}
.testimonial-content {
background: #0d3e5f !important;
color: #fff !important;
border-radius: 18px;
box-shadow: 0 8px 32px rgb(13 62 95 / 12%);
display: flex;
align-items: flex-start;
gap: 0;
}
.testimonial-content * {
color: #fff !important;
}
.testimonial-content .testimonial-image {
margin-right: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 180px;
}
.testimonial-avatar {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 4px 24px rgb(32 97 186 / 15%);
}
.testimonial-text {
margin-left: 40px;
flex: 1 1 0%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Tablet testimonials - tone down overpowering appearance */
@media (width >= 701px) and (width <= 1024px) {
.testimonial-content {
padding: 1.5rem !important; /* Reduce padding */
border-radius: 12px !important; /* Smaller border radius */
}
.testimonial-avatar {
width: 100px !important; /* Smaller avatar */
height: 100px !important;
}
.testimonial-content .testimonial-image {
min-width: 120px !important; /* Adjust container */
}
.testimonial-text {
margin-left: 20px !important; /* Less spacing */
}
.testimonial-text p {
font-size: 0.95rem !important; /* Slightly smaller text */
line-height: 1.5 !important;
}
}
@media (width <= 700px) {
.testimonial-content {
flex-direction: column;
align-items: center;
}
.testimonial-content .testimonial-image {
min-width: 0;
margin-bottom: 20px;
}
.testimonial-text {
margin-left: 0;
width: 100%;
}
}
/* ===================================================================
9. SERVICE ICONS AND GALLERY ICONS
================================================================== */
.service-icon {
width: 80px;
height: 80px;
background: #1a3a6a;
border-radius: 50%;
display: block !important; /* Changed from flex to block for better centering */
margin: 0 auto 2rem !important; /* Perfectly centered */
color: var(--white);
font-size: 2rem;
line-height: 80px; /* Center icon vertically */
text-align: center !important;
position: relative;
left: auto !important;
right: auto !important;
transform: none !important;
}
.service-icon i {
display: inline-block;
vertical-align: middle;
line-height: 1;
text-align: center;
}
/* ===================================================================
STANDARDIZED SECTION SPACING - NEW STANDARDS
================================================================== */
/* Service icons WITH section titles - margin above icon */
.gallery-icon,
.service-icon {
text-align: center !important;
font-size: 2rem;
margin: 2rem auto 2rem !important; /* 2rem top margin for separation, 2rem bottom for standard spacing */
display: block !important;
color: #173c67;
padding: 0 !important;
transform: none !important;
}
/* Section titles WITHOUT service icons - margin above title */
.section-title:not(.gallery-icon + .section-title):not(.service-icon + .section-title) {
margin-top: 2rem !important;
}
/* ===================================================================
ANGLED BLEED BAND STYLING - REUSABLE COMPONENTS
================================================================== */
/* Standard angled band - angled top-left and bottom-right */
.band--angle {
position: relative;
width: 100%;
max-width: 100%;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: 3rem 0;
background: #0d3e5f; /* Footer blue */
color: #fff;
z-index: 2;
clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
overflow: hidden;
}
.band--angle .container {
position: relative;
z-index: 1;
}
/* Opposite angled band - angled top-right and bottom-left */
.band--angle-2 {
position: relative;
width: 100%;
max-width: 100%;
margin-top: 3rem;
margin-bottom: 3rem;
padding: 3rem 0;
background: #0d3e5f; /* Footer blue */
color: #fff;
z-index: 2;
clip-path: polygon(0 0, 100% 20px, 100% 100%, 0 calc(100% - 20px));
overflow: hidden;
}
.band--angle-2 .container {
position: relative;
z-index: 1;
}
/* Gradient band with smooth gradient from light gray to dark blue-gray */
.band--gradient {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 3rem 0;
background: linear-gradient(180deg, #f8f9fa 0%, #6c757d 50%, #495057 100%);
color: #333;
z-index: 2;
}
.band--gradient .container {
position: relative;
z-index: 1;
}
/* Bottom wave using CSS mask - bulletproof solution */
.band--wave-bottom::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: 100vw;
height: calc(var(--wave-h) * 2px);
transform: translateX(-50%);
background: inherit;
z-index: 0;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat 0 0 / 100% 100%;
mask: url('data:image/svg+xml;utf8,') no-repeat 0 0 / 100% 100%;
}
.band--wave-bottom .container {
position: relative;
z-index: 1;
}
/* Showroom image hover zoom animation */
.showroom-image img {
transition: transform 0.3s ease;
}
.showroom-image:hover img {
transform: scale(1.05);
}
/* Full-width grey band */
.band--grey {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 4rem 0;
background: #f8f9fa;
color: #333;
}
.band--grey .container {
position: relative;
z-index: 1;
}
.gallery-icon i {
display: inline-block;
text-align: center;
vertical-align: middle;
}
/* Service icon margins - perfect centering for all pages */
.service-icon,
/* Universal service content icon styling - all pages */
.service-content .service-icon {
text-align: center !important;
display: block !important;
margin: 0 auto 2rem !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* REMOVED - Gallery icons now controlled by main .gallery-icon rule above */
/* ===================================================================
10. NAVY BAND SECTIONS
================================================================== */
.navy-band-section {
background: #0d3e5f !important;
color: #fff !important;
padding: 2.5rem 1.5rem 0 !important;
width: 100%;
margin-left: 0;
box-sizing: border-box;
}
.navy-band-section,
.navy-band-section * {
color: #fff !important;
}
/* REMOVED - Navy band section titles now use main .section-title rule with white color override above */
/* ===================================================================
10. LOGO DISPLAY STANDARDS (CRITICAL - PREVENTS FOUC)
================================================================== */
/* UNIVERSAL LOGO STYLES - HIGHEST PRIORITY */
.site-header .logo .logo-img,
.header-container .logo .logo-img,
.logo .logo-img {
max-width: 200px !important;
height: 55px !important;
object-fit: contain !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Mobile logo adjustments */
@media (width <= 768px) {
.site-header .logo .logo-img,
.header-container .logo .logo-img,
.logo .logo-img {
max-width: 180px !important;
height: 45px !important;
}
}
/* ===================================================================
11. ESSENTIAL HEADER STYLES (from main.css)
================================================================== */
/* Site header base styles */
.site-header {
background: #fff;
border-bottom: 1px solid #e0e0e0;
position: relative;
z-index: 1000;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
max-width: 1200px;
margin: 0 auto;
}
/* Main navigation */
.main-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
gap: 2rem;
}
.main-nav .nav-link {
color: #173c67;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.main-nav .nav-link:hover {
color: #c8102e;
}
/* Mobile menu toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 24px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 3px;
background: #173c67;
border-radius: 2px;
transition: all 0.3s ease;
}
/* ===================================================================
12. RESPONSIVE HEADER FIXES
================================================================== */
/* DESKTOP: Hide mobile menu toggle */
@media (width > 992px) {
.mobile-menu-toggle {
display: none !important;
}
.main-nav {
display: flex !important;
}
}
/* MOBILE: Show mobile menu toggle, hide main nav */
@media (max-width: 992px) {
.site-header .container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 64px !important;
padding: 10px 16px !important;
position: relative !important;
gap: 16px !important;
}
.mobile-menu-toggle {
display: flex !important;
position: static !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
width: 40px !important;
height: 40px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
z-index: 1100 !important;
order: 1 !important;
}
.mobile-menu-toggle span {
display: block !important;
width: 24px !important;
height: 3px !important;
background: #0d3e5f !important;
margin: 3px 0 !important;
transition: all 0.3s ease !important;
}
.logo {
order: 2 !important;
}
/* Hide desktop nav, but NOT the mobile overlay nav */
.desktop-nav {
display: none !important;
}
/* Ensure mobile overlay nav is visible */
.mobile-overlay .main-nav {
display: block !important;
}
.logo .logo-img {
max-width: 180px !important;
height: 40px !important;
object-fit: contain !important;
}
}
/* PROMO MESSAGE RESPONSIVE FIXES */
.promo-message {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
background: #0d3e5f !important;
color: #fff !important;
padding: 8px 20px !important;
font-size: 0.95rem !important;
min-height: 42px !important;
box-sizing: border-box !important;
}
.promo-message .promo-left {
display: flex !important;
align-items: center !important;
gap: 0.7em !important;
flex-shrink: 0 !important;
}
.promo-message .promo-center {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex: 1 !important;
margin: 0 20px !important;
}
.promo-message .promo-mobile {
display: none !important;
}
/* DESKTOP: Show all promo elements */
@media (width > 700px) {
.promo-message .promo-desktop {
display: inline !important;
}
.promo-message .promo-contact-link {
display: inline !important;
}
.promo-message .promo-mobile {
display: none !important;
}
}
/* MOBILE: Hide desktop elements, show mobile phone */
@media (width <= 700px) {
.promo-message {
justify-content: center !important;
padding: 6px 15px !important;
min-height: 38px !important;
}
.promo-message .promo-left,
.promo-message .promo-center {
display: none !important;
}
.promo-message .promo-mobile {
display: inline !important;
font-size: 1.08em !important;
font-weight: 600 !important;
}
}
/* ===================================================================
12. UNIVERSAL BUTTON STANDARDS
================================================================== */
.btn {
display: inline-block;
padding: 0.9rem 2.2rem;
font-weight: 700;
border-radius: 7px;
font-size: 1.18rem;
border: none;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
text-decoration: none;
cursor: pointer;
text-align: center;
}
/* STANDARD NAVY BLUE BUTTONS (Default) */
.btn,
.btn-primary {
background: #0d3e5f !important; /* Navy blue - matches footer and promo */
color: #fff !important;
box-shadow: 0 4px 18px rgb(13 62 95 / 15%);
}
.btn:hover, .btn:focus,
.btn-primary:hover, .btn-primary:focus {
background: linear-gradient(135deg, #0d3e5f 0%, #2061ba 100%) !important; /* Navy gradient on hover */
color: #fff !important;
box-shadow: 0 8px 30px rgb(13 62 95 / 25%);
transform: translateY(-2px);
}
/* RED BUTTONS (Secondary/CTA) */
.btn-secondary,
.btn-get-started {
background: #c8102e !important; /* Red */
color: #fff !important;
box-shadow: 0 4px 18px rgb(200 16 46 / 15%);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-get-started:hover, .btn-get-started:focus {
background: linear-gradient(135deg, #c8102e 0%, #ff3c3c 100%) !important; /* Red gradient on hover */
color: #fff !important;
box-shadow: 0 8px 30px rgb(200 16 46 / 25%);
transform: translateY(-2px);
}
/* LIGHT BLUE BUTTONS (Special cases) */
.btn-light-blue {
background: #2061ba !important; /* Light blue */
color: #fff !important;
box-shadow: 0 4px 18px rgb(32 97 186 / 15%);
}
.btn-light-blue:hover, .btn-light-blue:focus {
background: linear-gradient(135deg, #2061ba 0%, #4a90e2 100%) !important; /* Light blue gradient on hover */
color: #fff !important;
box-shadow: 0 8px 30px rgb(32 97 186 / 25%);
transform: translateY(-2px);
}
/* TRANSPARENT OUTLINE BUTTONS (Hero section) */
.btn-outline {
background: transparent !important; /* Transparent background */
color: rgba(255, 255, 255, 0.9) !important; /* Slightly transparent white text */
border: 2px solid rgba(255, 255, 255, 0.8) !important; /* Slightly transparent white outline */
box-shadow: none !important; /* No shadow for clean look */
opacity: 0.9; /* Overall subtle opacity */
}
.btn-outline:hover, .btn-outline:focus {
background: rgba(255, 255, 255, 0.1) !important; /* Subtle white overlay on hover */
color: #fff !important; /* Full white text on hover */
border: 2px solid #fff !important; /* Full white outline on hover */
box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2) !important; /* Subtle white glow */
opacity: 1; /* Full opacity on hover for better visibility */
transform: translateY(-2px);
}
/* MOBILE AND TABLET BUTTON STANDARDS - FULL WIDTH - HIGHER SPECIFICITY THAN ANY CONTAINER */
@media (width <= 768px) {
.btn,
.btn-primary,
.btn-secondary,
.btn-get-started,
.btn-light-blue,
.btn-outline,
.container .btn,
.container .btn-primary,
.lvp-showroom-block .btn.btn-primary,
body .container .btn,
body .container .btn-primary,
body .lvp-showroom-block .btn.btn-primary,
html body .btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-get-started,
html body .btn-light-blue,
html body .btn-outline {
width: 100% !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
}
/* NUCLEAR OPTION - MAXIMUM SPECIFICITY FIXES */
/* Navigation buttons - force inline on desktop */
html body .site-header .desktop-nav .nav-menu .nav-cta .btn {
width: auto !important;
display: inline-block !important;
white-space: nowrap !important;
height: auto !important;
margin: 0 0 0 0.5rem !important;
padding: 0.6rem 1.2rem !important;
}
/* Hero buttons - force inline and single line */
html body .rebuilt-hero .hero-buttons .btn,
html body .rebuilt-hero .hero-buttons .btn-outline,
html body .page-about .hero-buttons .btn,
html body .page-about .hero-buttons .btn-primary,
html body .page-about .hero-buttons .btn-secondary {
width: auto !important;
display: inline-flex !important;
white-space: nowrap !important;
height: 48px !important;
margin: 0 !important;
padding: 0.75rem 1.5rem !important;
flex-shrink: 0 !important;
}
/* About page hero buttons container - keep on one line on desktop */
@media (min-width: 769px) {
html body .page-about .hero-buttons {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
gap: 1rem !important;
}
}
/* ===================================================================
12. RESPONSIVE UTILITIES
================================================================== */
@media (width <= 700px) {
.section-title + .red-underline, .why-choose-underline,
.section-title.text-center + .red-underline,
.section-header .section-title + .red-underline {
display: block;
margin-left: auto;
margin-right: auto;
height: 5px;
width: 120px;
background: linear-gradient(90deg, #c8102e 0%, #ff3c3c 100%);
border-radius: 2px;
}
}
@media (width <= 700px) {
.red-underline, .why-choose-underline {
width: 90px;
height: 4px;
}
}
.red-underline {
width: 48px !important;
display: block;
}
/* ===================================================================
13. INSTALLATION PROCESS TIMELINE
================================================================== */
.installation-process .step-badge {
width: 40px;
height: 40px;
background: #0d3e5f;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
margin: 0 auto;
position: relative;
z-index: 3;
}
/* Legacy timeline rules removed - now using installation-steps-container */
/* Legacy project-title and project-desc rules removed */
.installation-process .project-desc {
color: #555;
line-height: 1.6;
text-align: left;
max-width: 500px;
margin: 0 auto;
}
/* ===================================================================
14. CONSISTENT SECTION TITLE OVERRIDES
================================================================== */
/* REMOVED - All section titles now controlled by main .section-title rule above */
/* Navy background section titles now handled above with proper specificity ordering */
/* ===================================================================
15. FINAL OVERRIDES AND FIXES
================================================================== */
/* Ensure proper container padding for desktop service content */
body.main-page .service-content .container,
body.page-tile .service-content .container,
body.page-carpet .service-content .container,
body.page-hardwood .service-content .container,
body.page-lvp .service-content .container,
body.page-other .service-content .container {
padding-left: 48px !important;
padding-right: 48px !important;
}
/* SITE-WIDE PAGE TITLE MARGIN STANDARDS - Mobile */
@media (width <= 700px) {
/* All service pages and main pages */
body.page-tile .section-header,
body.page-tile .section-title,
body.page-carpet .section-header,
body.page-carpet .section-title,
body.page-hardwood .section-header,
body.page-hardwood .section-title,
body.page-lvp .section-header,
body.page-lvp .section-title,
body.page-other .section-header,
body.page-other .section-title,
body.main-page .section-header,
body.main-page .section-title,
/* All other pages */
body.page-about .section-header,
body.page-contact .section-header,
body.page-gallery .section-header,
body.page-showroom .section-header,
.section-header,
.page-title {
margin-top: 42px !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
z-index: 10 !important;
position: relative !important;
}
/* Project gallery and service pages get consistent spacing - no extra margin */
body.project-gallery-page .section-header,
body.page-carpet .section-header,
body.page-tile .section-header,
body.page-lvp .section-header,
body.page-hardwood .section-header,
body.page-laminate .section-header,
body.page-floor-demolition .section-header,
body.page-other .section-header {
margin-top: 0 !important;
}
/* EXTRA SPECIFICITY: Force problematic pages to match working pages */
html body.main-page.page-lvp .container .section-header,
html body.main-page.page-carpet .container .section-header,
html body.main-page .container .section-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* SITE-WIDE PAGE TITLE MARGIN STANDARDS - Tablet */
@media (width >= 701px) and (width <= 768px) {
/* All service pages and main pages */
body.page-tile .section-header,
body.page-carpet .section-header,
body.page-hardwood .section-header,
body.page-lvp .section-header,
body.page-other .section-header,
body.main-page .section-header,
/* All other pages */
body.page-about .section-header,
body.page-contact .section-header,
body.page-gallery .section-header,
body.page-showroom .section-header,
.section-header {
margin-top: 42px !important; /* Match mobile margin */
padding-top: 0 !important;
}
/* Project gallery and service pages get consistent spacing - no extra margin */
body.project-gallery-page .section-header,
body.page-carpet .section-header,
body.page-tile .section-header,
body.page-lvp .section-header,
body.page-hardwood .section-header,
body.page-laminate .section-header,
body.page-floor-demolition .section-header,
body.page-other .section-header {
margin-top: 0 !important;
}
}
/* Service content text alignment */
body.page-tile .service-content p,
body.page-tile .service-content ul,
body.page-tile .service-content li,
body.page-tile .service-content h3,
body.page-tile .service-content h4,
body.page-carpet .service-content p,
body.page-carpet .service-content ul,
body.page-carpet .service-content li,
body.page-carpet .service-content h3,
body.page-carpet .service-content h4,
body.page-lvp .service-content p,
body.page-lvp .service-content ul,
body.page-lvp .service-content li,
body.page-lvp .service-content h3,
body.page-lvp .service-content h4,
body.page-hardwood .service-content p,
body.page-hardwood .service-content ul,
body.page-hardwood .service-content li,
body.page-hardwood .service-content h3,
body.page-hardwood .service-content h4 {
text-align: left !important;
}
/* Service content headers and icons - center align */
body.page-tile .service-content.card-style .section-title,
body.page-tile .service-content.card-style .gallery-icon,
body.page-carpet .service-content.card-style .section-title,
body.page-carpet .service-content.card-style .gallery-icon,
body.page-lvp .service-content.card-style .section-title,
body.page-lvp .service-content.card-style .gallery-icon,
body.page-hardwood .service-content.card-style .section-title,
body.page-hardwood .service-content.card-style .gallery-icon {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Gallery icon styling - removed old conflicting rules */
/* Gallery Modal Caption Overlay */
.gallery-modal-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
padding: 30px 20px 20px 20px;
font-size: 1.1rem;
font-weight: 500;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.gallery-modal:hover .gallery-modal-caption {
opacity: 1;
}
/* Hide brands carousel arrows on desktop - mobile only feature */
@media (min-width: 769px) {
.brands-carousel-arrow {
display: none !important;
}
}
/* How To Find Us section title spacing */
.how-to-find-us-section .section-title {
margin-bottom: 1.5rem !important; /* Add space below section title */
}
/* CTA buttons - ensure consistent height */
.cta-buttons .btn {
min-height: 48px !important; /* Standard button height */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Category Grid - Installation Services */
.category-grid {
display: grid;
gap: 1.5rem;
margin: 2rem 0;
}
/* Desktop: 3 images per row */
@media (width > 989px) {
.category-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
/* Tablet: 2 images per row (from hamburger menu breakpoint to mobile) */
@media (width <= 989px) and (width > 600px) {
.category-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
/* Mobile: 1 image per row (better UX on small screens) */
@media (width <= 600px) {
.category-grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* Category Cards */
.category-card {
position: relative;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}
.category-image {
position: relative;
width: 100%;
height: 280px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
@media (width <= 600px) {
.category-image { height: 240px; }
}
/* Default Overlay */
.category-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
transition: opacity 0.3s ease;
}
.category-title {
color: #fff !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
margin-bottom: 1.5rem !important;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.2 !important;
}
.category-btn {
background: #fff !important;
color: #0d3e5f !important;
border: none !important;
padding: 12px 24px !important;
font-weight: 600 !important;
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
display: inline-block !important;
}
.category-btn:hover {
background: #f8f9fa !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}
/* Hover Overlay */
.category-hover-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(13, 62, 95, 0.95);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.category-card:hover .category-hover-overlay {
opacity: 1;
visibility: visible;
}
.category-card:hover .category-overlay {
opacity: 0;
}
.hover-content {
color: #fff;
text-align: center;
}
.hover-content h3 {
color: #fff !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
margin-bottom: 1rem !important;
}
.hover-content p {
color: #fff !important;
font-size: 0.95rem !important;
margin-bottom: 1.5rem !important;
opacity: 0.9;
}
.hover-content .service-features {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
display: inline-block !important;
}
.hover-content .service-features li {
color: #fff !important;
font-size: 0.9rem !important;
margin-bottom: 0.5rem !important;
position: relative !important;
padding-left: 1.5rem !important;
text-align: left !important;
}
.hover-content .service-features li::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
color: #4CAF50 !important;
font-weight: bold !important;
}
/* 5-STEP INSTALLATION PROCESS TIMELINE */
.installation-process-band {
background: #f8f9fa !important;
padding: 4rem 0 !important;
margin-top: 3rem !important;
}
.installation-steps-container {
display: grid;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
/* Desktop: Horizontal timeline */
@media (width > 989px) {
.installation-steps-container {
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
}
/* Tablet: 2-3 steps per row - DISABLED to allow page-specific CSS */
/* @media (width <= 989px) and (width > 600px) {
.installation-steps-container {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 700px;
}
} */
/* Mobile: Vertical timeline */
@media (width <= 600px) {
.installation-steps-container {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 500px;
}
}
.step-item {
background: #fff;
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.step-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.step-number {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: var(--step-number-color, #173c67) !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 4px 12px rgba(23, 60, 103, 0.3);
}
.step-number span {
color: #fff;
font-weight: 700;
font-size: 1.1rem;
}
.step-icon {
margin: 1rem 0 1.5rem;
}
.step-icon i {
font-size: 2.5rem;
color: var(--step-icon-color, #c8102e);
}
.step-title {
color: var(--step-title-color, #173c67) !important;
font-size: 1.2rem !important;
font-weight: 600 !important;
margin-bottom: 1rem !important;
line-height: 1.3 !important;
}
.step-description {
color: #6c757d !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* ===================================================================
PROJECT GALLERY - OUR WORK SECTION
================================================================== */
.project-gallery {
padding: 3rem 0;
text-align: center;
}
.gallery-grid {
display: grid;
gap: 2rem;
margin: 2rem 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Desktop: 3 images in a row */
@media (width > 768px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
}
}
/* Mobile: Stack images (1 per row) */
@media (width <= 768px) {
.gallery-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
max-width: 400px !important;
}
}
.gallery-item {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: transparent;
margin: 0;
padding: 0;
}
.gallery-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.gallery-item img,
.gallery-item .img-responsive {
width: 100% !important;
height: 350px !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
position: relative !important;
z-index: 1 !important;
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s ease;
z-index: 2;
}
.gallery-item:hover .gallery-overlay {
height: 20%;
padding: 1rem;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.gallery-overlay h4 {
color: #fff !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
margin: 0 !important;
}
/* Gallery CTA Buttons */
.gallery-btn {
background: #5bc0de !important;
color: #fff !important;
border: 2px solid #5bc0de !important;
padding: 12px 24px !important;
margin: 0 0.5rem !important;
font-weight: 600 !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
display: inline-block !important;
}
.gallery-btn:hover {
background: #46b8da !important;
border-color: #46b8da !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(91, 192, 222, 0.3) !important;
}
.portfolio-btn {
background: #173c67 !important;
color: #fff !important;
border: 2px solid #173c67 !important;
padding: 12px 24px !important;
margin: 0 0.5rem !important;
font-weight: 600 !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
display: inline-block !important;
}
.portfolio-btn:hover {
background: linear-gradient(135deg, #173c67 0%, #0d2a47 100%) !important;
border-color: #0d2a47 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(23, 60, 103, 0.3) !important;
}
/* Showroom buttons - normal desktop width */
@media (min-width: 769px) {
.showroom-btn-primary,
.showroom-btn-secondary {
padding: 1rem 3rem !important; /* Wider desktop padding */
min-width: 200px !important; /* Minimum button width */
font-size: 1rem !important; /* Standard desktop font size */
}
}
/* Mobile showroom buttons */
@media (max-width: 768px) {
.showroom-btn-primary,
.showroom-btn-secondary {
width: 100% !important; /* Full width on mobile */
justify-content: center !important; /* Center content */
padding: 1rem 2rem !important;
}
}
/* Installation page - standardize all section title margins */
body.page-installation .section-title,
body.page-installation h2.section-title,
body.page-installation .service-card .section-title,
body.page-installation .project-gallery .section-title,
body.page-installation .complete-installation-band .section-title,
body.page-installation .why-choose-us .section-title,
body.page-installation .lvp-showroom-block .section-title,
body.page-installation .cta-band .section-title {
margin-top: 1rem !important; /* Standard top margin */
margin-bottom: 1rem !important; /* Standard bottom margin */
padding-top: 0 !important; /* Remove conflicting padding */
}
/* Installation page mobile - ensure consistent margins */
@media (max-width: 700px) {
body.page-installation .section-title,
body.page-installation h2.section-title {
margin-top: 1rem !important; /* Standard mobile margin */
margin-bottom: 1rem !important;
padding-top: 0 !important;
}
/* Override any specific inline overrides */
body.page-installation .why-choose-block .section-title {
margin-top: 1rem !important; /* Override the 78px inline style */
padding-top: 0 !important;
}
}
/* Home footer CTA - reduce size on tablet/desktop to match mobile */
@media (min-width: 701px) {
.home-footer-image-overlay h2 {
font-size: 1.5rem !important; /* Smaller heading size for tablet/desktop */
line-height: 1.3 !important;
}
.home-footer-image-overlay .btn {
font-size: 0.95rem !important; /* Smaller button text */
padding: 0.75rem 1.5rem !important; /* Smaller button padding */
}
}
/* ===================================================================
PROJECT GALLERY STYLES
================================================================== */
/* Project Gallery Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
margin: 36px 0 48px 0;
justify-items: center;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.gallery-thumb {
cursor: pointer;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(32,97,186,0.08);
background: #fff;
outline: none;
width: 100%;
max-width: 350px;
aspect-ratio: 3/2;
position: relative;
}
.gallery-thumb:focus,
.gallery-thumb:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 40px rgba(32,97,186,0.20);
}
.gallery-thumb img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* Modal Styles */
.gallery-modal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 9999;
left: 0; top: 0; width: 100vw; height: 100vh;
background: rgba(20,30,50,0.92);
transition: opacity 0.2s;
}
.gallery-modal-img {
max-width: 700px;
max-height: 700px;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(32,97,186,0.25);
background: #fff;
margin: 0 40px;
object-fit: contain;
}
.gallery-modal-close {
position: absolute;
top: 32px;
right: 52px;
font-size: 2.8rem;
color: #fff;
cursor: pointer;
z-index: 10001;
transition: color 0.18s;
}
.gallery-modal-close:hover,
.gallery-modal-close:focus {
color: #c8102e;
}
.gallery-modal-arrow {
position: absolute;
top: 50%;
font-size: 3rem;
color: #fff;
cursor: pointer;
z-index: 10001;
user-select: none;
padding: 8px 18px;
border-radius: 50%;
background: rgba(32,97,186,0.18);
transform: translateY(-50%);
transition: background 0.18s, color 0.18s;
}
.gallery-modal-arrow-left {
left: 18vw;
}
.gallery-modal-arrow-right {
right: 18vw;
}
.gallery-modal-arrow:hover,
.gallery-modal-arrow:focus {
background: #2061ba;
color: #fff;
}
@media (max-width: 700px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-items: stretch;
max-width: none;
}
.gallery-thumb {
width: 100%;
min-width: 0;
max-width: none;
aspect-ratio: 3/2;
}
.gallery-thumb img {
width: 100%;
min-width: 0;
height: 100%;
object-fit: cover;
}
.gallery-modal-img {
max-width: min(700px, 95vw);
max-height: min(700px, 70vh);
margin: 0 2.5vw;
}
.gallery-modal-close {
top: 18px;
right: 18px;
font-size: 2.2rem;
}
.gallery-modal-arrow-left {
left: 2vw;
}
.gallery-modal-arrow-right {
right: 2vw;
}
}
/* ===================================================================
CTA BAND STYLES
================================================================== */
/* Full-width blue band for CTA sections */
.band--blue {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: #9ABDDC;
padding: 4rem 0;
}
.band--blue.no-padding {
padding: 4rem 0;
}
/* NUCLEAR OPTION - Override ALL possible margin rules */
#page-wrapper > .band--blue,
#page-wrapper > .band--blue.no-padding,
.band--blue,
.band--blue.no-padding,
div.band--blue,
div.band--blue.no-padding {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.band--blue .container {
position: relative;
z-index: 1;
}
/* Mobile responsive for CTA block */
@media (max-width: 768px) {
/* Stack the two-column layout on mobile */
.band--blue .container > div > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
/* Make all buttons full width on mobile */
.band--blue a,
.band--blue div[style*="min-width"] {
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
text-align: center !important;
}
/* Ensure showroom button text fits on mobile */
.band--blue .btn-outline {
padding: 0.75rem 0.5rem !important;
font-size: 0.85rem !important;
}
/* Add horizontal line between sections on mobile only */
.band--blue .container > div > div[style*="grid-template-columns"] > div:first-child::after {
content: "";
display: block;
width: 80%;
height: 1px;
background: rgba(255,255,255,0.3);
margin: 2rem auto;
}
/* Reduce padding on mobile */
.band--blue {
padding: 3rem 0 !important;
}
.band--blue .container > div {
padding: 3rem 2rem !important;
}
}
/* ===================================================================
GLOBAL VERTICAL RHYTHM SYSTEM
================================================================== */
/* === GLOBAL VERTICAL RHYTHM — Consistent spacing across the site === */
:root{
/* Tune these three and the whole site breathes with you */
--vr-min: 44px; /* mobile base spacing */
--vr-mid: 64px; /* tablet sweet spot */
--vr-max: 88px; /* desktop airy cap */
/* derived tokens */
--vr-section-y: clamp(var(--vr-min), 7.5vw, var(--vr-max));
--vr-tight: clamp(12px, 2.2vw, 20px);
--vr-med: clamp(16px, 2.8vw, 24px);
--vr-loose:clamp(20px, 3.2vw, 28px);
}
/* Page title breathing room - more space under navigation */
.page-title {
margin-top: 0 !important; /* Reset to prevent double spacing */
margin-bottom: var(--vr-med) !important;
}
/* Page wrapper gets more top space for breathing room - CONSISTENT ACROSS ALL PAGES */
#page-wrapper {
padding-top: 130px !important; /* Increased for better breathing room */
}
/* ULTIMATE NUCLEAR OPTION - Force consistent spacing everywhere */
html body #page-wrapper,
html body.main-page #page-wrapper,
html body.page-blog #page-wrapper,
html body.page-about #page-wrapper,
html body.project-gallery-page #page-wrapper,
html body.page-commercial-portfolio #page-wrapper,
html body.blog-page #page-wrapper,
html body.about-page #page-wrapper,
html body.page-project-gallery #page-wrapper {
padding-top: 130px !important;
}
/* Mobile override for all page types */
@media (width <= 700px) {
html body #page-wrapper,
html body.main-page #page-wrapper,
html body.page-blog #page-wrapper,
html body.page-about #page-wrapper,
html body.project-gallery-page #page-wrapper,
html body.page-commercial-portfolio #page-wrapper {
padding-top: 110px !important;
}
}
/* ABSOLUTE FINAL OVERRIDE - Maximum specificity for problematic pages */
html body.main-page.project-gallery-page #page-wrapper,
html body.main-page.page-blog #page-wrapper,
html body.main-page.page-about #page-wrapper,
html body div#page-wrapper {
padding-top: 130px !important;
}
@media (max-width: 700px) {
html body.main-page.project-gallery-page #page-wrapper,
html body.main-page.page-blog #page-wrapper,
html body.main-page.page-about #page-wrapper,
html body.main-page.page-carpet #page-wrapper,
html body.main-page.page-tile #page-wrapper,
html body.main-page.page-lvp #page-wrapper,
html body.main-page.page-hardwood #page-wrapper,
html body.main-page.page-laminate #page-wrapper,
html body.main-page.page-floor-demolition #page-wrapper,
html body.main-page.page-other #page-wrapper,
html body div#page-wrapper {
padding-top: 110px !important;
}
}
/* REMOVED: Global section padding was causing unwanted gaps */
/* .band,
section{
padding-top: var(--vr-section-y) !important;
padding-bottom: var(--vr-section-y) !important;
} */
/* If you use angles/waves, tuck by 1px to avoid seams */
.band[class*="angle"],
.band[class*="wave"]{
margin-top:-1px !important;
position:relative;
z-index:0;
}
/* When sections meet, add a micro buffer that collapses if not needed */
.band + .band,
.band + section,
section + .band{
margin-top: 2px !important;
}
/* H2 spacing (keeps your red underline comfy) */
.section-title{
margin-top: var(--vr-tight) !important;
margin-bottom: var(--vr-med) !important;
}
/* Subtitle or first paragraph right after H2 */
.section-title + .section-subtitle,
.section-title + p{
margin-top: var(--vr-tight) !important;
margin-bottom: var(--vr-med) !important;
line-height: 1.5; /* friendlier scan */
}
/* Paragraph stacks inside content areas */
.service-content p + p,
.service-content ul,
.service-content ol{
margin-top: var(--vr-tight) !important;
}
/* Testimonials breathe before next block */
.testimonial-content{
margin-bottom: var(--vr-loose) !important;
}
/* Commercial portfolio gets a touch more intro space */
.commercial-portfolio-text-bg{
padding-top: calc(var(--vr-section-y) * 0.6) !important;
}
/* Handy modifiers (per-section opt-ins, no redesigns) */
/* Use when a block needs to be denser or airier than default */
.is-dense { --vr-section-y: clamp(36px, 6vw, 64px); }
.is-airy { --vr-section-y: clamp(56px, 9vw, 112px); }
/* Title density modifiers */
.title-tight .section-title{
margin-top: 8px !important;
margin-bottom: var(--vr-tight) !important;
}
.title-airy .section-title{
margin-top: var(--vr-med) !important;
margin-bottom: var(--vr-loose) !important;
}
/* Override existing inconsistent section spacing */
/* REMOVED: Specific section padding was causing unwanted gaps */
/* .services-section,
.welcome-message-section,
.testimonial-section,
.brands-section,
.cta-section {
padding-top: var(--vr-section-y) !important;
padding-bottom: var(--vr-section-y) !important;
} */
/* Ensure all section titles follow the same spacing rules */
h2.section-title,
.section-title {
margin-top: var(--vr-tight) !important;
margin-bottom: var(--vr-med) !important;
}
/* Override any existing margin/padding on content containers */
.service-content,
.section-content,
.container > .section-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ===================================================================
NEW SITE-WIDE SPACING STANDARDS (2025-10-06)
Extracted from carpet-new-layout - now the default for all pages
================================================================== */
/* Core section spacing - replaces carpet-new-layout system */
.section-header {
margin-bottom: 0.3rem !important;
margin-top: 0 !important;
}
.process-header {
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
}
/* Section titles - tighter spacing */
.section-title {
margin-top: 0 !important;
margin-bottom: 0.3rem !important;
}
/* REMOVED: Global section padding was preventing seamless layouts */
/* section {
padding-top: 1rem !important;
} */
/* Desktop spacing for section intros */
@media (min-width: 1200px) {
.section-intro {
margin: 0.5rem auto 2.8rem !important;
}
}
/* Tablet spacing */
@media (max-width: 1199px) and (min-width: 769px) {
.section-intro {
margin: 0.5rem auto 2.8rem !important;
}
}
/* Mobile spacing - MISSING RULE ADDED */
@media (max-width: 768px) {
.section-intro {
margin: 0.5rem auto 2.8rem !important;
}
}
/* Mobile spacing adjustments */
@media (max-width: 768px) {
.section-header {
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
}
.process-header {
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
}
.section-title {
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
}
section {
padding-top: 1.5rem !important;
}
}
/* ===================================================================
END OF CLEAN PAGES.CSS
================================================================== */