/* ========================================================================== mobile.css — phone/tablet layout for the Innovate Electronics site -------------------------------------------------------------------------- Loaded LAST in every page's , because responsive.css is pulled in via @import inside chatbot.css/blogs.css and therefore loses the cascade to the page stylesheets (style.css, productpagestyle.css, subcategory.css …). Loaded at ≤900px unless a rule says otherwise. Measured at 390×844. Structure: A base / iOS behaviours B homepage hero + section typography C section rhythm (page length) D carousels -> native touch scrollers E cards (blog / event / category / testimonial) F product browsing (hero, grid, tabs, search, listings, spec tables) G floating WhatsApp / chat buttons H tap targets, tables, breadcrumbs I hero video (landing) ========================================================================== */ /* ========================================================================== A. Base / iOS behaviours ========================================================================== */ @media (max-width: 900px) { html { -webkit-text-size-adjust: 100%; } /* iOS Safari zooms the whole page when a field with font-size <16px is focused — that alone makes the search box and forms feel broken. */ input, select, textarea, .search-box input, #searchInput { font-size: 16px !important; } body { overflow-x: hidden; } img { max-width: 100%; } } /* ========================================================================== B. Homepage hero + section typography (the old rules here targeted `.hero h1`, but the real class is `.hero-title`, so the oversized mobile headline was never actually fixed) ========================================================================== */ @media (max-width: 900px) { .homepage-hero { min-height: 0; padding: 20px 18px 26px; } .hero-grid { display: block; } .hero-copy { max-width: 100%; } .hero-label, .section-eyebrow { font-size: 11.5px; letter-spacing: 0.14em; } /* 5 dense lines on a phone pushed every action below the fold */ .hero-title { font-size: clamp(21px, 6.2vw, 24px); line-height: 1.14; letter-spacing: -0.01em; margin-bottom: 12px; } .hero-title br { display: none; } .hero-description, .hero-description p { font-size: 15.5px; line-height: 1.6; text-align: left; } .hero-underline { width: 64px; margin: 12px 0 14px; } .section-title { font-size: clamp(22px, 7vw, 27px); line-height: 1.18; } .section-title--feature { font-size: clamp(20px, 6.5vw, 25px); } /* left-align the desktop-centred copy blocks: centred long paragraphs are hard to scan on a narrow screen */ .section-title, .section-eyebrow, .blog-body, .event-body, .testimonial-heading, #category-description, .page-hero__text p, .intro-text { text-align: left; } } /* ========================================================================== C. Section rhythm — the homepage was 8 screens tall and "what are we" 11, because desktop paddings stack up on a phone. ========================================================================== */ @media (max-width: 900px) { section, .product-categories, .latest-articles, .events, .testimonial, .company-description, .main-content, .intro-text { padding-top: 26px !important; padding-bottom: 26px !important; } .company-description:empty, .intro-text:empty { display: none; padding: 0 !important; } .section-title-underline { margin-bottom: 16px; } } /* ========================================================================== D. Carousels — desktop arrows + fixed-width tracks turned into orphaned chevrons floating in whitespace. On a phone: hide the arrows, swipe natively, and let the next card peek so it is obvious the row scrolls. ========================================================================== */ @media (max-width: 900px) { .carousel-arrow, .categories-arrow, .events-arrow, .carousel-container .carousel-arrow { display: none !important; } /* These wrappers are flex ROWS in the desktop markup holding more than one carousel, so at phone width every child shrinks (measured 1289px of content inside a 154px box, and the row never scrolled). Stack them and give each carousel the full width before making the track the scroller. */ .product-categories, .categories-wrapper, .slider-container, .latest-articles, .events { flex-direction: column !important; } .product-categories > *, .categories-wrapper > *, .slider-container > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .carousel-container, .categories-carousel-container, .blogs-carousel-container, .events-carousel-container, .testimonials-carousel-container, .slider-container, .carousel-loading-wrapper, .categories-wrapper { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .carousel-track, .categories-carousel-track, .events-carousel-track, .blogs-carousel-track { display: flex !important; gap: 12px; overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 18px 8px !important; margin: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; scrollbar-width: none; } .carousel-track::-webkit-scrollbar, .categories-carousel-track::-webkit-scrollbar, .events-carousel-track::-webkit-scrollbar { display: none; } .carousel-item, .blog-carousel-item, .event-carousel-item, .categories-carousel-track > .category { flex: 0 0 78vw !important; width: 78vw !important; max-width: 320px; scroll-snap-align: start; margin: 0 !important; } .categories-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 18px 8px !important; scrollbar-width: none; } } /* ========================================================================== E. Cards — image-first cards meant one item per screen with the title pushed below the fold. ========================================================================== */ @media (max-width: 900px) { .blog-image, .blog-card img, .event-image, .event-image-wrap img, .event-card img { height: 168px !important; width: 100% !important; object-fit: cover; display: block; } .blog-title, .event-title { font-size: 16.5px; line-height: 1.32; } .blog-date, .event-date, .event-tag { font-size: 12.5px; } .blog-body, .event-body { font-size: 14.5px; line-height: 1.5; } .read-more, .see-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; } .category-header-image, .category-images img { height: 150px; object-fit: contain; } .category-description { font-size: 13.5px; line-height: 1.45; } } /* ========================================================================== F. Product browsing ========================================================================== */ @media (max-width: 900px) { /* F1. Every page hero starts at the top of the document, but the header is FIXED with an 82px height on mobile — so page titles rendered underneath the logo ("CLIMATIC CHAMBER" with the branding over it, "What are We" the same). Reserve the header's height plus breathing room. */ .hero.page-hero, .page-hero.page-hero-layout, .page-hero { min-height: 0 !important; padding: 108px 18px 22px !important; } .page-hero__content, .hero-content { display: block !important; gap: 0 !important; } #category-title, .page-hero__text h1 { font-size: clamp(22px, 7vw, 27px) !important; line-height: 1.16; margin: 0 0 8px !important; } /* decorative hero art: present but not screen-filling */ .page-hero__image img { max-height: 190px !important; width: auto !important; object-fit: contain; display: block; margin: 0 auto; } /* F1b. the product's own photo is the point of a product page — it needs the room, not the 190px decorative cap above */ #main-product-image, .product-image, .main-product-image { max-height: 300px !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: block; margin: 0 auto; } .hero-image-container, .page-hero__image { margin-top: 14px !important; } } /* F1c. Listing pages only (products.html / subcategory.html) — the intro copy there is SEO padding sitting between the visitor and the products, so it gets clamped. Scoped to .listing-page so it cannot truncate real copy on the content pages (it did: whatarewe, contact, product pages). */ @media (max-width: 900px) { /* The clamp only works if the paragraph is NOT a flex item: Chrome blockifies a flex item's display, so `display:-webkit-box` was silently dropped and the 4-line clamp never applied (measured 12 lines / 261px). */ .listing-page .page-hero__text, .listing-page .hero-text { display: block !important; max-width: 100% !important; padding-right: 0 !important; } .listing-page #category-description, .listing-page .page-hero__text p { font-size: 14.5px !important; line-height: 1.5 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .listing-page #category-image { max-height: 148px !important; width: auto !important; object-fit: contain; display: block; margin: 0 auto; } } @media (max-width: 900px) { /* F2. products.html: 4-across desktop grid collapsed to one giant card per row — two columns makes a category list browsable at a glance */ .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 12px !important; } .products-grid .category-card, .products-grid > div, .products-grid > a { padding: 10px !important; } .products-grid img { height: 104px !important; width: 100% !important; object-fit: contain; display: block; margin-bottom: 8px; } .products-grid h3, .products-grid .category-name, .category-card__title { font-size: 14px !important; line-height: 1.3; text-align: center; } /* F3. the search box drew a magnifier via ::after *and* carried an with the same role — two adjacent icons for one field */ .search-icon, #searchIcon { display: none !important; } .search-box { width: 100% !important; max-width: 100% !important; } .search-box::after { right: 14px; } /* F4. category tabs: let them scroll sideways instead of wrapping into rows */ .category-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding: 0 12px 6px !important; scrollbar-width: none; } .category-tabs::-webkit-scrollbar { display: none; } .category-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; } .category-header, .product-navigation { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } /* F5. product listing rows: keep the card layout, add an affordance so it is obvious a row opens a product (there was none) */ .products-table tr { position: relative; padding-right: 40px !important; } .products-table tr::after { content: '\203A'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 26px; line-height: 1; color: #b3b3b3; pointer-events: none; } /* product detail page: the intro copy and the spec block need the width */ .product-content, .product-details, .tab-content { padding-left: 14px !important; padding-right: 14px !important; } } /* ========================================================================== F6. Specification tables Was: `table-layout: fixed` + `:first-child{width:50%}` → a phone got two 166px columns and a 931px-tall table with 6-8 wrapped lines per cell. ========================================================================== */ @media (max-width: 768px) { .specifications-content, .tab-content { overflow-x: auto; -webkit-overflow-scrolling: touch; } .specs-table, .tab-content table, .product-content table { table-layout: auto; } .specs-table th, .specs-table td, .tab-content table th, .tab-content table td { padding: 8px 10px; font-size: 13px; line-height: 1.4; text-align: left; vertical-align: top; word-break: break-word; } .specs-table th:first-child, .specs-table td:first-child { width: 38%; font-weight: 600; } .table-heading { font-size: 16px; text-align: left; } /* datasheet / library links need room to be tapped */ .library-grid a, .library-item, .document-link { min-height: 44px; } } /* ========================================================================== G. Floating WhatsApp / chat buttons They are `position: fixed`, so they always cover whatever is at the bottom of the viewport. Two bottom corners covered both the left and right of a product row (real mis-tap risk) — stack them in one corner and shrink them. ========================================================================== */ @media (max-width: 900px) { #whatsapp-btn { left: auto; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 6px; opacity: 0.92; } #whatsapp-btn img { width: 34px; height: 34px; } #chatbot-btn { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; } footer { padding-bottom: 104px; } #chatbot-window { right: 12px; left: 12px; width: auto; max-width: none; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; } footer .footer-columns, footer .footer-content { flex-direction: column; gap: 8px; } /* The buttons are fixed, so they always sit over the last visible strip of content — on a product list that meant covering the final row's chevron and tap area. Reserve room at the end of the scrolled content. */ .main-content, .products-table, .locations-section, .poc-section, .content-area { padding-bottom: 96px !important; } /* Decorative logos inside cards were `position: absolute` at 120px, so they sat on top of the card's own text ("INNOVATE ELECTRON…", "…is dis[tinguished]"). Put them in the flow above the text on phones. */ .office-card, .waw-intro-card { padding: 1.25rem !important; } .office-logo { position: static !important; width: 88px !important; height: auto !important; margin: 0 0 14px !important; } .section-eyebrow, .hero-label { font-size: 12.5px; } } /* ========================================================================== H. Tap targets — WCAG 2.5.8 asks 44×44. Measured 9-25 undersized per page. NOTE: min-height/width are ignored on inline elements, so each of these is switched to an inline-flex box first. ========================================================================== */ @media (max-width: 900px) { .side-menu-nav a, .side-menu a, footer a, .footer-socials a, .quick-links a, .breadcrumb a, #breadcrumb a, .office-contact .contact-info a, .poc-card .poc-contact-info a, .carousel-item a, .tab-button, .event-card a, .blog-card a { display: inline-flex; align-items: center; min-height: 44px; } .footer-socials a, .quick-links a { min-width: 44px; } /* breadcrumbs stay compact but tappable */ .breadcrumb a, #breadcrumb a { padding: 0 6px; min-height: 38px; } .office-contact .contact-info a, .poc-card .poc-contact-info a { padding: 4px 0; } p, li { line-height: 1.6; } } /* ========================================================================== I. Landing hero video — the clip is 1200x450 (8:3, ratio 2.67), NOT 16:9. The desktop 65vh box only looks right because at desktop widths 65vh lands near 2.5, i.e. almost uncropped. A 16:9 box letterboxes it and shows the poster around the video (stacked-strip look); 16:9 + cover crops ~190px off the sides and cuts the clip's own "DISCOVER …" title card in half. ========================================================================== */ @media (max-width: 900px) { .video-container { height: auto; aspect-ratio: 8 / 3; max-height: 46vh; background-position: center; background-size: cover; } .video-container video { position: absolute; inset: 0; top: 0; left: 0; width: 100% !important; height: 100% !important; transform: none; object-fit: cover; object-position: center center; } .audio-control-btn { min-width: 44px; min-height: 44px; right: 10px; bottom: 10px; z-index: 3; } /* the transparent header sits straight on the video: give it a scrim so the logo stays legible over busy frames (gives way to .glass-effect on scroll) */ .landing-page header { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.28) 60%, rgba(0, 0, 0, 0) 100%); padding-bottom: 18px; } } .landing-page header.glass-effect { background: rgba(255, 255, 255, 0.92); } /* Small phones (360px class) */ @media (max-width: 380px) { .video-container { max-height: 46vh; } .hero-title { font-size: 23px; } .products-table td:first-child { flex: 0 0 68px; width: 68px; } .products-table .table-product-image { width: 68px; height: 68px; } .specs-table th, .specs-table td { font-size: 12px; padding: 7px 8px; } .carousel-item, .blog-carousel-item, .event-carousel-item, .categories-carousel-track > .category { flex: 0 0 84vw !important; width: 84vw !important; } } /* Landscape phones — a 8:3 hero would leave no room for content */ @media (max-width: 900px) and (orientation: landscape) { .video-container { max-height: 80vh; } } /* -------------------------------------------------------------------------- Subcategory listing: IMAGE/NAME table -> card rows (kept from the first pass) -------------------------------------------------------------------------- */ @media (max-width: 640px) { .products-table { display: block; max-width: 100%; } .products-table thead { display: none; } .products-table tbody { display: block; } .products-table tr { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #e6e6e6; min-height: 44px; } .products-table tr:active { background: #f6f6f6; } .products-table td { display: block; border: 0; padding: 0; text-align: left; width: auto; vertical-align: middle; } .products-table td:first-child { flex: 0 0 84px; width: 84px; } .products-table .table-product-image { width: 84px; height: 84px; object-fit: contain; display: block; background: #fff; } .products-table .table-product-name { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; } }