/* ========================================================================== FLOREX ENTERPRISES — Premium Epoxy Flooring Website Table of Contents: 1. Variables & Reset 2. Base / Typography 3. Layout Helpers 4. Buttons 5. Header / Nav 6. Hero 7. Trust Bar 8. About 9. Services 10. Why Choose Us 11. Process Timeline 12. Floating Action Buttons 13. Industries 14. Stats 15. Testimonials 16. FAQ Accordion 17. CTA Banner 18. Contact 19. Footer 20. Floating Buttons / Back to Top 21. Animations 22. Responsive ========================================================================== */ /* ---------- 1. Variables & Reset ---------- */ :root{ --navy:#071B45; --navy-light:#122a63; --red:#D71920; --red-dark:#b3141a; --bg:#FFFFFF; --bg-light:#F8F9FC; --text:#222222; --text-muted:#5b6478; --border:#EAEAEA; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --shadow-sm:0 4px 16px rgba(7,27,69,0.06); --shadow-md:0 12px 32px rgba(7,27,69,0.10); --shadow-lg:0 24px 60px rgba(7,27,69,0.16); --font-head:'Plus Jakarta Sans', 'Manrope', sans-serif; --font-body:'Manrope', 'Plus Jakarta Sans', sans-serif; --container:1240px; --transition:0.35s cubic-bezier(.4,0,.2,1); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } /* NO overflow-x here. Setting overflow-x:hidden on (or ) turns the root into a scroll container, and that is what makes position:fixed elements — the header and the floating buttons — stop tracking the viewport while the page is scrolled, rendering offset above the top edge so the logo appears sliced. The horizontal overflow it was masking has been fixed at source instead (.about__badge and .form-hp below). */ html{ scroll-behavior:smooth; scroll-padding-top:70px; } body{ overflow-wrap:break-word; font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; } input,textarea{ font-family:inherit; } h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); color:var(--navy); line-height:1.2; font-weight:700; } /* ---------- 2. Base / Typography ---------- */ .section-eyebrow{ display:inline-block; color:var(--red); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; font-size:0.8rem; margin-bottom:14px; } .section-title{ font-size:clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom:16px; letter-spacing:-0.01em; } .section-desc{ color:var(--text-muted); font-size:1.05rem; max-width:640px; } .section-head{ max-width:760px; margin-bottom:56px; } .section-head--light .section-title, .section-head--light .section-desc{ color:#fff; } .section-head--light .section-desc{ color:rgba(255,255,255,0.72); } /* ---------- 3. Layout Helpers ---------- */ .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; } section{ padding:100px 0; } /* ---------- 4. Buttons ---------- */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border-radius:100px; font-weight:700; font-size:0.95rem; transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); white-space:nowrap; } .btn--primary{ background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(215,25,32,0.28); } .btn--primary:hover{ background:var(--red-dark); transform:translateY(-3px); box-shadow:0 16px 32px rgba(215,25,32,0.36); } .btn--outline{ border:1.5px solid rgba(255,255,255,0.5); color:#fff; background:rgba(255,255,255,0.06); backdrop-filter:blur(6px); } .btn--outline:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); } .btn--outline-light{ border:1.5px solid rgba(255,255,255,0.6); color:#fff; } .btn--outline-light:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); } .btn--lg{ padding:17px 38px; font-size:1rem; } .btn--sm{ padding:11px 22px; font-size:0.85rem; } /* Ripple effect */ .ripple{ position:relative; overflow:hidden; } .ripple-circle{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); transform:scale(0); animation:rippleAnim 0.6s ease-out; pointer-events:none; } @keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } } /* ---------- 5. Header / Nav ---------- */ .header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:#FFFFFF; border-bottom:1px solid var(--border); transition:box-shadow var(--transition); } /* NOTE: the header deliberately has NO overflow:hidden and NO height transition. Animating the height of a position:fixed element while clipping its children makes mobile browsers re-rasterise the clip rect mid-transition, which slices the logo off at the top while the user scrolls. A fixed min-height means the bar can never be shorter than its own contents, so nothing ever needs clipping. */ .header.scrolled{ box-shadow:var(--shadow-sm); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; /* Height is DERIVED from padding + logo height (14 + 56 + 14 = 84px) rather than being set independently. That way the bar can never be shorter than the logo it contains, and the space above and below the logo is always exactly equal — no reliance on flex centering inside a box whose height was declared separately. */ padding-top:14px; padding-bottom:14px; } .logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; line-height:0; } .logo__img{ display:block; height:56px; width:auto; max-width:none; object-fit:contain; } .logo__img--footer{ height:52px; background:#fff; padding:12px 18px; border-radius:var(--radius-sm); } @media (max-width:768px){ /* Sized by WIDTH, not height, on mobile. Bumping height alone barely changes anything the eye registers, since the logo's own aspect ratio is very wide (~4.25:1). Width is scaled directly off the viewport (85vw, capped at 320px) so the wordmark fills most of the row and is unmistakably legible. It can never overflow: img already has a global max-width:100% rule, so on the narrowest phones the browser itself caps the box at the footer column's real width instead of spilling past it. height:auto preserves the logo's aspect ratio exactly. */ .logo__img--footer{ height:auto; width:min(85vw, 320px); padding:16px 22px; } } .nav__list{ display:flex; gap:34px; } .nav__link{ position:relative; font-weight:600; font-size:0.94rem; color:var(--text); padding:8px 0; transition:color var(--transition); } .nav__link::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red); transition:width var(--transition); } .nav__link:hover,.nav__link.active{ color:var(--red); } .nav__link:hover::after,.nav__link.active::after{ width:100%; } .header__actions{ display:flex; align-items:center; gap:18px; } .header__call{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:0.92rem; color:var(--navy); } .header__call svg{ color:var(--red); } .header__call:hover{ color:var(--red); } .nav__toggle{ display:none; flex-direction:column; gap:5px; width:32px; padding:6px; } .nav__toggle span{ height:2px; width:100%; background:var(--navy); border-radius:2px; transition:transform var(--transition), opacity var(--transition); } .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); } /* ---------- 6. Hero ---------- */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; color:#fff; overflow:hidden; } .hero__bg{ position:absolute; inset:0; z-index:0; } .hero__bg img{ width:100%; height:100%; object-fit:cover; } .hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(7,27,69,0.94) 8%, rgba(7,27,69,0.8) 45%, rgba(7,27,69,0.62) 75%, rgba(7,27,69,0.4) 100%); } /* Diagonal divider blending the hero into the trust bar below */ .hero__edge{ position:absolute; z-index:2; left:0; right:0; bottom:-1px; height:64px; background:var(--bg-light); clip-path:polygon(0 100%, 100% 100%, 100% 40%, 0 100%); } .hero__content{ position:relative; z-index:3; padding-top:126px; padding-bottom:64px; } .eyebrow{ display:inline-block; padding:8px 18px; border:1px solid rgba(255,255,255,0.3); border-radius:100px; font-size:0.8rem; font-weight:600; letter-spacing:0.05em; background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); margin-bottom:24px; } .hero__title{ font-size:clamp(2.2rem, 5vw, 4rem); max-width:920px; color:#fff; margin-bottom:20px; letter-spacing:-0.02em; } .hero__subtitle{ font-size:clamp(1.05rem, 1.6vw, 1.35rem); color:rgba(255,255,255,0.85); font-weight:500; max-width:600px; margin-bottom:34px; } .hero__actions{ display:flex; gap:18px; flex-wrap:wrap; } .scroll-cue{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3; width:26px; height:42px; border:2px solid rgba(255,255,255,0.5); border-radius:20px; } .scroll-cue span{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:4px; height:8px; border-radius:3px; background:#fff; animation:scrollCue 1.8s ease infinite; } @keyframes scrollCue{ 0%{ opacity:1; top:8px; } 70%{ opacity:0; top:22px; } 100%{ opacity:0; top:8px; } } /* ---------- 7. Trust Bar ---------- */ .trustbar{ background:var(--bg-light); padding:34px 0; border-bottom:1px solid var(--border); } .trustbar__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; } .trust-item{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:0.92rem; color:var(--navy); } .trust-item svg{ width:22px; height:22px; color:var(--red); flex-shrink:0; } /* ---------- 8. About ---------- */ .about__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; } .about__media{ position:relative; } .about__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); aspect-ratio:4/5; object-fit:cover; } .about__badge{ position:absolute; bottom:-24px; right:-24px; background:var(--navy); color:#fff; padding:22px 26px; border-radius:var(--radius-md); box-shadow:var(--shadow-md); text-align:center; } .about__badge strong{ display:block; font-family:var(--font-head); font-size:1.8rem; color:var(--red); font-weight:800; } .about__badge span{ font-size:0.78rem; color:rgba(255,255,255,0.8); } .about__text{ color:var(--text-muted); margin-bottom:18px; font-size:1.02rem; } .about__list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 20px; margin:30px 0 34px; } .about__list li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:0.94rem; color:var(--navy); } .about__list li::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; } /* ---------- 9. Services ---------- */ .services{ background:var(--bg-light); } .services__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; } .service-card{ position:relative; background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition); border:1px solid var(--border); } .service-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 0.45s ease; } .service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; } .service-card:hover::before{ transform:scaleX(1); } .service-card__body{ padding:36px 30px; } .service-card__icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:var(--bg-light); border-radius:14px; color:var(--red); margin-bottom:22px; transition:background var(--transition), color var(--transition); } .service-card__icon svg{ width:26px; height:26px; } .service-card:hover .service-card__icon{ background:var(--navy); color:#fff; } .service-card__body h3{ font-size:1.15rem; margin-bottom:10px; } .service-card__body p{ color:var(--text-muted); font-size:0.94rem; margin-bottom:0; } /* ---------- 9a. Epoxy Flooring Guide ---------- */ .guide__block{ max-width:900px; margin-bottom:44px; } .guide__block h3{ font-size:1.4rem; margin-bottom:14px; } .guide__block p{ color:var(--text-muted); font-size:1rem; } .guide__block:last-of-type{ margin-bottom:0; } .guide__grid2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:44px; } .guide__grid2 .guide__block{ margin-bottom:0; max-width:none; } .guide__compare{ margin-bottom:44px; } .guide__compare h3{ font-size:1.4rem; margin-bottom:20px; } .compare__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .compare__col{ border-radius:var(--radius-md); padding:28px; border:1px solid var(--border); } .compare__col h4{ font-size:1.05rem; margin-bottom:16px; } .compare__col ul li{ position:relative; padding-left:26px; margin-bottom:12px; font-size:0.92rem; color:var(--text-muted); } .compare__col--epoxy{ background:var(--bg-light); border-color:var(--red); } .compare__col--epoxy h4{ color:var(--red); } .compare__col--epoxy ul li::before{ content:'✔'; position:absolute; left:0; top:0; color:var(--red); font-weight:700; } .compare__col--tiles ul li::before{ content:'–'; position:absolute; left:0; top:0; color:var(--text-muted); font-weight:700; } .type-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } .type-chip{ display:flex; gap:14px; align-items:flex-start; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; transition:transform var(--transition), box-shadow var(--transition); } .type-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); } .type-chip span{ width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; color:var(--red); box-shadow:var(--shadow-sm); } .type-chip span svg{ width:20px; height:20px; } .type-chip p{ font-weight:700; color:var(--navy); font-size:0.92rem; } .type-chip p em{ display:block; font-style:normal; font-weight:500; color:var(--text-muted); font-size:0.82rem; margin-top:4px; } .benefit-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 30px; } .benefit-item{ display:flex; align-items:center; gap:12px; font-size:0.95rem; font-weight:600; color:var(--navy); } .benefit-item span{ width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; } .benefit-item span svg{ width:14px; height:14px; } .proscons{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .proscons__col{ border-radius:var(--radius-md); padding:28px; border:1px solid var(--border); } .proscons__col h4{ font-size:1.05rem; margin-bottom:16px; } .proscons__col ul li{ position:relative; padding-left:26px; margin-bottom:12px; font-size:0.92rem; color:var(--text-muted); } .proscons__col--pros{ border-color:#1f9d55; } .proscons__col--pros h4{ color:#1f9d55; } .proscons__col--pros ul li::before{ content:'+'; position:absolute; left:0; top:0; color:#1f9d55; font-weight:800; } .proscons__col--cons{ border-color:var(--red); } .proscons__col--cons h4{ color:var(--red); } .proscons__col--cons ul li::before{ content:'!'; position:absolute; left:0; top:0; color:var(--red); font-weight:800; } .guide__closing{ text-align:center; max-width:760px; margin:0 auto; padding-top:20px; border-top:1px solid var(--border); } .guide__closing h3{ font-size:1.4rem; margin-bottom:14px; } .guide__closing p{ color:var(--text-muted); margin-bottom:26px; } /* ---------- 10. Why Choose Us ---------- */ .why-us__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; } .why-us__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); aspect-ratio:3/4; object-fit:cover; } .feature-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; margin-top:32px; } .feature{ display:flex; gap:14px; align-items:flex-start; } .feature__icon{ width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg-light); border-radius:12px; color:var(--red); } .feature__icon svg{ width:22px; height:22px; } .feature h4{ font-size:1rem; margin-bottom:4px; } .feature p{ font-size:0.88rem; color:var(--text-muted); } /* ---------- 11. Process Timeline ---------- */ .process{ background:var(--navy); color:#fff; } .timeline{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; counter-reset:step; } .timeline__item{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-md); padding:30px 20px; text-align:center; position:relative; transition:transform var(--transition), background var(--transition); } .timeline__item:hover{ transform:translateY(-6px); background:rgba(255,255,255,0.09); } .timeline__num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--red); color:#fff; font-weight:800; font-family:var(--font-head); margin-bottom:16px; } .timeline__item h3{ color:#fff; font-size:1rem; margin-bottom:8px; } .timeline__item p{ font-size:0.82rem; color:rgba(255,255,255,0.65); } /* ---------- 13. Industries ---------- */ .industries{ background:var(--bg-light); } .industries__grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; } .industry-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 14px; text-align:center; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .industry-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--red); } .industry-card span{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; background:var(--bg-light); border-radius:50%; color:var(--red); transition:background var(--transition), color var(--transition); } .industry-card span svg{ width:22px; height:22px; } .industry-card:hover span{ background:var(--red); color:#fff; } .industry-card p{ font-weight:700; font-size:0.86rem; color:var(--navy); } /* ---------- 13b. Our Work ---------- */ .work__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .work-card{ position:relative; overflow:hidden; border-radius:var(--radius-md); aspect-ratio:1/1; box-shadow:var(--shadow-sm); } .work-card img{ width:100%; height:100%; object-fit:cover; transition:transform var(--transition); } .work-card:hover img{ transform:scale(1.06); } .work-card figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(to top, rgba(7,27,69,0.88), rgba(7,27,69,0)); color:#fff; font-size:0.82rem; font-weight:600; line-height:1.35; } /* ---------- 14. Stats ---------- */ .stats{ background:linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%); color:#fff; } .stats__grid{ display:grid; grid-template-columns:repeat(5, 1fr); text-align:center; gap:20px; } .stat__num{ font-family:var(--font-head); font-size:clamp(2rem, 3.4vw, 2.8rem); font-weight:800; color:#fff; } .stat__suffix{ font-family:var(--font-head); font-size:1.6rem; font-weight:800; color:var(--red); } .stat p{ margin-top:8px; color:rgba(255,255,255,0.7); font-size:0.9rem; font-weight:600; } /* ---------- 15. Testimonials ---------- */ .testi-slider{ position:relative; overflow:hidden; } .testi-track{ display:flex; transition:transform 0.5s cubic-bezier(.4,0,.2,1); } .testi-card{ min-width:100%; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px; text-align:center; } .testi-stars{ color:var(--red); font-size:1.1rem; letter-spacing:3px; margin-bottom:18px; } .testi-card blockquote{ font-size:1.2rem; color:var(--navy); font-weight:500; max-width:700px; margin:0 auto 26px; line-height:1.6; } .testi-card figcaption{ display:flex; align-items:center; justify-content:center; gap:14px; } .testi-card figcaption img{ width:52px; height:52px; border-radius:50%; object-fit:cover; } .testi-card figcaption div{ text-align:left; } .testi-card figcaption strong{ display:block; color:var(--navy); font-size:0.95rem; } .testi-card figcaption span{ font-size:0.82rem; color:var(--text-muted); } .testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:30px; } .testi-dots button{ width:10px; height:10px; border-radius:50%; background:var(--border); transition:background var(--transition), transform var(--transition); } .testi-dots button.active{ background:var(--red); transform:scale(1.2); } /* ---------- 16. FAQ Accordion ---------- */ .faq__inner{ max-width:860px; } .accordion__item{ border-bottom:1px solid var(--border); } .accordion__header{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 4px; text-align:left; font-weight:700; font-size:1rem; color:var(--navy); } .accordion__icon{ flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--bg-light); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--red); transition:transform var(--transition), background var(--transition); } .accordion__header[aria-expanded="true"] .accordion__icon{ transform:rotate(45deg); background:var(--red); color:#fff; } .accordion__panel{ max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding var(--transition); } .accordion__panel p{ color:var(--text-muted); padding:0 4px 24px; } /* ---------- 17. CTA Banner ---------- */ .cta-banner{ background:linear-gradient(120deg, var(--red) 0%, var(--red-dark) 100%); padding:90px 0; text-align:center; } .cta-banner__inner h2{ color:#fff; font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:10px; } .cta-banner__inner p{ color:rgba(255,255,255,0.9); font-size:1.1rem; margin-bottom:34px; } .cta-banner__actions{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; } .cta-banner .btn--primary{ background:var(--navy); box-shadow:0 10px 24px rgba(7,27,69,0.35); } .cta-banner .btn--primary:hover{ background:#0a2358; } /* ---------- 18. Contact ---------- */ .contact__grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:50px; } .contact__form{ background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-lg); padding:42px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .form-group{ margin-bottom:20px; } .form-group label{ display:block; font-weight:700; font-size:0.85rem; color:var(--navy); margin-bottom:8px; } .form-group input, .form-group textarea{ width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:0.95rem; background:#fff; transition:border-color var(--transition), box-shadow var(--transition); resize:vertical; } .form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(215,25,32,0.1); } .form-note{ margin-top:16px; font-weight:600; font-size:0.9rem; color:var(--navy); min-height:1.2em; } .form-hp{ /* Hidden via clip-path rather than left:-9999px — a huge negative offset widens the document and reintroduces horizontal overflow. */ position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; opacity:0; pointer-events:none; white-space:nowrap; } .contact__info{ display:flex; flex-direction:column; gap:24px; } .info-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; } .info-card h3{ margin-bottom:14px; } .info-card h4{ margin-bottom:10px; font-size:1rem; } .info-card p{ color:var(--text-muted); font-size:0.92rem; margin-bottom:16px; } .info-card ul li{ padding:6px 0; font-size:0.92rem; color:var(--text-muted); } .info-card ul li strong{ color:var(--navy); } .info-card ul li a{ color:var(--navy); font-weight:600; } .info-card ul li a:hover{ color:var(--red); } .map-embed{ border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/9; border:1px solid var(--border); } .map-embed iframe{ width:100%; height:100%; border:0; } /* ---------- 19. Footer ---------- */ .footer{ background:var(--navy); color:rgba(255,255,255,0.75); } .footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-top:80px; padding-bottom:50px; } .logo--footer .logo__text{ color:#fff; } .footer__col p{ font-size:0.9rem; margin:16px 0 20px; line-height:1.7; } .footer__col h4{ color:#fff; margin-bottom:20px; font-size:1rem; } .footer__col ul li{ margin-bottom:12px; font-size:0.9rem; } .footer__col ul li a:hover{ color:var(--red); } .footer__contact li{ line-height:1.6; } .footer__social{ display:flex; gap:10px; } .footer__social a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.08); color:#fff; transition:background var(--transition), transform var(--transition); } .footer__social a svg{ display:block; } .footer__social a:hover{ background:var(--red); transform:translateY(-3px); } .footer__bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:22px 0; } .footer__bottom-inner{ text-align:center; font-size:0.85rem; } /* ---------- 20. Floating Buttons / Back to Top ---------- */ .float-btn{ position:fixed; z-index:900; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:var(--shadow-md); transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition), visibility var(--transition); } /* The floating buttons stay out of the way until the user has scrolled past the hero, so they can never sit on top of the hero's own "Get Free Quote" / "Call Now" buttons. Gated on .js so that if JavaScript ever fails they simply remain visible instead of disappearing for good. */ .js .float-btn{ opacity:0; visibility:hidden; pointer-events:none; } .js .float-btn.show{ opacity:1; visibility:visible; pointer-events:auto; } .float-btn--whatsapp{ bottom:24px; left:24px; width:58px; height:58px; background:#25D366; color:#fff; } .float-btn--call{ bottom:96px; left:24px; width:52px; height:52px; background:var(--navy); color:#fff; } .float-btn:hover{ transform:scale(1.08); } .back-to-top{ position:fixed; bottom:96px; right:24px; width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition); z-index:900; } .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{ background:var(--red); } .scroll-progress{ position:fixed; top:0; left:0; height:3px; background:var(--red); width:0%; z-index:1100; transition:width 0.1s ease-out; } /* ---------- 21. Animations ---------- */ /* Content is visible by default. It only gets hidden (and then revealed on scroll) once JavaScript confirms it is running by adding the .js class to . This guarantees text and images are never stuck invisible if a script fails to run. */ .fade-up, .fade-left, .fade-right{ opacity:1; transform:none; transition:opacity 0.7s ease, transform 0.7s ease; transition-delay:var(--d, 0s); } .js .fade-up:not(.in-view){ opacity:0; transform:translateY(36px); } .js .fade-left:not(.in-view){ opacity:0; transform:translateX(-40px); } .js .fade-right:not(.in-view){ opacity:0; transform:translateX(40px); } .fade-up.in-view, .fade-left.in-view, .fade-right.in-view{ opacity:1; transform:translate(0,0); } /* ---------- 22. Responsive ---------- */ @media (max-width:1100px){ .services__grid{ grid-template-columns:repeat(2, 1fr); } .industries__grid{ grid-template-columns:repeat(4, 1fr); } .work__grid{ grid-template-columns:repeat(3, 1fr); gap:18px; } .timeline{ grid-template-columns:repeat(3, 1fr); } .stats__grid{ grid-template-columns:repeat(3, 1fr); } .footer__grid{ grid-template-columns:1fr 1fr; } .type-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:960px){ /* 12 + 34 + 12 = 58px tall, logo guaranteed 12px clear of both edges */ /* Sticky header REMOVED on mobile — reverted per request. Header sits in normal document flow and scrolls away with the page. */ .header{ position:static; } .header__inner{ padding-top:12px; padding-bottom:12px; } .hero__content{ padding-top:36px; } html{ scroll-padding-top:12px; } .logo{ line-height:0; } /* Scoped to the HEADER logo specifically. This used to be a bare .logo__img{height:34px} rule, which — because it lives later in the file than the footer logo's own sizing rule, and both selectors have identical specificity — was silently winning the cascade and forcing the FOOTER logo down to 34px tall too, while its width stayed large. That produced a big white pill with a tiny logo floating inside it. Scoping this to .header keeps it away from every other .logo__img on the page. */ .header .logo__img{ height:34px; } .nav{ position:fixed; top:0; right:0; height:100vh; width:min(320px, 82vw); background:#fff; box-shadow:var(--shadow-lg); padding:110px 32px 40px; transform:translateX(100%); transition:transform var(--transition); z-index:999; } .nav.open{ transform:translateX(0); } .nav__list{ flex-direction:column; gap:22px; } .nav__toggle{ display:flex; } .header__call{ display:none; } .header__actions .btn--primary{ display:none; } /* Floating actions move to the bottom-right and stack, from the SAME breakpoint where the mobile hamburger nav takes over. Previously these only switched at 520px, which left every viewport between 521px and 960px in a broken half-mobile state. */ /* The badge is absolutely positioned with right:-24px on desktop, which pushes the document 24px wider than the viewport. That horizontal overflow is the ONLY reason overflow-x:hidden was ever needed on the root — and overflow-x:hidden on the root makes a scroll container, which is what stops position:fixed elements tracking the viewport while scrolling. Fixing the cause lets us drop the hack. */ .about__badge{ position:static; margin-top:-40px; display:inline-block; } .float-btn--whatsapp{ bottom:24px; left:auto; right:20px; width:52px; height:52px; } .float-btn--call{ bottom:84px; left:auto; right:20px; width:48px; height:48px; } /* With the header no longer sticky, the menu scrolls out of reach — so keep a back-to-top control. Stacked clear of the two floating buttons: WhatsApp 24-76px, Call 84-132px, this 144-188px. */ .back-to-top{ display:flex; bottom:144px; right:20px; width:44px; height:44px; } .nav-overlay{ content:''; position:fixed; inset:0; background:rgba(7,27,69,0.5); z-index:998; opacity:0; visibility:hidden; transition:opacity var(--transition), visibility var(--transition); } .nav-overlay.show{ opacity:1; visibility:visible; } .about__grid, .why-us__grid{ grid-template-columns:1fr; gap:50px; } .why-us__media, .about__media{ order:-1; } .contact__grid{ grid-template-columns:1fr; } } @media (max-width:768px){ section{ padding:70px 0; } /* Hero: drop the forced full-viewport height and heavy padding that was leaving large empty gaps on phones — let the content define the height instead, with a minimal ~24px gap below the fixed 66px mobile header. */ .hero{ min-height:auto; } .hero__content{ padding-top:36px; padding-bottom:56px; } .eyebrow{ font-size:0.64rem; padding:7px 14px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .hero__subtitle{ margin-bottom:26px; } .hero__edge{ height:40px; } .scroll-cue{ display:none; } .services__grid{ grid-template-columns:1fr; } .industries__grid{ grid-template-columns:repeat(3, 1fr); } .work__grid{ grid-template-columns:repeat(2, 1fr); gap:14px; } .timeline{ grid-template-columns:repeat(2, 1fr); } .stats__grid{ grid-template-columns:repeat(2, 1fr); } .form-row{ grid-template-columns:1fr; } .footer__grid{ grid-template-columns:1fr; padding-top:60px; padding-bottom:40px; gap:44px; } .about__list{ grid-template-columns:1fr; } .feature-grid{ grid-template-columns:1fr; } .cta-banner__inner h2{ font-size:1.8rem; } .guide__grid2{ grid-template-columns:1fr; gap:32px; } .compare__grid, .proscons{ grid-template-columns:1fr; } .type-grid{ grid-template-columns:1fr; } .benefit-grid{ grid-template-columns:1fr; } /* Symmetrical padding — no dead space. The floating buttons no longer need to be designed around here: script.js hides them once the footer bar enters the viewport, so nothing can cover this text. */ .footer__bottom{ padding-bottom:28px; } } @media (max-width:520px){ .industries__grid{ grid-template-columns:repeat(2, 1fr); } .work__grid{ grid-template-columns:1fr; } .hero__actions{ flex-direction:column; align-items:stretch; } .hero__actions .btn{ justify-content:center; } .trustbar__inner{ flex-direction:column; } }