.v1-banner { display: flex; } .v1-modal { font-family: "Inter", $family-sans-serif; z-index: 100; } .v1-main, .v1-banner, .v1-modal { background: conic-gradient( from 180deg at 50% 50%, #040435 0deg, #430677 60.00000178813934deg, #b61bbd 97.50000357627869deg, #fe5c65 149.9999964237213deg, #ff896f 179.72567439079285deg, #fc8433 209.51215267181396deg, #fd8d4d 226.2606167793274deg, #f45b10 244.58197116851807deg, #ad267d 279.1821026802063deg, #4b1acd 300.7368063926697deg, #004e9c 319.7864770889282deg, #003773 338.803768157959deg, #040435 360deg ); } .v1-banner { display: flex; align-items: center; justify-content: center; padding: 1rem; gap: 1rem; flex-wrap: wrap; } .v1-emoji { display: block; } .v1-title { color: #fff; display: flex; align-items: center; gap: 0.5em; font-weight: 800; line-height: 112.5%; text-align: center; font-size: 1.25rem; white-space: nowrap; } .v1-features { display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(to left, transparent 0%, black 10%); mask-image: linear-gradient(to left, transparent 0%, black 10%); } .v1-tags { align-items: center; display: flex; justify-content: flex-start; gap: 1em; } .v1-tag { background-color: white; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.04); display: flex; font-size: 1em; font-weight: 500; line-height: 1.25; padding: 0.5em 0.75em 0.5em 0.5em; align-items: center; border-radius: 0.5em; white-space: nowrap; } .v1-more { background: none; box-shadow: none; color: white; white-space: nowrap; font-weight: 500; } @include tablet { .v1-banner { flex-wrap: nowrap; } .v1-title { font-size: 2em; } } .v1-main { padding: 1.5em; display: flex; justify-content: center; align-items: center; min-height: 100vh; > div { display: flex; flex-direction: column; gap: 2em; justify-content: center; align-items: center; flex-grow: 1; max-width: 24em; width: 100%; } .v1-content { background-color: #f9f9f9; font-size: 0.875em; margin: -1.5rem -1.5rem 1.5rem; padding: 1.5rem; color: #666; box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.1); ul { margin-left: 1.5em; margin-top: 0.5em; list-style: disc; } } form { background-color: #fff; padding: 1.5em; border-radius: 0.5em; width: 100%; overflow: hidden; } .button { background: radial-gradient( 219.67% 183.43% at 13.27% 123.96%, #050637 0%, #0033c6 16.24%, #00368b 34.3%, #5e07bf 53.58%, #c428ac 71.9%, #fe6567 86.15%, #fd8644 100% ); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1); border: none; font-weight: 500; display: flex; width: 100%; } } .v1-tsp { margin-top: 1em; font-size: 0.75em; opacity: 0.5; }