/* ============================================ PortaMist Visual Enhancements Upload to: public_html/portamist-enhancements.css Add to all pages inside : (homepage: href="./portamist-enhancements.css") ============================================ */ /* ============================================ 1. PRODUCT CARD HOVER EFFECTS ============================================ */ /* Card lift and shadow on hover */ .business-h-column.aaaa { transition: transform 0.3s ease, box-shadow 0.3s ease !important; border-radius: 10px !important; } .business-h-column.aaaa:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(13, 107, 203, 0.25) !important; } /* Blue top border on product cards */ .business-h-column.aaaa { border-top: 3px solid transparent !important; } .business-h-column.aaaa:hover { border-top: 3px solid #0D6BCB !important; } /* Smooth image zoom on card hover */ .business-h-column.aaaa img { transition: transform 0.4s ease !important; overflow: hidden !important; } .business-h-column.aaaa:hover img { transform: scale(1.04) !important; } /* Content block cards (aaaa h-col2) hover */ .h-col2 { transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .h-col2:hover { transform: translateY(-6px) !important; box-shadow: 0 15px 35px rgba(13, 107, 203, 0.2) !important; } .h-col2 img { transition: transform 0.4s ease !important; border-radius: 0 !important; opacity: 1 !important; filter: none !important; } .h-col2:hover img { transform: scale(1.03) !important; } /* ============================================ 2. BUTTON IMPROVEMENTS ============================================ */ /* Primary buttons - more prominent with glow */ .business-button, .btn-clean.btn-d { transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; letter-spacing: 0.5px !important; } .business-button:hover, .btn-clean.btn-d:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(13, 107, 203, 0.45) !important; filter: brightness(1.1) !important; } /* Pulse animation on CTA buttons */ @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(13, 107, 203, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(13, 107, 203, 0); } 100% { box-shadow: 0 0 0 0 rgba(13, 107, 203, 0); } } /* Read More buttons */ .bbbb.btn-d.btn-sq { animation: pulse-border 2.5s infinite !important; } /* WhatsApp float button enhancement */ .float { transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .float:hover { transform: scale(1.1) translateY(-3px) !important; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5) !important; } /* ============================================ 3. GALLERY IMAGE CAPTION GRADIENT ============================================ */ /* Replace heavy blue bar with gradient overlay */ .img-caption-wrap { overflow: hidden !important; border-radius: 10px !important; } .img-caption-wrap img { transition: transform 0.4s ease !important; } .img-caption-wrap:hover img { transform: scale(1.06) !important; } /* Gradient overlay instead of solid bar */ .img-caption-bar { background: linear-gradient(to top, rgba(13, 107, 203, 0.92) 0%, rgba(13, 107, 203, 0.4) 70%, transparent 100%) !important; padding: 30px 10px 12px 10px !important; font-size: 11px !important; letter-spacing: 2.5px !important; transition: all 0.3s ease !important; } .img-caption-wrap:hover .img-caption-bar { background: linear-gradient(to top, rgba(192, 57, 43, 0.92) 0%, rgba(192, 57, 43, 0.4) 70%, transparent 100%) !important; letter-spacing: 3px !important; } /* ============================================ 4. HERO VIDEO OVERLAY ============================================ */ /* Subtle dark overlay on video background sections to make text more readable */ .bloc.tc-1028.bgc-2879.d-bloc::before, .bloc.tc-1028.bgc-2879.bg-no-glo.d-bloc::before, #bloc-41 .video-bg-container::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, 0.15) !important; pointer-events: none !important; z-index: 1 !important; } /* ============================================ 5. MOBILE LAYOUT IMPROVEMENTS ============================================ */ /* ============================================ MOBILE OVERFLOW FIX ============================================ */ html { overflow-x: hidden !important; } body { overflow-x: hidden !important; position: relative !important; width: 100% !important; } .page-container { overflow-x: hidden !important; width: 100% !important; } .bloc { overflow-x: hidden !important; width: 100% !important; } @media (max-width: 768px) { .container { padding-left: 15px !important; padding-right: 15px !important; width: 100% !important; } .row { margin-left: 0 !important; margin-right: 0 !important; } /* Fix images overflowing */ img { max-width: 100% !important; height: auto !important; } /* Fix video containers */ video, iframe { max-width: 100% !important; } /* Fix nav overflowing */ .navbar { width: 100% !important; } /* Fix hero text overflowing */ h1.sss, h1.h1-style { font-size: 1.8rem !important; word-break: break-word !important; } /* Force all content cards to stack full width on mobile */ .col.aaaa.h-col2 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 30px !important; } /* Also force product cards on homepage to stack */ .col-lg-3.business-h-column.aaaa { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 25px !important; } .bloc { padding-top: 20px !important; padding-bottom: 20px !important; } /* Product cards on mobile */ .business-h-column.aaaa { margin-bottom: 25px !important; padding: 15px !important; border-radius: 10px !important; background: rgba(255,255,255,0.04) !important; } /* Content cards on mobile */ .col.aaaa.h-col2 { margin-bottom: 30px !important; padding: 12px !important; border-radius: 8px !important; } /* Bigger touch targets for buttons on mobile */ .business-button, .btn-clean.btn-d { padding: 14px 20px !important; font-size: 1rem !important; width: 100% !important; text-align: center !important; margin-bottom: 10px !important; } /* Hero text size on mobile */ .sss { font-size: 2rem !important; line-height: 1.3 !important; } /* Gallery images on mobile - full width */ .img-caption-wrap { margin-bottom: 15px !important; } /* Footer on mobile - more spacing */ .bloc.full-width-bloc.l-bloc h1.p-46-style { font-size: 0.85rem !important; margin-bottom: 5px !important; } /* Reduce excessive br tags effect on mobile */ br + br { display: none !important; } /* WhatsApp button position on mobile */ .float { bottom: 20px !important; right: 20px !important; width: 50px !important; height: 50px !important; font-size: 26px !important; } .my-float { margin-top: 12px !important; } /* Nav improvements on mobile */ .img-bloc-0-style { max-width: 150px !important; } } @media (max-width: 480px) { /* Extra small screens */ .sss { font-size: 1.7rem !important; } .business-h-column.aaaa { padding: 10px !important; } /* Stack social icons better */ .soctop .icon-md { font-size: 1.2rem !important; margin: 0 8px !important; } } /* ============================================ 6. GENERAL POLISH ============================================ */ /* Remove any fading/opacity on card images */ .bloc#bloc-41 img, .col.aaaa.h-col2 img, .img-fluid.mx-auto.d-block { opacity: 1 !important; filter: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Smooth scroll behaviour */ html { scroll-behavior: smooth !important; } /* Section heading hover effect */ .tc-6381.h2-padding-left { transition: color 0.3s ease !important; } /* Social icons in nav - hover effect */ .soctop .icon-md { transition: transform 0.2s ease, color 0.2s ease !important; display: inline-block !important; } .soctop .icon-md:hover { transform: translateY(-3px) scale(1.2) !important; color: #0D6BCB !important; } /* Scroll to top button */ .scrollToTop { transition: all 0.3s ease !important; opacity: 0.7 !important; } .scrollToTop:hover { opacity: 1 !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; } /* Footer links hover */ .ltc-6381 { transition: opacity 0.2s ease !important; } .ltc-6381:hover { opacity: 0.7 !important; } /* Nav link hover underline effect */ .nav-link.a-btn { position: relative !important; transition: color 0.2s ease !important; } .nav-link.a-btn::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 0 !important; height: 2px !important; background: #0D6BCB !important; transition: width 0.3s ease !important; } .nav-link.a-btn:hover::after { width: 100% !important; }