/* ========================================================= SEA LICENSING SERVICES MEGA — ACTUAL ILLUSTRATION BACKGROUNDS ========================================================= */ /* --------------------------------------------------------- CARD FOUNDATION --------------------------------------------------------- */ .mega-menu[data-mega="services"] .services-mega-grid > a { position: relative !important; overflow: hidden !important; isolation: isolate !important; background: linear-gradient( 135deg, rgba(255,255,255,.985) 0%, rgba(249,252,254,.975) 100% ) !important; } /* --------------------------------------------------------- ACTUAL BACKGROUND IMAGE LAYER This replaces the temporary SVG/vector backgrounds --------------------------------------------------------- */ .mega-menu[data-mega="services"] .services-mega-grid > a::after { content: "" !important; position: absolute !important; top: 0 !important; right: -3% !important; bottom: 0 !important; width: 67% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; background-repeat: no-repeat !important; background-position: right center !important; background-size: contain !important; opacity: .19 !important; transform: scale(1.04) !important; transform-origin: right center !important; transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease !important; /* Fade illustration toward the text side */ -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.22) 19%, rgba(0,0,0,.78) 48%, #000 100% ) !important; mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.22) 19%, rgba(0,0,0,.78) 48%, #000 100% ) !important; } /* --------------------------------------------------------- CONTENT ALWAYS ABOVE IMAGE --------------------------------------------------------- */ .mega-menu[data-mega="services"] .services-mega-grid > a > * { position: relative !important; z-index: 2 !important; } /* ========================================================= 01 — VESSEL REGISTRATION ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/vessel-registration.html"]::after { background-image: url("/assets/images/services/cards/01-vessel-registration.png") !important; width: 72% !important; right: -5% !important; background-position: right 48% center !important; } /* ========================================================= 02 — SURVEYS & CERTIFICATION ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/surveys-certification.html"]::after { background-image: url("/assets/images/services/cards/02-surveys-certification.webp") !important; width: 69% !important; right: -3% !important; } /* ========================================================= 03 — SEAFARER LICENSING ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/seafarer-licensing.html"]::after { background-image: url("/assets/images/services/cards/03-seafarer-licensing.webp") !important; width: 68% !important; right: -2% !important; } /* ========================================================= 04 — CREW & MANNING ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/crew-manning.html"]::after { background-image: url("/assets/images/services/cards/04-crew-manning.webp") !important; width: 72% !important; right: -5% !important; } /* ========================================================= 05 — MARITIME TRAINING ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/training.html"]::after { background-image: url("/assets/images/services/cards/05-maritime-training.webp") !important; width: 71% !important; right: -4% !important; } /* ========================================================= 06 — ADVISORY & COMPLIANCE ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/stcw-2010.html"]::after { background-image: url("/assets/images/services/cards/06-advisory-compliance.webp") !important; width: 70% !important; right: -4% !important; } /* ========================================================= 07 — OFFSHORE COMPANIES FORMATION ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a[href="/offshore-companies-formation.html"]::after { background-image: url("/assets/images/services/cards/07-offshore-companies.webp") !important; width: 72% !important; right: -5% !important; } /* ========================================================= HOVER Illustration stays visible when card turns blue ========================================================= */ .mega-menu[data-mega="services"] .services-mega-grid > a:hover::after { opacity: .25 !important; transform: scale(1.09) translateX(-2px) !important; filter: brightness(1.18) contrast(.94) !important; } /* restore blue hover over white base */ .mega-menu[data-mega="services"] .services-mega-grid > a:hover { background: linear-gradient( 145deg, #073651 0%, #07547a 58%, #086b91 100% ) !important; } /* --------------------------------------------------------- TEXT CONTRAST --------------------------------------------------------- */ .mega-menu[data-mega="services"] .services-mega-grid > a b { position: relative !important; z-index: 3 !important; color: #0a2639 !important; } .mega-menu[data-mega="services"] .services-mega-grid > a small { position: relative !important; z-index: 3 !important; color: #58717f !important; } .mega-menu[data-mega="services"] .services-mega-grid > a:hover b { color: #ffffff !important; } .mega-menu[data-mega="services"] .services-mega-grid > a:hover small { color: rgba(241,250,253,.88) !important; } /* --------------------------------------------------------- ICON STAYS SHARP --------------------------------------------------------- */ .mega-menu[data-mega="services"] .services-mega-grid .mega-icon { z-index: 4 !important; background: rgba(239,249,253,.92) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } .mega-menu[data-mega="services"] .services-mega-grid > a:hover .mega-icon { background: rgba(255,255,255,.11) !important; } /* --------------------------------------------------------- REMOVE ANY OLD CARD ART PSEUDO EFFECTS --------------------------------------------------------- */ [data-mega="services"] .mega-grid > a::before { z-index: 3 !important; } /* --------------------------------------------------------- MOBILE / SMALLER DESKTOP --------------------------------------------------------- */ @media (max-width: 1200px) { .mega-menu[data-mega="services"] .services-mega-grid > a::after { width: 58% !important; opacity: .15 !important; } }