(the overlay carries the same source for SEO/lightbox). We rebuild a compact wrapping grid and contain each thumbnail. IMPORTANT: scoped to column-4/5/6 (many-item logo strips). column-3 galleries are the 3-up image SHOWCASES on the web-design pages — they render fine as-is, so they are deliberately left untouched. */ /* scoped to #dmRoot (the ) so it matches galleries on BOTH standard pages (#dm_content) and landing-template pages (.dmContent). */ #dmRoot .photogallery-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 14px 26px !important; width: 100% !important; } #dmRoot .photogallery-column:is(.column-4, .column-5, .column-6) { width: auto !important; flex: 0 0 auto !important; float: none !important; margin: 0 !important; } #dmRoot .photogallery-column:is(.column-4, .column-5, .column-6) :is(.photoGalleryThumbs, .thumbnailInnerWrapper, .image-container) { width: auto !important; height: auto !important; max-width: 150px !important; } /* Render exactly ONE logo per cell. Duda's gallery cell shows the image as a background on a

AND keeps an overlay (normally display:none via the runtime) — statically BOTH render → ghost/double logos. Show the (predictable object-fit sizing) and kill the duplicate background. */ #dmRoot .photogallery-column:is(.column-4, .column-5, .column-6) [style*="background-image"] { background-image: none !important; width: auto !important; height: auto !important; } #dmRoot .photogallery-column:is(.column-4, .column-5, .column-6) .photoGalleryThumbs img { display: block !important; max-width: 140px !important; max-height: 58px !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; } /* Older Duda accordion (.accordion-wrapper, e.g. digital-public-relations, how-to-build- lazada-store): its runtime collapse was stripped, so every .accordion-description renders expanded into a wall of text. Collapse by default; PortLayout's inline JS toggles .port-acc-open on the clicked item. */ #dmRoot .accordion-wrapper .accordion-description { display: none !important; } #dmRoot .accordion-wrapper .accordion-item.port-acc-open .accordion-description { display: block !important; } #dmRoot .accordion-wrapper .accordion-title { cursor: pointer; } /* --------------------------------------------------------------------------- RESPONSIVE FIX. Duda's runtime swaps the to dmMobileBody/dmTabletBody per device; the static desktop port is stuck on dmDesktopBody, whose `.dmInner { min-width: 960px }` floor forces a 960px canvas on phones and keeps the min-width:768/1025 media queries firing — so the mobile-first grid (small-12 => 100%) and m-font-size rules never engage. Releasing the floor lets Duda's own responsive CSS take over. ------------------------------------------------------------------------- */ #dmRoot .dmInner, #dmRoot.dmDesktopBody .dmInner, #dmStyle_innerContainer { min-width: 0 !important; } html, body, #dmRoot, #dm, #dmStyle_outerContainer, #dmStyle_innerContainer, .dmOuter, .dmInner { max-width: 100% !important; } /* sticky header inner also carries a 768 floor */ #dm .hasStickyHeader .dmInner div#desktopHeaderBox, #dm .hasStickyHeader .dmInner div.dmHeaderContainer { min-width: 0 !important; } /* MOBILE DRAWER: Duda's runtime (stripped) used to toggle the hamburger drawer. PortLayout re-adds a tiny toggle that sets .port-open; this slides it in. */ #dmRoot #dm #hamburger-drawer.port-open { transform: translateX(0) !important; } html.port-drawer-open, html.port-drawer-open body { overflow: hidden !important; } /* --------------------------------------------------------------------------- MOBILE POLISH (phones). Tame Duda's oversized display type and stop narrow multi-column rows from cramming tighter than 2-up. ------------------------------------------------------------------------- */ @media (max-width: 600px) { /* Duda's mobile m-font-size-* classes are gated by dmMobileBody (never applies in the static port), so the DESKTOP font-size-*/size-* wins on mobile → giant headings that wrap one-letter-per-line. Clamp the desktop size classes directly. (Exact class tokens, so body sizes like size-14/16/18 are untouched.) */ /* Tier A — very large display (80px+) */ #dm .font-size-200,#dm .size-200,#dm .font-size-180,#dm .size-180, #dm .font-size-150,#dm .size-150,#dm .font-size-130,#dm .size-130, #dm .font-size-120,#dm .size-120,#dm .font-size-110,#dm .size-110, #dm .font-size-100,#dm .size-100,#dm .font-size-96,#dm .size-96, #dm .font-size-90,#dm .size-90,#dm .font-size-84,#dm .size-84, #dm .font-size-80,#dm .size-80 { font-size: clamp(2.1rem, 10.5vw, 3.1rem) !important; line-height: 1.08 !important; } /* Tier B — large (56–79px) */ #dm .font-size-76,#dm .size-76,#dm .font-size-72,#dm .size-72, #dm .font-size-70,#dm .size-70,#dm .font-size-68,#dm .size-68, #dm .font-size-66,#dm .size-66,#dm .font-size-64,#dm .size-64, #dm .font-size-62,#dm .size-62,#dm .font-size-60,#dm .size-60, #dm .font-size-58,#dm .size-58,#dm .font-size-56,#dm .size-56 { font-size: clamp(1.8rem, 8.5vw, 2.6rem) !important; line-height: 1.12 !important; } /* Tier C — medium-large (44–55px) */ #dm .font-size-55,#dm .size-55,#dm .font-size-54,#dm .size-54, #dm .font-size-52,#dm .size-52,#dm .font-size-50,#dm .size-50, #dm .font-size-48,#dm .size-48,#dm .font-size-46,#dm .size-46, #dm .font-size-45,#dm .size-45,#dm .font-size-44,#dm .size-44 { font-size: clamp(1.55rem, 6.5vw, 2.05rem) !important; line-height: 1.18 !important; } /* (heading sizing is also enforced by a small JS cap in PortLayout — see capBigText — which caps only oversized text DOWN, so small eyebrow headings are never enlarged) */ /* the stuck dmDesktopBody class forces large-* column widths regardless of viewport, so Duda's mobile-first small-* grid never wins. On phones collapse every column to single-column (Duda's mobile intent), keeping small-6 as 2-up. */ /* the flex column wrapper is nowrap by default, so columns just shrink to fit one row instead of stacking — force it to wrap */ #dmRoot .dmRespColsWrapper { flex-wrap: wrap !important; } #dmRoot .dmRespCol { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } #dmRoot .dmRespCol[class*="small-6"] { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } /* Pipedrive CTA form sits in a nested 2-column section; on mobile the nesting + Pipedrive's load-time iframe sizing squeeze it to ~130px (functional but cramped). Give the form's ancestor chain a STABLE viewport-based width (applied in , before the async loader measures the container) so Pipedrive renders the form usably wide. box-sizing+padding:0 keep it within the viewport (no horizontal overflow). */ #dmRoot .dmRespCol:has(.pipedriveWebForms), #dmRoot .dmRespColsWrapper:has(.pipedriveWebForms), #dmRoot .dmCustomHtml:has(.pipedriveWebForms) { width: 86vw !important; max-width: 360px !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } #dmRoot .pipedriveWebForms, #dmRoot .pipedriveWebForms iframe { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* never auto-hyphenate (it was breaking display type as "book-ings"/"de-mand"); only break a word if it genuinely can't fit */ #dmRoot #dm * { hyphens: none !important; -webkit-hyphens: none !important; } #dmRoot #dm .dmRespCol * { overflow-wrap: break-word; word-break: normal; } /* headings must NOT break mid-word (caused "Reputa/tion"); the size clamps above keep them fitting */ #dmRoot #dm h1, #dmRoot #dm h2, #dmRoot #dm h3, #dmRoot #dm h4 { overflow-wrap: normal !important; word-break: keep-all !important; } /* text widgets that collapse to their 25px min-width floor inside full-width columns (a Duda per-element width resolves to ~0 on mobile → "1 character per line") */ #dmRoot #dm .dmNewParagraph { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* --------------------------------------------------------------------------- BLOG READING (desktop): the ported article body inherits Duda's cramped line-height / paragraph rhythm. Give articles a comfortable reading measure and vertical rhythm without touching the hero or layout columns. Scoped to .port-article (set by PortLayout for blog pages). ------------------------------------------------------------------------- */ .port-article #dm_content p, .port-article #dm_content li { line-height: 1.85 !important; font-size: 1.0625rem !important; /* ~17px, up from cramped default */ letter-spacing: 0.002em; } .port-article #dm_content .dmNewParagraph p { margin-bottom: 0.9em !important; } /* breathing room between stacked paragraph widgets / sections */ .port-article #dm_content .dmNewParagraph, .port-article #dm_content .dmRespRow { margin-bottom: 0.6rem; } .port-article #dm_content h2, .port-article #dm_content h3 { line-height: 1.25 !important; margin-top: 1.4em !important; margin-bottom: 0.4em !important; } .port-article #dm_content li { margin-bottom: 0.5em !important; } /* =========================================================================== ACCESSIBILITY (non-visual): skip link, visible focus rings, reduced motion. Contrast + heading-order are inherited from the source design and left as-is (changing them alters the 1:1 look) — see AUDIT-REPORT.md. =========================================================================== */ .port-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--navy, #162250); color: #fff; padding: 0.7rem 1.1rem; border-radius: 0 0 6px 0; font-family: var(--font-sans, sans-serif); font-weight: 600; } .port-skip:focus { left: 0; } #dmRoot a:focus-visible, #dmRoot button:focus-visible, #dmRoot input:focus-visible, #dmRoot textarea:focus-visible, #dmRoot select:focus-visible, #dmRoot [tabindex]:focus-visible, .port-skip:focus-visible { outline: 3px solid var(--color_5, #e0641a) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { #dmRoot *, #dmRoot *::before, #dmRoot *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }