/* Shared post-submit success modal (native ). Loaded on demand by hero-cta.js / contact.js and statically by capture pages. */ @import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@700&family=IBM+Plex+Mono:wght@400;500;700&display=swap'); dialog.ld-modal { /* Surface + outline are drawn by the two pseudo layers below: a border or box-shadow cannot follow a clip-path, which cut the outline off at the chamfered corners. The outer layer is the 1px rim, the inner layer (inset 1px, chamfer reduced to match) is the translucent glass surface. */ background: transparent; border: 0; color: #fff; padding: 44px 40px 36px; width: min(92vw, 480px); box-sizing: border-box; position: relative; isolation: isolate; font-family: "IBM Plex Mono", "Roboto Mono", monospace; } dialog.ld-modal::before { /* chamfer-following outline */ content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(255, 255, 255, .22); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); } dialog.ld-modal::after { /* translucent glass surface */ content: ""; position: absolute; inset: 1px; z-index: -1; background: rgba(13, 14, 17, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px); } dialog.ld-modal::backdrop { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } dialog.ld-modal[open] { animation: ld-modal-in .2s cubic-bezier(.22, 1, .36, 1); } dialog.ld-modal[open]::backdrop { animation: ld-backdrop-in .2s ease; } @keyframes ld-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } @keyframes ld-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { dialog.ld-modal[open], dialog.ld-modal[open]::backdrop { animation: none; } } /* body scroll lock while open (class set on by success-modal.js) */ .ld-modal-open, .ld-modal-open body { overflow: hidden; } .ld-modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; background: transparent; color: #9aa3ad; font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit; } .ld-modal-x:hover, .ld-modal-x:focus-visible { color: #fff; outline: none; } .ld-modal-title { margin: 0 0 14px; font-family: "Saira Condensed", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.05; letter-spacing: .5px; text-transform: uppercase; } .ld-modal-body { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: #d6d9dd; } .ld-modal-body strong { color: #fff; } .ld-modal-note { margin: 0 0 26px; font-size: 12px; line-height: 1.6; color: #9aa3ad; } .ld-modal-note:empty { display: none; margin: 0 0 16px; } .ld-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .ld-modal-btn { display: inline-block; padding: 13px 24px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .25s ease, color .25s ease; } .ld-modal-btn.ld-primary { background: #4d7dff; color: #fff; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .ld-modal-btn.ld-primary:hover, .ld-modal-btn.ld-primary:focus-visible { background: #6b93ff; outline: none; } /* Outlined secondary: same two-layer trick as the card, so the 1px outline follows the chamfer instead of being sliced off at the cut corners. */ .ld-modal-btn.ld-secondary { position: relative; isolation: isolate; background: transparent; color: #fff; } .ld-modal-btn.ld-secondary::before { /* outline layer */ content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(255, 255, 255, .45); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background-color .25s ease; } .ld-modal-btn.ld-secondary::after { /* fill layer, 1px inside */ content: ""; position: absolute; inset: 1px; z-index: -1; background: #101116; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); } .ld-modal-btn.ld-secondary:hover, .ld-modal-btn.ld-secondary:focus-visible { color: #4d7dff; outline: none; } .ld-modal-btn.ld-secondary:hover::before, .ld-modal-btn.ld-secondary:focus-visible::before { background: #4d7dff; } @media (max-width: 560px) { dialog.ld-modal { width: calc(100vw - 28px); padding: 36px 24px 28px; } .ld-modal-title { font-size: 29px; } .ld-modal-actions { flex-direction: column; align-items: stretch; } }