/* ============================================================ SafeTech Builders — Global Styles Brand: Navy #0E2F4F / Yellow #FFC107 Font: Neue Montreal ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } /* CSS variables inlined for WAF (ModSecurity) compatibility on shared hosting. Brand colors: navy #0E2F4F | yellow #FFC107 — see Vars notes throughout. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x:hidden lives on only — putting it on too breaks position:sticky for the header (it would stick to instead of the viewport). 's clip already stops side-scroll. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: 'Neue Montreal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #1a2230; background: #ffffff; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: inherit; color: #0E2F4F; margin: 0 0 .5em; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Honeypot wrapper — fully hidden from humans & assistive tech. Only spam bots fill the field inside; send-mail.php drops those. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .text-yellow { color: #FFC107; } .section-title { color: #0E2F4F; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: .5px; margin-bottom: 18px; } .small-eyebrow { display: inline-block; color: #0E2F4F; font-weight: 700; letter-spacing: 3px; font-size: 12px; margin-bottom: 10px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 30px; border-radius: 6px; font-weight: 700; font-size: 15px; letter-spacing: .4px; border: 2px solid transparent; cursor: pointer; transition: all .25s cubic-bezier(.22,.61,.36,1); white-space: nowrap; text-transform: none; } .btn-lg { padding: 15px 36px; font-size: 16px; } .btn-block { width: 100%; } .btn-yellow { background: #FFC107; color: #0E2F4F; } .btn-yellow:hover { background: #e5ad00; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,193,7,.35); } .btn-navy { background: #0E2F4F; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; } /* Small yellow pill button ("Get to know us") */ .btn-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; background: #fff; color: #0E2F4F; border: 1px solid #e4e8ef; border-radius: 999px; font-weight: 600; font-size: 13px; transition: all .25s cubic-bezier(.22,.61,.36,1); box-shadow: 0 2px 6px rgba(14,47,79,0.08); } .btn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14,47,79,0.12); } .btn-pill-arrow { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FFC107; color: #0E2F4F; font-size: 14px; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .btn-pill:hover .btn-pill-arrow { transform: translateX(3px); } /* Free estimate pill (two-line) */ .btn-estimate { padding: 10px 22px; line-height: 1.15; text-align: center; font-size: 15px; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(241,244,249,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #e4e8ef; transition: box-shadow .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1); } .site-header.scrolled { background: rgba(241,244,249,.99); box-shadow: 0 4px 20px rgba(14,47,79,.10); } /* ---------- Back to top ---------- */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: #0E2F4F; color: #FFC107; cursor: pointer; box-shadow: 0 8px 20px rgba(14,47,79,.28); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s, background .2s ease; z-index: 90; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #1b446e; } .back-to-top svg { width: 22px; height: 22px; } @media (max-width: 480px) { .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } } .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 14px 28px; } .brand img { height: 72px; width: auto; } .main-nav { display: flex; align-items: center; justify-content: center; gap: 36px; } .main-nav a { color: #0E2F4F; font-weight: 600; font-size: 14px; letter-spacing: 1.5px; position: relative; padding: 6px 0; transition: color .2s; } .main-nav a::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; background: #0E2F4F; transform: translateX(-50%); transition: width .3s cubic-bezier(.22,.61,.36,1); } .main-nav a.active::after, body.nav-home .main-nav a[data-nav="home"]::after, body.nav-portfolio .main-nav a[data-nav="portfolio"]::after, body.nav-services .main-nav a[data-nav="services"]::after, body.nav-about .main-nav a[data-nav="about"]::after, body.nav-resources .main-nav a[data-nav="resources"]::after { width: 100%; } /* ----- About dropdown ----- */ .main-nav .has-dropdown { position: relative; display: inline-flex; align-items: center; } .main-nav .has-dropdown > .dropdown-trigger { display: inline-flex; align-items: center; gap: 6px; } .main-nav .has-dropdown > .dropdown-trigger::before { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; } .main-nav .has-dropdown > .dropdown-trigger::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; background: #0E2F4F; transform: translateX(-50%); transition: width .3s cubic-bezier(.22,.61,.36,1); } body.nav-portfolio .main-nav .has-dropdown > a[data-nav="portfolio"]::after, body.nav-services .main-nav .has-dropdown > a[data-nav="services"]::after, body.nav-about .main-nav .has-dropdown > a[data-nav="about"]::after { width: 100%; } .main-nav .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 170px; background: #ffffff; border: 1px solid #e4e8ef; border-radius: 10px; box-shadow: 0 14px 32px rgba(14,47,79,.12); padding: 8px 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1); z-index: 50; } .main-nav .dropdown-menu::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #ffffff; border-left: 1px solid #e4e8ef; border-top: 1px solid #e4e8ef; } .main-nav .has-dropdown:hover > .dropdown-menu, .main-nav .has-dropdown:focus-within > .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .main-nav .dropdown-menu a { padding: 10px 18px; letter-spacing: 1px; font-size: 13px; color: #0E2F4F; white-space: nowrap; } .main-nav .dropdown-menu a::after { display: none; } .main-nav .dropdown-menu a:hover { background: #f6f8fb; } .header-right { display: flex; align-items: center; gap: 10px; } .call-cta { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; transition: background .2s; } .call-cta:hover { background: #f6f8fb; } .call-icon { width: 36px; height: 36px; border-radius: 50%; background: #0E2F4F; color: #FFC107; display: grid; place-items: center; flex-shrink: 0; } .call-icon svg { width: 18px; height: 18px; } .call-text { display: flex; flex-direction: column; line-height: 1; } .call-label { font-size: 10px; letter-spacing: 2px; color: #5b6473; font-weight: 600; } .call-number { font-size: 16px; font-weight: 700; color: #0E2F4F; margin-top: 5px; text-decoration: underline; text-underline-offset: 3px; } .call-cta-group { display: flex; align-items: center; gap: 6px; } .call-cta-group .call-cta { padding: 6px 8px; gap: 8px; } .call-cta-group .call-icon { width: 32px; height: 32px; } .call-cta-group .call-icon svg { width: 16px; height: 16px; } .nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 26px; height: 2px; background: #0E2F4F; border-radius: 2px; transition: transform .3s, opacity .3s; } .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity: 0; } .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; min-height: 580px; display: flex; align-items: center; padding: 20px 0; isolation: isolate; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: heroZoom 18s ease-in-out infinite alternate; z-index: -2; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,47,79,.88) 0%, rgba(14,47,79,.75) 50%, rgba(14,47,79,.55) 100%); z-index: -1; } @keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.15); } } .hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; } .hero-text { color: #ffffff; } .hero-title { color: #ffffff; font-size: clamp(2.2rem, 4.8vw, 4.2rem); font-weight: 800; line-height: 1.05; margin-bottom: 20px; letter-spacing: -0.015em; } .hero-sub { font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 520px; opacity: .92; margin-bottom: 32px; } .hide-mobile { display: inline; } /* Hero form card */ .hero-form { background: #ffffff; border-radius: 14px; padding: 28px 26px; box-shadow: 0 20px 50px rgba(14,47,79,0.18); max-width: 440px; margin-left: auto; width: 100%; } .form-head { text-align: center; margin-bottom: 18px; } .form-head h2 { font-size: 26px; letter-spacing: .5px; color: #0E2F4F; margin-bottom: 6px; line-height: 1.1; font-weight: 800; } .form-head h2 .text-yellow { font-size: 30px; letter-spacing: 1px; } .form-head p { font-size: 12.5px; color: #5b6473; margin: 0; } .form-fields { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; } .field { display: block; position: relative; } .field input, .field select, .field textarea { width: 100%; padding: 11px 14px; border: 1px solid #d8dde6; border-radius: 6px; background: #ffffff; font-size: 13.5px; transition: border-color .2s, box-shadow .2s; } .field input::placeholder, .field textarea::placeholder { color: #a8aeba; } .field select { color: #6b7282; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,.2); } /* Show a clear red border on invalid fields, but only AFTER the user has typed something invalid and moved on — never on the empty initial state (which would feel aggressive). */ .field input:invalid:not(:placeholder-shown):not(:focus), .field select:invalid:not(:focus), .field textarea:invalid:not(:placeholder-shown):not(:focus) { border-color: #C8102E; box-shadow: 0 0 0 3px rgba(200,16,46,.15); } .field textarea { resize: vertical; min-height: 70px; } /* Phone with flag prefix */ .field-phone { display: flex; align-items: stretch; gap: 0; } .phone-prefix { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #d8dde6; border-right: none; border-radius: 6px 0 0 6px; background: #ffffff; font-size: 13.5px; color: #1a2230; flex-shrink: 0; } .phone-prefix svg { border-radius: 2px; } .field-phone input { border-radius: 0 6px 6px 0; } .form-disclaimer { font-size: 9.5px; color: #8a92a2; line-height: 1.5; margin: 10px 0 14px; text-align: left; } /* Inline status under the form — used for errors (success uses the modal). */ .form-status { margin-top: 14px; font-size: 14px; font-weight: 600; min-height: 0; text-align: center; border-radius: 10px; transition: opacity .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1); opacity: 0; transform: translateY(-4px); padding: 0; } .form-status:not(:empty) { padding: 12px 16px; opacity: 1; transform: translateY(0); display: flex; align-items: center; justify-content: center; gap: 10px; } .form-status.success { background: #e8f7ec; color: #1d6f33; border: 1px solid #b7e0c2; } .form-status.error { background: #fdecec; color: #a02525; border: 1px solid #f5c2c2; } .form-status:not(:empty)::before { content: ""; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; line-height: 1; flex-shrink: 0; } .form-status.success::before { content: "✓"; background: #2ea24a; } .form-status.error::before { content: "!"; background: #c23030; } /* ---------- Form success modal ---------- */ .success-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.22,.61,.36,1), visibility .3s; } .success-modal.show { opacity: 1; visibility: visible; } .success-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 47, 79, .55); backdrop-filter: blur(3px); cursor: pointer; } .success-modal-card { position: relative; background: #fff; border-radius: 18px; padding: 44px 32px 32px; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(14, 47, 79, .35); transform: translateY(16px) scale(.96); transition: transform .35s cubic-bezier(.22,.61,.36,1); } .success-modal.show .success-modal-card { transform: translateY(0) scale(1); } .success-modal-close { position: absolute; top: 10px; right: 14px; width: 32px; height: 32px; border: none; background: transparent; font-size: 26px; line-height: 1; color: #5b6473; cursor: pointer; padding: 0; } .success-modal-close:hover { color: #0E2F4F; } .success-modal-icon { width: 80px; height: 80px; border-radius: 50%; background: #2ea24a; color: #fff; display: grid; place-items: center; margin: 0 auto 20px; box-shadow: 0 10px 24px rgba(46, 162, 74, .35); } .success-modal.show .success-modal-icon { animation: successPop .55s cubic-bezier(.22,.61,.36,1); } .success-modal-icon svg { width: 44px; height: 44px; } @keyframes successPop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .success-modal-card h3 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 1.8rem); color: #0E2F4F; } .success-modal-card p { margin: 0 0 24px; font-size: 1rem; color: #5b6473; line-height: 1.55; } .success-modal-card .btn { min-width: 140px; } /* ============================================================ ABOUT ============================================================ */ .about-section { padding: 70px 0 0; background: #ffffff; } .about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; } .about-left .section-title { margin-bottom: 14px; } .about-copy { font-size: 1rem; color: #1a2230; line-height: 1.75; max-width: 600px; margin-bottom: 20px; } .about-photo { margin-top: 18px; border-radius: 12px; overflow: hidden; } .about-photo img { width: 100%; height: auto; } /* License section (right column on white bg) */ .about-right { padding-top: 12px; } .license-title { color: #0E2F4F; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 800; margin-bottom: 10px; text-align: center; } .license-banner { background: #FFC107; color: #0E2F4F; font-weight: 600; font-size: 13px; text-align: center; padding: 7px 14px; border-radius: 2px; margin-bottom: 22px; letter-spacing: .2px; } .license-list { list-style: none; padding: 0; margin: 0 0 28px; } .license-list li { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; text-align: center; } .lic-num { color: #0E2F4F; font-weight: 800; font-size: 1.55rem; letter-spacing: .5px; } .lic-role { font-size: .82rem; color: #5b6473; margin-top: 2px; letter-spacing: .3px; } .licensed-insured { display: flex; align-items: center; justify-content: center; gap: 12px; } .check-ring { width: 46px; height: 46px; border-radius: 50%; background: #ffffff; border: 3px solid #2ea24a; display: grid; place-items: center; flex-shrink: 0; } .check-ring svg { width: 22px; height: 22px; } .licensed-insured strong { display: block; color: #0E2F4F; font-weight: 800; font-size: 1rem; letter-spacing: .5px; line-height: 1.15; } /* Yellow divider strip */ .yellow-divider { height: 12px; background: #FFC107; margin: 0; } /* ============================================================ SERVICES ============================================================ */ .services-section { padding: 70px 0 80px; background: #ffffff; } .services-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; } .services-left .section-title { margin-bottom: 16px; } .services-intro { color: #1a2230; font-size: .97rem; line-height: 1.75; margin-bottom: 26px; max-width: 460px; } .services-left .btn-yellow { text-transform: none; font-weight: 700; letter-spacing: 1px; font-size: 13px; padding: 12px 30px; border-radius: 999px; } .county-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; } .county-logos img { flex: 1 1 0; height: 60px; width: 100%; min-width: 0; max-width: 120px; object-fit: contain; opacity: .95; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s; } .county-logos img:hover { transform: scale(1.08); opacity: 1; } .services-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .service-card { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(14,47,79,0.08); background: #ffffff; padding-bottom: 56px; transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1); } .service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(14,47,79,0.18); } .service-img { aspect-ratio: 4/3; overflow: hidden; border-radius: 14px 14px 0 0; } .service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .service-card:hover .service-img img { transform: scale(1.08); } .service-label { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #FFC107; color: #0E2F4F; padding: 7px 22px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .3px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.15); } /* ============================================================ PROBLEM CTA ============================================================ */ .problem-cta { background: #0E2F4F; color: #ffffff; padding: 20px 0; position: relative; overflow: visible; z-index: 1; } .problem-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .problem-van { position: relative; z-index: 5; } .problem-van img { --van-offset-start: 50px; --van-offset-end: 40px; width: 100%; max-width: 720px; filter: drop-shadow(0 28px 30px rgba(0,0,0,.45)); animation: vanFloat 4s ease-in-out infinite alternate; } @keyframes vanFloat { from { transform: translateY(var(--van-offset-start)); } to { transform: translateY(var(--van-offset-end)); } } /* White shelf used ONLY where the van section is followed by a dark surface (e.g. the footer). Keeps the wheels on a light surface so the 3D pop-out reads. Not needed on pages where the next section is already light (e.g. the homepage, where Contractor Discounts follows). Kept *unpositioned* (static) so any overflow from .problem-cta above paints on top of it — otherwise the van wheels would be hidden behind the shelf. */ .van-shelf { height: 120px; background: #ffffff; } /* --- Compact variant (services page): navy strip is the height of the text content only; the van is absolutely anchored to the top of the strip and overflows the BOTTOM (wheels) onto the white shelf, which gives the 3D "rolling out of the background" look. --- */ .problem-cta--compact { padding: 0; overflow: visible; z-index: 3; /* stay above the .van-shelf that follows it */ } .problem-cta--compact .problem-grid { min-height: 260px; align-items: flex-start; position: relative; } .problem-cta--compact .problem-van { position: absolute; top: 0; left: 0; width: 50%; max-width: 700px; z-index: 6; } .problem-cta--compact .problem-van img { --van-offset-start: 4px; --van-offset-end: -4px; width: 100%; max-width: 100%; } .problem-cta--compact .problem-text { grid-column: 2 / -1; padding: 30px 0 40px; } @media (max-width: 1100px) { .van-shelf { height: 70px; } .problem-van img { --van-offset-start: 30px; --van-offset-end: 22px; } /* Stack on tablet, disable absolute van */ .problem-cta--compact { padding: 20px 0; } .problem-cta--compact .problem-grid { min-height: 0; } .problem-cta--compact .problem-van { position: relative; top: auto; left: auto; width: 100%; max-width: 520px; margin: 0 auto; transform: none; } .problem-cta--compact .problem-van img { --van-offset-start: 30px; --van-offset-end: 22px; } .problem-cta--compact .problem-text { grid-column: auto; padding: 0; } } @media (max-width: 768px) { .van-shelf { height: 40px; } .problem-van img { --van-offset-start: 20px; --van-offset-end: 14px; } .problem-cta--compact .problem-van img { --van-offset-start: 20px; --van-offset-end: 14px; } } .problem-text h2 { color: #ffffff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.1; margin-bottom: 16px; font-weight: 800; } .problem-text p { opacity: .88; max-width: 520px; font-size: .95rem; margin-bottom: 28px; line-height: 1.7; } .problem-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .call-now { display: inline-flex; align-items: center; gap: 12px; } .call-now-icon { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; color: #0E2F4F; display: grid; place-items: center; } .call-now-icon svg { width: 18px; height: 18px; } .call-now-text { display: flex; flex-direction: column; line-height: 1; } .call-now-label { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.75); font-weight: 700; } .call-now-number { font-size: 22px; font-weight: 800; color: #ffffff; margin-top: 5px; text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ CONTRACTOR DISCOUNTS ============================================================ */ .discount-section { padding: 100px 0 0; background: #ffffff; } /* Scoped: on service pages (only service-flooring uses this section), tighten the top */ body.nav-services .discount-section { padding-top: 30px; } .discount-head { display: grid; grid-template-columns: 5fr 7fr; gap: 50px; align-items: center; max-width: 1200px; margin: 0 auto 70px; } .discount-ribbon { width: 100%; max-width: 420px; transform: rotate(-6deg); flex-shrink: 0; animation: ribbonPulse 4s ease-in-out infinite; } @keyframes ribbonPulse { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.04); } } .discount-ribbon svg { width: 100%; height: auto; filter: drop-shadow(0 14px 28px rgba(200,16,46,.4)); } .discount-ribbon img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 28px rgba(0,0,0,.18)); } .discount-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.1; margin-bottom: 14px; } .discount-copy p { color: #5b6473; font-size: 1rem; margin: 0; max-width: 540px; line-height: 1.7; } .discount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 1000px; margin: 0 auto 70px; text-align: center; } .discount-card { padding: 0 10px; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .discount-card:hover { transform: translateY(-4px); } .discount-card img { width: 80px; height: 80px; margin: 0 auto 14px; object-fit: contain; } .discount-card p { color: #1a2230; font-size: .88rem; line-height: 1.55; margin: 0; } /* Partner strip */ .partner-strip { border-top: 6px solid #FFC107; border-bottom: 6px solid #FFC107; background: #ffffff; } .partner-strip-inner { display: flex; align-items: center; justify-content: space-evenly; padding: 40px 28px; flex-wrap: nowrap; } .partner-strip-inner img { height: 85px; width: auto; max-width: 200px; object-fit: contain; opacity: 1; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .partner-strip-inner img:hover { transform: scale(1.06); } /* ---- Animated brand marquee (home page) ---- */ .partner-marquee { overflow: hidden; width: 100%; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); } .partner-marquee-track { display: flex; align-items: center; gap: 90px; width: max-content; padding: 40px 45px; animation: partner-scroll 60s linear infinite; } .partner-marquee-track img { height: 85px; width: auto; max-width: 200px; object-fit: contain; flex-shrink: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .partner-marquee-track img:hover { transform: scale(1.06); } .partner-strip:hover .partner-marquee-track, .partner-marquee-track:hover { animation-play-state: paused; } @keyframes partner-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .partner-marquee-track { animation: none; } } @media (max-width: 768px) { .partner-marquee-track { gap: 50px; padding: 24px 30px; animation-duration: 45s; } .partner-marquee-track img { height: 60px; max-width: 160px; } } /* ============================================================ REVIEWS ============================================================ */ .reviews-section { padding: 70px 0 90px; background: #ffffff; } .reviews-head { display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center; margin-bottom: 40px; } .reviews-head-left h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 10px; } .reviews-head-left p { color: #5b6473; max-width: 560px; margin: 0; font-size: .95rem; line-height: 1.65; } .reviews-head-right { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } .google-badge { display: flex; align-items: center; gap: 14px; } .google-g { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,.12); display: grid; place-items: center; } .google-g svg { width: 24px; height: 24px; } .google-rating-block { line-height: 1.1; } .google-rating-block .stars-row { color: #FFC107; font-size: 24px; letter-spacing: 3px; margin-bottom: 3px; } .google-rating-block .rating-text { font-size: 13px; color: #0E2F4F; font-weight: 600; letter-spacing: 1px; } .google-rating-block .rating-text strong { font-weight: 800; font-size: 15px; } .btn-review { padding: 10px 20px; font-size: 13px; letter-spacing: .5px; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .review-photo { display: block; perspective: 1200px; aspect-ratio: 4/3; cursor: pointer; } .review-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.22,.61,.36,1); } .review-photo:hover .review-inner, .review-photo.flipped .review-inner { transform: rotateY(180deg); } .review-front, .review-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(14,47,79,0.08); } .review-front { background: #ffffff; } .review-front img { width: 100%; height: 100%; object-fit: cover; display: block; } .review-back { background: #0E2F4F; color: #ffffff; transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 20px; text-align: center; } .review-back::before { content: "\201C"; position: absolute; top: 4px; left: 16px; font-size: 60px; line-height: 1; color: #FFC107; font-family: Georgia, serif; opacity: .75; } .review-back .stars { color: #FFC107; font-size: 22px; letter-spacing: 3px; margin-bottom: 10px; } .review-back p { font-size: .82rem; line-height: 1.55; margin: 0; font-weight: 500; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #0a2340; color: rgba(255,255,255,.75); padding-top: 70px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 50px; } .foot-col h4 { color: #ffffff; font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; position: relative; padding-bottom: 10px; } .foot-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: #FFC107; } .foot-col ul { list-style: none; padding: 0; margin: 0; } .foot-col li { margin-bottom: 10px; font-size: .93rem; } .foot-col a { transition: color .2s; } .foot-col a:hover { color: #FFC107; } .foot-brand img { height: 88px; margin-bottom: 18px; } .foot-brand p { font-size: .93rem; line-height: 1.7; opacity: .85; max-width: 360px; } .contact-list li { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } .contact-list strong { color: #FFC107; font-size: .9rem; letter-spacing: .5px; } .contact-list span { font-size: .9rem; } .socials { display: flex; gap: 10px; margin-top: 18px; } .socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .25s, transform .25s, color .25s; } .socials a:hover { background: #FFC107; color: #0E2F4F; transform: translateY(-3px); } .socials svg { width: 18px; height: 18px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; font-size: .85rem; } .footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer-bottom p { margin: 0; } .licenses-bottom { opacity: .7; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .reveal[data-reveal="left"] { transform: translateX(-40px); } .reveal[data-reveal="right"] { transform: translateX(40px); } .reveal[data-reveal="up"] { transform: translateY(28px); } .reveal[data-reveal="fade"] { transform: none; } .reveal.in-view { opacity: 1; transform: none; } /* On mobile/tablet, reveal-from-side transforms can push elements past the viewport before the IntersectionObserver fires. Use a vertical slide instead — same animation feel, no horizontal overflow. */ @media (max-width: 1024px) { .reveal[data-reveal="left"], .reveal[data-reveal="right"] { transform: translateY(20px); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr; gap: 40px; } .hero-form { margin: 0 auto; max-width: 520px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .services-grid { grid-template-columns: 1fr; gap: 40px; } .discount-head { grid-template-columns: 1fr; text-align: center; gap: 30px; } .discount-ribbon { margin: 0 auto; max-width: 320px; } .problem-grid { grid-template-columns: 1fr; text-align: center; } .problem-actions { justify-content: center; } .problem-van img { max-width: 560px; margin: 0 auto; } @keyframes vanFloat { from { transform: translateY(20px); } to { transform: translateY(12px); } } .reviews-head { grid-template-columns: 1fr; text-align: center; } .reviews-head-right { align-items: center; } .reviews-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .partner-strip-inner img { height: 82px; } } @media (max-width: 768px) { .header-inner { grid-template-columns: auto auto; gap: 12px; } .main-nav { grid-column: 1 / -1; position: fixed; top: 86px; left: 0; right: 0; background: #ffffff; flex-direction: column; align-items: flex-start; gap: 0; padding: 20px 28px; box-shadow: 0 10px 30px rgba(14,47,79,0.12); transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.22,.61,.36,1); } .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .main-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid #e4e8ef; } .main-nav a:last-child { border: none; } .main-nav .has-dropdown { width: 100%; flex-direction: column; align-items: stretch; border-bottom: 1px solid #e4e8ef; } .main-nav .has-dropdown > .dropdown-trigger { width: 100%; padding: 12px 0; border-bottom: none; } .main-nav .has-dropdown > .dropdown-trigger::before { display: none; } .main-nav .dropdown-menu { position: static; transform: none; opacity: 1; pointer-events: auto; box-shadow: none; border: none; background: transparent; padding: 0 0 8px 14px; min-width: 0; } .main-nav .dropdown-menu::before { display: none; } .main-nav .dropdown-menu a { padding: 8px 0; border: none; font-size: 13px; opacity: .85; } .nav-toggle { display: flex; } .call-cta .call-text { display: none; } .call-cta { padding: 2px; } .call-cta-group { gap: 4px; } .call-cta-group .call-icon { width: 36px; height: 36px; } .brand img { height: 56px; } .hide-mobile { display: none; } .hero { padding: 50px 0 70px; min-height: auto; } .hero-title { font-size: 2.2rem; } .services-cards { grid-template-columns: repeat(2, 1fr); } .discount-grid { grid-template-columns: 1fr; gap: 30px; } .reviews-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom .container { flex-direction: column; text-align: center; } .hero-form { padding: 24px 20px; } .about-section, .services-section, .discount-section, .reviews-section, .problem-cta { padding: 50px 0; } .partner-strip-inner { gap: 18px; padding: 24px 16px; flex-wrap: wrap; } .partner-strip-inner img { height: 60px; flex: 1 1 120px; max-width: 160px; } .problem-van img { max-width: 440px; } } @media (max-width: 480px) { .hero-title { font-size: 1.85rem; } .services-cards { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: 1fr; } .county-logos img { height: 44px; max-width: 90px; } .call-now-number { font-size: 18px; } } /* ============================================================ SERVICES PAGE ============================================================ */ .services-page-hero { background: #ffffff; padding: 80px 0 10px; text-align: center; } .services-page-hero-inner { max-width: 680px; margin: 0 auto; } .services-page-hero h1 { color: #0E2F4F; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900; letter-spacing: 1px; margin: 0 0 14px; line-height: 1; } .services-page-hero p { color: #0E2F4F; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; margin: 0; opacity: .92; } .services-page-tiles { background: #ffffff; padding: 40px 0 80px; } .service-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 38px; max-width: 1080px; margin: 0 auto; } .service-tile { display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .service-tile:hover { transform: translateY(-6px); } .service-tile-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(14,47,79,.16); transition: box-shadow .35s cubic-bezier(.22,.61,.36,1); } .service-tile:hover .service-tile-img { box-shadow: 0 18px 40px rgba(14,47,79,.24); } .service-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .service-tile:hover .service-tile-img img { transform: scale(1.06); } .service-tile-label { display: inline-block; background: #FFC107; color: #0E2F4F; padding: 8px 28px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .3px; margin-top: 18px; min-width: 160px; box-shadow: 0 4px 10px rgba(0,0,0,.12); transition: background .25s, transform .25s; } .service-tile:hover .service-tile-label { background: #e5ad00; transform: scale(1.03); } /* Services page responsive */ @media (max-width: 1024px) { .service-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; max-width: 720px; } .services-page-hero { padding: 60px 0 10px; } .services-page-tiles { padding: 30px 0 70px; } } @media (max-width: 600px) { .service-tiles-grid { grid-template-columns: 1fr; gap: 28px; max-width: 360px; } .services-page-hero h1 { font-size: 2.2rem; } .service-tile-img { border-radius: 16px; } .service-tile-label { padding: 7px 22px; font-size: 13px; min-width: 140px; } } /* ============================================================ ABOUT PAGE ============================================================ */ /* --- Team hero (group photo, white bg) --- */ .team-hero { background: #ffffff; padding: 20px 0 0; } .team-hero-photo { display: flex; justify-content: center; } .team-hero-photo img { max-width: 1100px; width: 100%; height: auto; } /* --- Our Team yellow banner --- */ .our-team-banner { background: #FFC107; padding: 22px 0 26px; text-align: center; } .our-team-banner h1 { color: #0E2F4F; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: 2px; margin: 0 0 4px; } .our-team-banner p { color: #0E2F4F; font-size: .95rem; margin: 0; opacity: .85; } /* --- Navy team grid section --- */ .team-grid-section { background: #0E2F4F; color: #ffffff; padding: 70px 0 70px; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto 60px; } .team-card { background: transparent; border: none; padding: 0; cursor: pointer; aspect-ratio: 1 / 1.05; display: block; perspective: 1000px; text-align: left; } .team-card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.22,.9,.32,1); border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.22); } .team-card:hover .team-card-inner, .team-card:focus-visible .team-card-inner, .team-card.is-flipped .team-card-inner { transform: rotateY(180deg); box-shadow: 0 14px 28px rgba(0,0,0,.35); } .team-card-front, .team-card-back { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: block; } .team-card-front { background: #ffffff; } .team-card-front img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .team-card-back { background: #0E2F4F; color: #ffffff; transform: rotateY(180deg); padding: 18px 18px 16px; display: flex; flex-direction: column; text-align: left; overflow-y: auto; } .team-card-back .tc-name { font-size: 1.05rem; font-weight: 800; letter-spacing: .5px; margin-bottom: 2px; } .team-card-back .tc-role { display: block; color: #FFC107; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; } .team-card-back .tc-tagline { display: block; font-style: italic; font-size: .82rem; line-height: 1.4; color: rgba(255,255,255,.92); margin-bottom: 10px; } .team-card-back .tc-bio { display: block; font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.85); } @media (max-width: 600px) { .team-card-back { padding: 14px; } .team-card-back .tc-name { font-size: .95rem; } .team-card-back .tc-role { font-size: .68rem; } .team-card-back .tc-tagline { font-size: .76rem; margin-bottom: 6px; } .team-card-back .tc-bio { font-size: .72rem; line-height: 1.4; } } .more-than-line { text-align: center; color: #ffffff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; line-height: 1.25; margin: 0; } .more-than-line .text-yellow { font-weight: 800; } /* --- Why Choose Us + Licenses --- */ .choose-section { padding: 70px 0 70px; background: #ffffff; } .choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1040px; margin: 0 auto; } .choose-left, .choose-right { display: flex; flex-direction: column; align-items: center; text-align: center; } .choose-head { color: #0E2F4F; font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 600; line-height: 1.2; margin-bottom: 28px; } .choose-head-highlight { display: inline-block; background: #FFC107; color: #0E2F4F; padding: 4px 14px; border-radius: 4px; font-weight: 900; letter-spacing: 2px; font-size: 1.2em; margin-top: 8px; } .choose-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 320px; } .choose-pills li { background: #0E2F4F; color: #ffffff; padding: 16px 24px; border-radius: 999px; font-weight: 800; letter-spacing: 2.5px; text-align: center; font-size: 17px; transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s, box-shadow .3s; cursor: default; } .choose-pills li:hover { background: #0a2340; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(14,47,79,.25); } /* Right column licenses tightened */ .choose-right { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } .choose-right .license-title { font-size: clamp(1.35rem, 2vw, 1.65rem); margin-bottom: 12px; } .choose-right .license-banner { width: 100%; max-width: 380px; } .choose-right .license-list { width: 100%; max-width: 320px; margin: 0 auto 24px; } .choose-right .license-list li { align-items: center; padding: 14px 0; border-bottom: 1px solid #eef1f6; } .choose-right .license-list li:last-child { border-bottom: none; } .choose-right .lic-num { font-size: 1.6rem; } /* --- Service Area --- */ .service-area-section { padding: 70px 0 60px; background: radial-gradient(circle at 12% 15%, rgba(255,193,7,0.06), transparent 45%), radial-gradient(circle at 88% 80%, rgba(14,47,79,0.06), transparent 45%), #f6f8fb; text-align: center; position: relative; border-top: 1px solid #e4e8ef; border-bottom: 1px solid #e4e8ef; } .service-area-section::before, .service-area-section::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: #FFC107; opacity: .9; } .service-area-section::before { top: 0; } .service-area-section::after { bottom: 0; } .service-area-head { max-width: 720px; margin: 0 auto 30px; } .service-area-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: 1px; color: #0E2F4F; margin-bottom: 10px; } .service-area-head p { color: #5b6473; font-size: .95rem; margin: 0; line-height: 1.55; } .florida-map { max-width: 520px; margin: 0 auto; } .florida-map svg { width: 100%; height: auto; display: block; } .map-pin .pin-pulse { transform-origin: center; animation: pinPulse 2.4s ease-in-out infinite; } .map-pin { cursor: pointer; } .map-pin > path { transform-box: fill-box; transform-origin: center bottom; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .map-pin:hover > path { transform: scale(1.18); } @keyframes pinPulse { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.9); opacity: 0; } } .service-area-label { margin-top: 18px; color: #0E2F4F; font-weight: 700; letter-spacing: .5px; font-size: 1.05rem; } .service-area-logos { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 24px auto 0; max-width: 880px; flex-wrap: nowrap; } .service-area-logos img { flex: 1 1 0; height: 72px; width: 100%; min-width: 0; max-width: 180px; object-fit: contain; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .service-area-logos img:hover { transform: scale(1.08); } /* --- Find Us (navy) --- */ .find-us-section { background: #0E2F4F; color: #ffffff; padding: 80px 0 90px; } .find-us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; max-width: 1100px; margin: 0 auto; } .find-us-left { text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 440px; margin: 0 auto; width: 100%; } .find-us-title { display: inline-block; background: #FFC107; color: #0E2F4F; padding: 14px 42px; font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 900; letter-spacing: 3px; border-radius: 4px; margin-bottom: 24px; line-height: 1; } .office-block { width: 100%; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; align-items: center; gap: 8px; } .office-block:first-of-type { padding-top: 4px; } .office-block h3 { color: #ffffff; font-size: 1.2rem; margin: 0; font-weight: 800; letter-spacing: .3px; } .office-block p { margin: 0; font-size: .92rem; opacity: .88; line-height: 1.5; } .office-phone { display: inline-flex; align-items: center; gap: 8px; color: #ffffff; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin: 0; } .office-phone svg { width: 15px; height: 15px; color: #FFC107; } .office-phone:hover { color: #FFC107; } .directions-btn { display: inline-block; background: #FFC107; color: #0E2F4F; padding: 7px 18px; border-radius: 4px; font-weight: 700; font-size: 12.5px; letter-spacing: .3px; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; transition: transform .2s, background .2s, box-shadow .2s; } .directions-btn:hover { background: #e5ad00; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,193,7,.35); } .hours-block { width: 100%; padding: 20px 0 18px; border-bottom: 1px solid rgba(255,255,255,.12); } .hours-block h3 { color: #ffffff; font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; } .hours-block p { margin: 0; font-size: .92rem; opacity: .88; line-height: 1.55; } .follow-block { width: 100%; padding-top: 20px; } .follow-block .follow-label { font-size: .88rem; opacity: .8; margin-bottom: 12px; } .socials-large { justify-content: center; } .socials-large a { width: 46px; height: 46px; background: #ffffff; color: #0E2F4F; } .socials-large a:hover { background: #FFC107; color: #0E2F4F; } .socials-large svg { width: 22px; height: 22px; } .find-us-section .hero-form { margin: 0 0 0 auto; max-width: 460px; width: 100%; } /* ============================================================ TEAM MODAL ============================================================ */ .team-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; } .team-modal[hidden] { display: none; } .team-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 40, .75); backdrop-filter: blur(4px); animation: modalFade .25s cubic-bezier(.22,.61,.36,1); } .team-modal-card { position: relative; background: #294b6c; border-radius: 24px; max-width: 760px; width: 100%; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: modalPop .35s cubic-bezier(.22,.61,.36,1); } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalPop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } } .team-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #ffffff; font-size: 30px; cursor: pointer; line-height: 1; opacity: .8; transition: opacity .2s, transform .2s; } .team-modal-close:hover { opacity: 1; transform: rotate(90deg); } .team-modal-inner { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center; } .team-modal-photo { background: #ffffff; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1.1; } .team-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .team-modal-text h3 { color: #ffffff; font-size: 3rem; font-weight: 800; margin: 0 0 4px; line-height: 1; } .team-modal-role { color: #FFC107; font-style: italic; font-weight: 700; font-size: 1rem; margin-bottom: 20px; } .team-modal-tagline { color: #FFC107; font-weight: 700; margin-bottom: 12px; font-size: 1rem; } .team-modal-bio { color: #ffffff; opacity: .95; font-size: .95rem; line-height: 1.65; margin: 0; } .team-modal-bio .hl { color: #FFC107; font-weight: 700; } /* ============================================================ RESPONSIVE (About + Modal) ============================================================ */ @media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .choose-grid { grid-template-columns: 1fr; gap: 60px; max-width: 460px; } .find-us-grid { grid-template-columns: 1fr; gap: 60px; max-width: 560px; } .find-us-section .hero-form { margin: 0 auto; } .service-area-logos { gap: 20px; } } @media (max-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .team-modal-card { padding: 22px 20px; } .team-modal-inner { grid-template-columns: 1fr; gap: 20px; } .team-modal-photo { max-width: 220px; margin: 0 auto; } .team-modal-text { text-align: center; } .team-modal-text h3 { font-size: 2.2rem; } .our-team-banner { padding: 18px 0 20px; } .our-team-banner h1 { font-size: 1.75rem; } .team-grid-section { padding: 50px 0 55px; } .team-grid-section .team-grid { margin-bottom: 40px; } .choose-section { padding: 55px 0 65px; } .choose-pills li { padding: 14px 20px; font-size: 15px; letter-spacing: 2px; } .service-area-section { padding: 55px 0 40px; } .service-area-head h2 { font-size: 1.9rem; } .service-area-logos { flex-wrap: wrap; justify-content: center; gap: 18px 22px; } .service-area-logos img { flex: 0 1 40%; height: 56px; max-width: 140px; } .find-us-section { padding: 55px 0 65px; } .find-us-title { padding: 14px 36px; letter-spacing: 2px; } .office-block h3, .hours-block h3 { font-size: 1.1rem; } } @media (max-width: 480px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .team-modal-text h3 { font-size: 1.8rem; } .service-area-logos img { flex: 0 1 45%; height: 46px; } .choose-pills { max-width: 280px; } .choose-pills li { padding: 12px 18px; font-size: 14px; } .find-us-title { font-size: 1.5rem; padding: 12px 28px; } } /* ============================================================ PORTFOLIO PAGE ============================================================ */ /* --- Hero --- */ .portfolio-hero { position: relative; background: #ffffff; padding: 70px 0 40px; text-align: center; overflow: hidden; } .portfolio-hero-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .portfolio-hero-decor .deco-dot { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: pfFloat 9s ease-in-out infinite alternate; } .deco-dot-1 { width: 260px; height: 260px; background: rgba(255,193,7,.35); top: -80px; left: -60px; } .deco-dot-2 { width: 220px; height: 220px; background: rgba(14,47,79,.18); top: 20px; right: -40px; animation-delay: -3s; } .deco-dot-3 { width: 180px; height: 180px; background: rgba(138,157,178,.35); bottom: -60px; left: 35%; animation-delay: -6s; } @keyframes pfFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(12px,-10px,0) scale(1.06); } } .portfolio-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .portfolio-title { color: #0E2F4F; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 18px; line-height: 1.08; } .portfolio-sub { color: #1a2230; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.7; margin: 0; text-align: justify; text-align-last: center; text-justify: inter-word; hyphens: auto; max-width: 640px; margin-left: auto; margin-right: auto; } /* --- Portfolio card grid --- */ .portfolio-grid-section { background: #ffffff; padding: 20px 0 80px; } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1120px; margin: 0 auto; } .pf-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; padding: 18px 18px 22px; overflow: hidden; transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), background-color .35s cubic-bezier(.22,.61,.36,1); isolation: isolate; } .pf-card::after { content: ""; position: absolute; inset: 0; border-radius: 22px; box-shadow: 0 18px 40px rgba(14,47,79,.10); opacity: 0; transition: opacity .45s cubic-bezier(.22,.61,.36,1); pointer-events: none; z-index: -1; } .pf-card:hover { transform: translateY(-8px); } .pf-card:hover::after { opacity: 1; } .pf-card--light { background: #f5f6f8; color: #0E2F4F; box-shadow: 0 6px 18px rgba(14,47,79,.06); } .pf-card--light:hover { background: #f9fafc; } .pf-card--dark { background: #8a9db2; color: #ffffff; box-shadow: 0 10px 22px rgba(74,94,117,.30); } .pf-card--dark:hover { background: #97a8bc; } .pf-card-img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; position: relative; margin-bottom: 16px; background: #d9dde3; } .pf-card-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%); transform: translateX(-120%); transition: transform .9s cubic-bezier(.22,.61,.36,1); z-index: 2; pointer-events: none; } .pf-card:hover .pf-card-img::before { transform: translateX(120%); } .pf-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .45s cubic-bezier(.22,.61,.36,1); } .pf-card:hover .pf-card-img img { transform: scale(1.08); } .pf-card-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 4px 6px 2px; } .pf-card-text { min-width: 0; } .pf-card-title { color: inherit; font-size: clamp(1.35rem, 1.8vw, 1.7rem); font-weight: 800; line-height: 1.05; margin: 0 0 4px; letter-spacing: -.01em; } .pf-card-sub { margin: 0; font-size: .9rem; font-weight: 500; letter-spacing: .2px; opacity: .78; color: inherit; } .pf-card-arrow { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: inherit; background: transparent; transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1); } .pf-card-arrow svg { width: 22px; height: 22px; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .pf-card:hover .pf-card-arrow { background: #FFC107; color: #0E2F4F; transform: rotate(-20deg); } .pf-card:hover .pf-card-arrow svg { transform: translateX(2px); } /* --- Featured case studies --- */ .featured-section { background: #ffffff; padding: 80px 0 90px; } .featured-head { text-align: center; max-width: 720px; margin: 0 auto 44px; } .featured-title { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; margin: 6px 0 14px; line-height: 1.1; } .featured-intro { color: #5b6473; font-size: 1rem; line-height: 1.65; margin: 0; } .featured-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 260px; gap: 22px; max-width: 1180px; margin: 0 auto; } .featured-card { position: relative; grid-column: span 2; grid-row: span 1; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px rgba(14,47,79,.12); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1); cursor: pointer; isolation: isolate; } .featured-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(14,47,79,.24); } .featured-card--tall { grid-column: span 3; grid-row: span 2; } .featured-card--wide { grid-column: span 3; grid-row: span 1; } .featured-media { position: absolute; inset: 0; } .featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.22,.61,.36,1), filter .6s cubic-bezier(.22,.61,.36,1); } .featured-card:hover .featured-media img { transform: scale(1.08); filter: brightness(.85); } .featured-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 22px 22px; color: #ffffff; background: linear-gradient(180deg, rgba(14,47,79,0) 40%, rgba(14,47,79,.85) 100%); z-index: 1; transition: background .5s cubic-bezier(.22,.61,.36,1); } .featured-card:hover .featured-overlay { background: linear-gradient(180deg, rgba(14,47,79,.25) 0%, rgba(14,47,79,.9) 100%); } .featured-tag { display: inline-block; background: #FFC107; color: #0E2F4F; font-size: 11px; font-weight: 800; letter-spacing: 2px; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; align-self: flex-start; transform: translateY(0); transition: transform .45s cubic-bezier(.22,.61,.36,1); } .featured-card:hover .featured-tag { transform: translateY(-2px); } .featured-overlay h3 { color: #ffffff; font-size: clamp(1.15rem, 1.6vw, 1.55rem); font-weight: 800; margin: 0 0 6px; line-height: 1.15; } .featured-overlay p { color: rgba(255,255,255,.92); font-size: .92rem; line-height: 1.55; margin: 0 0 10px; max-width: 460px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,.61,.36,1), opacity .35s cubic-bezier(.22,.61,.36,1), margin .4s cubic-bezier(.22,.61,.36,1); } .featured-card:hover .featured-overlay p { max-height: 140px; opacity: 1; } .featured-link { display: inline-flex; align-items: center; gap: 8px; color: #FFC107; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .featured-link svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .featured-card:hover .featured-link svg { transform: translateX(4px); } /* --- Stats strip --- */ .pf-stats { background: #0E2F4F; color: #ffffff; padding: 46px 0; position: relative; } .pf-stats::before, .pf-stats::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: #FFC107; opacity: .9; } .pf-stats::before { top: 0; } .pf-stats::after { bottom: 0; } .pf-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; align-items: center; text-align: center; } .pf-stat { padding: 10px 8px; border-right: 1px solid rgba(255,255,255,.12); } .pf-stat:last-child { border-right: none; } .pf-stat-num { color: #FFC107; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .pf-stat-label { color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } /* --- 3D Coverflow showcase --- */ .showcase-section { position: relative; background: radial-gradient(circle at 10% 0%, rgba(255,193,7,.08), transparent 50%), radial-gradient(circle at 90% 100%, rgba(14,47,79,.08), transparent 55%), #f6f8fb; padding: 30px 0 10px; overflow: hidden; } .showcase-head { text-align: center; max-width: 720px; margin: 0 auto 10px; } .showcase-title { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; margin: 6px 0 14px; line-height: 1.1; } .showcase-intro { color: #5b6473; font-size: 1rem; line-height: 1.65; margin: 0 auto 24px; max-width: 560px; } .showcase-cta { padding: 12px 28px; border-radius: 999px; font-size: 14px; letter-spacing: .5px; } /* Coverflow stage */ .coverflow { position: relative; margin: 20px auto 0; max-width: 1240px; padding: 0 28px; user-select: none; } .cf-stage { position: relative; height: 620px; perspective: 1800px; perspective-origin: 50% 50%; overflow: hidden; } .cf-track { position: absolute; inset: 0; transform-style: preserve-3d; } /* A slide holds the image frame + a caption directly beneath. */ .cf-slide { position: absolute; top: 50%; left: 50%; width: 340px; margin-left: -170px; margin-top: -270px; display: flex; flex-direction: column; align-items: center; cursor: pointer; will-change: transform, opacity; transform-origin: 50% 50%; transition: transform .7s cubic-bezier(.22,.9,.32,1), opacity .55s cubic-bezier(.22,.61,.36,1); } .cf-slide-frame { width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #d9dde3; box-shadow: 0 20px 40px rgba(14,47,79,.22); position: relative; transition: box-shadow .55s cubic-bezier(.22,.61,.36,1), filter .55s cubic-bezier(.22,.61,.36,1); } .cf-slide-frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; transition: transform .8s cubic-bezier(.22,.61,.36,1); } .cf-slide:not(.is-active) .cf-slide-frame { filter: saturate(.92) brightness(.92); } .cf-slide.is-active .cf-slide-frame { box-shadow: 0 28px 54px rgba(14,47,79,.32); } .cf-slide.is-active .cf-slide-frame img { transform: scale(1.04); } .cf-slide-caption { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .4s cubic-bezier(.22,.61,.36,1) .1s, transform .4s cubic-bezier(.22,.61,.36,1) .1s; } .cf-slide.cf-flat .cf-slide-caption { opacity: 1; transform: none; } .cf-slide-num { font-size: 10.5px; font-weight: 700; color: #FFC107; letter-spacing: 3px; } .cf-slide-name { font-size: 13px; font-weight: 700; color: #0E2F4F; letter-spacing: .5px; } /* Nav arrows */ .cf-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; border: none; background: #ffffff; color: #0E2F4F; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px rgba(14,47,79,.18); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1), color .3s cubic-bezier(.22,.61,.36,1); } .cf-nav:hover { background: #FFC107; color: #0E2F4F; transform: translateY(-50%) scale(1.06); } .cf-nav:active { transform: translateY(-50%) scale(.96); } .cf-nav svg { width: 22px; height: 22px; } .cf-prev { left: 12px; } .cf-next { right: 12px; } /* Dots */ .cf-dots { margin-top: 28px; display: flex; justify-content: center; gap: 10px; } .cf-dot { width: 9px; height: 9px; border: none; border-radius: 50%; background: #c8cfda; padding: 0; cursor: pointer; transition: background .25s, transform .25s, width .25s; } .cf-dot:hover { background: #1b446e; } .cf-dot.is-active { background: #FFC107; width: 26px; border-radius: 999px; } /* Showcase responsive */ @media (max-width: 1100px) { .cf-stage { height: 540px; } .cf-slide { width: 290px; margin-left: -145px; margin-top: -240px; } } @media (max-width: 768px) { .cf-stage { height: 470px; } .cf-slide { width: 240px; margin-left: -120px; margin-top: -215px; } .cf-slide-caption { margin-top: 14px; } .cf-slide-name { font-size: 12px; } } @media (max-width: 520px) { .showcase-section { padding: 22px 0 8px; } .coverflow { margin-top: 16px; padding: 0 8px; } .cf-stage { height: 400px; } .cf-slide { width: 200px; margin-left: -100px; margin-top: -190px; } .cf-slide-frame { border-radius: 12px; } .cf-nav { width: 42px; height: 42px; } .cf-nav svg { width: 18px; height: 18px; } .cf-slide-num { font-size: 9.5px; letter-spacing: 2px; } .cf-slide-name { font-size: 11.5px; } } /* --- Portfolio responsive --- */ @media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 760px; } .featured-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; } .featured-card { grid-column: span 2; } .featured-card--tall { grid-column: span 2; grid-row: span 2; } .featured-card--wide { grid-column: span 4; grid-row: span 1; } .pf-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 30px; } .pf-stat { border-right: none; } .pf-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); } } @media (max-width: 640px) { .portfolio-hero { padding: 50px 0 28px; } .portfolio-grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; } .pf-card { padding: 14px 14px 18px; border-radius: 18px; } .pf-card-img { aspect-ratio: 16/10; border-radius: 12px; } .pf-card-title { font-size: 1.3rem; } .featured-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; gap: 18px; } .featured-card, .featured-card--tall, .featured-card--wide { grid-column: span 1; grid-row: span 1; } .featured-overlay p { max-height: 140px; opacity: 1; } .pf-stats-inner { grid-template-columns: 1fr; gap: 22px; } .pf-stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 18px; } .pf-stat:last-child { border-bottom: none; } } /* ============================================================ SERVICE DETAIL PAGE (Bathroom / Kitchen / Roofing / etc.) ============================================================ */ /* --- Hero: title + subtitle + large image with hotspots --- */ .sd-hero { padding: 40px 0 20px; background: #ffffff; } .sd-hero-inner { text-align: center; max-width: 820px; } .sd-title { color: #0E2F4F; font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 900; letter-spacing: 1.5px; margin: 0 0 16px; line-height: 1; } .sd-sub { color: #0E2F4F; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.6; margin: 0 auto 30px; max-width: 680px; opacity: .88; } .sd-showcase { max-width: 1240px; padding: 0 28px; } .sd-showcase-img { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 48px rgba(14,47,79,.14); aspect-ratio: 16 / 9; background: #eef1f5; } .sd-showcase-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Hotspot + icons overlaid on the hero image */ .sd-hotspot { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #0E2F4F; display: grid; place-items: center; cursor: pointer; z-index: 3; box-shadow: 0 4px 12px rgba(14,47,79,.3); transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s cubic-bezier(.22,.61,.36,1); animation: hotspotPulse 2.4s cubic-bezier(.22,.61,.36,1) infinite; } .sd-hotspot::before, .sd-hotspot::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; } .sd-hotspot::before { width: 12px; height: 2px; } .sd-hotspot::after { width: 2px; height: 12px; } .sd-hotspot:hover, .sd-hotspot:focus-visible, .sd-hotspot.is-open { background: #FFC107; transform: translate(-50%, -50%) scale(1.12); outline: none; } /* Hotspot label (tooltip) appearing above the + */ .sd-hotspot::after, .sd-hotspot .sd-tip { /* keep :after as plus stroke; tip is separate span */ } .sd-hotspot .sd-tip { position: absolute; width: max-content; max-width: min(230px, calc(100vw - 40px)); bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); background: #0E2F4F; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: .6px; line-height: 1.4; text-align: center; padding: 7px 12px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1); box-shadow: 0 10px 22px rgba(14,47,79,.25); } .sd-hotspot .sd-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0E2F4F; } .sd-hotspot:hover .sd-tip, .sd-hotspot:focus-visible .sd-tip, .sd-hotspot.is-open .sd-tip { opacity: 1; transform: translateX(-50%) translateY(0); } @keyframes hotspotPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(14,47,79,.3), 0 0 0 0 rgba(255,193,7,.55); } 50% { box-shadow: 0 4px 12px rgba(14,47,79,.3), 0 0 0 10px rgba(255,193,7,0); } } /* --- What We Offer --- */ .sd-offer { padding: 80px 0 70px; background: #ffffff; } .sd-offer-head { text-align: center; font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; color: #0E2F4F; margin: 0 0 6px; } .sd-offer-hint { text-align: center; color: #d7263d; font-size: .95rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; margin: 0 0 34px; cursor: help; } .sd-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1140px; margin: 0 auto; } /* 2-column variant used on the Kitchen page (4 cards in a 2×2 grid). */ .sd-offer-grid--2col { grid-template-columns: repeat(2, 1fr); max-width: 920px; gap: 30px; } .offer-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 26px rgba(14,47,79,.10); transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1); } .offer-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(14,47,79,.18); } /* Shared slide-up detail cover — works on any service card that has .card-flip-detail as a descendant and one of these hover hosts: .offer-card (bathroom) or .flooring-card (flooring) or a future card. */ .card-flip-detail { position: absolute; inset: 0; background: #0E2F4F; color: #ffffff; padding: 26px 24px 28px; border-radius: inherit; overflow-y: auto; transform: translateY(100%); opacity: 0; pointer-events: none; z-index: 4; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s cubic-bezier(.22,.61,.36,1); box-shadow: 0 -10px 24px rgba(0,0,0,.15) inset; } .offer-card:hover .card-flip-detail, .offer-card:focus-within .card-flip-detail, .offer-card.is-flipped .card-flip-detail, .flooring-card:hover .card-flip-detail, .flooring-card:focus-within .card-flip-detail, .flooring-card.is-flipped .card-flip-detail { transform: translateY(0); opacity: 1; pointer-events: auto; } .card-flip-detail h3 { color: #ffffff; font-size: 1.2rem; font-weight: 800; text-align: center; margin: 0 0 16px; letter-spacing: .3px; } .card-flip-detail .detail-item { margin-bottom: 14px; } .card-flip-detail .detail-item:last-child { margin-bottom: 0; } .card-flip-detail .detail-item strong { display: block; color: #ffffff; font-size: .95rem; font-weight: 800; margin-bottom: 4px; letter-spacing: .2px; } .card-flip-detail .detail-item p { color: rgba(255,255,255,.88); font-size: .88rem; line-height: 1.55; margin: 0; } /* Slim scrollbar for long content */ .card-flip-detail::-webkit-scrollbar { width: 6px; } .card-flip-detail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; } .offer-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #d9dde3; } .offer-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Diagonal before / after split */ .offer-before, .offer-after { position: absolute; inset: 0; } .offer-before { /* Show the left 55% of the "before" image, cut with a diagonal */ clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%); z-index: 2; } .offer-after { z-index: 1; } .offer-before-tag { position: absolute; top: 14px; left: 14px; background: #FFC107; color: #0E2F4F; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 5px 12px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.18); z-index: 3; } /* Single-image variant (no before/after) */ .offer-card-media--single img { width: 100%; height: 100%; object-fit: cover; } .offer-card-body { background: #0E2F4F; color: #ffffff; padding: 22px 22px 24px; flex: 1; } .offer-card-body h3 { color: #ffffff; font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; line-height: 1.2; } .offer-card-body p { color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.55; margin: 0; } /* --- Licenses + drill --- */ .sd-licenses { padding: 80px 0; background: #ffffff; } .sd-licenses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1100px; margin: 0 auto; } .sd-licenses-left .license-title { text-align: left; } .sd-licenses-left .license-banner { display: inline-block; margin-bottom: 26px; } .sd-licenses-left .license-list li { align-items: flex-start; text-align: left; margin-bottom: 16px; } .sd-licenses-left .lic-num { font-size: 1.6rem; } .sd-badges { display: flex; align-items: center; gap: 40px; margin-top: 28px; flex-wrap: wrap; } .sd-licenses-right { display: flex; justify-content: center; align-items: center; min-height: 320px; position: relative; } .sd-drill { max-width: 100%; height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.22)); animation: drillFloat 4.5s ease-in-out infinite alternate; } @keyframes drillFloat { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-12px) rotate(2deg); } } /* Placeholder look when the drill image is missing */ .sd-drill.sd-drill-fallback { width: 100%; max-width: 380px; height: 320px; background: repeating-linear-gradient(45deg, #f6f8fb 0 12px, #ebeef4 12px 24px); border: 2px dashed #cfd6e0; border-radius: 16px; animation: none; position: relative; filter: none; } .sd-drill.sd-drill-fallback::after { content: "Drop drill image at assets/images/services/drill.png"; position: absolute; inset: 0; display: grid; place-items: center; color: #5b6473; font-size: 13px; font-weight: 600; text-align: center; padding: 0 20px; } /* --- Our Works carousel --- */ .sd-works { padding: 40px 0 90px; background: #ffffff; } .sd-works-head { text-align: center; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; color: #0E2F4F; margin: 0 0 40px; } .works-slider { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 70px; } .works-viewport { position: relative; height: 460px; overflow: hidden; } .works-track { position: relative; width: 100%; height: 100%; will-change: auto; } .work-slide { position: absolute; top: 50%; left: 50%; width: 620px; aspect-ratio: 4 / 3; margin: 0; border-radius: 16px; overflow: hidden; background: #e7eaf0; cursor: pointer; box-shadow: 0 18px 40px rgba(14,47,79,.22); will-change: transform, opacity; transform-origin: 50% 50%; transition: transform .65s cubic-bezier(.22,.9,.32,1), opacity .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1), filter .5s cubic-bezier(.22,.61,.36,1); } .work-slide:not(.is-active) { filter: saturate(.9) brightness(.9); } .work-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } .works-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e4e8ef; background: #ffffff; color: #0E2F4F; display: grid; place-items: center; cursor: pointer; z-index: 3; box-shadow: 0 6px 14px rgba(14,47,79,.12); transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1); } .works-nav:hover { background: #FFC107; color: #0E2F4F; transform: translateY(-50%) scale(1.08); } .works-nav:active { transform: translateY(-50%) scale(.94); } .works-nav svg { width: 20px; height: 20px; } .works-prev { left: 0; } .works-next { right: 0; } /* --- Case study --- */ .sd-case { padding: 80px 0 90px; background: #f6f8fb; } .sd-case-inner { max-width: 1080px; text-align: center; } .sd-case-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; margin: 6px 0 10px; line-height: 1.15; } .sd-case-type { color: #5b6473; font-size: .95rem; margin: 0 0 42px; } .sd-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; } .sd-case-card { background: #ffffff; border-radius: 16px; padding: 30px 26px 28px; box-shadow: 0 10px 24px rgba(14,47,79,.08); border-top: 4px solid #FFC107; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); position: relative; } .sd-case-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(14,47,79,.14); } .sd-case-num { display: inline-block; font-size: 14px; font-weight: 800; color: #FFC107; letter-spacing: 3px; margin-bottom: 10px; } .sd-case-card h3 { color: #0E2F4F; font-size: 1.25rem; font-weight: 800; margin: 0 0 12px; } .sd-case-card p { color: #1a2230; font-size: .92rem; line-height: 1.65; margin: 0; } /* --- Service detail responsive --- */ @media (max-width: 1024px) { .sd-offer-grid { grid-template-columns: repeat(2, 1fr); } .sd-licenses-grid{ grid-template-columns: 1fr; gap: 40px; text-align: center; } .sd-licenses-left .license-title { text-align: center; } .sd-licenses-left .license-list li { align-items: center; text-align: center; } .sd-badges { justify-content: center; } .sd-case-grid { grid-template-columns: 1fr; gap: 18px; } .works-viewport { height: 380px; } .work-slide { width: 480px; } } @media (max-width: 768px) { .works-viewport { height: 320px; } .work-slide { width: 380px; border-radius: 14px; } } @media (max-width: 640px) { .sd-hero { padding: 30px 0 10px; } .sd-showcase { padding: 0 16px; } .sd-showcase-img { border-radius: 14px; aspect-ratio: 4/3; } .sd-hotspot { width: 26px; height: 26px; } .sd-hotspot::before { width: 10px; } .sd-hotspot::after { height: 10px; } .sd-offer, .sd-licenses, .sd-works, .sd-case { padding: 50px 0 60px; } .sd-offer-grid { grid-template-columns: 1fr; } .works-slider { padding: 0 50px; } .works-viewport { height: 260px; } .work-slide { width: 280px; } .works-nav { width: 38px; height: 38px; } } /* ============================================================ FLOORING SERVICE PAGE ============================================================ */ /* --- Flooring type cards --- */ .flooring-types { padding: 20px 0 60px; background: #ffffff; } .flooring-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; max-width: 1100px; margin: 0 auto; } .flooring-card { flex: 0 1 calc((100% - 56px) / 3); max-width: 340px; min-width: 260px; position: relative; border-radius: 22px; overflow: hidden; background: #0E2F4F; box-shadow: 0 12px 28px rgba(14,47,79,.14); transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1); isolation: isolate; } .flooring-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(14,47,79,.22); } .flooring-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #d9dde3; position: relative; } .flooring-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .flooring-card:hover .flooring-card-img img { transform: scale(1.06); } .flooring-card-body { background: #0E2F4F; color: #ffffff; padding: 18px 22px 22px; } .flooring-card-body h3 { color: #ffffff; font-size: 1.2rem; font-weight: 800; margin: 0 0 6px; } .flooring-card-body p { color: rgba(255,255,255,.88); font-size: .88rem; line-height: 1.5; margin: 0; } /* --- Our Process banner strip --- */ .process-banner { background: #0E2F4F; padding: 24px 0; text-align: center; } .process-banner h2 { color: #ffffff; font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: .5px; margin: 0; } /* --- Process timeline (5 steps w/ alternating arcs) --- */ .process-section { background: #ffffff; padding: 20px 0 30px; } .process-timeline { position: relative; max-width: 1080px; margin: 0 auto; padding: 0; } .process-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-top: 70px; } .process-step { position: relative; text-align: center; padding: 0 6px; } /* Thick C-shape semi-circle wrapping around each icon. Odd steps (1,3,5): navy arc on the BOTTOM half. Even steps (2,4): yellow arc on the TOP half. */ .process-step::before { content: ""; position: absolute; top: 41px; /* icon's vertical center */ left: 50%; width: 152px; height: 152px; border-radius: 50%; border: 18px solid transparent; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } .process-step:nth-child(odd)::before { border-color: #0E2F4F; clip-path: inset(50% 0 0 0); /* show only bottom half */ } .process-step:nth-child(even)::before { border-color: #FFC107; clip-path: inset(0 0 50% 0); /* show only top half */ } .process-icon { position: relative; z-index: 2; width: 82px; height: 82px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; margin: 0 auto; box-shadow: 0 8px 18px rgba(14,47,79,.14); border: 2px solid #eef1f6; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .process-icon span { font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); } .process-icon img { width: 60%; height: 60%; object-fit: contain; display: block; } .process-step:hover .process-icon { transform: translateY(-4px) scale(1.04); } .process-stem { width: 2px; height: 40px; margin: 0 auto; background: #0E2F4F; position: relative; } .process-step:nth-child(even) .process-stem { background: #FFC107; } .process-dot { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #0E2F4F; } .process-step:nth-child(even) .process-dot { background: #FFC107; } .process-step h3 { color: #0E2F4F; font-size: 1rem; font-weight: 800; margin: 18px 0 12px; line-height: 1.2; letter-spacing: .2px; } .process-step p { color: #1a2230; font-size: .82rem; line-height: 1.55; margin: 0; max-width: 200px; text-align: center; margin-left: auto; margin-right: auto; text-align: justify; text-align-last: center; hyphens: auto; } .process-step strong { color: #0E2F4F; font-weight: 800; } /* --- Flooring responsive --- */ @media (max-width: 960px) { .flooring-card { flex: 0 1 calc((100% - 28px) / 2); } .process-steps { grid-template-columns: repeat(3, 1fr); gap: 50px 14px; padding-top: 70px; } } @media (max-width: 600px) { .flooring-card { flex: 0 1 100%; max-width: 380px; } .process-steps { grid-template-columns: 1fr; gap: 40px; } .process-icon { width: 72px; height: 72px; } .process-icon span { font-size: 32px; } .process-step::before { top: 36px; width: 132px; height: 132px; border-width: 16px; } .process-step p { max-width: 280px; } } /* ============================================================ ROOFING SERVICE PAGE ============================================================ */ /* --- Full-bleed hero --- */ .roof-hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 40px 0; } .roof-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #2f3a48; z-index: -2; transform: scale(1.04); animation: roofZoom 16s ease-in-out infinite alternate; } @keyframes roofZoom { from { transform: scale(1.02); } to { transform: scale(1.10); } } .roof-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,47,79,.15) 0%, rgba(14,47,79,.35) 45%, rgba(14,47,79,.78) 100%); z-index: -1; } .roof-hero-inner { display: flex; justify-content: flex-end; } .roof-hero-content { max-width: 520px; color: #ffffff; text-align: left; } .roof-hero-title { font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 800; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; } .roof-hero-title .text-white { color: #ffffff; } .roof-hero-sub { color: rgba(255,255,255,.92); font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.6; margin: 0 0 26px; max-width: 460px; } .btn-quote { padding: 12px 34px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } /* --- Types of Roofing heading --- */ .types-section { background: #ffffff; padding: 60px 0 50px; } .types-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .types-head h2 { color: #0E2F4F; font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 800; letter-spacing: 2px; margin: 0 0 6px; } .types-head p { color: #1a2230; font-size: 1rem; margin: 0; } .types-grid { max-width: 980px; } /* --- Materials / Brands --- */ .materials-section { background: #ffffff; padding: 70px 0 80px; } .materials-head { text-align: center; max-width: 780px; margin: 0 auto 48px; } .materials-head h2 { color: #0E2F4F; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; margin: 0 0 12px; } .materials-head p { color: #1a2230; font-size: .98rem; line-height: 1.65; margin: 0; opacity: .9; } .materials-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 40px; max-width: 1040px; margin: 0 auto; } .materials-logos img { /* one uniform row — flex gives every logo an equal share of the row, object-fit:contain centers each one within its box (no wrap, ever) */ flex: 1 1 0; min-width: 0; width: auto; max-width: 220px; height: 95px; object-fit: contain; opacity: .95; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s; } .materials-logos img:hover { transform: scale(1.06); opacity: 1; } .materials-logos img.logo-fallback { width: 200px; height: 95px; background: #f6f8fb; border: 1px dashed #cfd6e0; border-radius: 8px; position: relative; opacity: 1; } .materials-logos img.logo-fallback::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; color: #5b6473; font-size: 13px; font-weight: 700; letter-spacing: 1px; } /* --- Guarantee section --- */ .guarantee-section { background: #ffffff; padding: 30px 0 70px; } .guarantee-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; max-width: 1080px; margin: 0 auto; } .guarantee-badge { display: flex; justify-content: center; align-items: center; position: relative; min-height: 280px; } .guarantee-badge img { max-width: 300px; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.22)); } .guarantee-badge-svg { display: none; max-width: 300px; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.22)); } .guarantee-copy h2 { color: #0E2F4F; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1.1; margin: 0 0 18px; } .guarantee-copy h2 .text-green { color: #2ea24a; display: inline-block; font-weight: 900; } .guarantee-copy p { color: #1a2230; font-size: 1rem; line-height: 1.7; max-width: 540px; margin: 0; } /* --- Hero left-aligned modifier (used on Windows page) --- */ .roof-hero--left .roof-hero-inner { justify-content: flex-start; } /* Hotspots placed directly inside .roof-hero (roofing/windows hero) need to sit above the overlay AND the hero text container. */ .roof-hero > .sd-hotspot { z-index: 6; } @media (max-width: 768px) { .roof-hero > .sd-hotspot { display: none; } } .roof-hero--left .roof-hero-overlay { background: linear-gradient(270deg, rgba(14,47,79,.15) 0%, rgba(14,47,79,.35) 45%, rgba(14,47,79,.78) 100%); } /* Fit background image to the section width (no cropping, no zoom). */ .roof-hero--left .roof-hero-bg { background-size: 100% 100%; background-repeat: no-repeat; animation: none; transform: none; } /* --- Roofing page responsive --- */ @media (max-width: 900px) { .roof-hero { min-height: 460px; } .roof-hero-inner { justify-content: center; text-align: center; } .roof-hero-content { text-align: center; margin: 0 auto; } .roof-hero-overlay { background: linear-gradient(180deg, rgba(14,47,79,.35) 0%, rgba(14,47,79,.7) 100%); } .guarantee-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; } .guarantee-copy p { margin: 0 auto; } .materials-logos { gap: 26px; } .materials-logos img { height: 76px; } } @media (max-width: 600px) { .roof-hero { min-height: 380px; padding: 30px 0; } .roof-hero-title { font-size: 1.7rem; } .btn-quote { padding: 10px 26px; font-size: 14px; } .types-section { padding: 40px 0 30px; } .materials-section { padding: 50px 0 60px; } .materials-logos { gap: 14px; } .materials-logos img { height: 56px; } } /* ============================================================ WINDOWS SERVICE PAGE ============================================================ */ /* --- Windows / Doors tabs + style grid --- */ .styles-section { background: #ffffff; padding: 20px 0 40px; } .styles-tabs { display: flex; width: fit-content; margin: 10px auto 34px; padding: 6px; background: #f2f4f8; border-radius: 999px; gap: 4px; } .styles-tab { position: relative; z-index: 2; border: none; background: transparent; color: #0E2F4F; font-weight: 800; letter-spacing: 2px; font-size: 13px; padding: 10px 26px; border-radius: 999px; cursor: pointer; transition: color .3s cubic-bezier(.22,.61,.36,1); } .styles-tab.is-active { background: #FFC107; color: #0E2F4F; } .styles-tab:not(.is-active):hover { color: #0a2340; } .styles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 50px; max-width: 840px; margin: 0 auto; } .styles-grid[hidden] { display: none; } .style-thumb { aspect-ratio: 1 / 1; border-radius: 14px; background: #f6f8fb; display: grid; place-items: center; padding: 12px; overflow: hidden; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); } .style-thumb:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(14,47,79,.12); } .style-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* CSS-drawn window/door silhouette when no image file exists */ .style-thumb.style-fallback { position: relative; } .style-thumb.style-fallback img { display: none; } .style-thumb.style-fallback::before, .style-thumb.style-fallback::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .style-thumb.style-fallback::before { width: 58%; height: 66%; border: 4px solid #cfd6e0; border-radius: 4px; background: linear-gradient(#cfd6e0, #cfd6e0) center / 4px 100% no-repeat, linear-gradient(#cfd6e0, #cfd6e0) center / 100% 4px no-repeat, #eef2f7; } .style-thumb.style-fallback--door::before { width: 40%; height: 74%; background: #eef2f7; border-radius: 0; } .style-thumb.style-fallback--door::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b7c0cd; transform: translate(40%, -30%); } /* Color swatches */ .color-swatches { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px auto 0; font-size: 13px; color: #1a2230; } .color-swatches-label { margin-right: 6px; } .swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d8dde6; background: #111; padding: 0; cursor: pointer; transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s cubic-bezier(.22,.61,.36,1); } .swatch--cream { background: #f5e7d4; } .swatch:hover { transform: scale(1.12); } .swatch.is-selected { box-shadow: 0 0 0 3px rgba(14,47,79,.18); } /* --- Advantages section --- */ .advantages-section { background: #ffffff; padding: 60px 0 80px; } .advantages-grid { display: grid; /* equal columns so the drill image is roughly the same width as the copy */ grid-template-columns: 6fr 6fr; gap: 50px; align-items: center; max-width: 1180px; margin: 0 auto; } .advantages-eyebrow { display: block; color: #0E2F4F; font-size: 14px; font-weight: 800; letter-spacing: 3px; margin-bottom: 4px; } .advantages-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.02; margin: 0 0 14px; letter-spacing: -0.01em; } .advantages-intro { color: #0E2F4F; font-size: 1rem; line-height: 1.6; margin: 0 0 28px; max-width: 440px; opacity: .88; } .advantages-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; } .advantages-list li { display: grid; grid-template-columns: 68px 1fr; gap: 20px; align-items: start; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .advantages-list li:hover { transform: translateX(4px); } .adv-icon { font-size: 48px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); } .adv-icon-img { width: 64px; height: 64px; max-width: 64px; max-height: 64px; object-fit: contain; mix-blend-mode: multiply; flex-shrink: 0; } .adv-body h3 { color: #0E2F4F; font-size: 1.1rem; font-weight: 800; margin: 6px 0 5px; line-height: 1.25; } .adv-body p { color: #1a2230; font-size: .92rem; line-height: 1.55; margin: 0; max-width: 520px; } /* Defensive — guarantees the advantages list text is always visible on the white .advantages-section background, regardless of any competing rule (or missing CSS rule) on live. */ .advantages-list li, .advantages-list li * { color: #1a2230 !important; } .advantages-list li h3 { color: #0E2F4F !important; } /* Drill fills the entire left column of the Advantages section. */ .advantages-media { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 480px; } .advantages-media .sd-drill { width: 100%; max-width: none; height: auto; max-height: none; object-fit: contain; mix-blend-mode: multiply; } .advantages-media .sd-drill.sd-drill-fallback { width: 100%; height: 480px; max-height: none; } /* --- Windows responsive --- */ @media (max-width: 900px) { .advantages-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .advantages-intro { margin-left: auto; margin-right: auto; } .advantages-list li { grid-template-columns: 56px 1fr; text-align: left; } .advantages-list { max-width: 560px; margin: 0 auto; } .advantages-media { min-height: auto; } .advantages-media .sd-drill { max-width: 520px; max-height: 520px; } .advantages-media .sd-drill.sd-drill-fallback { height: 380px; } } @media (max-width: 640px) { .styles-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 380px; } .styles-tab { padding: 9px 20px; letter-spacing: 1.5px; } .advantages-section { padding: 40px 0 60px; } .advantages-title { font-size: 2rem; } .advantages-list li { grid-template-columns: 48px 1fr; gap: 14px; } .adv-icon { font-size: 36px; } } /* ============================================================ PORTFOLIO DETAIL PAGE (Kitchen / Bathroom / Roofing / Windows) ============================================================ */ /* --- Hero slider with BEFORE tag + dual nav button --- */ .pf-hero { background: #ffffff; padding: 30px 0 10px; } .pf-slider { position: relative; border-radius: 10px; overflow: hidden; background: #e5e9ef; aspect-ratio: 16 / 9; box-shadow: 0 18px 38px rgba(14,47,79,.16); } .pf-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(.22,.61,.36,1); } .pf-slide.is-active { opacity: 1; } .pf-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-slide-tag { position: absolute; top: 22px; left: 22px; z-index: 3; background: #2f2a2a; color: #ffffff; padding: 10px 26px; border-radius: 6px; font-weight: 800; font-size: 14px; letter-spacing: 3px; box-shadow: 0 6px 14px rgba(0,0,0,.35); } .pf-slider-nav { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); z-index: 4; display: flex; align-items: center; background: #2f2a2a; border-radius: 999px; padding: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.35); } .pf-slider-btn { border: none; background: transparent; color: #ffffff; width: 34px; height: 40px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: background .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1); } .pf-slider-btn svg { width: 20px; height: 20px; } .pf-slider-btn:hover { background: #FFC107; color: #0E2F4F; } .pf-slider-btn.pf-next { background: #FFC107; color: #0E2F4F; } .pf-slider-btn:active { transform: scale(.92); } /* --- Case study head + alternating blocks --- */ .pf-case { background: #ffffff; padding: 40px 0 70px; } .pf-case-inner { max-width: 1120px; margin: 0 auto; } .pf-case-head { padding: 30px 0 30px; max-width: 860px; } .pf-case-eyebrow { display: block; color: #0E2F4F; font-weight: 800; letter-spacing: 2.5px; font-size: 14px; margin-bottom: 4px; } .pf-case-title { color: #0E2F4F; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; margin: 0 0 28px; } .pf-case-overview { color: #0E2F4F; font-size: 1.2rem; font-weight: 800; margin: 0 0 10px; } .pf-case-type { display: flex; align-items: center; gap: 10px; color: #1a2230; font-size: 1rem; margin: 0; } .pf-case-type-icon { font-size: 20px; line-height: 1; } .pf-case-type strong { color: #0E2F4F; font-weight: 800; } /* Two-column alternating blocks */ .pf-block { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 36px 0; } .pf-block--reverse .pf-block-text { order: 2; } .pf-block--reverse .pf-block-img { order: 1; } .pf-block-text h3 { color: #0E2F4F; font-size: 1.3rem; font-weight: 800; letter-spacing: 1px; margin: 0 0 14px; } .pf-block-text p { color: #1a2230; font-size: .98rem; line-height: 1.75; margin: 0; text-align: justify; hyphens: auto; } .pf-block-img img { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 22px rgba(14,47,79,.16); display: block; } /* --- Portfolio detail responsive --- */ @media (max-width: 900px) { .pf-slider { aspect-ratio: 4 / 3; } .pf-slide-tag { top: 14px; left: 14px; padding: 8px 18px; font-size: 12px; letter-spacing: 2px; } .pf-block { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; } .pf-block--reverse .pf-block-text { order: 0; } .pf-block--reverse .pf-block-img { order: 0; } .pf-block-text p { text-align: left; } .pf-block-img img { max-height: none; } } @media (max-width: 520px) { .pf-slider-nav { right: 10px; padding: 3px; } .pf-slider-btn { width: 28px; height: 34px; } .pf-slider-btn svg { width: 16px; height: 16px; } } /* ============================================================ COMING SOON (Resources, Service-Renovation) ============================================================ */ .coming-soon { position: relative; min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 80px 0; background: radial-gradient(circle at 12% 18%, rgba(255,193,7,.10), transparent 45%), radial-gradient(circle at 88% 82%, rgba(14,47,79,.10), transparent 48%), #f6f8fb; } .coming-soon-inner { position: relative; z-index: 2; text-align: center; max-width: 720px; padding: 0 24px; } .coming-soon-eyebrow { display: inline-block; background: #0E2F4F; color: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: 3px; padding: 7px 18px; border-radius: 999px; margin-bottom: 24px; } .coming-soon-title { color: #0E2F4F; font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1; margin: 0 0 22px; } .coming-soon-sub { color: #1a2230; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7; margin: 0 auto 36px; max-width: 560px; } .coming-soon-link { color: #0E2F4F; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .coming-soon-link:hover { color: #e5ad00; } .coming-soon-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn-outline-navy { background: transparent; color: #0E2F4F; border: 2px solid #0E2F4F; } .btn-outline-navy:hover { background: #0E2F4F; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14,47,79,.25); } .coming-soon-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .coming-soon-dot { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: csFloat 10s ease-in-out infinite alternate; } .coming-soon-dot-1 { width: 320px; height: 320px; background: rgba(255,193,7,.35); top: -80px; left: -60px; } .coming-soon-dot-2 { width: 260px; height: 260px; background: rgba(14,47,79,.22); bottom: -60px; right: -40px; animation-delay: -3s; } .coming-soon-dot-3 { width: 200px; height: 200px; background: rgba(138,157,178,.35); top: 40%; right: 20%; animation-delay: -6s; } @keyframes csFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14px,-12px,0) scale(1.08); } } @media (max-width: 600px) { .coming-soon { padding: 60px 0; min-height: calc(100vh - 80px); } .coming-soon-title { font-size: 2.6rem; } .coming-soon-actions .btn { width: 100%; max-width: 280px; } } /* ============================================================ SHARED COMPONENTS — used across the redesign (About + Portfolio) ============================================================ */ /* --- Why Homeowners Choose Us (4-up) --- */ .why-choose { background: #ffffff; padding: 64px 0 70px; } .why-choose-title { text-align: center; color: #0E2F4F; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: .5px; margin: 0 0 38px; } .why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1080px; margin: 0 auto; } .why-choose-card { text-align: center; padding: 12px 14px; } .why-choose-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(255,193,7,.18); color: #0E2F4F; display: grid; place-items: center; transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1); } .why-choose-icon svg { width: 28px; height: 28px; } .why-choose-card:hover .why-choose-icon { background: #FFC107; transform: translateY(-3px); } .why-choose-card h3 { color: #0E2F4F; font-size: 1rem; font-weight: 800; margin: 0 0 8px; } .why-choose-card p { color: #1a2230; font-size: .88rem; line-height: 1.55; margin: 0; } @media (max-width: 800px) { .why-choose-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; } } @media (max-width: 460px) { .why-choose-grid { grid-template-columns: 1fr; max-width: 360px; } } /* --- "Have a Project in Mind?" CTA bar --- */ .project-cta { background: #ffffff; padding: 30px 0 36px; } .project-cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #0E2F4F; color: #ffffff; border-radius: 14px; padding: 26px 36px; max-width: 1080px; margin: 0 auto; box-shadow: 0 12px 28px rgba(14,47,79,.16); flex-wrap: wrap; } .project-cta-text h2 { color: #ffffff; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; margin: 0 0 4px; } .project-cta-text p { color: rgba(255,255,255,.85); font-size: .95rem; margin: 0; } .project-cta-btn { padding: 12px 26px; border-radius: 8px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; } @media (max-width: 700px) { .project-cta-bar { padding: 22px 22px; flex-direction: column; text-align: center; } } /* --- About: Safety + Service Promise timeline --- */ .safety-promise { background: #ffffff; padding: 70px 0 50px; } .safety-promise-head { text-align: center; max-width: 760px; margin: 0 auto 40px; } .safety-promise-head h2 { color: #ffffff; background: #0E2F4F; display: inline-block; padding: 14px 30px; border-radius: 4px; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: 1px; margin: 0 0 14px; } .safety-promise-head p { color: #1a2230; font-size: .98rem; line-height: 1.6; max-width: 620px; margin: 0 auto; } .safety-promise-list { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; position: relative; } .safety-promise-list::before { content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: #FFC107; z-index: 0; } .safety-promise-list li { position: relative; padding: 10px 0 18px 50px; } .safety-promise-list li::before { content: ""; position: absolute; left: 8px; top: 14px; width: 14px; height: 14px; background: #FFC107; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #FFC107; border-radius: 50%; z-index: 1; } .safety-promise-list h3 { color: #0E2F4F; font-size: 1rem; font-weight: 800; margin: 0 0 4px; } .safety-promise-list p { color: #1a2230; font-size: .9rem; line-height: 1.55; margin: 0; } /* --- About: Trust badges row --- */ .trust-badges { background: #ffffff; padding: 30px 0 50px; } .trust-badges-line { text-align: center; color: #1a2230; font-size: .92rem; margin: 0 0 22px; letter-spacing: .3px; } .trust-badges-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 36px; max-width: 980px; margin: 0 auto; } .trust-badge { display: flex; align-items: center; gap: 12px; background: #f6f8fb; padding: 12px 20px; border-radius: 12px; border: 1px solid #e4e8ef; min-height: 64px; } .trust-badge img { height: 36px; width: auto; object-fit: contain; } .trust-badge .stars { color: #FFC107; letter-spacing: 2px; font-size: 14px; } .trust-badge strong { display: block; color: #0E2F4F; font-weight: 800; font-size: .92rem; letter-spacing: .3px; } .trust-badge span { color: #5b6473; font-size: .8rem; letter-spacing: 1px; } /* --- Portfolio overview: stats strip --- */ .pf-stats-row { background: #ffffff; padding: 26px 0 30px; } .pf-stats-row-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; text-align: center; } .pf-stat-cell { padding: 10px 8px; border-right: 1px solid #e4e8ef; } .pf-stat-cell:last-child { border-right: none; } .pf-stat-cell .pf-stat-icon { width: 32px; height: 32px; margin: 0 auto 6px; color: #FFC107; } .pf-stat-cell .pf-stat-num { color: #0E2F4F; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 900; margin-bottom: 2px; line-height: 1; } .pf-stat-cell .pf-stat-label { color: #1a2230; font-size: .82rem; letter-spacing: .5px; } @media (max-width: 700px) { .pf-stats-row-inner { grid-template-columns: repeat(2, 1fr); gap: 22px; } .pf-stat-cell { border-right: none; } .pf-stat-cell:nth-child(odd) { border-right: 1px solid #e4e8ef; } } /* --- Portfolio overview: project cards --- */ .pf-projects { background: #ffffff; padding: 50px 0 70px; } .pf-projects-head { text-align: center; max-width: 720px; margin: 0 auto 36px; } .pf-projects-head h2 { color: #0E2F4F; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 10px; } .pf-projects-head h2 .text-yellow { font-weight: 900; } .pf-projects-head p { color: #1a2230; font-size: .98rem; margin: 0; } .pf-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1140px; margin: 0 auto; } .pf-project-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 22px rgba(14,47,79,.10); transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; } .pf-project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(14,47,79,.18); } .pf-project-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #d9dde3; } .pf-project-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .pf-project-card:hover .pf-project-card-img img { transform: scale(1.05); } .pf-project-card-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; } .pf-project-card-body h3 { color: #0E2F4F; font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; } .pf-project-card-body p { color: #1a2230; font-size: .9rem; line-height: 1.5; margin: 0 0 14px; flex: 1; } .pf-project-link { display: inline-flex; align-items: center; gap: 6px; color: #0E2F4F; font-weight: 800; font-size: .85rem; letter-spacing: .5px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; } .pf-project-link:hover { color: #e5ad00; } @media (max-width: 900px) { .pf-projects-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 600px) { .pf-projects-grid { grid-template-columns: 1fr; max-width: 380px; } } /* --- Portfolio overview hero --- */ .pf-overview-hero { background: #0E2F4F; color: #ffffff; padding: 50px 0 30px; text-align: center; } .pf-overview-hero h1 { color: #ffffff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; margin: 0 0 12px; } .pf-overview-hero h1 .text-yellow { color: #FFC107; font-weight: 900; } .pf-overview-hero p { color: rgba(255,255,255,.88); max-width: 580px; margin: 0 auto; font-size: .98rem; line-height: 1.55; } /* --- Portfolio detail (new layout) --- */ .pf-detail-hero { background: #0E2F4F; color: #ffffff; padding: 32px 0 26px; } .pf-detail-hero-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .pf-detail-hero h1 { color: #ffffff; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; margin: 0 0 8px; } .pf-detail-hero h1 .text-yellow { color: #FFC107; font-weight: 900; } .pf-detail-hero-sub { color: rgba(255,255,255,.88); font-size: .96rem; line-height: 1.55; max-width: 640px; margin: 0; } .pf-back-link { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,.4); padding: 8px 18px; border-radius: 999px; font-size: .85rem; font-weight: 700; letter-spacing: .3px; transition: background .25s cubic-bezier(.22,.61,.36,1), border-color .25s cubic-bezier(.22,.61,.36,1); } .pf-back-link:hover { background: rgba(255,255,255,.12); border-color: #ffffff; } /* --- BEFORE / AFTER toggle --- */ .ba-toggle { background: #ffffff; padding: 30px 0 18px; } .ba-toggle-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1100px; margin: 0 auto; position: relative; } .ba-toggle-cell { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 26px rgba(14,47,79,.16); aspect-ratio: 4 / 3; } .ba-toggle-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .ba-toggle-cell:hover img { transform: scale(1.03); } .ba-toggle-tag { position: absolute; top: 14px; left: 14px; background: #2f2a2a; color: #ffffff; padding: 6px 16px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: 2px; } .ba-toggle-tag--after { background: #0E2F4F; } .ba-toggle-divider { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; width: 44px; height: 44px; background: #FFC107; color: #0E2F4F; display: grid; place-items: center; border-radius: 50%; font-weight: 900; border: 4px solid #ffffff; box-shadow: 0 6px 14px rgba(14,47,79,.25); } @media (max-width: 700px) { .ba-toggle-pair { grid-template-columns: 1fr; gap: 12px; } .ba-toggle-divider { display: none; } } /* ---- Before / After comparison drag slider ---- */ .ba-slider { --ba-pos: 50%; position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(14,47,79,.18); background: #d9dde3; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .ba-slider-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .ba-slider-after { z-index: 1; } .ba-slider-before { z-index: 2; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); } .ba-slider-tag { position: absolute; top: 16px; z-index: 4; padding: 6px 16px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #ffffff; pointer-events: none; } .ba-slider-tag--before { left: 16px; background: #2f2a2a; } .ba-slider-tag--after { right: 16px; background: #0E2F4F; } .ba-slider-line { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 3px; margin-left: -1.5px; background: #ffffff; z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px rgba(14,47,79,.25); } .ba-slider-handle { position: absolute; top: 50%; left: var(--ba-pos); transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #FFC107; border: 3px solid #ffffff; box-shadow: 0 6px 14px rgba(14,47,79,.3); display: grid; place-items: center; color: #0E2F4F; z-index: 5; cursor: grab; outline: none; transition: transform .15s ease; } .ba-slider-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.06); } .ba-slider-handle:focus-visible { box-shadow: 0 0 0 3px rgba(14,47,79,.35), 0 6px 14px rgba(14,47,79,.3); } .ba-slider-handle::before, .ba-slider-handle::after { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .ba-slider-handle::before { border-right: 8px solid currentColor; margin-right: 3px; } .ba-slider-handle::after { border-left: 8px solid currentColor; margin-left: 3px; } @media (max-width: 700px) { .ba-slider { aspect-ratio: 4 / 3; } .ba-slider-handle { width: 40px; height: 40px; } .ba-slider-tag { font-size: 11px; padding: 5px 12px; top: 12px; } .ba-slider-tag--before { left: 12px; } .ba-slider-tag--after { right: 12px; } } /* --- Project Details bar --- */ .project-details { background: #ffffff; padding: 16px 0 0; } .project-details-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; background: #f6f8fb; border-radius: 12px; padding: 20px 24px; border: 1px solid #e4e8ef; } .project-details-cell { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 0 6px; border-right: 1px solid #e4e8ef; } .project-details-cell:last-child { border-right: none; } .project-details-cell strong { color: #0E2F4F; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; } .project-details-cell span { color: #1a2230; font-size: .92rem; font-weight: 600; } @media (max-width: 700px) { .project-details-bar { grid-template-columns: repeat(2, 1fr); gap: 18px; } .project-details-cell { border-right: none; border-bottom: 1px solid #e4e8ef; padding-bottom: 14px; } .project-details-cell:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; } } /* --- Numbered Challenge / Progress / Result cards --- */ .pf-stages { background: #ffffff; padding: 50px 0 30px; } .pf-stages-head { text-align: center; max-width: 720px; margin: 0 auto 36px; } .pf-stages-head h2 { color: #0E2F4F; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; margin: 0; } .pf-stages-head h2 .text-yellow { color: #e5ad00; font-weight: 900; } .pf-stages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto 30px; } .pf-stage-card { background: #ffffff; padding: 20px 22px 22px; border-radius: 12px; border: 1px solid #e4e8ef; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); } .pf-stage-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(14,47,79,.14); } .pf-stage-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FFC107; color: #0E2F4F; font-weight: 900; font-size: .95rem; margin-bottom: 12px; } .pf-stage-card h3 { color: #0E2F4F; font-size: 1.05rem; font-weight: 800; letter-spacing: .5px; margin: 0 0 10px; } .pf-stage-card p { color: #1a2230; font-size: .92rem; line-height: 1.6; margin: 0; } .pf-stage-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; } .pf-stage-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 20px rgba(14,47,79,.12); } @media (max-width: 800px) { .pf-stages-grid, .pf-stage-images { grid-template-columns: 1fr; gap: 14px; } } /* --- Testimonial card --- */ .pf-testimonial { background: #ffffff; padding: 40px 0 60px; } .pf-testimonial-card { display: grid; grid-template-columns: 80px 1fr; gap: 22px; align-items: center; max-width: 920px; margin: 0 auto; background: #f6f8fb; border-radius: 14px; padding: 26px 30px; border: 1px solid #e4e8ef; position: relative; } .pf-testimonial-avatar { width: 80px; height: 80px; border-radius: 50%; background: #0E2F4F; display: grid; place-items: center; color: #ffffff; } .pf-testimonial-avatar svg { width: 44px; height: 44px; } .pf-testimonial-body .stars { color: #FFC107; letter-spacing: 3px; font-size: 18px; margin-bottom: 8px; } .pf-testimonial-quote { font-size: 1rem; color: #1a2230; line-height: 1.6; font-style: italic; margin: 0 0 10px; position: relative; padding-left: 36px; } .pf-testimonial-quote::before { content: "\201C"; position: absolute; top: -14px; left: 0; font-size: 44px; line-height: 1; color: #FFC107; font-family: Georgia, serif; opacity: .85; } .pf-testimonial-author { color: #0E2F4F; font-weight: 800; font-size: .92rem; } .pf-testimonial-author span { color: #5b6473; font-weight: 500; display: block; font-size: .82rem; } @media (max-width: 600px) { .pf-testimonial-card { grid-template-columns: 1fr; gap: 16px; text-align: center; padding: 24px 20px; } .pf-testimonial-avatar { margin: 0 auto; } .pf-testimonial-quote { padding-left: 0; } .pf-testimonial-quote::before { display: none; } } /* --- Service Area / FIND US --- */ .service-area-block { background: #ffffff; padding: 60px 0 40px; text-align: center; } .service-area-block h1 { color: #0E2F4F; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: 1px; margin: 0 0 24px; } .service-area-map { position: relative; max-width: 480px; margin: 0 auto 18px; } .service-area-map img { width: 100%; height: auto; display: block; } .area-pin { position: absolute; width: 28px; height: 37px; /* top/left set inline anchor the pin's tip at the location */ transform: translate(-50%, -100%); transform-origin: bottom center; transition: transform .2s cubic-bezier(.22,.61,.36,1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.28)); cursor: pointer; } .area-pin svg { width: 100%; height: 100%; display: block; } .area-pin:hover { transform: translate(-50%, -100%) scale(1.16); } @media (max-width: 480px) { .area-pin { width: 23px; height: 30px; } } .service-area-sub { color: #0E2F4F; font-weight: 700; margin: 0 0 18px; font-size: 1.05rem; } .service-area-logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; max-width: 760px; margin: 0 auto; } .service-area-logos-row img { height: 96px; width: auto; max-width: 220px; object-fit: contain; } .find-us { background: #0E2F4F; color: #ffffff; padding: 60px 0; } .find-us-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: start; max-width: 1080px; margin: 0 auto; } .find-us-left { text-align: center; } .find-us-banner { display: inline-block; color: #FFC107; font-weight: 800; letter-spacing: 2px; margin-bottom: 26px; text-decoration: underline; text-decoration-color: #FFC107; text-underline-offset: 6px; text-decoration-thickness: 2px; } .find-us-office { margin-bottom: 22px; } .find-us-office strong { display: block; color: #FFC107; font-size: 1rem; letter-spacing: .5px; margin-bottom: 4px; } .find-us-addr { color: rgba(255,255,255,.85); font-size: .9rem; margin-bottom: 6px; display: block; } .find-us-phone { display: flex; align-items: center; gap: 8px; color: #ffffff; font-weight: 800; font-size: .95rem; margin-bottom: 8px; width: fit-content; } .find-us-phone svg { width: 16px; height: 16px; fill: #FFC107; } .find-us-directions { display: inline-block; background: #FFC107; color: #0E2F4F; font-weight: 800; font-size: .85rem; padding: 6px 14px; border-radius: 4px; letter-spacing: .3px; transition: transform .25s cubic-bezier(.22,.61,.36,1); } .find-us-directions:hover { transform: translateY(-2px); } .find-us-hours strong { color: #FFC107; display: block; margin-bottom: 6px; } .find-us-hours span { color: rgba(255,255,255,.85); font-size: .9rem; display: block; } .find-us-socials { margin-top: 22px; } .find-us-socials .socials a { background: rgba(255,255,255,.12); } @media (max-width: 800px) { .find-us-grid { grid-template-columns: 1fr; gap: 30px; } } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }