/* ===================================================================== enhancements.css — Premium UI/UX layer (added in modernization pass) Builds on the existing brand language: navy #112146, orange #e95821, light #f0f2f4, Manrope, 20px radius. Loaded AFTER style.css so it can refine specific sections without touching the base stylesheet. ===================================================================== */ :root{ --c-navy:#112146; --c-navy-700:#1b2e5a; --c-orange:#e95821; --c-orange-soft:#fff1ea; --c-ink:#0f1729; --c-muted:#5b6478; --c-bg:#f0f2f4; --c-line:rgba(17,33,70,.10); --radius:20px; --radius-sm:14px; --shadow-sm:0 4px 14px rgba(17,33,70,.06); --shadow-md:0 14px 40px rgba(17,33,70,.12); --shadow-lg:0 28px 70px rgba(17,33,70,.18); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Smooth, modern base behaviours ---------- */ html{ scroll-behavior:smooth; } *{ -webkit-tap-highlight-color:transparent; } /* Slightly richer button feel (keeps existing .button look, adds motion) */ .button{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease) !important; will-change:transform; } .button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(233,88,33,.32); } .button:active{ transform:translateY(0); } /* ---------- Scroll-reveal (progressive enhancement) ---------- Content is hidden ONLY while `reveal-pending` is on . That class is added by the inline head script and removed (or never relied on) the moment the reveal engine is confirmed dead, so a failed/blocked enhance.js can never leave a section permanently invisible. `is-visible` always wins. */ html.reveal-pending .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } html.reveal-pending .reveal.is-visible{ opacity:1; transform:none; } /* Hard safety net: if for any reason the pending class is cleared, show everything. */ html:not(.reveal-pending) .reveal{ opacity:1 !important; transform:none !important; } /* ===================================================================== “We Serve All Industries” — modern responsive card grid ===================================================================== */ #industries .industries_part{ text-align:center; max-width:680px; margin:0 auto; } #industries .industries_part .line_industries{ display:inline-flex; align-items:center; gap:8px; justify-content:center; color:var(--c-orange); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin-bottom:10px; } #industries .industries_part h2{ margin-bottom:12px; } #industries .industries_part > p{ color:var(--c-muted); margin:0; } .industries-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:24px; margin-top:14px; } .industry-card{ position:relative; display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:30px 26px; overflow:hidden; isolation:isolate; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); box-shadow:var(--shadow-sm); } /* top accent bar grows on hover */ .industry-card::before{ content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%; background:linear-gradient(90deg, var(--c-orange), #ff8a5c); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); } /* soft glow that fades in */ .industry-card::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; z-index:-1; background:radial-gradient(circle, rgba(233,88,33,.12), transparent 70%); opacity:0; transition:opacity .45s var(--ease); } .industry-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-md); border-color:transparent; } .industry-card:hover::before{ transform:scaleX(1); } .industry-card:hover::after{ opacity:1; } .industry-card .ic{ display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:var(--c-orange-soft); color:var(--c-navy); transition:background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); } .industry-card .ic svg{ width:28px; height:28px; } .industry-card:hover .ic{ background:var(--c-navy); color:#fff; transform:rotate(-6deg) scale(1.05); } .industry-card h3{ font-size:19px; color:var(--c-navy); } .industry-card p{ margin:0; color:var(--c-muted); font-size:14.5px; line-height:1.6; } /* staggered reveal */ .industries-grid .reveal:nth-child(1){ transition-delay:.04s } .industries-grid .reveal:nth-child(2){ transition-delay:.10s } .industries-grid .reveal:nth-child(3){ transition-delay:.16s } .industries-grid .reveal:nth-child(4){ transition-delay:.22s } .industries-grid .reveal:nth-child(5){ transition-delay:.28s } .industries-grid .reveal:nth-child(6){ transition-delay:.34s } .industries-grid .reveal:nth-child(7){ transition-delay:.40s } .industries-grid .reveal:nth-child(8){ transition-delay:.46s } .industries-grid .reveal:nth-child(9){ transition-delay:.52s } /* ===================================================================== Client Testimonials — premium dark panel + clean cards w/ ratings ===================================================================== */ .client_testimonials_main{ padding:0; } .testimonials-panel{ position:relative; overflow:hidden; margin:0 25px; border-radius:28px; padding:54px 28px 64px; background: radial-gradient(900px 380px at 12% -10%, rgba(233,88,33,.22), transparent 60%), linear-gradient(160deg, #16264f 0%, #0e1a37 60%, #0b1430 100%); color:#fff; } .testimonials-head{ text-align:center; max-width:640px; margin:0 auto 36px; } .testimonials-head .line_industries{ display:inline-flex; align-items:center; gap:8px; justify-content:center; color:#ff9b6b; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin-bottom:10px; } .testimonials-head h2{ color:#fff; margin-bottom:10px; } .testimonials-head p{ color:rgba(255,255,255,.72); margin:0; } /* slick still drives `.responsive`; we only restyle each slide */ .testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; align-items:stretch; } .testimonial-card{ height:100%; background:#fff; color:var(--c-ink); border-radius:var(--radius); padding:32px 30px 30px; display:flex; flex-direction:column; gap:16px; border:1px solid rgba(17,33,70,.06); /* clean definition, no shadow */ box-shadow:none; transition:transform .4s var(--ease), border-color .4s var(--ease); } .testimonial-card:hover{ transform:translateY(-6px); border-color:rgba(233,88,33,.35); box-shadow:none; } .t-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .t-rating{ color:var(--c-orange); font-size:16px; letter-spacing:2px; line-height:1; } .t-quote{ width:34px; height:34px; color:rgba(233,88,33,.22); flex:none; } .t-text{ margin:0; font-size:15.5px; line-height:1.75; color:#28304a; flex:1 1 auto; } .t-author{ margin-top:auto; display:flex; align-items:center; gap:14px; padding-top:16px; border-top:1px solid rgba(17,33,70,.08); } .t-avatar{ flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; font-size:16px; background:linear-gradient(135deg, var(--a, var(--c-orange)), var(--c-navy)); letter-spacing:.5px; } .t-meta h3{ font-size:16px; margin:0; color:var(--c-navy); text-transform:none; font-weight:700; } .t-meta p{ margin:2px 0 0; font-size:13px; color:var(--c-muted); } /* (testimonials now use a robust CSS grid — no carousel layout hacks needed) */ /* ===================================================================== Responsive tuning ===================================================================== */ @media (max-width:768px){ .industries-grid{ grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px; } .industry-card{ padding:24px 20px; } .testimonials-panel{ margin:0 12px; padding:40px 16px 48px; border-radius:22px; } .testimonials-grid{ gap:16px; } .testimonial-card{ padding:26px 22px; } } @media (max-width:480px){ .industries-grid{ grid-template-columns:1fr 1fr; } .industry-card h3{ font-size:17px; } } /* ===================================================================== Respect users who prefer reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .industry-card, .industry-card .ic, .button, .testimonial-card{ transition:none !important; } .industry-card:hover, .testimonial-card:hover, .button:hover{ transform:none !important; } } /* ===================================================================== Finalization pass — marquee, nav, buttons, contact, counters ===================================================================== */ /* ---- Marquees (logos / services text / testimonials) ---- The complete, authoritative marquee implementation now lives in its own component stylesheet: css/marquee.css (loaded AFTER this file). It is a single source of truth — do not re-add marquee rules here. */ /* ---- Desktop nav: silent, stable, no layout jump ---- */ .menu_part ul li a{ display:block; padding:10px 18px; border-radius:999px; color:var(--c-navy); line-height:1; transition:color .25s var(--ease), background-color .25s var(--ease); } .menu_part ul li a:not(.active):hover{ background:rgba(17,33,70,.06); } .menu_part .active{ padding:10px 18px; transition:background-color .25s var(--ease); } .menu_part .active:hover{ background:#112146; } .menu_part ul li a:active{ transform:none; } /* kill click jump */ /* ---- Submit button: fit content, clean padding + hover ---- */ .quote-form button[type="submit"]{ display:inline-flex; align-items:center; gap:10px; width:auto; margin:22px 0 4px; padding:14px 30px; font-size:16px; font-weight:600; line-height:1; color:#fff; background:var(--c-orange); border:0; border-radius:12px; cursor:pointer; box-shadow:0 8px 20px rgba(233,88,33,.28); transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); } .quote-form button[type="submit"]:hover{ background:#d3491a; transform:translateY(-2px); box-shadow:0 12px 28px rgba(233,88,33,.36); } .quote-form button[type="submit"]:active{ transform:translateY(0); } .quote-form button[type="submit"] img{ width:20px; height:20px; } /* ---- Contact page: center-align the icon/content cards ---- */ .contact_us_d_contant ul li{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 14px 18px; } .contact_us_d_contant .image__q{ text-align:center; padding-left:0; margin:-25px auto 8px; } .contact_us_d_contant ul li p{ margin:0; } /* ---- Counter polish ---- */ .counter-item{ text-align:center; } .counter-item .counter{ font-variant-numeric:tabular-nums; } /* ---- Social icon links: subtle hover ---- */ .right_anusmentbar a, .footer_right_anusmentbar a, .elementor-grid-item a{ display:inline-flex; transition:transform .25s var(--ease), opacity .25s var(--ease); } .right_anusmentbar a:hover, .footer_right_anusmentbar a:hover, .elementor-grid-item a:hover{ transform:translateY(-2px); opacity:.85; } @media (max-width:600px){ .contact_us_d_contant ul{ grid-template-columns:1fr 1fr !important; } .menu_part ul li a{ padding:8px 12px; } } /* (testimonials marquee styles moved to css/marquee.css) */ /* ===================================================================== v3 — cross-browser/device polish (text-stroke fallback, touch/click hardening, responsive). Marquee polish now lives in css/marquee.css. ===================================================================== */ /* ---- Outline text (counters + alternating keywords): never invisible ---- color:transparent + -webkit-text-stroke renders nothing on engines without text-stroke support. Fall back to a solid fill there. */ @supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){ .counter{ color:#e95821 !important; } .brarrrper h3:nth-child(odd){ color:#e95821 !important; } } /* ---- Testimonials: guarantee shadow-free + tidy typography ------------ */ .testimonials-panel, .testimonial-card, .testimonials-grid, .testimonials-marquee .testimonial-card{ box-shadow:none !important; } .testimonial-card .t-text{ font-size:15.5px; line-height:1.7; } @media (max-width:768px){ .testimonials-panel{ padding:40px 14px 46px; } .testimonial-card{ padding:26px 22px 24px; } } /* ---- Click / touch hardening (site-wide) ----------------------------- */ a, button, [role="button"], .tab, .mobile_menu, .close_btn, .menu_part ul li a, input[type="submit"], .button, .button_g{ touch-action:manipulation; /* removes the 300ms mobile tap delay */ -webkit-tap-highlight-color:transparent; } button, [role="button"], .tab, .mobile_menu, .close_btn{ cursor:pointer; } /* visible keyboard focus everywhere (accessibility, doesn't affect mouse) */ a:focus-visible, button:focus-visible, .tab:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--c-orange); outline-offset:2px; border-radius:4px; } /* the mobile menu overlay must sit above the page and capture taps */ .mobile__menu_top{ z-index:1000; } .mobile_menu, .close_btn{ position:relative; z-index:1001; } /* ---- Responsive guards (no horizontal overflow, fluid sections) ------ */ /* overflow-x:clip (not hidden) so it never breaks the sticky .left-sidebar */ body{ overflow-x:clip; } img, video, svg{ max-width:100%; height:auto; } .page-width, .header-width{ width:100%; box-sizing:border-box; } /* counters: wrap to 2x2 instead of cramming 4 across on phones */ @media (max-width:600px){ .counter-container{ flex-wrap:wrap; gap:18px 0; } .counter-item{ flex:0 0 50%; } .counter{ font-size:34px; } .counter-container p{ font-size:16px; } } /* ---- Accessibility: skip-to-content link (visible only on keyboard focus) ---- */ .skip-link{ position:absolute; left:8px; top:-48px; z-index:2000; background:var(--c-navy,#112146); color:#fff; padding:10px 16px; border-radius:0 0 10px 10px; font-weight:600; text-decoration:none; transition:top .2s var(--ease); } .skip-link:focus{ top:0; outline:2px solid var(--c-orange,#e95821); outline-offset:2px; } #main-content{ outline:none; } /* programmatic focus target, no visible ring */