/* ================================================================== Responsive layer ------------------------------------------------------------------ The page was authored as a fixed 1440px canvas with inline style="" on nearly every element. Inline styles beat external CSS, so every override in here needs !important. That's not sloppiness — it's the cost of the original authoring style. Classes in index.html exist purely as hooks for this file; the inline styles remain the desktop (1440px) baseline and are what these rules reflow away from. Ladder: <=400 small phone <=560 phone <=640 large phone <=860 tablet portrait <=1024 tablet landscape / small laptop <=1100 header collapses to hamburger >=1700 wide desktop >=2100 ultrawide ================================================================== */ :root { --shell: 1440px; /* max content width */ --gut: clamp(18px, 4.6vw, 56px); /* horizontal page gutter */ --header-h: 80px; /* fallback; main.js measures the real value */ } /* Shell ------------------------------------------------------------ */ /* Was width:1440px;min-width:1440px;overflow:hidden. The sideways overflow guard lives on rather than here for two reasons: `clip` (not `hidden`) avoids making an element a scroll container, which would silently kill position:sticky on the header; and keeping it off .page lets the full-bleed sections paint past the shell edge out to the viewport. */ html { overflow-x: clip; } .page { width: 100% !important; max-width: var(--shell) !important; min-width: 0 !important; } img { max-width: 100%; } select, input, button, textarea { max-width: 100%; } /* Long unbroken strings (tracking IDs, emails) must not push the page wider than the viewport on narrow screens. */ body { overflow-wrap: break-word; } .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; } /* Anchor targets clear the sticky header. */ section[id] { scroll-margin-top: calc(var(--header-h) + 12px); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* Horizontal gutters, everywhere ----------------------------------- */ /* padding-left/right are longhands, so they override the left/right halves of each inline `padding:` shorthand while leaving the authored vertical rhythm untouched. */ .sec, .site-header, .site-footer { padding-left: var(--gut) !important; padding-right: var(--gut) !important; } /* ================================================================== Header + mobile nav ================================================================== */ .nav-toggle { display: none; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: transparent; border: 1px solid rgba(10, 10, 70, .14); border-radius: 12px; cursor: pointer; padding: 0; } .nav-toggle-bar { display: block; width: 18px; height: 2px; background: #0A0A46; border-radius: 2px; transition: transform .2s ease, opacity .18s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: #FBFBF7; border-bottom: 1px solid rgba(10, 10, 70, .1); box-shadow: 0 24px 40px -28px rgba(10, 10, 70, .5); padding: 12px var(--gut) 20px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .mobile-nav[hidden] { display: none; } .mobile-nav-links { display: flex; flex-direction: column; } .mobile-nav-links a { color: #0A0A46; font-size: 16px; padding: 13px 2px; border-bottom: 1px solid rgba(10, 10, 70, .07); } .mobile-nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .mobile-nav-ghost, .mobile-nav-primary { display: block; text-align: center; border-radius: 999px; padding: 14px; font-size: 15px; font-weight: 700; } .mobile-nav-ghost { border: 1px solid rgba(10, 10, 70, .18); color: #0A0A46; font-weight: 500; } .mobile-nav-primary { background: #6DB33F; color: #0A0A46; } /* Nav has 5 links plus two CTAs — it runs out of room well before tablet width, so the swap happens at 1100, not at a phone size. */ @media (max-width: 1100px) { .site-nav { display: none !important; } .header-cta-text { display: none !important; } .nav-toggle { display: flex; } .site-header { gap: 14px !important; } /* With the nav gone, space-between would strand the CTA mid-bar. Group it against the toggle instead. */ .header-cta { margin-left: auto !important; } } @media (max-width: 480px) { .header-cta { display: none !important; } } /* Lock body scroll while the drawer is open. */ body.nav-open { overflow: hidden; } /* ================================================================== Fluid type ================================================================== */ .hero-title { font-size: clamp(32px, 5.6vw, 58px) !important; } .h2 { font-size: clamp(26px, 3.6vw, 40px) !important; } .h2-sm { font-size: clamp(24px, 3.1vw, 34px) !important; } @media (max-width: 640px) { .hero-lede { font-size: 15.5px !important; } } /* ================================================================== Hero ================================================================== */ /* The h1 carries three authored
s, but at 58px its longest line ("watched every metre.") needs 612px and the copy column was only 460px -- so the headline shipped as six ragged lines. Size the type off the column it actually lives in, so the three-line break always holds, and widen that column on roomier screens so the type can reach its authored 58px. */ @media (min-width: 1025px) { .hero-copy { container-type: inline-size; } } @supports (container-type: inline-size) { @media (min-width: 1025px) { .hero-title { font-size: min(58px, 9.2cqw) !important; } } } @media (min-width: 1300px) { .hero { grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important; } } /* Two columns hold up to ~1024; below that the 460px copy column and the map are both too narrow to read. */ @media (max-width: 1024px) { .hero { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; padding-top: 44px !important; padding-bottom: 32px !important; } .hero-copy, .hero-lede { max-width: 640px !important; } .hero-br { display: none; } } @media (max-width: 640px) { .hero-actions { flex-direction: column !important; align-items: stretch !important; } /* The world band is ~2.5:1, so a 2:1 box holds it with slim margins on desktop. On a phone that box is only ~175px tall, which reads as a sliver -- go squarer and let the margins grow. */ .hero-img { aspect-ratio: 3 / 2 !important; } /* Only applies if the tracking card in index.html is uncommented: at this width a floating card would blanket the map it sits on, so drop it out of the overlay and let it read as a strip underneath. */ .hero-track { position: static !important; width: auto !important; border: 0 !important; border-top: 1px solid rgba(10, 10, 70, .09) !important; border-radius: 0 !important; box-shadow: none !important; padding: 15px !important; } .hero-live { right: 12px !important; top: 12px !important; padding: 7px 11px !important; } } @media (max-width: 400px) { .hero-badge { font-size: 11.5px !important; } } /* ================================================================== Logo marquee ================================================================== */ @media (max-width: 640px) { .logos { padding-bottom: 40px !important; } .logos-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .logos-row > div { width: 100%; } } /* ================================================================== Section headers (heading left / note right) ================================================================== */ @media (max-width: 860px) { .sec-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .sec-head-note { max-width: 560px !important; } } /* ================================================================== Services ================================================================== */ @media (max-width: 1024px) { .services { padding-top: 56px !important; padding-bottom: 56px !important; } .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .services { padding-top: 44px !important; padding-bottom: 44px !important; } .svc-grid { grid-template-columns: minmax(0, 1fr) !important; } .svc-feature { grid-column: span 1 !important; } } /* Feature card: image sits beside the copy until there's no room. */ @media (max-width: 900px) { .svc-feature { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; padding: 24px !important; } .svc-feature-img { width: 100% !important; height: 170px !important; } .svc-feature p { max-width: none !important; } } @media (max-width: 640px) { .svc-grid > div { padding: 22px !important; } } /* ================================================================== Tracking + ops dashboard ================================================================== */ @media (max-width: 1024px) { .tracking { padding-top: 60px !important; padding-bottom: 60px !important; } .tracking-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; } } @media (max-width: 880px) { .ops-grid { grid-template-columns: minmax(0, 1fr) !important; } atura-abuja-map[variant="ops"] { height: 300px !important; } /* Six order rows stacked under the map is a lot of scroll on a phone — cap it and let the list scroll in place. The fade is what makes a half-cut row read as "more below" instead of a glitch. */ .ops-orders { max-height: 330px; overflow-y: auto; mask-image: linear-gradient(#000 calc(100% - 34px), transparent); -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); } } @media (max-width: 640px) { .tracking { padding-top: 48px !important; padding-bottom: 48px !important; } atura-abuja-map[variant="ops"] { height: 260px !important; } .track-form { flex-wrap: wrap !important; } } @media (max-width: 400px) { /* The pill-shaped input + button stops fitting; break it into a stacked block form. */ .track-form { border-radius: 16px !important; flex-direction: column !important; padding: 12px !important; } .track-form button { width: 100%; } } /* ================================================================== How it works ================================================================== */ @media (max-width: 1024px) { .how { padding-top: 56px !important; padding-bottom: 56px !important; } .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; } /* The dashed connector only reads as a timeline across one row. */ .how-rule { display: none !important; } } @media (max-width: 560px) { .how { padding-top: 44px !important; padding-bottom: 44px !important; } .how-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; } .how-grid p { max-width: none !important; } } /* ================================================================== Coverage ================================================================== */ @media (max-width: 980px) { .coverage-card { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; padding: 32px !important; } } @media (max-width: 640px) { .coverage { padding-bottom: 48px !important; } .coverage-card { padding: 24px !important; border-radius: 20px !important; } .coverage-card p { max-width: none !important; } .windows-card { padding: 20px !important; } } /* ================================================================== Testimonials / proof ================================================================== */ @media (max-width: 980px) { .proof-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } .proof-photo { min-height: 240px !important; } .proof-photo img { min-height: 240px !important; } } @media (max-width: 700px) { .proof-cards { grid-template-columns: minmax(0, 1fr) !important; } .proof-stats { grid-column: span 1 !important; flex-wrap: wrap !important; } .proof-stats > div { flex: 1 1 140px; padding: 20px !important; } } @media (max-width: 640px) { .proof { padding-bottom: 48px !important; } .proof-cards > div { padding: 22px !important; } .proof-cards p { font-size: 15px !important; } .proof-photo, .proof-photo img { min-height: 200px !important; } } /* ================================================================== Booking CTA ================================================================== */ @media (max-width: 980px) { .book-card { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; padding: 36px !important; } .book-card p { max-width: none !important; } .book-photo { max-width: none !important; } } @media (max-width: 640px) { .book { padding-bottom: 48px !important; } .book-card { padding: 24px !important; border-radius: 20px !important; } .book-form { padding: 20px !important; } .book-contact { gap: 12px !important; flex-direction: column !important; align-items: flex-start !important; } .book-photo img { height: 150px !important; } } @media (max-width: 400px) { .field-row { flex-direction: column !important; } } /* ================================================================== Footer ================================================================== */ @media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; } .footer-brand { grid-column: span 2; } .footer-brand p { max-width: 520px !important; } } @media (max-width: 560px) { .site-footer { padding-top: 44px !important; } .footer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } .footer-brand { grid-column: span 1; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } } /* ================================================================== Large and ultrawide displays ------------------------------------------------------------------ The design is authored at 1440. Rather than stretch it thin, the shell steps up in two stages and the gutters and hero grow with it, so a 2560px display reads as a deliberately larger version of the same layout instead of a small page marooned in whitespace. ================================================================== */ /* Past 1440 the shell stops filling the viewport, and the sections that carry their own background (white services, dark tracking, dark footer) start reading as slabs floating on the cream page. Bleed their colour to the viewport edges while the content stays in the shell. box-shadow paints the bleed and clip-path keeps it to a horizontal band -- neither contributes to scrollable overflow, so this cannot reintroduce a sideways scrollbar. */ @media (min-width: 1441px) { .services, .tracking, .site-footer { clip-path: inset(0 -100vw); box-shadow: 0 0 0 100vw var(--bleed); } .services { --bleed: #fff; } .tracking, .site-footer { --bleed: #08082F; } /* The services hairlines would otherwise stop dead at the shell edge. Redraw them across the full bleed. */ .services { position: relative; border-color: transparent !important; } .services::before, .services::after { content: ""; position: absolute; left: -100vw; right: -100vw; height: 1px; background: rgba(10, 10, 70, .07); } .services::before { top: 0; } .services::after { bottom: 0; } } @media (min-width: 1700px) { :root { --shell: 1600px; --gut: 80px; } .hero { grid-template-columns: minmax(0, 630px) minmax(0, 1fr) !important; gap: 72px !important; } .hero-lede { max-width: 470px !important; } } @media (min-width: 2100px) { :root { --shell: 1760px; --gut: 104px; } atura-abuja-map[variant="ops"] { height: 400px !important; } }