/* SOCRadar sign-in surface (design handoff: docs/design_handoff_login). Base design is 1440x900 and does not reflow: lv3-fit.js (blocking, in ) scales the root with `zoom` and caps the card (--card-scale) and hero type (--hero-type) so the two columns keep their proportion at 1440, 1920 and 2560. Below 960px the page falls back to a single scrolling column (html.lv3-compact) so phones can still sign in. */ html, body { margin: 0; height: 100%; overflow: hidden; background: #0B0B25; } body { display: grid; place-items: center; -webkit-font-smoothing: antialiased; } .lv3-root { --globe-w: min(860px, 96cqh); --globe-r: -13%; zoom: var(--lv3-zoom, 1); width: var(--lv3-root-w, 1440px); height: var(--lv3-root-h, 900px); flex-shrink: 0; position: relative; overflow: hidden; display: flex; align-items: stretch; justify-content: center; container-type: size; container-name: page; /* gradient and glows are anchored to the 1440-wide composition centre, so they stay put when login-v3.js widens the root to fill a wider viewport */ background: radial-gradient(1020px 900px at calc(50% + 403px) 6%, rgba(255, 107, 130, 0.10) 0%, rgba(11, 11, 37, 0) 100%), #0B0B25; font-family: Inter, sans-serif; color: #1B1B3C; } .lv3-root p, .lv3-root h1, .lv3-root label, .lv3-root ul { margin: 0; } .lv3-root [hidden] { display: none !important; } .lv3-root a { color: #FF4562; text-decoration: none; } .lv3-root a:hover { color: #E53E58; text-decoration: none; } .lv3-icon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; display: inline-block; width: 1em; height: 1em; overflow: hidden; flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } /* ---------------------------------------------------------------- page frame */ .lv3-glow { position: absolute; border-radius: 50%; pointer-events: none; } .lv3-glow-1 { left: calc(50% - 900px); top: -200px; width: 720px; height: 620px; background: linear-gradient(133deg, rgba(255, 69, 98, 0.18) 0%, rgba(151, 71, 255, 0.18) 100%); filter: blur(20px); opacity: .6; } .lv3-glow-2 { left: calc(50% - 540px); top: 620px; width: 760px; height: 560px; background: radial-gradient(closest-side, rgba(151, 71, 255, 0.16) 0%, rgba(11, 11, 37, 0) 100%); } .lv3-shell { position: relative; z-index: 1; flex: 1 1 auto; width: 100%; max-width: 1840px; display: flex; align-items: stretch; } .lv3-cardcol { position: relative; flex: 0 0 auto; width: clamp(540px, 30cqw, 700px); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: scale(var(--card-scale, 1)); transform-origin: center center; } /* ---------------------------------------------------------------- hero (left) */ .lv3-hero { position: relative; flex: 1; min-width: 0; height: 100%; padding: clamp(40px, 4.2cqh, 60px) clamp(48px, 4cqw, 96px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 32px; } .lv3-globe-wrap { position: absolute; right: var(--globe-r); top: 52%; transform: translateY(-50%); width: var(--globe-w); aspect-ratio: 1; pointer-events: none; opacity: .92; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 66%, transparent 80%); mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 66%, transparent 80%); } .lv3-globe-wrap canvas { width: 100%; height: 100%; display: block; } .lv3-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0B0B25 0%, rgba(11, 11, 37, 0.92) 34%, rgba(11, 11, 37, 0.4) 62%, rgba(11, 11, 37, 0) 86%); } .lv3-hero-content { position: relative; display: flex; flex-direction: column; gap: clamp(24px, 3.4cqh, 36px); max-width: min(620px, 52cqw); } .lv3-slides { position: relative; min-height: calc(392px * var(--hero-type, 1)); } .lv3-slide { position: absolute; inset: 0; width: 100%; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 420ms cubic-bezier(.2, 0, 0, 1), transform 420ms cubic-bezier(.2, 0, 0, 1); display: flex; flex-direction: column; gap: 20px; } .lv3-slide.is-active { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; } .lv3-slide-title { font-family: 'Red Hat Display', sans-serif; font-weight: 600; font-size: calc(clamp(30px, 2.3cqw, 40px) * var(--hero-type, 1)); line-height: 1.2; color: #F3F5FF; white-space: pre-line; } .lv3-slide-body { font-weight: 400; font-size: calc(clamp(13px, 0.95cqw, 15px) * var(--hero-type, 1)); line-height: 1.72; color: #C9C9E4; } .lv3-bullets { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; } .lv3-bullets li { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: calc(14px * var(--hero-type, 1)); line-height: 1.6; color: #C9C9E4; } .lv3-bullets li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #FF4562; flex-shrink: 0; margin-top: calc(0.62em * var(--hero-type, 1)); } .lv3-dots { display: flex; align-items: center; gap: 10px; margin-top: -8px; } .lv3-dot { width: 8px; height: 8px; padding: 0; border: none; cursor: pointer; border-radius: 100px; background: rgba(233, 233, 247, 0.25); transition: width 260ms cubic-bezier(.2, 0, 0, 1), background 180ms; } .lv3-dot.is-active { width: 32px; background: #FF4562; } .lv3-hero-cta { align-self: flex-start; height: calc(52px * var(--hero-type, 1)); padding: 0 32px; border-radius: 100px; border: none; cursor: pointer; background: #FF4562; color: #fff; font-family: Inter, sans-serif; font-weight: 600; font-size: calc(15px * var(--hero-type, 1)); display: inline-flex; align-items: center; transition: background 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-hero-cta:hover { background: #E53E58; } .lv3-funnel { display: flex; flex-direction: column; gap: 20px; } .lv3-funnel-rule { height: 1px; background: rgba(165, 155, 250, 0.14); } .lv3-funnel-row { display: flex; align-items: center; gap: clamp(16px, 1.6cqw, 28px); } .lv3-step { color: rgba(165, 155, 250, 0.3); display: inline-flex; } .lv3-step .lv3-icon { font-size: 18px; } .lv3-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lv3-stat-value { font-family: 'Red Hat Display', sans-serif; font-weight: 700; font-size: calc(28px * var(--hero-type, 1)); line-height: 1.2; color: #F3F5FF; white-space: nowrap; } .lv3-stat-value.is-accent { color: #FF4562; } .lv3-stat-label { font-weight: 500; font-size: calc(13px * var(--hero-type, 1)); line-height: 1.54; color: #E9E9F7; white-space: nowrap; } .lv3-stat-meta { font-weight: 400; font-size: calc(11px * var(--hero-type, 1)); line-height: 1.45; color: #7B7B91; white-space: nowrap; } /* CVE card slide (?cve= links keep the visitor's journey on the login page) */ .lv3-cve { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(165, 155, 250, 0.14); } .lv3-cve-top { display: flex; align-items: center; gap: 12px; } .lv3-cve-badge { width: 40px; height: 40px; border-radius: 14px; background: #FF4562; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .lv3-cve-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lv3-cve-id { font-family: 'Red Hat Display', sans-serif; font-weight: 700; font-size: calc(20px * var(--hero-type, 1)); line-height: 1.2; color: #F3F5FF; } .lv3-cve-vendor { font-weight: 400; font-size: calc(12px * var(--hero-type, 1)); line-height: 1.5; color: #7B7B91; } .lv3-cve-metric { display: flex; flex-direction: column; gap: 6px; } .lv3-cve-metric-head { display: flex; justify-content: space-between; font-weight: 500; font-size: calc(12px * var(--hero-type, 1)); line-height: 1.5; color: #E9E9F7; } .lv3-cve-metric-head span:last-child { font-family: 'Red Hat Display', sans-serif; font-weight: 700; color: #FF4562; } .lv3-cve-track { height: 4px; border-radius: 100px; background: rgba(233, 233, 247, 0.12); overflow: hidden; } .lv3-cve-fill { display: block; height: 100%; width: 0; border-radius: 100px; background: #FF4562; transition: width 900ms cubic-bezier(.2, 0, 0, 1); } .lv3-cve-desc { font-weight: 400; font-size: calc(13px * var(--hero-type, 1)); line-height: 1.6; color: #C9C9E4; } /* ---------------------------------------------------------------- card (right) */ .lv3-card { width: 448px; border-radius: 28px; background: #fff; padding: 32px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.35), 6px 6px 40px rgba(255, 255, 255, 0.10); display: flex; flex-direction: column; gap: 20px; color-scheme: light; } .lv3-view, .lv3-form { display: flex; flex-direction: column; gap: 20px; } .lv3-card-header { display: flex; flex-direction: column; align-items: center; gap: 18px; } .lv3-card-logo { height: 80px; width: auto; } .lv3-rule { height: 1px; align-self: stretch; background: #E9E9F7; } .lv3-rule-short { height: 1px; width: 64px; background: #E9E9F7; } .lv3-welcome { display: flex; flex-direction: column; gap: 4px; align-items: center; } .lv3-welcome-title { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: #1B1B3C; } .lv3-welcome-meta { font-weight: 400; font-size: 14px; line-height: 20px; color: #7B7B91; } /* Field */ .lv3-field { position: relative; height: 48px; min-width: 0; border-radius: 20px; background: #fff; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 0 16px; box-sizing: border-box; color: #7B7B91; } /* The 1px ring lives on a layer above the input: the browser's autofill paint (covered with an inset white shadow below) would otherwise hide the ring's top and bottom edges. */ .lv3-field::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #E9E9F7; pointer-events: none; transition: box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-field:focus-within { color: #1B1B3C; } .lv3-field:focus-within::after { box-shadow: inset 0 0 0 1px #1B1B3C; } .lv3-field.lv2-input-invalid::after, .lv3-field.lv2-input-invalid:focus-within::after { box-shadow: inset 0 0 0 1px #CC374E; } .lv3-field .lv3-icon { font-size: 20px; } .lv3-field input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; padding: 0; margin: 0; font-family: Inter, sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #1B1B3C; } .lv3-field input::placeholder { color: #A0A0B6; opacity: 1; } .lv3-field input:-webkit-autofill, .lv3-field input:-webkit-autofill:hover, .lv3-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: #1B1B3C; caret-color: #1B1B3C; transition: background-color 600000s 0s; } .lv3-field-eye { color: #7B7B91; cursor: pointer; display: inline-flex; border: none; background: none; padding: 0; margin: 0; } .lv3-field-eye:hover { color: #1B1B3C; } /* Inline validation hint (rendered by lv2-form-validation.js after the field) */ .lv2-input-hint { display: block; margin-top: -14px; font-weight: 400; font-size: 12px; line-height: 18px; color: #CC374E; } /* Buttons */ .lv3-btn { position: relative; height: 48px; width: 100%; border-radius: 20px; border: none; cursor: pointer; padding: 0 16px; box-sizing: border-box; font-family: Inter, sans-serif; font-size: 14px; line-height: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-btn .lv3-icon { font-size: 18px; } .lv3-btn:focus-visible { outline: 2px solid #1B1B3C; outline-offset: 2px; } /* focus given by the page when a step opens (not by the user tabbing) shows no ring */ .lv3-btn.is-quiet-focus:focus-visible { outline: none; } .lv3-btn-primary, .lv3-root a.lv3-btn-primary { background: #FF4562; color: #fff; font-weight: 600; } .lv3-btn-primary:hover, .lv3-root a.lv3-btn-primary:hover { background: #E53E58; color: #fff; } .lv3-btn-ghost, .lv3-root a.lv3-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px #1B1B3C; color: #1B1B3C; font-weight: 500; } .lv3-btn-ghost:hover, .lv3-root a.lv3-btn-ghost:hover { background: #F3F5FF; color: #1B1B3C; } .lv3-btn:disabled { cursor: default; } .lv3-btn.is-loading { pointer-events: none; color: transparent; } .lv3-btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: lv3-spin 700ms linear infinite; } .lv3-btn-ghost.is-loading::after { border-color: rgba(27, 27, 60, 0.2); border-top-color: #1B1B3C; } @keyframes lv3-spin { to { transform: rotate(360deg); } } /* Checkbox */ .lv3-check { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; font-size: 13px; line-height: 20px; color: #4A4A88; } .lv3-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .lv3-check-box { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; box-shadow: inset 0 0 0 2px #D5D5E5; color: #fff; } .lv3-check-box .lv3-icon { font-size: 14px; opacity: 0; } .lv3-check input:checked + .lv3-check-box { background: #FF4562; box-shadow: none; } .lv3-check input:checked + .lv3-check-box .lv3-icon { opacity: 1; } .lv3-check input:focus-visible + .lv3-check-box { outline: 2px solid #1B1B3C; outline-offset: 2px; } /* Link, Back, Identity, Head, Hint, Notice */ .lv3-link, .lv3-root a.lv3-link { font-family: Inter, sans-serif; font-weight: 500; font-size: 13px; line-height: 20px; color: #FF4562; cursor: pointer; white-space: nowrap; text-decoration: none; background: none; border: none; padding: 0; } .lv3-link:hover, .lv3-root a.lv3-link:hover { color: #E53E58; } .lv3-link-quiet, .lv3-root a.lv3-link-quiet { color: #4A4A88; } .lv3-link-quiet:hover, .lv3-root a.lv3-link-quiet:hover { color: #1B1B3C; } .lv3-link:disabled { color: #7B7B91; cursor: default; } .lv3-back, .lv3-root a.lv3-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-family: Inter, sans-serif; font-weight: 500; font-size: 13px; line-height: 20px; color: #7B7B91; cursor: pointer; background: none; border: none; padding: 0; text-decoration: none; } .lv3-back:hover, .lv3-root a.lv3-back:hover { color: #1B1B3C; } .lv3-back .lv3-icon { font-size: 16px; } .lv3-identity { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 16px; background: #F3F5FF; } .lv3-identity-avatar { width: 26px; height: 26px; border-radius: 50%; background: #1B1B3C; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; text-transform: uppercase; flex-shrink: 0; overflow: hidden; } .lv3-identity-avatar img { width: 100%; height: 100%; object-fit: cover; } .lv3-identity-text { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; line-height: 20px; color: #1B1B3C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lv3-head { display: flex; flex-direction: column; gap: 4px; } .lv3-head-title { font-weight: 600; font-size: 22px; line-height: 28px; color: #1B1B3C; } .lv3-head-meta { font-weight: 400; font-size: 13px; line-height: 20px; color: #7B7B91; overflow-wrap: anywhere; } .lv3-hint { font-weight: 400; font-size: 12px; line-height: 18px; color: #7B7B91; text-align: center; } .lv3-body-text { font-weight: 400; font-size: 14px; line-height: 22px; color: #4A4A88; } .lv3-tile { width: 56px; height: 56px; border-radius: 20px; background: #F3F5FF; display: flex; align-items: center; justify-content: center; color: #4A4A88; } .lv3-tile .lv3-icon { font-size: 28px; } .lv3-notice { display: flex; gap: 10px; padding: 14px; border-radius: 16px; } .lv3-notice-critical { background: #FFEDF0; box-shadow: inset 0 0 0 1px #FFC8D2; color: #CC374E; } .lv3-notice-info { background: #F3F5FF; box-shadow: inset 0 0 0 1px #DEDEFF; color: #4A4A88; } .lv3-notice .lv3-icon { font-size: 20px; } .lv3-notice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lv3-notice-title { font-weight: 600; font-size: 13px; line-height: 20px; } .lv3-notice-text { font-weight: 400; font-size: 12px; line-height: 18px; color: #4A4A88; overflow-wrap: anywhere; } /* Code boxes (2FA) */ .lv3-codes { display: flex; gap: 12px; } .lv3-code { width: 52px; height: 56px; border-radius: 16px; border: none; outline: none; text-align: center; background: #fff; box-shadow: inset 0 0 0 1px #E9E9F7; font-family: Inter, sans-serif; font-weight: 600; font-size: 20px; color: #1B1B3C; padding: 0; margin: 0; box-sizing: border-box; transition: box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-code:focus, .lv3-code.is-filled { box-shadow: inset 0 0 0 1px #1B1B3C; } .lv3-codes.lv2-input-invalid .lv3-code { box-shadow: inset 0 0 0 1px #CC374E; } /* Rows */ .lv3-row { display: flex; gap: 5px; align-items: center; justify-content: center; } .lv3-row-text { font-weight: 400; font-size: 13px; line-height: 20px; color: #7B7B91; } .lv3-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lv3-meta-text { font-weight: 400; font-size: 12px; line-height: 20px; color: #7B7B91; white-space: nowrap; } .lv3-stack { display: flex; flex-direction: column; gap: 12px; } /* Password strength (reset page) */ .lv3-strength { display: flex; flex-direction: column; gap: 4px; margin-top: -12px; } .lv3-strength-track { height: 4px; border-radius: 100px; background: #E9E9F7; overflow: hidden; } .lv3-strength-fill { display: block; height: 100%; width: 5%; border-radius: 100px; background: #7B7B91; transition: width 200ms cubic-bezier(.2, 0, 0, 1), background 200ms; } .lv3-strength-text { align-self: flex-end; font-weight: 500; font-size: 11px; line-height: 16px; color: #7B7B91; } /* Card footer */ .lv3-card-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; } .lv3-card-footer .lv3-row { padding: 6px 0; } .lv3-legal { display: flex; gap: 10px; align-items: center; white-space: nowrap; font-weight: 500; font-size: 12px; line-height: 20px; color: #7B7B91; } .lv3-root .lv3-legal a { color: #7B7B91; } .lv3-root .lv3-legal a:hover { color: #1B1B3C; } .lv3-legal-sep { width: 1px; height: 12px; background: #E9E9F7; } .lv3-copyright { margin-top: -4px; font-weight: 400; font-size: 11px; line-height: 16px; color: #A0A0B6; text-align: center; } /* ---------------------------------------------------------------- sign-up modal */ .lv3-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(11, 11, 37, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .lv3-modal-panel { width: 520px; max-height: calc(100cqh - 48px); /* only vertical: password-manager popups (Proton Pass, 1Password) inject wide absolutely-positioned elements into the form and would otherwise add a horizontal bar */ overflow-x: hidden; overflow-y: auto; transform: scale(var(--card-scale, 1)); border-radius: 28px; background: #fff; padding: 32px; box-sizing: border-box; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 20px; color-scheme: light; } .lv3-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .lv3-modal-close { width: 32px; height: 32px; border-radius: 10px; border: none; background: #F3F5FF; color: #4A4A88; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; } .lv3-modal-close .lv3-icon { font-size: 18px; } /* HubSpot sign-up form, restyled to the card primitives. HubSpot injects its own stylesheet at runtime, hence the !important on every declaration that matters; _login_v3_hubspot_signup_script.html repeats the field/button rules inline for the same reason. */ .lv3-hs, .lv3-hs .hbspt-form, .lv3-hs .hs-form { width: 100% !important; max-width: 100% !important; background: transparent !important; font-family: Inter, sans-serif !important; } .lv3-hs .hs-form *:not(.lv3-icon) { font-family: Inter, sans-serif !important; } .lv3-hs .hs-form fieldset { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } .lv3-hs .hs-form fieldset.form-columns-2 { display: flex !important; gap: 12px !important; } .lv3-hs .hs-form fieldset.form-columns-2 .hs-form-field { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; float: none !important; } .lv3-hs .hs-form .hs-form-field { width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; float: none !important; background: transparent !important; border: none !important; } .lv3-hs .hs-form .hs-form-field > label:not(.hs-error-msg), .lv3-hs .hs-form .hs-form-field > legend { display: none !important; } .lv3-hs .hs-form .input { margin: 0 !important; } .lv3-hs .hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .lv3-hs .hs-form select.hs-input, .lv3-hs .hs-form textarea.hs-input { width: 100% !important; height: 48px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 16px !important; border: none !important; border-radius: 20px !important; background: #fff !important; box-shadow: inset 0 0 0 1px #E9E9F7 !important; font-weight: 400 !important; font-size: 14px !important; line-height: 20px !important; color: #1B1B3C !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important; transition: box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } /* custom dropdown (lv3-dropdown.js) — the native select is kept, hidden, for HubSpot */ .lv3-hs .hs-form .input { position: relative; } .lv3-dd { position: relative; width: 100%; } .lv3-dd-toggle { width: 100%; height: 48px; box-sizing: border-box; padding: 0 16px; margin: 0; border: none; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #E9E9F7; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; font-family: Inter, sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #1B1B3C; transition: box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-dd-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #1B1B3C; } .lv3-dd.is-open .lv3-dd-toggle { box-shadow: inset 0 0 0 1px #1B1B3C; } .lv3-dd.is-error .lv3-dd-toggle { box-shadow: inset 0 0 0 1px #CC374E; } .lv3-dd-toggle:disabled { cursor: default; color: #A0A0B6; } .lv3-dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lv3-dd-toggle.is-placeholder .lv3-dd-label { color: #A0A0B6; } .lv3-dd-toggle .lv3-icon { color: #7B7B91; transition: transform 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-dd.is-open .lv3-dd-chevron { transform: rotate(180deg); } .lv3-dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; box-sizing: border-box; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E9E9F7, 0 16px 40px rgba(11, 11, 37, 0.18); display: flex; flex-direction: column; gap: 4px; } .lv3-dd.is-up .lv3-dd-menu { top: auto; bottom: calc(100% + 6px); } .lv3-dd-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: #F3F5FF; color: #7B7B91; } .lv3-dd-search .lv3-icon { font-size: 18px; } /* !important: HubSpot's stylesheet targets every input inside its form */ .lv3-hs .lv3-dd-search input { flex: 1 !important; min-width: 0 !important; width: auto !important; height: 40px !important; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font-family: Inter, sans-serif !important; font-weight: 400 !important; font-size: 14px !important; line-height: 20px !important; color: #1B1B3C !important; } .lv3-hs .lv3-dd-search input::placeholder { color: #A0A0B6; opacity: 1; } .lv3-hs .lv3-dd-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; outline: none; } .lv3-hs .lv3-dd-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-family: Inter, sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #1B1B3C; cursor: pointer; } .lv3-dd-option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } .lv3-hs .lv3-dd-option.is-active { background: #F3F5FF; } .lv3-hs .lv3-dd-option[aria-selected="true"] { font-weight: 500; } .lv3-dd-option .lv3-icon { font-size: 18px; color: #FF4562; } .lv3-hs .lv3-dd-empty { margin: 0; padding: 9px 12px; font-family: Inter, sans-serif; font-size: 13px; line-height: 20px; color: #7B7B91; } .lv3-hs .hs-form input.hs-input:focus, .lv3-hs .hs-form select.hs-input:focus, .lv3-hs .hs-form textarea.hs-input:focus { box-shadow: inset 0 0 0 1px #1B1B3C !important; } .lv3-hs .hs-form input.hs-input.error, .lv3-hs .hs-form select.hs-input.error, .lv3-hs .hs-form textarea.hs-input.error { box-shadow: inset 0 0 0 1px #CC374E !important; } .lv3-hs .hs-form input.hs-input::placeholder, .lv3-hs .hs-form textarea.hs-input::placeholder { color: #A0A0B6 !important; opacity: 1 !important; } .lv3-hs .hs-form textarea.hs-input { height: auto !important; min-height: 96px !important; padding: 14px 16px !important; resize: vertical; } .lv3-hs .hs-form input.hs-input:-webkit-autofill, .lv3-hs .hs-form input.hs-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, inset 0 0 0 1px #E9E9F7 !important; -webkit-text-fill-color: #1B1B3C !important; } /* consent checkbox -> card checkbox */ .lv3-hs .hs-form .hs-form-booleancheckbox, .lv3-hs .hs-form .hs-form-checkbox { list-style: none !important; margin: 0 !important; padding: 0 !important; } .lv3-hs .hs-form .hs-form-booleancheckbox-display, .lv3-hs .hs-form .hs-form-checkbox-display { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 0 !important; cursor: pointer; font-weight: 400 !important; font-size: 13px !important; line-height: 20px !important; color: #4A4A88 !important; } .lv3-hs .hs-form input.hs-input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; margin: 1px 0 0 !important; padding: 0 !important; border: none !important; border-radius: 3px !important; background: #fff !important; box-shadow: inset 0 0 0 2px #D5D5E5 !important; flex-shrink: 0 !important; cursor: pointer; display: inline-block !important; vertical-align: top; } .lv3-hs .hs-form input.hs-input[type="checkbox"]:checked { background: #FF4562 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important; box-shadow: none !important; } .lv3-hs .hs-form .hs-form-booleancheckbox-display > span, .lv3-hs .hs-form .hs-form-checkbox-display > span, .lv3-hs .hs-form .legal-consent-container, .lv3-hs .hs-form .legal-consent-container p, .lv3-hs .hs-form .hs-richtext, .lv3-hs .hs-form .hs-richtext p { margin: 0 !important; font-weight: 400 !important; font-size: 13px !important; line-height: 20px !important; color: #4A4A88 !important; } .lv3-hs .hs-form .legal-consent-container .hs-form-booleancheckbox-display > span { display: block !important; margin-left: 0 !important; } .lv3-hs .hs-form .legal-consent-container { margin-bottom: 8px !important; } .lv3-hs .hs-form .hs-richtext a, .lv3-hs .hs-form .legal-consent-container a { color: #FF4562 !important; font-weight: 500 !important; text-decoration: none !important; } /* errors */ .lv3-hs .hs-form .hs-error-msgs { list-style: none !important; margin: 4px 0 0 !important; padding: 0 !important; } .lv3-hs .hs-form .hs-error-msgs li { margin: 0 !important; padding: 0 !important; } .lv3-hs .hs-form .hs-error-msgs label, .lv3-hs .hs-form .hs-error-msg, .lv3-hs .hs-form .hs_error_rollup label { display: block !important; margin: 0 !important; padding: 0 !important; font-weight: 400 !important; font-size: 12px !important; line-height: 18px !important; color: #CC374E !important; } .lv3-hs .hs-form .hs_error_rollup { margin: 0 0 8px !important; } /* submit -> primary button */ .lv3-hs .hs-form .hs-submit, .lv3-hs .hs-form .hs-submit .actions { margin: 0 !important; padding: 0 !important; } .lv3-hs .hs-form .hs-button { width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important; border: none !important; border-radius: 20px !important; background: #FF4562 !important; background-image: none !important; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; line-height: 20px !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer !important; transition: background 120ms cubic-bezier(.2, 0, 0, 1); } .lv3-hs .hs-form .hs-button:hover { background: #E53E58 !important; } /* thank-you message rendered by HubSpot after submit */ .lv3-hs .submitted-message { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 8px; } .lv3-hs .submitted-message::before { content: 'forward_to_inbox'; font-family: 'Material Symbols Outlined'; font-size: 28px; line-height: 56px; width: 56px; height: 56px; border-radius: 20px; background: #F3F5FF; color: #4A4A88; text-align: center; margin-bottom: 12px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .lv3-hs .submitted-message p { margin: 0; font-weight: 400; font-size: 14px; line-height: 22px; color: #4A4A88; } .lv3-hs .submitted-message p:first-of-type { font-weight: 600; font-size: 22px; line-height: 28px; color: #1B1B3C; } /* ---------------------------------------------------------------- misc */ .grecaptcha-badge { visibility: hidden; } /* invisible reCAPTCHA container: keep it out of the card's flex flow */ .lv3-root .g-recaptcha { position: absolute; } /* ---------------------------------------------------------------- compact fallback (< 960px) */ html.lv3-compact, html.lv3-compact body { height: auto; min-height: 100%; overflow: auto; } html.lv3-compact body { display: block; } html.lv3-compact .lv3-root { width: 100%; height: auto; min-height: 100vh; container-type: normal; overflow: visible; } html.lv3-compact .lv3-root .lv3-hero, html.lv3-compact .lv3-root .lv3-glow { display: none; } html.lv3-compact .lv3-root .lv3-shell { justify-content: center; padding: 24px 16px; box-sizing: border-box; } html.lv3-compact .lv3-root .lv3-cardcol { width: 100%; max-width: 448px; height: auto; transform: none; } html.lv3-compact .lv3-root .lv3-card { width: 100%; } html.lv3-compact .lv3-root .lv3-codes { gap: 8px; } html.lv3-compact .lv3-root .lv3-code { width: auto; flex: 1 1 0; min-width: 0; } html.lv3-compact .lv3-root .lv3-modal { position: fixed; padding: 16px; box-sizing: border-box; } html.lv3-compact .lv3-root .lv3-modal-panel { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); transform: none; }