/* ========================================================== Offshore Hub shared live-card vector + compact desktop hero v2 Loaded last in on index/news/about/contact. Fixes news page override issue and reduces hero size globally. ========================================================== */ /* Desktop hero compacting for normal pages */ @media (min-width:901px){ html body .page section.hero, html body section.hero{ min-height:430px!important; height:auto!important; max-height:none!important; overflow:hidden!important; } html body .page section.hero .hero-inner, html body section.hero .hero-inner{ min-height:430px!important; padding:42px 56px!important; align-items:center!important; } html body .page section.hero h1, html body section.hero h1{ font-size:clamp(48px,4.45vw,70px)!important; line-height:.94!important; letter-spacing:-.055em!important; margin-bottom:18px!important; } html body .page section.hero p, html body section.hero p{ font-size:clamp(14px,.92vw,16px)!important; line-height:1.42!important; margin-bottom:20px!important; max-width:700px!important; } html body .page section.hero .features, html body section.hero .features{ gap:12px!important; margin-bottom:18px!important; } html body .page section.hero .feat, html body section.hero .feat{ min-height:46px!important; padding:8px 12px!important; } html body .page section.hero .home-hero-actions, html body .page section.hero .hero-actions, html body section.hero .home-hero-actions, html body section.hero .hero-actions{ gap:12px!important; } html body .page section.hero .cta, html body .page section.hero .ghost-btn, html body section.hero .cta, html body section.hero .ghost-btn{ min-height:42px!important; padding:0 20px!important; } html body .page section.hero .stat-card.oh-live-card-vector, html body section.hero .stat-card.oh-live-card-vector{ position:relative!important; overflow:hidden!important; isolation:isolate!important; border:0!important; border-radius:18px!important; width:min(100%,370px)!important; min-height:288px!important; padding:22px 23px 20px!important; background: radial-gradient(circle at 96% 8%,rgba(54,190,255,.18),transparent 34%), radial-gradient(circle at 76% 66%,rgba(255,122,26,.13),transparent 36%), linear-gradient(180deg,rgba(8,21,36,.72),rgba(3,10,20,.86))!important; box-shadow: 0 26px 58px rgba(0,0,0,.42), 0 0 0 1px rgba(64,196,255,.14), 0 0 34px rgba(36,180,255,.24)!important; backdrop-filter:blur(12px) saturate(120%)!important; -webkit-backdrop-filter:blur(12px) saturate(120%)!important; } html body .page section.hero .stat-card.oh-live-card-vector::before, html body section.hero .stat-card.oh-live-card-vector::before{ content:""!important; position:absolute!important; inset:0!important; border-radius:18px!important; padding:1px!important; background: linear-gradient(135deg, rgba(91,217,255,.86), rgba(48,176,255,.32) 25%, rgba(255,122,26,.20) 54%, rgba(48,176,255,.52) 78%, rgba(91,217,255,.76) )!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; pointer-events:none!important; z-index:2!important; } html body .page section.hero .stat-card.oh-live-card-vector::after, html body section.hero .stat-card.oh-live-card-vector::after{ content:""!important; position:absolute!important; inset:1px!important; border-radius:17px!important; background: linear-gradient(rgba(255,255,255,.033) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px)!important; background-size:23px 23px!important; opacity:.12!important; pointer-events:none!important; z-index:1!important; } html body .page section.hero .stat-card.oh-live-card-vector > *, html body section.hero .stat-card.oh-live-card-vector > *{ position:relative!important; z-index:5!important; } html body .page section.hero .stat-card.oh-live-card-vector .live, html body section.hero .stat-card.oh-live-card-vector .live{ display:flex!important; align-items:center!important; gap:10px!important; margin:0 0 22px!important; color:#fff!important; text-transform:uppercase!important; letter-spacing:.075em!important; font-size:12.5px!important; font-weight:950!important; } html body .page section.hero .stat-card.oh-live-card-vector .live .dot, html body section.hero .stat-card.oh-live-card-vector .live .dot, html body .page section.hero .stat-card.oh-live-card-vector .dot, html body section.hero .stat-card.oh-live-card-vector .dot{ width:7px!important; height:7px!important; border-radius:50%!important; background:#25e7a0!important; box-shadow:0 0 14px rgba(37,231,160,.80)!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid, html body section.hero .stat-card.oh-live-card-vector .stat-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:0!important; margin:0 0 8px!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid > div + div, html body section.hero .stat-card.oh-live-card-vector .stat-grid > div + div{ border-left:1px solid rgba(155,180,205,.23)!important; padding-left:22px!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid strong, html body section.hero .stat-card.oh-live-card-vector .stat-grid strong{ display:block!important; color:#fff!important; font-size:36px!important; line-height:.92!important; font-weight:950!important; letter-spacing:-.04em!important; text-shadow:0 4px 15px rgba(0,0,0,.42)!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid strong.green, html body section.hero .stat-card.oh-live-card-vector .stat-grid strong.green{ color:#25e7a0!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid small, html body section.hero .stat-card.oh-live-card-vector .stat-grid small{ display:block!important; margin-top:7px!important; color:#c9d4df!important; font-size:11px!important; line-height:1.15!important; font-weight:560!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart, html body section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart{ height:108px!important; margin:0 0 13px!important; border-radius:0!important; overflow:visible!important; background:transparent!important; box-shadow:none!important; position:relative!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart::before, html body section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart::before{ content:""!important; position:absolute!important; inset:12px 0 2px!important; border-radius:11px!important; background: radial-gradient(circle at 80% 46%,rgba(255,122,26,.16),transparent 42%), linear-gradient(180deg,rgba(255,255,255,.020),rgba(0,0,0,.045))!important; box-shadow:inset 0 0 0 1px rgba(155,180,205,.045)!important; pointer-events:none!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart svg, html body section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart svg{ width:100%!important; height:100%!important; display:block!important; position:relative!important; z-index:2!important; overflow:visible!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-grid-line, html body section.hero .stat-card.oh-live-card-vector .oh-grid-line{ stroke:rgba(155,180,205,.060)!important; stroke-width:1!important; fill:none!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-area, html body section.hero .stat-card.oh-live-card-vector .oh-area{fill:url(#ohLiveAreaFill)!important;} html body .page section.hero .stat-card.oh-live-card-vector .oh-trend, html body section.hero .stat-card.oh-live-card-vector .oh-trend{ fill:none!important; stroke-linecap:round!important; stroke-linejoin:round!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-trend.oh-glow, html body section.hero .stat-card.oh-live-card-vector .oh-trend.oh-glow{ stroke:#ff7a1a!important; stroke-width:14!important; opacity:.20!important; filter:url(#ohLiveLineGlow)!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-trend.oh-core, html body section.hero .stat-card.oh-live-card-vector .oh-trend.oh-core{ stroke:url(#ohLiveLineStroke)!important; stroke-width:4.8!important; filter:url(#ohLiveLineGlow)!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-nodes circle, html body section.hero .stat-card.oh-live-card-vector .oh-nodes circle{ fill:#ff8a22!important; stroke:#ffd7a2!important; stroke-width:1.1!important; filter:url(#ohLiveLineGlow)!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-nodes circle.last, html body section.hero .stat-card.oh-live-card-vector .oh-nodes circle.last{ fill:#fff0c2!important; stroke:#ff8a22!important; stroke-width:2!important; } html body .page section.hero .stat-card.oh-live-card-vector .orange-link, html body section.hero .stat-card.oh-live-card-vector .orange-link{ min-height:41px!important; padding:0 14px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; border:1px solid rgba(155,180,205,.30)!important; border-radius:9px!important; background:rgba(0,0,0,.16)!important; color:#ff8a22!important; text-decoration:none!important; text-transform:uppercase!important; font-size:11px!important; letter-spacing:.045em!important; font-weight:950!important; } @media (max-width:1280px){ html body .page section.hero .hero-inner, html body section.hero .hero-inner{padding:36px 42px!important;min-height:405px!important;} html body .page section.hero h1, html body section.hero h1{font-size:clamp(44px,4.7vw,60px)!important;} html body .page section.hero .stat-card.oh-live-card-vector, html body section.hero .stat-card.oh-live-card-vector{width:min(100%,345px)!important;min-height:278px!important;} } } /* ========================================================== Unified compact desktop hero v3 Same visual height across index/news/about/contact. Goal: hero should not dominate the page. ========================================================== */ @media (min-width:901px){ :root{ --oh-desktop-hero-height:360px; --oh-desktop-hero-pad-x:52px; } html body .page section.hero, html body section.hero{ height:var(--oh-desktop-hero-height)!important; min-height:var(--oh-desktop-hero-height)!important; max-height:var(--oh-desktop-hero-height)!important; overflow:hidden!important; } html body .page section.hero .hero-inner, html body section.hero .hero-inner{ height:var(--oh-desktop-hero-height)!important; min-height:var(--oh-desktop-hero-height)!important; max-height:var(--oh-desktop-hero-height)!important; padding:28px var(--oh-desktop-hero-pad-x)!important; align-items:center!important; box-sizing:border-box!important; } html body .page section.hero .hero-copy, html body section.hero .hero-copy, html body .page section.hero .hero-inner > div:first-child, html body section.hero .hero-inner > div:first-child{ max-width:760px!important; } html body .page section.hero .eyebrow, html body section.hero .eyebrow{ margin-bottom:10px!important; font-size:12px!important; letter-spacing:.22em!important; line-height:1!important; } html body .page section.hero h1, html body section.hero h1{ font-size:clamp(42px,3.55vw,58px)!important; line-height:.93!important; letter-spacing:-.058em!important; margin:0 0 14px!important; max-width:760px!important; } html body .page section.hero p, html body section.hero p{ font-size:14px!important; line-height:1.38!important; max-width:640px!important; margin:0 0 16px!important; } html body .page section.hero .features, html body section.hero .features{ gap:10px!important; margin:0 0 15px!important; } html body .page section.hero .feat, html body section.hero .feat{ min-height:40px!important; padding:7px 10px!important; gap:9px!important; border-radius:8px!important; } html body .page section.hero .feat .ic, html body section.hero .feat .ic{ width:30px!important; height:30px!important; min-width:30px!important; font-size:14px!important; } html body .page section.hero .feat b, html body section.hero .feat b{ font-size:12px!important; line-height:1.05!important; } html body .page section.hero .feat small, html body section.hero .feat small{ font-size:10px!important; line-height:1.05!important; } html body .page section.hero .home-hero-actions, html body .page section.hero .hero-actions, html body section.hero .home-hero-actions, html body section.hero .hero-actions{ gap:10px!important; margin:0!important; } html body .page section.hero .cta, html body .page section.hero .ghost-btn, html body section.hero .cta, html body section.hero .ghost-btn{ min-height:38px!important; padding:0 18px!important; border-radius:8px!important; font-size:11.5px!important; } html body .page section.hero .stat-card.oh-live-card-vector, html body section.hero .stat-card.oh-live-card-vector{ width:330px!important; min-height:246px!important; max-height:246px!important; padding:18px 20px 17px!important; border-radius:17px!important; align-self:center!important; } html body .page section.hero .stat-card.oh-live-card-vector::before, html body section.hero .stat-card.oh-live-card-vector::before{ border-radius:17px!important; } html body .page section.hero .stat-card.oh-live-card-vector::after, html body section.hero .stat-card.oh-live-card-vector::after{ border-radius:16px!important; } html body .page section.hero .stat-card.oh-live-card-vector .live, html body section.hero .stat-card.oh-live-card-vector .live{ margin-bottom:17px!important; font-size:11.5px!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid, html body section.hero .stat-card.oh-live-card-vector .stat-grid{ margin-bottom:5px!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid > div + div, html body section.hero .stat-card.oh-live-card-vector .stat-grid > div + div{ padding-left:18px!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid strong, html body section.hero .stat-card.oh-live-card-vector .stat-grid strong{ font-size:32px!important; } html body .page section.hero .stat-card.oh-live-card-vector .stat-grid small, html body section.hero .stat-card.oh-live-card-vector .stat-grid small{ font-size:10.5px!important; margin-top:6px!important; } html body .page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart, html body section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart{ height:88px!important; margin-bottom:10px!important; } html body .page section.hero .stat-card.oh-live-card-vector .orange-link, html body section.hero .stat-card.oh-live-card-vector .orange-link{ min-height:36px!important; font-size:10.2px!important; border-radius:8px!important; } html body .page section.metrics, html body section.metrics{ min-height:72px!important; } html body .page section.metrics .metric, html body section.metrics .metric{ padding-top:13px!important; padding-bottom:13px!important; } @media (max-width:1280px){ :root{ --oh-desktop-hero-height:385px; --oh-desktop-hero-pad-x:38px; } html body .page section.hero h1, html body section.hero h1{ font-size:clamp(38px,4.1vw,50px)!important; } html body .page section.hero .stat-card.oh-live-card-vector, html body section.hero .stat-card.oh-live-card-vector{ width:310px!important; min-height:238px!important; max-height:238px!important; } } } /* ========================================================== Unified metrics row v6 Make index/news/about/contact stats row same size as jobs. ========================================================== */ @media (min-width:901px){ html body .page section.metrics, html body section.metrics{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; width:100%!important; min-height:72px!important; height:72px!important; max-height:72px!important; margin:0!important; padding:0!important; border-radius:0!important; border-top:0!important; border-left:0!important; border-right:0!important; border-bottom:1px solid rgba(12,126,179,.45)!important; background:rgba(3,16,27,.94)!important; box-shadow:none!important; overflow:hidden!important; } html body .page section.metrics .metric, html body section.metrics .metric{ min-height:72px!important; height:72px!important; max-height:72px!important; padding:0 28px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:15px!important; border-right:1px solid rgba(12,126,179,.34)!important; background:transparent!important; } html body .page section.metrics .metric:last-child, html body section.metrics .metric:last-child{ border-right:0!important; } html body .page section.metrics .micon, html body section.metrics .micon{ width:32px!important; height:32px!important; min-width:32px!important; flex:0 0 32px!important; border-radius:8px!important; display:grid!important; place-items:center!important; color:#ff8a22!important; border:1px solid rgba(255,122,26,.72)!important; background:rgba(255,122,26,.055)!important; box-shadow:none!important; font-size:14px!important; line-height:1!important; } html body .page section.metrics .metric > div:not(.micon), html body section.metrics .metric > div:not(.micon){ display:block!important; min-width:0!important; line-height:1.08!important; } html body .page section.metrics small, html body section.metrics small{ display:block!important; color:#9fb7cd!important; text-transform:uppercase!important; letter-spacing:.08em!important; font-size:10px!important; line-height:1!important; font-weight:900!important; margin:0 0 4px!important; } html body .page section.metrics strong, html body section.metrics strong{ display:inline!important; color:#fff!important; font-size:22px!important; line-height:1!important; font-weight:950!important; letter-spacing:-.035em!important; margin:0!important; vertical-align:baseline!important; } html body .page section.metrics .metric div, html body section.metrics .metric div{ color:#fff!important; font-size:13px!important; font-weight:850!important; } @media (max-width:1280px){ html body .page section.metrics .metric, html body section.metrics .metric{ padding:0 20px!important; gap:12px!important; } html body .page section.metrics strong, html body section.metrics strong{ font-size:20px!important; } html body .page section.metrics .metric div, html body section.metrics .metric div{ font-size:12px!important; } } } /* ========================================================== Legal pages compact alignment v7 Applies to Privacy Policy, Terms of Service and Disclaimer. Makes legal hero match the compact desktop hero system. ========================================================== */ @media (min-width:901px){ html body.legal-page .site-shell > section.legal-hero, html body .site-shell > section.legal-hero, html body section.legal-hero{ height:360px!important; min-height:360px!important; max-height:360px!important; overflow:hidden!important; border-bottom:1px solid rgba(12,126,179,.72)!important; background:#020912!important; } html body.legal-page section.legal-hero::before, html body section.legal-hero::before{ inset:-40px!important; background-position:72% 54%!important; background-size:cover!important; filter:brightness(.82) contrast(1.10) saturate(1.08)!important; transform:none!important; } html body.legal-page section.legal-hero::after, html body section.legal-hero::after{ background: linear-gradient(90deg,rgba(2,8,14,.99) 0%,rgba(2,8,14,.86) 39%,rgba(2,8,14,.38) 73%,rgba(2,8,14,.16) 100%), linear-gradient(180deg,rgba(2,8,14,.05) 0%,rgba(2,8,14,.15) 55%,rgba(2,8,14,.55) 100%)!important; } html body.legal-page section.legal-hero .legal-hero-inner, html body section.legal-hero .legal-hero-inner{ height:360px!important; min-height:360px!important; max-height:360px!important; padding:28px 52px!important; display:grid!important; grid-template-columns:minmax(0,1fr) 330px!important; gap:42px!important; align-items:center!important; box-sizing:border-box!important; } html body.legal-page section.legal-hero .eyebrow, html body section.legal-hero .eyebrow{ margin:0 0 10px!important; font-size:12px!important; letter-spacing:.22em!important; line-height:1!important; color:#ff8a22!important; text-transform:uppercase!important; } html body.legal-page section.legal-hero .eyebrow::before, html body section.legal-hero .eyebrow::before{ width:16px!important; height:2px!important; background:#ff6a00!important; } html body.legal-page section.legal-hero h1, html body section.legal-hero h1{ font-size:clamp(42px,3.55vw,58px)!important; line-height:.93!important; letter-spacing:-.058em!important; margin:0 0 14px!important; max-width:760px!important; color:#fff!important; } html body.legal-page section.legal-hero h1 span, html body section.legal-hero h1 span{ color:#ff6a00!important; } html body.legal-page section.legal-hero p, html body section.legal-hero p{ font-size:14px!important; line-height:1.38!important; max-width:640px!important; margin:0 0 14px!important; color:#e0eaf5!important; } html body.legal-page section.legal-hero .notice, html body section.legal-hero .notice{ max-width:680px!important; margin:0 0 14px!important; padding:10px 12px!important; border-radius:9px!important; font-size:12px!important; line-height:1.38!important; color:#ffd9c2!important; background:rgba(255,106,0,.070)!important; border:1px solid rgba(255,106,0,.28)!important; } html body.legal-page section.legal-hero .legal-cta, html body section.legal-hero .legal-cta{ display:flex!important; gap:10px!important; margin:0!important; align-items:center!important; flex-wrap:wrap!important; } html body.legal-page section.legal-hero .legal-btn, html body section.legal-hero .legal-btn{ min-height:38px!important; padding:0 18px!important; border-radius:8px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:11.5px!important; font-weight:950!important; text-transform:uppercase!important; letter-spacing:.035em!important; text-decoration:none!important; } html body.legal-page section.legal-hero .legal-btn.primary, html body section.legal-hero .legal-btn.primary{ background:linear-gradient(135deg,#ff6500,#ff8a22)!important; color:#fff!important; border:1px solid rgba(255,122,26,.86)!important; box-shadow:0 12px 26px rgba(255,106,0,.22)!important; } html body.legal-page section.legal-hero .hero-card, html body section.legal-hero .hero-card{ align-self:center!important; justify-self:end!important; width:330px!important; min-height:160px!important; padding:22px 23px!important; border-radius:17px!important; border:1px solid rgba(64,196,255,.22)!important; background: radial-gradient(circle at 96% 8%,rgba(54,190,255,.13),transparent 34%), linear-gradient(180deg,rgba(8,21,36,.72),rgba(3,10,20,.86))!important; box-shadow: 0 24px 52px rgba(0,0,0,.36), 0 0 0 1px rgba(64,196,255,.10), 0 0 26px rgba(36,180,255,.14)!important; backdrop-filter:blur(12px) saturate(120%)!important; -webkit-backdrop-filter:blur(12px) saturate(120%)!important; } html body.legal-page section.legal-hero .hero-card strong, html body section.legal-hero .hero-card strong{ font-size:24px!important; line-height:1.08!important; margin:0 0 8px!important; color:#fff!important; } html body.legal-page section.legal-hero .hero-card small, html body section.legal-hero .hero-card small{ font-size:12.5px!important; line-height:1.42!important; color:#b9c8d7!important; } html body.legal-page .legal-wrap, html body .legal-wrap{ padding:24px!important; gap:22px!important; } @media (max-width:1280px){ html body.legal-page .site-shell > section.legal-hero, html body .site-shell > section.legal-hero, html body section.legal-hero{ height:385px!important; min-height:385px!important; max-height:385px!important; } html body.legal-page section.legal-hero .legal-hero-inner, html body section.legal-hero .legal-hero-inner{ height:385px!important; min-height:385px!important; max-height:385px!important; padding:28px 38px!important; grid-template-columns:minmax(0,1fr) 310px!important; gap:34px!important; } html body.legal-page section.legal-hero h1, html body section.legal-hero h1{ font-size:clamp(38px,4.1vw,50px)!important; } html body.legal-page section.legal-hero .hero-card, html body section.legal-hero .hero-card{ width:310px!important; min-height:150px!important; } } } /* ========================================================== Page specific hero images v8 Uses assets/Hero/hero1-hero6 instead of same rig image everywhere. Mapping: index = hero3 offshore rig news = hero1 wind turbine about = hero4 aquaculture / wider offshore industry contact = hero6 vessel in weather legal = hero5 cruise/maritime image ========================================================== */ @media (min-width:901px){ /* Home / index */ html body.home-index:not(.news-page):not(.about-page):not(.contact-page) section.hero::before{ background-image:url('/assets/Hero/hero3.png?v=20260606heroimages8')!important; background-position:72% 54%!important; background-size:cover!important; } /* News */ html body.news-page section.hero::before{ background-image:url('/assets/Hero/hero1.png?v=20260606heroimages8')!important; background-position:70% 52%!important; background-size:cover!important; } /* About */ html body.about-page section.hero::before{ background-image:url('/assets/Hero/hero4.png?v=20260606heroimages8')!important; background-position:72% 54%!important; background-size:cover!important; } /* Contact */ html body.contact-page section.hero::before{ background-image:url('/assets/Hero/hero6.png?v=20260606heroimages8')!important; background-position:72% 54%!important; background-size:cover!important; } /* Legal pages keep the same compact structure, but get their own maritime image */ html body.legal-page section.legal-hero::before{ background-image:url('/assets/Hero/hero5.png?v=20260606heroimages8')!important; background-position:72% 54%!important; background-size:cover!important; } } /* ========================================================== Hero zoom-out 30% v9 Show more of each hero image on desktop. ========================================================== */ @media (min-width:901px){ html body.home-index:not(.news-page):not(.about-page):not(.contact-page) section.hero::before, html body.news-page section.hero::before, html body.about-page section.hero::before, html body.contact-page section.hero::before, html body.legal-page section.legal-hero::before{ background-size:70% auto!important; background-repeat:no-repeat!important; } html body.home-index:not(.news-page):not(.about-page):not(.contact-page) section.hero::before{ background-position:86% 52%!important; } html body.news-page section.hero::before{ background-position:84% 52%!important; } html body.about-page section.hero::before{ background-position:84% 52%!important; } html body.contact-page section.hero::before{ background-position:84% 52%!important; } html body.legal-page section.legal-hero::before{ background-position:84% 52%!important; } } /* ========================================================== Hero zoom-out fixed v10 Uses pre-composited zoomout images so the hero always fills the full width. No empty strip on the right side. ========================================================== */ @media (min-width:901px){ html body.home-index:not(.news-page):not(.about-page):not(.contact-page) section.hero::before{ background-image:url('/assets/Hero/hero3_zoomout.png?v=20260606rubricpass14')!important; background-size:cover!important; background-repeat:no-repeat!important; background-position:center center!important; } html body.news-page section.hero::before{ background-image:url('/assets/Hero/hero1_zoomout.png?v=20260606rubricpass14')!important; background-size:cover!important; background-repeat:no-repeat!important; background-position:center center!important; } html body.about-page section.hero::before{ background-image:url('/assets/Hero/hero4_zoomout.png?v=20260606rubricpass14')!important; background-size:cover!important; background-repeat:no-repeat!important; background-position:center center!important; } html body.contact-page section.hero::before{ background-image:url('/assets/Hero/hero6_zoomout.png?v=20260606rubricpass14')!important; background-size:cover!important; background-repeat:no-repeat!important; background-position:center center!important; } html body.legal-page section.legal-hero::before{ background-image:url('/assets/Hero/hero5_zoomout.png?v=20260606rubricpass14')!important; background-size:cover!important; background-repeat:no-repeat!important; background-position:center center!important; } } /* ========================================================== News hero card fix v12 Forces news.php hero card to use the same vector live-card as the other pages. Removes old NEWS DESK styling. ========================================================== */ @media (min-width:901px){ html body.news-page section.hero .stat-card.oh-live-card-vector{ border-color:transparent!important; background: radial-gradient(circle at 96% 8%,rgba(54,190,255,.18),transparent 34%), radial-gradient(circle at 76% 66%,rgba(255,122,26,.13),transparent 36%), linear-gradient(180deg,rgba(8,21,36,.72),rgba(3,10,20,.86))!important; } html body.news-page section.hero .stat-card.oh-live-card-vector .orange-link{ text-transform:uppercase!important; } html body.news-page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart .oh-area{ fill:url(#ohLiveAreaFillNews)!important; } html body.news-page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart .oh-trend.oh-glow{ filter:url(#ohLiveLineGlowNews)!important; } html body.news-page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart .oh-trend.oh-core{ stroke:url(#ohLiveLineStrokeNews)!important; filter:url(#ohLiveLineGlowNews)!important; } html body.news-page section.hero .stat-card.oh-live-card-vector .oh-live-mini-chart .oh-nodes circle{ filter:url(#ohLiveLineGlowNews)!important; } } /* ========================================================== Full-width rubric sections v13 Less "box inside box". Sections act as full-width rubrics: top/bottom lines span the page, header bars span the page, content cards remain readable inside. ========================================================== */ @media (min-width:901px){ /* Frontpage newsroom: remove the heavy outer box and make it a full-width rubric */ html body.home-index .oh-news-hub.news-spotlight{ margin:28px 0 34px!important; padding:0!important; border-radius:0!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; background: linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.028), inset 0 -1px 0 rgba(255,255,255,.018)!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-shell{ width:100%!important; max-width:none!important; margin:0!important; padding:0 34px 24px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-head{ margin:0 -34px 18px!important; padding:18px 34px!important; min-height:58px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; border-radius:0!important; border-left:0!important; border-right:0!important; border-top:0!important; border-bottom:1px solid rgba(12,126,179,.55)!important; background: linear-gradient(90deg,rgba(8,36,55,.82),rgba(4,19,32,.86) 55%,rgba(3,16,27,.88))!important; box-shadow:none!important; } html body.home-index .oh-news-hub.news-spotlight .box-title{ font-size:28px!important; line-height:1!important; color:#ff7a1a!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-main{ display:grid!important; grid-template-columns:minmax(0,1.55fr) minmax(360px,.95fr)!important; gap:18px!important; align-items:stretch!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-lead, html body.home-index .oh-news-hub.news-spotlight .oh-news-side-card{ border:1px solid rgba(12,126,179,.58)!important; background: linear-gradient(180deg,rgba(5,20,34,.84),rgba(2,11,20,.92))!important; box-shadow:none!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-lead{ min-height:515px!important; border-radius:13px!important; overflow:hidden!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-lead img{ filter:brightness(.63) contrast(1.08) saturate(1.02)!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-lead-content{ padding:30px!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-lead h2{ font-size:clamp(34px,2.75vw,48px)!important; line-height:1.02!important; color:#ff7a1a!important; max-width:820px!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-side{ gap:18px!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-side-card{ min-height:248px!important; border-radius:13px!important; overflow:hidden!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-side-body{ padding:22px 22px 20px!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-side-card h3{ font-size:clamp(22px,1.55vw,30px)!important; line-height:1.08!important; } /* News page featured section: same rubric idea, not a box wrapped in another box */ html body.news-page section.news-spotlight{ margin:28px 0 34px!important; padding:0 34px 26px!important; border-radius:0!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; background: linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.news-page section.news-spotlight .panel, html body.news-page section.news-spotlight .side-stack{ border-radius:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } html body.news-page section.news-spotlight .panel-head{ margin:0 -34px 18px!important; padding:18px 34px!important; min-height:58px!important; border-radius:0!important; border-left:0!important; border-right:0!important; border-top:0!important; border-bottom:1px solid rgba(12,126,179,.55)!important; background: linear-gradient(90deg,rgba(8,36,55,.82),rgba(4,19,32,.86) 55%,rgba(3,16,27,.88))!important; } html body.news-page section.news-spotlight .lead-card, html body.news-page section.news-spotlight .side-card{ border:1px solid rgba(12,126,179,.58)!important; border-radius:13px!important; background: linear-gradient(180deg,rgba(5,20,34,.84),rgba(2,11,20,.92))!important; box-shadow:none!important; } html body.news-page section.news-spotlight .lead-card{ overflow:hidden!important; } html body.news-page section.news-spotlight .lead-content h2{ color:#ff7a1a!important; } /* The news ticker also follows the same rubrikk logic */ html body .oh-news-strip.news-breaking, html body .jobs-news-ticker{ border-left:0!important; border-right:0!important; border-radius:8px!important; box-shadow:none!important; } @media (max-width:1280px){ html body.home-index .oh-news-hub.news-spotlight .oh-news-shell, html body.news-page section.news-spotlight{ padding-left:24px!important; padding-right:24px!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-head, html body.news-page section.news-spotlight .panel-head{ margin-left:-24px!important; margin-right:-24px!important; padding-left:24px!important; padding-right:24px!important; } html body.home-index .oh-news-hub.news-spotlight .oh-news-main{ grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr)!important; } } } /* ========================================================== Rubric layout pass v14 System pass after moving away from heavy "box inside box". Applies the same full-width rubric logic across the frontpage, news page, content pages and legal pages. ========================================================== */ @media (min-width:901px){ /* General rhythm: sections should feel like deck/rubric bands, not isolated dashboards */ html body .home-block, html body .page-shell, html body.news-page section.section, html body .home-cta{ width:100%!important; max-width:none!important; box-sizing:border-box!important; } html body.home-index .section-intro, html body.about-page .section-intro, html body.contact-page .section-intro, html body.news-page .section-intro{ margin:0!important; padding:18px 34px!important; min-height:58px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; border-top:0!important; border-left:0!important; border-right:0!important; border-bottom:1px solid rgba(12,126,179,.52)!important; background:linear-gradient(90deg,rgba(8,36,55,.82),rgba(4,19,32,.86) 55%,rgba(3,16,27,.88))!important; border-radius:0!important; } html body.home-index .section-intro h2, html body.about-page .section-intro h2, html body.contact-page .section-intro h2, html body.news-page .section-intro h2{ margin:0!important; font-size:clamp(24px,1.8vw,34px)!important; line-height:1.04!important; color:#fff!important; } html body.home-index .section-intro p, html body.about-page .section-intro p, html body.contact-page .section-intro p, html body.news-page .section-intro p{ margin:6px 0 0!important; max-width:760px!important; font-size:13px!important; line-height:1.35!important; color:#b9c8d7!important; } html body.home-index .section-intro .eyebrow, html body.about-page .section-intro .eyebrow, html body.contact-page .section-intro .eyebrow, html body.news-page .section-intro .eyebrow{ margin:0 0 6px!important; color:#ff8a22!important; } /* More newsroom: make it a proper rubric band */ html body.home-index .oh-news-more.news-grid-section{ margin:28px 0 34px!important; padding:0!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.home-index .oh-news-more.news-grid-section > .box{ margin:0!important; padding:0 34px 24px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html body.home-index .oh-news-more.news-grid-section .box-head{ margin:0 -34px 18px!important; padding:18px 34px!important; min-height:58px!important; border-left:0!important; border-right:0!important; border-top:0!important; border-bottom:1px solid rgba(12,126,179,.52)!important; border-radius:0!important; background:linear-gradient(90deg,rgba(8,36,55,.82),rgba(4,19,32,.86) 55%,rgba(3,16,27,.88))!important; } html body.home-index .oh-news-more.news-grid-section .oh-news-row{ gap:18px!important; } html body.home-index .oh-news-more.news-grid-section .oh-news-mini{ border:1px solid rgba(12,126,179,.58)!important; border-radius:13px!important; background:linear-gradient(180deg,rgba(5,20,34,.84),rgba(2,11,20,.92))!important; box-shadow:none!important; overflow:hidden!important; } /* Sector band */ html body.home-index .home-block.sector-block{ margin:28px 0 34px!important; padding:0 34px 26px!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.home-index .home-block.sector-block > .section-intro{ margin:0 -34px 18px!important; } html body.home-index .sector-grid{ gap:18px!important; } html body.home-index .sector-card{ min-height:200px!important; border:1px solid rgba(12,126,179,.58)!important; border-radius:13px!important; background-size:cover!important; box-shadow:none!important; overflow:hidden!important; } html body.home-index .sector-card::before{ background:linear-gradient(180deg,rgba(2,10,18,.16),rgba(2,10,18,.82))!important; } /* Latest jobs band */ html body.home-index .home-block.live-jobs-list{ margin:28px 0 34px!important; padding:0 34px 26px!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.home-index .home-block.live-jobs-list > .section-intro{ margin:0 -34px 18px!important; } html body.home-index .home-live-table.box{ margin:0!important; border:1px solid rgba(12,126,179,.55)!important; border-radius:13px!important; background:rgba(3,16,27,.55)!important; box-shadow:none!important; overflow:hidden!important; } html body.home-index .home-live-table .box-head{ min-height:52px!important; padding:15px 18px!important; border-radius:0!important; border-top:0!important; border-left:0!important; border-right:0!important; border-bottom:1px solid rgba(12,126,179,.45)!important; background:rgba(7,29,45,.72)!important; } html body.home-index .home-table tr{ border-bottom:1px solid rgba(12,126,179,.22)!important; } html body.home-index .home-table tr:hover{ background:rgba(255,122,26,.055)!important; } /* Why / quick search: less outer box, keep inner panels */ html body.home-index .home-block.why-news-clean{ margin:28px 0 34px!important; padding:0 34px 26px!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:18px!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.home-index .home-block.why-news-clean .box{ margin:24px 0 0!important; border:1px solid rgba(12,126,179,.55)!important; border-radius:13px!important; background:rgba(3,16,27,.58)!important; box-shadow:none!important; overflow:hidden!important; } html body.home-index .home-block.why-news-clean .box-head{ min-height:52px!important; border-bottom:1px solid rgba(12,126,179,.45)!important; background:rgba(7,29,45,.72)!important; } /* CTA as a thin full-width deck band */ html body .home-cta{ margin:28px 0 34px!important; padding:24px 34px!important; min-height:110px!important; border-radius:0!important; border-top:1px solid rgba(255,122,26,.55)!important; border-bottom:1px solid rgba(12,126,179,.52)!important; border-left:0!important; border-right:0!important; background:linear-gradient(90deg,rgba(255,122,26,.13),rgba(3,16,27,.92) 28%,rgba(3,16,27,.96))!important; box-shadow:none!important; } html body .home-cta h2{ font-size:clamp(28px,2.3vw,42px)!important; margin:0 0 6px!important; } html body .home-cta p{ margin:0!important; color:#c2cfdb!important; } /* News page toolbar and latest grid should match the same rubric logic */ html body.news-page section.news-toolbar-section{ margin:28px 0 34px!important; padding:0!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.news-page .news-toolbar{ margin:0!important; padding:0 34px 24px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html body.news-page .news-toolbar-head{ margin:0 -34px 18px!important; padding:18px 34px!important; border-bottom:1px solid rgba(12,126,179,.52)!important; background:linear-gradient(90deg,rgba(8,36,55,.82),rgba(4,19,32,.86) 55%,rgba(3,16,27,.88))!important; } html body.news-page section#latest-news.section{ margin:28px 0 34px!important; padding:0 34px 26px!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.news-page #latest-news .news-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 340px!important; gap:22px!important; margin:0!important; } html body.news-page #latest-news .newslist-intro{ margin:0 -34px 18px!important; grid-column:1/-1!important; } html body.news-page .news-grid{ gap:18px!important; } html body.news-page .story-card, html body.news-page .side-panel{ border:1px solid rgba(12,126,179,.55)!important; border-radius:13px!important; background:rgba(3,16,27,.58)!important; box-shadow:none!important; overflow:hidden!important; } /* About/contact/legal content blocks: reduce heavy card feeling */ html body.about-page .page-shell, html body.contact-page .page-shell, html body.legal-page .legal-wrap{ margin:28px 0 34px!important; padding:24px 34px!important; border-top:1px solid rgba(12,126,179,.62)!important; border-bottom:1px solid rgba(12,126,179,.62)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:linear-gradient(90deg,rgba(3,16,27,.98),rgba(5,25,41,.92) 42%,rgba(3,16,27,.98))!important; box-shadow:none!important; } html body.about-page .page-shell .box, html body.contact-page .page-shell .box, html body.legal-page .legal-card, html body.legal-page .toc{ border:1px solid rgba(12,126,179,.55)!important; border-radius:13px!important; background:rgba(3,16,27,.58)!important; box-shadow:none!important; } @media (max-width:1280px){ html body.home-index .oh-news-more.news-grid-section > .box, html body.home-index .home-block.sector-block, html body.home-index .home-block.live-jobs-list, html body.home-index .home-block.why-news-clean, html body.news-page section.news-spotlight, html body.news-page section#latest-news.section, html body.news-page .news-toolbar, html body.about-page .page-shell, html body.contact-page .page-shell, html body.legal-page .legal-wrap, html body .home-cta{ padding-left:24px!important; padding-right:24px!important; } html body.home-index .oh-news-more.news-grid-section .box-head, html body.home-index .home-block.sector-block > .section-intro, html body.home-index .home-block.live-jobs-list > .section-intro, html body.news-page .news-toolbar-head, html body.news-page #latest-news .newslist-intro{ margin-left:-24px!important; margin-right:-24px!important; padding-left:24px!important; padding-right:24px!important; } html body.home-index .home-block.why-news-clean{ grid-template-columns:1fr!important; } html body.news-page #latest-news .news-layout{ grid-template-columns:minmax(0,1fr) 310px!important; } } }