/* HOME */ .home-hero{height:690px;position:relative;overflow:hidden;background:#e3f1f8} .home-hero-photo{position:absolute;inset:0 0 0 31%;background-position:center;background-size:cover;transform:scale(1.02);will-change:transform} .home-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(225,240,248,.98) 0%,rgba(223,239,248,.97) 28%,rgba(214,233,245,.92) 42%,rgba(199,223,239,.74) 56%,rgba(179,209,230,.35) 69%,rgba(2,31,47,.08) 100%)} .home-hero-grid{height:100%;position:relative;z-index:2;display:grid;grid-template-columns:720px 1fr;align-items:center} .home-hero-copy h1{max-width:720px;margin:15px 0 0;font-size:70px;line-height:.91;letter-spacing:-.058em;text-transform:uppercase;font-weight:900}.home-hero-copy h1 span{display:block;color:var(--blue)} .home-hero-copy>p{max-width:600px;margin:18px 0 0;font-size:15px;line-height:1.58;color:#335160} .proof-row{max-width:710px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}.proof-row>div{display:flex;gap:9px;align-items:center}.proof-row svg{width:26px;height:26px;color:var(--blue)}.proof-row span{display:flex;flex-direction:column}.proof-row b{font-size:9px}.proof-row small{font-size:8px;color:#6b7e88;margin-top:2px} .home-hero-side{justify-self:end;align-self:start;margin-top:82px;display:flex;flex-direction:column;font-size:22px;line-height:1.02;text-transform:uppercase;color:rgba(255,255,255,.26);font-weight:900} .hero-edge-note{position:absolute;right:5%;bottom:30px;color:#fff;font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;z-index:3} .audience-gateway{display:grid;grid-template-columns:1fr 1fr;min-height:350px} .audience-card{position:relative;overflow:hidden;color:#fff}.audience-bg,.audience-overlay{position:absolute;inset:0}.audience-bg{background-size:cover;background-position:center;transition:.8s var(--ease)}.audience-card:hover .audience-bg{transform:scale(1.04)} .audience-overlay{background:linear-gradient(90deg,rgba(4,48,72,.97),rgba(4,48,72,.72),rgba(4,48,72,.15))}.seafarer-card .audience-overlay{background:linear-gradient(100deg,rgba(5,65,92,.97),rgba(5,65,92,.72),rgba(5,65,92,.16))} .audience-content{position:relative;z-index:2;max-width:600px;padding:55px 70px}.owner-card .audience-content{margin-left:auto}.audience-content>span{font-size:9px;text-transform:uppercase;letter-spacing:.16em;font-weight:900}.audience-content h2{margin:9px 0 0;font-size:48px;line-height:.95;letter-spacing:-.045em}.audience-content p{max-width:390px;margin:15px 0 0;color:rgba(255,255,255,.76);font-size:12px;line-height:1.55} .circle-go{display:flex;align-items:center;gap:14px;margin-top:26px}.circle-go svg{width:32px;height:32px;color:var(--cyan)}.circle-go i{width:38px;height:38px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-style:normal} .split-lead{display:grid;grid-template-columns:300px 1fr;gap:54px} .numbered-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.number-card{min-height:205px;padding:27px 25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:.3s}.number-card:hover{background:#fff;transform:translateY(-5px);box-shadow:0 18px 36px rgba(5,40,58,.07);z-index:2}.number-card>span{position:absolute;right:19px;top:15px;font-size:31px;color:#d8e7ed;font-weight:900}.number-card>svg{width:29px;height:29px;color:var(--blue)}.number-card h3{margin:19px 0 0;font-size:16px}.number-card p{font-size:10px;line-height:1.5;color:var(--muted)} .global-network{background:#062f49;color:#fff}.network-grid{min-height:410px;display:grid;grid-template-columns:300px 1fr 190px;gap:34px;align-items:center}.network-copy h2{font-size:42px}.network-copy p{color:rgba(255,255,255,.7)}.network-visual{position:relative}.network-visual img{width:100%;mix-blend-mode:screen;opacity:.94}.pulse{position:absolute;width:9px;height:9px;border-radius:50%;background:#3be1ff;box-shadow:0 0 0 0 rgba(59,225,255,.55);animation:pulse 2.5s infinite}.p1{left:36%;top:39%}.p2{left:63%;top:52%;animation-delay:.7s}.p3{left:78%;top:67%;animation-delay:1.3s}.network-values{display:flex;flex-direction:column;gap:10px;border-left:1px solid rgba(255,255,255,.24);padding-left:20px}.network-values span{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.7)}.network-values em{margin-top:15px;font:italic 16px/1.25 Georgia,serif} .compliance-grid{display:grid;grid-template-columns:1fr .8fr .8fr;gap:38px;align-items:center}.image-frame{overflow:hidden}.image-frame img{width:100%;height:305px;object-fit:cover;transition:.7s}.image-frame:hover img{transform:scale(1.035)}.stack-links{border:1px solid var(--line)}.stack-links a{min-height:74px;display:flex;align-items:center;gap:13px;padding:12px 15px;background:#f5fbfd;border-bottom:1px solid var(--line);transition:.25s}.stack-links a:last-child{border-bottom:0}.stack-links a:hover{background:#ebf7fb;transform:translateX(-4px)}.stack-links svg{width:27px;height:27px;color:var(--blue)}.stack-links span{display:flex;flex-direction:column}.stack-links b{font-size:11px}.stack-links small{font-size:8px;color:var(--muted);margin-top:3px} .digital-showcase{background:linear-gradient(180deg,#f8fbfc,#eef7fb)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.product-card{background:#fff;border:1px solid var(--line);padding:0 17px 19px;transition:.3s}.product-card:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(5,40,58,.09)}.product-art{height:160px;margin:0 -17px 17px;background:#dbeaf0;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden}.portal-art{background:linear-gradient(135deg,#065178,#078cc3);color:#fff}.portal-art span{font-size:8px;letter-spacing:.14em}.portal-art>b{font-size:16px;margin-top:4px}.portal-art i{display:block;width:70%;height:10px;background:rgba(255,255,255,.16);margin-top:9px}.verify-art{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}.verify-art svg{width:37px;height:37px;color:var(--blue)}.verify-art b{margin-top:7px}.verify-art span{font-size:8px;color:var(--muted);margin-top:4px}.request-art{background:linear-gradient(145deg,#e8f2f6,#cbdfe8)}.request-art svg{width:34px;height:34px;color:var(--blue)}.request-art b{margin-top:7px}.request-art span{font-size:8px;color:var(--muted);margin-top:4px}.product-card h3{font-size:17px;margin:0}.product-card p{font-size:10px;line-height:1.5;color:var(--muted);min-height:45px}.product-card>b{color:var(--blue);font-size:9px} .people-band{display:grid;grid-template-columns:.8fr 1.2fr;min-height:330px}.people-photo{background-size:cover;background-position:center}.people-copy{background:linear-gradient(120deg,#07334d,#06283d);color:#fff;padding:60px max(80px,calc((100vw - var(--shell))/2)) 60px 50px}.people-copy h2{font-size:42px;margin:11px 0 0}.people-copy p{max-width:630px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.7)}.people-copy .btn{margin-top:18px} .insights-layout{display:grid;grid-template-columns:280px 1fr;gap:50px} /* INNER HERO */ .inner-hero,.service-hero{height:500px;position:relative;overflow:hidden;background:var(--navy);color:#fff}.inner-hero.compact{height:410px}.inner-hero:before,.service-hero:before{content:"";position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center}.inner-hero-overlay,.service-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,30,46,.98) 0%,rgba(2,30,46,.88) 42%,rgba(2,30,46,.36) 70%,rgba(2,30,46,.12) 100%)} .inner-hero-grid,.service-hero-grid{height:100%;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,800px) 260px;gap:70px;align-items:center}.inner-hero h1,.service-hero h1{margin:14px 0 0;font-size:61px;line-height:.94;letter-spacing:-.05em;max-width:800px}.inner-hero p,.service-hero p{max-width:680px;margin:18px 0 0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6}.inner-hero aside,.hero-index{border-left:1px solid rgba(255,255,255,.24);padding-left:22px;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center}.inner-hero aside span{font-size:8px;text-transform:uppercase;color:#4dd8fa;letter-spacing:.13em}.inner-hero aside b{font-size:11px}.hero-index{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.hero-index span{font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:#52dafa}.hero-index b{font-size:21px;line-height:1.05}.hero-index small{font-size:9px;color:rgba(255,255,255,.6)} .editorial-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:90px}.sticky-lead{position:sticky;top:110px;align-self:start} .service-index{display:grid;grid-template-columns:330px 1fr;gap:65px}.service-list{border-top:1px solid var(--line)}.service-row{min-height:130px;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding:14px 8px;transition:.25s}.service-row:hover{padding-left:18px;background:#f7fbfd}.service-row>span{font-size:26px;font-weight:900;color:#d4e5ec}.service-row>div{display:grid;grid-template-columns:44px 1fr;gap:0 15px;align-items:center}.service-row svg{grid-row:1/3;width:30px;height:30px;color:var(--blue)}.service-row h3{margin:0;font-size:19px}.service-row p{margin:5px 0 0;font-size:10px;color:var(--muted)}.service-row>b{color:var(--blue);font-size:9px} .process-band{background:#f2f8fb}.process-grid{min-height:280px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:0}.process-grid>div{padding:52px 34px;border-right:1px solid #dbe7ec}.process-grid>div:last-child{border-right:0}.process-grid h2{margin:12px 0 0;font-size:34px;line-height:1}.process-step span{font-size:25px;color:#c7dfe9;font-weight:900}.process-step h3{font-size:17px;margin:20px 0 0}.process-step p{font-size:10px;line-height:1.55;color:var(--muted)} .flags-page-grid{display:grid;grid-template-columns:300px 1fr;gap:55px}.flag-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.flag-card{min-height:220px;border:1px solid var(--line);padding:26px;transition:.3s}.flag-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(5,40,58,.08)}.flag-card i{width:40px;height:40px;display:grid;place-items:center;background:var(--navy);color:#fff;font-style:normal;font-size:10px;font-weight:900}.flag-card h3{font-size:26px;margin:22px 0 0}.flag-card p{font-size:11px;color:var(--muted);line-height:1.55}.flag-card b{color:var(--blue);font-size:9px}.dark-feature{background:var(--navy);color:#fff}.dark-feature-grid{min-height:260px;display:flex;align-items:center;justify-content:space-between;gap:55px}.dark-feature h2{max-width:800px;margin:12px 0 0;font-size:38px;line-height:1}.dark-feature p{max-width:700px;color:rgba(255,255,255,.66);font-size:12px;line-height:1.55} .tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:35px}.tile-grid a{min-height:210px;background:#f5fafc;border:1px solid var(--line);padding:24px;transition:.3s}.tile-grid a:hover{background:#fff;transform:translateY(-5px);box-shadow:0 18px 35px rgba(5,40,58,.07)}.tile-grid svg{width:31px;height:31px;color:var(--blue)}.tile-grid h3{font-size:17px;margin:18px 0 0}.tile-grid p{font-size:10px;color:var(--muted);line-height:1.5} .portal-feature{background:var(--navy);color:#fff}.portal-feature-grid{min-height:380px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.portal-feature h2{font-size:43px;margin:12px 0 0}.portal-feature p{color:rgba(255,255,255,.7);font-size:13px;line-height:1.55;max-width:540px}.portal-window{background:#dfeef4;padding:18px;border-radius:8px;box-shadow:0 28px 60px rgba(0,0,0,.18)}.browser{height:24px;background:#f6f8f9;display:flex;align-items:center;gap:5px;padding:0 9px}.browser i{width:5px;height:5px;border-radius:50%;background:#a9b9c0}.portal-window>div:last-child{height:220px;background:linear-gradient(135deg,#05628d,#079fd4);display:flex;flex-direction:column;align-items:center;justify-content:center}.portal-window strong{font-size:16px}.portal-window span{font-size:9px;letter-spacing:.14em;margin-top:4px}.portal-window b{display:block;width:65%;height:13px;background:rgba(255,255,255,.15);margin-top:10px} .principles{background:#f3f8fb}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr)}.principle-grid>div{padding:50px 30px;border-right:1px solid var(--line)}.principle-grid>div:last-child{border-right:0}.principle-grid span{font-size:26px;color:#c5dde8;font-weight:900}.principle-grid h3{font-size:21px;margin:18px 0 0}.principle-grid p{font-size:10px;color:var(--muted);line-height:1.55}.people-story{display:grid;grid-template-columns:1fr 1fr;min-height:380px}.story-photo{background-size:cover;background-position:center}.story-copy{background:var(--navy);color:#fff;padding:70px max(70px,calc((100vw - var(--shell))/2)) 70px 55px}.story-copy p{color:rgba(255,255,255,.7)} .featured-story{display:grid;grid-template-columns:1.15fr 1fr;background:#f4f9fb;border:1px solid var(--line);overflow:hidden}.featured-story img{width:100%;height:330px;object-fit:cover}.featured-story>div{padding:45px}.featured-story span{font-size:9px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.1em}.featured-story h2{font-size:35px;line-height:1;margin:12px 0 0}.featured-story p{font-size:12px;color:var(--muted);line-height:1.55}.featured-story b{display:inline-block;color:var(--blue);font-size:10px;margin-top:13px} .contact-page-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:50px}.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.contact-cards a{min-height:220px;border:1px solid var(--line);padding:24px;display:flex;gap:15px;transition:.3s}.contact-cards a:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(5,40,58,.07)}.contact-cards svg{width:28px;height:28px;color:var(--blue)}.contact-cards span{display:flex;flex-direction:column}.contact-cards small{font-size:8px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.12em}.contact-cards b{font-size:13px;margin-top:8px}.contact-cards p{font-size:9px;line-height:1.5;color:var(--muted);margin-top:12px}.contact-panel{background:var(--navy);color:#fff;padding:36px}.contact-panel h2{font-size:31px;line-height:1;margin:12px 0 0}.contact-panel p{font-size:11px;line-height:1.6;color:rgba(255,255,255,.68)}.contact-panel .btn{margin-top:16px}.contact-map-band{background:#f1f8fb;padding:60px 0}.contact-map-band .shell{display:grid;grid-template-columns:320px 1fr;gap:50px;align-items:center}.contact-map-band h2{font-size:36px;margin:12px 0 0}.contact-map-band p{font-size:11px;color:var(--muted);line-height:1.55}.contact-map-band img{width:100%} .verification-section{background:#f2f8fb}.verification-card{max-width:750px!important;text-align:center;background:#fff;border:1px solid var(--line);padding:58px;box-shadow:0 24px 65px rgba(5,40,58,.07)}.verification-card>svg{width:54px;height:54px;color:var(--blue)}.verification-card>span{display:block;margin-top:15px;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-weight:900}.verification-card h2{font-size:37px;margin:12px 0 0}.verification-card p{font-size:12px;color:var(--muted)}.verification-card .btn{margin-top:18px}.verification-card small{display:block;margin-top:18px;color:var(--muted);font-size:9px} .request-hero{background:var(--navy)}.request-grid{display:grid;grid-template-columns:340px 1fr;gap:60px}.request-guide{background:#f3f9fb;padding:30px;align-self:start;position:sticky;top:100px}.request-guide h2{font-size:31px;margin:12px 0 0}.request-guide ul{padding-left:18px}.request-guide li{margin:9px 0;font-size:11px}.request-guide p{font-size:9px;color:var(--muted);line-height:1.5}.request-form{border:1px solid var(--line);padding:32px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.request-form label{display:flex;flex-direction:column;gap:7px;margin-bottom:17px;font-size:10px;font-weight:800}.request-form input,.request-form select,.request-form textarea{width:100%;border:1px solid #ccdce3;background:#fff;padding:13px 14px;outline:0;transition:.2s}.request-form input:focus,.request-form select:focus,.request-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,143,209,.08)}.check-line{flex-direction:row!important;align-items:center!important;font-weight:500!important}.check-line input{width:auto}.form-note{font-size:9px;color:var(--muted);line-height:1.5} /* SERVICE DETAIL */ .service-hero{height:540px}.service-hero-grid{grid-template-columns:minmax(0,780px) 260px}.service-hero h1{font-size:64px}.service-scope{background:#f3f8fb;padding:65px 0}.scope-layout{display:grid;grid-template-columns:300px 1fr;gap:55px}.scope-layout h2{font-size:37px;line-height:1;margin:12px 0 0}.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.scope-grid>div{min-height:130px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:13px;align-items:flex-start}.scope-grid svg{width:24px;height:24px;color:var(--blue)}.scope-grid span{font-size:12px;font-weight:800;line-height:1.3}.requirements-layout{display:grid;grid-template-columns:360px 1fr;gap:60px}.requirements-list{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.requirements-list>div{min-height:86px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px;display:flex;align-items:center;gap:15px}.requirements-list span{font-size:20px;color:#cbdfe7;font-weight:900}.requirements-list b{font-size:11px}.related-section{display:grid;grid-template-columns:300px 1fr;gap:55px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.related-grid a{border:1px solid var(--line);padding:23px;min-height:160px;transition:.3s}.related-grid a:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(5,40,58,.07)}.related-grid h3{font-size:17px;margin:0}.related-grid p{font-size:9px;line-height:1.5;color:var(--muted)}.related-grid b{font-size:9px;color:var(--blue)} .flag-code-large{width:150px;height:150px;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:44px;font-weight:900;color:#fff} /* ARTICLES */ .article-hero{padding:72px 0;background:linear-gradient(180deg,#f5fafc,#fff)}.article-hero-grid{display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:center}.article-hero h1{font-size:54px;line-height:.98;letter-spacing:-.045em;margin:14px 0 0}.article-hero p{font-size:14px;line-height:1.6;color:var(--muted);max-width:700px}.article-meta{display:block;margin-top:17px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#78909b}.article-hero img{width:100%;height:310px;object-fit:cover} .article-body{padding:70px 0}.article-layout{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:80px}.article-layout article section{padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--line)}.article-layout article h2{font-size:28px;margin:0 0 12px}.article-layout article p{font-size:14px;line-height:1.75;color:#3d5664}.article-note{background:#eef7fb;border-left:4px solid var(--blue);padding:18px;font-size:11px;line-height:1.6;color:#445f6c}.article-layout aside{align-self:start;position:sticky;top:100px;background:var(--navy);color:#fff;padding:28px}.article-layout aside>span{font-size:8px;text-transform:uppercase;color:#57dcfb;letter-spacing:.12em}.article-layout aside h3{font-size:25px;line-height:1.05}.article-layout aside .text-link{color:#57dcfb} /* RESPONSIVE PAGES */ @media(max-width:1050px){ .home-hero-grid{grid-template-columns:620px 1fr}.home-hero-copy h1{font-size:61px}.home-hero-side{display:none}.split-lead,.insights-layout,.service-index,.flags-page-grid,.digital-showcase .split-lead{grid-template-columns:260px 1fr;gap:36px}.network-grid{grid-template-columns:260px 1fr}.network-values{display:none}.compliance-grid{grid-template-columns:1fr 1fr}.stack-links{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.stack-links a{border-right:1px solid var(--line);border-bottom:0}.people-copy{padding-right:40px}.inner-hero-grid,.service-hero-grid{grid-template-columns:1fr 220px}.inner-hero h1,.service-hero h1{font-size:51px}.contact-page-grid{grid-template-columns:1fr}.request-grid{grid-template-columns:280px 1fr}.article-hero-grid{grid-template-columns:1fr 400px}.article-layout{grid-template-columns:1fr 260px} } @media(max-width:760px){ .home-hero{height:690px}.home-hero-photo{inset:0;background-position:62% center}.home-hero-overlay{background:linear-gradient(to bottom,rgba(242,250,252,.99),rgba(242,250,252,.92) 50%,rgba(242,250,252,.22) 84%,rgba(2,31,47,.12))}.home-hero-grid{grid-template-columns:1fr;align-items:start;padding-top:65px}.home-hero-copy h1{font-size:46px}.proof-row{grid-template-columns:1fr 1fr}.audience-gateway{grid-template-columns:1fr}.audience-content{padding:42px 25px;margin:0!important}.split-lead,.insights-layout,.service-index,.flags-page-grid,.editorial-grid,.portal-feature-grid,.contact-map-band .shell,.request-grid,.scope-layout,.requirements-layout,.related-section,.article-hero-grid,.article-layout{grid-template-columns:1fr}.section-lead,.sticky-lead,.request-guide,.article-layout aside{position:static}.numbered-grid,.scope-grid{grid-template-columns:1fr}.network-grid{grid-template-columns:1fr;padding:50px 0}.network-copy{max-width:500px}.compliance-grid{grid-template-columns:1fr}.stack-links{grid-template-columns:1fr}.stack-links a{border-right:0;border-bottom:1px solid var(--line)}.product-grid,.flag-cards,.contact-cards,.tile-grid,.principle-grid,.related-grid{grid-template-columns:1fr}.people-band,.people-story{grid-template-columns:1fr}.people-photo,.story-photo{min-height:300px}.people-copy,.story-copy{padding:45px 25px}.inner-hero,.service-hero{height:570px}.inner-hero.compact{height:460px}.inner-hero-grid,.service-hero-grid{grid-template-columns:1fr;align-content:center;gap:25px}.inner-hero aside,.hero-index{display:none}.inner-hero h1,.service-hero h1{font-size:43px}.service-row{grid-template-columns:45px 1fr}.service-row>b{display:none}.process-grid{grid-template-columns:1fr}.process-grid>div{padding:34px 20px;border-right:0;border-bottom:1px solid var(--line)}.requirements-list{grid-template-columns:1fr}.article-hero img{height:240px}.article-layout aside{margin-top:20px}.field-row{grid-template-columns:1fr} } /* ========================================================= SEA LICENSING — HOME HERO PREMIUM PASS ========================================================= */ /* --------------------------------------------------------- CINEMATIC KEN BURNS BACKGROUND --------------------------------------------------------- */ .home-hero-photo { background-size: auto 101%; background-position: 55% 50%; animation: slHeroKenBurns 18s cubic-bezier(.45, .05, .55, .95) infinite alternate; will-change: background-size, background-position, transform; } @keyframes slHeroKenBurns { 0% { background-size: auto 101%; background-position: 54% 50%; } 50% { background-size: auto 106%; background-position: 57% 48.5%; } 100% { background-size: auto 110%; background-position: 59% 47.5%; } } /* --------------------------------------------------------- STRONGER PROOF / TRUST ITEMS --------------------------------------------------------- */ .proof-row { max-width: 750px; gap: 24px; margin-top: 31px; } .proof-row > div { gap: 11px; } .proof-row svg { width: 30px; height: 30px; flex: 0 0 30px; } .proof-row b { font-size: 11px; line-height: 1.15; font-weight: 850; } .proof-row small { margin-top: 4px; font-size: 9.5px; line-height: 1.25; color: #627a87; } /* Completely remove the old image-side wording */ .home-hero-side { display: none !important; } /* --------------------------------------------------------- OCEANS CONNECT OPPORTUNITIES — GLASS LABEL --------------------------------------------------------- */ .hero-edge-note { right: 4.5%; bottom: 35px; min-height: 42px; display: inline-flex; align-items: center; gap: 11px; padding: 0 18px 0 14px; border: 1px solid rgba(255,255,255,.30); border-radius: 999px; color: #fff; background: linear-gradient( 110deg, rgba(2, 37, 57, .55), rgba(3, 63, 91, .34) ); box-shadow: 0 12px 32px rgba(0, 25, 40, .18), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(10px); font-size: 9px; line-height: 1; font-weight: 850; letter-spacing: .18em; text-shadow: 0 1px 7px rgba(0, 29, 48, .52); animation: slOceanLabelFloat 5s ease-in-out infinite; overflow: hidden; } /* Animated cyan dot */ .hero-edge-note::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #56dcff; box-shadow: 0 0 0 0 rgba(86,220,255,.55); animation: slOceanDotPulse 2.6s ease-out infinite; } /* Moving highlight */ .hero-edge-note::after { content: ""; position: absolute; top: -60%; left: -26%; width: 18%; height: 220%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.22), transparent ); transform: rotate(18deg); animation: slOceanShine 6s ease-in-out infinite; } @keyframes slOceanLabelFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-4px,0); } } @keyframes slOceanDotPulse { 0% { box-shadow: 0 0 0 0 rgba(86,220,255,.60); } 70% { box-shadow: 0 0 0 9px rgba(86,220,255,0); } 100% { box-shadow: 0 0 0 0 rgba(86,220,255,0); } } @keyframes slOceanShine { 0%, 40% { left: -26%; } 72%, 100% { left: 126%; } } @media (max-width: 760px) { .home-hero-photo { background-size: auto 100%; animation: slHeroKenBurnsMobile 18s ease-in-out infinite alternate; } @keyframes slHeroKenBurnsMobile { from { background-size: auto 100%; background-position: 61% 50%; } to { background-size: auto 108%; background-position: 66% 48%; } } .proof-row b { font-size: 10px; } .proof-row small { font-size: 8.5px; } .hero-edge-note { display: none; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .home-hero-photo, .hero-edge-note, .hero-edge-note::before, .hero-edge-note::after { animation: none !important; } } /* ========================================================= HERO IMAGE GRADIENT REFINEMENT ========================================================= */ .home-hero-overlay { position: absolute; inset: 0; background: radial-gradient( circle at 18% 24%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,0) 44% ), linear-gradient( 90deg, rgba(232,243,250,.97) 0%, rgba(227,240,248,.96) 18%, rgba(217,233,243,.91) 34%, rgba(200,222,236,.76) 47%, rgba(167,202,225,.42) 60%, rgba(104,156,194,.18) 72%, rgba(8,42,67,.10) 100% ), linear-gradient( 180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 26%, rgba(7,54,87,.04) 58%, rgba(8,59,95,.13) 100% ); } /* Slight image enhancement under the overlay */ .home-hero-photo { filter: saturate(1.04) contrast(1.03) brightness(1.01); } /* ========================================================= HERO IMAGE GRADIENT REFINEMENT ========================================================= */ .home-hero-overlay { position: absolute; inset: 0; background: radial-gradient( circle at 18% 24%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,0) 44% ), linear-gradient( 90deg, rgba(232,243,250,.97) 0%, rgba(227,240,248,.96) 18%, rgba(217,233,243,.91) 34%, rgba(200,222,236,.76) 47%, rgba(167,202,225,.42) 60%, rgba(104,156,194,.18) 72%, rgba(8,42,67,.10) 100% ), linear-gradient( 180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 26%, rgba(7,54,87,.04) 58%, rgba(8,59,95,.13) 100% ); } /* Slight image enhancement under the overlay */ .home-hero-photo { filter: saturate(1.04) contrast(1.03) brightness(1.01); } /* ========================================================= HERO FIX — REMOVE SEAM + DARK BLUE LEFT GRADIENT ========================================================= */ /* Make image cover full hero so no hard split/seam appears */ .home-hero-photo { inset: 0 !important; background-repeat: no-repeat; background-size: cover; background-position: 68% center; filter: saturate(1.04) contrast(1.02) brightness(.96); } /* Dark bluish premium gradient from left to transparent */ .home-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(6, 32, 52, .82) 0%, rgba(8, 42, 66, .78) 15%, rgba(11, 57, 88, .68) 28%, rgba(16, 80, 118, .50) 40%, rgba(18, 100, 145, .26) 52%, rgba(18, 100, 145, .10) 62%, rgba(18, 100, 145, 0) 72% ), radial-gradient( circle at 18% 24%, rgba(74, 170, 230, .16) 0%, rgba(74, 170, 230, .08) 24%, rgba(74, 170, 230, 0) 48% ), linear-gradient( 180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 20%, rgba(2,19,31,.12) 100% ); } /* Ensure copy is readable on the darker left side */ .home-hero-copy { position: relative; z-index: 2; } .home-hero-copy > span, .home-hero-copy .eyebrow { color: #67bbf4 !important; } .home-hero-copy h1 { color: #ffffff !important; } .home-hero-copy h1 span, .home-hero-copy h1 em, .home-hero-copy h1 strong:last-child { color: #55b8ff !important; } .home-hero-copy > p { color: rgba(255,255,255,.82) !important; } /* Also improve proof row readability on dark overlay */ .proof-row b { color: #ffffff !important; } .proof-row small { color: rgba(255,255,255,.72) !important; } .proof-row svg { color: #4db9ff !important; } /* Keep the CTA buttons clean over the dark hero */ .home-hero .btn-outline, .home-hero .btn-secondary { background: rgba(255,255,255,.92); color: #08263b; border-color: rgba(255,255,255,.75); } .home-hero .btn-outline:hover, .home-hero .btn-secondary:hover { background: #ffffff; } /* Mobile tuning */ @media (max-width: 760px) { .home-hero-photo { background-position: 73% center; } .home-hero-overlay { background: linear-gradient( 180deg, rgba(6, 32, 52, .82) 0%, rgba(8, 42, 66, .72) 34%, rgba(12, 80, 118, .38) 60%, rgba(12, 80, 118, .10) 100% ); } } /* ========================================================= HERO FULL-BLEED / FULL-COVER FIX ========================================================= */ /* Make whole hero section stretch full viewport width */ .home-hero { position: relative; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden; } /* Force any hero media wrappers to fill full area */ .home-hero-media, .home-hero-visual, .home-hero-bg, .home-hero-photo-wrap, .home-hero-image { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; } /* Main background image must cover all available hero area */ .home-hero-photo { position: absolute !important; inset: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Overlay must also stretch full width */ .home-hero-overlay { position: absolute !important; inset: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; } /* Keep text/content above background */ .home-hero .shell, .home-hero .container, .home-hero-copy { position: relative; z-index: 2; } /* Keep floating label above hero image */ .hero-edge-note { z-index: 3; } /* ========================================================= HERO ART DIRECTION REFINEMENT Better placement + premium image effect ========================================================= */ /* Hero section */ .home-hero { position: relative; overflow: hidden; } /* Background image treatment */ .home-hero-photo { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-repeat: no-repeat !important; background-size: cover !important; /* Better visual framing */ background-position: 72% 46% !important; /* Premium image grading */ filter: saturate(1.08) contrast(1.08) brightness(.84); /* subtle motion */ transform: scale(1.06); transform-origin: 78% center; animation: homeHeroKenBurns 24s ease-in-out infinite alternate; will-change: transform, background-position, filter; } /* Dark bluish cinematic overlay */ .home-hero-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(5, 25, 43, .84) 0%, rgba(7, 37, 61, .74) 16%, rgba(10, 56, 90, .58) 32%, rgba(13, 79, 119, .34) 48%, rgba(13, 79, 119, .12) 63%, rgba(13, 79, 119, 0) 76% ), radial-gradient( circle at 76% 30%, rgba(89, 181, 255, .18) 0%, rgba(89, 181, 255, .08) 18%, rgba(89, 181, 255, 0) 38% ), linear-gradient( 180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 20%, rgba(1,15,28,.16) 72%, rgba(1,15,28,.28) 100% ); } /* soft cinematic vignette */ .home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at center, rgba(255,255,255,0) 52%, rgba(0,22,40,.10) 78%, rgba(0,18,34,.20) 100% ); z-index: 1; } /* keep content above overlays */ .home-hero .shell, .home-hero .container, .home-hero-copy, .home-hero-content, .hero-edge-note { position: relative; z-index: 3; } /* slow premium motion */ @keyframes homeHeroKenBurns { 0% { transform: scale(1.06) translate3d(0, 0, 0); } 100% { transform: scale(1.11) translate3d(-1.2%, -0.6%, 0); } } /* Large desktop fine-tuning */ @media (min-width: 1440px) { .home-hero-photo { background-position: 74% 44% !important; } } /* Laptop tuning */ @media (max-width: 1280px) { .home-hero-photo { background-position: 70% 48% !important; } } /* Tablet/mobile tuning */ @media (max-width: 760px) { .home-hero-photo { background-position: 74% center !important; transform-origin: 72% center; animation: none; transform: scale(1.03); filter: saturate(1.05) contrast(1.05) brightness(.82); } .home-hero-overlay { background: linear-gradient( 180deg, rgba(5, 25, 43, .82) 0%, rgba(8, 46, 74, .66) 35%, rgba(12, 89, 130, .28) 70%, rgba(12, 89, 130, .08) 100% ); } } /* ========================================================= HOME HERO — FINAL FRAMING CORRECTION ========================================================= */ /* Better ship framing: show more bridge/top and reduce crop */ .home-hero-photo { inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-repeat: no-repeat !important; /* move visual focus upward/right */ background-position: 72% 30% !important; /* less aggressive grading */ filter: saturate(1.06) contrast(1.04) brightness(.95) !important; transform-origin: 75% 30% !important; animation: slHeroFinalMove 26s ease-in-out infinite alternate !important; } /* Very subtle cinematic movement */ @keyframes slHeroFinalMove { 0% { transform: scale(1.01) translate3d(0,0,0); } 100% { transform: scale(1.035) translate3d(-.45%,-.25%,0); } } /* Refined gradient: dark/navy left, but keep ship bright and detailed */ .home-hero-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(5,29,48,.76) 0%, rgba(6,38,62,.71) 17%, rgba(8,52,81,.60) 31%, rgba(10,72,108,.42) 43%, rgba(12,91,133,.22) 54%, rgba(12,91,133,.07) 64%, rgba(12,91,133,0) 73% ), linear-gradient( 180deg, rgba(2,20,34,.03) 0%, rgba(2,20,34,0) 55%, rgba(2,20,34,.16) 100% ) !important; } /* Remove any previous vignette that darkens ship too much */ .home-hero::after { background: linear-gradient( 180deg, rgba(0,0,0,0) 60%, rgba(1,18,30,.10) 100% ) !important; } /* --------------------------------------------------------- FIX OCEANS CONNECT OPPORTUNITIES BADGE --------------------------------------------------------- */ .hero-edge-note { position: absolute !important; left: auto !important; right: 4.2% !important; top: auto !important; bottom: 32px !important; z-index: 5 !important; margin: 0 !important; transform: none; } /* Keep its floating animation independent of positioning */ @keyframes slOceanLabelFloatFixed { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .hero-edge-note { animation: slOceanLabelFloatFixed 5s ease-in-out infinite !important; } /* Desktop widescreen tuning */ @media (min-width: 1500px) { .home-hero-photo { background-position: 72% 27% !important; } } /* Laptop tuning */ @media (min-width: 761px) and (max-width: 1300px) { .home-hero-photo { background-position: 70% 30% !important; } } /* Mobile */ @media (max-width: 760px) { .home-hero-photo { background-position: 72% 32% !important; animation: none !important; transform: scale(1.01) !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .home-hero-photo, .hero-edge-note { animation: none !important; } } /* ========================================================= HOME HERO — PREMIUM TEXT READABILITY ========================================================= */ /* Dedicated reading zone. Keeps the ship photograph visible while giving the headline, paragraph, CTAs and proof points a controlled corporate backdrop. */ .home-hero-copy { position: relative !important; z-index: 4 !important; isolation: isolate; padding: 36px 38px 34px 0; } /* Soft glass/navy panel fading toward the ship */ .home-hero-copy::before { content: ""; position: absolute; z-index: -1; top: -28px; bottom: -27px; left: -70px; right: -75px; border-radius: 0 26px 26px 0; background: linear-gradient( 90deg, rgba(3, 25, 42, .82) 0%, rgba(4, 34, 55, .76) 44%, rgba(6, 52, 80, .60) 68%, rgba(8, 72, 106, .28) 86%, rgba(8, 72, 106, 0) 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(2px); pointer-events: none; } /* Eyebrow */ .home-hero-copy .eyebrow { color: #68d5ff !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .20em !important; text-shadow: 0 2px 10px rgba(0,20,34,.42); } /* Main headline */ .home-hero-copy h1 { color: #ffffff !important; text-shadow: 0 3px 18px rgba(0,20,34,.28); font-weight: 900 !important; } /* Blue highlight */ .home-hero-copy h1 span { color: #58b9ff !important; text-shadow: 0 3px 18px rgba(0,32,54,.30); } /* Description */ .home-hero-copy > p { color: rgba(255,255,255,.90) !important; font-size: 15.5px !important; line-height: 1.65 !important; max-width: 650px !important; text-shadow: 0 2px 8px rgba(0,20,34,.32); } /* --------------------------------------------------------- HERO CTA BUTTONS --------------------------------------------------------- */ .home-hero-copy .btn-primary { background: linear-gradient( 135deg, #119fe3, #0788c9 ) !important; color: #fff !important; border-color: rgba(74,190,242,.45) !important; box-shadow: 0 12px 28px rgba(0,75,116,.26) !important; } .home-hero-copy .btn-ghost { background: rgba(255,255,255,.96) !important; color: #08283d !important; border-color: rgba(255,255,255,.88) !important; box-shadow: 0 10px 25px rgba(0,20,34,.16) !important; } /* --------------------------------------------------------- PROOF / TRUST ROW --------------------------------------------------------- */ .proof-row { margin-top: 30px !important; max-width: 765px !important; gap: 26px !important; } .proof-row > div { position: relative; gap: 11px !important; min-width: 0; } .proof-row svg { width: 31px !important; height: 31px !important; color: #54c7ff !important; filter: drop-shadow( 0 2px 7px rgba(0,25,42,.24) ); } .proof-row b { color: #ffffff !important; font-size: 11.5px !important; font-weight: 900 !important; line-height: 1.15 !important; text-shadow: 0 2px 7px rgba(0,20,34,.38); } .proof-row small { color: rgba(255,255,255,.76) !important; font-size: 9.5px !important; line-height: 1.3 !important; margin-top: 4px !important; } /* Fine separation from the image without creating a hard line */ .home-hero /* ========================================================= HOME HERO — PREMIUM TEXT READABILITY ========================================================= */ /* Dedicated reading zone. Keeps the ship photograph visible while giving the headline, paragraph, CTAs and proof points a controlled corporate backdrop. */ .home-hero-copy { position: relative !important; z-index: 4 !important; isolation: isolate; padding: 36px 38px 34px 0; } /* Soft glass/navy panel fading toward the ship */ .home-hero-copy::before { content: ""; position: absolute; z-index: -1; top: -28px; bottom: -27px; left: -70px; right: -75px; border-radius: 0 26px 26px 0; background: linear-gradient( 90deg, rgba(3, 25, 42, .82) 0%, rgba(4, 34, 55, .76) 44%, rgba(6, 52, 80, .60) 68%, rgba(8, 72, 106, .28) 86%, rgba(8, 72, 106, 0) 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(2px); pointer-events: none; } /* Eyebrow */ .home-hero-copy .eyebrow { color: #68d5ff !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .20em !important; text-shadow: 0 2px 10px rgba(0,20,34,.42); } /* Main headline */ .home-hero-copy h1 { color: #ffffff !important; text-shadow: 0 3px 18px rgba(0,20,34,.28); font-weight: 900 !important; } /* Blue highlight */ .home-hero-copy h1 span { color: #58b9ff !important; text-shadow: 0 3px 18px rgba(0,32,54,.30); } /* Description */ .home-hero-copy > p { color: rgba(255,255,255,.90) !important; font-size: 15.5px !important; line-height: 1.65 !important; max-width: 650px !important; text-shadow: 0 2px 8px rgba(0,20,34,.32); } /* --------------------------------------------------------- HERO CTA BUTTONS --------------------------------------------------------- */ .home-hero-copy .btn-primary { background: linear-gradient( 135deg, #119fe3, #0788c9 ) !important; color: #fff !important; border-color: rgba(74,190,242,.45) !important; box-shadow: 0 12px 28px rgba(0,75,116,.26) !important; } .home-hero-copy .btn-ghost { background: rgba(255,255,255,.96) !important; color: #08283d !important; border-color: rgba(255,255,255,.88) !important; box-shadow: 0 10px 25px rgba(0,20,34,.16) !important; } /* --------------------------------------------------------- PROOF / TRUST ROW --------------------------------------------------------- */ .proof-row { margin-top: 30px !important; max-width: 765px !important; gap: 26px !important; } .proof-row > div { position: relative; gap: 11px !important; min-width: 0; } .proof-row svg { width: 31px !important; height: 31px !important; color: #54c7ff !important; filter: drop-shadow( 0 2px 7px rgba(0,25,42,.24) ); } .proof-row b { color: #ffffff !important; font-size: 11.5px !important; font-weight: 900 !important; line-height: 1.15 !important; text-shadow: 0 2px 7px rgba(0,20,34,.38); } .proof-row small { color: rgba(255,255,255,.76) !important; font-size: 9.5px !important; line-height: 1.3 !important; margin-top: 4px !important; } /* Fine separation from the image without creating a hard line */ .home-hero cd /home/sealicen/public_html STAMP=$(date +%Y%m%d-%H%M%S) cp -a assets/css/pages.css \ "assets/css/pages.css.before-hero-natural-blend-$STAMP" cat >> assets/css/pages.css <<'EOF' /* ========================================================= HOME HERO — NATURAL TEXT / IMAGE BLEND Remove boxed appearance while keeping strong readability ========================================================= */ /* Remove the obvious glass rectangle */ .home-hero-copy::before { top: -45px !important; bottom: -42px !important; left: -12vw !important; right: -240px !important; border-radius: 0 !important; background: linear-gradient( 90deg, rgba(3, 24, 40, .88) 0%, rgba(4, 30, 49, .84) 24%, rgba(5, 39, 62, .78) 43%, rgba(7, 52, 80, .63) 60%, rgba(10, 72, 105, .38) 75%, rgba(12, 91, 130, .15) 88%, rgba(12, 91, 130, 0) 100% ) !important; box-shadow: none !important; backdrop-filter: none !important; } /* Overall hero tint, now much more subtle */ .home-hero-overlay { background: linear-gradient( 90deg, rgba(2, 23, 39, .24) 0%, rgba(4, 38, 60, .16) 28%, rgba(8, 64, 96, .08) 47%, rgba(8, 64, 96, 0) 66% ), linear-gradient( 180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, 0) 58%, rgba(1, 18, 30, .11) 100% ) !important; } /* Slightly stronger paragraph */ .home-hero-copy > p { color: rgba(255,255,255,.92) !important; text-shadow: 0 2px 10px rgba(0,18,30,.42) !important; } /* Proof row a little larger and easier to scan */ .proof-row { gap: 30px !important; } .proof-row svg { width: 33px !important; height: 33px !important; } .proof-row b { font-size: 12px !important; } .proof-row small { font-size: 10px !important; } /* More refined blue highlight */ .home-hero-copy h1 span { color: #59baff !important; } /* Keep blend natural on very wide screens */ @media (min-width: 1500px) { .home-hero-copy::before { right: -300px !important; } } /* Mobile uses a simpler full-width fade */ @media (max-width: 760px) { .home-hero-copy::before { left: -25px !important; right: -25px !important; top: -24px !important; bottom: -24px !important; background: linear-gradient( 180deg, rgba(3,24,40,.87) 0%, rgba(4,36,57,.78) 68%, rgba(6,62,91,.50) 100% ) !important; } } /* ========================================================= HOME HERO — CLEAN FULL-WIDTH NAVY GRADIENT Remove visible text box completely ========================================================= */ /* Remove boxed reading panel */ .home-hero-copy::before { display: none !important; } /* Full hero gradient instead of a rectangle */ .home-hero-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 90deg, rgba(3, 24, 42, .88) 0%, rgba(4, 31, 51, .84) 16%, rgba(5, 40, 64, .77) 28%, rgba(6, 51, 80, .64) 39%, rgba(8, 66, 100, .48) 49%, rgba(10, 82, 120, .30) 59%, rgba(12, 95, 137, .15) 67%, rgba(12, 95, 137, .05) 73%, rgba(12, 95, 137, 0) 79% ), linear-gradient( 180deg, rgba(0, 15, 28, .05) 0%, rgba(0, 15, 28, 0) 48%, rgba(0, 15, 28, .16) 100% ) !important; } /* Keep the content above the gradient */ .home-hero-grid, .home-hero-copy { position: relative !important; z-index: 3 !important; } /* Strong but natural typography */ .home-hero-copy h1 { color: #fff !important; text-shadow: 0 3px 18px rgba(0, 15, 28, .30) !important; } .home-hero-copy h1 span { color: #5bbcff !important; } .home-hero-copy > p { color: rgba(255,255,255,.90) !important; text-shadow: 0 2px 10px rgba(0, 15, 28, .34) !important; } /* Proof items */ .proof-row b { color: #fff !important; } .proof-row small { color: rgba(255,255,255,.76) !important; } .proof-row svg { color: #54c8ff !important; } /* Slight depth at extreme left edge */ .home-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 18%; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(2,19,33,.20), rgba(2,19,33,0) ); } /* Mobile */ @media (max-width: 760px) { .home-hero-overlay { background: linear-gradient( 180deg, rgba(3,24,42,.88) 0%, rgba(5,42,67,.78) 44%, rgba(8,72,105,.42) 72%, rgba(8,72,105,.14) 100% ) !important; } } /* ========================================================= HOME HERO — SLIGHTLY DARKER FOR READABILITY ========================================================= */ .home-hero-overlay { background: linear-gradient( 90deg, rgba(2, 18, 32, .94) 0%, rgba(3, 24, 40, .91) 16%, rgba(4, 33, 53, .84) 28%, rgba(5, 44, 69, .73) 40%, rgba(7, 59, 89, .56) 50%, rgba(9, 75, 110, .34) 60%, rgba(11, 91, 131, .18) 69%, rgba(11, 91, 131, .05) 76%, rgba(11, 91, 131, 0) 82% ), linear-gradient( 180deg, rgba(1, 15, 28, .04) 0%, rgba(1, 15, 28, 0) 50%, rgba(1, 15, 28, .20) 100% ) !important; } /* Slightly stronger text contrast */ .home-hero-copy h1 { text-shadow: 0 4px 22px rgba(0, 10, 20, .42) !important; } .home-hero-copy > p { color: rgba(255,255,255,.94) !important; text-shadow: 0 2px 11px rgba(0, 10, 20, .48) !important; } .proof-row b { text-shadow: 0 2px 8px rgba(0, 10, 20, .48) !important; } .proof-row small { color: rgba(255,255,255,.80) !important; } /* ========================================================= HOME HERO — PREMIUM MARITIME TEXT PALETTE ========================================================= */ /* Small upper label */ .home-hero-copy .eyebrow { color: #62D7F5 !important; text-shadow: 0 2px 10px rgba(0,19,31,.42) !important; } /* Main headline — softer than pure white */ .home-hero-copy h1 { color: #F2F7FA !important; text-shadow: 0 4px 20px rgba(0,13,24,.42) !important; } /* Confidence line — premium icy blue */ .home-hero-copy h1 span { color: #68C6F7 !important; text-shadow: 0 3px 18px rgba(0,32,52,.38) !important; } /* Description copy */ .home-hero-copy > p { color: #D9E8EF !important; text-shadow: 0 2px 10px rgba(0,12,22,.42) !important; } /* Proof / trust titles */ .proof-row b { color: #F4FAFC !important; text-shadow: 0 2px 8px rgba(0,12,22,.44) !important; } /* Proof descriptions */ .proof-row small { color: #AFC8D5 !important; } /* Proof icons */ .proof-row svg { color: #63D2FF !important; } /* Primary CTA */ .home-hero-copy .btn-primary { background: linear-gradient( 135deg, #129ED9, #087DB6 ) !important; color: #ffffff !important; } /* Secondary CTA */ .home-hero-copy .btn-ghost { background: rgba(242,248,251,.95) !important; color: #0A2B3E !important; border-color: rgba(210,235,245,.88) !important; } /* ========================================================= HERO TEXT — DARKER / RICHER PREMIUM PALETTE ========================================================= */ .home-hero-copy .eyebrow{ color:#67C0F2 !important; text-shadow:0 2px 10px rgba(0,15,26,.45) !important; } .home-hero-copy h1{ color:#F4F7FA !important; text-shadow:0 4px 18px rgba(0,12,22,.38) !important; } /* darker blue for “WITH CONFIDENCE.” */ .home-hero-copy h1 span{ color:#4F9FDE !important; text-shadow:0 4px 16px rgba(0,18,34,.40) !important; } /* paragraph */ .home-hero-copy > p{ color:#D7E4EC !important; text-shadow:0 2px 10px rgba(0,10,18,.38) !important; } /* proof row titles */ .proof-row b{ color:#EEF5F9 !important; font-size:15px !important; text-shadow:0 2px 8px rgba(0,10,18,.35) !important; } /* proof row descriptions */ .proof-row small{ color:#B5C8D4 !important; font-size:12px !important; } /* proof icons */ .proof-row svg{ color:#62B8EE !important; } /* ========================================================= HOME HERO — PREMIUM CORPORATE MARITIME PALETTE ========================================================= */ /* Small upper label */ .home-hero-copy .eyebrow { color: #7EDAF7 !important; font-size: 10.5px !important; font-weight: 900 !important; letter-spacing: .19em !important; text-shadow: 0 2px 10px rgba(0,16,29,.42) !important; } /* Main heading: soft pearl rather than harsh pure white */ .home-hero-copy h1 { color: #F5F8FA !important; text-shadow: 0 3px 18px rgba(0,12,23,.32) !important; } /* Highlight line: premium ice-blue gradient rather than flat blue */ .home-hero-copy h1 span { color: transparent !important; background: linear-gradient( 90deg, #8AD8FB 0%, #65C4F3 45%, #45AAE2 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 3px 10px rgba(0,35,58,.24) ); } /* Description */ .home-hero-copy > p { color: #D4E2E9 !important; font-size: 14.5px !important; line-height: 1.62 !important; max-width: 640px !important; text-shadow: 0 2px 9px rgba(0,12,22,.36) !important; } /* --------------------------------------------------------- TRUST / PROOF ROW --------------------------------------------------------- */ .proof-row { max-width: 760px !important; gap: 27px !important; } .proof-row > div { min-width: 0 !important; align-items: center !important; } .proof-row svg { width: 29px !important; height: 29px !important; flex: 0 0 29px !important; color: #6ED2F7 !important; filter: drop-shadow( 0 2px 6px rgba(0,30,48,.25) ); } .proof-row b { color: #EDF4F7 !important; font-size: 10.5px !important; line-height: 1.08 !important; font-weight: 850 !important; white-space: nowrap; text-shadow: 0 2px 7px rgba(0,12,22,.34) !important; } .proof-row small { color: #A9BDC8 !important; font-size: 8.5px !important; line-height: 1.2 !important; white-space: nowrap; margin-top: 4px !important; } /* --------------------------------------------------------- BUTTON TREATMENT --------------------------------------------------------- */ .home-hero-copy .btn-primary { background: linear-gradient( 135deg, #1196D0, #087DB5 ) !important; border-color: rgba(92,195,239,.34) !important; box-shadow: 0 11px 26px rgba(0,73,109,.22) !important; } .home-hero-copy .btn-ghost { background: #F2F7F9 !important; color: #0A293C !important; border-color: rgba(206,225,233,.92) !important; } /* More restrained button hover */ .home-hero-copy .btn-primary:hover { background: linear-gradient( 135deg, #17A7DE, #0885BF ) !important; } /* --------------------------------------------------------- Keep left background rich enough for the softer palette --------------------------------------------------------- */ .home-hero-overlay { background: linear-gradient( 90deg, rgba(2,18,32,.95) 0%, rgba(3,26,43,.91) 17%, rgba(4,37,59,.83) 30%, rgba(5,50,77,.70) 42%, rgba(8,67,99,.52) 53%, rgba(9,82,118,.30) 63%, rgba(10,95,136,.13) 71%, rgba(10,95,136,0) 80% ), linear-gradient( 180deg, rgba(0,10,18,.02) 0%, rgba(0,10,18,0) 55%, rgba(0,10,18,.17) 100% ) !important; } /* ========================================================= HOME HERO — PREMIUM CORPORATE MARITIME PALETTE ========================================================= */ /* Small upper label */ .home-hero-copy .eyebrow { color: #7EDAF7 !important; font-size: 10.5px !important; font-weight: 900 !important; letter-spacing: .19em !important; text-shadow: 0 2px 10px rgba(0,16,29,.42) !important; } /* Main heading: soft pearl rather than harsh pure white */ .home-hero-copy h1 { color: #F5F8FA !important; text-shadow: 0 3px 18px rgba(0,12,23,.32) !important; } /* Highlight line: premium ice-blue gradient rather than flat blue */ .home-hero-copy h1 span { color: transparent !important; background: linear-gradient( 90deg, #8AD8FB 0%, #65C4F3 45%, #45AAE2 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 3px 10px rgba(0,35,58,.24) ); } /* Description */ .home-hero-copy > p { color: #D4E2E9 !important; font-size: 14.5px !important; line-height: 1.62 !important; max-width: 640px !important; text-shadow: 0 2px 9px rgba(0,12,22,.36) !important; } /* --------------------------------------------------------- TRUST / PROOF ROW --------------------------------------------------------- */ .proof-row { max-width: 760px !important; gap: 27px !important; } .proof-row > div { min-width: 0 !important; align-items: center !important; } .proof-row svg { width: 29px !important; height: 29px !important; flex: 0 0 29px !important; color: #6ED2F7 !important; filter: drop-shadow( 0 2px 6px rgba(0,30,48,.25) ); } .proof-row b { color: #EDF4F7 !important; font-size: 10.5px !important; line-height: 1.08 !important; font-weight: 850 !important; white-space: nowrap; text-shadow: 0 2px 7px rgba(0,12,22,.34) !important; } .proof-row small { color: #A9BDC8 !important; font-size: 8.5px !important; line-height: 1.2 !important; white-space: nowrap; margin-top: 4px !important; } /* --------------------------------------------------------- BUTTON TREATMENT --------------------------------------------------------- */ .home-hero-copy .btn-primary { background: linear-gradient( 135deg, #1196D0, #087DB5 ) !important; border-color: rgba(92,195,239,.34) !important; box-shadow: 0 11px 26px rgba(0,73,109,.22) !important; } .home-hero-copy .btn-ghost { background: #F2F7F9 !important; color: #0A293C !important; border-color: rgba(206,225,233,.92) !important; } /* More restrained button hover */ .home-hero-copy .btn-primary:hover { background: linear-gradient( 135deg, #17A7DE, #0885BF ) !important; } /* --------------------------------------------------------- Keep left background rich enough for the softer palette --------------------------------------------------------- */ .home-hero-overlay { background: linear-gradient( 90deg, rgba(2,18,32,.95) 0%, rgba(3,26,43,.91) 17%, rgba(4,37,59,.83) 30%, rgba(5,50,77,.70) 42%, rgba(8,67,99,.52) 53%, rgba(9,82,118,.30) 63%, rgba(10,95,136,.13) 71%, rgba(10,95,136,0) 80% ), linear-gradient( 180deg, rgba(0,10,18,.02) 0%, rgba(0,10,18,0) 55%, rgba(0,10,18,.17) 100% ) !important; } /* ========================================================= HOME HERO — DARKER LEFT GRADIENT OVERRIDE ========================================================= */ .home-hero-overlay { background: linear-gradient( 90deg, rgba(1, 13, 24, 0.98) 0%, rgba(2, 20, 34, 0.95) 12%, rgba(3, 28, 45, 0.91) 24%, rgba(5, 39, 60, 0.84) 36%, rgba(7, 53, 79, 0.72) 48%, rgba(10, 70, 101, 0.54) 60%, rgba(13, 90, 126, 0.28) 72%, rgba(13, 90, 126, 0.00) 82% ), linear-gradient( 180deg, rgba(0, 8, 18, 0.10) 0%, rgba(0, 8, 18, 0.00) 42%, rgba(0, 8, 18, 0.18) 100% ) !important; } /* ========================================================= HOME HERO — RESTORE ORIGINAL SEA LICENSING TEXT PALETTE ========================================================= */ .home-hero-copy .eyebrow { color: #078FD1 !important; text-shadow: none !important; } .home-hero-copy h1 { color: #082235 !important; text-shadow: none !important; } .home-hero-copy h1 span { color: #078FD1 !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; filter: none !important; text-shadow: none !important; } .home-hero-copy > p { color: #3B5969 !important; text-shadow: none !important; } .proof-row b { color: #082235 !important; text-shadow: none !important; font-size: 10.5px !important; white-space: nowrap !important; } .proof-row small { color: #6B7E88 !important; font-size: 8.5px !important; white-space: nowrap !important; } .proof-row svg { color: #078FD1 !important; filter: none !important; } /* Give the text a lighter blue-tinted reading area */ .home-hero-overlay { background: linear-gradient( 90deg, rgba(224, 240, 248, .96) 0%, rgba(220, 237, 247, .93) 18%, rgba(210, 231, 243, .87) 32%, rgba(192, 220, 238, .72) 45%, rgba(164, 204, 228, .48) 57%, rgba(129, 185, 216, .25) 68%, rgba(95, 164, 203, .08) 77%, rgba(95, 164, 203, 0) 84% ), linear-gradient( 180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 62%, rgba(3,30,48,.08) 100% ) !important; } /* Remove any extra dark left tint */ .home-hero::before { display: none !important; } /* Keep buttons coherent with original palette */ .home-hero-copy .btn-primary { background: #078FD1 !important; color: #fff !important; } .home-hero-copy .btn-ghost { background: rgba(255,255,255,.96) !important; color: #082235 !important; border-color: rgba(7,143,209,.35) !important; } /* ========================================================= HERO BOTTOM FEATURE POINTS — READABILITY FIX ========================================================= */ .hero-highlights, .hero-points, .hero-features { position: relative; z-index: 5; gap: 18px; margin-top: 26px; } .hero-highlights .item, .hero-points .item, .hero-features .item, .hero-highlights .highlight-item, .hero-points .highlight-item, .hero-features .highlight-item, .hero-highlights .feature-item, .hero-points .feature-item, .hero-features .feature-item { background: rgba(7, 24, 40, 0.36); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20); } .hero-highlights svg, .hero-points svg, .hero-features svg { width: 24px; height: 24px; flex: 0 0 24px; color: #56b7ff; stroke-width: 2.1; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); } .hero-highlights strong, .hero-points strong, .hero-features strong, .hero-highlights b, .hero-points b, .hero-features b { display: block; font-size: 19px; line-height: 1.15; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); } .hero-highlights span, .hero-points span, .hero-features span, .hero-highlights small, .hero-points small, .hero-features small, .hero-highlights p, .hero-points p, .hero-features p { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; color: rgba(255,255,255,0.86); margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22); } @media (max-width: 1200px) { .hero-highlights .item, .hero-points .item, .hero-features .item, .hero-highlights .highlight-item, .hero-points .highlight-item, .hero-features .highlight-item, .hero-highlights .feature-item, .hero-points .feature-item, .hero-features .feature-item { padding: 12px 14px; } .hero-highlights strong, .hero-points strong, .hero-features strong, .hero-highlights b, .hero-points b, .hero-features b { font-size: 17px; } .hero-highlights span, .hero-points span, .hero-features span, .hero-highlights small, .hero-points small, .hero-features small, .hero-highlights p, .hero-points p, .hero-features p { font-size: 13px; } } /* ========================================================= HERO BOTTOM FEATURE POINTS — READABILITY FIX ========================================================= */ .hero-highlights, .hero-points, .hero-features { position: relative; z-index: 5; gap: 18px; margin-top: 26px; } .hero-highlights .item, .hero-points .item, .hero-features .item, .hero-highlights .highlight-item, .hero-points .highlight-item, .hero-features .highlight-item, .hero-highlights .feature-item, .hero-points .feature-item, .hero-features .feature-item { background: rgba(7, 24, 40, 0.36); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20); } .hero-highlights svg, .hero-points svg, .hero-features svg { width: 24px; height: 24px; flex: 0 0 24px; color: #56b7ff; stroke-width: 2.1; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); } .hero-highlights strong, .hero-points strong, .hero-features strong, .hero-highlights b, .hero-points b, .hero-features b { display: block; font-size: 19px; line-height: 1.15; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); } .hero-highlights span, .hero-points span, .hero-features span, .hero-highlights small, .hero-points small, .hero-features small, .hero-highlights p, .hero-points p, .hero-features p { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; color: rgba(255,255,255,0.86); margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22); } @media (max-width: 1200px) { .hero-highlights .item, .hero-points .item, .hero-features .item, .hero-highlights .highlight-item, .hero-points .highlight-item, .hero-features .highlight-item, .hero-highlights .feature-item, .hero-points .feature-item, .hero-features .feature-item { padding: 12px 14px; } .hero-highlights strong, .hero-points strong, .hero-features strong, .hero-highlights b, .hero-points b, .hero-features b { font-size: 17px; } .hero-highlights span, .hero-points span, .hero-features span, .hero-highlights small, .hero-points small, .hero-features small, .hero-highlights p, .hero-points p, .hero-features p { font-size: 13px; } } /* ========================================================= HOME HERO — PROOF ROW FINAL READABILITY ========================================================= */ .proof-row { max-width: 770px !important; margin-top: 30px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; } /* Individual premium glass tiles */ .proof-row > div { min-height: 64px; padding: 11px 12px !important; display: flex !important; align-items: center !important; gap: 10px !important; border: 1px solid rgba(20, 105, 150, .13); border-radius: 9px; background: rgba(244, 250, 253, .78); box-shadow: 0 8px 22px rgba(5, 50, 73, .06), inset 0 1px 0 rgba(255,255,255,.86); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); transition: transform .28s cubic-bezier(.22,1,.36,1), background .28s ease, box-shadow .28s ease; } .proof-row > div:hover { transform: translateY(-3px); background: rgba(250, 253, 255, .94); box-shadow: 0 14px 28px rgba(5, 50, 73, .10), inset 0 1px 0 rgba(255,255,255,.95); } /* Icons */ .proof-row svg { width: 29px !important; height: 29px !important; flex: 0 0 29px !important; color: #078FD1 !important; stroke-width: 1.9 !important; filter: none !important; } /* Text wrapper */ .proof-row > div > span { display: flex !important; flex-direction: column !important; min-width: 0; } /* Main title */ .proof-row b { color: #082235 !important; font-size: 11px !important; line-height: 1.12 !important; font-weight: 850 !important; white-space: nowrap !important; text-shadow: none !important; } /* Subtitle */ .proof-row small { color: #5C7481 !important; font-size: 8.5px !important; line-height: 1.25 !important; font-weight: 500 !important; white-space: nowrap !important; margin-top: 4px !important; text-shadow: none !important; } /* Tablet */ @media (max-width: 1100px) { .proof-row { grid-template-columns: repeat(2, 1fr) !important; } } /* Mobile */ @media (max-width: 600px) { .proof-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .proof-row > div { min-height: 58px; padding: 9px !important; } .proof-row b { font-size: 9.5px !important; } .proof-row small { font-size: 7.5px !important; } } /* ========================================================= HERO PROOF ROW — PREMIUM CONTINUOUS GLASS STRIP ========================================================= */ .proof-row { max-width: 785px !important; margin-top: 28px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; border: 1px solid rgba(255,255,255,.48); border-radius: 12px; background: rgba(239, 248, 252, .74); box-shadow: 0 12px 30px rgba(6, 50, 72, .08), inset 0 1px 0 rgba(255,255,255,.80); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; } /* remove separate-card appearance */ .proof-row > div { min-height: 66px !important; padding: 12px 15px !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; position: relative; } /* separators */ .proof-row > div:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 15px; bottom: 15px; width: 1px; background: rgba(21, 100, 137, .14); } /* subtle hover */ .proof-row > div:hover { transform: none !important; background: rgba(255,255,255,.34) !important; } /* icons */ .proof-row svg { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; color: #078FD1 !important; } /* titles */ .proof-row b { color: #082235 !important; font-size: 11px !important; line-height: 1.1 !important; font-weight: 850 !important; white-space: nowrap !important; } /* descriptions */ .proof-row small { color: #607783 !important; font-size: 8.5px !important; line-height: 1.2 !important; white-space: nowrap !important; margin-top: 4px !important; } @media (max-width: 1100px) { .proof-row { grid-template-columns: repeat(2,1fr) !important; } .proof-row > div:nth-child(2)::after { display: none; } .proof-row > div:nth-child(-n+2) { border-bottom: 1px solid rgba(21,100,137,.12) !important; } } /* ========================================================= SHIPOWNERS + SEAFARERS — PREMIUM COMPOSITION PASS ========================================================= */ .audience-gateway { min-height: 365px !important; position: relative; } /* --------------------------------------------------------- IMAGE PLACEMENT --------------------------------------------------------- */ .audience-card .audience-bg { transform: scale(1.015); transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .7s ease; } /* Shipowners image: keep people/ship toward the right, preserve darker open space for text on left */ .owner-card .audience-bg { background-position: 68% center !important; filter: saturate(1.03) contrast(1.04) brightness(.93); } /* Seafarer: keep officer clearly on right */ .seafarer-card .audience-bg { background-position: 73% center !important; filter: saturate(1.02) contrast(1.04) brightness(.92); } .audience-card:hover .audience-bg { transform: scale(1.045); } /* --------------------------------------------------------- SHIPOWNERS TEXT — MOVE INTO LEFT NEGATIVE SPACE --------------------------------------------------------- */ .owner-card .audience-content { margin-left: 0 !important; margin-right: auto !important; max-width: 560px !important; padding: 58px 45px 52px 82px !important; } /* --------------------------------------------------------- SEAFARERS TEXT --------------------------------------------------------- */ .seafarer-card .audience-content { margin-left: 0 !important; max-width: 570px !important; padding: 58px 60px 52px 70px !important; } /* --------------------------------------------------------- OVERLAYS --------------------------------------------------------- */ .owner-card .audience-overlay { background: linear-gradient( 90deg, rgba(3,27,45,.93) 0%, rgba(4,39,61,.88) 25%, rgba(5,52,79,.76) 43%, rgba(7,69,101,.49) 61%, rgba(8,82,117,.18) 78%, rgba(8,82,117,0) 100% ) !important; } .seafarer-card .audience-overlay { background: linear-gradient( 90deg, rgba(3,36,55,.94) 0%, rgba(4,48,70,.88) 27%, rgba(5,63,89,.72) 47%, rgba(7,79,108,.42) 65%, rgba(9,91,122,.14) 80%, rgba(9,91,122,0) 100% ) !important; } /* --------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------- */ .audience-content > span { color: #69D2F5 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .17em !important; } .audience-content h2 { color: #fff !important; font-size: 47px !important; line-height: .96 !important; text-shadow: 0 3px 16px rgba(0,16,28,.28); } .audience-content p { max-width: 430px !important; color: rgba(255,255,255,.82) !important; font-size: 12px !important; line-height: 1.58 !important; } /* Icons / arrows */ .circle-go { margin-top: 25px !important; } .circle-go > svg { color: #55CCFA !important; } .circle-go i { background: linear-gradient( 135deg, #139DD9, #087CB5 ) !important; box-shadow: 0 9px 22px rgba(0,76,111,.28); } /* Very subtle separator between audiences */ .audience-gateway::after { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; z-index: 4; pointer-events: none; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.22) 25%, rgba(255,255,255,.22) 75%, transparent ); } /* Mobile */ @media (max-width: 760px) { .owner-card .audience-content, .seafarer-card .audience-content { padding: 42px 25px !important; max-width: 100% !important; } .owner-card .audience-bg { background-position: 67% center !important; } .seafarer-card .audience-bg { background-position: 72% center !important; } .audience-gateway::after { display: none; } .audience-content h2 { font-size: 39px !important; } } /* ========================================================= HOMEPAGE AUDIENCE GATEWAY — PREMIUM EDITORIAL REDESIGN ========================================================= */ .audience-gateway { position: relative; display: grid !important; grid-template-columns: 1fr 1fr !important; min-height: 410px !important; overflow: hidden; background: #05283d; } /* --------------------------------------------------------- PANEL BASE --------------------------------------------------------- */ .audience-card { position: relative; min-height: 410px; overflow: hidden; color: #fff; isolation: isolate; } /* Image layer */ .audience-card .audience-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-repeat: no-repeat !important; background-size: cover !important; transform: scale(1.015); transition: transform 1.15s cubic-bezier(.22,1,.36,1), filter .7s ease; } /* Shipowners image positioning */ .owner-card .audience-bg { background-position: 66% center !important; filter: saturate(1.02) contrast(1.05) brightness(.92); } /* Seafarers positioning */ .seafarer-card .audience-bg { background-position: 73% center !important; filter: saturate(1.02) contrast(1.04) brightness(.93); } /* Cinematic hover */ .audience-card:hover .audience-bg { transform: scale(1.055); } /* --------------------------------------------------------- DARK IMAGE OVERLAYS --------------------------------------------------------- */ .owner-card .audience-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(3,24,40,.94) 0%, rgba(4,33,53,.90) 27%, rgba(6,48,73,.74) 48%, rgba(8,66,96,.38) 67%, rgba(8,66,96,.08) 84%, rgba(8,66,96,0) 100% ), linear-gradient( 0deg, rgba(1,17,28,.42) 0%, rgba(1,17,28,0) 55% ) !important; } .seafarer-card .audience-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(3,27,43,.95) 0%, rgba(4,39,59,.88) 29%, rgba(5,56,81,.69) 49%, rgba(7,74,103,.34) 68%, rgba(7,74,103,.07) 85%, rgba(7,74,103,0) 100% ), linear-gradient( 0deg, rgba(1,17,28,.38) 0%, rgba(1,17,28,0) 54% ) !important; } /* --------------------------------------------------------- CONTENT POSITIONING --------------------------------------------------------- */ .audience-content { position: absolute !important; z-index: 4; left: 0; bottom: 0; width: 100%; max-width: none !important; margin: 0 !important; padding: 0 70px 54px 70px !important; } /* Give text a controlled readable width */ .audience-content > span, .audience-content > h2, .audience-content > p, .audience-content > .audience-cta { max-width: 480px; } /* --------------------------------------------------------- SECTION NUMBERS --------------------------------------------------------- */ .owner-card::before, .seafarer-card::before { position: absolute; z-index: 3; top: 34px; right: 38px; font-size: 70px; line-height: 1; font-weight: 900; letter-spacing: -.06em; color: rgba(255,255,255,.095); pointer-events: none; } .owner-card::before { content: "01"; } .seafarer-card::before { content: "02"; } /* --------------------------------------------------------- EYEBROW --------------------------------------------------------- */ .audience-content > span { display: block; margin-bottom: 11px; color: #6ED7F7 !important; font-size: 9px !important; line-height: 1; font-weight: 900 !important; letter-spacing: .19em !important; text-transform: uppercase; } /* --------------------------------------------------------- HEADINGS --------------------------------------------------------- */ .audience-content h2 { margin: 0 !important; color: #F6FAFC !important; font-size: clamp(39px, 3vw, 54px) !important; line-height: .94 !important; font-weight: 850 !important; letter-spacing: -.045em !important; text-shadow: 0 3px 18px rgba(0,13,23,.26); } /* --------------------------------------------------------- BODY TEXT --------------------------------------------------------- */ .audience-content p { margin: 17px 0 0 !important; color: rgba(231,241,246,.82) !important; font-size: 12px !important; line-height: 1.62 !important; text-shadow: 0 2px 9px rgba(0,15,26,.24); } /* --------------------------------------------------------- PREMIUM TEXT CTA --------------------------------------------------------- */ .audience-cta { width: fit-content; margin-top: 27px; display: inline-flex; align-items: center; gap: 16px; color: #FFFFFF; font-size: 10px; line-height: 1; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; position: relative; padding-bottom: 9px; } /* underline */ .audience-cta::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(105,210,247,.55); transform-origin: left center; transition: transform .35s cubic-bezier(.22,1,.36,1); } /* Arrow is now editorial, not circular */ .audience-cta i { width: auto !important; height: auto !important; display: inline-block !important; border-radius: 0 !important; background: none !important; color: #67D4F5; font-size: 17px; font-style: normal; box-shadow: none !important; transition: transform .35s cubic-bezier(.22,1,.36,1); } .audience-card:hover .audience-cta i { transform: translateX(7px); } .audience-card:hover .audience-cta::after { transform: scaleX(.62); } /* --------------------------------------------------------- CENTRE DIVIDER --------------------------------------------------------- */ .audience-gateway::after { content: ""; position: absolute; z-index: 6; left: 50%; top: 38px; bottom: 38px; width: 1px; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.24) 24%, rgba(255,255,255,.24) 76%, transparent ); pointer-events: none; } /* --------------------------------------------------------- SUBTLE PANEL EDGE LIGHT --------------------------------------------------------- */ .audience-card::after { content: ""; position: absolute; z-index: 2; inset: 0; border-top: 1px solid rgba(255,255,255,.06); pointer-events: none; } /* --------------------------------------------------------- MOBILE / TABLET --------------------------------------------------------- */ @media (max-width: 900px) { .audience-gateway { grid-template-columns: 1fr !important; } .audience-card { min-height: 390px; } .audience-gateway::after { display: none; } .audience-content { padding: 0 28px 42px 28px !important; } .owner-card::before, .seafarer-card::before { top: 24px; right: 25px; font-size: 55px; } } @media (max-width: 600px) { .audience-card { min-height: 360px; } .audience-content h2 { font-size: 39px !important; } .audience-content p { font-size: 11px !important; } } /* ========================================================= HERO → AUDIENCE TRANSITION PREMIUM SERVICES BRIDGE V1 ========================================================= */ .service-bridge { position: relative; z-index: 25; width: min(calc(100% - 110px), 1460px); margin: -31px auto -31px; pointer-events: none; } .service-bridge-shell { position: relative; min-height: 98px; display: grid; grid-template-columns: 148px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 16px; background: rgba(247, 252, 254, .92); box-shadow: 0 22px 60px rgba(3,35,53,.16), inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); pointer-events: auto; } /* --------------------------------------------------------- LEFT "SERVICES" IDENTITY BLOCK --------------------------------------------------------- */ .service-bridge-label { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; color: #fff; background: radial-gradient( circle at 10% 10%, rgba(69,193,239,.26), transparent 48% ), linear-gradient( 145deg, #06354f, #041f31 ); } .service-bridge-label::after { content: ""; position: absolute; right: -18px; top: 50%; width: 36px; height: 36px; transform: translateY(-50%) rotate(45deg); border-top: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); background: #05283d; } .service-bridge-label span { position: relative; z-index: 2; color: #62d8fa; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .20em; text-transform: uppercase; } .service-bridge-label strong { position: relative; z-index: 2; margin-top: 5px; color: #fff; font-size: 22px; line-height: 1; font-weight: 850; letter-spacing: -.035em; } /* --------------------------------------------------------- SERVICE LINKS --------------------------------------------------------- */ .service-bridge-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: 12px; } .service-bridge-links > a { position: relative; min-width: 0; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; padding: 16px 13px; color: #082235; border-right: 1px solid rgba(8,73,105,.10); transition: background .30s ease, transform .32s cubic-bezier(.22,1,.36,1), box-shadow .30s ease; } .service-bridge-links > a:last-child { border-right: 0; } .service-bridge-links > a::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: linear-gradient( 90deg, #078fd1, #55caf3 ); transform: scaleX(0); transform-origin: left center; transition: transform .38s cubic-bezier(.22,1,.36,1); } .service-bridge-links > a:hover { z-index: 2; background: linear-gradient( 180deg, rgba(231,247,253,.96), rgba(247,252,254,.98) ); transform: translateY(-3px); box-shadow: 0 13px 26px rgba(5,60,86,.09); } .service-bridge-links > a:hover::before { transform: scaleX(1); } /* icons */ .service-bridge-links svg { width: 24px; height: 24px; color: #078fd1; stroke-width: 1.75; transition: transform .32s cubic-bezier(.22,1,.36,1), color .28s ease; } .service-bridge-links > a:hover svg { color: #06a2db; transform: translateY(-2px) scale(1.06); } /* text */ .service-bridge-links span { min-width: 0; display: flex; flex-direction: column; } .service-bridge-links b { overflow: hidden; color: #082235; font-size: 9.5px; line-height: 1.15; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; } .service-bridge-links small { overflow: hidden; margin-top: 4px; color: #70848e; font-size: 7px; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; } /* arrow */ .service-bridge-links i { color: #078fd1; font-size: 14px; font-style: normal; transition: transform .32s cubic-bezier(.22,1,.36,1); } .service-bridge-links > a:hover i { transform: translateX(5px); } /* --------------------------------------------------------- VERY SUBTLE MOVING LIGHT --------------------------------------------------------- */ .service-bridge-shell::after { content: ""; position: absolute; z-index: 10; pointer-events: none; top: -80%; left: -18%; width: 8%; height: 250%; opacity: .34; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.82), transparent ); transform: rotate(18deg); animation: serviceBridgeShine 9s ease-in-out infinite; } @keyframes serviceBridgeShine { 0%, 38% { left: -18%; } 68%, 100% { left: 115%; } } /* ========================================================= ALIGN SHIPOWNERS / SEAFARERS CONTENT PERFECTLY ========================================================= */ .audience-gateway { padding-top: 31px; } .audience-card { min-height: 430px !important; } /* identical content positioning */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; top: 0 !important; bottom: auto !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 101px 70px 48px 80px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } /* exact same eyebrow location */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { margin: 0 0 14px !important; } /* same title box */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 98px; display: flex; align-items: flex-start; margin: 0 !important; } /* Seafarers naturally has one line: vertically center it inside same title region */ .seafarer-card .audience-content h2 { align-items: center; } /* same description area */ .owner-card .audience-content p, .seafarer-card .audience-content p { min-height: 48px; margin: 8px 0 0 !important; } /* same CTA baseline */ .owner-card .audience-cta, .seafarer-card .audience-cta { margin-top: 19px !important; } /* --------------------------------------------------------- REDUCE BACKGROUND SECTION NUMBERS --------------------------------------------------------- */ .owner-card::before, .seafarer-card::before { top: 58px !important; right: 35px !important; font-size: 52px !important; color: rgba(255,255,255,.065) !important; } /* --------------------------------------------------------- RESPONSIVE SERVICE BRIDGE --------------------------------------------------------- */ @media (max-width: 1250px) { .service-bridge { width: min(calc(100% - 48px), 1200px); } .service-bridge-shell { grid-template-columns: 135px 1fr; } .service-bridge-links { grid-template-columns: repeat(3, 1fr); } .service-bridge-links > a:nth-child(-n+3) { border-bottom: 1px solid rgba(8,73,105,.10); } } @media (max-width: 800px) { .service-bridge { width: calc(100% - 28px); margin: -20px auto -20px; } .service-bridge-shell { grid-template-columns: 1fr; border-radius: 13px; } .service-bridge-label { min-height: 66px; padding: 15px 20px; } .service-bridge-label::after { display: none; } .service-bridge-links { grid-template-columns: repeat(2, 1fr); padding-left: 0; } .service-bridge-links > a { min-height: 67px; } .audience-gateway { padding-top: 20px; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 70px 28px 38px 28px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: auto; } .seafarer-card .audience-content h2 { align-items: flex-start; } .owner-card .audience-content p, .seafarer-card .audience-content p { min-height: auto; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .service-bridge-shell::after { animation: none !important; } } /* ========================================================= SERVICES BRIDGE + AUDIENCE ALIGNMENT FINAL REFINEMENT ========================================================= */ /* --------------------------------------------------------- REMOVE THE WHITE "GAP" FEEL --------------------------------------------------------- */ .service-bridge { margin-top: -40px !important; margin-bottom: -42px !important; } /* audience begins immediately underneath bridge */ .audience-gateway { padding-top: 42px !important; background: #05283d !important; } /* Make the bridge feel lighter / more floating */ .service-bridge-shell { box-shadow: 0 20px 52px rgba(2, 31, 48, .20), 0 5px 12px rgba(2, 31, 48, .08), inset 0 1px 0 rgba(255,255,255,.96) !important; } /* --------------------------------------------------------- EXACT CONTENT ALIGNMENT --------------------------------------------------------- */ .owner-card .audience-content, .seafarer-card .audience-content { padding-top: 92px !important; } /* eyebrows start at identical position */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { height: 14px !important; display: flex !important; align-items: flex-start !important; margin-bottom: 14px !important; } /* same title region */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 102px !important; display: block !important; margin: 0 !important; padding: 0 !important; align-items: initial !important; } /* IMPORTANT: do NOT vertically center the single-line Seafarers heading */ .seafarer-card .audience-content h2 { align-items: initial !important; } /* descriptions also line up */ .owner-card .audience-content p, .seafarer-card .audience-content p { min-height: 48px !important; margin-top: 8px !important; } /* CTAs on identical baseline */ .owner-card .audience-cta, .seafarer-card .audience-cta { margin-top: 18px !important; } /* --------------------------------------------------------- MAKE THE 01 / 02 NUMBERS MORE SUBTLE --------------------------------------------------------- */ .owner-card::before, .seafarer-card::before { top: 48px !important; right: 34px !important; font-size: 46px !important; color: rgba(255,255,255,.045) !important; } /* --------------------------------------------------------- SERVICES BAR MICRO-POLISH --------------------------------------------------------- */ .service-bridge-links > a { min-height: 88px !important; } /* slightly larger main labels */ .service-bridge-links b { font-size: 10px !important; } /* clearer subtitles */ .service-bridge-links small { font-size: 7.5px !important; color: #687f8b !important; } /* smoother premium hover */ .service-bridge-links > a:hover { transform: translateY(-4px) !important; box-shadow: 0 15px 30px rgba(4, 57, 82, .11) !important; } /* Mobile */ @media (max-width: 800px) { .service-bridge { margin-top: -22px !important; margin-bottom: -22px !important; } .audience-gateway { padding-top: 22px !important; } .owner-card .audience-content, .seafarer-card .audience-content { padding-top: 65px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: auto !important; } .owner-card .audience-content p, .seafarer-card .audience-content p { min-height: auto !important; } } /* ========================================================= SERVICES + AUDIENCE SECTION STRUCTURAL RESET ========================================================= */ /* ========================================================= 1. SERVICES DIVIDER BAND ========================================================= */ .service-bridge { position: relative !important; z-index: 20 !important; width: 100% !important; margin: 0 !important; padding: 20px 0 !important; background: linear-gradient( 90deg, #041f31 0%, #062d45 45%, #073a56 100% ) !important; } .service-bridge-shell { width: min(calc(100% - 96px), 1380px) !important; min-height: 86px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 155px 1fr !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.16) !important; background: rgba(248,252,254,.97) !important; box-shadow: 0 18px 42px rgba(0,15,27,.24) !important; backdrop-filter: none !important; } /* remove old floating arrow shape */ .service-bridge-label::after { display: none !important; } .service-bridge-label { min-height: 86px !important; padding: 0 23px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; background: linear-gradient( 145deg, #073650, #041f31 ) !important; } .service-bridge-label span { color: #63d3f4 !important; font-size: 8px !important; letter-spacing: .18em !important; font-weight: 900 !important; } .service-bridge-label strong { margin-top: 5px !important; color: #fff !important; font-size: 22px !important; line-height: 1 !important; font-weight: 850 !important; } /* service links */ .service-bridge-links { display: grid !important; grid-template-columns: repeat(6, minmax(0,1fr)) !important; padding: 0 !important; } .service-bridge-links > a { min-height: 86px !important; padding: 14px 12px !important; display: grid !important; grid-template-columns: 28px 1fr auto !important; align-items: center !important; gap: 9px !important; border-right: 1px solid rgba(6,60,88,.10) !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .service-bridge-links > a:last-child { border-right: 0 !important; } .service-bridge-links > a:hover { background: #edf8fc !important; transform: none !important; box-shadow: inset 0 -3px 0 #078fd1 !important; } .service-bridge-links svg { width: 22px !important; height: 22px !important; color: #078fd1 !important; } .service-bridge-links b { font-size: 9.5px !important; color: #082235 !important; line-height: 1.15 !important; white-space: normal !important; } .service-bridge-links small { margin-top: 3px !important; font-size: 7px !important; color: #71838c !important; white-space: normal !important; } .service-bridge-links i { font-size: 13px !important; color: #078fd1 !important; } /* remove sweeping shine - too decorative */ .service-bridge-shell::after { display: none !important; } /* ========================================================= 2. AUDIENCE SECTION ========================================================= */ .audience-gateway { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; min-height: 430px !important; padding: 0 !important; margin: 0 !important; background: #041f31 !important; } .audience-card { position: relative !important; min-height: 430px !important; overflow: hidden !important; } /* eliminate background numbers */ .owner-card::before, .seafarer-card::before { display: none !important; } /* keep only centre divider */ .audience-gateway::after { content: "" !important; position: absolute !important; z-index: 7 !important; left: 50% !important; top: 36px !important; bottom: 36px !important; width: 1px !important; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.24) 25%, rgba(255,255,255,.24) 75%, transparent ) !important; } /* ========================================================= 3. IMAGE COMPOSITION ========================================================= */ .owner-card .audience-bg { background-position: 67% center !important; transform: scale(1.01) !important; } .seafarer-card .audience-bg { background-position: 73% center !important; transform: scale(1.01) !important; } .audience-card:hover .audience-bg { transform: scale(1.035) !important; } /* ========================================================= 4. OVERLAYS ========================================================= */ .owner-card .audience-overlay { background: linear-gradient( 90deg, rgba(2,24,39,.96) 0%, rgba(3,34,53,.92) 29%, rgba(4,47,71,.75) 50%, rgba(6,66,95,.38) 70%, rgba(6,66,95,.08) 88%, rgba(6,66,95,0) 100% ) !important; } .seafarer-card .audience-overlay { background: linear-gradient( 90deg, rgba(2,25,40,.96) 0%, rgba(3,37,56,.91) 29%, rgba(4,51,75,.73) 50%, rgba(6,70,99,.36) 70%, rgba(6,70,99,.07) 88%, rgba(6,70,99,0) 100% ) !important; } /* ========================================================= 5. CONTENT GRID EXACT SAME POSITION ON BOTH PANELS ========================================================= */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 70px 64px 54px 64px !important; display: grid !important; grid-template-rows: 18px 108px 58px 42px !important; align-content: start !important; row-gap: 11px !important; } /* eyebrow */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { margin: 0 !important; height: auto !important; display: block !important; color: #69d5f6 !important; font-size: 9px !important; line-height: 18px !important; font-weight: 900 !important; letter-spacing: .18em !important; } /* titles */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; align-items: initial !important; color: #fff !important; font-size: clamp(42px,3vw,52px) !important; line-height: .94 !important; letter-spacing: -.045em !important; font-weight: 850 !important; } /* descriptions */ .owner-card .audience-content p, .seafarer-card .audience-content p { min-height: 0 !important; max-width: 430px !important; margin: 0 !important; color: rgba(235,244,248,.82) !important; font-size: 11px !important; line-height: 1.55 !important; } /* ========================================================= 6. CTA ========================================================= */ .owner-card .audience-cta, .seafarer-card .audience-cta { margin: 0 !important; align-self: start !important; display: inline-flex !important; align-items: center !important; gap: 13px !important; width: auto !important; padding-bottom: 8px !important; color: #fff !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .04em !important; } .owner-card .audience-cta::after, .seafarer-card .audience-cta::after { width: 145px !important; background: rgba(91,206,244,.65) !important; } .owner-card .audience-cta i, .seafarer-card .audience-cta i { color: #62d4f6 !important; font-size: 16px !important; } /* ========================================================= 7. REMOVE OLD CARD EDGE ========================================================= */ .audience-card::after { display: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .service-bridge-shell { width: calc(100% - 40px) !important; } .service-bridge-links { grid-template-columns: repeat(3,1fr) !important; } .service-bridge-links > a { min-height: 70px !important; } .audience-content { padding: 62px 38px 48px 38px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 760px) { .service-bridge { padding: 14px 0 !important; } .service-bridge-shell { width: calc(100% - 24px) !important; grid-template-columns: 1fr !important; } .service-bridge-label { min-height: 62px !important; } .service-bridge-links { grid-template-columns: 1fr 1fr !important; } .audience-gateway { grid-template-columns: 1fr !important; } .audience-card { min-height: 390px !important; } .audience-gateway::after { display: none !important; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 55px 28px 40px 28px !important; grid-template-rows: auto auto auto auto !important; row-gap: 13px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { font-size: 40px !important; } } /* ========================================================= SEA LICENSING HERO → SERVICES RAIL → AUDIENCE STRUCTURAL REBUILD ========================================================= */ /* ========================================================= 1. FLOATING SERVICES RAIL ========================================================= */ .service-bridge { position: relative !important; z-index: 30 !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; pointer-events: none; } .service-rail { width: min(calc(100% - 100px), 1380px) !important; height: 72px !important; margin: 0 auto !important; transform: translateY(-36px); display: grid !important; grid-template-columns: 172px 1fr !important; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: rgba(4,31,49,.94); box-shadow: 0 18px 50px rgba(0,18,31,.25), 0 5px 14px rgba(0,18,31,.13), inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); pointer-events: auto; } /* ========================================================= 2. RAIL IDENTITY ========================================================= */ .service-rail-label { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-right: 1px solid rgba(255,255,255,.12); background: linear-gradient( 135deg, rgba(10,70,100,.50), rgba(3,27,43,.18) ); } .service-rail-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #53d8fa; box-shadow: 0 0 0 0 rgba(83,216,250,.48); animation: serviceRailPulse 2.8s ease-out infinite; } .service-rail-label > div { display: flex; flex-direction: column; } .service-rail-label small { color: #67d7f7; font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; } .service-rail-label strong { margin-top: 5px; color: #fff; font-size: 20px; line-height: 1; font-weight: 850; letter-spacing: -.035em; } @keyframes serviceRailPulse { 0% { box-shadow: 0 0 0 0 rgba(83,216,250,.46); } 70% { box-shadow: 0 0 0 9px rgba(83,216,250,0); } 100% { box-shadow: 0 0 0 0 rgba(83,216,250,0); } } /* ========================================================= 3. SERVICE LINKS — ONE CONTINUOUS RAIL ========================================================= */ .service-rail-links { min-width: 0; display: flex !important; align-items: stretch; justify-content: space-between; padding: 0 !important; } .service-rail-links > a { position: relative; min-width: 0; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 11px; color: rgba(238,247,251,.83); background: transparent; border: 0 !important; box-shadow: none !important; transform: none !important; transition: color .28s ease, background .28s ease, transform .32s cubic-bezier(.22,1,.36,1); } /* only subtle separators — no mini cards */ .service-rail-links > a:not(:last-child)::before { content: ""; position: absolute; right: 0; top: 20px; bottom: 20px; width: 1px; background: rgba(255,255,255,.09); } /* animated bottom indicator */ .service-rail-links > a::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 2px; background: linear-gradient( 90deg, #34bceb, #73dcf8 ); transform: scaleX(0); transform-origin: center; transition: transform .34s cubic-bezier(.22,1,.36,1); } .service-rail-links > a:hover { color: #fff; background: rgba(255,255,255,.045); transform: translateY(-1px) !important; } .service-rail-links > a:hover::after { transform: scaleX(1); } .service-rail-links svg { width: 17px !important; height: 17px !important; flex: 0 0 17px; color: #58cdf3 !important; stroke-width: 1.75 !important; transition: color .28s ease, transform .32s cubic-bezier(.22,1,.36,1); } .service-rail-links > a:hover svg { color: #82e5ff !important; transform: translateY(-2px); } .service-rail-links span { overflow: hidden; font-size: 9px; line-height: 1.15; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= 4. AUDIENCE SECTION — NO EXTRA GAP ========================================================= */ .audience-gateway { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; min-height: 450px !important; margin: 0 !important; padding: 0 !important; background: #041f31 !important; overflow: hidden; } .audience-card { position: relative !important; min-height: 450px !important; overflow: hidden !important; } /* no decorative 01 / 02 */ .owner-card::before, .seafarer-card::before { display: none !important; } /* remove obsolete card edge */ .audience-card::after { display: none !important; } /* ========================================================= 5. IMAGE COMPOSITION ========================================================= */ .owner-card .audience-bg { background-position: 67% center !important; transform: scale(1.01) !important; } .seafarer-card .audience-bg { background-position: 74% center !important; transform: scale(1.01) !important; } .audience-card:hover .audience-bg { transform: scale(1.035) !important; } /* ========================================================= 6. OVERLAYS ========================================================= */ .owner-card .audience-overlay { background: linear-gradient( 90deg, rgba(2,23,38,.97) 0%, rgba(3,32,50,.93) 26%, rgba(4,44,67,.78) 47%, rgba(6,62,90,.45) 67%, rgba(7,75,105,.13) 85%, rgba(7,75,105,0) 100% ), linear-gradient( 0deg, rgba(1,16,27,.30), transparent 55% ) !important; } .seafarer-card .audience-overlay { background: linear-gradient( 90deg, rgba(2,24,39,.97) 0%, rgba(3,34,52,.92) 26%, rgba(5,47,70,.76) 47%, rgba(7,65,93,.42) 67%, rgba(8,79,110,.12) 85%, rgba(8,79,110,0) 100% ), linear-gradient( 0deg, rgba(1,16,27,.27), transparent 55% ) !important; } /* ========================================================= 7. EXACT SAME CONTENT START POSITION ========================================================= */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; z-index: 5 !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 88px 64px 52px 64px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } /* same eyebrow location */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { margin: 0 0 13px !important; color: #68d6f7 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .18em !important; } /* ========================================================= 8. TITLES Let them flow naturally — don't fake equal title heights ========================================================= */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { display: block !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #f5fafc !important; font-size: clamp(44px,3.15vw,54px) !important; line-height: .94 !important; font-weight: 850 !important; letter-spacing: -.045em !important; text-shadow: 0 3px 16px rgba(0,13,23,.25); } /* ========================================================= 9. BODY COPY ========================================================= */ .owner-card .audience-content p, .seafarer-card .audience-content p { max-width: 440px !important; min-height: 0 !important; margin: 18px 0 0 !important; color: rgba(232,242,247,.82) !important; font-size: 11px !important; line-height: 1.58 !important; } /* ========================================================= 10. CTA — BOTH LOCK TO SAME BOTTOM BASELINE ========================================================= */ .owner-card .audience-cta, .seafarer-card .audience-cta { position: relative; width: fit-content !important; margin-top: auto !important; padding: 0 0 9px !important; display: inline-flex !important; align-items: center !important; gap: 13px !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .04em !important; text-transform: uppercase; } /* shorter, cleaner underline */ .owner-card .audience-cta::after, .seafarer-card .audience-cta::after { left: 0 !important; right: auto !important; width: 56px !important; height: 1px !important; background: #5ccff4 !important; transform: none !important; transition: width .32s cubic-bezier(.22,1,.36,1) !important; } .owner-card:hover .audience-cta::after, .seafarer-card:hover .audience-cta::after { width: 100% !important; } .owner-card .audience-cta i, .seafarer-card .audience-cta i { width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; color: #65d5f7 !important; font-size: 16px !important; transition: transform .32s cubic-bezier(.22,1,.36,1); } .owner-card:hover .audience-cta i, .seafarer-card:hover .audience-cta i { transform: translateX(6px); } /* ========================================================= 11. CENTRE DIVIDER ========================================================= */ .audience-gateway::after { content: ""; position: absolute !important; z-index: 8 !important; left: 50% !important; top: 55px !important; bottom: 55px !important; width: 1px !important; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.20) 25%, rgba(255,255,255,.20) 75%, transparent ) !important; pointer-events: none; } /* ========================================================= 12. TABLET ========================================================= */ @media (max-width: 1150px) { .service-rail { width: calc(100% - 42px) !important; grid-template-columns: 145px 1fr !important; } .service-rail-links span { font-size: 8px; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 82px 42px 46px 42px !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 820px) { .service-bridge { height: auto !important; padding: 13px 0 !important; background: #041f31 !important; } .service-rail { width: calc(100% - 24px) !important; height: auto !important; margin: 0 auto !important; transform: none !important; grid-template-columns: 1fr !important; } .service-rail-label { min-height: 54px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); } .service-rail-links { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } .service-rail-links::-webkit-scrollbar { display: none; } .service-rail-links > a { flex: 0 0 155px; min-height: 62px; } .audience-gateway { grid-template-columns: 1fr !important; } .audience-card { min-height: 400px !important; } .audience-gateway::after { display: none !important; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 58px 27px 40px 27px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { font-size: 40px !important; } } /* ========================================================= 14. ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .service-rail-dot { animation: none !important; } } /* ========================================================= FINAL STRUCTURE HERO -> SERVICES DIVIDER -> AUDIENCE ========================================================= */ /* ========================================================= SERVICES DIVIDER ========================================================= */ .services-divider { position: relative !important; z-index: 20 !important; width: 100% !important; height: 62px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: linear-gradient( 90deg, #031d2e 0%, #052b42 52%, #06354f 100% ); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } .services-divider-inner { width: min(100% - 80px, 1500px); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 170px minmax(0,1fr); align-items: stretch; } /* --------------------------------------------------------- SERVICES LABEL --------------------------------------------------------- */ .services-divider-title { position: relative; display: flex; align-items: center; gap: 10px; padding-right: 25px; border-right: 1px solid rgba(255,255,255,.16); color: #fff; } .services-divider-title::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #61d8f7; box-shadow: 0 0 0 0 rgba(97,216,247,.46); animation: servicesPulse 2.8s ease-out infinite; } .services-divider-title > span { position: absolute; left: 17px; top: 13px; color: #65d7f6; font-size: 6.5px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .services-divider-title strong { margin-left: 0; padding-top: 10px; color: #fff; font-size: 18px; line-height: 1; font-weight: 850; letter-spacing: -.035em; } .services-divider-title i { margin-left: auto; color: #6bdaf8; font-size: 15px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .services-divider-title:hover i { transform: translateX(5px); } @keyframes servicesPulse { 0% { box-shadow: 0 0 0 0 rgba(97,216,247,.52); } 70% { box-shadow: 0 0 0 9px rgba(97,216,247,0); } 100% { box-shadow: 0 0 0 0 rgba(97,216,247,0); } } /* ========================================================= MOVING SERVICE NAMES ========================================================= */ .services-marquee { position: relative; min-width: 0; overflow: hidden; } .services-marquee::before, .services-marquee::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; width: 70px; pointer-events: none; } .services-marquee::before { left: 0; background: linear-gradient( 90deg, #052b42, rgba(5,43,66,0) ); } .services-marquee::after { right: 0; background: linear-gradient( 270deg, #06354f, rgba(6,53,79,0) ); } .services-marquee-track { width: max-content; height: 100%; display: flex; align-items: center; animation: servicesMarquee 34s linear infinite; will-change: transform; } .services-marquee:hover .services-marquee-track { animation-play-state: paused; } .services-marquee-group { flex: none; display: flex; align-items: center; padding-left: 34px; } .services-marquee-group > a { color: rgba(235,246,250,.84); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .015em; white-space: nowrap; transition: color .25s ease, transform .25s ease; } .services-marquee-group > a:hover { color: #68dafa; transform: translateY(-1px); } .services-dot { width: 4px; height: 4px; margin: 0 27px; flex: 0 0 4px; border-radius: 50%; background: rgba(92,211,245,.68); } @keyframes servicesMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================= AUDIENCE SECTION ========================================================= */ .audience-gateway { position: relative !important; width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; min-height: 430px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #031f31 !important; } .audience-card { position: relative !important; min-height: 430px !important; overflow: hidden !important; isolation: isolate; } /* ========================================================= REMOVE OLD DECORATIVE ELEMENTS ========================================================= */ .owner-card::before, .seafarer-card::before, .audience-card::after { display: none !important; } /* ========================================================= IMAGE POSITIONS ========================================================= */ .owner-card .audience-bg { position: absolute !important; inset: 0 !important; background-position: 67% center !important; background-size: cover !important; transform: scale(1.01) !important; transition: transform 1.15s cubic-bezier(.22,1,.36,1); } .seafarer-card .audience-bg { position: absolute !important; inset: 0 !important; background-position: 75% center !important; background-size: cover !important; transform: scale(1.01) !important; transition: transform 1.15s cubic-bezier(.22,1,.36,1); } .audience-card:hover .audience-bg { transform: scale(1.04) !important; } /* ========================================================= CLEAN LEFT-SIDE IMAGE SHADING ========================================================= */ .owner-card .audience-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(2,22,36,.97) 0%, rgba(3,31,49,.93) 27%, rgba(4,45,68,.76) 48%, rgba(6,63,91,.42) 67%, rgba(7,79,109,.10) 85%, rgba(7,79,109,0) 100% ) !important; } .seafarer-card .audience-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(2,23,38,.97) 0%, rgba(3,34,52,.92) 27%, rgba(4,49,72,.74) 48%, rgba(6,67,96,.40) 67%, rgba(8,82,112,.09) 85%, rgba(8,82,112,0) 100% ) !important; } /* ========================================================= PERFECTLY MATCHED CONTENT GRID ========================================================= */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; z-index: 5 !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 60px 58px 42px 58px !important; display: grid !important; /* Both panels use the SAME rows. This is intentional. */ grid-template-rows: 14px 104px 58px 1fr 28px !important; row-gap: 10px !important; align-content: stretch !important; } /* ========================================================= EYEBROWS — SAME Y POSITION ========================================================= */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { margin: 0 !important; padding: 0 !important; display: block !important; color: #6bd9f8 !important; font-size: 8px !important; line-height: 14px !important; font-weight: 900 !important; letter-spacing: .18em !important; text-transform: uppercase; } /* ========================================================= TITLES — SAME START AND SAME TITLE REGION ========================================================= */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; color: #f6fafc !important; font-size: clamp(43px,3vw,52px) !important; line-height: .95 !important; font-weight: 850 !important; letter-spacing: -.045em !important; text-shadow: 0 3px 16px rgba(0,14,25,.23); } /* ========================================================= BODY COPY — SAME BASELINE ========================================================= */ .owner-card .audience-content p, .seafarer-card .audience-content p { max-width: 430px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: rgba(235,244,248,.80) !important; font-size: 10.5px !important; line-height: 1.58 !important; } /* ========================================================= CTA — LOCKED TO SAME BOTTOM ROW ========================================================= */ .owner-card .audience-cta, .seafarer-card .audience-cta { grid-row: 5 !important; align-self: end !important; width: fit-content !important; margin: 0 !important; padding: 0 0 8px !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; color: #f7fcfe !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .04em !important; text-transform: uppercase; } .owner-card .audience-cta::after, .seafarer-card .audience-cta::after { content: "" !important; position: absolute !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 54px !important; height: 1px !important; background: #63d5f6 !important; transition: width .32s cubic-bezier(.22,1,.36,1) !important; } .audience-card:hover .audience-cta::after { width: 100% !important; } .owner-card .audience-cta i, .seafarer-card .audience-cta i { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #65d6f7 !important; font-size: 14px !important; font-style: normal !important; transition: transform .3s cubic-bezier(.22,1,.36,1); } .audience-card:hover .audience-cta i { transform: translateX(5px); } /* ========================================================= CENTER DIVIDER ========================================================= */ .audience-gateway::after { content: ""; position: absolute !important; z-index: 7 !important; left: 50% !important; top: 32px !important; bottom: 32px !important; width: 1px !important; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.18) 25%, rgba(255,255,255,.18) 75%, transparent ) !important; pointer-events: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .services-divider-inner { width: calc(100% - 36px); } .owner-card .audience-content, .seafarer-card .audience-content { padding: 52px 36px 38px 36px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 760px) { .services-divider { height: 58px !important; } .services-divider-inner { width: calc(100% - 20px); grid-template-columns: 125px 1fr; } .services-divider-title strong { font-size: 16px; } .services-marquee-group > a { font-size: 8px; } .audience-gateway { grid-template-columns: 1fr !important; } .audience-card { min-height: 390px !important; } .audience-gateway::after { display: none !important; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 46px 25px 34px 25px !important; grid-template-rows: auto auto auto 1fr auto !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { font-size: 39px !important; } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .services-divider-title::before { animation: none !important; } .services-marquee-track { animation: none !important; } } /* ========================================================= SERVICES TRANSITION — PREMIUM STATIC RAIL ========================================================= */ .services-transition { position: relative !important; z-index: 25 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #041f31 !important; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); } .services-transition-inner { position: relative; width: min(calc(100% - 72px), 1480px); min-height: 74px; margin: 0 auto; display: grid; grid-template-columns: 170px 1fr; overflow: hidden; } /* --------------------------------------------------------- SERVICES HEADING --------------------------------------------------------- */ .services-transition-heading { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 23px 0 19px; color: #fff; border-right: 1px solid rgba(255,255,255,.12); background: linear-gradient( 135deg, rgba(20,102,139,.20), rgba(255,255,255,.015) ); } .services-transition-heading > span { display: flex; flex-direction: column; } .services-transition-heading small { color: #67d6f7; font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .services-transition-heading strong { margin-top: 5px; color: #fff; font-size: 20px; line-height: 1; font-weight: 850; letter-spacing: -.035em; } .services-transition-heading i { color: #63d3f5; font-size: 17px; font-style: normal; transition: transform .32s cubic-bezier(.22,1,.36,1); } .services-transition-heading:hover i { transform: translateX(6px); } /* --------------------------------------------------------- SERVICES NAV --------------------------------------------------------- */ .services-transition-nav { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); min-width: 0; } .services-transition-nav > a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 0 13px; color: rgba(237,247,251,.80); border-right: 1px solid rgba(255,255,255,.075); transition: background .28s ease, color .28s ease; } .services-transition-nav > a:last-child { border-right: 0; } .services-transition-nav svg { width: 18px; height: 18px; flex: 0 0 18px; color: #55cbee; stroke-width: 1.7; transition: transform .3s cubic-bezier(.22,1,.36,1), color .25s ease; } .services-transition-nav span { overflow: hidden; font-size: 9px; line-height: 1.15; font-weight: 720; white-space: nowrap; text-overflow: ellipsis; } .services-transition-nav > a:hover { color: #fff; background: rgba(255,255,255,.045); } .services-transition-nav > a:hover svg { color: #82e7ff; transform: translateY(-2px); } /* individual hover marker */ .services-transition-nav > a::after { content: ""; position: absolute; left: 23%; right: 23%; bottom: 0; height: 2px; background: #5bd2f5; transform: scaleX(0); transition: transform .32s cubic-bezier(.22,1,.36,1); } .services-transition-nav > a:hover::after { transform: scaleX(1); } /* --------------------------------------------------------- SUBTLE MOVING LIGHT --------------------------------------------------------- */ .services-transition-beam { position: absolute; z-index: 5; left: 170px; bottom: 0; width: 110px; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, #72dcf8, transparent ); box-shadow: 0 0 8px rgba(78,207,243,.55); animation: servicesTransitionBeam 8s ease-in-out infinite; } @keyframes servicesTransitionBeam { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translateX(1100px); opacity: 0; } } /* ========================================================= AUDIENCE SECTION — REFINED EDITORIAL LAYOUT ========================================================= */ .audience-gateway { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; min-height: 430px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #031f31 !important; } .audience-card { position: relative !important; min-height: 430px !important; overflow: hidden !important; isolation: isolate; } /* remove decorative clutter */ .owner-card::before, .seafarer-card::before, .audience-card::after { display: none !important; } /* ========================================================= IMAGE COMPOSITION ========================================================= */ .owner-card .audience-bg { position: absolute !important; inset: 0 !important; background-position: 69% center !important; background-size: cover !important; filter: saturate(1.02) contrast(1.035) brightness(.97) !important; transform: scale(1.01) !important; transition: transform 1.15s cubic-bezier(.22,1,.36,1); } .seafarer-card .audience-bg { position: absolute !important; inset: 0 !important; background-position: 77% center !important; background-size: cover !important; filter: saturate(1.02) contrast(1.03) brightness(.98) !important; transform: scale(1.01) !important; transition: transform 1.15s cubic-bezier(.22,1,.36,1); } .audience-card:hover .audience-bg { transform: scale(1.035) !important; } /* ========================================================= OVERLAYS — LESS FLAT / MORE PHOTOGRAPHIC ========================================================= */ .owner-card .audience-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(2,23,37,.95) 0%, rgba(3,31,48,.88) 26%, rgba(4,44,65,.68) 46%, rgba(6,61,87,.31) 64%, rgba(6,75,103,.06) 80%, transparent 93% ), linear-gradient( 0deg, rgba(1,17,28,.18), transparent 45% ) !important; } .seafarer-card .audience-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(2,24,38,.95) 0%, rgba(3,34,51,.88) 26%, rgba(4,47,69,.66) 46%, rgba(6,64,91,.29) 64%, rgba(7,80,109,.05) 80%, transparent 93% ), linear-gradient( 0deg, rgba(1,17,28,.16), transparent 45% ) !important; } /* ========================================================= CONTENT — NATURAL FLOW ========================================================= */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; z-index: 5 !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 64px 60px 50px 60px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } /* eyebrow */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { margin: 0 0 15px !important; color: #68d6f7 !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .18em !important; text-transform: uppercase; } /* title */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; color: #f6fafc !important; font-size: clamp(43px,3vw,53px) !important; line-height: .95 !important; font-weight: 850 !important; letter-spacing: -.045em !important; text-shadow: 0 3px 16px rgba(0,13,23,.23); } /* description */ .owner-card .audience-content p, .seafarer-card .audience-content p { max-width: 430px !important; min-height: 0 !important; margin: 20px 0 0 !important; color: rgba(235,244,248,.82) !important; font-size: 11px !important; line-height: 1.6 !important; } /* ========================================================= CTA — VISIBLE PREMIUM BUTTON ========================================================= */ .owner-card .audience-cta, .seafarer-card .audience-cta { position: relative; width: fit-content !important; margin: 28px 0 0 !important; padding: 11px 15px !important; display: inline-flex !important; align-items: center !important; gap: 13px !important; border: 1px solid rgba(102,213,247,.34) !important; border-radius: 5px !important; background: rgba(2,29,46,.26) !important; color: #fff !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .04em !important; text-transform: uppercase; backdrop-filter: blur(5px); transition: background .28s ease, border-color .28s ease, transform .3s cubic-bezier(.22,1,.36,1); } .owner-card .audience-cta::after, .seafarer-card .audience-cta::after { display: none !important; } .owner-card .audience-cta i, .seafarer-card .audience-cta i { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; color: #67d7f7 !important; font-size: 15px !important; font-style: normal !important; transition: transform .3s cubic-bezier(.22,1,.36,1); } .audience-card:hover .audience-cta { background: rgba(7,93,128,.33) !important; border-color: rgba(103,215,247,.62) !important; transform: translateY(-2px); } .audience-card:hover .audience-cta i { transform: translateX(5px); } /* ========================================================= CENTER DIVIDER ========================================================= */ .audience-gateway::after { content: ""; position: absolute !important; z-index: 8 !important; left: 50% !important; top: 34px !important; bottom: 34px !important; width: 1px !important; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.18) 25%, rgba(255,255,255,.18) 75%, transparent ) !important; pointer-events: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .services-transition-inner { width: calc(100% - 36px); } .services-transition-nav span { font-size: 8px; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 55px 38px 42px 38px !important; } } @media (max-width: 760px) { .services-transition-inner { width: calc(100% - 20px); grid-template-columns: 125px 1fr; } .services-transition-nav { overflow-x: auto; grid-template-columns: repeat(6,145px); scrollbar-width: none; } .services-transition-nav::-webkit-scrollbar { display: none; } .services-transition-beam { display: none; } .audience-gateway { grid-template-columns: 1fr !important; } .audience-card { min-height: 390px !important; } .audience-gateway::after { display: none !important; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 47px 26px 35px 26px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { font-size: 40px !important; } } @media (prefers-reduced-motion: reduce) { .services-transition-beam { animation: none !important; } } /* ========================================================= SEA LICENSING — HERO / SERVICES / AUDIENCE CLEANUP ========================================================= */ /* ========================================================= 1. REMOVE HERO TRUST STRIP COMPLETELY ========================================================= */ .home-hero .proof-row { display: none !important; } /* Give buttons a little breathing room now that strip is gone */ .home-hero-actions { margin-bottom: 0 !important; } /* ========================================================= 2. SERVICES BAR — ONE CONTINUOUS NAVY SURFACE ========================================================= */ .services-transition { background: #05283d !important; border-top: 1px solid rgba(255,255,255,.08) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } /* No different-colored block before Explore Services */ .services-transition-inner { background: #05283d !important; } /* Explore Services becomes part of the SAME bar */ .services-transition-heading { background: #05283d !important; border-right: 1px solid rgba(255,255,255,.12) !important; } /* eliminate any old pseudo-shapes/colors */ .services-transition-heading::before, .services-transition-heading::after { display: none !important; } /* Keep the entire navigation on same continuous surface */ .services-transition-nav { background: #05283d !important; } .services-transition-nav > a { background: transparent !important; } /* Premium hover without introducing another block color */ .services-transition-nav > a:hover { background: rgba(255,255,255,.045) !important; } /* Slightly refine whole bar proportions */ .services-transition-inner { min-height: 68px !important; } .services-transition { min-height: 68px !important; } /* ========================================================= 3. AUDIENCE PANELS — CLEAN MATCHED EDITORIAL GRID ========================================================= */ .audience-gateway { min-height: 420px !important; background: #031f31 !important; } .audience-card { min-height: 420px !important; } /* ========================================================= 4. IMAGE COMPOSITION ========================================================= */ .owner-card .audience-bg { background-position: 72% center !important; } .seafarer-card .audience-bg { background-position: 77% center !important; } /* ========================================================= 5. CLEANER OVERLAYS Keep photographs visible instead of covering them heavily ========================================================= */ .owner-card .audience-overlay { background: linear-gradient( 90deg, rgba(2,22,36,.96) 0%, rgba(3,31,49,.91) 25%, rgba(4,43,65,.72) 45%, rgba(6,61,87,.34) 64%, rgba(7,78,106,.08) 82%, transparent 96% ) !important; } .seafarer-card .audience-overlay { background: linear-gradient( 90deg, rgba(2,23,37,.96) 0%, rgba(3,33,51,.91) 25%, rgba(4,47,69,.70) 45%, rgba(6,64,91,.32) 64%, rgba(8,80,109,.07) 82%, transparent 96% ) !important; } /* ========================================================= 6. EXACT CONTENT GRID Eyebrow / title / description / CTA line up on both sides ========================================================= */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; inset: 0 !important; z-index: 5 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 58px 62px 46px 62px !important; display: grid !important; /* SAME STRUCTURE ON BOTH PANELS: eyebrow heading region description CTA */ grid-template-rows: 15px 100px 56px 40px !important; row-gap: 11px !important; align-content: start !important; } /* ========================================================= 7. EYEBROW — STRONGER DESIGN DETAIL ========================================================= */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { margin: 0 !important; padding: 0 0 0 11px !important; display: block !important; border-left: 2px solid #61d4f5; color: #72dafa !important; font-size: 8px !important; line-height: 15px !important; font-weight: 900 !important; letter-spacing: .18em !important; text-transform: uppercase; } /* ========================================================= 8. HEADINGS Same start position and same reserved heading zone ========================================================= */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { width: min(100%, 480px); min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; color: #f7fafc !important; font-size: clamp(43px, 3vw, 51px) !important; line-height: .95 !important; font-weight: 850 !important; letter-spacing: -.045em !important; text-shadow: 0 3px 16px rgba(0,13,23,.22); } /* ========================================================= 9. DESCRIPTION Both descriptions now begin on exactly the same baseline ========================================================= */ .owner-card .audience-content p, .seafarer-card .audience-content p { width: min(100%, 420px); max-width: 420px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: rgba(229,240,246,.84) !important; font-size: 11px !important; line-height: 1.55 !important; } /* ========================================================= 10. CTA — PROPER SMALL CORPORATE BUTTON ========================================================= */ .owner-card .audience-cta, .seafarer-card .audience-cta { width: fit-content !important; height: 38px !important; margin: 0 !important; padding: 0 15px !important; display: inline-flex !important; align-items: center !important; gap: 13px !important; align-self: start !important; border: 1px solid rgba(91,208,243,.36) !important; border-radius: 4px !important; background: rgba(4,39,59,.34) !important; color: #f7fcfe !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .045em !important; text-transform: uppercase; backdrop-filter: blur(5px); transition: background .28s ease, border-color .28s ease, transform .3s cubic-bezier(.22,1,.36,1); } /* remove old underline */ .owner-card .audience-cta::after, .seafarer-card .audience-cta::after { display: none !important; } .owner-card .audience-cta i, .seafarer-card .audience-cta i { width: auto !important; height: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #6bd8f7 !important; font-size: 15px !important; font-style: normal !important; transition: transform .3s cubic-bezier(.22,1,.36,1); } .audience-card:hover .audience-cta { background: rgba(8,89,124,.42) !important; border-color: rgba(105,219,248,.67) !important; transform: translateY(-2px); } .audience-card:hover .audience-cta i { transform: translateX(5px); } /* ========================================================= 11. CLEAN CENTER DIVIDER ========================================================= */ .audience-gateway::after { content: ""; position: absolute !important; z-index: 8 !important; left: 50% !important; top: 30px !important; bottom: 30px !important; width: 1px !important; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.16) 24%, rgba(255,255,255,.16) 76%, transparent ) !important; pointer-events: none; } /* ========================================================= 12. RESPONSIVE ========================================================= */ @media (max-width: 1050px) { .owner-card .audience-content, .seafarer-card .audience-content { padding: 52px 38px 40px 38px !important; } } @media (max-width: 760px) { .audience-gateway { grid-template-columns: 1fr !important; } .audience-card { min-height: 390px !important; } .audience-gateway::after { display: none !important; } .owner-card .audience-content, .seafarer-card .audience-content { padding: 44px 26px 34px 26px !important; grid-template-rows: auto auto auto auto !important; row-gap: 14px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { font-size: 39px !important; } } /* ========================================================= SEA LICENSING — HERO / AUDIENCE RHYTHM FIX ========================================================= */ /* --------------------------------------------------------- 1. HERO CTA ROW + OCEAN PILL ALIGNMENT --------------------------------------------------------- */ .home-hero, .hero-home, .hero-section { position: relative !important; overflow: visible !important; } .home-hero-actions, .hero-actions { position: relative !important; z-index: 6 !important; } /* move Oceans Connect Opportunities into the same visual line */ .home-hero .hero-marquee, .home-hero .hero-pill, .home-hero .hero-badge, .home-hero .ocean-pill, .home-hero .hero-floating-pill, .hero-home .hero-marquee, .hero-home .hero-pill, .hero-home .hero-badge, .hero-home .ocean-pill, .hero-home .hero-floating-pill, .hero-section .hero-marquee, .hero-section .hero-pill, .hero-section .hero-badge, .hero-section .ocean-pill, .hero-section .hero-floating-pill { position: absolute !important; top: 67% !important; right: 88px !important; bottom: auto !important; left: auto !important; transform: translateY(-50%) !important; z-index: 12 !important; margin: 0 !important; } /* style the pill cleanly */ .home-hero .hero-marquee, .home-hero .hero-pill, .home-hero .hero-badge, .home-hero .ocean-pill, .home-hero .hero-floating-pill, .hero-home .hero-marquee, .hero-home .hero-pill, .hero-home .hero-badge, .hero-home .ocean-pill, .hero-home .hero-floating-pill, .hero-section .hero-marquee, .hero-section .hero-pill, .hero-section .hero-badge, .hero-section .ocean-pill, .hero-section .hero-floating-pill, .home-hero .hero-marquee a, .home-hero .hero-pill a, .home-hero .hero-badge a, .home-hero .ocean-pill a, .home-hero .hero-floating-pill a, .hero-home .hero-marquee a, .hero-home .hero-pill a, .hero-home .hero-badge a, .hero-home .ocean-pill a, .hero-home .hero-floating-pill a, .hero-section .hero-marquee a, .hero-section .hero-pill a, .hero-section .hero-badge a, .hero-section .ocean-pill a, .hero-section .hero-floating-pill a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 50px !important; padding: 0 22px !important; border-radius: 999px !important; border: 1px solid rgba(96, 198, 255, 0.28) !important; background: linear-gradient(180deg, rgba(3, 34, 55, 0.88), rgba(5, 52, 81, 0.92)) !important; box-shadow: 0 16px 40px rgba(2, 18, 34, 0.18), inset 0 1px 0 rgba(255,255,255,.08) !important; color: #f2fbff !important; font-size: 10.5px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; white-space: nowrap !important; text-decoration: none !important; } /* --------------------------------------------------------- 2. AUDIENCE SECTION — BETTER GRID / SAME RHYTHM --------------------------------------------------------- */ .audience-gateway { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; } .owner-card, .seafarer-card, .audience-card { position: relative !important; min-height: 430px !important; overflow: hidden !important; } /* consistent overlays */ .owner-card .audience-overlay { background: linear-gradient( 90deg, rgba(2, 25, 39, 0.96) 0%, rgba(4, 39, 60, 0.88) 28%, rgba(6, 54, 81, 0.54) 55%, rgba(9, 73, 104, 0.14) 88%, transparent 100% ) !important; } .seafarer-card .audience-overlay { background: linear-gradient( 90deg, rgba(2, 25, 39, 0.96) 0%, rgba(4, 39, 60, 0.88) 28%, rgba(6, 54, 81, 0.54) 55%, rgba(9, 73, 104, 0.14) 88%, transparent 100% ) !important; } /* consistent image positioning */ .owner-card .audience-bg { background-position: 68% center !important; } .seafarer-card .audience-bg { background-position: 74% center !important; } /* identical content structure on both cards */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: grid !important; grid-template-rows: auto 126px 74px auto !important; align-content: start !important; padding: 54px 48px 44px 48px !important; row-gap: 14px !important; max-width: none !important; width: 100% !important; height: 100% !important; } /* eyebrow */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { display: inline-flex !important; align-items: center !important; gap: 10px !important; width: fit-content !important; margin: 0 !important; color: #7fe1ff !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } .owner-card .audience-content > span::before, .seafarer-card .audience-content > span::before { content: "" !important; display: inline-block !important; width: 2px !important; height: 12px !important; background: #68d8f7 !important; border-radius: 999px !important; } /* heading */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { margin: 0 !important; width: min(100%, 370px) !important; max-width: 370px !important; min-height: 126px !important; color: #ffffff !important; font-size: clamp(42px, 3.2vw, 56px) !important; line-height: 0.95 !important; letter-spacing: -0.05em !important; font-weight: 850 !important; text-wrap: balance !important; text-shadow: 0 2px 14px rgba(0, 10, 20, 0.18) !important; } /* description */ .owner-card .audience-content p, .seafarer-card .audience-content p { margin: 0 !important; width: min(100%, 390px) !important; max-width: 390px !important; color: rgba(233, 242, 248, 0.90) !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* CTA button — cleaner and premium */ .owner-card .audience-cta, .seafarer-card .audience-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: fit-content !important; height: 42px !important; padding: 0 16px !important; margin: 2px 0 0 0 !important; border: 1px solid rgba(99, 205, 246, 0.26) !important; border-radius: 6px !important; background: rgba(4, 39, 59, 0.28) !important; color: #f6fbff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-decoration: none !important; backdrop-filter: blur(5px) !important; transition: transform .28s ease, background .28s ease, border-color .28s ease !important; } .owner-card .audience-cta::after, .seafarer-card .audience-cta::after { display: none !important; } .owner-card .audience-cta i, .seafarer-card .audience-cta i { font-style: normal !important; color: #7edcff !important; font-size: 15px !important; transition: transform .28s ease !important; } .owner-card:hover .audience-cta, .seafarer-card:hover .audience-cta { background: rgba(6, 72, 104, 0.40) !important; border-color: rgba(118, 220, 255, 0.52) !important; transform: translateY(-2px) !important; } .owner-card:hover .audience-cta i, .seafarer-card:hover .audience-cta i { transform: translateX(4px) !important; } /* make both cards feel visually equal */ .owner-card::after, .seafarer-card::after { content: "" !important; position: absolute !important; left: 48px !important; right: 48px !important; bottom: 34px !important; height: 1px !important; background: linear-gradient(90deg, rgba(111, 218, 249, 0.35), rgba(111, 218, 249, 0.00)) !important; pointer-events: none !important; opacity: .45 !important; } /* --------------------------------------------------------- 3. RESPONSIVE --------------------------------------------------------- */ @media (max-width: 1320px) { .home-hero .hero-marquee, .home-hero .hero-pill, .home-hero .hero-badge, .home-hero .ocean-pill, .home-hero .hero-floating-pill, .hero-home .hero-marquee, .hero-home .hero-pill, .hero-home .hero-badge, .hero-home .ocean-pill, .hero-home .hero-floating-pill, .hero-section .hero-marquee, .hero-section .hero-pill, .hero-section .hero-badge, .hero-section .ocean-pill, .hero-section .hero-floating-pill { right: 48px !important; } } @media (max-width: 1024px) { .owner-card .audience-content, .seafarer-card .audience-content { padding: 42px 32px 36px 32px !important; grid-template-rows: auto auto auto auto !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 0 !important; } } @media (max-width: 820px) { .home-hero .hero-marquee, .home-hero .hero-pill, .home-hero .hero-badge, .home-hero .ocean-pill, .home-hero .hero-floating-pill, .hero-home .hero-marquee, .hero-home .hero-pill, .hero-home .hero-badge, .hero-home .ocean-pill, .hero-home .hero-floating-pill, .hero-section .hero-marquee, .hero-section .hero-pill, .hero-section .hero-badge, .hero-section .ocean-pill, .hero-section .hero-floating-pill { position: static !important; transform: none !important; margin-top: 18px !important; } .audience-gateway { grid-template-columns: 1fr !important; } } /* Vessel Registration custom icon */ .services-transition-nav .service-custom-icon { width: 23px !important; height: 23px !important; flex: 0 0 23px; object-fit: contain; opacity: .96; transition: transform .30s cubic-bezier(.22,1,.36,1), filter .28s ease; } .services-transition-nav a:hover .service-custom-icon { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 7px rgba(76,205,242,.20)); } /* ========================================================= HERO ACTION ROW — ALIGN OCEAN PILL WITH CTA BUTTONS ========================================================= */ .hero-actions { position: relative !important; z-index: 8 !important; } /* exact existing Ocean pill */ .hero-edge-note { position: absolute !important; left: auto !important; right: 4.2% !important; top: auto !important; /* align vertically with Explore Services / Talk to an Expert */ bottom: 154px !important; margin: 0 !important; min-height: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 22px !important; border-radius: 999px !important; border: 1px solid rgba(94,202,242,.34) !important; background: linear-gradient( 180deg, rgba(4,43,67,.90), rgba(3,31,50,.94) ) !important; box-shadow: 0 12px 34px rgba(1,22,36,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; color: #f2fbff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .15em !important; text-transform: uppercase !important; white-space: nowrap !important; z-index: 8 !important; } /* keep cyan pulse */ .hero-edge-note::before { content: "" !important; width: 7px !important; height: 7px !important; margin-right: 10px !important; flex: 0 0 7px !important; border-radius: 50% !important; background: #5dd5f6 !important; box-shadow: 0 0 0 0 rgba(93,213,246,.48); animation: oceanPillPulse 2.8s ease-out infinite !important; } @keyframes oceanPillPulse { 0% { box-shadow: 0 0 0 0 rgba(93,213,246,.48); } 70% { box-shadow: 0 0 0 9px rgba(93,213,246,0); } 100% { box-shadow: 0 0 0 0 rgba(93,213,246,0); } } /* remove any old shine/positioning artifacts */ .hero-edge-note::after { display: none !important; } /* responsive */ @media (max-width: 1100px) { .hero-edge-note { right: 2.5% !important; bottom: 145px !important; } } @media (max-width: 760px) { .hero-edge-note { position: static !important; margin-top: 18px !important; width: fit-content !important; min-height: 44px !important; } } /* ========================================================= OCEANS CONNECT OPPORTUNITIES — FINAL CTA ALIGNMENT ========================================================= */ .hero-edge-note { right: 4.2% !important; bottom: 128px !important; min-height: 50px !important; padding: 0 21px !important; border-radius: 999px !important; background: linear-gradient( 135deg, rgba(3,39,61,.94), rgba(4,53,78,.94) ) !important; border: 1px solid rgba(93,210,246,.30) !important; box-shadow: 0 14px 34px rgba(0,20,34,.17), inset 0 1px 0 rgba(255,255,255,.08) !important; font-size: 9px !important; letter-spacing: .14em !important; } /* slightly calmer pulse */ .hero-edge-note::before { width: 7px !important; height: 7px !important; background: #64D7F7 !important; } @media (max-width: 1100px) { .hero-edge-note { bottom: 123px !important; } } /* ========================================================= AUDIENCE TITLES — SYMMETRICAL TWO-LINE BALANCE ========================================================= */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { min-height: 104px !important; display: block !important; font-size: clamp(43px, 3vw, 52px) !important; line-height: .96 !important; letter-spacing: -.045em !important; } /* identical description position */ .owner-card .audience-content p, .seafarer-card .audience-content p { margin-top: 17px !important; max-width: 430px !important; font-size: 11.5px !important; line-height: 1.58 !important; } /* identical CTA spacing */ .owner-card .audience-cta, .seafarer-card .audience-cta { margin-top: 25px !important; } /* ========================================================= AUDIENCE PANELS — EXACT SYMMETRICAL MEASUREMENTS ========================================================= */ .audience-gateway { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; } /* Both halves exactly equal */ .owner-card, .seafarer-card { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================= IDENTICAL CONTENT FRAME ========================================================= */ .owner-card .audience-content, .seafarer-card .audience-content { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; padding: 52px 46px 42px 46px !important; display: grid !important; /* EXACT SAME ROWS: 1 eyebrow 2 heading 3 description 4 flexible space 5 CTA */ grid-template-rows: 15px 116px 66px 1fr 42px !important; row-gap: 14px !important; align-content: stretch !important; } /* ========================================================= EYEBROWS — SAME SIZE / SAME POSITION ========================================================= */ .owner-card .audience-content > span, .seafarer-card .audience-content > span { width: 100% !important; height: 15px !important; margin: 0 !important; padding: 0 0 0 11px !important; line-height: 15px !important; box-sizing: border-box !important; } /* ========================================================= TITLES — SAME BOX ========================================================= */ .owner-card .audience-content h2, .seafarer-card .audience-content h2 { width: 430px !important; max-width: 430px !important; height: 116px !important; min-height: 116px !important; margin: 0 !important; padding: 0 !important; display: block !important; font-size: 52px !important; line-height: .94 !important; font-weight: 850 !important; letter-spacing: -.045em !important; box-sizing: border-box !important; } /* ========================================================= DESCRIPTIONS — SAME BOX ========================================================= */ .owner-card .audience-content p, .seafarer-card .audience-content p { width: 410px !important; max-width: 410px !important; height: 66px !important; min-height: 66px !important; margin: 0 !important; padding: 0 !important; font-size: 11.5px !important; line-height: 1.55 !important; box-sizing: border-box !important; } /* ========================================================= CTAs — EXACT SAME SIZE AND BASELINE ========================================================= */ .owner-card .audience-cta, .seafarer-card .audience-cta { grid-row: 5 !important; width: 220px !important; height: 42px !important; margin: 0 !important; padding: 0 15px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; align-self: end !important; } /* CTA text must not alter button measurement */ .owner-card .audience-cta span, .seafarer-card .audience-cta span { white-space: nowrap !important; } /* ========================================================= CENTER DIVIDER — EXACT CENTER ========================================================= */ .audience-gateway::after { left: 50% !important; transform: translateX(-.5px) !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1050px) { .owner-card .audience-content, .seafarer-card .audience-content { padding: 44px 34px 36px 34px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2 { width: 365px !important; max-width: 365px !important; font-size: 44px !important; } .owner-card .audience-content p, .seafarer-card .audience-content p { width: 350px !important; max-width: 350px !important; } } @media (max-width: 760px) { .audience-gateway { grid-template-columns: 1fr !important; } .owner-card .audience-content, .seafarer-card .audience-content { display: flex !important; flex-direction: column !important; padding: 42px 26px 34px 26px !important; } .owner-card .audience-content h2, .seafarer-card .audience-content h2, .owner-card .audience-content p, .seafarer-card .audience-content p { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; } .owner-card .audience-cta, .seafarer-card .audience-cta { margin-top: 24px !important; } } /* ========================================================= SEA LICENSING — NEW OFFICIAL LOGO Vessel Registrations, Surveys & Certifications ========================================================= */ /* Header branding */ header img[src*="sea-licensing-logo.png"], .site-header img[src*="sea-licensing-logo.png"], .header-logo img[src*="sea-licensing-logo.png"], .logo img[src*="sea-licensing-logo.png"], .brand img[src*="sea-licensing-logo.png"] { width: 185px !important; height: auto !important; max-width: 185px !important; max-height: 92px !important; object-fit: contain !important; object-position: left center !important; display: block !important; } /* Footer branding */ footer img[src*="sea-licensing-logo.png"] { width: 190px !important; height: auto !important; max-width: 190px !important; object-fit: contain !important; } /* Tablet */ @media (max-width: 1100px) { header img[src*="sea-licensing-logo.png"], .site-header img[src*="sea-licensing-logo.png"], .header-logo img[src*="sea-licensing-logo.png"], .logo img[src*="sea-licensing-logo.png"], .brand img[src*="sea-licensing-logo.png"] { width: 165px !important; max-width: 165px !important; } } /* Mobile */ @media (max-width: 760px) { header img[src*="sea-licensing-logo.png"], .site-header img[src*="sea-licensing-logo.png"], .header-logo img[src*="sea-licensing-logo.png"], .logo img[src*="sea-licensing-logo.png"], .brand img[src*="sea-licensing-logo.png"] { width: 140px !important; max-width: 140px !important; } } /* ========================================================= SEA LICENSING PREMIUM CAPABILITIES SECTION ========================================================= */ .capabilities-section { position: relative; overflow: hidden; padding: 105px 0 115px; background: radial-gradient( circle at 76% 12%, rgba(60,179,226,.09), transparent 31% ), linear-gradient( 180deg, #f8fbfc 0%, #f3f8fa 100% ); } /* subtle maritime horizon line */ .capabilities-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(calc(100% - 96px), 1480px); height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(8,94,136,.16) 18%, rgba(8,94,136,.16) 82%, transparent ); } .capabilities-layout { position: relative; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.65fr); gap: 76px; align-items: start; } /* ========================================================= LEFT INTRODUCTION ========================================================= */ .capabilities-intro { position: relative; padding: 13px 0 20px 0; } .capabilities-intro .eyebrow { color: #078fd1; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; } .capabilities-intro h2 { margin: 18px 0 0; color: #082235; font-size: clamp(42px, 3.2vw, 58px); line-height: .94; font-weight: 850; letter-spacing: -.05em; } .capabilities-intro > p { max-width: 390px; margin: 24px 0 0; color: #536c79; font-size: 14px; line-height: 1.7; } /* ========================================================= CATEGORY PILLS ========================================================= */ .capability-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; } .capability-themes span { display: inline-flex; align-items: center; min-height: 31px; padding: 0 12px; border: 1px solid rgba(7,143,209,.15); border-radius: 999px; background: rgba(255,255,255,.72); color: #305568; font-size: 8px; line-height: 1; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } /* ========================================================= EXPLORE ALL LINK ========================================================= */ .capabilities-all-link { width: fit-content; margin-top: 29px; display: inline-flex; align-items: center; gap: 14px; padding-bottom: 8px; position: relative; color: #082235; font-size: 10px; line-height: 1; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; } .capabilities-all-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 1px; background: #078fd1; transition: width .35s cubic-bezier(.22,1,.36,1); } .capabilities-all-link i { color: #078fd1; font-size: 16px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .capabilities-all-link:hover::after { width: 100%; } .capabilities-all-link:hover i { transform: translateX(5px); } /* ========================================================= LARGE 06 MOTIF ========================================================= */ .capabilities-count { position: relative; margin-top: 46px; display: flex; align-items: flex-end; gap: 14px; user-select: none; } .capabilities-count::before { content: ""; position: absolute; top: -18px; left: 0; width: 75px; height: 1px; background: linear-gradient( 90deg, #078fd1, rgba(7,143,209,0) ); } .capabilities-count strong { color: rgba(7,143,209,.105); font-size: 112px; line-height: .73; font-weight: 900; letter-spacing: -.085em; } .capabilities-count small { margin-bottom: 2px; color: #718591; font-size: 8px; line-height: 1.25; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; } /* ========================================================= SERVICE CARD MATRIX ========================================================= */ .capability-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(11,82,113,.11); border-left: 1px solid rgba(11,82,113,.11); } /* ========================================================= INDIVIDUAL CARD ========================================================= */ .capability-card { position: relative; min-height: 245px; padding: 29px 30px 27px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid rgba(11,82,113,.11); border-bottom: 1px solid rgba(11,82,113,.11); background: rgba(255,255,255,.67); color: #082235; transition: transform .38s cubic-bezier(.22,1,.36,1), background .34s ease, box-shadow .34s ease; } /* animated top blue line */ .capability-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #087fc0, #56d6f7 ); transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.22,1,.36,1); } /* subtle background bloom */ .capability-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -95px; border-radius: 50%; background: rgba(66,192,233,.07); transform: scale(.5); opacity: 0; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .capability-card:hover { z-index: 2; transform: translateY(-5px); background: #fff; box-shadow: 0 22px 52px rgba(3,50,74,.12); } .capability-card:hover::before { transform: scaleX(1); } .capability-card:hover::after { transform: scale(1); opacity: 1; } /* ========================================================= CARD TOP ========================================================= */ .capability-card-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; } .capability-number { color: rgba(7,143,209,.28); font-size: 25px; line-height: 1; font-weight: 780; letter-spacing: -.04em; } .capability-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(7,143,209,.13); border-radius: 11px; background: #f3fafd; transition: background .3s ease, border-color .3s ease, transform .34s cubic-bezier(.22,1,.36,1); } .capability-icon svg, .capability-icon img { width: 24px; height: 24px; object-fit: contain; color: #078fd1; } .capability-card:hover .capability-icon { background: #e8f7fd; border-color: rgba(7,143,209,.28); transform: translateY(-2px); } /* ========================================================= CARD TYPOGRAPHY ========================================================= */ .capability-card h3 { position: relative; z-index: 2; margin: 24px 0 0; color: #082235; font-size: 22px; line-height: 1.03; font-weight: 820; letter-spacing: -.035em; } .capability-card p { position: relative; z-index: 2; max-width: 390px; margin: 14px 0 0; color: #657b86; font-size: 10.5px; line-height: 1.55; } /* ========================================================= CARD CTA ========================================================= */ .capability-card-link { position: relative; z-index: 2; margin-top: auto; padding-top: 19px; display: inline-flex; align-items: center; gap: 11px; color: #087eb8; font-size: 8.5px; line-height: 1; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; } .capability-card-link i { font-size: 14px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .capability-card:hover .capability-card-link i { transform: translateX(6px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .capabilities-section { padding: 85px 0 95px; } .capabilities-layout { grid-template-columns: 1fr; gap: 52px; } .capabilities-intro > p { max-width: 600px; } .capabilities-count { display: none; } } @media (max-width: 700px) { .capabilities-section { padding: 68px 0 74px; } .capability-cards { grid-template-columns: 1fr; } .capability-card { min-height: 220px; padding: 25px 23px; } .capabilities-intro h2 { font-size: 42px; } } /* ========================================================= CAPABILITIES — 3 COLUMN PREMIUM MATRIX ========================================================= */ /* Slightly wider service area */ .capabilities-layout { grid-template-columns: minmax(285px, .72fr) minmax(0, 2fr) !important; gap: 58px !important; } /* 3 columns x 2 rows */ .capability-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Refine card proportions for 3-column layout */ .capability-card { min-height: 270px !important; padding: 27px 25px 25px !important; background: rgba(255,255,255,.72) !important; transition: transform .38s cubic-bezier(.22,1,.36,1), background .36s ease, border-color .36s ease, box-shadow .38s ease !important; } /* ========================================================= LOGO-BLUE HOVER ========================================================= */ .capability-card:hover { z-index: 5 !important; transform: translateY(-7px) !important; background: linear-gradient( 145deg, #f3fbff 0%, #e5f7ff 52%, #d8f2ff 100% ) !important; box-shadow: 0 24px 55px rgba(0,112,175,.15), 0 8px 20px rgba(0,112,175,.07) !important; } /* brighter Sea Licensing blue top line */ .capability-card::before { height: 3px !important; background: linear-gradient( 90deg, #075bb5 0%, #0099e8 45%, #25c8f5 100% ) !important; } /* soft blue bloom */ .capability-card::after { width: 210px !important; height: 210px !important; background: radial-gradient( circle, rgba(36,190,239,.16), rgba(36,190,239,0) 70% ) !important; } /* ========================================================= NUMBER ========================================================= */ .capability-number { color: rgba(0,145,215,.26) !important; transition: color .3s ease, transform .3s ease !important; } .capability-card:hover .capability-number { color: rgba(0,121,190,.58) !important; transform: translateY(-2px); } /* ========================================================= ICON ========================================================= */ .capability-icon { width: 45px !important; height: 45px !important; border: 1px solid rgba(0,145,215,.15) !important; background: rgba(242,250,254,.92) !important; transition: transform .32s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, box-shadow .3s ease !important; } .capability-card:hover .capability-icon { transform: translateY(-3px) scale(1.04) !important; background: #ffffff !important; border-color: rgba(0,151,222,.36) !important; box-shadow: 0 10px 24px rgba(0,130,195,.12) !important; } .capability-icon svg { color: #0497d8 !important; } .capability-icon img { width: 25px !important; height: 25px !important; } /* ========================================================= CARD TYPOGRAPHY ========================================================= */ .capability-card h3 { margin-top: 23px !important; font-size: 20px !important; line-height: 1.04 !important; } .capability-card p { margin-top: 13px !important; font-size: 10px !important; line-height: 1.55 !important; color: #657b87 !important; transition: color .3s ease !important; } .capability-card:hover h3 { color: #063451 !important; } .capability-card:hover p { color: #456a7d !important; } /* ========================================================= CARD CTA ========================================================= */ .capability-card-link { color: #078fd1 !important; transition: color .3s ease !important; } .capability-card:hover .capability-card-link { color: #006fae !important; } .capability-card-link i { transition: transform .32s cubic-bezier(.22,1,.36,1) !important; } .capability-card:hover .capability-card-link i { transform: translateX(7px) !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1250px) { .capabilities-layout { grid-template-columns: 1fr !important; gap: 48px !important; } } @media (max-width: 950px) { .capability-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } @media (max-width: 620px) { .capability-cards { grid-template-columns: 1fr !important; } .capability-card { min-height: 225px !important; } } /* ========================================================= CAPABILITIES HOVER — INVERT COLORS ========================================================= */ .capability-card{ transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease !important; } /* default top border */ .capability-card::before{ transition: opacity .35s ease, background .35s ease !important; } /* HOVER = invert */ .capability-card:hover{ transform: translateY(-8px) !important; background: linear-gradient(145deg, #0a3552 0%, #0d4f7a 45%, #1086c7 100%) !important; border-color: rgba(16,134,199,.45) !important; box-shadow: 0 20px 50px rgba(4,37,58,.22), 0 8px 18px rgba(4,37,58,.16) !important; } .capability-card:hover::before{ background: linear-gradient(90deg, #35d0ff 0%, #7ee7ff 100%) !important; opacity: 1 !important; } /* number */ .capability-card:hover .capability-number{ color: rgba(255,255,255,.34) !important; } /* heading */ .capability-card:hover h3{ color: #ffffff !important; } /* description */ .capability-card:hover p{ color: rgba(255,255,255,.82) !important; } /* link */ .capability-card:hover .capability-card-link{ color: #ffffff !important; } .capability-card:hover .capability-card-link i{ color: #9fe8ff !important; transform: translateX(7px) !important; } /* icon box */ .capability-card:hover .capability-icon{ background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.26) !important; box-shadow: 0 8px 20px rgba(0,0,0,.12) !important; } /* svg icon */ .capability-card:hover .capability-icon svg, .capability-card:hover .capability-icon img{ color: #ffffff !important; filter: brightness(0) invert(1); } /* if there are small labels / meta text inside */ .capability-card:hover small, .capability-card:hover span{ color: inherit; } /* ========================================================= CAPABILITIES SECTION — PREMIUM MARITIME TEXTURE ========================================================= */ .capabilities-section { position: relative !important; isolation: isolate; background: /* soft cyan glow upper-right */ radial-gradient( circle at 78% 16%, rgba(30, 180, 230, .105) 0%, rgba(30, 180, 230, .055) 19%, rgba(30, 180, 230, 0) 43% ), /* subtle blue depth bottom-left */ radial-gradient( circle at 14% 84%, rgba(0, 107, 173, .055) 0%, rgba(0, 107, 173, 0) 34% ), /* very soft central wash */ radial-gradient( ellipse at 51% 55%, rgba(255,255,255,.95) 0%, rgba(246,251,253,.91) 56%, rgba(239,247,250,.96) 100% ) !important; } /* ========================================================= NAVIGATION / TECHNICAL GRID TEXTURE ========================================================= */ .capabilities-section::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .38; background-image: /* vertical navigation lines */ repeating-linear-gradient( 90deg, rgba(10, 116, 166, .038) 0, rgba(10, 116, 166, .038) 1px, transparent 1px, transparent 56px ), /* horizontal navigation lines */ repeating-linear-gradient( 0deg, rgba(10, 116, 166, .032) 0, rgba(10, 116, 166, .032) 1px, transparent 1px, transparent 56px ), /* subtle diagonal maritime-chart strokes */ repeating-linear-gradient( 135deg, rgba(25, 154, 207, .018) 0, rgba(25, 154, 207, .018) 1px, transparent 1px, transparent 34px ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 13%, #000 87%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 13%, #000 87%, transparent 100% ); } /* ========================================================= LARGE FAINT MARITIME ARC / SONAR EFFECT ========================================================= */ .capabilities-layout::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; right: -180px; top: -215px; border-radius: 50%; border: 1px solid rgba(14, 153, 207, .055); box-shadow: 0 0 0 70px rgba(14,153,207,.018), 0 0 0 140px rgba(14,153,207,.014), 0 0 0 210px rgba(14,153,207,.010); pointer-events: none; } /* ========================================================= SMALL DECORATIVE TECHNICAL LINE ON LEFT ========================================================= */ .capabilities-intro::after { content: ""; position: absolute; left: -38px; top: 17px; width: 22px; height: 1px; background: linear-gradient( 90deg, rgba(0, 147, 215, 0), rgba(0, 147, 215, .55) ); } /* ========================================================= KEEP CARDS ABOVE TEXTURE ========================================================= */ .capability-cards, .capabilities-intro { position: relative; z-index: 2; } /* ========================================================= MOBILE — REDUCE TEXTURE ========================================================= */ @media (max-width: 760px) { .capabilities-section::after { opacity: .22; } .capabilities-layout::before { width: 420px; height: 420px; right: -230px; top: -140px; } .capabilities-intro::after { display: none; } } /* ========================================================= GLOBAL NETWORK V2 ========================================================= */ .global-network-v2 { position: relative; overflow: hidden; padding: 94px 0 100px; isolation: isolate; background: radial-gradient( circle at 72% 46%, rgba(18,157,208,.18), transparent 34% ), radial-gradient( circle at 12% 84%, rgba(4,111,158,.16), transparent 32% ), linear-gradient( 135deg, #031d2e 0%, #052d44 49%, #063b57 100% ); } /* subtle technical grid */ .global-network-v2::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .25; pointer-events: none; background-image: repeating-linear-gradient( 90deg, rgba(98,214,247,.055) 0, rgba(98,214,247,.055) 1px, transparent 1px, transparent 72px ), repeating-linear-gradient( 0deg, rgba(98,214,247,.042) 0, rgba(98,214,247,.042) 1px, transparent 1px, transparent 72px ); } /* top glow */ .global-network-v2::after { content: ""; position: absolute; left: 50%; top: 0; width: 70%; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(105,220,250,.48), transparent ); box-shadow: 0 0 25px rgba(70,202,238,.22); } .network-v2-shell { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.65fr); gap: 72px; align-items: center; } /* ========================================================= LEFT COPY ========================================================= */ .network-v2-copy { position: relative; padding-left: 4px; } .network-v2-copy .eyebrow { color: #61d6f6 !important; font-size: 8px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; } .network-v2-copy h2 { margin: 18px 0 0; color: #fff; font-size: clamp(44px,3.4vw,60px); line-height: .94; font-weight: 850; letter-spacing: -.05em; } .network-v2-copy > p { max-width: 410px; margin: 25px 0 0; color: rgba(226,240,247,.78); font-size: 13px; line-height: 1.72; } /* ========================================================= PRINCIPLES ========================================================= */ .network-v2-principles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin-top: 30px; max-width: 410px; } .network-v2-principles span { display: flex; align-items: center; gap: 9px; color: rgba(236,247,251,.82); font-size: 8.5px; line-height: 1.2; font-weight: 700; letter-spacing: .025em; } .network-v2-principles i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #58d3f5; box-shadow: 0 0 0 4px rgba(88,211,245,.08); } /* ========================================================= CTA ========================================================= */ .network-v2-cta { width: fit-content; margin-top: 34px; min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; gap: 17px; border: 1px solid rgba(103,215,247,.28); border-radius: 5px; background: rgba(5,87,121,.29); color: #fff; font-size: 9px; line-height: 1; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); } .network-v2-cta i { color: #6bdaf8; font-size: 16px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .network-v2-cta:hover { transform: translateY(-2px); background: rgba(8,126,169,.40); border-color: rgba(103,215,247,.55); } .network-v2-cta:hover i { transform: translateX(5px); } /* ========================================================= MAP COMMAND CENTRE ========================================================= */ .network-v2-visual { position: relative; overflow: hidden; border: 1px solid rgba(116,216,245,.20); border-radius: 10px; background: rgba(4,30,47,.64); box-shadow: 0 30px 70px rgba(0,13,23,.28), inset 0 1px 0 rgba(255,255,255,.05); } /* ========================================================= MAP HEADER ========================================================= */ .network-v2-header { min-height: 71px; padding: 0 23px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(3,29,45,.74); } .network-v2-header > div { display: flex; flex-direction: column; } .network-v2-header small { color: #5dd4f6; font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; } .network-v2-header strong { margin-top: 6px; color: rgba(244,250,252,.91); font-size: 12px; line-height: 1; font-weight: 750; } .network-v2-status { display: inline-flex; align-items: center; gap: 8px; color: rgba(229,244,249,.72); font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .network-v2-status i { width: 7px; height: 7px; border-radius: 50%; background: #56dcf8; box-shadow: 0 0 0 0 rgba(86,220,248,.45); animation: networkStatusPulse 2.7s ease-out infinite; } @keyframes networkStatusPulse { 0% { box-shadow: 0 0 0 0 rgba(86,220,248,.42); } 70% { box-shadow: 0 0 0 9px rgba(86,220,248,0); } 100% { box-shadow: 0 0 0 0 rgba(86,220,248,0); } } /* ========================================================= MAP ========================================================= */ .network-v2-map { position: relative; height: 390px; overflow: hidden; background: #052c43; } .network-v2-map img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.02); filter: saturate(1.04) contrast(1.05) brightness(.88); transition: transform 9s ease-out; } .network-v2-visual:hover .network-v2-map img { transform: scale(1.075); } /* dark map vignette */ .network-v2-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(2,25,39,.32), transparent 22%, transparent 76%, rgba(2,25,39,.30) ), linear-gradient( 0deg, rgba(2,25,39,.32), transparent 30% ); } /* ========================================================= PULSE POINTS ========================================================= */ .network-pulse { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #59dcfb; box-shadow: 0 0 0 0 rgba(89,220,251,.50); animation: mapPulse 2.7s ease-out infinite; } .network-pulse-1 { left: 43%; top: 32%; } .network-pulse-2 { left: 64%; top: 48%; animation-delay: .7s; } .network-pulse-3 { left: 78%; top: 63%; animation-delay: 1.35s; } @keyframes mapPulse { 0% { box-shadow: 0 0 0 0 rgba(89,220,251,.55); } 70% { box-shadow: 0 0 0 16px rgba(89,220,251,0); } 100% { box-shadow: 0 0 0 0 rgba(89,220,251,0); } } /* ========================================================= SCAN LINE ========================================================= */ .network-scan { position: absolute; z-index: 4; left: 0; right: 0; top: -2px; height: 1px; opacity: .38; background: linear-gradient( 90deg, transparent, #72dff9, transparent ); box-shadow: 0 0 10px rgba(93,214,245,.40); animation: networkScan 8s ease-in-out infinite; } @keyframes networkScan { 0%, 12% { top: 0; opacity: 0; } 18% { opacity: .4; } 76% { opacity: .4; } 86%, 100% { top: 100%; opacity: 0; } } /* ========================================================= MAP FOOTER ========================================================= */ .network-v2-footer { min-height: 74px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: rgba(3,28,44,.88); border-top: 1px solid rgba(255,255,255,.07); } .network-regions { display: flex; align-items: center; gap: 8px; } .network-regions span { min-height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid rgba(91,207,242,.16); border-radius: 999px; color: rgba(226,243,249,.72); font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .network-v2-footer p { max-width: 260px; margin: 0; color: rgba(217,236,243,.54); font-size: 7.5px; line-height: 1.45; text-align: right; } /* ========================================================= LARGE DECORATIVE GLOBAL WORD ========================================================= */ .network-v2-word { position: absolute; z-index: -1; right: -42px; bottom: -38px; color: rgba(255,255,255,.026); font-size: 160px; line-height: 1; font-weight: 900; letter-spacing: -.065em; pointer-events: none; user-select: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .network-v2-shell { grid-template-columns: 1fr; gap: 50px; } .network-v2-copy > p { max-width: 620px; } .network-v2-principles { max-width: 620px; } } @media (max-width: 700px) { .global-network-v2 { padding: 68px 0 72px; } .network-v2-map { height: 300px; } .network-v2-footer { padding: 15px 18px; flex-direction: column; align-items: flex-start; } .network-regions { flex-wrap: wrap; } .network-v2-footer p { text-align: left; } .network-v2-word { display: none; } } @media (prefers-reduced-motion: reduce) { .network-v2-status i, .network-pulse, .network-scan { animation: none !important; } .network-v2-map img { transition: none !important; } } /* ========================================================= GLOBAL NETWORK — HIGH RES MAP UPGRADE ========================================================= */ .network-v2-map { height: 410px !important; background: #031d2e !important; } /* preserve full horizontal world composition */ .network-v2-map img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.01) !important; filter: saturate(1.06) contrast(1.035) brightness(.91) !important; transition: transform 8s cubic-bezier(.22,1,.36,1), filter 1.2s ease !important; } /* very gentle cinematic movement */ .network-v2-visual:hover .network-v2-map img { transform: scale(1.045) !important; filter: saturate(1.10) contrast(1.045) brightness(.95) !important; } /* soften the existing vignette because the new image already has excellent depth */ .network-v2-vignette { background: linear-gradient( 90deg, rgba(1,20,33,.19) 0%, transparent 18%, transparent 82%, rgba(1,20,33,.17) 100% ), linear-gradient( 0deg, rgba(1,19,31,.18) 0%, transparent 25%, transparent 82%, rgba(1,19,31,.08) 100% ) !important; } /* pulse nodes now act as animated highlights, not dominant map elements */ .network-pulse { width: 6px !important; height: 6px !important; background: #6ee1ff !important; box-shadow: 0 0 0 0 rgba(110,225,255,.34) !important; } /* relocate pulses to useful route zones */ .network-pulse-1 { left: 50% !important; top: 34% !important; } .network-pulse-2 { left: 67% !important; top: 49% !important; } .network-pulse-3 { left: 28% !important; top: 50% !important; } /* calmer scanning line */ .network-scan { opacity: .24 !important; background: linear-gradient( 90deg, transparent 5%, rgba(101,219,249,.72) 50%, transparent 95% ) !important; } /* map panel gets a slightly richer edge */ .network-v2-visual { border: 1px solid rgba(103,211,243,.24) !important; box-shadow: 0 32px 75px rgba(0,14,25,.31), inset 0 1px 0 rgba(255,255,255,.055) !important; } /* footer labels slightly easier to read */ .network-regions span { min-height: 28px !important; padding: 0 11px !important; font-size: 7.5px !important; } .network-v2-footer p { font-size: 8px !important; color: rgba(221,239,245,.64) !important; } @media (max-width: 700px) { .network-v2-map { height: 290px !important; } } /* === GLOBAL NETWORK LIVE MAP START === */ /* remove awkward cropped background word */ .global-network::after, .global-network .network-wordmark, .global-network .network-bg-word, .global-network .wordmark-bg{ content:none !important; display:none !important; } /* premium textured background instead of cut text */ .global-network{ position:relative; overflow:hidden; background: linear-gradient(90deg, #052844 0%, #083454 35%, #0a395b 60%, #103e63 100%) !important; } .global-network::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(circle at 18% 22%, rgba(70,180,230,.08), transparent 18%), radial-gradient(circle at 76% 28%, rgba(70,180,230,.06), transparent 20%), radial-gradient(circle at 66% 72%, rgba(70,180,230,.05), transparent 18%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: auto, auto, auto, 48px 48px, 48px 48px; mix-blend-mode:screen; opacity:.42; } .global-network > *{ position:relative; z-index:1; } /* map frame */ .network-v2-map{ position:relative !important; overflow:hidden !important; isolation:isolate; } .network-v2-map img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } .network-live-overlay{ position:absolute; inset:0; z-index:8; pointer-events:none; } .network-route-glow{ position:absolute; inset:0; background: radial-gradient(circle at 20% 40%, rgba(87,202,255,.10), transparent 11%), radial-gradient(circle at 35% 70%, rgba(87,202,255,.08), transparent 12%), radial-gradient(circle at 57% 38%, rgba(87,202,255,.08), transparent 12%), radial-gradient(circle at 75% 58%, rgba(87,202,255,.08), transparent 12%), radial-gradient(circle at 88% 72%, rgba(87,202,255,.08), transparent 12%); mix-blend-mode:screen; opacity:.85; } .network-map-scan{ position:absolute; inset:0; background:linear-gradient( 90deg, transparent 0%, rgba(111,220,255,.08) 46%, rgba(111,220,255,.20) 50%, rgba(111,220,255,.08) 54%, transparent 100% ); transform:translateX(-100%); animation:networkScan 8s linear infinite; mix-blend-mode:screen; opacity:.55; } /* labels */ .network-label{ position:absolute; transform:translate(-50%,-50%); color:rgba(185,231,255,.66); font-size:10px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:700; white-space:nowrap; text-shadow:0 0 10px rgba(77,201,255,.28); animation:networkLabelFloat 6s ease-in-out infinite; } /* glowing route nodes */ .network-node{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:999px; background:#9ce9ff; box-shadow: 0 0 0 2px rgba(140,231,255,.14), 0 0 10px rgba(83,207,255,.92), 0 0 22px rgba(83,207,255,.42); } .network-node::before{ content:""; position:absolute; inset:-8px; border-radius:999px; border:1px solid rgba(116,220,255,.40); animation:networkPulse 2.8s ease-out infinite; } .network-node::after{ content:""; position:absolute; inset:-16px; border-radius:999px; border:1px solid rgba(116,220,255,.14); animation:networkPulse 2.8s ease-out infinite .7s; } /* ship marker - more ship-like */ .network-ship{ position:absolute; width:18px; height:8px; margin:-4px 0 0 -9px; background:linear-gradient(90deg,#fafdff 0%, #8fe6ff 36%, #1ca4f2 100%); clip-path:polygon(0 65%, 12% 35%, 72% 35%, 100% 50%, 72% 65%, 8% 65%); box-shadow: 0 0 10px rgba(113,223,255,.95), 0 0 18px rgba(55,180,255,.55); will-change:transform,left,top; opacity:.96; } .network-ship::before{ content:""; position:absolute; width:6px; height:3px; left:5px; top:-2px; border-radius:2px 2px 0 0; background:#ecfbff; box-shadow:0 0 6px rgba(255,255,255,.55); } .network-ship::after{ content:""; position:absolute; left:-16px; top:50%; width:16px; height:2px; transform:translateY(-50%); background:linear-gradient(90deg, rgba(128,229,255,0), rgba(128,229,255,.72)); border-radius:999px; } /* subtle spotlight under ship */ .network-ship-shadow{ position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:radial-gradient(circle, rgba(103,208,255,.22) 0%, rgba(103,208,255,.08) 45%, rgba(103,208,255,0) 72%); filter:blur(1px); pointer-events:none; } @keyframes networkPulse{ 0% { transform:scale(.55); opacity:.9; } 70% { transform:scale(1.45); opacity:.12; } 100% { transform:scale(1.7); opacity:0; } } @keyframes networkLabelFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); opacity:.72; } 50% { transform:translate(-50%,-50%) translateY(-2px); opacity:.96; } } @keyframes networkScan{ 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } .network-v2-visual:hover .network-map-scan{ animation-duration:5.5s; } .network-v2-visual:hover .network-node{ box-shadow: 0 0 0 2px rgba(140,231,255,.2), 0 0 16px rgba(83,207,255,1), 0 0 30px rgba(83,207,255,.58); } @media (max-width: 900px){ .network-label{ font-size:8px; letter-spacing:.14em; } .network-ship{ width:14px; height:6px; margin:-3px 0 0 -7px; } .network-ship::before{ width:5px; height:2px; left:4px; top:-2px; } .network-ship-shadow{ width:14px; height:14px; margin:-7px 0 0 -7px; } } /* === GLOBAL NETWORK LIVE MAP END === */ /* ========================================================= GLOBAL NETWORK — COMPACT + TEXTURED REFINEMENT ========================================================= */ /* --------------------------------------------------------- REMOVE ALL LARGE DECORATIVE WORDS --------------------------------------------------------- */ .network-v2-word, .global-network-v2 .network-v2-word { display: none !important; } /* ========================================================= SECTION HEIGHT ========================================================= */ .global-network-v2 { min-height: 0 !important; height: auto !important; padding: 58px 0 62px !important; background-color: #062b43 !important; background-image: /* subtle cyan glow left */ radial-gradient( circle at 18% 31%, rgba(45,174,222,.085) 0%, transparent 30% ), /* subtle blue glow right */ radial-gradient( circle at 83% 37%, rgba(39,154,211,.075) 0%, transparent 32% ), /* bottom depth */ radial-gradient( ellipse at 56% 100%, rgba(4,20,34,.25) 0%, transparent 52% ), /* technical horizontal grid */ linear-gradient( rgba(104,207,241,.025) 1px, transparent 1px ), /* technical vertical grid */ linear-gradient( 90deg, rgba(104,207,241,.025) 1px, transparent 1px ), linear-gradient( 135deg, #05263b 0%, #07334d 52%, #0b3d5d 100% ) !important; background-size: auto, auto, auto, 72px 72px, 72px 72px, auto !important; } /* ========================================================= SUBTLE DOT / NAVIGATION TEXTURE ========================================================= */ .global-network-v2::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; pointer-events: none !important; opacity: .20 !important; background-image: radial-gradient( circle, rgba(104,215,247,.30) 0, rgba(104,215,247,.30) 1px, transparent 1.4px ), repeating-linear-gradient( 135deg, rgba(100,205,240,.018) 0, rgba(100,205,240,.018) 1px, transparent 1px, transparent 36px ) !important; background-size: 28px 28px, auto !important; -webkit-mask-image: radial-gradient( ellipse at center, #000 15%, rgba(0,0,0,.75) 58%, transparent 100% ); mask-image: radial-gradient( ellipse at center, #000 15%, rgba(0,0,0,.75) 58%, transparent 100% ); } /* preserve subtle top accent */ .global-network-v2::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 0 !important; width: 72% !important; height: 1px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, rgba(97,211,245,.38), transparent ) !important; box-shadow: 0 0 24px rgba(83,205,240,.17) !important; } /* ========================================================= MAIN GRID ========================================================= */ .network-v2-shell { position: relative !important; z-index: 2 !important; align-items: center !important; gap: 64px !important; } /* ========================================================= LEFT CONTENT — REDUCE DEAD SPACE ========================================================= */ .network-v2-copy { align-self: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } .network-v2-copy h2 { margin-top: 15px !important; } .network-v2-copy > p { margin-top: 21px !important; } .network-v2-principles { margin-top: 24px !important; } .network-v2-cta { margin-top: 27px !important; } /* ========================================================= MAP PANEL — SLIGHTLY MORE COMPACT ========================================================= */ .network-v2-header { min-height: 62px !important; } .network-v2-map { height: 350px !important; } .network-v2-footer { min-height: 61px !important; } /* ========================================================= KEEP ALL CONTENT ABOVE TEXTURE ========================================================= */ .network-v2-copy, .network-v2-visual { position: relative !important; z-index: 3 !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .global-network-v2 { padding: 60px 0 65px !important; } .network-v2-map { height: 370px !important; } } @media (max-width: 700px) { .global-network-v2 { padding: 50px 0 54px !important; } .network-v2-map { height: 285px !important; } .network-v2-header { min-height: 58px !important; } } /* ========================================================= GLOBAL SECTION — SUBTLE WORLD MAP BACKGROUND TEXTURE ========================================================= */ .global-network-v2 { position: relative !important; isolation: isolate !important; background: radial-gradient( circle at 16% 32%, rgba(35,163,218,.08), transparent 28% ), radial-gradient( circle at 85% 38%, rgba(44,174,226,.07), transparent 32% ), linear-gradient( 135deg, #05263b 0%, #07334d 52%, #0b3d5d 100% ) !important; } /* World-map watermark ONLY on blue background */ .global-network-v2::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; pointer-events: none !important; opacity: .095 !important; background-image: url('/assets/images/sections/global-maritime-network.webp') !important; background-repeat: no-repeat !important; background-position: center 54% !important; background-size: 92% auto !important; filter: grayscale(.25) saturate(.45) brightness(1.15) contrast(.82) blur(.25px) !important; transform: scale(1.035); transform-origin: center center; -webkit-mask-image: radial-gradient( ellipse at center, rgba(0,0,0,.95) 0%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.22) 78%, transparent 100% ); mask-image: radial-gradient( ellipse at center, rgba(0,0,0,.95) 0%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.22) 78%, transparent 100% ); } /* very subtle technical grid over the watermark */ .global-network-v2::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; pointer-events: none !important; background-image: linear-gradient( rgba(108,215,248,.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(108,215,248,.018) 1px, transparent 1px ) !important; background-size: 64px 64px !important; opacity: .38 !important; box-shadow: inset 0 1px 0 rgba(99,213,246,.18) !important; } /* Keep actual section content clearly above texture */ .network-v2-shell { position: relative !important; z-index: 5 !important; } /* Slight background panel behind copy for readability, almost invisible */ .network-v2-copy::before { content: "" !important; position: absolute !important; z-index: -1 !important; left: -36px !important; top: -30px !important; right: -20px !important; bottom: -30px !important; border-radius: 22px !important; background: radial-gradient( ellipse at 35% 45%, rgba(3,31,48,.25), rgba(3,31,48,0) 72% ) !important; pointer-events: none !important; } /* Reduce texture on small screens */ @media (max-width: 760px) { .global-network-v2::before { opacity: .055 !important; background-size: 150% auto !important; } } /* ========================================================= COMPLIANCE V2 ========================================================= */ .compliance-v2 { position: relative; overflow: hidden; padding: 92px 0 98px; background: radial-gradient( circle at 14% 18%, rgba(30,166,219,.075), transparent 26% ), radial-gradient( circle at 86% 78%, rgba(22,146,204,.055), transparent 29% ), linear-gradient( 180deg, #f7fbfd 0%, #ffffff 53%, #f5fafc 100% ); } /* subtle technical/document texture */ .compliance-v2::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient( rgba(9,108,159,.027) 1px, transparent 1px ), linear-gradient( 90deg, rgba(9,108,159,.022) 1px, transparent 1px ), repeating-linear-gradient( 135deg, rgba(9,108,159,.012) 0, rgba(9,108,159,.012) 1px, transparent 1px, transparent 34px ); background-size: 64px 64px, 64px 64px, auto; -webkit-mask-image: radial-gradient( ellipse at center, #000 20%, rgba(0,0,0,.55) 70%, transparent 100% ); mask-image: radial-gradient( ellipse at center, #000 20%, rgba(0,0,0,.55) 70%, transparent 100% ); } .compliance-v2-shell { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(300px,.78fr) minmax(320px,.82fr); gap: 54px; align-items: center; } /* ========================================================= IMAGE PANEL ========================================================= */ .compliance-v2-visual { position: relative; height: 470px; overflow: hidden; border-radius: 10px; background: #07273a; box-shadow: 0 28px 65px rgba(7,54,78,.15); } .compliance-v2-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.02); filter: saturate(.92) contrast(1.04) brightness(.88); transition: transform 8s cubic-bezier(.22,1,.36,1), filter 1s ease; } .compliance-v2-visual:hover img { transform: scale(1.07); filter: saturate(1) contrast(1.05) brightness(.93); } .compliance-v2-image-shade { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(1,21,33,.04) 20%, rgba(1,21,33,.18) 55%, rgba(1,21,33,.89) 100% ), linear-gradient( 90deg, rgba(3,34,51,.18), transparent 60% ); } /* image label */ .compliance-v2-image-label { position: absolute; z-index: 3; left: 30px; bottom: 88px; display: flex; flex-direction: column; } .compliance-v2-image-label span { color: #6bd9f7; font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; } .compliance-v2-image-label strong { margin-top: 7px; color: #fff; font-size: 19px; line-height: 1.05; font-weight: 780; letter-spacing: -.025em; } /* process bar */ .compliance-v2-process { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 25px; display: grid; grid-template-columns: repeat(3,1fr); min-height: 42px; border-top: 1px solid rgba(255,255,255,.14); } .compliance-v2-process span { display: flex; align-items: center; gap: 8px; color: rgba(239,249,252,.76); font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; } .compliance-v2-process i { color: #59d5f7; font-size: 8px; font-style: normal; font-weight: 900; } /* ========================================================= COPY ========================================================= */ .compliance-v2-copy { position: relative; } .compliance-v2-copy .eyebrow { color: #078fd1; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .compliance-v2-copy h2 { margin: 18px 0 0; color: #082235; font-size: clamp(43px,3vw,56px); line-height: .95; font-weight: 850; letter-spacing: -.05em; } .compliance-v2-copy > p { max-width: 410px; margin: 23px 0 0; color: #58707c; font-size: 13px; line-height: 1.7; } /* points */ .compliance-v2-points { display: grid; gap: 11px; margin-top: 27px; } .compliance-v2-points span { display: flex; align-items: center; gap: 10px; color: #294d60; font-size: 9px; font-weight: 700; } .compliance-v2-points i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #16a7df; box-shadow: 0 0 0 4px rgba(22,167,223,.09); } /* main link */ .compliance-v2-main-link { position: relative; width: fit-content; margin-top: 30px; padding-bottom: 8px; display: inline-flex; align-items: center; gap: 14px; color: #087eb8; font-size: 9px; line-height: 1; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .compliance-v2-main-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 45px; height: 1px; background: #129ed5; transition: width .32s cubic-bezier(.22,1,.36,1); } .compliance-v2-main-link i { font-size: 15px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .compliance-v2-main-link:hover::after { width: 100%; } .compliance-v2-main-link:hover i { transform: translateX(5px); } /* ========================================================= SERVICE PANEL ========================================================= */ .compliance-v2-services { overflow: hidden; border: 1px solid rgba(12,111,158,.13); border-radius: 9px; background: rgba(255,255,255,.78); box-shadow: 0 22px 50px rgba(5,67,96,.075); } .compliance-v2-services-label { min-height: 50px; padding: 0 20px; display: flex; align-items: center; color: #69808b; border-bottom: 1px solid rgba(12,111,158,.11); background: rgba(238,248,252,.72); font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; } /* service row */ .compliance-v2-service { position: relative; min-height: 112px; padding: 20px; display: grid; grid-template-columns: 45px 1fr 18px; gap: 14px; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(12,111,158,.11); color: #082235; transition: background .32s ease, color .32s ease, transform .32s cubic-bezier(.22,1,.36,1); } .compliance-v2-service:last-child { border-bottom: 0; } /* hover invert */ .compliance-v2-service:hover { z-index: 2; background: linear-gradient( 135deg, #08344f, #0a6392 ); color: #fff; transform: translateX(-4px); } /* icon */ .compliance-v2-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(9,145,207,.15); border-radius: 9px; background: #eff9fd; transition: background .3s ease, border-color .3s ease, transform .3s ease; } .compliance-v2-icon svg { width: 21px; height: 21px; color: #0c99d7; } .compliance-v2-service:hover .compliance-v2-icon { transform: translateY(-2px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); } .compliance-v2-service:hover .compliance-v2-icon svg { color: #fff; } /* copy */ .compliance-v2-service-copy { display: flex; flex-direction: column; } .compliance-v2-service-copy strong { color: inherit; font-size: 11px; line-height: 1.15; font-weight: 800; } .compliance-v2-service-copy small { margin-top: 6px; color: #718590; font-size: 8px; line-height: 1.4; transition: color .3s ease; } .compliance-v2-service:hover .compliance-v2-service-copy small { color: rgba(236,248,252,.72); } /* arrow */ .compliance-v2-arrow { color: #159ed5; font-size: 16px; font-style: normal; transition: color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); } .compliance-v2-service:hover .compliance-v2-arrow { color: #80e4ff; transform: translateX(4px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px) { .compliance-v2-shell { grid-template-columns: 1.15fr 1fr; gap: 45px; } .compliance-v2-services { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); } .compliance-v2-services-label { grid-column: 1 / -1; } .compliance-v2-service { border-bottom: 0; border-right: 1px solid rgba(12,111,158,.11); } .compliance-v2-service:last-child { border-right: 0; } } @media (max-width: 760px) { .compliance-v2 { padding: 65px 0 70px; } .compliance-v2-shell { grid-template-columns: 1fr; gap: 42px; } .compliance-v2-visual { height: 390px; } .compliance-v2-services { display: block; } .compliance-v2-service { border-right: 0; border-bottom: 1px solid rgba(12,111,158,.11); } } /* ========================================================= COMPLIANCE V2 — COMPACT VERTICAL SPACING ========================================================= */ .compliance-v2 { min-height: 0 !important; height: auto !important; padding: 54px 0 58px !important; } /* keep all three columns vertically centered */ .compliance-v2-shell { align-items: center !important; } /* slightly reduce image height */ .compliance-v2-visual { height: 425px !important; } /* tighten copy spacing */ .compliance-v2-copy h2 { margin-top: 14px !important; } .compliance-v2-copy > p { margin-top: 18px !important; } .compliance-v2-points { margin-top: 20px !important; } .compliance-v2-main-link { margin-top: 23px !important; } /* slightly tighten services panel */ .compliance-v2-services-label { min-height: 44px !important; } .compliance-v2-service { min-height: 101px !important; padding: 16px 18px !important; } /* remove any inherited excess margins */ .compliance-v2-shell > * { margin-top: 0 !important; margin-bottom: 0 !important; } @media (max-width: 1180px) { .compliance-v2 { padding: 58px 0 62px !important; } } @media (max-width: 760px) { .compliance-v2 { padding: 46px 0 50px !important; } .compliance-v2-visual { height: 350px !important; } } /* ========================================================= COMPLIANCE V2 — READABILITY REFINEMENT ========================================================= */ /* BUILT ON COMPLIANCE */ .compliance-v2-copy .eyebrow { font-size: 9.5px !important; line-height: 1.15 !important; letter-spacing: .17em !important; font-weight: 900 !important; } /* Clear requirements / Structured coordination / Practical document support */ .compliance-v2-points { gap: 13px !important; } .compliance-v2-points span { font-size: 10.5px !important; line-height: 1.3 !important; font-weight: 750 !important; color: #24495d !important; } .compliance-v2-points i { width: 7px !important; height: 7px !important; flex-basis: 7px !important; } /* EXPLORE COMPLIANCE SUPPORT */ .compliance-v2-main-link { font-size: 10.5px !important; letter-spacing: .035em !important; font-weight: 850 !important; } .compliance-v2-main-link i { font-size: 17px !important; } /* ========================================================= COMPLIANCE SERVICES HEADER ========================================================= */ .compliance-v2-services-label { font-size: 8.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .15em !important; color: #536f7e !important; } /* ========================================================= SERVICE TITLES ========================================================= */ .compliance-v2-service-copy strong { font-size: 12.5px !important; line-height: 1.2 !important; font-weight: 820 !important; } /* ========================================================= SERVICE DESCRIPTIONS Certificate Verification Regulatory Guidance Document Support ========================================================= */ .compliance-v2-service-copy small { margin-top: 7px !important; font-size: 9.5px !important; line-height: 1.45 !important; font-weight: 450 !important; color: #627b88 !important; } /* preserve strong readability on inverted hover */ .compliance-v2-service:hover .compliance-v2-service-copy small { color: rgba(244,250,253,.82) !important; } /* slightly larger arrows */ .compliance-v2-arrow { font-size: 18px !important; } /* Give the larger type enough breathing room */ .compliance-v2-service { min-height: 105px !important; } /* Mobile */ @media (max-width: 760px) { .compliance-v2-copy .eyebrow { font-size: 9px !important; } .compliance-v2-points span { font-size: 10px !important; } .compliance-v2-service-copy strong { font-size: 12px !important; } .compliance-v2-service-copy small { font-size: 9.25px !important; } } /* ========================================================= COMPLIANCE V2 — NEW HIGH RES IMAGE ========================================================= */ .compliance-v2-visual img { object-fit: cover !important; /* Keep booklet / certification document visible while preserving ocean background. */ object-position: 48% 58% !important; transform: scale(1.01) !important; filter: saturate(.94) contrast(1.035) brightness(.90) !important; transition: transform 8s cubic-bezier(.22,1,.36,1), filter 1s ease !important; } .compliance-v2-visual:hover img { transform: scale(1.055) !important; filter: saturate(1) contrast(1.045) brightness(.94) !important; } /* slightly cleaner overlay for the new brighter image */ .compliance-v2-image-shade { background: linear-gradient( 180deg, rgba(1,22,34,.01) 15%, rgba(1,22,34,.08) 45%, rgba(1,22,34,.76) 100% ), linear-gradient( 90deg, rgba(3,34,51,.10), transparent 62% ) !important; } /* ========================================================= DIGITAL ECOSYSTEM V2 ========================================================= */ .digital-v2 { position: relative; overflow: hidden; padding: 78px 0 84px !important; background: radial-gradient( circle at 18% 28%, rgba(15,158,215,.085), transparent 25% ), radial-gradient( circle at 84% 70%, rgba(30,181,226,.075), transparent 27% ), linear-gradient( 135deg, #f2f9fc 0%, #f9fcfd 52%, #edf7fb 100% ) !important; } /* subtle digital grid */ .digital-v2::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient( rgba(4,123,179,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(4,123,179,.021) 1px, transparent 1px ); background-size: 58px 58px; -webkit-mask-image: radial-gradient( ellipse at center, #000 22%, rgba(0,0,0,.52) 66%, transparent 100% ); mask-image: radial-gradient( ellipse at center, #000 22%, rgba(0,0,0,.52) 66%, transparent 100% ); } .digital-v2-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,2fr); gap: 55px; align-items: center; } /* ========================================================= INTRO ========================================================= */ .digital-v2-intro .eyebrow { color: #078fd1; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .digital-v2-intro h2 { margin: 18px 0 0; color: #082235; font-size: clamp(42px,3vw,56px); line-height: .95; font-weight: 850; letter-spacing: -.05em; } .digital-v2-intro > p { max-width: 385px; margin: 23px 0 0; color: #58717e; font-size: 13px; line-height: 1.68; } /* tags */ .digital-v2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; } .digital-v2-tags span { min-height: 29px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid rgba(8,143,209,.14); border-radius: 999px; background: rgba(255,255,255,.68); color: #335e71; font-size: 7.5px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; } /* intro link */ .digital-v2-overview { position: relative; width: fit-content; margin-top: 28px; padding-bottom: 8px; display: inline-flex; align-items: center; gap: 13px; color: #087eb8; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .digital-v2-overview::after { content: ""; position: absolute; left: 0; bottom: 0; width: 45px; height: 1px; background: #129ed5; transition: width .3s cubic-bezier(.22,1,.36,1); } .digital-v2-overview i { font-style: normal; font-size: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); } .digital-v2-overview:hover::after { width: 100%; } .digital-v2-overview:hover i { transform: translateX(5px); } /* ========================================================= PRODUCT GRID ========================================================= */ .digital-v2-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } /* ========================================================= PRODUCT CARD ========================================================= */ .digital-product { position: relative; min-height: 505px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(8,108,155,.13); border-radius: 10px; background: rgba(255,255,255,.82); color: #082235; box-shadow: 0 15px 40px rgba(5,62,88,.055); transition: transform .37s cubic-bezier(.22,1,.36,1), background .34s ease, box-shadow .34s ease, border-color .34s ease; } .digital-product::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #0065ae, #0aa4e5, #48d0f1 ); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,1,.36,1); } .digital-product:hover { z-index: 4; transform: translateY(-8px); border-color: rgba(3,131,190,.30); background: #ffffff; box-shadow: 0 26px 60px rgba(3,66,96,.14); } .digital-product:hover::before { transform: scaleX(1); } /* primary portal */ .digital-product-primary { background: linear-gradient( 180deg, rgba(237,249,254,.98), rgba(255,255,255,.94) ); } /* ========================================================= PRODUCT TOP ========================================================= */ .digital-product-top { min-height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; } .digital-product-index { color: rgba(8,143,209,.27); font-size: 20px; line-height: 1; font-weight: 850; } .digital-live-status { display: inline-flex; align-items: center; gap: 7px; color: #547685; font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .digital-live-status i { width: 6px; height: 6px; border-radius: 50%; background: #38c9ee; box-shadow: 0 0 0 0 rgba(56,201,238,.35); animation: digitalPulse 2.6s ease-out infinite; } @keyframes digitalPulse { 0% { box-shadow: 0 0 0 0 rgba(56,201,238,.4); } 70% { box-shadow: 0 0 0 8px rgba(56,201,238,0); } 100% { box-shadow: 0 0 0 0 rgba(56,201,238,0); } } .digital-tool-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(7,143,209,.15); background: #eff9fd; } .digital-tool-icon svg { width: 18px; height: 18px; color: #078fd1; } /* ========================================================= BROWSER VISUAL ========================================================= */ .digital-browser { margin: 0 17px; overflow: hidden; border: 1px solid rgba(7,122,174,.14); border-radius: 7px; background: #083853; box-shadow: 0 15px 27px rgba(2,48,70,.14); } .digital-browser-bar { height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 5px; background: #e8f3f8; } .digital-browser-bar > i { width: 5px; height: 5px; border-radius: 50%; background: #99b2be; } .digital-browser-bar span { margin-left: 7px; color: #748b96; font-size: 5.8px; } .digital-browser-screen { height: 181px; padding: 25px 20px; position: relative; overflow: hidden; color: #fff; background: radial-gradient( circle at 82% 14%, rgba(58,199,237,.36), transparent 30% ), linear-gradient( 135deg, #074261, #0b75a7 ); } .digital-browser-screen::after { content: ""; position: absolute; width: 150px; height: 150px; right: -65px; bottom: -80px; border: 1px solid rgba(130,225,249,.15); border-radius: 50%; box-shadow: 0 0 0 35px rgba(130,225,249,.04), 0 0 0 70px rgba(130,225,249,.025); } .portal-mini-brand { color: #63dcf7; font-size: 6px; font-weight: 900; letter-spacing: .17em; } .digital-browser-screen strong { display: block; margin-top: 11px; font-size: 18px; line-height: 1; } .digital-browser-screen > span { display: block; margin-top: 7px; color: rgba(235,247,251,.72); font-size: 7px; } .portal-mini-search { width: 165px; min-height: 29px; margin-top: 18px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: rgba(255,255,255,.10); color: rgba(248,253,255,.88); font-size: 6.5px; } .portal-mini-search i { font-style: normal; } .portal-mini-lines { display: flex; gap: 5px; margin-top: 13px; } .portal-mini-lines i { width: 32px; height: 3px; border-radius: 99px; background: rgba(139,226,249,.40); } /* ========================================================= TOOL VISUALS ========================================================= */ .digital-tool-visual { height: 210px; margin: 0 17px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(7,122,174,.12); border-radius: 7px; background: linear-gradient( 145deg, #f0f9fc, #dcecf4 ); } /* certificate */ .verify-document { width: 76%; min-height: 147px; padding: 18px; position: relative; display: flex; flex-direction: column; justify-content: center; background: #fff; border-radius: 4px; box-shadow: 0 15px 27px rgba(5,67,96,.11); transform: rotate(-2deg); transition: transform .45s cubic-bezier(.22,1,.36,1); } .digital-product:hover .verify-document { transform: rotate(0deg) translateY(-4px); } .verify-mark svg { width: 24px; height: 24px; color: #0b9bd8; } .verify-document strong { margin-top: 10px; color: #082235; font-size: 13px; line-height: 1.05; } .verify-document small { margin-top: 7px; color: #728894; font-size: 6px; } .verify-code { margin-top: 16px; padding-top: 8px; border-top: 1px solid #e5edf1; color: #8aa0aa; font-size: 5px; letter-spacing: .10em; } /* service request phone */ .request-visual { background: linear-gradient( 145deg, #eaf6fb, #ccdfeb ); } .request-phone { width: 113px; min-height: 177px; position: relative; padding: 28px 13px 15px; display: flex; flex-direction: column; align-items: center; border: 3px solid #093d5b; border-radius: 17px 17px 4px 4px; background: #fff; box-shadow: 0 18px 30px rgba(5,60,86,.14); transition: transform .45s cubic-bezier(.22,1,.36,1); } .digital-product:hover .request-phone { transform: translateY(-7px); } .request-phone-speaker { position: absolute; top: 9px; width: 27px; height: 3px; border-radius: 99px; background: #b2c5cd; } .request-phone svg { width: 24px; height: 24px; color: #0b9bd8; } .request-phone strong { margin-top: 13px; color: #082235; font-size: 10px; text-align: center; } .request-phone small { margin-top: 5px; color: #718792; font-size: 6px; text-align: center; } .request-phone > span { margin-top: 15px; color: #0989c6; font-size: 7px; font-weight: 850; } .request-phone > span i { margin-left: 5px; font-style: normal; } /* ========================================================= PRODUCT COPY ========================================================= */ .digital-product-copy { flex: 1; padding: 22px 19px 20px; display: flex; flex-direction: column; } .digital-product-label { color: #078fd1; font-size: 6.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .digital-product-copy h3 { margin: 8px 0 0; color: #082235; font-size: 17px; line-height: 1.05; font-weight: 820; letter-spacing: -.025em; } .digital-product-copy p { margin: 11px 0 0; color: #647c88; font-size: 9px; line-height: 1.55; } .digital-product-link { margin-top: auto; padding-top: 19px; display: inline-flex; align-items: center; gap: 9px; color: #078fd1; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; } .digital-product-link i { font-size: 14px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .digital-product:hover .digital-product-link i { transform: translateX(6px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px) { .digital-v2-layout { grid-template-columns: 1fr; gap: 45px; } .digital-v2-intro > p { max-width: 620px; } } @media (max-width: 850px) { .digital-v2-products { grid-template-columns: 1fr; } .digital-product { min-height: 460px; } } @media (max-width: 700px) { .digital-v2 { padding: 60px 0 64px !important; } } @media (prefers-reduced-motion: reduce) { .digital-live-status i { animation: none !important; } } /* ========================================================= DIGITAL ECOSYSTEM V3 ========================================================= */ .digital-v3 { position: relative; overflow: hidden; padding: 66px 0 72px !important; background: radial-gradient( circle at 15% 28%, rgba(12,157,215,.085), transparent 26% ), radial-gradient( circle at 86% 70%, rgba(47,188,231,.07), transparent 28% ), linear-gradient( 135deg, #f3fafe 0%, #fbfdfe 52%, #eef8fc 100% ) !important; } /* soft maritime lines */ .digital-v3::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: repeating-radial-gradient( ellipse at 8% 100%, transparent 0, transparent 28px, rgba(8,146,209,.055) 29px, transparent 30px ), linear-gradient( rgba(8,133,190,.02) 1px, transparent 1px ), linear-gradient( 90deg, rgba(8,133,190,.018) 1px, transparent 1px ); background-size: auto, 64px 64px, 64px 64px; } .digital-v3-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(285px,.69fr) minmax(0,2fr); gap: 52px; align-items: center; } /* ========================================================= INTRO ========================================================= */ .digital-v3-intro .eyebrow { color: #078fd1; font-size: 8.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .digital-v3-intro h2 { margin: 18px 0 0; color: #082235; font-size: clamp(43px,3vw,57px); line-height: .95; font-weight: 850; letter-spacing: -.05em; } .digital-v3-intro > p { max-width: 390px; margin: 22px 0 0; color: #58717e; font-size: 13px; line-height: 1.65; } .digital-v3-tags { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; } .digital-v3-tags span { min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid rgba(4,143,209,.17); border-radius: 999px; background: rgba(255,255,255,.67); color: #265b73; font-size: 7.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .digital-v3-overview { position: relative; width: fit-content; margin-top: 28px; padding-bottom: 8px; display: inline-flex; align-items: center; gap: 14px; color: #087fbb; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .digital-v3-overview::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 1px; background: #069adc; transition: width .32s cubic-bezier(.22,1,.36,1); } .digital-v3-overview i { font-size: 15px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .digital-v3-overview:hover::after { width: 100%; } .digital-v3-overview:hover i { transform: translateX(5px); } /* ========================================================= GRID ========================================================= */ .digital-v3-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } /* ========================================================= CARD ========================================================= */ .digital-v3-card { position: relative; min-height: 445px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(8,119,168,.15); border-radius: 9px; background: rgba(255,255,255,.87); color: #082235; box-shadow: 0 15px 38px rgba(4,62,89,.055); transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease, border-color .36s ease; } .digital-v3-card::before { content: ""; position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient( 90deg, #0561ae, #079fe0, #4ad4f3 ); transition: transform .4s cubic-bezier(.22,1,.36,1); } .digital-v3-card:hover { z-index: 4; transform: translateY(-7px); border-color: rgba(8,147,207,.32); box-shadow: 0 27px 60px rgba(4,64,92,.14); } .digital-v3-card:hover::before { transform: scaleX(1); } /* ========================================================= CARD HEADER ========================================================= */ .digital-v3-card-head { height: 54px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } .digital-v3-number { color: rgba(9,145,209,.35); font-size: 20px; font-weight: 850; } .digital-v3-status { display: inline-flex; align-items: center; gap: 7px; color: #375a6c; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .digital-v3-status i { width: 6px; height: 6px; border-radius: 50%; background: #25bce7; box-shadow: 0 0 0 0 rgba(37,188,231,.40); animation: digitalV3Pulse 2.6s ease-out infinite; } @keyframes digitalV3Pulse { 0% { box-shadow: 0 0 0 0 rgba(37,188,231,.42); } 70% { box-shadow: 0 0 0 8px rgba(37,188,231,0); } 100% { box-shadow: 0 0 0 0 rgba(37,188,231,0); } } .digital-v3-miniicon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(7,143,209,.16); border-radius: 8px; background: #eff9fd; } .digital-v3-miniicon svg { width: 18px; height: 18px; color: #0796d4; } /* ========================================================= IMAGE ========================================================= */ .digital-v3-image { height: 205px; margin: 0 12px; overflow: hidden; border-radius: 6px; background: #d9e9f1; } .digital-v3-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.002); transition: transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease; } .digital-v3-card:hover .digital-v3-image img { transform: scale(1.055); filter: saturate(1.04) contrast(1.025); } /* ========================================================= CARD COPY ========================================================= */ .digital-v3-card-copy { flex: 1; padding: 17px 17px 18px; display: flex; flex-direction: column; } .digital-v3-card-copy > span { color: #078fd1; font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .digital-v3-card-copy h3 { margin: 7px 0 0; color: #082235; font-size: 18px; line-height: 1.05; font-weight: 820; letter-spacing: -.025em; } .digital-v3-card-copy p { margin: 10px 0 0; color: #667c88; font-size: 9.5px; line-height: 1.5; } .digital-v3-card-copy strong { margin-top: auto; padding-top: 17px; display: inline-flex; align-items: center; gap: 9px; color: #078fd1; font-size: 8.5px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; } .digital-v3-card-copy strong i { font-size: 14px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .digital-v3-card:hover .digital-v3-card-copy strong i { transform: translateX(6px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px) { .digital-v3-layout { grid-template-columns: 1fr; gap: 42px; } } @media (max-width: 850px) { .digital-v3-grid { grid-template-columns: 1fr; } .digital-v3-card { min-height: 420px; } .digital-v3-image { height: 260px; } } @media (max-width: 700px) { .digital-v3 { padding: 52px 0 58px !important; } } @media (prefers-reduced-motion: reduce) { .digital-v3-status i { animation: none !important; } } /* ========================================================= PEOPLE SECTION V2 ========================================================= */ .people-v2 { position: relative !important; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; min-height: 455px !important; overflow: hidden !important; background: #062a41 !important; } /* ========================================================= LEFT IMAGE ========================================================= */ .people-v2-visual { position: relative; min-height: 455px; overflow: hidden; background: #08283b; } .people-v2-visual img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center 44%; transform: scale(1.01); filter: saturate(.91) contrast(1.04) brightness(.90); transition: transform 8s cubic-bezier(.22,1,.36,1), filter 1s ease; } .people-v2:hover .people-v2-visual img { transform: scale(1.055); filter: saturate(.98) contrast(1.045) brightness(.94); } .people-v2-image-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(2,25,39,.02) 20%, rgba(2,25,39,.12) 52%, rgba(2,25,39,.78) 100% ), linear-gradient( 90deg, rgba(2,25,39,.20), transparent 58% ); } /* image caption */ .people-v2-image-caption { position: absolute; z-index: 3; left: 46px; right: 46px; bottom: 36px; max-width: 440px; } .people-v2-image-caption span { display: block; color: #67d8f6; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; } .people-v2-image-caption strong { display: block; margin-top: 10px; max-width: 400px; color: #ffffff; font-size: 21px; line-height: 1.12; font-weight: 780; letter-spacing: -.025em; } /* ========================================================= RIGHT CONTENT ========================================================= */ .people-v2-content { position: relative; min-height: 455px; display: flex; align-items: center; overflow: hidden; background: radial-gradient( circle at 82% 22%, rgba(31,167,215,.17), transparent 31% ), radial-gradient( circle at 24% 92%, rgba(14,117,165,.15), transparent 34% ), linear-gradient( 135deg, #06263b 0%, #083550 100% ); } /* premium technical texture */ .people-v2-content::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: linear-gradient( rgba(112,214,245,.040) 1px, transparent 1px ), linear-gradient( 90deg, rgba(112,214,245,.032) 1px, transparent 1px ), repeating-linear-gradient( 135deg, rgba(112,214,245,.015) 0, rgba(112,214,245,.015) 1px, transparent 1px, transparent 38px ); background-size: 58px 58px, 58px 58px, auto; } /* subtle glow line */ .people-v2-content::after { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient( 180deg, transparent, rgba(83,210,245,.55), transparent ); box-shadow: 0 0 18px rgba(83,210,245,.18); } .people-v2-inner { position: relative; z-index: 2; width: min(620px, calc(100% - 90px)); margin: 0 auto; } /* ========================================================= TYPOGRAPHY ========================================================= */ .people-v2 .eyebrow { color: #64daf8 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .18em !important; text-transform: uppercase !important; } .people-v2 h2 { margin: 17px 0 0; color: #ffffff; font-size: clamp(44px,3.5vw,61px); line-height: .94; font-weight: 850; letter-spacing: -.05em; } .people-v2-inner > p { max-width: 570px; margin: 22px 0 0; color: rgba(227,241,247,.80); font-size: 13px; line-height: 1.68; } /* ========================================================= VALUES ========================================================= */ .people-v2-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 29px; overflow: hidden; border: 1px solid rgba(105,211,242,.15); border-radius: 8px; background: rgba(255,255,255,.035); } .people-v2-values > div { min-height: 105px; padding: 16px 15px; position: relative; border-right: 1px solid rgba(105,211,242,.12); transition: background .3s ease, transform .3s ease; } .people-v2-values > div:last-child { border-right: 0; } .people-v2-values > div:hover { background: rgba(67,189,224,.10); } .people-v2-values span { color: #59d4f5; font-size: 8px; font-weight: 900; } .people-v2-values strong { display: block; margin-top: 8px; color: #ffffff; font-size: 10.5px; line-height: 1.15; font-weight: 800; } .people-v2-values small { display: block; margin-top: 6px; color: rgba(219,238,245,.62); font-size: 8.5px; line-height: 1.42; } /* ========================================================= CTA ========================================================= */ .people-v2-cta { width: fit-content; min-height: 44px; margin-top: 27px; padding: 0 17px; display: inline-flex; align-items: center; gap: 18px; border: 1px solid rgba(97,211,244,.28); border-radius: 5px; background: rgba(21,133,175,.25); color: #ffffff; font-size: 9px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); } .people-v2-cta i { color: #73def9; font-size: 16px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .people-v2-cta:hover { transform: translateY(-2px); background: rgba(22,157,204,.39); border-color: rgba(97,211,244,.55); } .people-v2-cta:hover i { transform: translateX(5px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px) { .people-v2 { grid-template-columns: 1fr !important; } .people-v2-visual { min-height: 420px; } .people-v2-content { min-height: auto; padding: 65px 0; } } @media (max-width: 650px) { .people-v2-image-caption { left: 25px; right: 25px; bottom: 26px; } .people-v2-inner { width: calc(100% - 44px); } .people-v2-values { grid-template-columns: 1fr; } .people-v2-values > div { border-right: 0; border-bottom: 1px solid rgba(105,211,242,.12); } .people-v2-values > div:last-child { border-bottom: 0; } } /* === PEOPLE BAND IMAGE TUNING 20260917-081204 === */ .people-band { align-items: stretch; } .people-photo { min-height: 420px; background-image: url('/assets/images/sections/people-bridge-premium.webp?v=20260917-081204') !important; background-size: cover !important; background-position: center 35% !important; background-repeat: no-repeat !important; filter: brightness(0.92) contrast(1.04) saturate(1.03); } /* ========================================================= PEOPLE V2 — READABILITY UPGRADE ========================================================= */ /* OUR PEOPLE */ .people-v2 .eyebrow { font-size: 10.5px !important; line-height: 1.15 !important; } /* Main supporting paragraph */ .people-v2-inner > p { font-size: 14px !important; line-height: 1.65 !important; color: rgba(235,247,251,.86) !important; } /* 01 / 02 / 03 */ .people-v2-values span { font-size: 9.5px !important; line-height: 1 !important; } /* Clear guidance / Practical coordination / Continuity */ .people-v2-values strong { font-size: 12px !important; line-height: 1.2 !important; } /* Small descriptions inside the 3 boxes */ .people-v2-values small { margin-top: 7px !important; font-size: 10px !important; line-height: 1.45 !important; color: rgba(232,245,250,.75) !important; } /* Image-side small label */ .people-v2-image-caption span { font-size: 9.5px !important; line-height: 1.15 !important; } /* Image-side statement */ .people-v2-image-caption strong { font-size: 22px !important; line-height: 1.15 !important; } /* About Sea Licensing button */ .people-v2-cta { font-size: 10.5px !important; min-height: 46px !important; } /* Give the larger descriptions a little more room */ .people-v2-values > div { min-height: 112px !important; padding: 17px 16px !important; } @media (max-width: 650px) { .people-v2-values strong { font-size: 12px !important; } .people-v2-values small { font-size: 10px !important; } } /* ========================================================= PREMIUM CHAPTER DIVIDER PEOPLE → INSIGHTS ========================================================= */ .chapter-divider { position: relative; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient( 180deg, #f5fafc 0%, #ffffff 70% ); isolation: isolate; } /* subtle cyan transition line */ .chapter-divider-line { position: absolute; left: 50%; top: 0; width: min(1180px, 82%); height: 2px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent 0%, rgba(13,142,200,.24) 20%, #169fd8 50%, rgba(13,142,200,.24) 80%, transparent 100% ); box-shadow: 0 0 16px rgba(27,171,222,.13); } /* very subtle transition glow */ .chapter-divider::before { content: ""; position: absolute; width: 460px; height: 90px; left: 50%; top: -48px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( ellipse, rgba(32,173,220,.11), rgba(32,173,220,0) 70% ); pointer-events: none; } /* centered chapter marker */ .chapter-divider-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; color: #2f6177; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .chapter-divider-label span { white-space: nowrap; } .chapter-divider-label i { width: 48px; height: 1px; display: block; background: linear-gradient( 90deg, transparent, rgba(14,143,199,.48) ); } .chapter-divider-label i:last-child { background: linear-gradient( 90deg, rgba(14,143,199,.48), transparent ); } /* small center dot */ .chapter-divider-label::before { content: ""; position: absolute; left: 50%; top: -15px; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #25bce7; box-shadow: 0 0 0 5px rgba(37,188,231,.08), 0 0 12px rgba(37,188,231,.28); } /* mobile */ @media (max-width: 650px) { .chapter-divider { height: 56px; } .chapter-divider-label { font-size: 7.5px; gap: 10px; } .chapter-divider-label i { width: 25px; } } /* ========================================================= PEOPLE SECTION — TOP CHAPTER DIVIDER ========================================================= */ .people-divider { height: 64px !important; background: linear-gradient( 180deg, #ffffff 0%, #f5fafc 100% ) !important; } /* line nearest the dark section */ .people-divider .chapter-divider-line { top: auto !important; bottom: 0 !important; background: linear-gradient( 90deg, transparent 0%, rgba(13,142,200,.22) 20%, #169fd8 50%, rgba(13,142,200,.22) 80%, transparent 100% ) !important; } /* soft glow towards the section below */ .people-divider::before { top: auto !important; bottom: -48px !important; background: radial-gradient( ellipse, rgba(32,173,220,.10), rgba(32,173,220,0) 70% ) !important; } /* move the decorative dot toward lower edge */ .people-divider .chapter-divider-label::before { top: auto !important; bottom: -15px !important; } /* slightly different label tone */ .people-divider .chapter-divider-label { color: #2d6179 !important; } @media (max-width: 650px) { .people-divider { height: 56px !important; } } /* ========================================================= PEOPLE V2 — PREMIUM TOP/BOTTOM BREATHING ROOM ========================================================= */ /* Slightly taller overall section */ .people-v2 { min-height: 510px !important; } /* Match image and blue panel heights */ .people-v2-visual, .people-v2-content { min-height: 510px !important; } /* Add controlled blue breathing room */ .people-v2-content { padding-top: 26px !important; padding-bottom: 28px !important; box-sizing: border-box !important; } /* Keep whole right composition vertically balanced */ .people-v2-inner { margin-top: auto !important; margin-bottom: auto !important; } /* Give the button a tiny bit more separation */ .people-v2-cta { margin-top: 30px !important; } /* Keep left-side caption visually balanced with increased section height */ .people-v2-image-caption { bottom: 42px !important; } @media (max-width: 980px) { .people-v2, .people-v2-visual { min-height: 455px !important; } .people-v2-content { min-height: auto !important; padding-top: 62px !important; padding-bottom: 62px !important; } } /* ========================================================= MARITIME INSIGHTS V2 ========================================================= */ .insights-v2 { position: relative; overflow: hidden; padding: 68px 0 76px !important; background: radial-gradient( circle at 12% 20%, rgba(20,159,213,.06), transparent 27% ), radial-gradient( circle at 88% 78%, rgba(33,182,226,.055), transparent 28% ), linear-gradient( 180deg, #ffffff 0%, #f7fbfd 100% ) !important; } /* subtle editorial / maritime texture */ .insights-v2::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: repeating-linear-gradient( 135deg, rgba(10,139,198,.022) 0, rgba(10,139,198,.022) 1px, transparent 1px, transparent 38px ), linear-gradient( rgba(10,139,198,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(10,139,198,.015) 1px, transparent 1px ); background-size: auto, 68px 68px, 68px 68px; } /* ========================================================= LAYOUT ========================================================= */ .insights-v2-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(260px,.66fr) minmax(0,2fr); gap: 48px; align-items: center; } /* ========================================================= INTRO ========================================================= */ .insights-v2-intro .eyebrow { display: block; color: #078fd1; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .insights-v2-intro h2 { margin: 17px 0 0; color: #082235; font-size: clamp(44px,3.2vw,58px); line-height: .95; font-weight: 850; letter-spacing: -.05em; } .insights-v2-intro > p { max-width: 380px; margin: 22px 0 0; color: #58717e; font-size: 13.5px; line-height: 1.66; } /* topic chips */ .insights-v2-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .insights-v2-topics span { min-height: 29px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid rgba(8,143,209,.16); border-radius: 999px; background: rgba(255,255,255,.76); color: #315f73; font-size: 8px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; } /* overview link */ .insights-v2-overview { position: relative; width: fit-content; margin-top: 27px; padding-bottom: 8px; display: inline-flex; align-items: center; gap: 14px; color: #087fbb; font-size: 10px; line-height: 1; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .insights-v2-overview::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 1px; background: #079bd9; transition: width .3s cubic-bezier(.22,1,.36,1); } .insights-v2-overview:hover::after { width: 100%; } .insights-v2-overview i { font-size: 15px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } .insights-v2-overview:hover i { transform: translateX(5px); } /* ========================================================= ARTICLE GRID ========================================================= */ .insights-v2-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; } /* ========================================================= CARD ========================================================= */ .insights-v2-card { position: relative; min-width: 0; min-height: 430px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(8,112,160,.14); border-radius: 9px; background: rgba(255,255,255,.91); color: #082235; box-shadow: 0 15px 36px rgba(5,65,92,.055); transition: transform .38s cubic-bezier(.22,1,.36,1), border-color .32s ease, box-shadow .32s ease, background .32s ease, color .32s ease; } .insights-v2-card::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #045daf, #079fde, #4ed1f2 ); transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.22,1,.36,1); } .insights-v2-card:hover { z-index: 3; transform: translateY(-7px); border-color: rgba(7,145,207,.35); background: linear-gradient( 155deg, #073653 0%, #085f89 100% ); color: #ffffff; box-shadow: 0 26px 58px rgba(4,65,94,.16); } .insights-v2-card:hover::after { transform: scaleX(1); } /* ========================================================= IMAGE ========================================================= */ .insights-v2-image { position: relative; height: 190px; overflow: hidden; background: #dceaf1; } .insights-v2-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 45%, rgba(3,30,45,.18) 100% ); pointer-events: none; } .insights-v2-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform .75s cubic-bezier(.22,1,.36,1), filter .5s ease; } .insights-v2-card:hover .insights-v2-image img { transform: scale(1.065); filter: saturate(1.04) contrast(1.04); } /* article number */ .insights-v2-index { position: absolute; z-index: 4; left: 15px; top: 14px; width: 34px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.30); border-radius: 4px; background: rgba(2,34,50,.58); color: #ffffff; backdrop-filter: blur(7px); font-size: 9px; font-weight: 900; } /* ========================================================= CONTENT ========================================================= */ .insights-v2-content { flex: 1; padding: 20px 18px 18px; display: flex; flex-direction: column; } .insights-v2-category { color: #078fd1; font-size: 8.5px; line-height: 1; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; transition: color .3s ease; } .insights-v2-content h3 { margin: 9px 0 0; color: inherit; font-size: 17px; line-height: 1.16; font-weight: 820; letter-spacing: -.025em; } .insights-v2-content p { margin: 11px 0 0; color: #647c88; font-size: 10px; line-height: 1.55; transition: color .3s ease; } .insights-v2-content strong { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 10px; color: #078fd1; font-size: 9px; line-height: 1; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; transition: color .3s ease; } .insights-v2-content strong i { font-size: 15px; font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); } /* inverted hover */ .insights-v2-card:hover .insights-v2-category { color: #6fddf9; } .insights-v2-card:hover .insights-v2-content p { color: rgba(235,247,251,.78); } .insights-v2-card:hover .insights-v2-content strong { color: #7ee3fc; } .insights-v2-card:hover .insights-v2-content strong i { transform: translateX(6px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px) { .insights-v2-layout { grid-template-columns: 1fr; gap: 42px; } } @media (max-width: 850px) { .insights-v2-grid { grid-template-columns: 1fr; } .insights-v2-card { min-height: 420px; } .insights-v2-image { height: 250px; } } @media (max-width: 650px) { .insights-v2 { padding: 54px 0 60px !important; } } /* ========================================================= MARITIME INSIGHTS V2 — IMAGE + READABILITY REFINEMENT ========================================================= */ /* --------------------------------------------------------- NEW HIGH-RES ARTICLE IMAGES --------------------------------------------------------- */ .insights-v2-image { height: 205px !important; } /* Vessel registration */ .insights-v2-card:nth-child(1) .insights-v2-image img { object-position: center 52% !important; } /* Seafarer certification */ .insights-v2-card:nth-child(2) .insights-v2-image img { object-position: center 48% !important; } /* Vessel survey */ .insights-v2-card:nth-child(3) .insights-v2-image img { object-position: center 45% !important; } .insights-v2-image img { filter: saturate(.96) contrast(1.025) brightness(.97) !important; } .insights-v2-card:hover .insights-v2-image img { filter: saturate(1.04) contrast(1.045) brightness(1) !important; } /* ========================================================= INTRO READABILITY ========================================================= */ /* MARITIME INSIGHTS */ .insights-v2-intro .eyebrow { font-size: 10px !important; line-height: 1.15 !important; } /* Intro paragraph */ .insights-v2-intro > p { font-size: 14px !important; line-height: 1.66 !important; color: #4f6977 !important; } /* Registration / Seafarers / Compliance pills */ .insights-v2-topics span { font-size: 9px !important; font-weight: 850 !important; } /* VIEW ALL INSIGHTS */ .insights-v2-overview { font-size: 10.5px !important; } /* ========================================================= ARTICLE CARD READABILITY ========================================================= */ /* 01 / 02 / 03 */ .insights-v2-index { width: 36px !important; height: 29px !important; font-size: 10px !important; } /* Registration / Seafarers / Compliance */ .insights-v2-category { font-size: 9.5px !important; line-height: 1.1 !important; } /* Article titles */ .insights-v2-content h3 { margin-top: 10px !important; font-size: 18px !important; line-height: 1.18 !important; } /* Article descriptions */ .insights-v2-content p { margin-top: 11px !important; font-size: 11.5px !important; line-height: 1.57 !important; color: #536f7c !important; } /* READ INSIGHT */ .insights-v2-content strong { font-size: 10px !important; line-height: 1.1 !important; padding-top: 16px !important; } .insights-v2-content strong i { font-size: 16px !important; } /* ========================================================= PRESERVE READABILITY ON BLUE HOVER ========================================================= */ .insights-v2-card:hover .insights-v2-content p { color: rgba(241,249,252,.84) !important; } .insights-v2-card:hover .insights-v2-category { color: #82e5fc !important; } .insights-v2-card:hover .insights-v2-content strong { color: #8be8fd !important; } /* ========================================================= GIVE LARGER TEXT ENOUGH ROOM ========================================================= */ .insights-v2-card { min-height: 455px !important; } .insights-v2-content { padding: 20px 19px 19px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 850px) { .insights-v2-image { height: 255px !important; } .insights-v2-content h3 { font-size: 19px !important; } .insights-v2-content p { font-size: 11.5px !important; } .insights-v2-category { font-size: 9.5px !important; } } /* ========================================================= SEA LICENSING — FOOTER V2 ========================================================= */ .footer-v2 { position: relative; overflow: hidden; color: #ffffff; background: #041f31; } /* ========================================================= TOP CTA ========================================================= */ .footer-v2-cta { position: relative; overflow: hidden; border-top: 1px solid rgba(84,207,241,.16); border-bottom: 1px solid rgba(84,207,241,.13); background: radial-gradient( circle at 16% 50%, rgba(26,175,223,.18), transparent 33% ), radial-gradient( circle at 87% 20%, rgba(52,194,229,.13), transparent 30% ), linear-gradient( 110deg, #063652 0%, #075279 57%, #0879a9 100% ); } .footer-v2-cta::before { content: ""; position: absolute; inset: 0; opacity: .20; pointer-events: none; background-image: linear-gradient( rgba(132,224,247,.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(132,224,247,.04) 1px, transparent 1px ); background-size: 56px 56px; } .footer-v2-cta-inner { position: relative; z-index: 2; min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 50px; } .footer-v2-cta-copy > span { color: #6ee0fb; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; } .footer-v2-cta-copy h2 { max-width: 650px; margin: 14px 0 0; color: #ffffff; font-size: clamp(34px,2.6vw,47px); line-height: .98; font-weight: 850; letter-spacing: -.045em; } /* CTA buttons */ .footer-v2-cta-actions { display: flex; gap: 10px; flex-shrink: 0; } .footer-v2-btn { min-height: 48px; padding: 0 19px; display: inline-flex; align-items: center; gap: 16px; border-radius: 5px; font-size: 9.5px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; transition: transform .28s cubic-bezier(.22,1,.36,1), background .28s ease, border-color .28s ease; } .footer-v2-btn i { font-size: 16px; font-style: normal; transition: transform .28s cubic-bezier(.22,1,.36,1); } .footer-v2-btn:hover { transform: translateY(-2px); } .footer-v2-btn:hover i { transform: translateX(5px); } .footer-v2-btn-primary { background: #25bce7; color: #04263b; border: 1px solid #25bce7; } .footer-v2-btn-primary:hover { background: #62dafa; border-color: #62dafa; } .footer-v2-btn-secondary { color: #ffffff; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.06); } .footer-v2-btn-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.46); } /* ========================================================= MAIN FOOTER ========================================================= */ .footer-v2-main { position: relative; overflow: hidden; padding: 61px 0 56px; background: radial-gradient( circle at 10% 85%, rgba(26,155,205,.10), transparent 26% ), radial-gradient( circle at 88% 20%, rgba(24,121,167,.10), transparent 32% ), linear-gradient( 125deg, #031d2d 0%, #052b42 100% ); } /* faint global-map texture */ .footer-v2-main::before { content: ""; position: absolute; right: -2%; bottom: -26%; width: 59%; height: 125%; pointer-events: none; opacity: .045; background: url('/assets/images/sections/global-maritime-network.webp') center / contain no-repeat; filter: grayscale(1) brightness(1.7); } .footer-v2-main::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient( rgba(100,210,241,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(100,210,241,.028) 1px, transparent 1px ); background-size: 64px 64px; } /* ========================================================= GRID ========================================================= */ .footer-v2-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(265px,1.5fr) 1fr .80fr .88fr 1.05fr; gap: 48px; } /* ========================================================= BRAND ========================================================= */ .footer-v2-brand { max-width: 340px; } .footer-v2-logo { width: 230px; min-height: 108px; padding: 11px 16px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: #ffffff; box-shadow: 0 15px 35px rgba(0,0,0,.15); } .footer-v2-logo img { display: block; width: 100%; height: auto; max-height: 92px; object-fit: contain; } .footer-v2-brand p { margin: 24px 0 0; color: rgba(224,239,246,.73); font-size: 11.5px; line-height: 1.65; } .footer-v2-brand strong { display: block; margin-top: 19px; color: #6edcf9; font-size: 8.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } /* ========================================================= COLUMNS ========================================================= */ .footer-v2-column, .footer-v2-contact { display: flex; flex-direction: column; align-items: flex-start; } .footer-v2-heading { position: relative; margin-bottom: 21px; padding-bottom: 11px; color: #ffffff; font-size: 10px; line-height: 1; font-weight: 850; letter-spacing: .10em; text-transform: uppercase; } .footer-v2-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 29px; height: 1px; background: #27bde7; } .footer-v2-column > a { position: relative; margin-bottom: 12px; color: rgba(221,238,245,.70); font-size: 10px; line-height: 1.35; transition: color .23s ease, transform .23s ease; } .footer-v2-column > a::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 1px; transform: translateY(-50%) scaleX(0); transform-origin: right; background: #51d1f2; transition: transform .23s ease; } .footer-v2-column > a:hover { color: #ffffff; transform: translateX(6px); } .footer-v2-column > a:hover::before { transform: translateY(-50%) scaleX(1); } /* ========================================================= CONTACT ========================================================= */ .footer-v2-email { color: #74ddf8; font-size: 11px; font-weight: 700; transition: color .2s ease; } .footer-v2-email:hover { color: #ffffff; } .footer-v2-contact-block { margin-top: 18px; display: flex; flex-direction: column; gap: 5px; } .footer-v2-contact-block span { color: rgba(188,216,228,.48); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .footer-v2-contact-block a { color: rgba(234,246,250,.82); font-size: 10.5px; transition: color .2s ease; } .footer-v2-contact-block a:hover { color: #70dff9; } .footer-v2-contact-link { position: relative; margin-top: 24px; padding-bottom: 7px; display: inline-flex; align-items: center; gap: 11px; color: #62d8f6; font-size: 8.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; } .footer-v2-contact-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 35px; height: 1px; background: #39c4ea; transition: width .25s ease; } .footer-v2-contact-link:hover::after { width: 100%; } .footer-v2-contact-link i { font-size: 14px; font-style: normal; } /* ========================================================= BOTTOM BAR ========================================================= */ .footer-v2-bottom { border-top: 1px solid rgba(92,198,229,.12); background: #021724; } .footer-v2-bottom-inner { min-height: 59px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 25px; align-items: center; } .footer-v2-bottom-inner > span, .footer-v2-bottom-inner > a { color: rgba(204,227,236,.52); font-size: 8.5px; line-height: 1.3; } .footer-v2-bottom-message { color: rgba(105,218,247,.65) !important; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; } .footer-v2-bottom-inner > a { justify-self: end; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .07em; transition: color .2s ease; } .footer-v2-bottom-inner > a:hover { color: #63daf8; } .footer-v2-bottom-inner > a i { font-size: 12px; font-style: normal; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .footer-v2-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 45px 36px; } .footer-v2-brand { grid-row: span 2; } } @media (max-width: 850px) { .footer-v2-cta-inner { padding: 46px 0; flex-direction: column; align-items: flex-start; } .footer-v2-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .footer-v2-brand { grid-column: 1 / -1; grid-row: auto; max-width: 560px; } .footer-v2-bottom-inner { padding: 18px 0; grid-template-columns: 1fr; text-align: left; } .footer-v2-bottom-inner > a { justify-self: start; } } @media (max-width: 580px) { .footer-v2-cta-actions { width: 100%; flex-direction: column; } .footer-v2-btn { width: 100%; justify-content: space-between; } .footer-v2-grid { grid-template-columns: 1fr; } .footer-v2-main { padding: 50px 0; } } /* ========================================================= FINAL CTA — PREMIUM START A REQUEST BUTTON ========================================================= */ .cta-band .btn-white { position: relative !important; isolation: isolate !important; min-width: 205px !important; min-height: 58px !important; padding: 0 22px !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 25px !important; overflow: hidden !important; border: 1px solid rgba(122, 229, 255, .42) !important; border-radius: 5px !important; background: linear-gradient( 135deg, #087fb7 0%, #079dd4 48%, #16b6df 100% ) !important; color: #ffffff !important; box-shadow: 0 11px 28px rgba(1, 72, 108, .20), inset 0 1px 0 rgba(255,255,255,.18) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .025em !important; text-transform: none !important; transition: transform .30s cubic-bezier(.22,1,.36,1), box-shadow .30s ease, border-color .30s ease !important; } /* subtle illuminated upper edge */ .cta-band .btn-white::before { content: "" !important; position: absolute !important; left: 1px !important; right: 1px !important; top: 1px !important; height: 45% !important; border-radius: 4px 4px 50% 50% !important; background: linear-gradient( 180deg, rgba(255,255,255,.13), transparent ) !important; pointer-events: none !important; } /* animated light sweep */ .cta-band .btn-white::after { content: "" !important; position: absolute !important; top: -35% !important; left: -45% !important; width: 35% !important; height: 175% !important; transform: skewX(-22deg) !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.24), transparent ) !important; transition: left .55s cubic-bezier(.22,1,.36,1) !important; pointer-events: none !important; } /* arrow */ .cta-band .btn-white svg { position: relative !important; z-index: 2 !important; width: 17px !important; height: 17px !important; color: #ffffff !important; transition: transform .30s cubic-bezier(.22,1,.36,1) !important; } /* keep text above effects */ .cta-band .btn-white { z-index: 1 !important; } /* hover */ .cta-band .btn-white:hover { transform: translateY(-3px) !important; border-color: rgba(154,239,255,.75) !important; box-shadow: 0 17px 35px rgba(1,72,108,.27), 0 0 0 4px rgba(54,198,235,.07), inset 0 1px 0 rgba(255,255,255,.22) !important; } .cta-band .btn-white:hover::after { left: 120% !important; } .cta-band .btn-white:hover svg { transform: translateX(5px) !important; } /* click */ .cta-band .btn-white:active { transform: translateY(-1px) !important; } /* keyboard accessibility */ .cta-band .btn-white:focus-visible { outline: 2px solid #86e8ff !important; outline-offset: 4px !important; } /* mobile */ @media (max-width: 650px) { .cta-band .btn-white { width: 100% !important; min-width: 0 !important; min-height: 54px !important; } } /* ========================================================= SAFE HEADER → HERO SEPARATION Does NOT modify header positioning or mobile navigation ========================================================= */ /* Homepage only */ .home-hero { margin-top: 12px !important; } /* subtle separation edge */ .home-hero::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: #ffffff; pointer-events: none; z-index: 2; } /* Mobile needs a smaller breathing gap */ @media (max-width: 700px) { .home-hero { margin-top: 8px !important; } .home-hero::before { top: -8px; height: 8px; } } /* ========================================================= HEADER → PAGE REAL BREATHING GAP Does not alter sticky navigation ========================================================= */ .header-page-gap { position: relative; width: 100%; height: 12px; flex: 0 0 12px; background: #ffffff; border-bottom: 1px solid rgba(16, 145, 201, .13); box-shadow: 0 4px 10px rgba(6, 49, 72, .025); z-index: 1; } /* Remove previous hero-gap workaround */ .home-hero { margin-top: 0 !important; } .home-hero::before { content: none !important; } /* Mobile */ @media (max-width: 700px) { .header-page-gap { height: 8px; flex-basis: 8px; } } /* ========================================================= STICKY HEADER — PERMANENT BREATHING GAP Does NOT modify sticky positioning ========================================================= */ /* Disable old spacer implementation */ .header-page-gap { display: none !important; } /* Remove previous hero spacing workarounds */ .home-hero { margin-top: 0 !important; } /* Important: Do not set position/top/z-index here. Existing working sticky header remains untouched. */ .site-header, body > header { box-shadow: 0 10px 0 #ffffff, 0 14px 18px rgba(5, 47, 70, .045) !important; } /* subtle line at bottom of white separation */ .site-header::after, body > header::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -10px !important; height: 1px !important; background: linear-gradient( 90deg, transparent 0%, rgba(24,153,204,.13) 20%, rgba(24,153,204,.13) 80%, transparent 100% ) !important; pointer-events: none !important; } /* mobile slightly smaller */ @media (max-width: 700px) { .site-header, body > header { box-shadow: 0 7px 0 #ffffff, 0 11px 15px rgba(5,47,70,.04) !important; } .site-header::after, body > header::after { bottom: -7px !important; } } /* ========================================================= HEADER GAP — REMOVE VISIBLE DIVIDER LINE Keep sticky header + white breathing space ========================================================= */ .site-header::after, body > header::after { content: none !important; display: none !important; background: none !important; height: 0 !important; } /* Keep only the clean white space below sticky header */ .site-header, body > header { box-shadow: 0 10px 0 #ffffff, 0 13px 15px rgba(5,47,70,.025) !important; } @media (max-width: 700px) { .site-header, body > header { box-shadow: 0 7px 0 #ffffff, 0 10px 12px rgba(5,47,70,.022) !important; } } /* ========================================================= HEADER → HERO FINAL CLEAN SEPARATION ========================================================= */ /* Remove every previous visual separator */ .site-header, body > header { border-top: 0 !important; border-bottom: 10px solid #ffffff !important; outline: 0 !important; box-shadow: none !important; } /* Remove all previous header pseudo-elements */ .site-header::before, .site-header::after, body > header::before, body > header::after { content: none !important; display: none !important; } /* Hero must not draw any line against the header */ .home-hero { margin-top: 0 !important; border-top: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Kill any hero pseudo-element previously used as a spacer */ .home-hero::before { content: none !important; display: none !important; } /* Old standalone spacer is no longer required */ .header-page-gap { display: none !important; } /* Also remove border from the immediate header wrapper if present */ .site-header-inner, .header-inner, .header-shell, .nav-shell { border-bottom: 0 !important; box-shadow: none !important; } /* Mobile gets a slightly smaller clean white gap */ @media (max-width: 700px) { .site-header, body > header { border-bottom-width: 7px !important; } } /* ========================================================= FINAL STICKY HEADER GAP White space visible below header — NO line ========================================================= */ /* Do not alter existing sticky positioning */ .site-header, body > header { overflow: visible !important; border-bottom: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Actual white breathing strip outside the header */ .site-header::after, body > header::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -12px !important; width: 100% !important; height: 12px !important; background: #ffffff !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; pointer-events: none !important; z-index: 9998 !important; } /* Hero itself must have no separator line */ .home-hero { margin-top: 0 !important; border-top: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Remove old standalone spacer */ .header-page-gap { display: none !important; } /* Mobile */ @media (max-width: 700px) { .site-header::after, body > header::after { bottom: -8px !important; height: 8px !important; } } /* ========================================================= PREMIUM CARD ART — SERVICES / DIGITAL MEGA MENUS ========================================================= */ [data-mega="services"] .mega-grid > a, [data-mega="digital"] .mega-grid > a{ position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; border: 1px solid #d9e6ee; background: linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,251,253,.985) 100%); box-shadow: 0 10px 24px rgba(10, 44, 67, .035); } [data-mega="services"] .mega-grid > a::before, [data-mega="digital"] .mega-grid > a::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 100% 0%, rgba(75,148,197,.11), transparent 38%), linear-gradient(135deg, rgba(82,161,212,.06), transparent 55%); pointer-events: none; } [data-mega="services"] .mega-grid > a::after, [data-mega="digital"] .mega-grid > a::after{ content: ""; position: absolute; right: -8px; bottom: -8px; width: 138px; height: 138px; z-index: 0; opacity: .09; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; transform: scale(1); transition: transform .35s ease, opacity .35s ease; } [data-mega="services"] .mega-grid > a > *, [data-mega="digital"] .mega-grid > a > *{ position: relative; z-index: 1; } [data-mega="services"] .mega-grid > a:hover::after, [data-mega="digital"] .mega-grid > a:hover::after{ opacity: .16; transform: scale(1.05); } /* readability */ [data-mega="services"] .mega-grid > a b, [data-mega="digital"] .mega-grid > a b{ font-size: 15px !important; line-height: 1.18 !important; letter-spacing: -.015em; color: #1a3143; } [data-mega="services"] .mega-grid > a small, [data-mega="digital"] .mega-grid > a small{ margin-top: 7px !important; font-size: 12px !important; line-height: 1.48 !important; color: #5a7081 !important; max-width: 92%; } [data-mega="services"] .mega-grid > a:hover b, [data-mega="digital"] .mega-grid > a:hover b, [data-mega="services"] .mega-grid > a:hover small, [data-mega="digital"] .mega-grid > a:hover small{ color: #ffffff !important; } /* keep icon clean above art */ [data-mega="services"] .mega-grid .mega-icon, [data-mega="digital"] .mega-grid .mega-icon{ position: relative; z-index: 2; backdrop-filter: blur(2px); box-shadow: 0 8px 18px rgba(10,44,67,.05); } /* ========================================================= SERVICES — per-card subtle illustrative art Current order: 1 Vessel Registration & Flagging 2 Surveys & Certification 3 Seafarer Licensing & Endorsements 4 Crew & Manning 5 Maritime Training 6 Advisory & Compliance 7 Offshore Companies Formation ========================================================= */ [data-mega="services"] .mega-grid > a:nth-of-type(1)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 95h92l-13 15H47z'/%3E%3Cpath d='M58 95V64h36v31'/%3E%3Cpath d='M94 72l18 8M94 80h19'/%3E%3Cpath d='M28 118c9 7 18 7 27 0 9 7 18 7 27 0 9 7 18 7 27 0 9 7 18 7 27 0'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="services"] .mega-grid > a:nth-of-type(2)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M53 30h42l24 24v69c0 6-5 11-11 11H53c-6 0-11-5-11-11V41c0-6 5-11 11-11z'/%3E%3Cpath d='M95 30v24h24'/%3E%3Cpath d='M59 74h41M59 90h41M59 106h28'/%3E%3Cpath d='M97 106l7 7 14-16'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="services"] .mega-grid > a:nth-of-type(3)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 28l39 14v30c0 29-20 45-39 58-19-13-39-29-39-58V42z'/%3E%3Cpath d='M63 78l12 12 23-26'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="services"] .mega-grid > a:nth-of-type(4)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='63' cy='59' r='16'/%3E%3Ccircle cx='100' cy='67' r='13'/%3E%3Cpath d='M38 116c3-18 17-29 34-29s31 11 34 29'/%3E%3Cpath d='M88 116c2-13 12-22 24-22 11 0 20 7 24 19'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="services"] .mega-grid > a:nth-of-type(5)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 64l50-22 50 22-50 22z'/%3E%3Cpath d='M49 73v25c18 14 44 14 62 0V73'/%3E%3Cpath d='M130 64v35'/%3E%3Ccircle cx='130' cy='104' r='5'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="services"] .mega-grid > a:nth-of-type(6)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='44' y='30' width='72' height='100' rx='10'/%3E%3Cpath d='M61 59h39M61 76h39M61 93h22'/%3E%3Cpath d='M86 94l8 8 15-17'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="services"] .mega-grid > a:nth-of-type(7)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='80' cy='80' r='34'/%3E%3Cpath d='M46 80h68M80 46c10 10 15 22 15 34s-5 24-15 34M80 46c-10 10-15 22-15 34s5 24 15 34'/%3E%3Cpath d='M103 57h22v22M57 103h22v22'/%3E%3C/g%3E%3C/svg%3E"); } /* ========================================================= DIGITAL — subtle background art Order: 1 Seafarers Portal 2 Certificate Verification 3 Smart Service Request ========================================================= */ [data-mega="digital"] .mega-grid > a:nth-of-type(1)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='63' cy='61' r='14'/%3E%3Ccircle cx='101' cy='67' r='11'/%3E%3Cpath d='M40 112c3-16 16-26 32-26s29 10 32 26'/%3E%3Cpath d='M88 112c2-11 11-19 22-19 9 0 17 5 21 14'/%3E%3Crect x='28' y='28' width='104' height='104' rx='16'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="digital"] .mega-grid > a:nth-of-type(2)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 28l39 14v30c0 29-20 45-39 58-19-13-39-29-39-58V42z'/%3E%3Cpath d='M60 81l11 11 29-30'/%3E%3C/g%3E%3C/svg%3E"); } [data-mega="digital"] .mega-grid > a:nth-of-type(3)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232d8fd6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='43' y='28' width='74' height='104' rx='10'/%3E%3Cpath d='M60 55h40M60 73h40M60 91h26'/%3E%3Cpath d='M60 112h40'/%3E%3C/g%3E%3C/svg%3E"); } /* ========================================================== SERVICE TRANSITION NAV — DESCENDER CLIPPING FIX Fixes g / y / p bottoms in: Registration / Manning / Licensing / Training ========================================================== */ @media (min-width:1101px){ .services-transition-nav a{ overflow:visible !important; } .services-transition-nav span{ display:inline-block !important; height:auto !important; min-height:0 !important; max-height:none !important; line-height:1.35 !important; padding-top:2px !important; padding-bottom:3px !important; margin:0 !important; overflow:visible !important; vertical-align:middle !important; } } /* ========================================================== GLOBAL COORDINATION — CONNECTED LIVE STATUS Green blinking operational indicator ========================================================== */ .sl-connected-text{ display:inline-flex !important; align-items:center !important; position:relative !important; } /* remove the original blue status dot/pseudo-light */ *:has(> .sl-connected-text)::before{ content:none !important; display:none !important; } /* remove an old empty inline dot element if present */ *:has(> .sl-connected-text) > i:empty, *:has(> .sl-connected-text) > b:empty, *:has(> .sl-connected-text) > span:empty{ display:none !important; } /* new green live indicator */ .sl-connected-text::before{ content:"" !important; display:inline-block !important; width:8px !important; height:8px !important; flex:0 0 8px !important; margin-right:9px !important; border-radius:50% !important; background:#39E978 !important; box-shadow: 0 0 0 3px rgba(57,233,120,.10), 0 0 8px rgba(57,233,120,.85), 0 0 17px rgba(57,233,120,.42) !important; animation: sl-connected-live-blink 1.55s ease-in-out infinite !important; } /* soft live pulse */ @keyframes sl-connected-live-blink{ 0%, 100%{ opacity:1; transform:scale(1); box-shadow: 0 0 0 3px rgba(57,233,120,.10), 0 0 8px rgba(57,233,120,.85), 0 0 17px rgba(57,233,120,.42); } 50%{ opacity:.38; transform:scale(.78); box-shadow: 0 0 0 5px rgba(57,233,120,.04), 0 0 4px rgba(57,233,120,.38), 0 0 9px rgba(57,233,120,.20); } } /* accessibility */ @media (prefers-reduced-motion:reduce){ .sl-connected-text::before{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ========================================================== HOMEPAGE — DOCUMENTATION / COMPLIANCE MARITIME TEXTURE Light nautical chart treatment ========================================================== */ .home-compliance-texture{ position:relative !important; isolation:isolate !important; overflow:hidden !important; background: linear-gradient( 90deg, #F8FCFE 0%, #FFFFFF 45%, #F4FAFD 100% ) !important; } /* maritime chart artwork */ .home-compliance-texture::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:-2 !important; pointer-events:none !important; background-image: url("/assets/images/textures/home-compliance-maritime-texture.svg?v=20260923-182907") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; opacity:.68 !important; } /* white readability wash through central content */ .home-compliance-texture::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; background: radial-gradient( ellipse at 50% 48%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.61) 34%, rgba(255,255,255,.22) 67%, rgba(255,255,255,.06) 100% ) !important; } /* ensure all actual section content remains above texture */ .home-compliance-texture > *{ position:relative !important; z-index:1 !important; } /* keep cards/image crisp and premium */ .home-compliance-texture img{ position:relative !important; } /* desktop texture slightly more visible */ @media (min-width:1101px){ .home-compliance-texture::before{ opacity:.72 !important; } } /* mobile/tablet — lighter so it does not become busy */ @media (max-width:1100px){ .home-compliance-texture::before{ opacity:.38 !important; background-size:auto 100% !important; } } /* ========================================================== HOMEPAGE COMPLIANCE TEXTURE V2 — DIRECT BACKGROUND ========================================================== */ .home-compliance-texture{ position:relative !important; background-color:#F2F9FC !important; background-image: linear-gradient( 90deg, rgba(248,252,254,.76) 0%, rgba(255,255,255,.80) 43%, rgba(246,251,254,.69) 100% ), url("/assets/images/textures/compliance-maritime-chart-v2.svg?v=20260923-183050") !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; background-size: cover, cover !important; } /* disable previous texture pseudo layers */ .home-compliance-texture::before, .home-compliance-texture::after{ content:none !important; display:none !important; } /* keep all section content untouched */ .home-compliance-texture > *{ position:relative !important; z-index:2 !important; } /* slight maritime edge depth */ .home-compliance-texture{ box-shadow: inset 0 1px 0 rgba(23,143,199,.08), inset 0 -1px 0 rgba(23,143,199,.08) !important; } /* desktop: clearly visible but still elegant */ @media (min-width:1101px){ .home-compliance-texture{ background-image: linear-gradient( 90deg, rgba(248,252,254,.66) 0%, rgba(255,255,255,.73) 46%, rgba(246,251,254,.60) 100% ), url("/assets/images/textures/compliance-maritime-chart-v2.svg?v=20260923-183050") !important; } } /* mobile: quieter */ @media (max-width:1100px){ .home-compliance-texture{ background-image: linear-gradient( rgba(255,255,255,.83), rgba(247,252,254,.83) ), url("/assets/images/textures/compliance-maritime-chart-v2.svg?v=20260923-183050") !important; background-size: cover, auto 100% !important; } }