/* ============================================================================ Responsive Fixes - Fluxr Works ---------------------------------------------------------------------------- Loaded after style.css. Everything here is an override; style.css is not modified, so deleting this file returns the site to its previous behaviour. Fixes, in order: 1. Fullscreen menu in short viewports (landscape phones, short laptops) 2. Tap targets below the 44x44 minimum on touch screens 3. Small supporting fixes found while testing 4. Testimonial slider dots overlapping the author text 5. "Get Started" pill button collapsing on narrow screens 6. Fullscreen menu nav link size (width and height aware) 7. Footer bottom-bar nav alignment and wrapped-row spacing Tested in Chromium at widths 320 / 375 / 390 / 414 / 576 / 768 / 991 / 1024 / 1280 / 1440 / 1920 and in landscape at 667x375, 844x390 and 932x430. ========================================================================== */ /* ============================================================================ 1. FULLSCREEN MENU IN SHORT VIEWPORTS ---------------------------------------------------------------------------- style.css sizes the menu from viewport WIDTH only. A phone in landscape is wide (844px) but very short (390px), so it was getting the 42px desktop type scale with no room for it: only 4 of the 7 nav links fitted on screen, and the "Get in touch" block was entirely below the fold. These rules key off viewport HEIGHT instead, so the menu compresses when vertical space is what is actually scarce. ========================================================================== */ /* Anything shorter than a typical laptop screen. Sizes are derived from vh so the menu scales continuously with the space available, rather than jumping at fixed steps and overshooting somewhere in between. The clamp ceilings match the values style.css already uses, so nothing changes on tall screens. */ @media (max-height: 860px) { .fullscreen-menu-inner { padding: clamp(14px, 3vh, 40px) clamp(20px, 4vw, 60px); } .fullscreen-menu-body { margin: clamp(10px, 2.5vh, 40px) 0; /* Anchor to the top rather than centring. A centred flex child that is taller than its parent overflows above the top edge, and that part cannot be reached by scrolling. */ align-items: flex-start; } /* Nav link SIZE is handled in section 6, which accounts for width and height together. Setting a fixed size here overrode every width-based step in style.css, because this query matches most phones in portrait, every phone in landscape and most laptops. Spacing only, below. */ .fullscreen-menu-nav li { margin-bottom: clamp(0px, 0.6vh, 8px); } .fullscreen-menu-nav .num { font-size: clamp(11px, 1.7vh, 16px); width: clamp(28px, 5vh, 50px); } .fullscreen-menu-footer { gap: clamp(12px, 2vh, 30px); padding-top: clamp(10px, 2vh, 30px); font-size: clamp(12px, 1.8vh, 16px); } .fullscreen-menu-top .logo img { max-height: clamp(22px, 4vh, 40px); } } /* Phones in landscape: reclaim the width the decorative panel was using. */ @media (max-height: 500px) { .fullscreen-menu-visual { display: none; } } /* Very short viewports: let the menu scroll rather than clip, with momentum scrolling on iOS. This is the backstop if the type scale still does not fit. */ .fullscreen-menu-inner { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ============================================================================ 2. TAP TARGETS ---------------------------------------------------------------------------- Anything you tap should be at least 44x44px (WCAG 2.5.5 / Apple HIG). Measured on a 375px viewport, these were under it. Where enlarging the element would change the design, the hit area is expanded with an ::after overlay instead, which costs nothing visually. ========================================================================== */ @media (hover: none) and (pointer: coarse) { /* --- Buttons that can simply be made bigger --------------------------- These are already boxes, so growing them changes nothing else. */ /* Footer newsletter arrow: was 40x40 */ footer .footer-subscribe-btn { width: 44px; height: 44px; right: 4px; } /* Social circles in the footer: were 40x40 */ .social-icon-circle a { min-width: 44px; min-height: 44px; } /* Blog sidebar search button: was 28x18 */ .search-box button, .search-box .icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Pill buttons ("Start Your Project"): were 40px tall */ .butn-arrow-circle { padding-top: 7px; padding-bottom: 7px; } /* --- Text links that must not move ------------------------------------ Padding on an inline element grows the clickable box (hit testing uses the padding box) but does not change the line height, so the layout is untouched. The matching negative margin keeps inline-block cases still. This is used in preference to an ::after overlay so we never collide with a pseudo-element style.css is already using. */ /* !important is needed here only because several of these have a more specific padding rule in style.css (e.g. .sidebar .widget.tags a). It is confined to the two hit-area properties. */ footer .mr-30px, .underline, .tags a, .tag a, .widget.tags a, ul.rest li a { padding-top: 15px !important; padding-bottom: 15px !important; margin-top: -15px !important; margin-bottom: -15px !important; } /* Narrow footer links ("Home") were only 30px wide. */ footer .mr-30px { padding-left: 7px !important; padding-right: 7px !important; margin-left: -7px !important; } /* Share icons are square, so size them rather than padding them. */ .share-icon a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Footer service links and the links inside the menu footer were 19-43px. */ footer .item h6 a, .fullscreen-menu-footer a { padding-top: 13px !important; padding-bottom: 13px !important; margin-top: -13px !important; margin-bottom: -13px !important; } /* Social abbreviations in the menu footer were only 15px wide. */ .fsm-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Card headline links (service cards, blog cards) were 43px tall. */ .item h6 > a, .text h6 > a { padding-top: 6px !important; padding-bottom: 6px !important; margin-top: -6px !important; margin-bottom: -6px !important; } } /* Menu links sit at 43px on mid-size screens. Only pad them where there is vertical room to spare - on a short screen the compact layout matters more than the extra pixel, and forcing 44px each would push the menu off screen. */ @media (hover: none) and (pointer: coarse) and (min-height: 600px) { .fullscreen-menu-nav a { display: inline-flex; align-items: center; min-height: 44px; } /* Logo links were 80x30. */ .logo { padding-top: 7px; padding-bottom: 7px; margin-top: -7px; margin-bottom: -7px; } } /* ============================================================================ 3. SUPPORTING FIXES ========================================================================== */ /* Keyboard focus was invisible on several controls. Deliberately NOT applied to input / textarea / select. The :focus-visible spec says text fields always match it, however focus was acquired, so an outline here would appear on plain mouse clicks too. Links and buttons only match on keyboard navigation, so those keep an indicator that a mouse user never sees. Form fields get a border colour change instead - see below. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--orange, #FF6A3A); outline-offset: 3px; } /* No outline ring on form fields, on click or on tab. */ input:focus, input:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible { outline: none; box-shadow: none; } .fullscreen-menu a:focus-visible, .fullscreen-menu button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } /* Long unbroken strings (URLs, long client names) were able to push a card wider than its column at 320px. */ .comment-text, .blog-content p, footer a { overflow-wrap: anywhere; } /* Respect the OS "reduce motion" setting for the menu reveal. */ @media (prefers-reduced-motion: reduce) { .fullscreen-menu-nav li, .fullscreen-menu-footer { transition: none !important; transform: none !important; } } /* ============================================================================ 4. TESTIMONIAL SLIDER DOTS OVERLAPPING THE AUTHOR TEXT ---------------------------------------------------------------------------- Affects the testimonial carousel on index.html and case-study.html, which share the same .testimonials-ds markup. style.css pins the dots pill to the bottom-right corner of the slider box: .testimonials-ds .swiper .swiper-pagination { position: absolute; bottom: 0; right: 0; ... } The slider runs slidesPerView: 1 with no autoHeight, so Swiper sizes the box to the TALLEST slide. That means the pill's resting place is the foot of the longest quote, not the foot of whichever quote is currently on screen - and because the tallest slide fills the box exactly, its author line ends flush with the bottom edge, directly behind the pill. On a wide screen this goes unnoticed: the author line is short and sits on the left while the pill sits on the right, so the two never share horizontal space. Once the column stacks on a phone, the author line runs the full width of the card and the role text ends up underneath the dots. Fix: reserve a lane for the pill at the foot of the slider rather than letting it float over the last line of content. Applied at every width, not just mobile - on desktop the two only miss each other by luck, and a longer job title or a narrower column would collide there too. ========================================================================== */ .testimonials-ds .swiper { /* The pill is 31px tall (8px bullets + 5px padding + 1px border each side). 48px leaves it clear of the text with ~17px to spare. Absolutely positioned children resolve against the PADDING box, so bottom: 0 now lands below the slides instead of on top of them, and the value holds no matter how long a future testimonial runs. */ padding-bottom: 48px; } /* Phones: the layout is fully stacked here, and a pill pushed hard against the right edge of a narrow card reads as stranded rather than deliberate. Centring it under the quote balances the card. Centred with auto margins rather than a transform, because Swiper's own stylesheet already sets transform: translate3d(0,0,0) on this element and overriding it would be a silent dependency on load order. left/right need !important only to beat the `left: auto !important` in style.css. */ @media (max-width: 575px) { .testimonials-ds .swiper .swiper-pagination { left: 0 !important; right: 0 !important; margin-left: auto; margin-right: auto; } } /* ============================================================================ 5. "GET STARTED" PILL BUTTON COLLAPSING ON NARROW SCREENS ---------------------------------------------------------------------------- Affects the two .butn-arrow-circle buttons that sit inside a heading on index.html: "Get Started" in the How We Work section, and "Explore all posts" in the blog section. Both are wrapped like this: sharp brand.Get Started ... The anchor is therefore a flex item, and flex items default to flex-shrink: 1. On a narrow screen the sibling text claims the row and the button gets squeezed below the width its own contents need. Because style.css leaves the anchor as a plain block with an inline-block circle, the squeeze makes the label wrap to its own line and pushes the 30px circle down onto a second line - the pill grows to 57px tall and the circle sits 8px below centre, off to one side under the text. Measured broken from 320px to 414px ("Get Started") and 320px to 360px ("Explore all posts"). Clear from 480px up, which is why it only shows on phones. Fix has two halves: a) make the button an inline-flex row so the label and circle can never be split onto separate lines, whatever width it is given; b) stop it being shrunk in the first place, and let it drop to its own line when there genuinely is not room beside the text. ========================================================================== */ /* (a) Label and circle always share one centred row. white-space stops the label itself wrapping, which is what set the two-line height. */ .butn-arrow-circle { display: inline-flex; align-items: center; white-space: nowrap; } /* The circle keeps its 30x30 shape instead of being shrunk into an oval. */ .butn-arrow-circle .icon { flex: 0 0 auto; } /* (b) As a flex item, never shrink below the content width. */ .d-flex > .butn-arrow-circle { flex-shrink: 0; } /* Allow the button to wrap onto its own line rather than being crushed against the text. Scoped to the two headings that use this pattern so no other .d-flex on the site changes behaviour. */ .intro-style2 .fs-60 .d-flex, .sec-head-modern .fs-60 .d-flex { flex-wrap: wrap; } /* Once it has wrapped to its own line the inline ml-15px indent reads as a misalignment, so trade it for vertical spacing on phone widths. */ @media (max-width: 575px) { .intro-style2 .fs-60 .d-flex > .butn-arrow-circle.ml-15px, .sec-head-modern .fs-60 .d-flex > .butn-arrow-circle.ml-15px { margin-left: 0; margin-top: 15px; } } /* ============================================================================ 6. FULLSCREEN MENU NAV LINK SIZE ---------------------------------------------------------------------------- style.css steps the nav link size by viewport WIDTH: 100px by default, 42px under 991px, 30px under 575px. Section 1 of this file then set a flat 51px inside @media (max-height: 860px), which overrode all three - and that query matches most phones in portrait, every phone in landscape, and most laptops. The result was sizes that did not track the screen at all: 320x568 phone 51px <- larger than the 414px phone below 414x896 phone 30px 768x1024 tablet 42px 1280x800 laptop 51px <- same as a 320px phone 1440x900 desktop 100px Both constraints are real. Width decides whether a word like "SERVICES" fits on one line; height decides whether all seven items fit on screen at once - seven items at 100px need ~840px of vertical space, which a 800px laptop does not have. That is what section 1 was reaching for. So size against both, and take whichever is smaller: clamp(30px, 5.6vw, 100px) width: never below the 30px design floor, never above the 100px design ceiling 7vh height: keeps all seven items, the header and the footer block above the fold min() picks the binding constraint automatically, so the size now moves continuously with the screen instead of jumping between four fixed values, and no viewport can be sized larger than either budget allows. The 7vh figure was found by sweeping candidate values and measuring the leftover scroll in .fullscreen-menu-inner at each viewport. 8vh still left the menu scrolling by 46px at 1440x900 and 20px on a landscape phone; 7vh is the largest value that fits everywhere tested with nothing cut off. ========================================================================== */ .fullscreen-menu-nav a { font-size: min(clamp(30px, 5.6vw, 100px), 7vh); line-height: 1.2; } /* The index numbers ride along with the labels so the pairing stays proportional instead of drifting apart at the extremes. */ .fullscreen-menu-nav .num { font-size: min(clamp(11px, 1.35vw, 16px), 1.6vh); width: min(clamp(28px, 4.2vw, 50px), 4.9vh); } /* Landscape phones are the tightest case: very wide, very short. Tighten the row rhythm so the vertical budget goes to the type rather than the gaps. */ @media (max-height: 500px) and (orientation: landscape) { .fullscreen-menu-nav a { line-height: 1.1; } } /* ============================================================================ 7. FOOTER BOTTOM-BAR NAV: ALIGNMENT AND WRAPPED-ROW SPACING ---------------------------------------------------------------------------- The six links in the footer bottom bar (Home / About / Works / Case Study / Faq's / Contact) had two separate problems. ALIGNMENT. Every link carries the mr-30px utility, including the last one, so there was always 30px of margin hanging off the end of the row. The column is display:flex + justify-content:end, so that trailing margin pushed the visible text 30px in from the right edge: the last link ended 42px inside the container while the copyright line on the left sits 12px in. That 30px difference is the shift. Below 769px style.css centres the footer instead, where the same trailing margin offset each row ~15px left of true centre. WRAPPED-ROW SPACING. On phones the six links wrap to two rows (3 + 3 at 320-375px). Section 2 of this file grows the tap area with 15px of vertical padding cancelled by -15px margins - which works for a single row, but the negative margins mean the LINE box stays 17px tall while the CLICKABLE box is 47px tall. Two rows 17px apart with 47px hit boxes overlap by 30px, so a tap meant for the second row could land on the first. That is the "not clickable" part, and it only reproduces on a touch device, because the padding lives behind a (pointer: coarse) query. Fix: lay the row out with flex gaps instead of per-link margins, and give the links real box height on touch rather than padding plus negative margins. Gaps cannot leave a trailing margin, and real height cannot overlap. ========================================================================== */ /* Selected structurally rather than via the row's margin utility: every page uses `row mt-20px` for this bar except about.html, which uses `row mt-40px`. This combination appears exactly once per page, always in the footer. */ footer .col-md-6.d-flex.justify-content-end > .fs-14 { display: flex; flex-wrap: wrap; justify-content: flex-end; /* Matches the 30px the mr-30px utility was providing between links. */ column-gap: 30px; row-gap: 14px; } /* Spacing is owned by the gaps above now, so both the utility margin and the section 2 padding trick are cleared here. !important is needed because both of those are themselves declared !important. */ footer .col-md-6.d-flex.justify-content-end > .fs-14 > a { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; } /* style.css centres the footer at 768px and below, so follow it - otherwise the rows would stay right-aligned under centred copyright text. */ @media (max-width: 768px) { footer .col-md-6.d-flex.justify-content-end > .fs-14 { justify-content: center; } } /* Touch devices: a real 44px-tall box per link. Because the height is now in the layout rather than in cancelled padding, consecutive rows stack with a genuine gap between them instead of overlapping by 30px. */ @media (hover: none) and (pointer: coarse) { footer .col-md-6.d-flex.justify-content-end > .fs-14 { row-gap: 6px; } footer .col-md-6.d-flex.justify-content-end > .fs-14 > a { min-height: 30px; } } /* ============================================================================ Mobile compositing fix: backdrop-filter ---------------------------------------------------------------------------- Symptom on phones: content below the video banner renders white, and scrolling back up blanks sections that had already painted correctly. Cause: backdrop-filter. To blur what sits behind an element, the compositor must read back the pixels underneath it on every paint. Over a playing