/* ============================================================ SITE CHROME · shared header + footer + Signal modal styles ------------------------------------------------------------ Used by every page via . The markup is injected by site-chrome.js into #site-header / #site-footer / . Edit here once and every page (incl. future pages) updates. ============================================================ */ .brand__logo { width: 72px; height: 48px; flex-shrink: 0; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M43.764 19.8714C43.8466 18.9946 44.9789 18.6912 45.4888 19.4092L50.3774 26.2933C50.5377 26.519 50.7891 26.6635 51.0657 26.6888L59.4995 27.4613C60.3791 27.5418 60.6813 28.6696 59.9598 29.1791L53.042 34.0648C52.8152 34.2249 52.6697 34.4758 52.6438 34.7514L51.8522 43.1578C51.7696 44.0345 50.6373 44.3378 50.1274 43.6199L45.2385 36.7357C45.0782 36.5099 44.8268 36.3654 44.5502 36.3401L36.1167 35.5679C35.2371 35.4873 34.9349 34.3595 35.6564 33.85L42.5739 28.9642C42.8007 28.804 42.9462 28.5532 42.9721 28.2776L43.764 19.8714ZM47.3232 27.9804C47.0683 27.6214 46.502 27.7731 46.4607 28.2115L46.2552 30.3932C46.2422 30.531 46.1695 30.6564 46.056 30.7365L44.2607 32.0046C43.9 32.2594 44.0511 32.8234 44.4909 32.8636L46.6797 33.0642C46.818 33.0768 46.9437 33.1491 47.0238 33.2619L48.2927 35.0486C48.5476 35.4075 49.1139 35.2558 49.1552 34.8175L49.3607 32.6358C49.3737 32.4979 49.4464 32.3725 49.5599 32.2924L51.3552 31.0244C51.7159 30.7696 51.5648 30.2056 51.125 30.1653L48.9362 29.9648C48.7979 29.9522 48.6722 29.8799 48.5921 29.767L47.3232 27.9804Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.8052 50.181C27.2945 49.6383 27.6329 48.7698 28.3732 48.6671C31.1824 48.2776 34.033 47.8462 36.8436 47.3704C37.0832 47.3299 37.3286 47.3825 37.5332 47.5125C41.8769 50.2736 47.3287 51.2749 52.7036 49.8347C58.0786 48.3945 62.2991 44.8014 64.6803 40.2385C64.7925 40.0235 64.9788 39.8553 65.2065 39.7706C67.8783 38.7774 70.5627 37.7259 73.1902 36.6586C73.8828 36.3774 74.6101 36.9603 74.4391 37.6857C74.2429 38.5183 74.008 39.3396 73.7355 40.1465C73.6311 40.4558 73.6857 40.7972 73.8878 41.0533L76.6276 44.525C76.8679 44.8295 76.8976 45.2496 76.7027 45.5857L74.4881 49.4035C74.2932 49.7395 73.9129 49.924 73.5278 49.8691L69.1379 49.243C68.814 49.1968 68.4896 49.3204 68.2727 49.5651C65.982 52.1499 63.1844 54.3225 59.979 55.913C59.6857 56.0585 59.4816 56.339 59.4425 56.663L58.9133 61.0506C58.8668 61.4358 58.5898 61.7544 58.2138 61.8551L53.9419 62.9998C53.5659 63.1005 53.1667 62.9631 52.9339 62.6528L50.2815 59.1177C50.0857 58.8567 49.7687 58.7157 49.4419 58.7363C45.8708 58.9617 42.3617 58.479 39.0855 57.3858C38.7753 57.2824 38.4327 57.3375 38.1753 57.5394L34.6863 60.2764C34.3803 60.5165 33.9587 60.5472 33.6219 60.3536L29.7953 58.1542C29.4585 57.9607 29.2742 57.582 29.33 57.1981L29.967 52.8218C30.0139 52.499 29.8903 52.1761 29.6452 51.9605C29.0057 51.3978 28.3915 50.804 27.8052 50.181ZM69.3274 41.9448C68.0578 42.285 67.3033 43.5858 67.6421 44.8503C67.981 46.1148 69.2848 46.8642 70.5543 46.524C71.8238 46.1838 72.5783 44.8829 72.2396 43.6185C71.9007 42.354 70.5969 41.6046 69.3274 41.9448Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M41.6617 0.0325961C42.0377 -0.0681316 42.4369 0.0693125 42.6697 0.379598L45.3217 3.91433C45.5176 4.17538 45.8346 4.31627 46.1614 4.29566C49.7325 4.07029 53.2417 4.55328 56.5179 5.64641C56.828 5.74988 57.1709 5.69473 57.4283 5.49281L60.9172 2.7558C61.2233 2.51571 61.6449 2.48527 61.9817 2.67883L65.8083 4.87796C66.1451 5.07153 66.3292 5.45025 66.2733 5.83415L66.0328 7.48674C65.1005 16.5446 84.7349 16.7107 87.3318 16.7507C92.2122 16.7164 95.2705 17.3945 95.6714 18.8899C96.8295 23.2122 75.8369 34.5561 50.4459 41.3596C25.055 48.163 1.20289 48.8353 0.0447187 44.513C-0.355817 43.0176 1.95356 40.9011 6.19717 38.4906C8.42524 37.1582 25.3448 27.1982 20.0118 19.8199L18.9761 18.5074C18.7358 18.2029 18.7061 17.7827 18.901 17.4467L21.1153 13.629C21.3102 13.2929 21.6905 13.1085 22.0756 13.1634L26.4654 13.7893C26.7893 13.8355 27.1138 13.7118 27.3307 13.4671C29.6214 10.8823 32.4189 8.70948 35.6243 7.11906C35.9176 6.97354 36.1217 6.69319 36.1608 6.36923L36.6904 1.98176C36.7368 1.59666 37.0138 1.278 37.3898 1.17726L41.6617 0.0325961ZM10.132 38.4397C10.3426 38.2438 10.0789 37.8273 9.81989 37.9527C-7.93541 46.5587 13.8575 47.7048 32.6261 43.5874C32.9131 43.5244 32.851 43.1294 32.5581 43.1544C20.3287 44.1949 3.49253 44.612 10.132 38.4397ZM42.9 13.1977C34.8404 15.3573 29.3757 22.3565 28.8172 30.2095C28.5467 34.0128 27.4546 37.9658 24.4334 40.3103L23.9446 40.6895C23.2268 41.2465 23.6238 42.3733 24.5319 42.3353C31.4162 42.0471 40.2665 40.861 49.6394 38.3495C59.0123 35.8381 67.27 32.4401 73.376 29.2475C74.1813 28.8264 73.9617 27.6522 73.0617 27.5286L72.4488 27.4446C68.6602 26.9248 65.7412 24.0487 63.624 20.8778C59.2117 14.2696 50.9848 11.0314 42.9 13.1977ZM16.3066 38.0807C16.1643 37.5494 15.5987 37.2495 15.0805 37.4404C12.123 38.53 10.5249 39.4902 10.756 40.3526C10.9813 41.1931 12.9185 41.8456 16.1041 42.1735C16.7538 42.2404 17.2581 41.6316 17.0896 41.0029L16.3066 38.0807ZM79.1137 20.2827C78.5695 20.3765 78.2296 20.919 78.372 21.4504L79.155 24.3725C79.3235 25.0013 80.0646 25.2764 80.5939 24.8936C83.1886 23.0168 84.54 21.4831 84.315 20.6426C84.0839 19.7802 82.2198 19.7477 79.1137 20.2827ZM25.0616 16.5051C23.7921 16.8453 23.0376 18.1461 23.3764 19.4106C23.7152 20.6751 25.0191 21.4245 26.2886 21.0843C27.5582 20.7441 28.3127 19.4433 27.9739 18.1788C27.635 16.9142 26.3312 16.1649 25.0616 16.5051Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M43.764 19.8714C43.8466 18.9946 44.9789 18.6912 45.4888 19.4092L50.3774 26.2933C50.5377 26.519 50.7891 26.6635 51.0657 26.6888L59.4995 27.4613C60.3791 27.5418 60.6813 28.6696 59.9598 29.1791L53.042 34.0648C52.8152 34.2249 52.6697 34.4758 52.6438 34.7514L51.8522 43.1578C51.7696 44.0345 50.6373 44.3378 50.1274 43.6199L45.2385 36.7357C45.0782 36.5099 44.8268 36.3654 44.5502 36.3401L36.1167 35.5679C35.2371 35.4873 34.9349 34.3595 35.6564 33.85L42.5739 28.9642C42.8007 28.804 42.9462 28.5532 42.9721 28.2776L43.764 19.8714ZM47.3232 27.9804C47.0683 27.6214 46.502 27.7731 46.4607 28.2115L46.2552 30.3932C46.2422 30.531 46.1695 30.6564 46.056 30.7365L44.2607 32.0046C43.9 32.2594 44.0511 32.8234 44.4909 32.8636L46.6797 33.0642C46.818 33.0768 46.9437 33.1491 47.0238 33.2619L48.2927 35.0486C48.5476 35.4075 49.1139 35.2558 49.1552 34.8175L49.3607 32.6358C49.3737 32.4979 49.4464 32.3725 49.5599 32.2924L51.3552 31.0244C51.7159 30.7696 51.5648 30.2056 51.125 30.1653L48.9362 29.9648C48.7979 29.9522 48.6722 29.8799 48.5921 29.767L47.3232 27.9804Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.8052 50.181C27.2945 49.6383 27.6329 48.7698 28.3732 48.6671C31.1824 48.2776 34.033 47.8462 36.8436 47.3704C37.0832 47.3299 37.3286 47.3825 37.5332 47.5125C41.8769 50.2736 47.3287 51.2749 52.7036 49.8347C58.0786 48.3945 62.2991 44.8014 64.6803 40.2385C64.7925 40.0235 64.9788 39.8553 65.2065 39.7706C67.8783 38.7774 70.5627 37.7259 73.1902 36.6586C73.8828 36.3774 74.6101 36.9603 74.4391 37.6857C74.2429 38.5183 74.008 39.3396 73.7355 40.1465C73.6311 40.4558 73.6857 40.7972 73.8878 41.0533L76.6276 44.525C76.8679 44.8295 76.8976 45.2496 76.7027 45.5857L74.4881 49.4035C74.2932 49.7395 73.9129 49.924 73.5278 49.8691L69.1379 49.243C68.814 49.1968 68.4896 49.3204 68.2727 49.5651C65.982 52.1499 63.1844 54.3225 59.979 55.913C59.6857 56.0585 59.4816 56.339 59.4425 56.663L58.9133 61.0506C58.8668 61.4358 58.5898 61.7544 58.2138 61.8551L53.9419 62.9998C53.5659 63.1005 53.1667 62.9631 52.9339 62.6528L50.2815 59.1177C50.0857 58.8567 49.7687 58.7157 49.4419 58.7363C45.8708 58.9617 42.3617 58.479 39.0855 57.3858C38.7753 57.2824 38.4327 57.3375 38.1753 57.5394L34.6863 60.2764C34.3803 60.5165 33.9587 60.5472 33.6219 60.3536L29.7953 58.1542C29.4585 57.9607 29.2742 57.582 29.33 57.1981L29.967 52.8218C30.0139 52.499 29.8903 52.1761 29.6452 51.9605C29.0057 51.3978 28.3915 50.804 27.8052 50.181ZM69.3274 41.9448C68.0578 42.285 67.3033 43.5858 67.6421 44.8503C67.981 46.1148 69.2848 46.8642 70.5543 46.524C71.8238 46.1838 72.5783 44.8829 72.2396 43.6185C71.9007 42.354 70.5969 41.6046 69.3274 41.9448Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M41.6617 0.0325961C42.0377 -0.0681316 42.4369 0.0693125 42.6697 0.379598L45.3217 3.91433C45.5176 4.17538 45.8346 4.31627 46.1614 4.29566C49.7325 4.07029 53.2417 4.55328 56.5179 5.64641C56.828 5.74988 57.1709 5.69473 57.4283 5.49281L60.9172 2.7558C61.2233 2.51571 61.6449 2.48527 61.9817 2.67883L65.8083 4.87796C66.1451 5.07153 66.3292 5.45025 66.2733 5.83415L66.0328 7.48674C65.1005 16.5446 84.7349 16.7107 87.3318 16.7507C92.2122 16.7164 95.2705 17.3945 95.6714 18.8899C96.8295 23.2122 75.8369 34.5561 50.4459 41.3596C25.055 48.163 1.20289 48.8353 0.0447187 44.513C-0.355817 43.0176 1.95356 40.9011 6.19717 38.4906C8.42524 37.1582 25.3448 27.1982 20.0118 19.8199L18.9761 18.5074C18.7358 18.2029 18.7061 17.7827 18.901 17.4467L21.1153 13.629C21.3102 13.2929 21.6905 13.1085 22.0756 13.1634L26.4654 13.7893C26.7893 13.8355 27.1138 13.7118 27.3307 13.4671C29.6214 10.8823 32.4189 8.70948 35.6243 7.11906C35.9176 6.97354 36.1217 6.69319 36.1608 6.36923L36.6904 1.98176C36.7368 1.59666 37.0138 1.278 37.3898 1.17726L41.6617 0.0325961ZM10.132 38.4397C10.3426 38.2438 10.0789 37.8273 9.81989 37.9527C-7.93541 46.5587 13.8575 47.7048 32.6261 43.5874C32.9131 43.5244 32.851 43.1294 32.5581 43.1544C20.3287 44.1949 3.49253 44.612 10.132 38.4397ZM42.9 13.1977C34.8404 15.3573 29.3757 22.3565 28.8172 30.2095C28.5467 34.0128 27.4546 37.9658 24.4334 40.3103L23.9446 40.6895C23.2268 41.2465 23.6238 42.3733 24.5319 42.3353C31.4162 42.0471 40.2665 40.861 49.6394 38.3495C59.0123 35.8381 67.27 32.4401 73.376 29.2475C74.1813 28.8264 73.9617 27.6522 73.0617 27.5286L72.4488 27.4446C68.6602 26.9248 65.7412 24.0487 63.624 20.8778C59.2117 14.2696 50.9848 11.0314 42.9 13.1977ZM16.3066 38.0807C16.1643 37.5494 15.5987 37.2495 15.0805 37.4404C12.123 38.53 10.5249 39.4902 10.756 40.3526C10.9813 41.1931 12.9185 41.8456 16.1041 42.1735C16.7538 42.2404 17.2581 41.6316 17.0896 41.0029L16.3066 38.0807ZM79.1137 20.2827C78.5695 20.3765 78.2296 20.919 78.372 21.4504L79.155 24.3725C79.3235 25.0013 80.0646 25.2764 80.5939 24.8936C83.1886 23.0168 84.54 21.4831 84.315 20.6426C84.0839 19.7802 82.2198 19.7477 79.1137 20.2827ZM25.0616 16.5051C23.7921 16.8453 23.0376 18.1461 23.3764 19.4106C23.7152 20.6751 25.0191 21.4245 26.2886 21.0843C27.5582 20.7441 28.3127 19.4433 27.9739 18.1788C27.635 16.9142 26.3312 16.1649 25.0616 16.5051Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; } [data-theme="dark"] .brand__logo { background: var(--primary); } .brand { display: flex; align-items: center; text-decoration: none; position: relative; } .brand__logo { transition: transform 260ms cubic-bezier(0.34, 1.8, 0.5, 1); } .brand:hover .brand__logo { transform: translateY(-2px); } .brand:active .brand__logo { transform: translateY(2px); transition-duration: var(--duration-fast); } .topbar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--container-xl); padding: 0 var(--space-8); height: auto; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; display: flex; align-items: flex-start; gap: 0; z-index: 100; } .topbar .u-grow { flex: 1 1 0; } .topbar__brand-pill, .topbar__nav-pill { display: flex; align-items: center; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--border); } .topbar__brand-pill { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .topbar__brand-pill.is-hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; } .topbar__nav-pill { padding: 0 var(--space-2); gap: 0; border: none; height: 40px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow); } .topbar__nav { display: flex; align-items: center; gap: var(--space-1); } [data-theme="light"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: none; } /* ---- Sliding nav underline ---- */ .topbar__nav { position: relative; } /* Signal is a filled button; align its gap to the 8px Signal→theme gap so the right side of the bar reads evenly (ghost links sit tighter at 4px because their padding is transparent). */ .topbar__nav #nav-contact-btn { margin-left: var(--space-1); } .topbar__nav .btn-splash::after { display: none; } .topbar-nav-line { position: absolute; bottom: 3px; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, transparent 0%, currentColor 25%, currentColor 75%, transparent 100%); color: var(--fg); opacity: 0; pointer-events: none; transition: transform 0.2s var(--ease-out), width 0.2s var(--ease-out), opacity 0.15s var(--ease-out); will-change: transform, width; } /* ---- Footer ---- */ .footer { background: var(--bg); border-top: 1px dashed transparent; border-image: repeating-linear-gradient(to right, var(--border) 0px, var(--border) 4px, transparent 4px, transparent 8px) 1; } .footer__top { display: grid; grid-template-columns: auto auto 1fr; justify-content: start; gap: var(--space-16); padding: var(--space-10) var(--space-8); max-width: var(--container-xl); margin: 0 auto; } .footer__brand-name { display: inline-flex; align-items: center; gap: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--fg); text-decoration: none; margin-bottom: var(--space-3); } .footer__brand-name span { font-family: var(--font-mono); color: var(--primary); } .footer__logo { background: var(--fg); backdrop-filter: none; -webkit-backdrop-filter: none; } .footer__tagline { font-size: var(--text-sm); color: var(--fg-subtle); line-height: var(--leading-relaxed); max-width: 28ch; margin: 0 0 var(--space-5); } .footer__socials { display: flex; gap: var(--space-3); } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--fg-subtle); transition: color var(--duration-fast) var(--ease-out); } .footer__social-link:hover { color: var(--fg); } .footer__social-link svg { width: 18px; height: 18px; fill: currentColor; } .footer__col-label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 var(--space-4); } .footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .footer__links a { font-size: var(--text-sm); color: var(--fg-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .footer__links a:hover { color: var(--fg); } .footer__bottom { border-top: 1px solid var(--border); padding: var(--space-5) var(--space-8); max-width: var(--container-xl); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .footer__copy { font-size: var(--text-sm); color: var(--fg-subtle); } .footer__legal { display: flex; gap: var(--space-5); } .footer__legal a { font-size: var(--text-sm); color: var(--fg-subtle); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .footer__legal a:hover { color: var(--fg); } /* ---- Footer animation column (matches the landing page) ---- */ .footer__anim-col { display: flex; align-items: center; justify-content: flex-end; overflow: hidden; } .footer__anim-col-svg { display: block; width: 64%; height: auto; margin-left: auto; opacity: 0; transition: opacity 0.6s var(--ease-out); filter: brightness(0.63); mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%); -webkit-mask-composite: destination-in; } .footer__anim-col-svg.is-loaded { opacity: 1; } @media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); } .footer__brand { grid-column: 1 / -1; } .footer__bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; } } @media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-8) var(--space-5); } .footer__bottom { padding: var(--space-5); } .footer__anim-col { justify-content: center; } .footer__anim-col-svg { width: 100%; margin-left: 0; } } /* ============================================================ MOBILE HAMBURGER MENU (shared, injected by site-chrome.js) ============================================================ */ .topbar__burger { display: none; } .topbar__burger .icon-close { display: none; } .topbar__burger[aria-expanded="true"] .icon-burger { display: none; } .topbar__burger[aria-expanded="true"] .icon-close { display: block; } .mobile-menu { position: fixed; top: 60px; right: var(--space-4); z-index: 90; min-width: 184px; padding: var(--space-2); border-radius: var(--radius-lg, 14px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.16)), 0 0 0 1px var(--border); transform-origin: top right; transform: translateY(-8px) scale(0.96); opacity: 0; visibility: hidden; display: none; transition: opacity 0.24s var(--ease-out), transform 0.28s var(--ease-spring), visibility 0s linear 0.28s; } .mobile-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.24s var(--ease-out), transform 0.32s var(--ease-spring); } .mobile-menu__nav { display: flex; flex-direction: column; } .mobile-menu__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius, 10px); font-size: var(--text-base); font-weight: 500; color: var(--fg); text-decoration: none; letter-spacing: 0.01em; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .mobile-menu__link:hover, .mobile-menu__link:focus-visible { background: var(--surface-hover); outline: none; } .mobile-menu__link:active { background: var(--surface-active); } .mobile-menu__link .icon { width: 20px; height: 20px; flex-shrink: 0; } @media (max-width: 600px) { .topbar { padding: 0 var(--space-4); top: 12px; } .topbar__brand-pill { padding-left: var(--space-1); } .brand__logo { width: 58px; height: 39px; } .topbar__nav-pill { padding: 0 var(--space-1); height: 40px; } .topbar__nav { gap: 0; } .topbar__nav-pill .topbar__nav { display: none; } .topbar__burger { display: flex; } .mobile-menu { display: block; } } /* ============================================================ SIGNAL "Let's Align" MODAL (shared, injected by site-chrome.js) .modal / .modal-overlay / form fields come from components.css; these are the signal-ring halo + entrance/exit animations. ============================================================ */ @keyframes signal-ring-out { 0% { outline-offset: 2px; opacity: 0; } 18% { opacity: 0.4; } 100% { outline-offset: 46px; opacity: 0; } } .signal-ring-wrap { position: relative; width: min(520px, 96vw); } .signal-ring { position: absolute; inset: 0; border-radius: var(--radius); outline: 1px solid var(--primary); animation: signal-ring-out 2.4s ease-out infinite backwards; pointer-events: none; } [data-theme="light"] .signal-ring { outline: 1px solid var(--border); } .signal-ring:nth-child(2) { animation-delay: 0.8s; } .signal-ring:nth-child(3) { animation-delay: 1.6s; } @media (max-width: 520px) { #align-modal { place-items: center; } #align-modal .modal { border-radius: var(--radius); } } @keyframes modal-scrim-out { from { background-color: var(--overlay); } to { background-color: transparent; } } .modal-overlay.is-closing { animation: modal-scrim-out 180ms var(--ease-out) both; } .modal-overlay.is-closing .signal-ring { animation: none; opacity: 0; transition: opacity 160ms var(--ease-out); } @keyframes modal-card-in { from { transform: scale(0.96) translateY(8px); } to { transform: none; } } @keyframes modal-card-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97) translateY(6px); } } .modal-overlay .modal { animation: modal-card-in 300ms var(--ease-spring) backwards; } .modal-overlay.is-closing .modal { animation: modal-card-out 180ms var(--ease-out) forwards; } @media (prefers-reduced-motion: reduce) { .modal-overlay .modal, .modal-overlay.is-closing .modal { animation: none; } }