/* Hero logo: sized to sit above the eyebrow badge without competing with the h1. */ .mp-hero-logo { display: block; width: auto; height: 44px; max-width: 100%; margin: 0 0 10px; } @media (max-width: 600px) { .mp-hero-logo { height: 34px; margin-bottom: 6px; } } /* Hero: intro text and CTAs span the full container; the live board sits below. Prefixed with .con-kit-section because the module CSS is emitted later in . */ .con-kit-section .styles_op_1g57q5q_sub { max-width: none; } @media (min-width: 480px) { .con-kit-section .styles_op_1g57q5q_actions { display: flex; gap: 12px; } .con-kit-section .styles_op_1g57q5q_actions > a { flex: 1 1 0; min-width: 0; } } @media (min-width: 1021px) { .con-kit-section .styles_op_1g57q5q_lower { grid-template-columns: minmax(0, 1fr); gap: 48px; } } /* Hero background image: sits under the grid overlay and the content, darkened on the text side and faded into the navy section colour towards the live board. */ .con-kit-section .styles_op_1g57q5q_hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 620px; background: linear-gradient(90deg, rgba(7, 32, 61, .93) 0%, rgba(7, 32, 61, .82) 45%, rgba(7, 32, 61, .55) 100%), url("../img/hero-bg-960.webp") 70% top / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); pointer-events: none; } @media (min-width: 768px) { .con-kit-section .styles_op_1g57q5q_hero::before { height: min(56.25vw, 940px); background: linear-gradient(90deg, rgba(7, 32, 61, .9) 0%, rgba(7, 32, 61, .78) 40%, rgba(7, 32, 61, .52) 72%, rgba(7, 32, 61, .42) 100%), url("../img/hero-bg-1672.webp") right top / cover no-repeat; } } /* Eyebrow badges are nowrap by default; long ones may wrap instead of overflowing. */ .mp-badge-wrap { white-space: normal; max-width: 100%; line-height: 1.5; } /* Cookie consent theme (orestbida/cookieconsent v3) in the landing page palette */ #cc-main { --cc-font-family: 'Manrope', system-ui, sans-serif; --cc-modal-border-radius: 8px; --cc-btn-border-radius: 4px; --cc-modal-margin: 16px; --cc-z-index: 2147483000; --cc-modal-transition-duration: .3s; --cc-bg: #07203D; --cc-primary-color: #FFFFFF; --cc-secondary-color: #A9C1D9; --cc-link-color: #5AC8F5; --cc-btn-primary-bg: #1B9CE3; --cc-btn-primary-color: #FFFFFF; --cc-btn-primary-border-color: #1B9CE3; --cc-btn-primary-hover-bg: #1588C8; --cc-btn-primary-hover-color: #FFFFFF; --cc-btn-primary-hover-border-color: #1588C8; --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: #FFFFFF; --cc-btn-secondary-border-color: rgba(255, 255, 255, .28); --cc-btn-secondary-hover-bg: rgba(255, 255, 255, .08); --cc-btn-secondary-hover-color: #FFFFFF; --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, .5); --cc-separator-border-color: rgba(255, 255, 255, .1); --cc-overlay-bg: rgba(4, 16, 32, .72); --cc-toggle-on-bg: #1B9CE3; --cc-toggle-off-bg: #3A5573; --cc-toggle-on-knob-bg: #FFFFFF; --cc-toggle-off-knob-bg: #FFFFFF; --cc-toggle-enabled-icon-color: #1B9CE3; --cc-toggle-disabled-icon-color: #3A5573; --cc-toggle-readonly-bg: #2B4868; --cc-toggle-readonly-knob-bg: #A9C1D9; --cc-toggle-readonly-knob-icon-color: #2B4868; --cc-section-category-border: rgba(255, 255, 255, .1); --cc-cookie-category-block-bg: #0C2C55; --cc-cookie-category-block-border: rgba(255, 255, 255, .08); --cc-cookie-category-block-hover-bg: #103463; --cc-cookie-category-block-hover-border: rgba(255, 255, 255, .14); --cc-cookie-category-expanded-block-bg: #0A274B; --cc-cookie-category-expanded-block-hover-bg: #0E3059; --cc-footer-bg: #051A33; --cc-footer-color: #A9C1D9; --cc-footer-border-color: rgba(255, 255, 255, .08); --cc-webkit-scrollbar-bg: #2B4868; --cc-webkit-scrollbar-hover-bg: #3A5A7E; } #cc-main .cm, #cc-main .pm { border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px -20px rgba(4, 16, 32, .7), 0 2px 8px rgba(4, 16, 32, .3); } /* Thin brand accent line on top of the banner, echoing the section dividers. */ #cc-main .cm::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #1B9CE3, #5AC8F5); } #cc-main .cm__title, #cc-main .pm__title { letter-spacing: -0.02em; font-weight: 600; } #cc-main .cm__btn, #cc-main .pm__btn { font-weight: 600; letter-spacing: .01em; } #cc-main .pm__badge { background: rgba(27, 156, 227, .16); color: #5AC8F5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } #cc-main a:focus-visible, #cc-main button:focus-visible { outline: 2px solid #5AC8F5; outline-offset: 2px; } /* Footer link that reopens the consent settings */ .mp-footer__nav button { padding: 0; border: 0; background: none; font: inherit; color: #c2d8ea; font-weight: 500; cursor: pointer; transition: color 0.2s ease; } .mp-footer__nav button:hover { color: #fff; } .mp-footer__nav button:focus-visible { outline: 2px solid var(--color-kit-key1, #1B9CE3); outline-offset: 3px; border-radius: 2px; } /* Footer (landing page + legal pages) */ .mp-footer { background: var(--color-kit-dark, #07203D); border-top: 1px solid rgba(255, 255, 255, 0.08); color: #86a4c2; font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; line-height: 1.5; } .mp-footer__inner { max-width: 1250px; margin: 0 auto; padding: 36px 18px calc(36px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 32px; } .mp-footer__brand { display: inline-flex; line-height: 0; } .mp-footer__brand img { height: 30px; width: auto; } .mp-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; } .mp-footer__nav a { color: #c2d8ea; text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .mp-footer__nav a:hover { color: #fff; } .mp-footer__nav a:focus-visible, .mp-footer__brand:focus-visible, .mp-legal a:focus-visible, .mp-legal-back:focus-visible { outline: 2px solid var(--color-kit-key1, #1B9CE3); outline-offset: 3px; border-radius: 2px; } .mp-footer__copy { margin: 0; font-size: 13px; } @media (max-width: 760px) { .mp-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; } } /* Legal pages */ .mp-legal-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #F1F7FC; color: #07203D; font-family: 'Manrope', system-ui, sans-serif; } .mp-legal-head { background: var(--color-kit-dark, #07203D); } .mp-legal-head__inner { max-width: 1250px; margin: 0 auto; padding: 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mp-legal-head .mp-footer__brand img { height: 34px; } .mp-legal-back { color: #c2d8ea; text-decoration: none; font-size: 14px; font-weight: 500; } .mp-legal-back:hover { color: #fff; } .mp-legal { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 56px 18px 72px; box-sizing: border-box; } .mp-legal h1 { margin: 0 0 32px; font-size: clamp(32px, 5vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: #0C2C55; } .mp-legal section { padding: 22px 0; border-top: 1px solid rgba(11, 16, 36, 0.09); } .mp-legal h2 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #1B9CE3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; hyphens: manual; } .mp-legal p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(11, 16, 36, 0.78); overflow-wrap: anywhere; } .mp-legal a { color: #0C2C55; text-underline-offset: 3px; } .mp-legal a:hover { color: #1B9CE3; } .mp-top { --mp-top-size: 52px; position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 900; width: var(--mp-top-size); height: var(--mp-top-size); padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: var(--color-kit-dark, #07203D); color: #fff; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(7, 32, 61, 0.55), 0 2px 6px rgba(7, 32, 61, 0.18); opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s linear 0.3s, background-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .mp-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mp-top:hover { background: var(--color-kit-key2, #0C2C55); } .mp-top:focus-visible { outline: 2px solid var(--color-kit-key1, #1B9CE3); outline-offset: 3px; } .mp-top__ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); pointer-events: none; } .mp-top__track { stroke: rgba(255, 255, 255, 0.12); } .mp-top__bar { stroke: var(--color-kit-key1, #1B9CE3); stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; } .mp-top__arrow { position: relative; display: block; width: 18px; height: 18px; margin: auto; transition: transform 0.25s ease; } .mp-top:hover .mp-top__arrow { transform: translateY(-3px); } @media (max-width: 600px) { .mp-top { --mp-top-size: 46px; } } @media (prefers-reduced-motion: reduce) { .mp-top, .mp-top__arrow, .mp-top__bar { transition: opacity 0.2s ease, visibility 0s; } .mp-top { transform: none; } }