and <meta name="description"> - <link rel="preload"> for the page's hero/LCP image - Inline <script> to add the .js class (must run before this stylesheet loads so .js .reveal { opacity: 0 } applies immediately, preventing a flash of visible content) Required <head> order in every HTML file: 1. <meta> tags (charset, viewport, color-scheme, title, description) 2. <link rel="icon" ...> 3. <link rel="preload" as="image" href="images/..." fetchpriority="high"> 4. <script>document.documentElement.classList.add("js");</script> 5. <link rel="stylesheet" href="styles.css"> 6. <script src="main.js" defer></script> ======================================================================== */ /* ======================================================================== 1. DESIGN TOKENS ======================================================================== */ :root { --accent-blue: #0047ff; --accent-orange: #f79d00; --accent-card-button-hover: #0036cc; /* LIGHT MODE HIERARCHY — mirrors dark mode: body = darkest, container = lighter, card = lightest. body-bg: #c4ccda (rgb 196,204,218) — a light blue-gray, clearly "light" but the darkest of the three layers. glass-bg: rgba(226,234,246,0.7) — composites over body to ~rgb(217,225,238), visibly lighter than body. card-bg: rgba(240,244,252,0.65) — composites over container to ~rgb(232,237,247), lightest layer, but NOT 255,255,255. */ --body-bg: #c4ccda; --text-main: #000000; --text-sub: #333333; --text-nav: #0047ff; --glass-bg: rgba(226, 234, 246, 0.7); --glass-border: rgba(255, 255, 255, 0.8); --card-bg: rgba(240, 244, 252, 0.65); --card-border: rgba(255, 255, 255, 0.8); --nav-dropdown-bg: rgba(226, 234, 246, 0.92); /* Glass-style border for the CTA and READ MORE buttons. Translucent accent blue — not white — so it reads as a tinted glass edge against the colored button fill. */ --button-glass-border: rgba(0, 71, 255, 0.25); --shadow-soft: rgba(0, 0, 0, 0.08); --shadow-medium: rgba(0, 0, 0, 0.12); --shadow-strong: rgba(0, 0, 0, 0.18); --transition-duration: 0.4s; --transition-timing: cubic-bezier(0.4, 0, 0.2, 1); --transition: all var(--transition-duration) var(--transition-timing); --cta-glass-border: rgba(255, 200, 120, 0.8); --readmore-glass-border: rgba(120, 150, 255, 0.8); /* Carousel button states — three visual tiers: inactive: transparent gray fill + gray arrow active: transparent orange fill + blue arrow hover: solid orange fill + solid blue arrow The "transparent" states keep backdrop-filter: blur(8px) so the gaussian glass effect still applies. Only the background opacity changes between states. */ --carousel-inactive-bg: rgba(128, 128, 128, 0.25); --carousel-inactive-arrow: #888; --carousel-active-bg: rgba(247, 157, 0, 0.9); } /* ======================================================================== 2. DARK THEME ADAPTER ======================================================================== */ @media (prefers-color-scheme: dark) { :root { --body-bg: #0b0f19; --text-main: #ffffff; --text-sub: #e0e0e0; --text-nav: rgb(116, 161, 248); --accent-blue: #66a3ff; --accent-orange: #faa72a; --accent-card-button-hover: #85b8ff; --glass-bg: rgba(18, 24, 32, 0.7); --glass-border: rgba(46, 52, 71, 0.9); --card-bg: rgba(28, 35, 45, 0.6); --card-border: rgba(46, 52, 71, 0.9); --nav-dropdown-bg: rgba(28, 35, 45, 0.95); --button-glass-border: rgba(102, 163, 255, 0.3); --shadow-soft: rgba(0, 0, 0, 0.4); --shadow-medium: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.6); --cta-glass-border: rgba(255, 210, 140, 0.9); --readmore-glass-border: rgba(160, 190, 255, 0.9); --carousel-inactive-bg: rgba(100, 100, 100, 0.25); --carousel-inactive-arrow: #555; --carousel-active-bg: rgba(250, 167, 42, 0.9); } } /* ======================================================================== 3. RESET AND BASICS ======================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* clip (not hidden) stops horizontal panning WITHOUT creating a scroll container, so it doesn't break the sticky navbar. It clips the bled-out background pseudo-elements and the off-edge buttons. */ overflow-x: clip; /* Safari 26 samples html/body background-color for toolbar tint and as a fallback; an explicit value stops it defaulting to white/black. */ background-color: var(--body-bg); /* kill horizontal rubber-band bounce */ overscroll-behavior-x: none; } body { font-family: "Avenir Next", "Avenir", "Helvetica Neue", "Helvetica", "Arial", sans-serif; background-color: var(--body-bg); color: var(--text-sub); line-height: 1.6; min-height: 100vh; overflow-x: clip; position: relative; transition: background 0.5s ease; } /* ======================================================================== 4. ACCESSIBILITY ======================================================================== */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } /* ======================================================================== 5. ANIMATIONS AND LOGO ======================================================================== */ .js .reveal { opacity: 0; } .reveal.active { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .js .reveal { transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.active { transform: translateY(0); } } .logo-container { position: relative; width: 100%; padding: calc(30px + env(safe-area-inset-top, 0px)) 20px 30px; display: flex; justify-content: center; align-items: center; } .logo-container img { position: relative; z-index: 1; max-width: 280px; height: auto; } @media (prefers-reduced-motion: no-preference) { .logo-container img { animation: logo-glint 6.5s ease-out; } } .logo-link { display: inline-flex; position: relative; z-index: 1; line-height: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; } @keyframes logo-glint { 0% { filter: brightness(1); } 50% { filter: brightness(1.85) drop-shadow(0 0 15px var(--accent-orange)); } 100% { filter: brightness(1); } } /* ======================================================================== 6. NAVIGATION — REARCHITECTED FOR PERFORMANCE ======================================================================== PERFORMANCE ARCHITECTURE OVERVIEW The original navbar placed backdrop-filter: blur(20px) directly on .navbar. Because .navbar is position:sticky, the browser re-captured and re-blurred the page content behind it on every scroll frame — 60 times per second — causing ~24% CPU usage. The rearchitecture separates the blur into its own GPU layer: 1. .navbar itself has NO backdrop-filter. It gets transform: translateZ(0) to promote the entire navbar (text, links, hamburger) to a dedicated compositor layer. This layer is static — it never needs re-painting during scroll because the navbar's own content doesn't change. 2. .navbar::before is a new pseudo-element that carries the backdrop-filter: blur(10px). It also gets translateZ(0), putting the blur on its OWN compositor layer, separate from the content layer. Only this layer is recomposited when the backdrop changes during scroll. The text layer is untouched. 3. The blur radius is reduced from 20px to 10px. The GPU sampling kernel area scales with the square of the radius, so 10px costs ~25% of 20px's GPU work — a 75% reduction — while the frosted glass effect remains clearly visible. 4. The mobile dropdown no longer uses backdrop-filter at all. It uses a solid --nav-dropdown-bg (0.92 opacity in light, 0.95 in dark) instead. This eliminates the second live blur that was running simultaneously with the navbar's blur when the mobile menu was open. 5. All transition: var(--transition) (= transition: all) on elements inside the navbar have been replaced with explicit property lists. transition: all on elements within a backdrop-filter container can trigger unnecessary recomposite work when incidental properties (like text-shadow or letter-spacing) animate. Net effect: the navbar's per-frame GPU work during scroll is reduced from "re-blur millions of pixels at 20px radius on the same layer as the text" to "re-blur the same pixels at 10px radius on an isolated layer, with text untouched." Expected CPU reduction: ~75-85%. */ .nav-wrapper { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: center; padding: 0 15px; } .navbar { width: 100%; max-width: 1100px; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; box-shadow: 0 10px 40px var(--shadow-medium); position: relative; /* Promote the navbar (content layer) to its own GPU compositor layer. The text, links, and hamburger live here and never need re-painting during scroll. transform is never animated, so no transition needed. */ transform: translateZ(0); } /* THE BLUR LAYER — isolated from the content layer. This pseudo-element exists solely to carry the backdrop-filter. It has its own translateZ(0) so it gets a separate compositor layer. When the page content behind the navbar changes during scroll, only this layer is recomposited — the navbar's text layer (above it, on the .navbar's own compositor layer) is untouched. z-index: -1 places it behind the navbar's flex children (page-title, hamburger, nav-links) which are in normal flow at the default z-index (auto/0). */ .navbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: -1; transform: translateZ(0); pointer-events: none; border: 1px solid var(--glass-border); } .page-title { font-weight: 750; font-size: 1.2rem; letter-spacing: 1px; color: var(--accent-blue); } /* Page-title accent modifiers — every page uses orange to distinguish itself from the default blue. All modifiers are identical in styling; only the class name differs so each HTML file is self-documenting. If you add a new page, either use one of the existing modifiers or add a new one here with the same rule body: .page-title--yourpage { color: var(--accent-orange); } */ .page-title--home, .page-title--services, .page-title--commercial, .page-title--residential, .page-title--construction, .page-title--team, .page-title--contact, .page-title--contact-us { color: var(--accent-orange); } .nav-links { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; align-items: center; } /* Explicit transition: color only. Was: transition: var(--transition) (= all 0.4s). These links live inside the backdrop-filter navbar. transition: all would animate any property change (including incidental ones) and could trigger recomposite of the ::before blur layer. */ .nav-links a { text-decoration: none; color: var(--text-nav); font-weight: 650; font-size: 0.95rem; transition: color var(--transition-duration) var(--transition-timing); } @media (hover: hover) { .nav-links a:hover { color: var(--accent-orange); } } .nav-links a.nav-cta-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 44px; background-color: var(--accent-orange); color: var(--accent-blue); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.5px; padding: 8px 22px; border-radius: 50px; border: 1px solid var(--cta-glass-border); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); box-sizing: border-box; } @media (hover: hover) { .nav-links a.nav-cta-btn:hover { color: #66a3ff; box-shadow: 0 0px 10px color-mix(in srgb, var(--accent-orange) 90%, transparent); } } @media (prefers-color-scheme: dark) { .nav-links a.nav-cta-btn { background-color: var(--accent-orange); color: #0047ff; box-shadow: 0 0px 18px var(--shadow-medium); } @media (hover: hover) { .nav-links a.nav-cta-btn:hover { box-shadow: 0 0px 10px color-mix(in srgb, var(--accent-orange) 60%, transparent); } } } /* Hamburger is a real <button> for keyboard + screen-reader support. Visual bars stay 30x24; the button itself is 44x44 to meet iOS touch-target guidelines. Explicit transition: top, transform, opacity only. Was: transition: var(--transition) (= all 0.4s). The hamburger lives inside the backdrop-filter navbar. */ .hamburger { display: none; width: 44px; height: 44px; position: relative; cursor: pointer; z-index: 10; background: none; border: none; padding: 0; } .hamburger span { display: block; position: absolute; left: 7px; width: 30px; height: 3px; background-color: var(--accent-blue); border-radius: 2px; z-index: 1; transition: top var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing); } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 31px; } .hamburger.active span:nth-child(1) { top: 20px; transform: rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { top: 20px; transform: rotate(-45deg); } /* ======================================================================== 7. HERO ======================================================================== */ .hero { text-align: left; } .hero-content { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .hero-text { flex: 1; text-align: left; } .hero-text h1 { font-size: 3rem; color: var(--accent-blue); margin-bottom: 15px; font-weight: 525; line-height: 1.1; } .hero-text p { color: var(--text-sub); font-size: 1.2rem; max-width: 550px; } .hero-text p strong { color: var(--text-main); } .hero-text h1.hero-accent { color: var(--accent-orange); font-weight: 400; } /* .hero-accent — applied to the first <h1> ("We are") in the home page hero. It must NOT override font-size (which comes from .hero-text h1 { font-size: 3rem; }). It only sets color and font-weight to match the original inline style. */ .hero-accent { color: var(--accent-orange); font-weight: 525; } /* ======================================================================== 8. PHOTO COMPONENT ======================================================================== The hero <img> is the LCP element. It is intentionally NOT faded in with JS. An opacity:0 -> 1 fade makes the browser treat the image as "not yet painted" until the fade begins, which pushes LCP later and makes it fluctuate run-to-run. With explicit width/height, fetchpriority=high, and a matching <link rel=preload>, the image now paints as early as the network allows, with no layout shift and no white-box flash (the container background is transparent, so an unloaded img paints nothing for the drop-shadow to cast from). */ .photo { position: relative; width: 100%; border-radius: 15px; overflow: hidden; } .photo img { display: block; width: 100%; height: auto; object-fit: contain; } .hero-image { flex: 1; } .hero-image .photo { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; border-radius: 0; overflow: visible; box-shadow: none; background-color: transparent; } .hero-image .photo img { position: relative; z-index: 2; max-width: 500px; height: 400px; width: 100%; object-fit: cover; display: block; border-radius: 30px; background-color: transparent; } /* ======================================================================== 9. CONTENT SHELL ======================================================================== */ .section-container { max-width: 1100px; margin: 40px auto; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 50px; padding: 60px 40px; box-shadow: 0 0 30px var(--shadow-medium); } /* HERO SHELL — blur isolated to a pseudo-element. The text/image render on .hero's own content layer and paint immediately; the expensive backdrop blur composites separately on the ::before layer, so it no longer delays the LCP text. */ .section-container.hero { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; position: relative; isolation: isolate; } .section-container.hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: -1; transform: translateZ(0); pointer-events: none; } .section-title { font-size: 1.8rem; margin-bottom: 40px; color: var(--text-main); text-align: center; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; } /* ======================================================================== 10. CAROUSELS AND CARDS ======================================================================== The carousel track intentionally does NOT have will-change: transform. The track doesn't animate transform — it scrolls. The browser already promotes scrollable regions to GPU layers automatically. */ .carousel-wrapper { position: relative; width: 100%; overflow: visible; } .carousel-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 40px; scroll-padding: 40px; scrollbar-width: none; scroll-behavior: smooth; justify-content: safe center; /* Keep horizontal flicks inside the carousel so they don't chain out and scroll/bounce the whole page on iOS. */ overscroll-behavior-x: contain; } .carousel-track::-webkit-scrollbar { display: none; } /* CAROUSEL BUTTONS — three-state design. Active (default for enabled buttons): transparent orange fill (blur still applies), blue arrow. Hover: solid orange fill, solid blue arrow, orange glow shadow. Disabled: transparent gray fill, gray arrow, no pointer events. backdrop-filter: blur(8px) stays on ALL states — the gaussian glass effect is always present; only the background tint and arrow color change. transition lists explicit properties (not transition: all) to avoid triggering recomposite of incidental properties within the backdrop-filter element. */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(247, 157, 0, 0.9); border: 1px solid var(--cta-glass-border); color: rgba(0, 71, 255, 0.5); width: 46px; height: 46px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px var(--shadow-strong); transition: background var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); font-size: 1.1rem; line-height: 1; /* FIX: override inherited body line-height:1.6 which pushes the chevron glyph above center. With line-height:1 the line box equals the font-size, so flexbox centering aligns the glyph's em-box — and thus the visual glyph — to the button's true center. */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (prefers-color-scheme: dark) { .carousel-btn { border: 1px solid var(--cta-glass-border); } } @media (hover: hover) { .carousel-btn:hover { background: var(--accent-orange); color: var(--accent-blue); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-orange) 50%, transparent); } } .carousel-btn[disabled] { background: var(--carousel-inactive-bg); color: var(--carousel-inactive-arrow); opacity: 0.35; pointer-events: none; border: 1px solid var(--glass-border); box-shadow: none; } .carousel-btn.prev-btn { left: -15px; padding-right: 1px; padding-bottom: 1px; /* FIX: compensate for asymmetric left side bearing of the ❮ (U+276E) glyph so its visual center aligns with the button center. */ } .carousel-btn.next-btn { right: -15px; padding-left: 1px; padding-bottom: 1px; /* FIX: compensate for asymmetric right side bearing of the ❯ (U+276F) glyph so its visual center aligns with the button center. */ } /* The card has backdrop-filter: blur(12px). Its transition lists explicit properties instead of transition: all. */ .card { flex: 0 0 285px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-border); border-radius: 30px; padding: 30px; box-shadow: 0 0 18px var(--shadow-soft); scroll-snap-align: start; display: flex; flex-direction: column; transition: border-color var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing), background var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); } /* Last-card snap alignment. With scroll-snap-align: start on every card, the final snap point sits where the last card's LEFT edge meets the snapport — which is less than maxScroll. mandatory snap then yanks scrollLeft back to that point, re-enabling the next button. Giving the last card scroll-snap-align: end makes its snap point land at maxScroll (right edge aligned to viewport right), so the browser settles AT the end and the button stays deactivated. */ .card:last-child { scroll-snap-align: end; } .card .photo { margin-bottom: 5px; } .card .photo img { max-width: 225px; margin: 0 auto; } @media (hover: hover) { .card:hover { border-color: var(--accent-blue); transform: translateY(-1px); background: var(--glass-bg); box-shadow: 0 0 25px color-mix(in srgb, var(--accent-orange) 45%, transparent); } } .card h3 { font-size: 1.3rem; color: var(--accent-blue); font-weight: 700; margin-top: 15px; margin-bottom: 10px; line-height: 1.2; text-align: left; } .card p { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 20px; flex-grow: 1; text-align: left; } .card p strong { color: var(--text-main); } .card .card-role { color: var(--accent-orange); font-weight: 700; font-size: 1.05rem; flex-grow: 0; margin-bottom: 0; } .btn-read { display: inline-block; background-color: var(--accent-blue); color: white; border: 1px solid var(--readmore-glass-border); border-radius: 25px; padding: 12px 25px; font-weight: 600; font-size: 0.85rem; text-decoration: none; text-align: center; transition: var(--transition); cursor: pointer; margin-top: auto; } @media (hover: hover) { .btn-read:hover { background-color: var(--accent-card-button-hover); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(102, 163, 255, 0.3); } } /* ======================================================================== 10c. CONTACT PAGE (contact-us.html) ======================================================================== The contact page has a centered column with a lead-connector form iframe and a glass info card below it. The iframe has a fixed height (520px desktop / 620px mobile) to prevent CLS when the third-party widget loads. */ .contact-centered-wrapper { display: flex; flex-direction: row; align-items: center; /* vertically centers the card next to the iframe */ justify-content: center; gap: 40px; } .contact-form-block { flex: 1 1 55%; /* iframe takes the left ~55% */ min-width: 0; /* lets the flex item shrink instead of overflowing */ max-width: 600px; } .contact-form-block iframe { width: 100%; height: 520px; border: none; border-radius: 12px; display: block; background-color: transparent; } @media (prefers-color-scheme: dark) { .contact-form-block iframe { color-scheme: light; /* was: dark, needed to be light to render transparently for dark mode*/ } } .info-card-centered { flex: 1 1 45%; /* card takes the right ~45%, evenly spaced */ min-width: 0; max-width: 500px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-border); border-radius: 25px; padding: 30px 40px; box-shadow: 0 0 18px var(--shadow-soft); text-align: center; } .info-block-centered { display: flex; flex-direction: column; align-items: center; gap: 5px; } .info-label-centered { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-orange); } .info-value-centered { font-size: 1.1rem; font-weight: 500; color: var(--text-main); } .info-value-centered a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing); } @media (hover: hover) { .info-value-centered a:hover { color: var(--accent-orange); } } .info-divider-centered { border: none; border-top: 1px solid var(--glass-border); margin: 20px 0; } /* ======================================================================== 10b. TRUST CARDS & HERO ACCENT (index.html) ======================================================================== .card.trust-card — a variant of .card used only on the home page "WHY TRUST US" section. Wider than image cards (450px vs 285px) because they hold stacked text lines, not a photo. The base .card rule supplies glass background, border, padding, and flex-column layout; this rule overrides flex-basis and disables the backdrop blur (the card-bg alone is sufficient for these text-only cards and saves a GPU layer per card). .trust-line — each line of trust content. Originally inline- styled divs with font-size: 1.8rem, font-weight: 700, color: var(--text-main), margin-bottom: 15px (first card) or 25px (second card). Consolidated to a single class with 15px margin-bottom; the last line in each card gets margin-bottom: 0. .accent — the orange-highlighted words inside each .trust-line (Licensed, Insured, Bonded, Certified, etc.). Originally inline- styled spans with color: var(--accent-orange) and font-weight: 700. */ .card.trust-card { flex: 0 0 450px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card-bg); text-align: center; align-items: center; justify-content: center; } .trust-line { font-size: 1.8rem; font-weight: 700; color: var(--text-main); margin-bottom: 15px; line-height: 1.2; } .trust-line:last-child { margin-bottom: 0; } .accent { color: var(--accent-orange); font-weight: 700; } /* ======================================================================== 11. FOOTER ======================================================================== */ .footer { max-width: 1100px; margin: 80px auto 40px auto; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 50px; padding: 50px 40px; box-shadow: 0 0 25px var(--shadow-soft); } .footer-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); padding-bottom: 30px; margin-bottom: 30px; } .footer-logo img { max-width: 220px; height: auto; } .footer-links { list-style: none; display: flex; gap: 25px; } .footer-links a { text-decoration: none; color: var(--accent-blue); font-weight: 500; font-size: 0.9rem; transition: var(--transition); } @media (hover: hover) { .footer-links a:hover { color: var(--accent-orange); } } .footer-contact { display: flex; flex-direction: column; gap: 8px; color: var(--text-main); font-weight: 500; font-size: 1rem; text-align: left; } .footer-contact-detail { color: var(--text-sub); font-size: 0.95rem; max-width: 320px; opacity: 0.8; } .footer-contact-link { text-decoration: none; color: inherit; display: inline-block; transition: var(--transition); opacity: 0.85; } @media (hover: hover) { .footer-contact-link:hover { color: var(--accent-blue); opacity: 1; } } .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .footer-service-area { color: var(--text-sub); font-size: 0.85rem; text-align: right; max-width: 320px; opacity: 0.8; } /* ======================================================================== 12. RESPONSIVE ======================================================================== */ @media (max-width: 992px) { .hero-text h1 { font-size: 2.2rem; } } @media (max-width: 1140px) { .section-container, .footer { margin-left: 20px; margin-right: 20px; } } @media (max-width: 768px) { .hamburger { display: block; } /* MOBILE DROPDOWN — RESTORED WITH BLUR. Same architecture as .navbar: the backdrop-filter lives on a ::before pseudo-element with its own GPU layer (translateZ(0)), contained by isolation:isolate on .nav-links. The border is on the blur layer, not the layout element, so it doesn't affect positioning. Blur radius is 10px (not the original 20px) — matches the navbar and stays within the performance-safe range. */ .nav-links { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; width: 100%; border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 10px 25px var(--shadow-strong); isolation: isolate; } .nav-links::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: -1; transform: translateZ(0); pointer-events: none; } .nav-links.active { display: flex; } .navbar { justify-content: space-between; } .hero-content { flex-direction: column; } .hero-text { text-align: left; } .hero-text p { margin: 0; } .hero-image { width: 100%; display: flex; justify-content: center; } .hero-image .photo img { max-width: 400px; height: 250px; } .footer { margin: 40px 15px; padding: 40px 25px; border-radius: 30px; } .footer-top { flex-direction: column; gap: 30px; text-align: center; } .footer-links { flex-direction: column; gap: 15px; align-items: center; } .footer-contact { text-align: left; align-items: flex-start; } .footer-service-area { text-align: right; } .section-container { margin: 20px 15px; padding: 40px 15px; border-radius: 30px; } .carousel-track { justify-content: flex-start; padding: 20px 40px; scroll-padding: 40px; } .card { flex: 0 0 260px; } .contact-centered-wrapper { flex-direction: column; } .contact-form-block, .info-card-centered { flex: none; width: 100%; } .contact-form-block iframe { height: 620px; } .info-card-centered { padding: 25px 20px; } .card.trust-card { flex: 0 0 450px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card-bg); } .carousel-btn.prev-btn { left: -5px; } .carousel-btn.next-btn { right: -5px; } }

/* ======================================================================== styles.css — Shared stylesheet for all Modern Electric LLC pages ======================================================================== Used by: index.html, services.html, team.html, contact-us.html, commercial-services.html, residential-services.html, new-construction.html, and any future pages. Page-specific items that remain in each HTML file's : - and <meta name="description"> - <link rel="preload"> for the page's hero/LCP image - Inline <script> to add the .js class (must run before this stylesheet loads so .js .reveal { opacity: 0 } applies immediately, preventing a flash of visible content) Required <head> order in every HTML file: 1. <meta> tags (charset, viewport, color-scheme, title, description) 2. <link rel="icon" ...> 3. <link rel="preload" as="image" href="images/..." fetchpriority="high"> 4. <script>document.documentElement.classList.add("js");</script> 5. <link rel="stylesheet" href="styles.css"> 6. <script src="main.js" defer></script> ======================================================================== */ /* ======================================================================== 1. DESIGN TOKENS ======================================================================== */ :root { --accent-blue: #0047ff; --accent-orange: #f79d00; --accent-card-button-hover: #0036cc; /* LIGHT MODE HIERARCHY — mirrors dark mode: body = darkest, container = lighter, card = lightest. body-bg: #c4ccda (rgb 196,204,218) — a light blue-gray, clearly "light" but the darkest of the three layers. glass-bg: rgba(226,234,246,0.7) — composites over body to ~rgb(217,225,238), visibly lighter than body. card-bg: rgba(240,244,252,0.65) — composites over container to ~rgb(232,237,247), lightest layer, but NOT 255,255,255. */ --body-bg: #c4ccda; --text-main: #000000; --text-sub: #333333; --text-nav: #0047ff; --glass-bg: rgba(226, 234, 246, 0.7); --glass-border: rgba(255, 255, 255, 0.8); --card-bg: rgba(240, 244, 252, 0.65); --card-border: rgba(255, 255, 255, 0.8); --nav-dropdown-bg: rgba(226, 234, 246, 0.92); /* Glass-style border for the CTA and READ MORE buttons. Translucent accent blue — not white — so it reads as a tinted glass edge against the colored button fill. */ --button-glass-border: rgba(0, 71, 255, 0.25); --shadow-soft: rgba(0, 0, 0, 0.08); --shadow-medium: rgba(0, 0, 0, 0.12); --shadow-strong: rgba(0, 0, 0, 0.18); --transition-duration: 0.4s; --transition-timing: cubic-bezier(0.4, 0, 0.2, 1); --transition: all var(--transition-duration) var(--transition-timing); --cta-glass-border: rgba(255, 200, 120, 0.8); --readmore-glass-border: rgba(120, 150, 255, 0.8); /* Carousel button states — three visual tiers: inactive: transparent gray fill + gray arrow active: transparent orange fill + blue arrow hover: solid orange fill + solid blue arrow The "transparent" states keep backdrop-filter: blur(8px) so the gaussian glass effect still applies. Only the background opacity changes between states. */ --carousel-inactive-bg: rgba(128, 128, 128, 0.25); --carousel-inactive-arrow: #888; --carousel-active-bg: rgba(247, 157, 0, 0.9); } /* ======================================================================== 2. DARK THEME ADAPTER ======================================================================== */ @media (prefers-color-scheme: dark) { :root { --body-bg: #0b0f19; --text-main: #ffffff; --text-sub: #e0e0e0; --text-nav: rgb(116, 161, 248); --accent-blue: #66a3ff; --accent-orange: #faa72a; --accent-card-button-hover: #85b8ff; --glass-bg: rgba(18, 24, 32, 0.7); --glass-border: rgba(46, 52, 71, 0.9); --card-bg: rgba(28, 35, 45, 0.6); --card-border: rgba(46, 52, 71, 0.9); --nav-dropdown-bg: rgba(28, 35, 45, 0.95); --button-glass-border: rgba(102, 163, 255, 0.3); --shadow-soft: rgba(0, 0, 0, 0.4); --shadow-medium: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.6); --cta-glass-border: rgba(255, 210, 140, 0.9); --readmore-glass-border: rgba(160, 190, 255, 0.9); --carousel-inactive-bg: rgba(100, 100, 100, 0.25); --carousel-inactive-arrow: #555; --carousel-active-bg: rgba(250, 167, 42, 0.9); } } /* ======================================================================== 3. RESET AND BASICS ======================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* clip (not hidden) stops horizontal panning WITHOUT creating a scroll container, so it doesn't break the sticky navbar. It clips the bled-out background pseudo-elements and the off-edge buttons. */ overflow-x: clip; /* Safari 26 samples html/body background-color for toolbar tint and as a fallback; an explicit value stops it defaulting to white/black. */ background-color: var(--body-bg); /* kill horizontal rubber-band bounce */ overscroll-behavior-x: none; } body { font-family: "Avenir Next", "Avenir", "Helvetica Neue", "Helvetica", "Arial", sans-serif; background-color: var(--body-bg); color: var(--text-sub); line-height: 1.6; min-height: 100vh; overflow-x: clip; position: relative; transition: background 0.5s ease; } /* ======================================================================== 4. ACCESSIBILITY ======================================================================== */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } /* ======================================================================== 5. ANIMATIONS AND LOGO ======================================================================== */ .js .reveal { opacity: 0; } .reveal.active { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .js .reveal { transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.active { transform: translateY(0); } } .logo-container { position: relative; width: 100%; padding: calc(30px + env(safe-area-inset-top, 0px)) 20px 30px; display: flex; justify-content: center; align-items: center; } .logo-container img { position: relative; z-index: 1; max-width: 280px; height: auto; } @media (prefers-reduced-motion: no-preference) { .logo-container img { animation: logo-glint 6.5s ease-out; } } .logo-link { display: inline-flex; position: relative; z-index: 1; line-height: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; } @keyframes logo-glint { 0% { filter: brightness(1); } 50% { filter: brightness(1.85) drop-shadow(0 0 15px var(--accent-orange)); } 100% { filter: brightness(1); } } /* ======================================================================== 6. NAVIGATION — REARCHITECTED FOR PERFORMANCE ======================================================================== PERFORMANCE ARCHITECTURE OVERVIEW The original navbar placed backdrop-filter: blur(20px) directly on .navbar. Because .navbar is position:sticky, the browser re-captured and re-blurred the page content behind it on every scroll frame — 60 times per second — causing ~24% CPU usage. The rearchitecture separates the blur into its own GPU layer: 1. .navbar itself has NO backdrop-filter. It gets transform: translateZ(0) to promote the entire navbar (text, links, hamburger) to a dedicated compositor layer. This layer is static — it never needs re-painting during scroll because the navbar's own content doesn't change. 2. .navbar::before is a new pseudo-element that carries the backdrop-filter: blur(10px). It also gets translateZ(0), putting the blur on its OWN compositor layer, separate from the content layer. Only this layer is recomposited when the backdrop changes during scroll. The text layer is untouched. 3. The blur radius is reduced from 20px to 10px. The GPU sampling kernel area scales with the square of the radius, so 10px costs ~25% of 20px's GPU work — a 75% reduction — while the frosted glass effect remains clearly visible. 4. The mobile dropdown no longer uses backdrop-filter at all. It uses a solid --nav-dropdown-bg (0.92 opacity in light, 0.95 in dark) instead. This eliminates the second live blur that was running simultaneously with the navbar's blur when the mobile menu was open. 5. All transition: var(--transition) (= transition: all) on elements inside the navbar have been replaced with explicit property lists. transition: all on elements within a backdrop-filter container can trigger unnecessary recomposite work when incidental properties (like text-shadow or letter-spacing) animate. Net effect: the navbar's per-frame GPU work during scroll is reduced from "re-blur millions of pixels at 20px radius on the same layer as the text" to "re-blur the same pixels at 10px radius on an isolated layer, with text untouched." Expected CPU reduction: ~75-85%. */ .nav-wrapper { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: center; padding: 0 15px; } .navbar { width: 100%; max-width: 1100px; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; box-shadow: 0 10px 40px var(--shadow-medium); position: relative; /* Promote the navbar (content layer) to its own GPU compositor layer. The text, links, and hamburger live here and never need re-painting during scroll. transform is never animated, so no transition needed. */ transform: translateZ(0); } /* THE BLUR LAYER — isolated from the content layer. This pseudo-element exists solely to carry the backdrop-filter. It has its own translateZ(0) so it gets a separate compositor layer. When the page content behind the navbar changes during scroll, only this layer is recomposited — the navbar's text layer (above it, on the .navbar's own compositor layer) is untouched. z-index: -1 places it behind the navbar's flex children (page-title, hamburger, nav-links) which are in normal flow at the default z-index (auto/0). */ .navbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: -1; transform: translateZ(0); pointer-events: none; border: 1px solid var(--glass-border); } .page-title { font-weight: 750; font-size: 1.2rem; letter-spacing: 1px; color: var(--accent-blue); } /* Page-title accent modifiers — every page uses orange to distinguish itself from the default blue. All modifiers are identical in styling; only the class name differs so each HTML file is self-documenting. If you add a new page, either use one of the existing modifiers or add a new one here with the same rule body: .page-title--yourpage { color: var(--accent-orange); } */ .page-title--home, .page-title--services, .page-title--commercial, .page-title--residential, .page-title--construction, .page-title--team, .page-title--contact, .page-title--contact-us { color: var(--accent-orange); } .nav-links { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; align-items: center; } /* Explicit transition: color only. Was: transition: var(--transition) (= all 0.4s). These links live inside the backdrop-filter navbar. transition: all would animate any property change (including incidental ones) and could trigger recomposite of the ::before blur layer. */ .nav-links a { text-decoration: none; color: var(--text-nav); font-weight: 650; font-size: 0.95rem; transition: color var(--transition-duration) var(--transition-timing); } @media (hover: hover) { .nav-links a:hover { color: var(--accent-orange); } } .nav-links a.nav-cta-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 44px; background-color: var(--accent-orange); color: var(--accent-blue); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.5px; padding: 8px 22px; border-radius: 50px; border: 1px solid var(--cta-glass-border); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); box-sizing: border-box; } @media (hover: hover) { .nav-links a.nav-cta-btn:hover { color: #66a3ff; box-shadow: 0 0px 10px color-mix(in srgb, var(--accent-orange) 90%, transparent); } } @media (prefers-color-scheme: dark) { .nav-links a.nav-cta-btn { background-color: var(--accent-orange); color: #0047ff; box-shadow: 0 0px 18px var(--shadow-medium); } @media (hover: hover) { .nav-links a.nav-cta-btn:hover { box-shadow: 0 0px 10px color-mix(in srgb, var(--accent-orange) 60%, transparent); } } } /* Hamburger is a real <button> for keyboard + screen-reader support. Visual bars stay 30x24; the button itself is 44x44 to meet iOS touch-target guidelines. Explicit transition: top, transform, opacity only. Was: transition: var(--transition) (= all 0.4s). The hamburger lives inside the backdrop-filter navbar. */ .hamburger { display: none; width: 44px; height: 44px; position: relative; cursor: pointer; z-index: 10; background: none; border: none; padding: 0; } .hamburger span { display: block; position: absolute; left: 7px; width: 30px; height: 3px; background-color: var(--accent-blue); border-radius: 2px; z-index: 1; transition: top var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing); } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 31px; } .hamburger.active span:nth-child(1) { top: 20px; transform: rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { top: 20px; transform: rotate(-45deg); } /* ======================================================================== 7. HERO ======================================================================== */ .hero { text-align: left; } .hero-content { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .hero-text { flex: 1; text-align: left; } .hero-text h1 { font-size: 3rem; color: var(--accent-blue); margin-bottom: 15px; font-weight: 525; line-height: 1.1; } .hero-text p { color: var(--text-sub); font-size: 1.2rem; max-width: 550px; } .hero-text p strong { color: var(--text-main); } .hero-text h1.hero-accent { color: var(--accent-orange); font-weight: 400; } /* .hero-accent — applied to the first <h1> ("We are") in the home page hero. It must NOT override font-size (which comes from .hero-text h1 { font-size: 3rem; }). It only sets color and font-weight to match the original inline style. */ .hero-accent { color: var(--accent-orange); font-weight: 525; } /* ======================================================================== 8. PHOTO COMPONENT ======================================================================== The hero <img> is the LCP element. It is intentionally NOT faded in with JS. An opacity:0 -> 1 fade makes the browser treat the image as "not yet painted" until the fade begins, which pushes LCP later and makes it fluctuate run-to-run. With explicit width/height, fetchpriority=high, and a matching <link rel=preload>, the image now paints as early as the network allows, with no layout shift and no white-box flash (the container background is transparent, so an unloaded img paints nothing for the drop-shadow to cast from). */ .photo { position: relative; width: 100%; border-radius: 15px; overflow: hidden; } .photo img { display: block; width: 100%; height: auto; object-fit: contain; } .hero-image { flex: 1; } .hero-image .photo { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; border-radius: 0; overflow: visible; box-shadow: none; background-color: transparent; } .hero-image .photo img { position: relative; z-index: 2; max-width: 500px; height: 400px; width: 100%; object-fit: cover; display: block; border-radius: 30px; background-color: transparent; } /* ======================================================================== 9. CONTENT SHELL ======================================================================== */ .section-container { max-width: 1100px; margin: 40px auto; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 50px; padding: 60px 40px; box-shadow: 0 0 30px var(--shadow-medium); } /* HERO SHELL — blur isolated to a pseudo-element. The text/image render on .hero's own content layer and paint immediately; the expensive backdrop blur composites separately on the ::before layer, so it no longer delays the LCP text. */ .section-container.hero { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; position: relative; isolation: isolate; } .section-container.hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: -1; transform: translateZ(0); pointer-events: none; } .section-title { font-size: 1.8rem; margin-bottom: 40px; color: var(--text-main); text-align: center; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; } /* ======================================================================== 10. CAROUSELS AND CARDS ======================================================================== The carousel track intentionally does NOT have will-change: transform. The track doesn't animate transform — it scrolls. The browser already promotes scrollable regions to GPU layers automatically. */ .carousel-wrapper { position: relative; width: 100%; overflow: visible; } .carousel-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 40px; scroll-padding: 40px; scrollbar-width: none; scroll-behavior: smooth; justify-content: safe center; /* Keep horizontal flicks inside the carousel so they don't chain out and scroll/bounce the whole page on iOS. */ overscroll-behavior-x: contain; } .carousel-track::-webkit-scrollbar { display: none; } /* CAROUSEL BUTTONS — three-state design. Active (default for enabled buttons): transparent orange fill (blur still applies), blue arrow. Hover: solid orange fill, solid blue arrow, orange glow shadow. Disabled: transparent gray fill, gray arrow, no pointer events. backdrop-filter: blur(8px) stays on ALL states — the gaussian glass effect is always present; only the background tint and arrow color change. transition lists explicit properties (not transition: all) to avoid triggering recomposite of incidental properties within the backdrop-filter element. */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(247, 157, 0, 0.9); border: 1px solid var(--cta-glass-border); color: rgba(0, 71, 255, 0.5); width: 46px; height: 46px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px var(--shadow-strong); transition: background var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); font-size: 1.1rem; line-height: 1; /* FIX: override inherited body line-height:1.6 which pushes the chevron glyph above center. With line-height:1 the line box equals the font-size, so flexbox centering aligns the glyph's em-box — and thus the visual glyph — to the button's true center. */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (prefers-color-scheme: dark) { .carousel-btn { border: 1px solid var(--cta-glass-border); } } @media (hover: hover) { .carousel-btn:hover { background: var(--accent-orange); color: var(--accent-blue); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-orange) 50%, transparent); } } .carousel-btn[disabled] { background: var(--carousel-inactive-bg); color: var(--carousel-inactive-arrow); opacity: 0.35; pointer-events: none; border: 1px solid var(--glass-border); box-shadow: none; } .carousel-btn.prev-btn { left: -15px; padding-right: 1px; padding-bottom: 1px; /* FIX: compensate for asymmetric left side bearing of the ❮ (U+276E) glyph so its visual center aligns with the button center. */ } .carousel-btn.next-btn { right: -15px; padding-left: 1px; padding-bottom: 1px; /* FIX: compensate for asymmetric right side bearing of the ❯ (U+276F) glyph so its visual center aligns with the button center. */ } /* The card has backdrop-filter: blur(12px). Its transition lists explicit properties instead of transition: all. */ .card { flex: 0 0 285px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-border); border-radius: 30px; padding: 30px; box-shadow: 0 0 18px var(--shadow-soft); scroll-snap-align: start; display: flex; flex-direction: column; transition: border-color var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing), background var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); } /* Last-card snap alignment. With scroll-snap-align: start on every card, the final snap point sits where the last card's LEFT edge meets the snapport — which is less than maxScroll. mandatory snap then yanks scrollLeft back to that point, re-enabling the next button. Giving the last card scroll-snap-align: end makes its snap point land at maxScroll (right edge aligned to viewport right), so the browser settles AT the end and the button stays deactivated. */ .card:last-child { scroll-snap-align: end; } .card .photo { margin-bottom: 5px; } .card .photo img { max-width: 225px; margin: 0 auto; } @media (hover: hover) { .card:hover { border-color: var(--accent-blue); transform: translateY(-1px); background: var(--glass-bg); box-shadow: 0 0 25px color-mix(in srgb, var(--accent-orange) 45%, transparent); } } .card h3 { font-size: 1.3rem; color: var(--accent-blue); font-weight: 700; margin-top: 15px; margin-bottom: 10px; line-height: 1.2; text-align: left; } .card p { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 20px; flex-grow: 1; text-align: left; } .card p strong { color: var(--text-main); } .card .card-role { color: var(--accent-orange); font-weight: 700; font-size: 1.05rem; flex-grow: 0; margin-bottom: 0; } .btn-read { display: inline-block; background-color: var(--accent-blue); color: white; border: 1px solid var(--readmore-glass-border); border-radius: 25px; padding: 12px 25px; font-weight: 600; font-size: 0.85rem; text-decoration: none; text-align: center; transition: var(--transition); cursor: pointer; margin-top: auto; } @media (hover: hover) { .btn-read:hover { background-color: var(--accent-card-button-hover); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(102, 163, 255, 0.3); } } /* ======================================================================== 10c. CONTACT PAGE (contact-us.html) ======================================================================== The contact page has a centered column with a lead-connector form iframe and a glass info card below it. The iframe has a fixed height (520px desktop / 620px mobile) to prevent CLS when the third-party widget loads. */ .contact-centered-wrapper { display: flex; flex-direction: row; align-items: center; /* vertically centers the card next to the iframe */ justify-content: center; gap: 40px; } .contact-form-block { flex: 1 1 55%; /* iframe takes the left ~55% */ min-width: 0; /* lets the flex item shrink instead of overflowing */ max-width: 600px; } .contact-form-block iframe { width: 100%; height: 520px; border: none; border-radius: 12px; display: block; background-color: transparent; } @media (prefers-color-scheme: dark) { .contact-form-block iframe { color-scheme: light; /* was: dark, needed to be light to render transparently for dark mode*/ } } .info-card-centered { flex: 1 1 45%; /* card takes the right ~45%, evenly spaced */ min-width: 0; max-width: 500px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-border); border-radius: 25px; padding: 30px 40px; box-shadow: 0 0 18px var(--shadow-soft); text-align: center; } .info-block-centered { display: flex; flex-direction: column; align-items: center; gap: 5px; } .info-label-centered { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-orange); } .info-value-centered { font-size: 1.1rem; font-weight: 500; color: var(--text-main); } .info-value-centered a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing); } @media (hover: hover) { .info-value-centered a:hover { color: var(--accent-orange); } } .info-divider-centered { border: none; border-top: 1px solid var(--glass-border); margin: 20px 0; } /* ======================================================================== 10b. TRUST CARDS & HERO ACCENT (index.html) ======================================================================== .card.trust-card — a variant of .card used only on the home page "WHY TRUST US" section. Wider than image cards (450px vs 285px) because they hold stacked text lines, not a photo. The base .card rule supplies glass background, border, padding, and flex-column layout; this rule overrides flex-basis and disables the backdrop blur (the card-bg alone is sufficient for these text-only cards and saves a GPU layer per card). .trust-line — each line of trust content. Originally inline- styled divs with font-size: 1.8rem, font-weight: 700, color: var(--text-main), margin-bottom: 15px (first card) or 25px (second card). Consolidated to a single class with 15px margin-bottom; the last line in each card gets margin-bottom: 0. .accent — the orange-highlighted words inside each .trust-line (Licensed, Insured, Bonded, Certified, etc.). Originally inline- styled spans with color: var(--accent-orange) and font-weight: 700. */ .card.trust-card { flex: 0 0 450px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card-bg); text-align: center; align-items: center; justify-content: center; } .trust-line { font-size: 1.8rem; font-weight: 700; color: var(--text-main); margin-bottom: 15px; line-height: 1.2; } .trust-line:last-child { margin-bottom: 0; } .accent { color: var(--accent-orange); font-weight: 700; } /* ======================================================================== 11. FOOTER ======================================================================== */ .footer { max-width: 1100px; margin: 80px auto 40px auto; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 50px; padding: 50px 40px; box-shadow: 0 0 25px var(--shadow-soft); } .footer-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); padding-bottom: 30px; margin-bottom: 30px; } .footer-logo img { max-width: 220px; height: auto; } .footer-links { list-style: none; display: flex; gap: 25px; } .footer-links a { text-decoration: none; color: var(--accent-blue); font-weight: 500; font-size: 0.9rem; transition: var(--transition); } @media (hover: hover) { .footer-links a:hover { color: var(--accent-orange); } } .footer-contact { display: flex; flex-direction: column; gap: 8px; color: var(--text-main); font-weight: 500; font-size: 1rem; text-align: left; } .footer-contact-detail { color: var(--text-sub); font-size: 0.95rem; max-width: 320px; opacity: 0.8; } .footer-contact-link { text-decoration: none; color: inherit; display: inline-block; transition: var(--transition); opacity: 0.85; } @media (hover: hover) { .footer-contact-link:hover { color: var(--accent-blue); opacity: 1; } } .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .footer-service-area { color: var(--text-sub); font-size: 0.85rem; text-align: right; max-width: 320px; opacity: 0.8; } /* ======================================================================== 12. RESPONSIVE ======================================================================== */ @media (max-width: 992px) { .hero-text h1 { font-size: 2.2rem; } } @media (max-width: 1140px) { .section-container, .footer { margin-left: 20px; margin-right: 20px; } } @media (max-width: 768px) { .hamburger { display: block; } /* MOBILE DROPDOWN — RESTORED WITH BLUR. Same architecture as .navbar: the backdrop-filter lives on a ::before pseudo-element with its own GPU layer (translateZ(0)), contained by isolation:isolate on .nav-links. The border is on the blur layer, not the layout element, so it doesn't affect positioning. Blur radius is 10px (not the original 20px) — matches the navbar and stays within the performance-safe range. */ .nav-links { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; width: 100%; border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 10px 25px var(--shadow-strong); isolation: isolate; } .nav-links::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: -1; transform: translateZ(0); pointer-events: none; } .nav-links.active { display: flex; } .navbar { justify-content: space-between; } .hero-content { flex-direction: column; } .hero-text { text-align: left; } .hero-text p { margin: 0; } .hero-image { width: 100%; display: flex; justify-content: center; } .hero-image .photo img { max-width: 400px; height: 250px; } .footer { margin: 40px 15px; padding: 40px 25px; border-radius: 30px; } .footer-top { flex-direction: column; gap: 30px; text-align: center; } .footer-links { flex-direction: column; gap: 15px; align-items: center; } .footer-contact { text-align: left; align-items: flex-start; } .footer-service-area { text-align: right; } .section-container { margin: 20px 15px; padding: 40px 15px; border-radius: 30px; } .carousel-track { justify-content: flex-start; padding: 20px 40px; scroll-padding: 40px; } .card { flex: 0 0 260px; } .contact-centered-wrapper { flex-direction: column; } .contact-form-block, .info-card-centered { flex: none; width: 100%; } .contact-form-block iframe { height: 620px; } .info-card-centered { padding: 25px 20px; } .card.trust-card { flex: 0 0 450px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card-bg); } .carousel-btn.prev-btn { left: -5px; } .carousel-btn.next-btn { right: -5px; } }