/* * Base stylesheet for the React Fueling web site. * * Colors are derived from the swirling abstract artwork used on * the home page to create a cohesive look and feel. The palette * consists of deep blues and warm oranges to evoke both fuel and * energy. Consistent spacing and typography help the content * breathe on screens of all sizes. */ /* CSS Variables allow the colour palette to be easily reused throughout the site. */ :root { --primary-color: #0B2545; /* dark blue used for header/footer */ --secondary-color: #1D4E89; /* medium blue used for section backgrounds */ --accent-color: #F28705; /* orange used for calls to action */ --text-color: #333; /* default body text colour */ --light-background: #F8F9FA; /* subtle background for alternating sections */ --white: #FFFFFF; --max-width: 1200px; --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family-base); color: var(--text-color); line-height: 1.6; background-color: var(--white); /* Prevent horizontal scrolling on mobile. Some elements (like calculators or carousels) may extend beyond the viewport; this ensures the page doesn't pan side-to-side while scrolling. */ overflow-x: hidden; } /* Prevent horizontal scrolling on the element as well. Some browsers apply horizontal scroll to the root element even when body is hidden. */ html { overflow-x: hidden; } /* Header and Navigation */ header { background-color: var(--primary-color); color: var(--white); padding: 0.5rem 1rem; position: sticky; top: 0; z-index: 999; } /* Navigation toggle button (hamburger) for mobile */ .nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; } nav ul.open { display: flex !important; } nav { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } nav .logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 0.05em; } /* Ensure the logo image is larger and white. By applying a filter we invert the dark logo provided by the user so it appears white against the dark navigation bar. */ nav .logo img { /* Increase the logo height significantly (five times larger than before) and invert the dark logo so it appears white on the dark bar. The maximum height is set relative to the header to avoid overlapping navigation links. */ /* Make the primary logo larger to stand out in the header. The previous version increased the height to 300px, but that pushed the hero out of view. A height of around 120px balances prominence with usability. The filter ensures the dark logo provided by the user appears white on the dark background. */ /* Increase the logo height for greater prominence in the header. Because the logo image has been cropped to remove surrounding whitespace, we can safely double its display size without significantly increasing the header's overall height. */ height: 160px; filter: brightness(0) invert(1); } nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; } nav a { color: var(--white); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } nav a:hover { color: var(--accent-color); } /* Hero section */ .hero { position: relative; min-height: 70vh; /* Use the industrial hero image showing a generator and fuel cell for a more realistic, industrial feel on the home page. */ background-image: url('../images/industrial_hero.png'); background-size: cover; background-position: center center; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; padding: 1rem; } .hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1.2; } .hero p { font-size: 1.1rem; margin-bottom: 1.5rem; color: #e6e6e6; } .btn { display: inline-block; background-color: var(--accent-color); color: var(--white); padding: 0.8rem 1.5rem; border-radius: 3px; text-decoration: none; font-weight: bold; transition: background-color 0.2s ease; } .btn:hover { background-color: #d87404; } /* Sections */ section { padding: 4rem 1rem; } /* Top Bar */ .top-bar { background-color: var(--secondary-color); color: var(--white); padding: 0.4rem 1rem; font-size: 0.85rem; } .top-bar .top-bar-container { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .top-bar a { color: var(--accent-color); text-decoration: none; font-weight: bold; } .top-bar a:hover { text-decoration: underline; } /* Style call-to-action link in the top bar to look like a mini button */ .top-bar .top-cta a { background-color: var(--accent-color); color: var(--white); padding: 0.3rem 0.75rem; border-radius: 3px; font-weight: bold; } .top-bar .top-cta a:hover { background-color: #d87404; } .container { max-width: var(--max-width); margin: 0 auto; } /* About Section */ #about { background-color: var(--light-background); } #about .content { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; } #about .text { flex: 1 1 400px; } #about .image { flex: 1 1 300px; background-image: url('../images/background.png'); background-size: cover; background-position: center; height: 300px; border-radius: 8px; } #about h2 { margin-top: 0; font-size: 2rem; color: var(--primary-color); } #about p { margin-bottom: 1rem; font-size: 1rem; } /* Services Section */ #services h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; color: var(--primary-color); } .service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .service-item { background-color: var(--light-background); padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .service-item:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .service-item h3 { margin-top: 0; color: var(--secondary-color); margin-bottom: 0.5rem; } .service-item p { margin: 0; } /* Service Icons */ .service-item .service-icon { background-color: var(--accent-color); color: var(--white); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; } /* Why Choose Us Section */ #why-choose { background-color: var(--secondary-color); color: var(--white); padding: 3rem 1rem; } #why-choose h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; } #why-choose ul { list-style: none; max-width: 600px; margin: 0 auto; padding: 0; } #why-choose li { margin-bottom: 1rem; display: flex; align-items: flex-start; } #why-choose li::before { content: '✓'; font-weight: bold; color: var(--accent-color); margin-right: 0.75rem; font-size: 1.25rem; line-height: 1; } /* Footer */ footer { background-color: var(--primary-color); color: var(--white); padding: 2rem 1rem; } footer .footer-logo { height: 80px; filter: brightness(0) invert(1); margin-bottom: 0.5rem; } footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.2); margin-top: 2rem; padding-top: 1rem; text-align: center; font-size: 0.9rem; } footer .footer-bottom a { color: var(--accent-color); text-decoration: none; margin: 0 0.3rem; } footer .footer-bottom a:hover { text-decoration: underline; } footer .footer-container { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; } footer .footer-section { flex: 1 1 200px; } footer h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.2rem; } footer a { color: var(--white); text-decoration: none; } footer a:hover { text-decoration: underline; color: var(--accent-color); } /* Media Queries for responsiveness */ @media (max-width: 768px) { nav ul { flex-direction: column; gap: 0; margin-top: 0.5rem; display: none; /* hide navigation links by default on mobile */ width: 100%; background-color: var(--primary-color); padding: 0.5rem 0; } nav ul li { margin-bottom: 0.5rem; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } #about .content { flex-direction: column; } footer .footer-container { flex-direction: column; } .nav-toggle { display: block; } nav { justify-content: space-between; align-items: center; } } /* Page banner (for subpages) */ .page-banner { position: relative; min-height: 40vh; background-image: url('../images/background.png'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--white); text-align: center; } .page-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; } .page-banner h1 { position: relative; z-index: 2; margin: 0; font-size: 2.2rem; } /* When a banner contains an overlay logo (used on the About page), this class positions the logo centrally and makes it semi-transparent so it doesn’t overpower the heading. The brightness filter inverts our dark logo to white. */ .about-banner-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 140px; filter: brightness(0) invert(1); opacity: 0.15; z-index: 1; } /* Highlights (Why Choose Us) Section */ /* The highlights grid showcases the key advantages of choosing React Fueling. Each card uses an emoji inside a coloured circle to provide a friendly visual reference without relying on external icon libraries. The layout adapts responsively across screen sizes. */ #highlights { background-color: var(--secondary-color); color: var(--white); padding: 3rem 1rem; } #highlights h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; } .highlight-list { display: grid; /* Use auto-fit by default; on larger screens explicitly set four columns for symmetrical rows. */ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: var(--max-width); margin: 0 auto; } @media (min-width: 992px) { .highlight-list { grid-template-columns: repeat(4, 1fr); } } .highlight-item { display: flex; flex-direction: column; align-items: center; background-color: rgba(255, 255, 255, 0.05); padding: 1.5rem; border-radius: 8px; text-align: center; } .highlight-item .icon { background-color: var(--accent-color); color: var(--white); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; } .highlight-item h3 { margin: 0 0 0.5rem; color: var(--white); font-size: 1.2rem; } .highlight-item p { margin: 0; font-size: 0.95rem; } /* Testimonials Section */ /* Testimonials build social proof by showcasing quotes from satisfied clients. Cards have subtle shadows and change elevation on hover to invite engagement. Star ratings use the unicode star character coloured with the accent colour. */ #testimonials { background-color: var(--light-background); padding: 3rem 1rem; } #testimonials h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; color: var(--primary-color); } .testimonial-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: var(--max-width); margin: 0 auto; } .testimonial-item { background-color: var(--white); padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .testimonial-item:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .testimonial-item .stars { color: var(--accent-color); margin-bottom: 0.5rem; font-size: 1.1rem; } .testimonial-item p { margin: 0 0 0.75rem; font-style: italic; } .testimonial-item .author { font-weight: bold; color: var(--secondary-color); font-size: 0.9rem; } /* Horizontal carousel of equipment pictures under testimonials */ .client-carousel { display: flex; overflow-x: auto; gap: 1rem; margin-top: 2rem; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; } .client-carousel::-webkit-scrollbar { height: 6px; } .client-carousel::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 3px; } .client-carousel .carousel-item { /* Show five items at a time by dividing the available width minus gaps. */ flex: 0 0 calc((100% - (4 * 1rem)) / 5); scroll-snap-align: center; } .client-carousel .carousel-placeholder { background-color: #eef2f5; height: 150px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8a8f98; font-size: 1rem; border: 1px dashed #ccc; } /* Heading for the available fuel tanks carousel */ .carousel-heading { text-align: center; margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem; color: var(--primary-color); } /* Generic CTA sections used throughout the page */ .cta-section { background-color: var(--light-background); padding: 3rem 1rem; text-align: center; } .cta-section h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 2rem; color: var(--primary-color); } .cta-section p { margin-bottom: 1.5rem; color: var(--text-color); } .cta-section .btn-cta { background-color: var(--accent-color); color: var(--white); padding: 0.7rem 1.5rem; border-radius: 4px; font-weight: bold; text-decoration: none; transition: background-color 0.2s ease; } .cta-section .btn-cta:hover { background-color: #d87404; } /* Carousel navigation container and buttons */ .carousel-container { position: relative; display: flex; align-items: center; justify-content: center; } .carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--primary-color); color: var(--white); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; z-index: 2; opacity: 0.85; transition: opacity 0.2s ease; } .carousel-prev:hover, .carousel-next:hover { opacity: 1; } .carousel-prev { left: -20px; } .carousel-next { right: -20px; } /* Call To Action Section */ /* The CTA section draws attention with a contrasting background and offers a clear, action‑oriented button. It sits above the footer on the home page, encouraging visitors to request a quote or contact the team. */ #cta { background-color: var(--primary-color); color: var(--white); padding: 3rem 1rem; text-align: center; } #cta h2 { font-size: 2rem; margin-bottom: 1rem; } #cta p { margin-bottom: 1.5rem; } #cta .btn-cta { display: inline-block; background-color: var(--accent-color); color: var(--white); padding: 0.8rem 1.5rem; border-radius: 3px; text-decoration: none; font-weight: bold; transition: background-color 0.2s ease; } #cta .btn-cta:hover { background-color: #d87404; } /* Trust Badges */ #badges { background-color: var(--light-background); color: var(--primary-color); padding: 3rem 1rem; } #badges h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; } .badge-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; max-width: var(--max-width); margin: 0 auto; } .badge-item { background-color: var(--white); border: 1px solid #eaeaea; border-radius: 8px; text-align: center; padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .badge-item:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.07); } .badge-item .icon { background-color: var(--accent-color); color: var(--white); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1rem; } .badge-item h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--secondary-color); } .badge-item p { margin: 0; font-size: 0.95rem; color: var(--text-color); } /* Blog Page */ /* Blog cards present articles with a thumbnail, title, date and excerpt. The layout uses a responsive grid similar to services. Colours harmonise with the rest of the site. Read‑more links use the accent colour for emphasis. */ #blog-content { padding: 3rem 1rem; } .blog-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: var(--max-width); margin: 0 auto; } .blog-item { background-color: var(--light-background); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-item:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .blog-item img { width: 100%; height: 180px; object-fit: cover; display: block; } .blog-item .blog-content { padding: 1rem 1.2rem 1.5rem; } .blog-item h3 { margin: 0 0 0.5rem; color: var(--secondary-color); font-size: 1.2rem; } .blog-item .date { font-size: 0.85rem; color: #777; margin-bottom: 0.75rem; } .blog-item p { margin: 0 0 1rem; } .blog-item a.read-more { color: var(--accent-color); text-decoration: none; font-weight: bold; } .blog-item a.read-more:hover { text-decoration: underline; } /* Service detail blocks on the services page */ .service-block { margin-bottom: 3rem; } .service-block h2 { color: var(--primary-color); margin-top: 0; margin-bottom: 1rem; font-size: 1.8rem; } .service-block p { margin-bottom: 1rem; line-height: 1.6; } /* Tank grid for portable fuel tanks */ .tank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .tank-card { background-color: var(--light-background); padding: 1rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); text-align: center; } .tank-card img { width: 100%; height: 150px; object-fit: contain; margin-bottom: 0.75rem; } .tank-card h3 { margin-top: 0; margin-bottom: 0.5rem; color: var(--secondary-color); font-size: 1.1rem; } .tank-card p { margin: 0; font-size: 0.95rem; } /* Case study blocks on the projects page */ .case-study { margin-bottom: 3rem; } .case-study h2 { color: var(--primary-color); margin-top: 0; margin-bottom: 0.75rem; font-size: 1.8rem; } .case-study p { margin-bottom: 1rem; line-height: 1.6; } /* Calculator styles: create attractive cards for the generator sizing and fuel consumption tools. These forms sit under the hero section on the home page. */ #calculators { background-color: var(--light-background); padding-top: 3rem; padding-bottom: 3rem; } #calculators h2 { text-align: center; margin-top: 0; margin-bottom: 2rem; font-size: 2rem; color: var(--primary-color); } .calculator-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; } .calculator { background-color: var(--white); border: 1px solid #e5e5e5; border-radius: 8px; padding: 1.5rem; flex: 1 1 300px; max-width: 400px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .calculator h3 { color: var(--secondary-color); margin-top: 0; margin-bottom: 0.75rem; font-size: 1.4rem; } .calculator p { margin-bottom: 1rem; } .calculator label { display: block; margin-bottom: 0.4rem; font-weight: 600; } .calculator input, .calculator select { width: 100%; padding: 0.6rem; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 1rem; font-size: 1rem; } .calculator button { background-color: var(--accent-color); color: var(--white); padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1rem; transition: background-color 0.2s ease; } .calculator button:hover { background-color: #d87404; } .calc-result { margin-top: 0.75rem; font-weight: bold; color: var(--secondary-color); } /* Fleet fueling calculator (horizontal layout) */ #fleet-savings { background-color: var(--light-background); padding: 3rem 1rem; } #fleet-savings h2 { text-align: center; margin-top: 0; margin-bottom: 1rem; font-size: 2rem; color: var(--primary-color); } #fleet-savings p { color: var(--text-color); } .fleet-form-horizontal { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; } .fleet-form-horizontal .form-group { display: flex; flex-direction: column; /* Give each input group equal growing space so they align evenly across the row. A fixed minimum width prevents the labels and inputs from becoming too small on narrow screens, while removing the max width allows them to stretch uniformly. */ flex: 1; min-width: 180px; } .fleet-form-horizontal .form-group label { font-weight: 600; margin-bottom: 0.4rem; } .fleet-form-horizontal .form-group input { padding: 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } .fleet-form-horizontal .button-group { /* Position the button at the bottom of the form inputs while taking up the same width as other form groups to maintain alignment. */ align-self: flex-end; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-width: 180px; } .fleet-form-horizontal button { background-color: var(--accent-color); color: var(--white); padding: 0.7rem 1.4rem; border: none; border-radius: 4px; font-weight: bold; font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; } .fleet-form-horizontal button:hover { background-color: #d87404; } #fleet-savings .calc-result { text-align: center; margin-top: 1rem; } /* Map section styles */ #map-section { background-color: var(--light-background); padding: 4rem 1rem; } #map-section h2 { text-align: center; margin-top: 0; margin-bottom: 1rem; font-size: 2rem; color: var(--primary-color); } #texas-map { position: relative; margin: 2rem auto; width: 100%; max-width: 600px; height: 400px; /* Provide a soft background so the Texas outline stands out. We rely on an actual inside the container instead of a CSS background. This prevents conflicts between the map image and the CSS background. */ background-color: #f6f9fc; border-radius: 8px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); overflow: hidden; } /* On small screens the map container should scale proportionally to its width so the pins remain correctly aligned. We achieve this by using a percentage padding-top instead of a fixed height. The percentage approximates the aspect ratio of the Texas map image. */ @media (max-width: 767px) { #texas-map { height: 0; /* The Texas outline image has an aspect ratio of approximately 0.68 (height/width). To maintain the same aspect ratio on mobile and keep the pins aligned, set padding-top accordingly. */ padding-top: 68%; } /* Adjust pin positions on small screens so they better align with the map when it scales down. These values were empirically selected to align with the city labels on the provided Texas outline. */ #texas-map .pin[data-city="houston"] { top: 63%; left: 85%; } #texas-map .pin[data-city="dallas"] { top: 38%; left: 78%; } #texas-map .pin[data-city="austin"] { top: 60%; left: 72%; } #texas-map .pin[data-city="sanantonio"] { top: 68%; left: 67%; } #texas-map .pin[data-city="fortworth"] { top: 36%; left: 75%; } #texas-map .pin[data-city="elpaso"] { top: 45%; left: 27%; } /* Reduce spacing specifically between the savings CTA and the following About section on mobile. The default section padding creates too much vertical space, so override it for this particular CTA. */ #cta-savings.cta-section { padding-top: 1.5rem; padding-bottom: 1.5rem; margin-bottom: 1rem; } /* Hide the decorative image in the About section on mobile. The background image doesn’t render and leaves excess white space on small screens, so hide the element entirely. */ #about .image { display: none; } } /* Range slider styles for the fleet savings calculator */ .fleet-form-horizontal input[type=range] { -webkit-appearance: none; width: 100%; height: 6px; background: #e4e7eb; border-radius: 3px; outline: none; margin-top: 0.5rem; } .fleet-form-horizontal input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; transition: background 0.2s ease; } .fleet-form-horizontal input[type=range]::-webkit-slider-thumb:hover { background: #d87404; } .fleet-form-horizontal input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; transition: background 0.2s ease; } .fleet-form-horizontal input[type=range]::-moz-range-thumb:hover { background: #d87404; } .fleet-form-horizontal label span { font-weight: 700; color: var(--primary-color); } /* Apply similar styling to all range inputs on the calculators so they match the fleet savings sliders */ #calculators input[type=range], .calculator input[type=range] { -webkit-appearance: none; width: 100%; height: 6px; background: #e4e7eb; border-radius: 3px; outline: none; margin-top: 0.5rem; } #calculators input[type=range]::-webkit-slider-thumb, .calculator input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; transition: background 0.2s ease; } #calculators input[type=range]::-webkit-slider-thumb:hover, .calculator input[type=range]::-webkit-slider-thumb:hover { background: #d87404; } #calculators input[type=range]::-moz-range-thumb, .calculator input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; transition: background 0.2s ease; } #calculators input[type=range]::-moz-range-thumb:hover, .calculator input[type=range]::-moz-range-thumb:hover { background: #d87404; } #calculators label span, .calculator label span { font-weight: 700; color: var(--primary-color); } #texas-map .pin { position: absolute; width: 14px; height: 14px; background-color: var(--accent-color); border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); } #texas-map .pin:hover { transform: translate(-50%, -50%) scale(1.3); } #texas-map .map-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; /* Position the map centrally within its container so it scales predictably on both desktop and mobile. Using 50%/50% centres the map in the container, allowing pin coordinates specified as percentages to remain consistent across different screen widths. */ object-position: 50% 50%; border-radius: inherit; pointer-events: none; /* allow clicks to reach the pins */ /* Lighten the map so the pins stand out. */ opacity: 0.2; } #map-info { max-width: 600px; margin: 1rem auto 0; text-align: center; } #map-info h3 { margin-bottom: 0.5rem; color: var(--secondary-color); } #map-info p { margin: 0; line-height: 1.5; } /* Ensure the highlight items display symmetrically (e.g., 3 per row) on medium and larger screens. Without this, the auto-fit grid might produce uneven rows (like five items on one row and one on another). */ @media (min-width: 768px) { .highlight-list { grid-template-columns: repeat(3, 1fr); } } /* Reduce vertical padding on CTA sections for small screens to remove excessive gaps between sections (e.g., between "See how much you can save" and "About Us"). */ @media (max-width: 767px) { .cta-section { /* Reduce vertical padding on mobile to decrease large gaps between sections */ padding: 1.5rem 1rem; } } /* Add a scroll margin to the fleet savings section so anchor links position the section below the header and top bar. Without this, the "Try our savings calculator" button can overshoot the section. */ #fleet-savings { scroll-margin-top: 140px; } /* Ensure service images scale nicely and provide spacing */ /* Service block images: keep them constrained so they don't overwhelm the section. We set a max-height to maintain a balanced layout on desktop and mobile. */ /* Service block images: show the entire image by containing it within the designated space instead of cropping. We keep a fixed height but allow white space on the sides if the aspect ratio differs. */ .service-image { width: 100%; height: 250px; max-height: 250px; border-radius: 8px; margin-bottom: 1rem; object-fit: contain; background-color: #f7f9fb; padding: 4px; } /* Resize images inside the carousel to match the original placeholder height. */ .client-carousel .carousel-item img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; } /* Mobile override for carousel - show 3 items instead of 5 */ @media (max-width: 768px) { .client-carousel .carousel-item { flex: 0 0 calc((100% - (2 * 1rem)) / 3); } }