/* ================================================================ BATHOS INTERNATIONAL GROUP — MOBILE FIX File: css/mobile-fix.css Add ONE line to in EVERY HTML file, after all other CSS: This file fixes all mobile layout and navigation issues. ================================================================ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. NAV — hamburger button visible, desktop links hidden ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 900px) { /* Hide desktop nav links */ .bh-nav__links { display: none !important; } /* Show hamburger button */ .bh-nav__hamburger { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; cursor: pointer; padding: 8px; flex-shrink: 0; } .bh-nav--light .bh-nav__hamburger { border-color: rgba(11,21,32,0.15); } .bh-nav__hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s; } .bh-nav--light .bh-nav__hamburger span { background: var(--ink, #0B1520); } /* Nav layout on mobile */ .bh-nav { padding: 0 5% !important; height: 64px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } /* Logo shrinks slightly on mobile */ .bh-nav__logo-text { display: none; /* hide text, show only logo image on small screens */ } .bh-nav__logo-img { height: 36px !important; width: 36px !important; } } @media (max-width: 480px) { .bh-nav__logo-sub { display: none; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2. MOBILE NAV OVERLAY — full screen menu ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .bh-mobile-nav { position: fixed !important; inset: 0 !important; background: rgba(11,21,32,0.98) !important; backdrop-filter: blur(16px) !important; z-index: 9999 !important; display: none; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 28px !important; padding: 60px 24px 40px !important; overflow-y: auto !important; } /* When open */ .bh-mobile-nav.is-open, .bh-mobile-nav[style*="flex"] { display: flex !important; } /* Main nav links */ .bh-mobile-nav > a { font-family: 'Playfair Display', serif !important; font-size: 22px !important; font-weight: 400 !important; color: rgba(255,255,255,0.82) !important; text-decoration: none !important; letter-spacing: 0.5px !important; text-align: center !important; transition: color 0.2s !important; line-height: 1.4 !important; } .bh-mobile-nav > a:hover { color: #D4A84B !important; } /* Close button */ .bh-mobile-nav__close { position: absolute !important; top: 20px !important; right: 20px !important; width: 44px !important; height: 44px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 50% !important; color: #fff !important; font-size: 18px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.2s !important; } .bh-mobile-nav__close:hover { background: rgba(255,255,255,0.15) !important; } /* Division sub-links in mobile nav */ .mob-div-list { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; width: 100% !important; } .mob-div-list a { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 1.5px !important; color: rgba(255,255,255,0.42) !important; text-decoration: none !important; text-align: center !important; transition: color 0.2s !important; } .mob-div-list a:hover { color: #D4A84B !important; } .mob-divider { width: 40px !important; height: 1px !important; background: rgba(255,255,255,0.12) !important; margin: 4px 0 !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3. HOME HERO — content readable on mobile ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-home-hero { min-height: 100svh !important; padding: 100px 5% 60px !important; } .bh-home-hero__content { max-width: 100% !important; } .bh-h1, .bh-page-hero__title { font-size: clamp(28px, 8vw, 48px) !important; line-height: 1.2 !important; } .bh-home-hero__body { font-size: 15px !important; line-height: 1.7 !important; } .bh-home-hero__actions { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .bh-home-hero__actions .bh-btn { width: 100% !important; justify-content: center !important; text-align: center !important; } .bh-hero-stats { flex-wrap: wrap !important; gap: 20px 32px !important; padding-top: 32px !important; } .bh-home-hero__scroll { display: none !important; } /* Typewriter section */ .bh-typewriter-wrap { flex-wrap: wrap !important; gap: 8px !important; } .bh-typewriter-text { font-size: 16px !important; min-width: 200px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4. PAGE HERO — division and inner pages ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-page-hero { min-height: 320px !important; padding: 100px 5% 48px !important; align-items: flex-end !important; justify-content: flex-start !important; } /* Division page hero — move text to bottom-left on mobile */ .bh-page-hero[style*="justify-content:flex-end"] { justify-content: flex-start !important; text-align: left !important; } .bh-page-hero__content[style*="text-align:right"] { text-align: left !important; } .bh-page-hero__title { font-size: clamp(24px, 6vw, 40px) !important; line-height: 1.2 !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5. SECTIONS — padding on mobile ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-section { padding: 56px 5% !important; } .bh-section-header { flex-direction: column !important; gap: 16px !important; margin-bottom: 36px !important; } .bh-h2 { font-size: clamp(24px, 6vw, 38px) !important; line-height: 1.2 !important; } .bh-h3 { font-size: clamp(20px, 5vw, 28px) !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6. TWO-COLUMN LAYOUTS — stack on mobile ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-2col, .bh-2col--1-2 { display: flex !important; flex-direction: column !important; gap: 36px !important; } /* Un-stick the sticky sidebar */ .bh-2col > div[style*="sticky"], .bh-2col--1-2 > div[style*="sticky"] { position: relative !important; top: auto !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7. DIVISION ROWS (home page divisions section) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-div-rows { border-top: 1px solid rgba(255,255,255,0.06) !important; } .bh-div-row { padding: 18px 5% !important; gap: 12px !important; flex-wrap: wrap !important; } .bh-div-row__body { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; flex: 1 !important; min-width: 0 !important; } .bh-div-row__name { font-size: 15px !important; min-width: unset !important; } .bh-div-row__tags { display: none !important; /* hide product tags on small screens */ } .bh-div-row__tag-right { display: none !important; } .bh-div-row__num { display: block !important; min-width: 24px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 8. OVERVIEW CARDS GRID ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-overview-grid, .bh-div-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .bh-overview-card, .bh-div-card { padding: 24px !important; } } @media (min-width: 480px) and (max-width: 768px) { .bh-overview-grid, .bh-div-grid { grid-template-columns: 1fr 1fr !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 9. PRODUCT CARDS GRID (seafood division) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-products-grid, .bh-products-grid--photo { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .bh-product-card__img { height: 160px !important; } .bh-product-card__body { padding: 14px !important; } .bh-product-card__body h5 { font-size: 13px !important; } .bh-product-card__body p { font-size: 11.5px !important; } } @media (max-width: 400px) { .bh-products-grid, .bh-products-grid--photo { grid-template-columns: 1fr !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 10. VALUES GRID (about page) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-values-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .bh-strength-list { gap: 16px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 11. SUPPLY CHAIN PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-process { padding-left: 0 !important; } .bh-process-step { gap: 16px !important; padding: 20px 0 !important; } .bh-process-step__num { font-size: 13px !important; min-width: 32px !important; width: 32px !important; height: 32px !important; } .bh-cert-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .bh-cert-card { padding: 20px 16px !important; } /* Trade finance grid */ div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 12. GLOBAL REACH — regions grid ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-regions { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 5% 48px !important; margin-top: 32px !important; } .bh-region { padding: 24px !important; } .bh-trade-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .bh-trade-card { padding: 20px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 13. CONTACT PAGE — form and info ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-contact-grid, .bh-contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; } .bh-fg { margin-bottom: 18px !important; } .bh-fg input, .bh-fg select, .bh-fg textarea { font-size: 16px !important; /* prevents iOS zoom on focus */ } .bh-contact-info { order: 2 !important; } .bh-contact-form-wrap { order: 1 !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 14. CERTIFICATIONS GRID (seafood QA section) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { /* The 4-column cert logo grid */ div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Quality pillars */ div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } } @media (max-width: 400px) { div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 15. CTA BANNER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-cta-banner { flex-direction: column !important; text-align: center !important; gap: 24px !important; padding: 48px 5% !important; } .bh-cta-banner h2 { font-size: clamp(20px, 5vw, 28px) !important; } .bh-cta-banner .bh-btn { align-self: center !important; width: 100% !important; justify-content: center !important; max-width: 320px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 16. FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; padding: 48px 5% 32px !important; } .bh-footer__brand { grid-column: 1 / -1 !important; /* full width on mobile */ } .bh-footer__bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; padding: 20px 5% !important; } .bh-footer__links { justify-content: center !important; } } @media (max-width: 400px) { .bh-footer__grid { grid-template-columns: 1fr !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 17. FLIPBOOK (seafood catalogue) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-flipbook-section { padding: 48px 0 0 !important; } .bh-flipbook-header { padding: 0 5% 32px !important; flex-direction: column !important; align-items: flex-start !important; } .bh-flipbook-header__actions { display: none !important; } .bh-book-viewport { padding: 24px 12px 0 !important; } .bh-book-spine { display: none !important; } .bh-page-left { display: none !important; } .bh-page-right { width: 100% !important; border-radius: 3px !important; } .bh-fb-controls { padding: 14px 16px !important; } .bh-fb-hint { display: none !important; } .bh-fb-thumb { width: 64px !important; height: 45px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 18. DIVISIONS CAROUSEL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-div-carousel { height: 85vh !important; min-height: 500px !important; } .bh-dc-content { left: 5% !important; right: 5% !important; bottom: 110px !important; max-width: 100% !important; } .bh-dc-title { font-size: clamp(26px, 7vw, 40px) !important; } .bh-dc-desc { font-size: 13px !important; max-width: 100% !important; } .bh-dc-arrow { display: none !important; } .bh-dc-dots { right: 16px !important; } .bh-dc-tabs { flex-wrap: wrap !important; width: 90% !important; justify-content: center !important; bottom: 16px !important; } .bh-dc-tab { font-size: 9.5px !important; padding: 7px 9px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 19. IMAGE BANDS AND SPLITS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-img-band { height: 320px !important; } .bh-img-band__overlay { padding: 0 5% !important; background: linear-gradient( 180deg, rgba(11,21,32,0.6) 0%, rgba(11,21,32,0.85) 100% ) !important; } .bh-img-band__text h2 { font-size: clamp(22px, 6vw, 32px) !important; } .bh-img-split { grid-template-columns: 1fr !important; } .bh-img-split--reverse { direction: ltr !important; } .bh-img-split__photo { height: 260px !important; } .bh-img-split__content { padding: 36px 5% !important; } .bh-img-strip { grid-template-columns: 1fr !important; height: auto !important; } .bh-img-strip__item { height: 220px !important; } .bh-img-strip__item:not(:first-child) { display: none !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 20. WORLD MAP CANVAS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-worldmap-section { padding: 56px 5% !important; } #bh-world-canvas { height: 280px !important; } .bh-map-stats { gap: 24px !important; padding-top: 28px !important; } .bh-map-stat__num { font-size: 28px !important; } .bh-worldmap-header { flex-direction: column !important; align-items: flex-start !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 21. BREADCRUMB — division pages ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .bh-div-breadcrumb { padding: 12px 5% !important; font-size: 10px !important; } .bh-div-nav-strip { flex-direction: column !important; } .bh-div-nav-btn { padding: 20px 5% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } .bh-div-nav-btn__name { font-size: 16px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 22. GENERAL MOBILE UTILITIES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { /* Prevent horizontal overflow */ body, html { overflow-x: hidden !important; max-width: 100vw !important; } /* Ensure all images are responsive */ img { max-width: 100% !important; height: auto !important; } /* Tags wrap properly */ .bh-tags { gap: 6px !important; flex-wrap: wrap !important; } .bh-tag { font-size: 10px !important; padding: 4px 10px !important; } /* Buttons always touchable */ .bh-btn { min-height: 48px !important; padding: 14px 24px !important; font-size: 11px !important; } /* Timeline (about page) */ .bh-tl-item { gap: 16px !important; } .bh-tl-year { min-width: 44px !important; } }