/* ========================================================================== AcmaCorp Mobile Density -------------------------------------------------------------------------- Load order: last. Measured problem: pages ran 8–10 screens tall on a 390×844 phone, and mobile was up to 1.85× the desktop height because every card grid collapsed to a single stacked column. On /professional-services/staff-augmentation/ (the template behind 53 pages) two sections alone accounted for 4,193px of 8,665: .help-section 2,256px — 8 cards stacked .related-insights-section 1,937px — 3 cards stacked Fix: horizontal scroll-snap carousels on mobile. CSS-only — native momentum scrolling, no JS, no library, and the cards stay in the DOM in order so keyboard and screen-reader users are unaffected. ========================================================================== */ @media (max-width: 767px) { /* ---- the carousel primitive ---------------------------------------- */ .content-cards-list, .insights-listing-wrapper > ul, .articles-listing-wrapper > ul, .icon-text-cards-block{ display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: var(--ds-space-4, 16px); /* Bleed to the screen edges so the next card peeks — the affordance that tells people it scrolls. The bleed must match the container's REAL gutter. Every template's .wrapper is padded 15px at mobile, not the design system's nominal 16px, so bleeding by --ds-container-pad overshot by 1px each side and pushed the page 1px wide (measured on /insights/ at 375px). */ margin-inline: calc(var(--ds-carousel-bleed, 15px) * -1); padding-inline: var(--ds-carousel-bleed, 15px); scroll-padding-inline: var(--ds-carousel-bleed, 15px); padding-bottom: var(--ds-space-2, 8px); scrollbar-width: none; } .content-cards-list::-webkit-scrollbar, .icon-text-cards-block::-webkit-scrollbar, .insights-listing-wrapper > ul::-webkit-scrollbar, .articles-listing-wrapper > ul::-webkit-scrollbar{ display: none; } /* ---- the slides ------------------------------------------------------ */ .content-cards-list > *, .icon-text-cards-block > *, .insights-listing-wrapper > ul > li, .articles-listing-wrapper > ul > li { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; margin: 0; } /* ---- scroll affordance ----------------------------------------------- */ .content-cards-block, .insights-listing-wrapper, .articles-listing-wrapper { position: relative; } .content-cards-list::after, .insights-listing-wrapper > ul::after, .articles-listing-wrapper > ul::after { content: ""; flex: 0 0 var(--ds-space-1, 4px); } .content-card { padding: var(--ds-space-4, 16px); } .content-card p:last-child { margin-bottom: 0; } /* The internal banner stacked image + copy with generous desktop spacing. */ .internal-banner-content { padding-block: var(--ds-space-4, 16px); } /* Accordion/tab drawers: tighten the touch rows without going under 48px. */ .tab-drawer-heading { min-height: 48px; padding-block: var(--ds-space-3, 12px); } /* Event / CTA blocks */ .event-card-section-content { padding: var(--ds-space-5, 24px); } } /* ========================================================================== REDUCED MOTION scroll-snap is fine, but stop smooth-scroll chaining for those who opt out. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .content-cards-list, .insights-listing-wrapper > ul, .articles-listing-wrapper > ul { scroll-behavior: auto; } } /* PAGE TITLE FALLBACK -- retired. /global-location/ shipped with no

, and this rule dressed the stand-in the page grew instead. It set --ds-display-3, a section heading's size, on a page heading, so the title was 8px smaller than the h1 on every other inner page. The page has a real banner now and the class is gone with it. */ /* ========================================================================== PHASE 1 — SW-1: FOOTER HEIGHT The footer measured 1,145px at 375px on every page: 1.4 screens of chrome before a visitor reaches anything page-specific. On /thank-you/ it was 69% of the document, on /global-location/ 48%, on /our-work/ 47%. The link columns already collapse to accordions, which is right. The height was going elsewhere: a full-bleed word-mark repeating the sticky header's logo, 76px accordion rows, and desktop padding carried down unchanged. Nothing here deletes copy — the "Join our team" sentence is the value proposition for the button beside it, so it stays and the spacing tightens around it instead. ========================================================================== */ @media (max-width: 767px) { /* The word-mark was rendering full-bleed at 345x78. The header is sticky and carries the logo permanently, so this is a sign-off, not identification: scale it to a mark rather than a banner. */ .site-footer .footer_logo_bottom { max-width: 148px; padding-top: var(--ds-space-3, 12px); } /* 40px of desktop rhythm below the last footer block. */ .site-footer .footer-top { padding-bottom: var(--ds-space-5, 24px); } /* The accordion group carried 36px of lead-in from the tablet breakpoint, plus a 15px margin from the nav element itself. */ .site-footer .footer-top .footer-links .footer-menu-1 { padding-top: var(--ds-space-3, 12px); margin-top: 0; } /* Rows were 76px each (24px uppercase on a 41px line, plus 35px of padding), then 19px here -- a size that sat on no scale step, set only for this breakpoint. The column headings now carry the shared footer subhead role at every width, so only the row height is a mobile concern: the padding keeps the accordion row clear of the 44px touch minimum. */ .site-footer .footer-top .footer-links .footer-menu-1 .ft-links-col h2 { padding: 15px 0 16px 0; } /* Join Our Team: the headline and its sentence were spaced for a desktop column. The sentence stays -- it is the value proposition for the button beside it -- but the rhythm around it closes up. */ .site-footer .footer-top .join-team .join-team-left { padding-bottom: var(--ds-space-3, 12px); } .site-footer .footer-top .join-team .join-team-left h2 { line-height: var(--ds-leading-snug); margin-bottom: var(--ds-space-2, 8px); } .site-footer .footer-top .join-team .join-team-left p { margin-bottom: var(--ds-space-4, 16px); } .site-footer .footer-top .join-team .viewmore_list { margin-top: var(--ds-space-5, 24px); } /* Stay Connected: a 24px heading on a 41px line with 10px of padding either side came to 61px for one word. */ .site-footer .footer-top .social-media { padding-top: var(--ds-space-4, 16px); } .site-footer .footer-top .social-media .social-media-top h2 { line-height: var(--ds-leading-snug); padding-top: 0; padding-bottom: 0; } /* The copyright's two lines were carrying block margins on top of a line-height of 1. */ .site-footer .footer-bottom .footer-copy-nav .copy-right p { margin: 0 0 6px; } .site-footer .footer-bottom .footer-copy-nav .copy-right p:last-child { margin-bottom: 0; } /* Bottom bar: 24px of padding and 19px under each stacked block. */ .site-footer .footer-bottom { padding-top: var(--ds-space-4, 16px); padding-bottom: var(--ds-space-4, 16px); } .site-footer .footer-bottom .footer-copy-nav .copy-right, .site-footer .footer-bottom .footer-copy-nav .lang-switcher { padding-bottom: var(--ds-space-3, 12px); } /* ---- what the first pass left behind ------------------------------------ Two things, both measured after the pass above landed the footer at 976px. 112px of empty black above "JOIN OUR TEAM" -- desktop's approach distance carried down untouched, and on a phone it is a full screen-eighth of nothing between the last section and the first word of the footer. The section above already ends on its own padding, so 48 is the whole separation this needs. */ .site-footer { padding-top: var(--ds-space-8, 48px); } /* The legal row wraps to two 44px lines and stays that way: SW-9 reserves 68px on its right so "Sitemap" clears the chat launcher, and the four labels cannot fit one row inside what is left. The 15px the row carried from the tablet breakpoint on top of that is not doing anything. */ .footer-bottom .footer-nav { margin-top: var(--ds-space-2, 8px); } /* ---- the bottom bar never lined up with the footer above it ------------- Measured at 390: every row in .footer-top starts at x=16 -- the heading, the sentence, the button, the accordion rows, the social icons, the locations link. Every row in .footer-bottom starts at x=36, because the bar is padded twice, 20px on itself and 16 again on the .wrapper inside it. And within the bar the copyright and the locale are centred while the legal links are left-aligned, so the three rows do not agree with each other either. One edge for the whole footer: 16px, left, the same as everything above. */ .site-footer .footer-bottom { padding-left: var(--ds-space-4, 16px); padding-right: var(--ds-space-4, 16px); } .site-footer .footer-bottom > .wrapper { padding-left: 0; padding-right: 0; } .site-footer .footer-bottom .footer-copy-nav .copy-right, .site-footer .footer-bottom .footer-copy-nav .copy-right p, .site-footer .footer-bottom .footer-copy-nav .lang-switcher { text-align: left; } .site-footer .footer-bottom .footer-copy-nav .copy-right { justify-content: flex-start; } .site-footer .footer-bottom .footer-copy-nav .lang-switcher a { justify-content: flex-start; } /* style.css spreads the legal links with `space-between`, which was reading as alignment while the rows above were centred. Left-aligned, it stops being spacing and starts being a ragged gap: "Terms of Use" to "Legal Notice" stretched across 282px with "Sitemap" alone underneath. A plain gap groups them as the one list they are. */ .site-footer .footer-bottom .footer-copy-nav .footer-nav .menu ul { justify-content: flex-start; column-gap: var(--ds-space-5, 24px); } /* The rule that used to sit here pulled the "More links" glyph to the left margin, for a design where the plus was a bare mark aligned with the accordion rows below it. The control is a centred disc now, so that pull put the plus 11px off the centre of its own circle -- on mobile only, which is why it read as a wonky icon rather than a layout rule. */ } /* ========================================================================== PHASE 1 — SW-5: 44px TOUCH TARGETS 16 links per page measured under 44px tall, and 66 on /sitemap/. They clear the WCAG 2.5.8 AA floor of 24x24, so this is not a compliance failure -- but they sit well under the 44px both Apple and Google publish, and they are the links a visitor reaches for one-handed at the end of a long page. The pattern throughout is a 44px hit area with the ink sitting inside it, so nothing grows visually. ========================================================================== */ @media (max-width: 1023px) { /* Footer legal row: Terms of Use / Privacy / Legal Notice / Sitemap, 24px. */ .site-footer .footer-bottom .footer-nav .menu ul li a { display: inline-flex; align-items: center; min-height: 44px; } /* Footer link columns and the More Links panel: 30px rows. */ .site-footer .footer-top .footer-links .footer-menu-1 .ft-links-col ul li a, .site-footer .footer_pages .footer_pages_list a { display: inline-flex; align-items: center; min-height: 44px; } /* Language switcher in the bottom bar. */ .site-footer .footer-bottom .lang-switcher .language_ces { display: inline-flex; align-items: center; min-height: 44px; } } is declared twice in style.css (:18646 inside max-width 1599px, :19820 inside max-width 479px), so it applies at every mobile width. On a 375px screen that is a quarter of a screen of empty space between the partner logos and whatever follows. The desktop value is deliberate and is left alone. ========================================================================== */ /* ========================================================================== PHASE 1 — P-05: JOB / SOLUTION ACCORDION ROWS Two problems measured at 375px. The panel's open state came from a jQuery inline display, so ui-enhancements.js can clear it but cannot reliably keep it clear -- driving display from .active instead makes the class the single source of truth. And closed rows sat at opacity 0.4, which on the dark ground read as disabled rather than tappable. ========================================================================== */ @media (max-width: 767px) { /* .active decides, not an inline style. */ .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li > .custom-accordion-panel { display: none; } .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li.active > .custom-accordion-panel { display: block; } /* Closed rows are links, not disabled text. */ .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li h3 { opacity: 0.78; } /* A chevron so the row reads as expandable. Drawn from a border rather than an image so it inherits the heading colour in both states. */ .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li > h3 { position: relative; padding-right: 34px; } .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li > h3::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.18s ease; } .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li.active > h3::after { transform: rotate(-135deg); margin-top: -2px; } /* The row is the control, so give it a comfortable target. */ .accordion-section .custom-accordion .custom-accordion-left .accordion-list > li > h3 { min-height: 44px; } } /* ========================================================================== SERVICE CARDS — retired. This block gave .content-card a second, phone-only appearance: a flat white box with a 1px border, a 16px radius and a 3px orange bar across its top edge. It described a card that had "no background, no border and no radius" on mobile, which stopped being true when the card became the bezelled plate. None of it rendered. Measured at 390px, .content-card resolves to the same plate as desktop -- rgba(255,255,255,.55), 26px radius, 6px tray, the three stacked navy shadows -- because `main :is(section, .section) .content-card` in sections.css outranks a bare `.content-card` here. The top accent never painted either: sections.css sets `.content-card::before { content: none }` at (0,4,1) against this rule's (0,1,1), so the pseudo-element generated no box at all. So this was a third card treatment that could not apply, and the plate is the card on both widths. The spacing rules below it are real and stay. ========================================================================== */ @media (max-width: 767px) { .content-card .icon-svg { margin-bottom: var(--ds-space-4, 16px); } .content-card h4 { margin-bottom: var(--ds-space-2, 8px); } .content-card p:last-child { margin-bottom: 0; } /* The template prints two empty .field_call_to_action divs inside every tab panel; the wrapper reserved 30px for nothing. */ .tab-content .cta-group:empty, .tab-content .cta-group:has(> .field_call_to_action:empty:only-child), .tab-content .cta-group > .field_call_to_action:empty { display: none; } } /* ========================================================================== PHASE 2 — THE CLAMP PRIMITIVE Long CMS prose inside a panel or a slide is the substance of the page, so it is never truncated -- it is folded behind a control the reader can open. ui-enhancements.js adds .acma-clamp and the button only when the block is actually taller than the budget, so short copy is left alone entirely. Runs to 1023px, matching ui-enhancements.js: the blocks it folds are all taller at 768 than at 375 or 1440, because their two-column layout starts before the column is wide enough for the copy. ========================================================================== */ @media (max-width: 1023px) { .acma-clamp { position: relative; overflow: hidden; max-height: var(--acma-clamp-max, 260px); } .acma-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--acma-clamp-fade, #FFFFFF) 92%); } .acma-clamp.is-open { max-height: none; } .acma-clamp.is-open::after { content: none; } .acma-clamp-toggle { display: inline-flex; align-items: center; gap: var(--ds-space-2, 8px); min-height: 44px; margin-top: var(--ds-space-2, 8px); padding: 0; border: 0; background: none; /* `font: 600 1rem/1.4 inherit` is invalid -- inherit is not a family -- so the whole shorthand was dropped and the button fell back to the UA default of 13.33px. Set the parts instead. */ font-family: inherit; font-size: var(--ds-text-sm, 1rem); /* The scale has no 600; 500 plus the rust colour carries the emphasis. */ font-weight: var(--ds-weight-medium, 500); line-height: var(--ds-button-leading); color: var(--ds-primary, #B65002); cursor: pointer; } .acma-clamp-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; } .acma-clamp-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); } .acma-clamp-toggle:focus-visible { outline: 2px solid var(--ds-primary, #B65002); outline-offset: 3px; } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .acma-clamp-toggle::after { transition: none; } } /* ========================================================================== PHASE 2 — P-06: THE PANEL REPEATS ITS OWN DRAWER HEADING page-service1.php renders content_2_listing_heading twice: once as the

the reader taps, and again as an

at the top of the panel it opens. On desktop the drawer headings are hidden and the tab strip is used instead, so the h4 is the panel's only label -- but on mobile the two sit directly on top of each other, costing ~60px of pure repetition on all 53 service pages. Hidden visually only. The drawer heading above it is a real

, so the panel keeps a heading in the accessibility tree either way. Not on the homepage. .acma-tabs is excluded because there the drawer heading is the product name ("AcmaTel CCS") and the h4 is the panel's proposition ("Run the whole contact centre from one console") -- two different lines, so hiding one is losing copy rather than removing a repeat. ========================================================================== */ @media (max-width: 767px) { .tab-content-section:not(.acma-tabs) .tab-content .tab-content-left > h4, .tab-content-section:not(.acma-tabs) .tab-content .tab-content-left > .tab-panel-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } /* ========================================================================== PHASE 2 — P-04: INDUSTRY STORY SLIDES WERE TWO SCREENS EACH Measured on /industry_served/healthcare/ at 375px: each slide was 1,488px -- image 297px plus 1,191px of content, of which the challenge/solution/ results block alone was 1,064px. A swipe carousel whose slide is taller than the viewport is the worst of both patterns: the reader cannot see a slide, and the vertical reading fights the horizontal gesture. The copy is folded behind the clamp primitive rather than cut, and the slide image is capped so the headline and the first line of the story share the first screen. ========================================================================== */ @media (max-width: 767px) { .content-slider-section .slider .slider-image img { height: 190px; width: 100%; object-fit: cover; border-radius: var(--ds-radius-md, 12px); } .content-slider-section .slider .slider-content { padding-top: var(--ds-space-4, 16px); } } /* ========================================================================== PHASE 2 — P-03: "WHO IS IT FOR?" WAS UNREADABLE ON THE ORANGE HALF .accordion-section paints linear-gradient(90deg, #000 0%, #FF7F1F 50%) -- a background composed for a wide viewport, where the dark half sits behind the copy and the orange half is empty space. Squeezed into 375px the copy crosses both halves, so white headings ran at roughly 2:1 over the orange. #FF7F1F cannot carry white text anywhere (2.53:1). The brand's own darker rust can: white on #B65002 measures about 6:1, which passes AA for body text and comfortably for the 28px headings used here. So mobile gets a flat rust ground rather than losing the section's orange identity, and the headings go back to full opacity. Scoped away from .job-list, which uses the same accordion on a light ground. Desktop keeps the gradient. ========================================================================== */ /* ========================================================================== PHASE 2 — P-07: THE CONTACT FORM'S LABELS AND TEXTAREA style.css sets `form .form-control-wrap label { position: absolute; top: -20px; background: surface; margin: 0 10px; padding: 5px 15px 0 5px }`, with a second rule moving it to -25px at one breakpoint. The result is an opaque chip sitting half over the field's top border, landing differently on the fields whose wrapper is nested one level deeper -- which is why "Phone Number" and "Region of Interest" looked unlike "First Name". conversion.css already asks for a plain block label but loses on specificity: `.form-control-wrap > label` is (0,1,1) against (0,1,2). This matches (0,1,2) from a later stylesheet, so it wins the tie. Mobile only -- the desktop form is unchanged. ========================================================================== */ @media (max-width: 767px) { form .form-control-wrap label { position: static; background: none; margin: 0 0 var(--ds-space-1, 4px); padding: 0; border-radius: 0; font-size: var(--ds-text-xs, .875rem); font-weight: var(--ds-weight-medium, 500); line-height: var(--ds-leading-snug); cursor: pointer; } /* The markup is then