/* ============================================================ CRESTYN GROUP — CENTRALIZED RESPONSIVE STYLESHEET Applies universally across all pages. Load this as the LAST stylesheet in every HTML . ============================================================ */ /* ============================================================ 1. GLOBAL RESETS FOR RESPONSIVENESS ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { overflow-x: hidden; width: 100%; max-width: 100vw; } img, video, svg { max-width: 100%; height: auto; } /* ============================================================ 2. CONTAINER — SAFE PADDING ON ALL SCREENS ============================================================ */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 768px) { .container { padding: 0 16px; } } @media (max-width: 375px) { .container { padding: 0 14px; } } /* ============================================================ 3. HEADER HEIGHT & OVERFLOW CONTROL ============================================================ */ header { overflow: visible; } /* ============================================================ 4. LOGO — STANDARDIZED SIZING ACROSS ALL PAGES The logo image in every page is set to 180×180px which overflows the 72px header. This section corrects it sitewide. ============================================================ */ .logo { display: flex; align-items: center; flex-shrink: 0; position: relative; z-index: 1070; } .logo img { height: 150px !important; width: auto !important; max-width: 280px !important; object-fit: contain !important; display: block !important; } /* ============================================================ 5. HEADER LAYOUT — PREVENT LOGO OVERFLOW ============================================================ */ header { height: 112px !important; min-height: 112px; overflow: visible; } .nav-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 112px; } /* ============================================================ 6. HAMBURGER BUTTON — SHOW ON MOBILE + X ANIMATION ============================================================ */ .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1200; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .hamburger span { display: block; width: 100%; height: 2px; background-color: var(--text-main, #0F172A); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } /* Hamburger → X when active */ .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ============================================================ 7. MOBILE NAVIGATION DRAWER ============================================================ */ @media (max-width: 1024px) { header { z-index: 1060 !important; position: sticky !important; height: 96px !important; min-height: 96px !important; } .nav-wrapper { height: 96px !important; } .hamburger { display: flex !important; } /* Hide desktop CTA button in header on mobile */ .nav-wrapper>a.btn-primary, header>.container>.nav-wrapper>a.btn-primary { display: none !important; } header .btn-primary:not(.nav-list .btn-primary) { display: none !important; } /* Mobile nav drawer — slides in from right */ nav { position: fixed !important; top: 96px !important; right: 0 !important; left: auto !important; width: min(320px, 100%) !important; height: calc(100vh - 96px) !important; background: #FFFFFF !important; padding: 28px 20px !important; overflow-y: auto !important; z-index: 1050 !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12) !important; transform: translateX(100%) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; right: 0 !important; } nav.active { transform: translateX(0) !important; } /* Nav items in mobile */ .nav-list { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; width: 100% !important; } .nav-list>li { width: 100% !important; border-bottom: 1px solid #F1F5F9; } .nav-list>li:first-child { border-top: 1px solid #F1F5F9; } .nav-list a { font-size: 1rem !important; width: 100% !important; justify-content: space-between !important; padding: 14px 4px !important; display: flex !important; color: #0F172A !important; /* Force dark text — not grey, not faded */ font-weight: 500 !important; text-decoration: none !important; opacity: 1 !important; } .nav-list>li>a::after { display: none !important; } /* Dropdown in mobile nav */ .dropdown-menu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 4px 0 8px 16px !important; display: none !important; background: transparent !important; min-width: auto !important; } .nav-list>li.open .dropdown-menu, .nav-list>li.has-dropdown.open .dropdown-menu { display: block !important; } .dropdown-menu a { padding: 10px 8px !important; font-size: 0.9rem !important; border-left: 2px solid #F59E0B !important; margin-bottom: 2px !important; color: #334155 !important; /* Clear dark grey — readable and crisp */ font-weight: 500 !important; opacity: 1 !important; } .dropdown-menu a::after { display: none !important; } .dropdown-menu a:hover { padding-left: 12px !important; } /* Rotate chevron when dropdown open */ .nav-list>li.open .dropdown-icon { transform: rotate(180deg) !important; } } /* ============================================================ 8. MOBILE OVERLAY BACKDROP (when nav is open) ============================================================ */ .nav-overlay { display: none; position: fixed; top: 96px; left: 0; width: 100%; height: calc(100vh - 96px); background: rgba(15, 23, 42, 0.45); z-index: 1040; /* NO backdrop-filter — it bleeds into the nav drawer and makes text blurry */ } .nav-overlay.active { display: block; } /* ============================================================ 9. MOBILE LOGO SIZING ============================================================ */ @media (max-width: 1024px) { .logo img { height: 120px !important; max-width: 240px !important; } } @media (max-width: 768px) { header { height: 84px !important; min-height: 84px !important; } .nav-wrapper { height: 84px; } nav { top: 84px !important; height: calc(100vh - 84px) !important; } .nav-overlay { top: 84px; height: calc(100vh - 84px); } .logo img { height: 100px !important; max-width: 210px !important; } } @media (max-width: 375px) { header { height: 76px !important; min-height: 76px !important; } .nav-wrapper { height: 76px; } nav { top: 76px !important; height: calc(100vh - 76px) !important; width: 100% !important; } .nav-overlay { top: 76px; height: calc(100vh - 76px); } .logo img { height: 85px !important; max-width: 180px !important; } } /* ============================================================ 10. FOOTER — RESPONSIVE GRID COLLAPSE & ALIGNMENT ============================================================ */ .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1.5fr !important; gap: 40px !important; align-items: start !important; /* Vertically aligns columns to the top so headers line up perfectly */ } .footer-col { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px 28px !important; } .footer-col { padding: 0 8px !important; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .footer-col { padding: 0 !important; } .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; margin-top: 20px !important; } } /* ============================================================ 11. STATS / METRICS GRID ============================================================ */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 0; } .stat-card { border-right: none !important; border-bottom: 1px solid var(--border-light, #E2E8F0); padding-bottom: 16px; } .stat-card:last-child { border-bottom: none; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr !important; } .stat-number { font-size: 1.75rem !important; } } /* ============================================================ 12. PRODUCT GRID (Homepage showcase) ============================================================ */ @media (max-width: 640px) { .product-grid { grid-template-columns: 1fr !important; } .product-card img { height: 200px !important; } } /* ============================================================ 13. TRADE FEATURES GRID (Global Reach section) ============================================================ */ @media (max-width: 768px) { .trade-features { grid-template-columns: 1fr !important; } } /* ============================================================ 14. WHY US / GLASS GRID ============================================================ */ @media (max-width: 768px) { .glass-grid { grid-template-columns: 1fr !important; } } /* ============================================================ 15. CTA BANNER (Homepage) ============================================================ */ @media (max-width: 600px) { .cta-banner { padding: 36px 20px !important; } .cta-banner h3 { font-size: 1.4rem !important; } } /* ============================================================ 16. HERO SECTION — MOBILE ============================================================ */ @media (max-width: 768px) { .hero { min-height: 420px !important; max-height: none !important; height: auto !important; } .hero-overlay .container { padding: 40px 16px !important; } .hero-text-box { max-width: 100% !important; } .hero-actions { flex-direction: column !important; gap: 10px !important; } .hero-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; } } @media (max-width: 375px) { .hero { min-height: 380px !important; } .hero-title { font-size: 1.75rem !important; } } /* ============================================================ 17. COMPLIANCE BAR — MOBILE WRAP ============================================================ */ @media (max-width: 768px) { .compliance-flex { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 20px 0 !important; } } /* ============================================================ 18. ABOUT US PAGE ============================================================ */ @media (max-width: 1024px) { .workflow-grid { grid-template-columns: 1fr 1fr !important; } .workflow-grid::before, .workflow-grid::after { display: none !important; } .editorial-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } @media (max-width: 600px) { .workflow-grid { grid-template-columns: 1fr !important; } .ledger-wrapper { padding: 16px !important; } .procurement-section { padding: 50px 0 !important; } .corporate-section { padding: 50px 0 !important; } .power-statement { padding: 20px !important; } } /* ============================================================ 19. TABLE OVERFLOW — CONTAINED SCROLL ============================================================ */ .ledger-wrapper, .table-scroll-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .trade-table { min-width: 520px; } /* ============================================================ 20. CONTACT US PAGE ============================================================ */ @media (max-width: 1024px) { .dept-grid { grid-template-columns: 1fr 1fr !important; } .info-bar-card { grid-template-columns: 1fr !important; gap: 20px !important; } .form-card { padding: 32px 24px !important; } } @media (max-width: 600px) { .dept-grid { grid-template-columns: 1fr !important; } .form-row { grid-template-columns: 1fr !important; } .form-card { padding: 24px 16px !important; } .dept-section { padding: 50px 0 30px !important; } .office-info-strip { padding: 10px 0 40px !important; } .form-wrapper-section { padding: 40px 0 60px !important; } .product-grid-compact { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 375px) { .product-grid-compact { grid-template-columns: 1fr !important; } } /* ============================================================ 21. WASTE PAPER PAGE ============================================================ */ @media (max-width: 1024px) { .waste-grid-system { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 768px) { .waste-grid-system { grid-template-columns: 1fr !important; } .waste-hero-container { padding: 20px 16px !important; } .waste-image-frame { height: 280px !important; } .waste-hero-overlay h1 { font-size: 28px !important; } .waste-products-display { padding: 60px 0 !important; } .waste-grade-card { padding: 24px !important; } } @media (max-width: 480px) { .waste-image-frame { height: 220px !important; } .grade-meta { flex-direction: column !important; gap: 10px !important; } } /* MODAL — MOBILE FIT */ @media (max-width: 768px) { .modal-surface-card { width: 94% !important; padding: 28px 18px !important; max-height: 90vh; overflow-y: auto; } .modal-form-row { flex-direction: column !important; gap: 0 !important; } .modal-overlay-blur { padding: 20px 10px !important; align-items: flex-start !important; padding-top: 40px !important; } } /* ============================================================ 22. PRODUCT PAGES (kraft, copier, sbs, cupstock, fbb, duplex, pharma, eco packaging) ============================================================ */ /* Product hero / page banner */ @media (max-width: 768px) { .product-page-hero, .page-hero, .hero-banner { min-height: 280px !important; height: auto !important; } } /* Spec table on product pages */ .spec-table-wrapper, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* Product content split layouts */ @media (max-width: 1024px) { .product-split, .content-split, .two-col-grid { grid-template-columns: 1fr !important; } .spec-panel, .product-detail-panel { width: 100% !important; } } /* ============================================================ 23. BLOG PAGE ============================================================ */ @media (max-width: 1024px) { .blog-grid, .articles-grid, .post-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 640px) { .blog-grid, .articles-grid, .post-grid { grid-template-columns: 1fr !important; } } /* ============================================================ 24. SECTION PADDING — TIGHTEN ON MOBILE ============================================================ */ @media (max-width: 768px) { .showcase-section, .reach-section, .why-us-section, .about-section-modern, .benefits-section-modern, .deal-contact-section { padding-top: 60px !important; padding-bottom: 60px !important; } .product-directory { padding: 60px 16px !important; } .section-title-center { padding: 0 8px !important; } .section-title-center h2, .section-title h2 { font-size: 1.6rem !important; } .section-header h2 { font-size: 1.6rem !important; } } @media (max-width: 375px) { .showcase-section, .reach-section, .why-us-section { padding-top: 48px !important; padding-bottom: 48px !important; } } /* ============================================================ 25. FLOAT WHATSAPP BUTTON — MOBILE POSITION ============================================================ */ @media (max-width: 480px) { .whatsapp-float, .whatsapp-pulse-button { width: 52px !important; height: 52px !important; font-size: 26px !important; bottom: 20px !important; right: 16px !important; } } /* ============================================================ 26. TEXT WRAPPING SAFEGUARDS ============================================================ */ h1, h2, h3, h4, h5, h6 { word-break: break-word; overflow-wrap: break-word; } p, li, span, td, th, a { overflow-wrap: break-word; word-wrap: break-word; } /* ============================================================ 27. PREVENT ANY ELEMENT FROM CAUSING HORIZONTAL OVERFLOW ============================================================ */ section, main, footer, header, aside, article, div { max-width: 100%; } /* Prevent fixed-width images inside tables from overflowing */ table img { max-width: 100%; } /* ============================================================ 28. CTA SECTION (About page dark CTA) ============================================================ */ @media (max-width: 600px) { .cta-section { padding: 48px 0 !important; } .cta-section h2 { font-size: 1.5rem !important; } } /* ============================================================ 29. REACH / MAP SECTION ============================================================ */ @media (max-width: 768px) { .map-wrapper { border-radius: 8px !important; } } /* ============================================================ 30. CONTACT HERO ============================================================ */ @media (max-width: 768px) { .contact-hero { height: 36vh !important; min-height: 240px !important; } .contact-hero-overlay h1 { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; } } /* ============================================================ 31. ABOUT HERO ============================================================ */ @media (max-width: 768px) { .about-hero { height: 28vh !important; min-height: 180px !important; } } /* ============================================================ 32. DEPT CARDS (Contact) ============================================================ */ @media (max-width: 480px) { .dept-card { padding: 24px 16px !important; } .dept-name { font-size: 1.2rem !important; } } /* ============================================================ 33. WASTE DEAL CLOSER SECTION ============================================================ */ @media (max-width: 768px) { .waste-deal-closer { padding: 60px 16px !important; } .closer-box-content h2 { font-size: 1.5rem !important; } } /* ============================================================ 34. FORM ROWS — RESPONSIVE COLLAPSE ============================================================ */ @media (max-width: 600px) { .form-row { grid-template-columns: 1fr !important; gap: 0 !important; } /* Also handle flex-based form rows */ .form-row[style*="display: flex"], .form-row.flex-row { flex-direction: column !important; } } /* ============================================================ 35. BLOG POST HERO ============================================================ */ @media (max-width: 768px) { .blog-hero, .post-hero, .blog-header-section { padding: 50px 0 !important; min-height: auto !important; } .blog-hero h1, .post-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; } } /* ============================================================ 36. INFO BAR CARD (Contact page) ============================================================ */ @media (max-width: 1024px) { .info-bar-card { grid-template-columns: 1fr !important; gap: 20px !important; } } /* ============================================================ 37. NAVIGATION — ACTIVE LINK UNDERLINE FIX ON MOBILE ============================================================ */ @media (max-width: 1024px) { .nav-list>li>a::after { display: none !important; } }