/* ===================================================== MOBILE RESPONSIVE MASTER DBot Landing Page — Delta Electronics EMEA Created: 2026-07-31 Purpose: Non-destructive responsive overrides for ALL pages. Must be loaded LAST in every . Breakpoints: ≤1199px — large tablet / small laptop ≤1023px — tablet landscape ≤767px — tablet portrait / phone ≤479px — small phone Desktop (≥1200px) is NEVER touched. ===================================================== */ /* ===================================================== SECTION 1 — CSS Custom Property Overrides (tokens) ===================================================== */ @media (max-width: 1023px) { :root { --gutter-x: clamp(1rem, 4vw, 2.5rem) !important; --nav-height: 72px !important; --nav-height-mobile: 72px !important; --nav-height-desktop: 72px !important; } } @media (max-width: 767px) { :root { --gutter-x: clamp(0.875rem, 4vw, 1.5rem) !important; /* 72px (not the previous 64px) so the ~49px-tall logo — whose min-width cascade from navigation-menu-fixes.css wins over this file's own max-width cap — has room to breathe instead of nearly filling the bar. */ --nav-height: 72px !important; --nav-height-mobile: 72px !important; } } /* ===================================================== SECTION 2 — Global Resets for Mobile ===================================================== */ @media (max-width: 1023px) { html, body { overflow-x: hidden !important; } /* background-attachment:fixed is unreliable on mobile browsers (notably iOS Safari) — the fixed gradient can fail to extend across the full scrollable page, letting the stray --bg-color:#f1f1f1 fallback (set by an unrelated leftover body{} rule elsewhere in style.css) show through as a near-white band on sections with no background of their own, making white icon/text content on them unreadable. */ body { background-attachment: scroll !important; } /* Prevent any section from creating horizontal scroll */ section, .section, .container-inner, main > * { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Ensure images never overflow */ img { max-width: 100% !important; height: auto !important; } /* Body font scale for tablet */ body { font-size: 16px !important; } } @media (max-width: 767px) { body { font-size: 15px !important; } /* Fluid heading sizes */ h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; line-height: 1.15 !important; } h2 { font-size: clamp(1.3rem, 5vw, 2rem) !important; line-height: 1.2 !important; } h3 { font-size: clamp(1.1rem, 4vw, 1.5rem) !important; line-height: 1.25 !important; } /* Bottom-line underline width cap on mobile */ h1.bottom-line::after, h2.bottom-line::after { width: 50% !important; height: 5px !important; } /* Global section vertical padding */ section, .section { padding-top: clamp(2rem, 6vw, 3rem) !important; padding-bottom: clamp(2rem, 6vw, 3rem) !important; } } /* ===================================================== SECTION 3 — Navigation ===================================================== */ /* --- Tablet & mobile: show hamburger, hide desktop links --- */ @media (max-width: 1023px) { /* Keep the nav at the right height */ nav { height: var(--nav-height-mobile) !important; padding: 10px 0 !important; } /* Container: logo left, toggle right */ nav .container-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-left: clamp(1rem, 4vw, 2rem) !important; padding-right: clamp(1rem, 4vw, 2rem) !important; max-width: 100% !important; gap: 0 !important; } /* Logo sizing */ nav .logo { max-width: 130px !important; flex-shrink: 0 !important; } /* Hamburger button */ .menu-toggle { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 8px !important; border-radius: 6px !important; background: transparent !important; border: none !important; cursor: pointer !important; position: relative !important; z-index: 10010 !important; flex-shrink: 0 !important; } .menu-toggle span { display: block !important; width: 26px !important; height: 3px !important; background: #fff !important; border-radius: 3px !important; transition: transform .3s ease, opacity .3s ease !important; } .menu-toggle span + span { margin-top: 5px !important; } .menu-toggle.active span:nth-child(1), .menu-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; } .menu-toggle.active span:nth-child(2), .menu-toggle.is-active span:nth-child(2) { opacity: 0 !important; } .menu-toggle.active span:nth-child(3), .menu-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; } /* Desktop link list: hidden until toggled */ nav .links { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(1, 16, 71, 0.97) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding-top: clamp(80px, 12vh, 110px) !important; gap: 0 !important; overflow-y: auto !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 10005 !important; transition: opacity .3s ease, visibility .3s ease !important; } nav .links.active, nav.nav-open .links, .nav-block.nav-open .links { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important; } /* Mobile nav items */ nav .links .nav-item { width: 100% !important; text-align: center !important; margin: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } nav .links .nav-link { font-size: clamp(1rem, 3.5vw, 1.25rem) !important; font-weight: 600 !important; padding: 14px 20px !important; display: block !important; width: 100% !important; text-align: center !important; color: #fff !important; } nav .links .nav-link:hover { background: rgba(185, 235, 95, 0.12) !important; color: #b9eb5f !important; transform: none !important; } /* Dropdown menus inline on mobile */ nav .links .dropdown-menu { position: static !important; display: none !important; width: 100% !important; min-width: unset !important; box-shadow: none !important; border-radius: 0 !important; border-top: none !important; background: rgba(0, 100, 200, 0.15) !important; transform: none !important; visibility: visible !important; opacity: 1 !important; overflow: hidden !important; padding: 4px 0 !important; } nav .links .nav-item.open > .dropdown-menu, nav .links .nav-item.has-dropdown.open > .dropdown-menu { display: block !important; } nav .links .dropdown-menu > a, nav .links .dropdown-menu > .dropdown-item { padding: 11px 40px !important; font-size: 0.95rem !important; border-top: 1px solid rgba(255,255,255,0.06) !important; display: block !important; text-align: center !important; color: #cfe6ff !important; } nav .links .dropdown-menu > a:hover, nav .links .dropdown-menu > .dropdown-item:hover { color: #b9eb5f !important; background: rgba(255,255,255,0.06) !important; } /* Also handle the #popup-overlay variant */ nav .links-block #popup-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(1, 16, 71, 0.97) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding-top: clamp(80px, 12vh, 110px) !important; overflow-y: auto !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 10005 !important; transition: opacity .3s ease, visibility .3s ease !important; } nav.nav-open .links-block #popup-overlay, .nav-block.nav-open #popup-overlay, #popup-overlay.active { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important; } /* links-block: just the hamburger on mobile */ nav .links-block { display: flex !important; align-items: center !important; gap: 0 !important; margin-left: auto !important; } /* Body scroll lock when menu open */ body.menu-open { overflow: hidden !important; } } /* Push page content down by nav height on mobile */ @media (max-width: 1023px) { .main-content, .banner, .banner-ecosystem, .banner-material-handling, .slider-container, .slider-hero, main > section:first-child { padding-top: 0 !important; margin-top: 0 !important; } /* Add scroll padding so anchors don't hide under nav */ html { scroll-padding-top: var(--nav-height-mobile, 72px) !important; } } /* ===================================================== SECTION 4 — Hero Slider ===================================================== */ /* Restore slider on mobile (previously display:none) */ @media (max-width: 767px) { .slider-container { display: block !important; visibility: visible !important; height: auto !important; min-height: unset !important; padding-top: var(--nav-height-mobile, 64px) !important; } .slides { height: auto !important; min-height: unset !important; } /* Active slide: relative flow, vertically stacked */ .slide.active { position: relative !important; height: auto !important; min-height: unset !important; } /* All slides: allow stacking */ .slide { min-height: unset !important; } /* Slide content: column layout. dbot-series-improvements.css sets an UNSCOPED (applies on cobots.html, dbot-mar.html and dynamic.html alike) display:grid !important with a desktop 40%/60% column split and min-height:100vh !important. Without explicitly overriding `display` here too, that grid (and its 100vh floor) survives underneath this rule's flex-direction/min-height/ height changes, which have no effect on a grid container — so the hero stays pinned to a full-viewport-tall box on short phones, and vertical centering by its ancestor .container can push the image above the nav bar. */ .slide-content { display: flex !important; flex-direction: column !important; align-items: center !important; padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 5vw, 1.5rem) clamp(2rem, 7vw, 2.5rem) !important; gap: 1rem !important; max-width: 100% !important; max-height: none !important; min-height: unset !important; height: auto !important; } /* .container (the outermost hero wrapper on cobots.html/dbot-mar.html/ dynamic.html) also carries an unconditional height:75vh/100vh with flex centering; once its child shrinks to content height, centering a still-taller-than-viewport child pushes it partly above y:0. */ .container { height: auto !important; min-height: 0 !important; } /* dbot-series-improvements.css also applies an unconditional transform:scale(1.1) to the hero robot image "for better presence". With the default center transform-origin that grows the image upward as well as downward, which was the last few px eating into the nav clearance above on short phones. Anchor growth to the top so it only expands downward. */ .slide-robot-image { transform-origin: top center !important; } /* Image first on mobile */ .slide-image-content { order: 1 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; transform: none !important; justify-content: center !important; } /* Text second */ .slide-text-content { order: 2 !important; width: 100% !important; max-width: 100% !important; text-align: center !important; padding: 0 !important; margin: 0 !important; min-width: unset !important; } .slide-text-content .text-area { align-items: center !important; text-align: center !important; padding: 0 !important; } /* dynamic.html hero uses a differently-named "-06" variant of the same slide-content/slide-image-content pattern above, but its own slide-text-content-06/.text-area classes aren't covered by the generic rules (different class string). .text-area's inline width:30vw (~117px on a phone) forces the heading and description into a near single-word-per-line wrap. */ .slide-text-content-06 { order: 2 !important; width: 100% !important; max-width: 100% !important; /* dbot-series-improvements.css sets an unconditional (no media query) padding-left:8rem !important "for text positioning" on desktop; that 128px was the true cause of the narrow, wrapped-looking text column above — not .text-area's own width. */ padding-left: 0 !important; } .slide-text-content-06 .container-inner { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; align-self: stretch !important; } .slide-text-content-06 .text-area { width: 100% !important; max-width: 100% !important; align-items: center !important; text-align: center !important; padding: 0 !important; } /* Robot image: constrained height */ .slide-robot-image { max-height: clamp(180px, 40vw, 260px) !important; width: auto !important; max-width: 90% !important; } /* Slide title */ .slide-title { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; text-align: center !important; } /* Slide description */ .slide-description { font-size: clamp(0.82rem, 3vw, 1rem) !important; line-height: 1.45 !important; margin-bottom: 0.75rem !important; text-align: center !important; } /* CTA button: centred on mobile */ .slide .button-frame, .slide a.button-frame { align-self: center !important; font-size: clamp(0.8rem, 3vw, 0.95rem) !important; padding: 0.65rem 1.2rem !important; } /* Remove inline padding from specific slide overrides */ .slide:nth-of-type(2) .slide-content, .slide:nth-of-type(3) .slide-content, .slide.active .slide-content { flex-direction: column !important; padding-left: clamp(1rem, 5vw, 1.5rem) !important; padding-right: clamp(1rem, 5vw, 1.5rem) !important; gap: 1rem !important; } .slide:nth-of-type(2) .slide-text-content, .slide:nth-of-type(3) .slide-text-content, .slide.active .slide-text-content, .slide:nth-of-type(2) .slide-image-content, .slide:nth-of-type(3) .slide-image-content, .slide.active .slide-image-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Navigation arrows: smaller on mobile */ .slider-nav .nav-btn, .nav-btn { width: 36px !important; height: 36px !important; } /* Flag container */ .slide > .de_flag_slider_container { justify-content: center !important; margin-right: 0 !important; } } /* Tablet (768–1023px): two-column but tighter */ @media (min-width: 768px) and (max-width: 1023px) { .slider-container { padding-top: var(--nav-height-mobile, 72px) !important; height: auto !important; min-height: 60vh !important; } .slide-content { flex-direction: row !important; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem) !important; gap: clamp(1rem, 3vw, 2rem) !important; max-height: none !important; } .slide-text-content { width: 50% !important; max-width: 50% !important; min-width: unset !important; } .slide-image-content { width: 50% !important; max-width: 50% !important; transform: none !important; } .slide-robot-image { max-height: clamp(260px, 38vh, 400px) !important; } .slide-title { font-size: clamp(1.3rem, 3.5vw, 2rem) !important; } .slide-description { font-size: clamp(0.85rem, 1.8vw, 1.05rem) !important; } } /* ===================================================== SECTION 5 — Introducing Blocks (text + image) ===================================================== */ @media (max-width: 767px) { /* Force column layout */ .introducing-block, .introducing-block.text-left, .introducing-block.text-right { flex-direction: column !important; align-items: center !important; padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 5vw, 1.5rem) !important; min-height: unset !important; } .introducing-block .text-area, .introducing-block.text-left .text-area, .introducing-block.text-right .text-area { width: 100% !important; max-width: 100% !important; padding: 0 0 1.2rem !important; order: 2 !important; } .introducing-block .img-area, .introducing-block.text-left .img-area, .introducing-block.text-right .img-area { width: 80% !important; max-width: 280px !important; order: 1 !important; margin: 0 auto 1rem !important; float: none !important; position: relative !important; right: auto !important; bottom: auto !important; } .introducing-block.end-block .img-area { position: relative !important; width: 70% !important; max-width: 240px !important; float: none !important; right: auto !important; bottom: auto !important; margin: 0 auto 1rem !important; } .introducing-block.end-block .text-area { width: 100% !important; padding: 0 !important; } /* Introducing block-info variant (used on index.html feature sections) */ .introducing-block-info { flex-direction: column !important; } .introducing-block-info .text-area, .introducing-block-info .text-area-2 { width: 100% !important; padding: 1rem !important; order: 2 !important; } .introducing-block-info .img-area { width: 100% !important; max-width: 100% !important; order: 1 !important; overflow: hidden !important; } /* Some cards (e.g. partner-ecosystem.html "Vision & Safety") carry an inline transform:translateX(...) that bleeds the image off the edge of a wide desktop layout. That transform must not survive onto the full-width mobile layout, or it pushes the image off-screen. */ .introducing-block-info .img-area img { max-height: 220px !important; object-fit: contain !important; margin: 0 auto !important; margin-left: auto !important; display: block !important; transform: none !important; } } @media (min-width: 768px) and (max-width: 1023px) { /* Tablet: keep side-by-side but tighten padding */ .introducing-block { padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem) !important; gap: 1.5rem !important; } .introducing-block .text-area { width: 50% !important; padding: 0 1rem 0 0 !important; } .introducing-block.text-right .text-area { padding: 0 0 0 1rem !important; } .introducing-block .img-area { width: 50% !important; } } /* ===================================================== SECTION 6 — Gradient / Feature / Stats Bar ===================================================== */ @media (max-width: 767px) { /* Gradient bar: stack items vertically */ .gradient-section { flex-direction: column !important; padding: 0 !important; } .gradient-section .item { width: 100% !important; padding: 12px 16px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.25) !important; text-align: center !important; } .gradient-section .item:last-child { border-bottom: none !important; } /* Gradient section inner text font sizes */ .gradient-section .item span:first-child { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; font-weight: 700 !important; } .gradient-section .item span:last-child { font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important; } } @media (min-width: 768px) and (max-width: 1023px) { .gradient-section { flex-wrap: wrap !important; } .gradient-section .item { flex: 1 1 50% !important; border-right: 1px solid rgba(255,255,255,0.25) !important; border-bottom: 1px solid rgba(255,255,255,0.25) !important; padding: 12px !important; } .gradient-section .item:nth-child(2n) { border-right: none !important; } .gradient-section .item:nth-last-child(-n+2) { border-bottom: none !important; } } /* ===================================================== SECTION 7 — What's New Carousel / Applications ===================================================== */ @media (max-width: 767px) { /* Carousel: full width, allow horizontal scroll */ .carousel { width: 100% !important; max-width: 100vw !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; } .carousel .carousel-track { flex-wrap: nowrap !important; } /* Applications icons: 2-column grid on mobile */ .applications .content { gap: clamp(10px, 3vw, 20px) !important; padding: 0 clamp(0.5rem, 3vw, 1rem) !important; } .applications .content .item-6 { flex: 0 1 calc(50% - 14px) !important; min-height: clamp(130px, 20vh, 180px) !important; } /* What's New section heading */ .whats-new .section-title, .whats-new h1, .whats-new h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; text-align: center !important; } /* Splide / carousel card width on mobile */ .splide__slide { width: clamp(260px, 75vw, 300px) !important; } } @media (min-width: 768px) and (max-width: 1023px) { .applications .content .item-6 { flex: 0 1 calc(33.33% - 14px) !important; } } /* ===================================================== SECTION 8 — Specifications Table (cobots.html) ===================================================== */ @media (max-width: 1023px) { /* Wrap the table in a scrollable container */ .specifications-section { padding: clamp(2rem, 5vw, 4rem) 0 !important; overflow: hidden !important; } .specifications-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 12px !important; max-width: 100% !important; } /* Add a hint that the table scrolls */ .specifications-table-container::after { content: '← Swipe to see more →'; display: block !important; text-align: center !important; font-size: 0.78rem !important; color: rgba(255,255,255,0.5) !important; padding: 6px 0 4px !important; letter-spacing: 0.02em !important; } /* Table itself: allow overflow via container */ .specifications-table { min-width: 640px !important; } /* Smaller header images in table */ .specifications-table th .spec-header img { width: 80px !important; height: 80px !important; } .specifications-table th { font-size: 13px !important; padding: 14px 10px !important; } .specifications-table td, .specifications-table th.spec-category { font-size: 13px !important; padding: 10px 8px !important; } } @media (max-width: 767px) { .specifications-table { min-width: 560px !important; } .specifications-table th .spec-header img { width: 60px !important; height: 60px !important; } .specifications-table th, .specifications-table td { font-size: 12px !important; padding: 8px 6px !important; } /* Regular table-block sections */ .table-block { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding: 8px 12px !important; } .table-block table { min-width: 480px !important; } } /* ===================================================== SECTION 9 — Ecosystem Pages ===================================================== */ /* Banner: fix hard-coded 8rem padding */ @media (max-width: 1199px) { .banner-ecosystem .container-inner { padding-left: clamp(1rem, 5vw, 3rem) !important; padding-right: clamp(1rem, 5vw, 2rem) !important; } } @media (max-width: 767px) { /* Hero banner: comfortable height */ .banner-ecosystem { min-height: 60vh !important; height: auto !important; align-items: flex-end !important; padding-bottom: 2rem !important; padding-top: calc(var(--nav-height-mobile, 64px) + 1rem) !important; } .banner-ecosystem .container-inner { padding-left: clamp(1rem, 5vw, 1.5rem) !important; padding-right: clamp(1rem, 5vw, 1.5rem) !important; } .banner-ecosystem .description { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; line-height: 1.1 !important; } .banner-ecosystem .description p { font-size: clamp(0.9rem, 3vw, 1.05rem) !important; } /* Material handling banner */ .banner-material-handling { padding-top: calc(var(--nav-height-mobile, 64px) + 1rem) !important; padding-left: clamp(1rem, 5vw, 1.5rem) !important; padding-right: clamp(1rem, 5vw, 1.5rem) !important; min-height: clamp(140px, 36vh, 260px) !important; } .banner-material-handling .container-inner { padding-left: clamp(1rem, 5vw, 1.5rem) !important; padding-right: clamp(1rem, 5vw, 1.5rem) !important; } /* Product grid: 1 column */ .product-grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1rem !important; } .product-card { width: 92% !important; max-width: 380px !important; margin: 0 auto !important; } /* Ecosystem card grid */ .ecosystem-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .ecosystem-card, .partner-card { width: 100% !important; max-width: 100% !important; } /* Content with sidebar: stack */ .content-with-sidebar { flex-direction: column !important; gap: 1rem !important; } /* Partner page hero text */ .banner2 .description, .banner2 h1 { font-size: clamp(1.3rem, 5.5vw, 2rem) !important; } /* Partner description text */ .partner-description { font-size: clamp(0.9rem, 3vw, 1rem) !important; line-height: 1.65 !important; padding: 0.75rem 0 !important; } } /* Ecosystem partner detail page (gripper-piab-kenos.html etc.) */ @media (max-width: 767px) { /* Info boxes */ .info-box, .info-box-row { flex-direction: column !important; gap: 1rem !important; } .info-box .item, .info-box-row .item { width: 100% !important; max-width: 100% !important; } } /* ===================================================== SECTION 10 — Leasing Options Page ===================================================== */ @media (max-width: 1023px) { /* Leasing hero */ .banner-ecosystem, .banner-leasing { min-height: 55vh !important; height: auto !important; align-items: center !important; } } @media (max-width: 767px) { /* Leasing cards: stack vertically */ .leasing-cards, .leasing-grid, .leasing-options-grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1.25rem !important; } .leasing-card, .leasing-option-card { width: 92% !important; max-width: 420px !important; margin: 0 auto !important; } /* Leasing comparison table */ .leasing-table-wrapper, .leasing-comparison { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .leasing-table, .leasing-comparison table { min-width: 480px !important; } /* Feature list inside leasing cards */ .leasing-card .features-list, .leasing-option-card .features-list { font-size: clamp(0.82rem, 2.8vw, 0.95rem) !important; line-height: 1.55 !important; } } /* ===================================================== SECTION 11 — FAQ Accordion ===================================================== */ @media (max-width: 767px) { /* FAQ section */ .faq, .faq-section, section.faq { padding: clamp(2rem, 6vw, 3rem) clamp(0.75rem, 4vw, 1.25rem) !important; } /* FAQ heading */ .faq h1, .faq-section h1, section.faq h1 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; margin-bottom: 1.5rem !important; } /* FAQ item / accordion */ .faq-item, .accordion-item, .faq .item { width: 100% !important; box-sizing: border-box !important; } /* FAQ question button: larger touch target */ .faq-item .faq-question, .faq-item .accordion-header, .faq-item summary, .accordion-item .accordion-header, .faq .item .question { font-size: clamp(0.9rem, 3.5vw, 1.05rem) !important; padding: 1rem 1.25rem !important; line-height: 1.35 !important; min-height: 54px !important; display: flex !important; align-items: center !important; cursor: pointer !important; } /* FAQ answer text */ .faq-item .faq-answer, .faq-item .accordion-body, .accordion-item .accordion-body, .faq .item .answer { font-size: clamp(0.85rem, 3vw, 1rem) !important; padding: 0 1.25rem 1rem !important; line-height: 1.6 !important; } /* The 1rem padding-bottom above is a hard floor on this element's height with box-sizing:border-box — even at the collapsed max-height:0 set by FAQ.html's toggle script, padding never shrinks below its own value, so the closed accordion still renders ~17px tall. That's just enough for the first line of answer text to peek through on some mobile browsers' overflow-clipping. Zero it out while collapsed. */ .faq-item:not(.active) .faq-answer, .accordion-item:not(.active) .accordion-body { padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; } /* Inside FAQ: specification tables scroll */ .faq .specifications-table-container, .specifications-section.section.faq .specifications-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 8px !important; } .faq .specifications-table { min-width: 500px !important; } } /* ===================================================== SECTION 12 — Talk-to-Us / Contact Form ===================================================== */ @media (max-width: 1023px) { /* Remove the 50vw cap on the form */ .talk-to-us .form { max-width: 100% !important; } /* Banner layout */ .talk-to-us .banner, .talk-to-us .banner2 { flex-direction: column !important; padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 5vw, 1.5rem) !important; } /* Info and form side by side on tablet, stacked on mobile */ .talk-to-us .banner .container-inner, .talk-to-us .banner2 .container-inner { flex-direction: column !important; align-items: stretch !important; gap: 2rem !important; } .talk-to-us .info, .talk-to-us .form-content { width: 100% !important; max-width: 100% !important; } } @media (max-width: 767px) { .talk-to-us { padding: 0 !important; } .talk-to-us .banner, .talk-to-us .banner2 { min-height: unset !important; padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 5vw, 1.5rem) !important; } .talk-to-us .title, .talk-to-us h1, .talk-to-us h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; margin-bottom: 1rem !important; } /* Form fields: full width on mobile */ .talk-to-us .form-group { width: 100% !important; flex-direction: column !important; } /* .checkbox-group also carries .form-group (for shared spacing), but it needs the checkbox beside its label, not stacked above it like a text-input's label. The rule above was bleeding into it. */ .talk-to-us .form-group.checkbox-group { flex-direction: row !important; align-items: flex-start !important; } .talk-to-us .form-content .form-group input, .talk-to-us .form-content .form-group textarea, .talk-to-us .form-content .form-group select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 1rem !important; padding: 12px 14px !important; } /* Contact info items: icon stays beside the text, not stacked above it */ .talk-to-us .info .item { flex-direction: row !important; align-items: flex-start !important; gap: 0.75rem !important; margin-bottom: 1rem !important; } .talk-to-us .info .item img { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; margin-top: 0.15rem !important; } .talk-to-us .info .item p, .talk-to-us .info .item address, .talk-to-us .info .item a { font-size: clamp(0.9rem, 3.2vw, 1rem) !important; line-height: 1.55 !important; } /* Address cards */ .talk-to-us .address-card { padding: 1rem !important; margin-bottom: 1rem !important; } /* Social connect section */ #social-connect .container-inner { flex-direction: column !important; align-items: center !important; gap: 1.5rem !important; text-align: center !important; } /* The two inline-styled column divs (logo+icons, CTA) carry desktop flex-basis values (520px/420px) meant for a horizontal layout. Once the parent above is forced to flex-direction:column, those basis values are read as HEIGHT instead of width, ballooning each column and spreading its sparse content across the phantom space via space-between/flex-end. Reset them to size to their actual content on mobile/tablet. */ #social-connect .container-inner > div { flex: 0 1 auto !important; min-height: unset !important; height: auto !important; width: 100% !important; justify-content: center !important; align-items: center !important; gap: 24px !important; } #social-connect .sc-icons { justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; } #social-connect .sc-cta { align-self: center !important; min-width: unset !important; width: 90% !important; max-width: 300px !important; } } /* ===================================================== SECTION 13 — Footer ===================================================== */ @media (max-width: 1023px) { /* Footer nav block: wrap columns */ footer .footer-nav, footer .footer-links, footer .links-block, footer .bottom-nav { flex-wrap: wrap !important; gap: 1.5rem 2rem !important; justify-content: flex-start !important; } footer .footer-link { flex: 1 1 45% !important; min-width: 140px !important; } } @media (max-width: 767px) { /* Footer: single column */ footer { padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 5vw, 1.5rem) !important; } footer .container-inner { flex-direction: column !important; gap: 2rem !important; padding-left: clamp(1rem, 5vw, 1.5rem) !important; padding-right: clamp(1rem, 5vw, 1.5rem) !important; } /* Footer logo */ footer .logo, footer .footer-logo { max-width: 120px !important; margin: 0 auto 1rem !important; } /* Footer columns: 2-column grid */ footer .footer-nav, footer .footer-links, footer .links-block, footer .bottom-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.25rem 1rem !important; width: 100% !important; justify-items: start !important; } footer .footer-link { flex: unset !important; min-width: unset !important; width: 100% !important; } /* The link list itself is plain inline-block
  • with no built-in spacing beyond incidental HTML whitespace, so the items read as crammed together edge-to-edge. Give them a proper wrapping row. */ footer .footer-link ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem 1.5rem !important; text-align: center !important; } footer .footer-link li { margin: 0 !important; } /* Footer link labels */ footer .footer-link .bottom-nav-link, footer .footer-link a { font-size: clamp(0.78rem, 2.8vw, 0.9rem) !important; line-height: 1.5 !important; } /* Footer heading / column title */ footer .footer-col-title, footer .footer-link .nav-link { font-size: clamp(0.85rem, 3vw, 1rem) !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; } /* Attribution / copyright */ .attribution { text-align: center !important; padding: 1rem clamp(1rem, 5vw, 1.5rem) !important; font-size: 0.8rem !important; } } /* ===================================================== SECTION 14 — Page-Specific Overrides ===================================================== */ /* --- index.html: hero padding for first section after slider --- */ @media (max-width: 767px) { /* Gradient section immediately after slider */ .slider-container + .gradient-section { margin-top: 0 !important; } /* index.html "Start Building Your D-Bot Robotics Platform Today!" block: .intro-box-1600 is 155% wide with a -100px left margin, a desktop bleed effect. On mobile that shoves the box off-screen to the left, clipping the start of every line of its heading text. */ .intro-section-1600 { flex-direction: column !important; align-items: center !important; padding: clamp(1.5rem, 6vw, 2.5rem) clamp(1rem, 5vw, 1.5rem) !important; } .intro-left { max-width: 100% !important; width: 100% !important; align-items: center !important; } .intro-box-1600 { width: 100% !important; max-width: 100% !important; margin: 0 0 1.5rem !important; padding: clamp(1.5rem, 5vw, 2rem) !important; box-sizing: border-box !important; } .intro-box-1600 h1 { text-align: center !important; } .intro-right-1600 { max-width: 90% !important; width: 90% !important; } /* cobots.html: hero slider full height */ .slider-hero .wrapper.slider-container { height: auto !important; min-height: 80vh !important; } /* cobots.html #programming-section: the image/text pair uses raw inline flex (50%/55% with overlap-creating negative margins) with no wrap. On mobile the ~180px-wide text column, still carrying its desktop 4rem/3.5rem padding, forces the paragraph text into an unreadable single-word-per-line column hundreds of px tall, with the image vertically centered in the resulting dead space. Force a normal stacked, full-width layout instead. */ #programming-section .container-inner > div { flex-direction: column !important; align-items: stretch !important; } #programming-section .container-inner > div > div { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 0 1.5rem !important; } #programming-section .container-inner > div > div:last-child { margin-bottom: 0 !important; padding: 2rem 1.5rem !important; } /* #programming-section itself carries a desktop margin:8rem 0 (128px top and bottom) intended to offset its overlapping-card effect; on mobile (where the cards no longer overlap) that reads as a large dead gap before/after the section. */ #programming-section { margin: 2.5rem 0 !important; } #cobots-overview-video { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } /* cobots.html #scalable-section: same issue — 40%/55% raw flex columns sum to 95vw and never trigger the wrap, squeezing the text column. */ #scalable-section { padding: 2.5rem 0 !important; } /* index.html #full-service-section ("Full Service, Support & Training"): text container carries a desktop margin-left:38% (offsetting it past a decorative diagonal side panel) plus an 8.5vw right / 2.5vw left padding. On mobile that reserves ~38% of the viewport as blank space before the text even starts. */ #full-service-section > div { margin-left: 0 !important; padding: 0 clamp(1rem, 5vw, 1.5rem) !important; } /* cobots.html #ecosystem-cta-section: text container capped at a desktop max-width:65%, wasting ~35% of the mobile viewport as dead space to its right. */ #ecosystem-cta-section { padding: 3rem 0 !important; } #ecosystem-cta-section .cobots-section-wrap > div { max-width: 100% !important; } /* Partner pages "Best paired with" cross-sell row: hard-coded grid-template-columns: repeat(6, minmax(110px, 1fr)) requires a 660px-wide track, and with all 6 DC models always present (well over 3), turn it into a proper swipeable carousel rather than a grid — each card sized to leave the next one peeking in at the edge as a swipe affordance, with scroll-snap for clean paging. */ .best-paired [style*="repeat(6, minmax(110px"] { display: flex !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scroll-padding-left: 4vw !important; gap: 14px !important; padding: 4px 4px 14px !important; } .best-paired [style*="repeat(6, minmax(110px"] > div { flex: 0 0 auto !important; width: 40vw !important; max-width: 170px !important; scroll-snap-align: start !important; } #scalable-section .container-inner { flex-direction: column !important; } #scalable-section .container-inner > div { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding-left: 0 !important; } /* cobots.html hero: stack on mobile */ .slider-hero .slide-content { flex-direction: column !important; padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 5vw, 1.5rem) !important; } /* dbot-mar.html hero: dbot-mar-overrides.css forces the slide to an unconditional (no media query) display:grid, grid-template-columns: 40% 60% and height:100vh. On mobile that's a fixed full-screen-tall grid with a lot of unused space distributed by align-items/ justify-content between the (now much shorter, stacked) image and text — the large gaps the image sits in. */ body.dbot-mar .slide-content { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 5vw, 1.5rem) !important; gap: 1rem !important; } body.dbot-mar .slide-image-content, body.dbot-mar .slide-text-content-06 { height: auto !important; min-height: 0 !important; width: 100% !important; } /* dynamic.html overrides */ .dynamic-hero, .dynamic-content { flex-direction: column !important; padding: clamp(1.5rem, 5vw, 2rem) clamp(1rem, 5vw, 1.5rem) !important; } /* dynamic.html #specifications-table ("Payload and Reach customizable"): its two flex columns carry desktop min-widths (480px / 420px) that both individually exceed a phone viewport. flex-wrap lets them drop to separate rows, but each column still tries to render at its oversized min-width and gets clipped by overflow-x:hidden — the specs table renders far wider than the screen (mostly invisible off to the right) while the heading column beside/below it looks sparse, reading as a huge dead gap before the actual visible content. */ .dynamic-specs-section .container-inner { flex-direction: column !important; gap: 2rem !important; } .dynamic-specs-section .container-inner > div { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; } .dynamic-specs-section .specifications-table-container { overflow-x: auto !important; } .dynamic-specs-section table.specifications-table { min-width: 480px !important; } /* Robotics platform carousel */ .robotics-platform .platform-cards { flex-direction: column !important; align-items: center !important; gap: 1.25rem !important; } .robotics-platform .platform-card { width: 92% !important; max-width: 400px !important; } /* Top block on sub-pages */ .top-block { padding-top: calc(var(--nav-height-mobile, 64px) + 1rem) !important; } .top-block .img-area { width: 80% !important; float: none !important; margin: 0 auto 1rem !important; position: relative !important; } .top-block .text-area { width: 100% !important; padding: 0 !important; } /* Software GUI section */ .software-gui .text-area { position: relative !important; right: auto !important; bottom: auto !important; padding: 0 !important; margin-top: 0 !important; align-items: flex-start !important; text-align: left !important; } .software-gui .img-area { margin-top: 0 !important; } /* Partner ecosystem / become-a-partner CTA row */ .cta-row, .cta-buttons { flex-direction: column !important; align-items: center !important; gap: 1rem !important; } /* Become-a-partner form */ .become-partner-form .form-row { flex-direction: column !important; } } @media (min-width: 768px) and (max-width: 1023px) { .best-paired [style*="repeat(6, minmax(110px"] { grid-template-columns: repeat(3, minmax(100px, 1fr)) !important; } } /* --- Banner2 (non-ecosystem sub-pages) --- */ @media (max-width: 767px) { .banner2 { padding-top: calc(var(--nav-height-mobile, 64px) + 1rem) !important; min-height: clamp(180px, 44vh, 280px) !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; } .banner2 .container-inner { padding-left: clamp(1rem, 5vw, 1.5rem) !important; padding-right: clamp(1rem, 5vw, 1.5rem) !important; } .banner2 .description h1, .banner2 h1 { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; margin-bottom: 0.5rem !important; } .banner2 .description p { font-size: clamp(0.9rem, 3vw, 1rem) !important; } } /* ===================================================== SECTION 15 — Utility / Helper Overrides ===================================================== */ @media (max-width: 767px) { /* Standard two-col flex containers */ .two-col, .two-columns, .col-2 { flex-direction: column !important; gap: 1.5rem !important; } /* Three-col grids: collapse to 1 */ .three-col, .col-3, .grid-3 { grid-template-columns: 1fr !important; gap: 1.25rem !important; } /* Buttons: full-width on small screens */ .sc-cta, .btn-gradient { width: 100% !important; max-width: 340px !important; min-width: unset !important; margin: 0 auto !important; padding: 14px 24px !important; text-align: center !important; justify-content: center !important; } /* Hide decorative circles on mobile to save space */ .slide-bg-circle { display: none !important; } /* Icon feature list: ensure legibility */ .list-features { gap: 10px !important; } .list-features li { gap: 10px !important; } .list-features img { width: clamp(20px, 5vw, 28px) !important; height: clamp(20px, 5vw, 28px) !important; } } /* d-mobile-block / d-mobile-none: ensure correct visibility */ @media (max-width: 767px) { .d-mobile-block { display: block !important; } .d-mobile-none { display: none !important; } } @media (min-width: 768px) { .d-mobile-block { display: none !important; } .d-mobile-none { display: block !important; } }