/* ===================================================================== Nobility Glory — Global Responsive Layer Loaded LAST on every page, so it can correct sizing/layout issues without touching any of the existing per-page stylesheets. Scope: mobile + tablet correctness, tap targets, overflow control, fluid typography, floating/sticky button placement. ===================================================================== */ /* --------------------------------------------------------------- 0. Smooth-scroll handoff Several page stylesheets declare `html { scroll-behavior: smooth }`. Once the GSAP/Lenis scroller is running it owns the easing, and native smooth behaviour has to stand down or the two fight over the scroll position on anchor jumps. --------------------------------------------------------------- */ html[data-smooth-scroll], html[data-smooth-scroll] body { scroll-behavior: auto !important; } /* --------------------------------------------------------------- 1. Base — no page should ever scroll sideways --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Safety net only — every page now measures zero horizontal overflow at 320/375/768. Applied to alone (never to and together, which is the combination that breaks scrolling on iOS Safari), and with !important because the page loader scripts set an inline `overflow: auto` on the root once the loader clears. */ html { max-width: 100%; overflow-x: clip !important; } body { max-width: 100%; } @supports not (overflow: clip) { html { overflow-x: hidden !important; } } img, svg, video, iframe, canvas, table, pre { max-width: 100%; } iframe { border: 0; } /* Long unbroken strings (emails, URLs, CR numbers) must wrap */ p, li, h1, h2, h3, h4, h5, h6, a, span, div[class*="text"], div[class*="value"] { overflow-wrap: break-word; } /* Horizontal scrollers (filter tabs, chip rows) scroll cleanly */ .filter-tabs, .tabs, .chip-row, .coverage-tags, .material-tags, .language-tags { -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------- 2. Directional reveals must not push the page sideways The .fade-in-right / .reveal-right family used to start 40–60px to the right of its final position, which widened the document on every inner page, so this file forced them to rise instead of slide below 1024px. The motion standardisation removed the horizontal start from the source stylesheets — every reveal on the site is now the same 16px rise at every width — so the mobile-only override is gone and there is no longer a desktop/mobile split in the gesture. The `overflow-x: clip` on in section 1 above remains as the backstop; verified at 320 / 375 / 768 / 1024 after the change. --------------------------------------------------------------- */ /* --------------------------------------------------------------- 3. Fluid typography — headlines stop overflowing small screens --------------------------------------------------------------- */ @media (max-width: 1024px) { .hero-title, .hero h1, .hero-content h1 { font-size: clamp(28px, 7.4vw, 44px); line-height: 1.15; } .hero-subtitle, .hero p, .hero-content > p { font-size: clamp(15px, 3.9vw, 18px); line-height: 1.6; } .card-title, .about-title, .trusted-title, .cert-title, .leadership-title, .coverage-title, .faq-title, .cta-title, .section-title, .compliance-header h2 { font-size: clamp(24px, 5.6vw, 36px); line-height: 1.2; } } /* --------------------------------------------------------------- 4. Header — stays a clean 60px bar on every page --------------------------------------------------------------- */ @media (max-width: 768px) { .header, .header.scrolled { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); height: 60px; } .header-logo img { height: 55px; width: auto; } .hamburger, .mobile-toggle { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-right: -8px; background: none; border: 0; cursor: pointer; } .hamburger span, .mobile-toggle span { display: block; width: 24px; height: 2px; background: currentColor; } .header-right .btn-header, .header-right .header-cta, .header-right .header-phone { display: none; } } /* --------------------------------------------------------------- 5. Mobile navigation — full-height, scrollable, thumb-friendly Covers both markup variants used across the site: `.header-nav.active` (home page) and `.mobile-nav.active` (inner pages). --------------------------------------------------------------- */ @media (max-width: 768px) { .header-nav.active, .mobile-nav.active, .mobile-nav.open { max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); align-items: stretch; text-align: left; } .header-nav.active > a, .header-nav.active .dropdown-toggle, .mobile-nav.active > a, .mobile-nav.open > a { display: flex; align-items: center; min-height: 48px; width: 100%; text-align: left; font-size: 16px; } .header-nav.active .dropdown-menu a, .mobile-nav .mobile-dropdown a { display: flex; align-items: center; min-height: 44px; width: 100%; } .header-nav.active .mobile-cta, .mobile-nav .btn-header { justify-content: center; text-align: center; min-height: 48px; } /* Underline hover effect is meaningless on touch and can overflow */ .header-nav.active a::after, .mobile-nav a::after { content: none; } } /* Page must not scroll behind an open menu. !important because the loader script leaves an inline `overflow: auto` on . */ body.nav-open { overflow: hidden !important; touch-action: none; } /* --------------------------------------------------------------- 6. Floating / sticky action buttons The scroll-to-top and WhatsApp buttons are stacked on the same right-hand rail with matching offsets, sized for touch, and kept clear of the iOS home indicator. --------------------------------------------------------------- */ /* Two markup variants exist across the site: on the home page `.whatsapp-float` IS the link; on the inner pages it is a wrapper holding `.whatsapp-btn` (and, on some pages, the scroll-to-top button too). Only the outermost element is positioned, so the offsets never stack. */ .whatsapp-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 999; } a.whatsapp-float { width: 56px; height: 56px; } .whatsapp-float .whatsapp-btn { position: relative; right: auto; bottom: auto; width: 56px; height: 56px; } #scrollTop.scroll-top { position: fixed; /* The scroll-top button is 48px and the WhatsApp button below it is 56px. Matching their right edges leaves the two visually off the same rail by 4px, so this adds half the width difference and the two circles share a centre line instead. */ right: calc(max(20px, env(safe-area-inset-right)) + 4px); bottom: calc(96px + env(safe-area-inset-bottom)); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; z-index: 998; } #scrollTop.scroll-top svg { width: 20px; height: 20px; } @media (max-width: 768px) { /* Tooltips have nowhere to go on a phone */ .whatsapp-tooltip { display: none !important; } } /* --------------------------------------------------------------- 7. Touch targets & forms --------------------------------------------------------------- */ @media (max-width: 768px) { .btn, .btn-primary, .btn-outline, .btn-secondary, .cta-btn-white, .more-projects, .filter-tab, button, input[type="submit"] { min-height: 44px; } .btn, .btn-primary, .btn-outline, .cta-btn-white { display: inline-flex; align-items: center; justify-content: center; } .hero-buttons, .cta-buttons { flex-wrap: wrap; } /* 16px keeps iOS Safari from zooming the page on focus. !important because the per-page form rules are more specific. */ input, select, textarea, .form-group input, .form-group select, .form-group textarea { font-size: 16px !important; max-width: 100%; } /* Standalone call-to-action links — the "Learn more" row on a service card, the phone number in a CTA panel, a coverage card's link. They render as bare text at 22–29px tall, well under a comfortable thumb. Inline links inside body copy are deliberately left alone; padding them would break the flow of the paragraph. */ a.service-link, a.reach-card-link, a.cta-phone, a.cta-phone-link, a.project-card-link, a.card-link { display: inline-flex; align-items: center; min-height: 44px; } } /* --------------------------------------------------------------- 8. Layout safety nets --------------------------------------------------------------- */ @media (max-width: 768px) { .map-placeholder, .map-placeholder iframe { width: 100%; max-width: 100%; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .trusted-logos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .stats-bar { gap: 12px; } /* about.html's contact boxes are a fixed 40px icon plus a 1.5rem padding either side plus a 1rem gap — 13px more than a 320px screen has room for. Tighten the padding and let the label wrap under the icon rather than pushing past the edge. */ .contact-box { padding: 1rem; gap: 0.75rem; flex-wrap: wrap; } .contact-box > * { min-width: 0; } } /* The Arabic strapline carries an inline CR badge that breaks across two lines on a phone — keep the badge whole and stack it cleanly. */ @media (max-width: 768px) { .hero .font-arabic { font-size: 1rem !important; line-height: 1.7; } .hero .font-arabic span { display: inline-block; margin-left: 0 !important; margin-top: 8px; white-space: nowrap; } } /* --------------------------------------------------------------- 9. Contrast — accent legibility scale The brand red (#c41e1e on the home page, #c62828 on inner pages) is correct on light surfaces (5.2:1 on the cream) but reaches only 2.8–3.5:1 as small text on the dark sections. Rather than introduce a second accent, this is the SAME hue lightened for legibility — the brand red still owns every fill, bar and button; only small red TEXT on dark uses the tint. Measured ≥4.8:1 on every dark surface in use (#1a0a0a, #0f0808, #2a0f0f, and the tinted overlays). Muted body text on dark moves from 40% white (3.7:1) and #555 (2.7:1) to values that clear 4.5:1. Two greys on light surfaces are darkened for the same reason. --------------------------------------------------------------- */ :root { --red-on-dark: #e8635f; --muted-on-dark: rgba(255, 255, 255, 0.62); --muted-on-dark-solid: #8a8a8a; } /* Accent text on dark surfaces — always-dark contexts */ .cert-card-label, .cta-step-number, .cta-step-num, .cta-label, .step-number, .trusted-label, .footer-bottom .dev-credit span, .section-dark .section-number, .section-dark-red .section-number, .card-whyus .card-label, .section-dark .more-projects, .section-dark-red .more-projects, .section-dark .more-projects a, .section-dark-red .more-projects a, .trusted-section .more-projects a, /* index.html: the same .whyus-item-number / .card-label classes also render on this page's light sections — scoped to their one dark card/section so those instances are untouched */ .card-whyus .whyus-item-number, .cert-content .card-label, /* why us.html: .section-label appears on both light and dark sections of this page under different wrapper classes — scoped to the two that are dark */ .section-dark .section-label, .section-dark-brown .section-label, .contract-highlight .contract-highlight-label, .section-dark .leader-role, .section-dark .faq-icon, .section-dark-red .faq-icon, /* fuel/scrap/catering/equipment service pages: these numbered-step labels only exist inside a dark or dark-red section on each page */ .section-dark .why-num, .section-dark-red .why-num, .section-dark-red .card-num, .section-dark-red .tier-num, /* request.html: .section-number is reused across five sections, most of them light — scoped to the two that are dark */ .office-section .section-number, .expect-section .section-number, .contact-info-card .contact-info-label, .expect-section .expect-num, /* Project pages: the highlight sidebar and FAQ band are the only two dark surfaces that use these labels */ .sidebar-highlights .sidebar-label, .faq-section .faq-label, /* index.html: this card-label instance was missed in the first pass */ .coverage-content .card-label, /* about.html: the CEO-message band is the one dark section reusing these otherwise-light-surface classes */ .ceo-section .section-label, .ceo-section .quote-label, .ceo-section .text-red { color: var(--red-on-dark); } /* about.html hand-authors this one label with an inline style="color: var(--color-primary)", which beats any external stylesheet selector short of !important. */ .ceo-content .section-label { color: var(--red-on-dark) !important; } /* Muted text on dark surfaces. .cta-right .cta-step-label matches index.css's own selector specificity (0,2,0) — a bare .cta-step-label (0,1,0) loses the cascade to it despite loading later. */ .footer-contact-label, .footer-bottom-text, .coverage-label, .cta-right .cta-step-label, .footer-bottom-links span, .footer-bottom-links a { color: var(--muted-on-dark); } /* Inner-page footers use a solid grey rather than translucent white */ .footer-bottom p, .footer-bottom .dev-credit, .footer-cr { color: var(--muted-on-dark-solid); } /* The one number that sits on the solid red tile needs full white */ .whyus-item.highlight .whyus-item-number { color: #ffffff; } /* Two greys that fail on the light surfaces */ .categories-note { color: #5f5f5f; } .stat-desc { color: #5a5a5a; } /* --------------------------------------------------------------- 10. Solid CTA buttons keep their white label `.mobile-nav a { color: #333 }` (in every inner-page stylesheet) out-specifies `.btn-header { color: var(--white) }`, so the red button in the mobile menu renders near-black text on red — 2.25:1, well under the 4.5:1 minimum. This restores the authored colour. --------------------------------------------------------------- */ .mobile-nav a.btn-header, .mobile-nav a.btn-primary, .mobile-nav a.cta-btn { color: var(--white, #ffffff); } /* --------------------------------------------------------------- 11. Hover movement is pointer-only A touch tap fires :hover and keeps it applied until the next tap elsewhere, which would otherwise leave cards and buttons stuck in their lifted state. Colour, background and shadow hovers stay ungated — those read as tap feedback. --------------------------------------------------------------- */ @media (hover: none), (pointer: coarse) { .about-highlight:hover, .about-principle:hover, .active-project-card:hover, .back-to-top:hover, .badge:hover, .btn:hover, .btn-discuss:hover, .btn-header:hover, .btn-outline:hover, .btn-outline-dark:hover, .btn-primary:hover, .btn-red:hover, .btn-request-hero:hover, .btn-whatsapp-small:hover, .card:hover, .card-light:hover, .card-light:hover h4, .card-services:hover, .card-track:hover, .card-whyus:hover, .category-card:hover, .category-card:hover h4, .ceo-card:hover, .ceo-image:hover img, .cert-card:hover, .compliance-card:hover, .contact-box:hover, .contract-highlight:hover, .coverage-btn:hover, .coverage-tag:hover, .cr-card:hover, .cta-btn:hover, .cta-btn-white:hover, .cta-image:hover img, .cta-left:hover, .cta-phone a:hover, .cta-phone-link:hover, .cta-section-inner:hover, .established-card:hover, .faq-item:hover, .faq-question:hover, .filter-tab:hover, .footer-links a:hover, .footer-logo:hover img, .footer-tag:hover, .header-cta:hover, .header-logo:hover, .hero-cta:hover, .hero-tag:hover, .info-card:hover, .lang-tag:hover, .leadership-photo:hover, .logo-carousel-item:hover, .logo-carousel-track:hover, .material-tag:hover, .meal-card:hover, .more-projects:hover, .more-projects a:hover, .mv-card:hover, .mv-list li:hover, .nav-card:hover, .principle-item:hover, .profile-image:hover img, .project-card:hover, .project-list li:hover, .reach-card:hover, .scroll-top:hover, #scrollTop.scroll-top:hover, #scrollTop.scroll-top:hover svg, .service-link:hover, .service-option:hover, .stat-item:hover, .stat-item:hover .stat-label, .stat-item:hover .stat-number, .step-card:hover, .tanker-card:hover, .tier-card:hover, .trusted-logo:hover, .trusted-logo-item:hover, .whatsapp-btn:hover, .whatsapp-float:hover, .whatsapp-float:hover .whatsapp-tooltip, .why-item:hover, .whyus-item:hover, .whyus-item.highlight:hover { transform: none; } .card:hover::before, .card-light:hover::before, .category-card:hover::before, .step-card:hover::before, .tier-card:hover::before { transform: none; } } /* --------------------------------------------------------------- 12. Motion preferences --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-in-left, .fade-in-right, .reveal-left, .reveal-right, .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } /* Infinite decorative motion: the WhatsApp pulse/ripple and the client logo marquees run for the entire visit. Reduced motion stops these; the button and the logo strip stay fully visible and usable. */ .whatsapp-float, .whatsapp-float .whatsapp-btn, .whatsapp-btn { animation: none !important; } .whatsapp-float::before, .whatsapp-float::after, .whatsapp-btn::before, .whatsapp-btn::after { animation: none !important; display: none !important; } .logo-carousel-track, #logoTrack { animation: none !important; } } /* --------------------------------------------------------------- 13. The "button snaps bigger on tap" fix Reported: tapping a CTA (e.g. "Request a Quote") makes it flash instantly larger, then a separate smooth transition plays after. Cause: no stylesheet on the site ever sets -webkit-tap-highlight- color or touches :focus, so two default browser behaviours were firing back to back on every tap — 1. The mobile tap-highlight: a solid rectangular overlay the size of the button's full hit box. On a rounded pill button that rectangle visibly overhangs the corners, which reads as the button suddenly growing. It appears with no easing. 2. Immediately after, the button's own :hover/:active rules (translateY, box-shadow) play on their normal 220ms transition — the "then it does the transition" part. Fix: kill the tap-highlight everywhere, then give every button its own instant, deliberate press feedback instead of relying on the browser default. Keyboard focus is left untouched — Tab navigation still gets a visible ring; only pointer/touch interaction changes. --------------------------------------------------------------- */ a, button, .btn, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Mouse/touch clicks no longer show the default focus ring (which is the same "instant rectangle" shape as the tap-highlight and can produce the identical snap). Keyboard focus is unaffected — the :focus-visible fallback below still shows a ring for Tab users on the few browsers that don't support :focus-visible at all. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; } a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--red, #c41e1e); outline-offset: 2px; } /* Deliberate press feedback in place of the native flash — every solid CTA dips 3% on press and recovers on release. */ @media (hover: hover) and (pointer: fine), (pointer: coarse) { .btn-primary:active, .btn-outline:active, .btn-header:active, .btn-red:active, .cta-btn-white:active, .header-cta:active, a.mobile-cta:active { transform: scale(0.97); transition: transform 120ms var(--ease-out, ease-out); } } /* --------------------------------------------------------------- 13. Frosted header — soften the header/content seam Every page's header is a flat opaque white (or cream, on the project pages) plate, position: fixed, sitting on top of whatever scrolls underneath. On light sections that's invisible. On the site's dark sections (rgb(15,8,8)-family panels used for CTAs, FAQs, footers) the boundary is a hard white-to-near-black cut with nothing blending the two — no border or shadow is involved, it is simply full-opacity white meeting full-opacity near-black, and that hard edge is what reads as a stray "line" in a screenshot. Fix: make the header translucent with a background blur, so whatever is scrolling underneath shows through softly instead of being cut off at a hard edge. This is the header treatment used by most sites doing an overlay/fixed nav for exactly this reason. --------------------------------------------------------------- */ .header { background: rgba(250, 247, 243, 0.82) !important; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } /* Browsers without backdrop-filter support would otherwise show page content faintly through an unblurred header — worse than the solid plate this replaces. Fall back to the original opaque look. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header { background: rgba(250, 247, 243, 1) !important; } }