/* Custom styles beyond Tailwind utilities */ html { scroll-behavior: smooth; } /* Mobile: nothing may constrain or inflate the page box. History, because this kept coming back. The original rule gave `height: 100%` plus `display: flex` to pin the footer down. That clamps the body box to one viewport while its content runs thousands of pixels past it, and iOS Safari then reports a scrollable area larger than the content - a blank screen below the footer. Swapping to `min-height` fixed the clamp but NOT the phantom scroll, because a flex body whose content overflows, plus a `vh` min-height (on iOS `100vh` is the LARGE viewport, taller than what is actually visible while the toolbar is showing), still lets Safari resolve a page box taller than the content. So the constraint is simply gone on mobile. With no height and no flex on , the document height can only ever equal the content height, which is what "the page ends at the footer" requires. Every page on this site is thousands of pixels long, so the sticky-footer behaviour those rules bought was never actually doing anything. Do not reintroduce `height`, `min-height`, or `display: flex` on here. */ @media (max-width: 768px) { html, body { margin: 0; padding: 0; } body { /* Clip the decorative art that deliberately sits outside the viewport. stays `visible` so this value propagates to the viewport rather than turning into its own scroll container. */ overflow-x: hidden; /* Suppresses iOS rubber-banding at the end of the page. Without it, dragging past the footer bounces the dark footer up and exposes the white canvas underneath - which reads as "the page scrolls past the footer" even when the document height is correct. */ overscroll-behavior-y: none; } } /* Pre-animation state for GSAP-driven elements (avoids flash of unstyled motion). Cleared by main.js; if JS fails, .no-js fallback keeps content visible. */ .js .hero-el, .js [data-animate], .js .reveal-text { visibility: hidden; } ::selection { background: #6B4E73; color: #fff; } /* Fixed nav needs matching body offset. --nav-h is measured by main.js; the literals are the pre-JS fallback and track the responsive logo heights set further down (52px logo -> 85px header on phones, 64px -> ~97px on tablets plus the 36px top bar, 80px -> ~113px from lg up). */ body:not(.nav-overlay) { padding-top: var(--nav-h, 86px); } @media (min-width: 768px) { body:not(.nav-overlay) { padding-top: var(--nav-h, 134px); } } @media (min-width: 1024px) { body:not(.nav-overlay) { padding-top: var(--nav-h, 149px); } } #site-nav.is-scrolled #site-header { box-shadow: 0 4px 24px rgba(26, 26, 26, 0.1); transition: box-shadow 0.3s ease; } /* Premium WhatsApp Floating Widget */ .whatsapp-widget { position: fixed; bottom: 30px; right: 30px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; background-color: #25D366; color: #fff; border-radius: 50%; box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; -webkit-appearance: none; appearance: none; outline: none; font: inherit; line-height: 1; } .whatsapp-widget:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 12px 35px rgba(37, 211, 102, 0.55); } .whatsapp-widget::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #25D366; animation: whatsapp-pulse 2s infinite; opacity: 0; pointer-events: none; } @keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } /* Lead Capture Modal Styling */ .modal-overlay { position: fixed; inset: 0; background-color: rgba(31, 13, 25, 0.6); /* Brand Deep Plum opacity */ backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { background-color: #ffffff; width: 92%; max-width: 550px; border-radius: 24px; padding: 36px; box-shadow: 0 25px 50px -12px rgba(26, 26, 26, 0.25); transform: scale(0.9); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid rgba(107, 78, 115, 0.1); } .modal-overlay.active .modal-content { transform: scale(1); } /* FAQ Accordion Details Smooth Transition */ .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity: 0; } .accordion-item.active .accordion-content { max-height: 500px; /* Adjust according to content */ opacity: 1; } .accordion-trigger svg { transition: transform 0.3s ease; } .accordion-item.active .accordion-trigger svg { transform: rotate(180deg); } /* Glassmorphism Accents */ .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); } /* Product details tabs indicator */ .tab-btn.active { color: #6B4E73; /* secondary purple */ border-color: #6B4E73; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fade-in 0.4s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Search results match highlighting */ .search-highlight { background-color: rgba(206, 144, 100, 0.2); /* primary bronze with opacity */ padding: 0 2px; border-radius: 4px; font-weight: 600; } /* Premium Hero Mesh Gradients & Animations */ @keyframes float-slow { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-15px) scale(1.04); } } @keyframes float-reverse { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(15px) scale(0.96); } } .animate-float-slow { animation: float-slow 8s ease-in-out infinite; } .animate-float-reverse { animation: float-reverse 10s ease-in-out infinite; } .hero-mesh-bg { background-color: #0d0610; background-image: radial-gradient(at 0% 0%, rgba(206, 144, 100, 0.12) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(107, 78, 115, 0.15) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(31, 13, 25, 0.95) 0px, transparent 100%); position: relative; overflow: hidden; } /* Unique Hero Image Backgrounds with dark readability overlays */ .about-hero-bg { background: linear-gradient(to right, rgba(13, 6, 16, 0.96) 35%, rgba(13, 6, 16, 0.7) 100%), url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat; position: relative; overflow: hidden; } .products-hero-bg { background: linear-gradient(to right, rgba(13, 6, 16, 0.96) 35%, rgba(13, 6, 16, 0.7) 100%), url('https://images.unsplash.com/photo-1576086213369-97a306d36557?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat; position: relative; overflow: hidden; } .contact-hero-bg { background: linear-gradient(to right, rgba(13, 6, 16, 0.96) 35%, rgba(13, 6, 16, 0.7) 100%), url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat; position: relative; overflow: hidden; } .product-hero-detail-bg { background: linear-gradient(to right, rgba(13, 6, 16, 0.96) 35%, rgba(13, 6, 16, 0.7) 100%), url('https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat; position: relative; overflow: hidden; } /* ══════════════════════════════════════════ PREMIUM ANIMATION ENHANCEMENTS ══════════════════════════════════════════ */ /* Micro-interactions for icons and SVGs inside card grids on hover */ .group i, .group svg { transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease; will-change: transform; } .group:hover i, .group:hover svg { transform: scale(1.16) rotate(5deg); } /* Ensure smooth hardware acceleration on animated cards */ [data-animate], .reveal-word, .magnetic-btn, .pp-card { will-change: transform, opacity; } /* Logo Ticker Carousel */ .logo-ticker-track { display: flex; animation: logo-scroll 25s linear infinite; width: max-content; } .logo-ticker-track:hover { animation-play-state: paused; } @keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE HARDENING Cross-cutting rules that keep every page legible and free of horizontal overflow from 320px upward. Grouped by concern so individual fixes stay easy to find. ══════════════════════════════════════════════════════════════ */ /* ── 1. Horizontal overflow guard ── Decorative blurred orbs and full-bleed art sit outside the viewport by design; clip them at the root instead of letting them widen the page. */ /* Only above the mobile breakpoint. Below 768px the pre-existing rule at the top of this file already sets body{overflow-x:hidden}; because stays `visible` there, that body value is what propagates to the viewport. Adding overflow-x to as well would make its own scroll container - and since that same mobile rule pins body to height:100%, the page would collapse to one screen and stop scrolling entirely. */ @media (min-width: 769px) { html { overflow-x: hidden; } } /* Long unbreakable tokens (email addresses, chemical names like "Microcrystalline") pushed the page wider than the screen at <=360px. */ h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, label, span, a { overflow-wrap: break-word; } a[href^="mailto:"], a[href^="tel:"], .break-token { overflow-wrap: anywhere; word-break: break-word; } /* Media never exceeds its column. */ img, svg, video, canvas, iframe, table { max-width: 100%; } img, video { height: auto; } /* ── 2. Minimum legible type ── Uppercase micro-labels were rendering at 9.5-10.5px. Floor them so the smallest text on any screen stays readable. */ .pp-card-badge, .section-eyebrow, .cat-pill, .cat-pill-count, .spec-chip, .group-card-eyebrow, .stat-pill-label, .info-tile-label, .range-stat-label, .cph-badge, .cph-breadcrumb a, .cph-breadcrumb .current, .cph-breadcrumb .sep { font-size: 11px !important; letter-spacing: .14em; } /* ── 3. Touch targets ── Pointer-coarse devices need ~44px of hittable area. The visual size of each control is preserved; only the invisible hit box grows. */ @media (hover: none), (max-width: 1023px) { /* The dots sit 12px apart, so a 44px-wide hit area on each would overlap its neighbours and the last one painted would swallow the tap. Widen the row's gap first, then size each hit box to exactly one dot pitch so the areas tile instead of stacking. */ .hero-dots { gap: 20px !important; } .hero-dot { position: relative; } .hero-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 44px; transform: translate(-50%, -50%); } footer a, .cph-breadcrumb a, .prod-breadcrumb a, .range-breadcrumb a { display: inline-block; padding-block: 6px; } /* Phone and email links are the primary conversion path on a phone; give them a full-height hit area rather than the bare text box. */ a[href^="tel:"], a[href^="mailto:"] { min-height: 40px; display: inline-flex; align-items: center; } #modal-close, .modal-close { min-width: 44px; min-height: 44px; } } /* ── 4. Floating WhatsApp widget ── At 60px + 30px offset it sat on top of body copy on narrow screens. Shrink it and respect iOS safe areas so it never covers text. */ @media (max-width: 767px) { .whatsapp-widget { width: 50px; height: 50px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.38); } .whatsapp-widget svg { width: 24px; height: 24px; } /* The pulse ring doubles the visual footprint; drop it on small screens. */ .whatsapp-widget::after { display: none; } } /* ── 5. Header ── An 80px logo left ~60px beside the hamburger at 390px wide. */ @media (max-width: 767px) { #site-header img { height: 52px !important; } #site-header .h-18 { height: auto; } #mobile-menu-btn { min-width: 44px; min-height: 44px; } } @media (min-width: 768px) and (max-width: 1023px) { #site-header img { height: 64px !important; } } /* ── 6. Homepage hero ── The slide artwork carries baked-in wordmark text ("WELCOME TO FOOD PHARMA PARTNER"). Against a tall 100vh box, `cover` scales the 16:9 art to fill the height and crops the sides — at 390x844 only 33% of the frame survived and the company name was off-screen entirely. The trigger is the viewport's aspect ratio, not its width: a 768x1024 portrait tablet is just as badly cropped (41% visible) as a phone. Below a 5:4 viewport the hero becomes an aspect-ratio box that contains the whole frame; wider-than-5:4 viewports keep the original full-bleed 100vh hero, where the crop is mild (74% visible at 1024x768, 89% at 1440x900). */ @media (max-width: 767px), (max-aspect-ratio: 5/4) { .home-hero { min-height: 0 !important; padding-top: var(--nav-h, 96px); display: block !important; } .home-hero .hero-slides { position: relative !important; inset: auto !important; width: 100%; aspect-ratio: 16 / 9; background: #0d0610; } .home-hero .hero-slide { background-size: contain !important; background-position: center !important; background-color: #0d0610; } /* Holds only the screen-reader h1; it must not reserve 176px of space. */ .home-hero .hero-copy { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0; flex: 0 0 auto; } .home-hero .hero-dots { padding-top: 16px; padding-bottom: 20px !important; } } /* ── 7. Decorative orbs ── Absolutely-positioned glow orbs overflowed the product hero at 320px. */ .prod-hero, .cat-page-hero, .range-hero, .hero-mesh-bg { overflow: hidden; } .prod-hero-orb-1, .prod-hero-orb-2, .cph-orb-1, .cph-orb-2, .prod-img-glow { pointer-events: none; } /* ── 8. Tables and spec grids ── Any wide tabular block scrolls inside itself rather than widening the page. */ .table-scroll, .specs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── 9. Forms ── iOS zooms the page when a focused field is under 16px. */ @media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } input, select, textarea, button[type="submit"] { min-height: 44px; } textarea { min-height: 96px; } } /* ── 10. Modal ── */ @media (max-width: 640px) { .modal-content, .modal-box { width: calc(100% - 24px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px 20px; border-radius: 18px; } } /* ── 11. Grid / flex children ── Grid and flex items default to min-width:auto, so a single long word ("Microcrystalline", an email address) can force a track wider than its share and push the page sideways. */ .detail-pair-grid > *, .info-cards-grid > *, .cat-qna-layout > *, .prod-qna-layout > * { min-width: 0; } /* The inline two-up grid inside the product Overview panel has no breakpoint of its own; below 520px two columns no longer fit. */ @media (max-width: 520px) { .detail-pair-grid { grid-template-columns: 1fr !important; } } /* ── 12. Top utility bar ── The bar is a fixed 36px strip. Two email addresses plus two phone numbers only just fit at 768px, so the tagline is hidden below lg (see header.php) and the contact links are kept on one line. They must also opt out of the 40px tap-target min-height above, which would otherwise burst the strip. */ .site-topbar a { white-space: nowrap; overflow-wrap: normal; word-break: normal; } @media (hover: none), (max-width: 1023px) { .site-topbar a[href^="tel:"], .site-topbar a[href^="mailto:"] { min-height: 0; display: inline; align-items: initial; } } @media (min-width: 768px) and (max-width: 900px) { .site-topbar .flex.items-center { gap: 0.75rem; } .site-topbar { font-size: 11px; } } /* ── 13. Hero sections must never clip their own content on mobile ── `includes/category-template.php` puts Tailwind's `h-screen` on the category hero, which is a FIXED `height: 100vh` - not a minimum. Paired with the `overflow: hidden` those heroes need for their decorative orbs, any content taller than one screen was silently cut off: on a phone the stat cards at the bottom of every category hero were sliced in half (240px lost). Phones make this worse in two ways - the copy wraps to far more lines than on desktop, and iOS resolves `100vh` against the LARGE viewport, so the box already extends past what the user can see. Below 768px every hero is content-sized instead. This is a blanket rule on purpose: it covers the heroes that exist today and any future one that picks up a fixed height, so this cannot regress. `.home-hero` is excluded because section 6 gives it a deliberate aspect-ratio box. */ @media (max-width: 767px) { .cat-page-hero, .cat-hero, .prod-hero, .range-hero, .about-hero, .contact-hero, .products-hero { height: auto !important; min-height: 0 !important; } /* py-20 (80px top and bottom) is generous once the hero is content-sized. */ .cat-page-hero { padding-top: 48px !important; padding-bottom: 56px !important; } } /* ── 14. Footer alignment on mobile ── The footer is a 4-up grid that collapses to a single column on phones. Left aligned, each stacked block reads as a ragged column against the centred sections above it, so centre the whole thing below 768px. Desktop keeps its left-aligned columns. */ @media (max-width: 767px) { footer > .grid > div { text-align: center; } /* Link lists: centre each item rather than the text inside a full-width row, so the underline/hover target hugs the label. */ footer > .grid ul { display: flex; flex-direction: column; align-items: center; } footer > .grid li { max-width: 100%; justify-content: center; } /* Bottom bar: copyright and the industries line. */ footer .border-t p { text-align: center; } }