From aeef2c235684dd325c28e0dff2b40abc23b57013 Mon Sep 17 00:00:00 2001 From: Nate Wienert Date: Wed, 20 Sep 2023 09:44:25 -1000 Subject: [PATCH] fix: Fix visual issues in Spore (#7240) * feat: make meta theme-color adapt to new spore background colors * fix: make glow behind swap modal use a blur strategy rather than box shadow for a more squared glow * test: grainy bg * fix: make pool liquidity add input focus border same as swap * remove svg grain --- .../nfts/asset/__snapshots__/nft.test.ts.snap | 6 +- .../__snapshots__/collection.test.ts.snap | 8 +- .../tokens/__snapshots__/token.test.ts.snap | 8 +- public/index.html | 2 +- .../SwapCurrencyInputPanel.tsx | 4 +- .../InputStepCounter/InputStepCounter.tsx | 3 +- src/components/swap/styled.tsx | 40 +- src/index.tsx | 3 +- .../Landing/__snapshots__/index.test.tsx.snap | 6138 +++++++++-------- src/theme/components/ThemeToggle.tsx | 18 + 10 files changed, 3160 insertions(+), 3070 deletions(-) diff --git a/functions/nfts/asset/__snapshots__/nft.test.ts.snap b/functions/nfts/asset/__snapshots__/nft.test.ts.snap index 98dcde189b..a9253a3e5e 100644 --- a/functions/nfts/asset/__snapshots__/nft.test.ts.snap +++ b/functions/nfts/asset/__snapshots__/nft.test.ts.snap @@ -17,7 +17,7 @@ exports[`should inject metadata for valid assets 1`] = ` - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx index 1e0ab78e32..67c2e14af5 100644 --- a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx +++ b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx @@ -67,8 +67,8 @@ const CurrencySelect = styled(ButtonGray)<{ opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)}; color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)}; cursor: pointer; - height: unset; - border-radius: 16px; + height: 36px; + border-radius: 18px; outline: none; user-select: none; border: 1px solid ${({ selected, theme }) => (selected ? theme.surface3 : theme.accent1)}; diff --git a/src/components/InputStepCounter/InputStepCounter.tsx b/src/components/InputStepCounter/InputStepCounter.tsx index 3983162191..d2a5b4cd2d 100644 --- a/src/components/InputStepCounter/InputStepCounter.tsx +++ b/src/components/InputStepCounter/InputStepCounter.tsx @@ -34,7 +34,7 @@ const SmallButton = styled(ButtonGray)` ` const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>` - border-color: ${({ active, theme }) => active && theme.accent1}; + border-color: ${({ active, theme }) => active && theme.deprecated_stateOverlayPressed}; padding: 12px; animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accent1)} 0.8s linear; ` @@ -62,6 +62,7 @@ const InputTitle = styled(ThemedText.DeprecatedSmall)` const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>` color: ${({ theme, disabled }) => (disabled ? theme.neutral2 : theme.neutral1)} !important; + display: flex; ` interface StepCounterProps { diff --git a/src/components/swap/styled.tsx b/src/components/swap/styled.tsx index 4615567984..d8c1dcc7c0 100644 --- a/src/components/swap/styled.tsx +++ b/src/components/swap/styled.tsx @@ -22,25 +22,45 @@ export const PageWrapper = styled.div` ` // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility. -export const SwapWrapper = styled.main<{ isDark?: boolean }>` +const SwapWrapperOuter = styled.main<{ isDark?: boolean }>` position: relative; - background: ${({ theme }) => theme.surface1}; - border-radius: 24px; - border: 1px solid ${({ theme }) => theme.surface3}; - padding: 8px; - padding-top: 12px; - box-shadow: ${({ isDark }) => - `0px 0px 10px 0px rgba(252, 114, 255, ${isDark ? '0.08' : '0.04'}), 0px 40px 120px 0px rgba(252, 114, 255, ${ - isDark ? '0.18' : '0.12' - })`}; z-index: ${Z_INDEX.default}; + border: 1px solid ${({ theme }) => theme.surface3}; transition: transform 250ms ease; + border-radius: 24px; + + &:before { + content: ' '; + display: flex; + position: absolute; + inset: 0; + transform: scale(1.1); + filter: blur(50px); + background-color: rgba(252, 114, 255, 0.075); + z-index: -2; + } &:hover { border: 1px solid ${({ theme }) => theme.surface3}; } ` +export const SwapWrapper = (props: React.ComponentProps) => { + return ( + + {props.children} + + ) +} + +const SwapWrapperInner = styled.div` + border-radius: 24px; + background: ${({ theme }) => theme.surface1}; + z-index: -1; + padding: 8px; + padding-top: 12px; +` + export const UniswapPopoverContainer = styled.div` padding: 18px; color: ${({ theme }) => theme.neutral1}; diff --git a/src/index.tsx b/src/index.tsx index 2a44b73f1f..ead27ddc59 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client' import { QueryClient, QueryClientProvider } from 'react-query' import { Provider } from 'react-redux' import { BrowserRouter, HashRouter } from 'react-router-dom' -import { SystemThemeUpdater } from 'theme/components/ThemeToggle' +import { SystemThemeUpdater, ThemeColorMetaUpdater } from 'theme/components/ThemeToggle' import { isBrowserRouterEnabled } from 'utils/env' import Web3Provider from './components/Web3Provider' @@ -40,6 +40,7 @@ function Updaters() { + diff --git a/src/pages/Landing/__snapshots__/index.test.tsx.snap b/src/pages/Landing/__snapshots__/index.test.tsx.snap index fdf33ad9fe..7ceccd72bc 100644 --- a/src/pages/Landing/__snapshots__/index.test.tsx.snap +++ b/src/pages/Landing/__snapshots__/index.test.tsx.snap @@ -1,2607 +1,36 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`disable nft on landing page does not render nft information and card 1`] = ` -.c6 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.c14 { - box-sizing: border-box; - margin: 0; - min-width: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - text-align: center; - line-height: inherit; - -webkit-text-decoration: none; - text-decoration: none; - font-size: inherit; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - color: white; - background-color: primary; - border: 0; - border-radius: 4px; -} - -.c46 { - box-sizing: border-box; - margin: 0; - min-width: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - text-align: center; - line-height: inherit; - -webkit-text-decoration: none; - text-decoration: none; - font-size: inherit; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - color: white; - background-color: primary; - border: 0; - border-radius: 4px; - font-weight: 535; -} - .c7 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c8 { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c10 { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; -} - -.c12 { - color: #222222; -} - -.c25 { - color: #7D7D7D; -} - -.c98 { - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; - color: #FC72FF; - stroke: #FC72FF; - font-weight: 500; -} - -.c98:hover { - opacity: 0.6; -} - -.c98:active { - opacity: 0.4; -} - -.c96 { - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; - color: #FC72FF; - stroke: #FC72FF; - font-weight: 500; -} - -.c96:hover { - opacity: 0.6; -} - -.c96:active { - opacity: 0.4; -} - -.c89 { - height: 32px; - width: 32px; - fill: #98A1C0; - opacity: 1; -} - -.c90 { - height: 32px; - width: 32px; - fill: #98A1C0; - opacity: 1; -} - -.c91 { - height: 32px; - width: 32px; - fill: #98A1C0; - opacity: 1; -} - -.c83 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - width: 100%; - gap: 48px; - max-width: 1440px; -} - -.c84 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c85 { - display: none; -} - -.c100 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c86 { - width: 72px; - height: 72px; - display: none; -} - -.c87 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 20px; - margin: 20px 0 0 0; -} - -.c88 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c93 { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -.c94 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - gap: 12px; - width: 200px; - margin: 20px 0 0 0; -} - -.c95 { - font-size: 16px; - line-height: 20px; - font-weight: 535; -} - -.c99 { - font-size: 16px; - line-height: 20px; - color: #7D7D7D; -} - -.c97 { - font-size: 16px; - line-height: 20px; - color: #7D7D7D; -} - -.c92 { - font-size: 16px; - line-height: 20px; - margin: 1rem 0 0 0; - color: #CECECE; -} - -.c66 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: white url(swapCard.png); - background-size: auto 100%; - background-position: right; - background-repeat: no-repeat; - background-origin: border-box; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-text-decoration: none; - text-decoration: none; - color: #222222; - padding: 24px; - height: 212px; - border-radius: 24px; - border: 1px solid transparent; - -webkit-transition: 250ms ease border; - transition: 250ms ease border; -} - -.c66:hover { - border: 1px solid #CECECE; -} - -.c72 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: #F9F9F9 url(undefined); - background-size: auto 100%; - background-position: right; - background-repeat: no-repeat; - background-origin: border-box; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-text-decoration: none; - text-decoration: none; - color: #222222; - padding: 24px; - height: 212px; - border-radius: 24px; - border: 1px solid #22222212; - -webkit-transition: 250ms ease border; - transition: 250ms ease border; -} - -.c72:hover { - border: 1px solid #CECECE; -} - -.c67 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c68 { - font-size: 20px; - line-height: 28px; - font-weight: 535; -} - -.c69 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - font-size: 16px; - line-height: 20px; - color: #222222; - padding: 0 40px 0 0; - max-width: 480px; -} - -.c73 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - font-size: 16px; - line-height: 20px; - color: #7D7D7D; - padding: 0 40px 0 0; - max-width: 480px; -} - -.c70 { - color: #FC72FF; - font-weight: 535; - margin: 24px 0 0; - cursor: pointer; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; -} - -.c70:hover { - opacity: 0.6; -} - -.c74 { - min-width: 20px; - min-height: 20px; - max-height: 48px; - max-width: 48px; -} - -.c49 { - background-color: transparent; - bottom: 0; - border-radius: inherit; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - -webkit-transition: 150ms ease background-color; - transition: 150ms ease background-color; - width: 100%; + box-sizing: border-box; + margin: 0; + min-width: 0; } .c15 { - padding: 16px; - width: 100%; - line-height: 24px; - font-weight: 535; + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; text-align: center; - border-radius: 16px; - outline: none; - border: 1px solid transparent; - color: #222222; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - position: relative; - z-index: 1; - will-change: transform; - -webkit-transition: -webkit-transform 450ms ease; - -webkit-transition: transform 450ms ease; - transition: transform 450ms ease; - -webkit-transform: perspective(1px) translateZ(0); - -ms-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); -} - -.c15:disabled { - opacity: 50%; - cursor: auto; - pointer-events: none; -} - -.c15 > * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c15 > a { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c80 { - padding: 16px; - width: 200px; - line-height: 24px; - font-weight: 535; - text-align: center; - border-radius: 16px; - outline: none; - border: 1px solid transparent; - color: #222222; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - position: relative; - z-index: 1; - will-change: transform; - -webkit-transition: -webkit-transform 450ms ease; - -webkit-transition: transform 450ms ease; - transition: transform 450ms ease; - -webkit-transform: perspective(1px) translateZ(0); - -ms-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); -} - -.c80:disabled { - opacity: 50%; - cursor: auto; - pointer-events: none; -} - -.c80 > * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c80 > a { + line-height: inherit; -webkit-text-decoration: none; text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: primary; + border: 0; + border-radius: 4px; } .c47 { - background-color: #FFEFFF; - color: #FC72FF; - font-size: 20px; - font-weight: 535; -} - -.c47:focus { - box-shadow: 0 0 0 1pt #FFEFFF; - background-color: #FFEFFF; -} - -.c47:hover { - background-color: #FFEFFF; -} - -.c47:active { - box-shadow: 0 0 0 1pt #FFEFFF; - background-color: #FFEFFF; -} - -.c47:hover .c48 { - background-color: #98A1C014; -} - -.c47:active .c48 { - background-color: #B8C0DC3d; -} - -.c47:disabled { - opacity: 0.4; -} - -.c47:disabled:hover { - cursor: auto; - background-color: transparent; - box-shadow: none; - border: 1px solid transparent; - outline: none; -} - -.c29 { - background-color: #FFFFFF; - color: #7D7D7D; - border: 1px solid #22222212; - font-size: 16px; - font-weight: 535; -} - -.c29:hover { - background-color: #ececec; -} - -.c29:active { - background-color: #e0e0e0; -} - -.c81 { - background-color: transparent; - color: #FC72FF; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c81:focus { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c81:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c81:active { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c81:disabled { - opacity: 50%; - cursor: auto; -} - -.c16 { - padding: 0; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - background: none; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c16:focus { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c16:hover { - opacity: 0.9; -} - -.c16:active { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c16:disabled { - opacity: 50%; - cursor: auto; -} - -.c75 { - height: 340px; - width: 100%; - border-radius: 32px; - max-width: 1440px; - margin: 80px 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 32px 48px; - box-shadow: 0px 10px 24px rgba(51,53,72,0.04); - background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); -} - -.c76 { - color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c77 { - font-weight: 535; - font-size: 28px; - line-height: 36px; -} - -.c78 { - margin: 10px 10px 0 0; - font-weight: 535; - font-size: 16px; - line-height: 20px; -} - -.c79 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; -} - -.c79:hover { - opacity: 0.6; -} - -.c82 { - color: white; - border: 1px solid white; -} - -.c42 { - display: grid; - grid-auto-rows: auto; - grid-row-gap: 4px; -} - -.c39 { - -webkit-filter: none; - filter: none; - opacity: 1; - -webkit-transition: opacity 250ms ease-in-out; - transition: opacity 250ms ease-in-out; -} - -.c13 { - display: inline-block; - height: inherit; -} - -.c34 { - opacity: 0; - -webkit-transition: opacity 250ms ease-in; - transition: opacity 250ms ease-in; - width: 24px; - height: 24px; - border-radius: 50%; -} - -.c33 { - width: 24px; - height: 24px; - background: #22222212; - -webkit-transition: background-color 250ms ease-in; - transition: background-color 250ms ease-in; - box-shadow: 0 0 1px white; - border-radius: 50%; -} - -.c32 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c27 { - color: #222222; - pointer-events: auto; - width: 0; - position: relative; - font-weight: 485; - outline: none; - border: none; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - background-color: transparent; - font-size: 28px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 0px; - -webkit-appearance: textfield; - text-align: right; -} - -.c27::-webkit-search-decoration { - -webkit-appearance: none; -} - -.c27 [type='number'] { - -moz-appearance: textfield; -} - -.c27::-webkit-outer-spin-button, -.c27::-webkit-inner-spin-button { - -webkit-appearance: none; -} - -.c27::-webkit-input-placeholder { - color: #CECECE; -} - -.c27::-moz-placeholder { - color: #CECECE; -} - -.c27:-ms-input-placeholder { - color: #CECECE; -} - -.c27::placeholder { - color: #CECECE; -} - -.c23 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: column nowrap; - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; - position: relative; - border-radius: 20px; - z-index: 1; - width: initial; - -webkit-transition: height 1s ease; - transition: height 1s ease; - will-change: height; -} - -.c24 { - min-height: 44px; - border-radius: 20px; - width: initial; -} - -.c30 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #FFFFFF; - opacity: 1; - color: #222222; - cursor: pointer; - height: unset; - border-radius: 16px; - outline: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: 1px solid #22222212; - font-size: 24px; - font-weight: 485; - width: initial; - padding: 4px 8px 4px 4px; - gap: 8px; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-left: 12px; - box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); - visibility: visible; - -webkit-animation: none; - animation: none; -} - -.c30:hover, -.c30:active { - background-color: #F9F9F9; -} - -.c30:before { - background-size: 100%; - border-radius: inherit; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: ''; -} - -.c30:hover:before { - background-color: #98A1C014; -} - -.c30:active:before { - background-color: #B8C0DC3d; -} - -.c44 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #FC72FF; - opacity: 1; - color: #FFFFFF; - cursor: pointer; - height: unset; - border-radius: 16px; - outline: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: 1px solid #FC72FF; - font-size: 24px; - font-weight: 485; - width: initial; - padding: 6px 6px 6px 8px; - gap: 8px; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-left: 12px; - box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); - visibility: visible; - -webkit-animation: none; - animation: none; -} - -.c44:hover, -.c44:active { - background-color: #FC72FF; -} - -.c44:before { - background-size: 100%; - border-radius: inherit; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: ''; -} - -.c44:hover:before { - background-color: #98A1C014; -} - -.c44:active:before { - background-color: #B8C0DC3d; -} - -.c26 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row nowrap; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c37 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row nowrap; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #7D7D7D; - font-size: 0.75rem; - line-height: 1rem; -} - -.c37 span:hover { - cursor: pointer; - color: #4a4a4a; -} - -.c38 { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - min-height: 24px; - padding: 8px 0px 0px 0px; -} - -.c31 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - width: 100%; -} - -.c36 { - margin: 0 0.25rem 0 0.35rem; - height: 35%; - margin-left: 8px; -} - -.c36 path { - stroke: #222222; - stroke-width: 2px; -} - -.c45 { - margin: 0 0.25rem 0 0.35rem; - height: 35%; - margin-left: 8px; -} - -.c45 path { - stroke: #FFFFFF; - stroke-width: 2px; -} - -.c35 { - margin: 0 0.25rem 0 0.25rem; - font-size: 20px; - font-weight: 535; -} - -.c28 { - -webkit-filter: none; - filter: none; - opacity: 1; - -webkit-transition: opacity 250ms ease-in-out; - transition: opacity 250ms ease-in-out; - text-align: left; - font-size: 36px; - font-weight: 485; - max-height: 44px; -} - -.c3 { - padding: 68px 8px 0px; - max-width: 480px; - width: 100%; -} - -.c4 { - position: relative; - background: #FFFFFF; - border-radius: 24px; - border: 1px solid #22222212; - padding: 8px; - padding-top: 12px; - box-shadow: 0px 0px 10px 0px rgba(252,114,255,0.04),0px 40px 120px 0px rgba(252,114,255,0.12); - z-index: 1; - -webkit-transition: -webkit-transform 250ms ease; - -webkit-transition: transform 250ms ease; - transition: transform 250ms ease; -} - -.c4:hover { - border: 1px solid #22222212; -} - -.c40 { - border-radius: 12px; - height: 40px; - width: 40px; - position: relative; - margin-top: -18px; - margin-bottom: -18px; - margin-left: auto; - margin-right: auto; - background-color: #F9F9F9; - border: 4px solid; - border-color: #FFFFFF; - z-index: 2; -} - -.c40:hover { - cursor: pointer; - opacity: 0.8; -} - -.c21 { - height: 24px; - width: 24px; -} - -.c21 > * { - fill: #7D7D7D; -} - -.c19 { - border: none; - background-color: transparent; - margin: 0; - padding: 0; - cursor: pointer; - outline: none; -} - -.c19:not([disabled]):hover { - opacity: 0.7; -} - -.c20 { - padding: 6px 12px; - border-radius: 16px; -} - -.c18 { - position: relative; -} - -.c17 { - color: #7D7D7D; - gap: 4px; - font-weight: 485; -} - -.c17:focus { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c17:active { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c9 { - margin-bottom: 10px; - color: #7D7D7D; -} - -.c11 { - padding: 0 12px; - gap: 16px; -} - -.c41 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - height: 100%; -} - -.c22 { - background-color: #F9F9F9; - border-radius: 16px; - color: #7D7D7D; - font-size: 14px; - font-weight: 500; - height: 120px; - line-height: 20px; - padding: 16px; - position: relative; -} - -.c22:before { - box-sizing: border-box; - background-size: 100%; - border-radius: inherit; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - content: ''; - border: 1px solid #F9F9F9; -} - -.c22:hover:before { - border-color: #98A1C014; -} - -.c22:focus-within:before { - border-color: #B8C0DC3d; -} - -.c43 { - border-bottom: 1px solid #FFFFFF; -} - -.c0 { - position: absolute; - top: 0; - padding: 72px 0px 0px 0px; - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-scroll-behavior: smooth; - -moz-scroll-behavior: smooth; - -ms-scroll-behavior: smooth; - scroll-behavior: smooth; - overflow-x: hidden; -} - -.c50 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - top: 0; - bottom: 0; - width: 100%; - min-height: 550px; - background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%); - z-index: 990; - pointer-events: none; - height: calc(100vh - 48px); -} - -.c51 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - top: 0; - bottom: 0; - width: 100%; - overflow-y: hidden; - height: calc(100vh - 48px); -} - -.c52 { - position: absolute; - top: 68px; - bottom: 0; - background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%); - -webkit-filter: blur(72px); - filter: blur(72px); - border-radius: 24px; - max-width: 480px; - width: 100%; - height: 100%; -} - -.c53 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - width: 100%; - padding: 0 0 40px; - max-width: min(720px,90%); - min-height: 535px; - z-index: 990; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; - height: calc(100vh - 120px); - pointer-events: none; -} - -.c53 * { - pointer-events: auto; -} - -.c54 { - color: transparent; - font-size: 36px; - line-height: 44px; - font-weight: 535; - text-align: center; - margin: 0 0 24px; - background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%); - background-clip: text; - -webkit-background-clip: text; -} - -.c56 { - color: #7D7D7D; - font-size: 16px; - line-height: 24px; - font-weight: 535; - text-align: center; - max-width: 500px; - margin: 0 0 32px; -} - -.c55 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c58 { - padding: 16px 0px; - border-radius: 24px; -} - -.c59 { - background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); - border: none; - color: #FFFFFF; - -webkit-transition: all 250ms ease; - transition: all 250ms ease; -} - -.c59:hover { - box-shadow: 0px 0px 16px 0px #ff00c7; -} - -.c60 { - margin: 0px; - font-size: 16px; - font-weight: 535; - white-space: nowrap; -} - -.c57 { - max-width: 300px; - width: 100%; - pointer-events: auto; -} - -.c61 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #CECECE; - cursor: pointer; - font-size: 20px; - font-weight: 535; - margin: 36px 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - visibility: hidden; - pointer-events: auto; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; -} - -.c61:hover { - opacity: 0.6; -} - -.c62 { - margin-left: 14px; - size: 20px; -} - -.c64 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0 24px 5rem; - width: 100%; - background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); -} - -.c65 { - display: grid; - gap: 12px; - width: 100%; - padding: 24px 0 0; - max-width: 1440px; - -webkit-scroll-margin: 72px 0 0; - -moz-scroll-margin: 72px 0 0; - -ms-scroll-margin: 72px 0 0; - scroll-margin: 72px 0 0; - grid-template-columns: 1fr; -} - -.c71 { - display: grid; - gap: 12px; - width: 100%; - padding: 24px 0 0; - max-width: 1440px; - -webkit-scroll-margin: 72px 0 0; - -moz-scroll-margin: 72px 0 0; - -ms-scroll-margin: 72px 0 0; - scroll-margin: 72px 0 0; - grid-template-columns: 1fr; -} - -.c1 { - height: calc(100vh - 48px); - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - z-index: 1; -} - -.c5 * { - pointer-events: none; -} - -.c5:hover { - -webkit-transform: translateY(-4px); - -ms-transform: translateY(-4px); - transform: translateY(-4px); - -webkit-transition: -webkit-transform 250ms ease; - -webkit-transition: transform 250ms ease; - transition: transform 250ms ease; -} - -.c5:hover { - border: 1px solid #FC72FF; -} - -.c2 { - -webkit-text-decoration: none; - text-decoration: none; - max-width: 480px; - width: 100%; -} - -.c63 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - gap: 8px; - margin-top: 24px; - color: #7D7D7D; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - font-weight: 535; - text-align: center; -} - -.c63:hover { - color: #CECECE; -} - -@media screen and (min-width:1024px) { - .c83 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - } -} - -@media screen and (min-width:1024px) { - .c85 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } -} - -@media screen and (min-width:1024px) { - .c100 { - display: none; - } -} - -@media screen and (min-width:1024px) { - .c86 { - display: block; - } -} - -@media screen and (min-width:1280px) { - .c93 { - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 24px; - } -} - -@media screen and (min-width:1280px) { - .c94 { - margin: 0; - } -} - -@media screen and (min-width:640px) { - .c66 { - height: 360px; - } -} - -@media screen and (min-width:1280px) { - .c66 { - padding: 32px; - } -} - -@media screen and (min-width:640px) { - .c72 { - height: 260px; - } -} - -@media screen and (min-width:1280px) { - .c72 { - padding: 32px; - } -} - -@media screen and (min-width:1024px) { - .c68 { - font-size: 28px; - line-height: 36px; - } -} - -@media screen and (min-width:1280px) { - .c69 { - font-size: 20px; - line-height: 28px; - max-width: 480px; - } -} - -@media screen and (min-width:1280px) { - .c73 { - font-size: 20px; - line-height: 28px; - max-width: 480px; - } -} - -@media screen and (min-width:1024px) { - .c75 { - height: 140px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } -} - -@media screen and (min-width:1280px) { - .c77 { - font-size: 28px; - line-height: 36px; - } -} - -@media screen and (min-width:1280px) { - .c78 { - font-size: 20px; - line-height: 28px; - } -} - -@media screen and (min-width:1024px) { - .c79 { - width: auto; - } -} - -@media only screen and (max-width:768px) { - .c3 { - padding-top: 48px; - } -} - -@media only screen and (max-width:640px) { - .c3 { - padding-top: 20px; - } -} - -@media screen and (min-width:768px) { - .c50 { - height: 100vh; - } -} - -@media screen and (min-width:768px) { - .c51 { - height: 100vh; - } -} - -@media screen and (min-width:640px) { - .c54 { - font-size: 48px; - line-height: 56px; - } -} - -@media screen and (min-width:768px) { - .c54 { - font-size: 64px; - line-height: 72px; - } -} - -@media screen and (min-width:768px) { - .c56 { - font-size: 20px; - line-height: 28px; - } -} - -@media screen and (min-width:640px) { - .c60 { - font-size: 20px; - } -} - -@media screen and (min-width:640px) { - .c61 { - visibility: visible; - } -} - -@media screen and (min-width:768px) { - .c64 { - padding: 0 96px 5rem; - } -} - -@media screen and (min-width:640px) { - .c65 { - grid-template-columns: 1fr; - gap: 32px; - } -} - -@media screen and (min-width:1024px) { - .c65 { - grid-template-columns: 1fr; - gap: 32px; - } -} - -@media screen and (min-width:640px) { - .c71 { - grid-template-columns: 1fr; - gap: 32px; - } -} - -@media screen and (min-width:1024px) { - .c71 { - grid-template-columns: 1fr 1fr 1fr; - gap: 32px; - } -} - -
-
-
- -
-
-
-
-
- Swap -
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
- You pay -
-
-
- -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
- You receive -
-
-
- -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-

- Trade crypto with confidence -

-
-
- Buy, sell, and explore tokens -
-
- - -

- Get started -

- - -
- Learn more - - - - - -
- - - - - Download the Uniswap Wallet for iOS - -
-
-
- -
-
- Swap tokens -
-
-
- Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. -
- Trade Tokens -
-
- -
-
- -
-
- Buy crypto -
- - - - -
-
- Buy crypto with your credit card or bank account at the best rates. -
- Buy now -
-
- - -
-
- Earn -
- Analytics -
-
- Provide liquidity to pools on Uniswap and earn fees on swaps. -
- Provide liquidity -
-
- - -
-
- Build dApps -
- - - - -
-
- Build apps and tools on the largest DeFi protocol on Ethereum. -
- Developer docs -
-
- -
-
-
-
- Powered by the Uniswap Protocol -
-
- The leading decentralized crypto trading protocol, governed by a global community. -
-
-
- - Learn more - -
-
-
-
- Uniswap Logo -
- - - discord.svg - - - - - twitter-safe.svg - - - - - github.svg - - -
- - © - 2023 - Uniswap Labs - -
-
-
- - App - - - Swap - - - Tokens - - - Pools - -
-
- - Protocol - - - Community - - - Governance - - - Developers - -
-
- - Company - - - Careers - - - Blog - -
-
- - Get Help - - - Contact Us - - - Help Center - -
-
-
- Uniswap Logo -
- - - discord.svg - - - - - twitter-safe.svg - - - - - github.svg - - -
- - © - 2023 - Uniswap Labs - -
-
-
-
-
-`; - -exports[`disable nft on landing page renders nft information and card 1`] = ` -.c6 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.c14 { - box-sizing: border-box; - margin: 0; - min-width: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - text-align: center; - line-height: inherit; - -webkit-text-decoration: none; - text-decoration: none; - font-size: inherit; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - color: white; - background-color: primary; - border: 0; - border-radius: 4px; -} - -.c46 { box-sizing: border-box; margin: 0; min-width: 0; @@ -2625,7 +54,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` font-weight: 535; } -.c7 { +.c8 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -2642,24 +71,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: flex-start; } -.c8 { +.c9 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } -.c10 { +.c11 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } -.c12 { +.c13 { color: #222222; } -.c25 { +.c26 { color: #7D7D7D; } @@ -2826,7 +255,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` color: #CECECE; } -.c66 { +.c67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2854,39 +283,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c66:hover { - border: 1px solid #CECECE; -} - -.c71 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: white url(nftCard.png); - background-size: auto 100%; - background-position: right; - background-repeat: no-repeat; - background-origin: border-box; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-text-decoration: none; - text-decoration: none; - color: #222222; - padding: 24px; - height: 212px; - border-radius: 24px; - border: 1px solid transparent; - -webkit-transition: 250ms ease border; - transition: 250ms ease border; -} - -.c71:hover { +.c67:hover { border: 1px solid #CECECE; } @@ -2922,7 +319,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border: 1px solid #CECECE; } -.c67 { +.c68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2937,13 +334,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: space-between; } -.c68 { +.c69 { font-size: 20px; line-height: 28px; font-weight: 535; } -.c69 { +.c70 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2973,7 +370,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 480px; } -.c70 { +.c71 { color: #FC72FF; font-weight: 535; margin: 24px 0 0; @@ -2982,7 +379,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c70:hover { +.c71:hover { opacity: 0.6; } @@ -2993,7 +390,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 48px; } -.c49 { +.c50 { background-color: transparent; bottom: 0; border-radius: inherit; @@ -3007,7 +404,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` width: 100%; } -.c15 { +.c16 { padding: 16px; width: 100%; line-height: 24px; @@ -3046,20 +443,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transform: perspective(1px) translateZ(0); } -.c15:disabled { +.c16:disabled { opacity: 50%; cursor: auto; pointer-events: none; } -.c15 > * { +.c16 > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.c15 > a { +.c16 > a { -webkit-text-decoration: none; text-decoration: none; } @@ -3121,40 +518,40 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-decoration: none; } -.c47 { +.c48 { background-color: #FFEFFF; color: #FC72FF; font-size: 20px; font-weight: 535; } -.c47:focus { +.c48:focus { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c47:hover { +.c48:hover { background-color: #FFEFFF; } -.c47:active { +.c48:active { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c47:hover .c48 { +.c48:hover .c49 { background-color: #98A1C014; } -.c47:active .c48 { +.c48:active .c49 { background-color: #B8C0DC3d; } -.c47:disabled { +.c48:disabled { opacity: 0.4; } -.c47:disabled:hover { +.c48:disabled:hover { cursor: auto; background-color: transparent; box-shadow: none; @@ -3162,7 +559,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` outline: none; } -.c29 { +.c30 { background-color: #FFFFFF; color: #7D7D7D; border: 1px solid #22222212; @@ -3170,11 +567,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` font-weight: 535; } -.c29:hover { +.c30:hover { background-color: #ececec; } -.c29:active { +.c30:active { background-color: #e0e0e0; } @@ -3215,7 +612,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` cursor: auto; } -.c16 { +.c17 { padding: 0; width: -webkit-fit-content; width: -moz-fit-content; @@ -3225,21 +622,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-decoration: none; } -.c16:focus { +.c17:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c16:hover { +.c17:hover { opacity: 0.9; } -.c16:active { +.c17:active { -webkit-text-decoration: underline; text-decoration: underline; } -.c16:disabled { +.c17:disabled { opacity: 50%; cursor: auto; } @@ -3320,13 +717,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border: 1px solid white; } -.c42 { +.c43 { display: grid; grid-auto-rows: auto; grid-row-gap: 4px; } -.c39 { +.c40 { -webkit-filter: none; filter: none; opacity: 1; @@ -3334,12 +731,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: opacity 250ms ease-in-out; } -.c13 { +.c14 { display: inline-block; height: inherit; } -.c34 { +.c35 { opacity: 0; -webkit-transition: opacity 250ms ease-in; transition: opacity 250ms ease-in; @@ -3348,7 +745,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border-radius: 50%; } -.c33 { +.c34 { width: 24px; height: 24px; background: #22222212; @@ -3358,7 +755,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border-radius: 50%; } -.c32 { +.c33 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -3366,7 +763,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` display: flex; } -.c27 { +.c28 { color: #222222; pointer-events: auto; width: 0; @@ -3387,36 +784,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-align: right; } -.c27::-webkit-search-decoration { +.c28::-webkit-search-decoration { -webkit-appearance: none; } -.c27 [type='number'] { +.c28 [type='number'] { -moz-appearance: textfield; } -.c27::-webkit-outer-spin-button, -.c27::-webkit-inner-spin-button { +.c28::-webkit-outer-spin-button, +.c28::-webkit-inner-spin-button { -webkit-appearance: none; } -.c27::-webkit-input-placeholder { +.c28::-webkit-input-placeholder { color: #CECECE; } -.c27::-moz-placeholder { +.c28::-moz-placeholder { color: #CECECE; } -.c27:-ms-input-placeholder { +.c28:-ms-input-placeholder { color: #CECECE; } -.c27::placeholder { +.c28::placeholder { color: #CECECE; } -.c23 { +.c24 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3433,13 +830,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` will-change: height; } -.c24 { +.c25 { min-height: 44px; border-radius: 20px; width: initial; } -.c30 { +.c31 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3448,8 +845,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` opacity: 1; color: #222222; cursor: pointer; - height: unset; - border-radius: 16px; + height: 36px; + border-radius: 18px; outline: none; -webkit-user-select: none; -moz-user-select: none; @@ -3472,12 +869,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` animation: none; } -.c30:hover, -.c30:active { +.c31:hover, +.c31:active { background-color: #F9F9F9; } -.c30:before { +.c31:before { background-size: 100%; border-radius: inherit; position: absolute; @@ -3488,15 +885,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` content: ''; } -.c30:hover:before { +.c31:hover:before { background-color: #98A1C014; } -.c30:active:before { +.c31:active:before { background-color: #B8C0DC3d; } -.c44 { +.c45 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3505,8 +902,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` opacity: 1; color: #FFFFFF; cursor: pointer; - height: unset; - border-radius: 16px; + height: 36px; + border-radius: 18px; outline: none; -webkit-user-select: none; -moz-user-select: none; @@ -3529,12 +926,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` animation: none; } -.c44:hover, -.c44:active { +.c45:hover, +.c45:active { background-color: #FC72FF; } -.c44:before { +.c45:before { background-size: 100%; border-radius: inherit; position: absolute; @@ -3545,15 +942,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` content: ''; } -.c44:hover:before { +.c45:hover:before { background-color: #98A1C014; } -.c44:active:before { +.c45:active:before { background-color: #B8C0DC3d; } -.c26 { +.c27 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3571,7 +968,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: space-between; } -.c37 { +.c38 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3588,12 +985,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` line-height: 1rem; } -.c37 span:hover { +.c38 span:hover { cursor: pointer; color: #4a4a4a; } -.c38 { +.c39 { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; @@ -3602,7 +999,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` padding: 8px 0px 0px 0px; } -.c31 { +.c32 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3618,35 +1015,35 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` width: 100%; } -.c36 { +.c37 { margin: 0 0.25rem 0 0.35rem; height: 35%; margin-left: 8px; } -.c36 path { +.c37 path { stroke: #222222; stroke-width: 2px; } -.c45 { +.c46 { margin: 0 0.25rem 0 0.35rem; height: 35%; margin-left: 8px; } -.c45 path { +.c46 path { stroke: #FFFFFF; stroke-width: 2px; } -.c35 { +.c36 { margin: 0 0.25rem 0 0.25rem; font-size: 20px; font-weight: 535; } -.c28 { +.c29 { -webkit-filter: none; filter: none; opacity: 1; @@ -3666,23 +1063,44 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` .c4 { position: relative; - background: #FFFFFF; - border-radius: 24px; - border: 1px solid #22222212; - padding: 8px; - padding-top: 12px; - box-shadow: 0px 0px 10px 0px rgba(252,114,255,0.04),0px 40px 120px 0px rgba(252,114,255,0.12); z-index: 1; + border: 1px solid #22222212; -webkit-transition: -webkit-transform 250ms ease; -webkit-transition: transform 250ms ease; transition: transform 250ms ease; + border-radius: 24px; +} + +.c4:before { + content: ' '; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: absolute; + inset: 0; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + -webkit-filter: blur(50px); + filter: blur(50px); + background-color: rgba(252,114,255,0.075); + z-index: -2; } .c4:hover { border: 1px solid #22222212; } -.c40 { +.c6 { + border-radius: 24px; + background: #FFFFFF; + z-index: -1; + padding: 8px; + padding-top: 12px; +} + +.c41 { border-radius: 12px; height: 40px; width: 40px; @@ -3697,21 +1115,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` z-index: 2; } -.c40:hover { +.c41:hover { cursor: pointer; opacity: 0.8; } -.c21 { +.c22 { height: 24px; width: 24px; } -.c21 > * { +.c22 > * { fill: #7D7D7D; } -.c19 { +.c20 { border: none; background-color: transparent; margin: 0; @@ -3720,46 +1138,46 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` outline: none; } -.c19:not([disabled]):hover { +.c20:not([disabled]):hover { opacity: 0.7; } -.c20 { +.c21 { padding: 6px 12px; border-radius: 16px; } -.c18 { +.c19 { position: relative; } -.c17 { +.c18 { color: #7D7D7D; gap: 4px; font-weight: 485; } -.c17:focus { +.c18:focus { -webkit-text-decoration: none; text-decoration: none; } -.c17:active { +.c18:active { -webkit-text-decoration: none; text-decoration: none; } -.c9 { +.c10 { margin-bottom: 10px; color: #7D7D7D; } -.c11 { +.c12 { padding: 0 12px; gap: 16px; } -.c41 { +.c42 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3776,7 +1194,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: 100%; } -.c22 { +.c23 { background-color: #F9F9F9; border-radius: 16px; color: #7D7D7D; @@ -3788,7 +1206,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` position: relative; } -.c22:before { +.c23:before { box-sizing: border-box; background-size: 100%; border-radius: inherit; @@ -3802,15 +1220,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border: 1px solid #F9F9F9; } -.c22:hover:before { +.c23:hover:before { border-color: #98A1C014; } -.c22:focus-within:before { +.c23:focus-within:before { border-color: #B8C0DC3d; } -.c43 { +.c44 { border-bottom: 1px solid #FFFFFF; } @@ -3837,7 +1255,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` overflow-x: hidden; } -.c50 { +.c51 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -3861,7 +1279,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: calc(100vh - 48px); } -.c51 { +.c52 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -3882,7 +1300,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: calc(100vh - 48px); } -.c52 { +.c53 { position: absolute; top: 68px; bottom: 0; @@ -3895,7 +1313,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: 100%; } -.c53 { +.c54 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -3923,11 +1341,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` pointer-events: none; } -.c53 * { +.c54 * { pointer-events: auto; } -.c54 { +.c55 { color: transparent; font-size: 36px; line-height: 44px; @@ -3939,7 +1357,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` -webkit-background-clip: text; } -.c56 { +.c57 { color: #7D7D7D; font-size: 16px; line-height: 24px; @@ -3949,7 +1367,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 0 0 32px; } -.c55 { +.c56 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3960,12 +1378,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: center; } -.c58 { +.c59 { padding: 16px 0px; border-radius: 24px; } -.c59 { +.c60 { background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); border: none; color: #FFFFFF; @@ -3973,24 +1391,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: all 250ms ease; } -.c59:hover { +.c60:hover { box-shadow: 0px 0px 16px 0px #ff00c7; } -.c60 { +.c61 { margin: 0px; font-size: 16px; font-weight: 535; white-space: nowrap; } -.c57 { +.c58 { max-width: 300px; width: 100%; pointer-events: auto; } -.c61 { +.c62 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4010,16 +1428,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c61:hover { +.c62:hover { opacity: 0.6; } -.c62 { +.c63 { margin-left: 14px; size: 20px; } -.c64 { +.c65 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4036,7 +1454,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); } -.c65 { +.c66 { display: grid; gap: 12px; width: 100%; @@ -4103,7 +1521,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` width: 100%; } -.c63 { +.c64 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -4119,7 +1537,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-align: center; } -.c63:hover { +.c64:hover { color: #CECECE; } @@ -4170,25 +1588,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:640px) { - .c66 { + .c67 { height: 360px; } } @media screen and (min-width:1280px) { - .c66 { - padding: 32px; - } -} - -@media screen and (min-width:640px) { - .c71 { - height: 360px; - } -} - -@media screen and (min-width:1280px) { - .c71 { + .c67 { padding: 32px; } } @@ -4206,14 +1612,14 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c68 { + .c69 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c69 { + .c70 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -4269,67 +1675,67 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } } -@media screen and (min-width:768px) { - .c50 { - height: 100vh; - } -} - @media screen and (min-width:768px) { .c51 { height: 100vh; } } +@media screen and (min-width:768px) { + .c52 { + height: 100vh; + } +} + @media screen and (min-width:640px) { - .c54 { + .c55 { font-size: 48px; line-height: 56px; } } @media screen and (min-width:768px) { - .c54 { + .c55 { font-size: 64px; line-height: 72px; } } @media screen and (min-width:768px) { - .c56 { + .c57 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:640px) { - .c60 { + .c61 { font-size: 20px; } } @media screen and (min-width:640px) { - .c61 { + .c62 { visibility: visible; } } @media screen and (min-width:768px) { - .c64 { + .c65 { padding: 0 96px 5rem; } } @media screen and (min-width:640px) { - .c65 { - grid-template-columns: 1fr 1fr; + .c66 { + grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c65 { - grid-template-columns: 1fr 1fr; + .c66 { + grid-template-columns: 1fr; gap: 32px; } } @@ -4368,214 +1774,86 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` id="swap-page" >
- Swap +
+ Swap +
+
+
+ +
+
-
+
-
- -
-
-
-
-
- You pay -
-
- -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
- You receive + You pay
dropdown.svg @@ -4625,13 +1917,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
@@ -4639,17 +1931,135 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
-
-
- + class="c42" + color="#222222" + data-testid="swap-currency-button" + > + + + + +
+
+
+
+
+
+
+
+
+ You receive +
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
@@ -4657,52 +2067,52 @@ exports[`disable nft on landing page renders nft information and card 1`] = `

- Trade crypto and NFTs with confidence -

-
+ Trade crypto with confidence + +
- Buy, sell, and explore tokens and NFTs + Buy, sell, and explore tokens

Get started

Learn more
Swap tokens
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
Trade Tokens
- -
-
- Trade NFTs -
-
-
- Buy and sell NFTs across marketplaces to find more listings at better prices. -
- Explore NFTs -
-
-
Buy crypto
@@ -4852,7 +2236,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` > Buy crypto with your credit card or bank account at the best rates.
Buy now @@ -4864,10 +2248,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` href="/pools" >
Earn
@@ -4883,7 +2267,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` > Provide liquidity to pools on Uniswap and earn fees on swaps.
Provide liquidity @@ -4897,10 +2281,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` target="_blank" >
Build dApps
@@ -4932,7 +2316,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` > Build apps and tools on the largest DeFi protocol on Ethereum.
Developer docs @@ -5056,12 +2440,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` > Tokens - - NFTs -
`; + +exports[`disable nft on landing page renders nft information and card 1`] = ` +.c7 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c15 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: primary; + border: 0; + border-radius: 4px; +} + +.c47 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: primary; + border: 0; + border-radius: 4px; + font-weight: 535; +} + +.c8 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c9 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c11 { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + +.c13 { + color: #222222; +} + +.c26 { + color: #7D7D7D; +} + +.c100 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c100:hover { + opacity: 0.6; +} + +.c100:active { + opacity: 0.4; +} + +.c98 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c98:hover { + opacity: 0.6; +} + +.c98:active { + opacity: 0.4; +} + +.c91 { + height: 32px; + width: 32px; + fill: #98A1C0; + opacity: 1; +} + +.c92 { + height: 32px; + width: 32px; + fill: #98A1C0; + opacity: 1; +} + +.c93 { + height: 32px; + width: 32px; + fill: #98A1C0; + opacity: 1; +} + +.c85 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + gap: 48px; + max-width: 1440px; +} + +.c86 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c87 { + display: none; +} + +.c102 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c88 { + width: 72px; + height: 72px; + display: none; +} + +.c89 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; + margin: 20px 0 0 0; +} + +.c90 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c95 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.c96 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 12px; + width: 200px; + margin: 20px 0 0 0; +} + +.c97 { + font-size: 16px; + line-height: 20px; + font-weight: 535; +} + +.c101 { + font-size: 16px; + line-height: 20px; + color: #7D7D7D; +} + +.c99 { + font-size: 16px; + line-height: 20px; + color: #7D7D7D; +} + +.c94 { + font-size: 16px; + line-height: 20px; + margin: 1rem 0 0 0; + color: #CECECE; +} + +.c67 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: white url(swapCard.png); + background-size: auto 100%; + background-position: right; + background-repeat: no-repeat; + background-origin: border-box; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-text-decoration: none; + text-decoration: none; + color: #222222; + padding: 24px; + height: 212px; + border-radius: 24px; + border: 1px solid transparent; + -webkit-transition: 250ms ease border; + transition: 250ms ease border; +} + +.c67:hover { + border: 1px solid #CECECE; +} + +.c72 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: white url(nftCard.png); + background-size: auto 100%; + background-position: right; + background-repeat: no-repeat; + background-origin: border-box; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-text-decoration: none; + text-decoration: none; + color: #222222; + padding: 24px; + height: 212px; + border-radius: 24px; + border: 1px solid transparent; + -webkit-transition: 250ms ease border; + transition: 250ms ease border; +} + +.c72:hover { + border: 1px solid #CECECE; +} + +.c74 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: #F9F9F9 url(undefined); + background-size: auto 100%; + background-position: right; + background-repeat: no-repeat; + background-origin: border-box; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-text-decoration: none; + text-decoration: none; + color: #222222; + padding: 24px; + height: 212px; + border-radius: 24px; + border: 1px solid #22222212; + -webkit-transition: 250ms ease border; + transition: 250ms ease border; +} + +.c74:hover { + border: 1px solid #CECECE; +} + +.c68 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c69 { + font-size: 20px; + line-height: 28px; + font-weight: 535; +} + +.c70 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-size: 16px; + line-height: 20px; + color: #222222; + padding: 0 40px 0 0; + max-width: 480px; +} + +.c75 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-size: 16px; + line-height: 20px; + color: #7D7D7D; + padding: 0 40px 0 0; + max-width: 480px; +} + +.c71 { + color: #FC72FF; + font-weight: 535; + margin: 24px 0 0; + cursor: pointer; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; +} + +.c71:hover { + opacity: 0.6; +} + +.c76 { + min-width: 20px; + min-height: 20px; + max-height: 48px; + max-width: 48px; +} + +.c50 { + background-color: transparent; + bottom: 0; + border-radius: inherit; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + -webkit-transition: 150ms ease background-color; + transition: 150ms ease background-color; + width: 100%; +} + +.c16 { + padding: 16px; + width: 100%; + line-height: 24px; + font-weight: 535; + text-align: center; + border-radius: 16px; + outline: none; + border: 1px solid transparent; + color: #222222; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + position: relative; + z-index: 1; + will-change: transform; + -webkit-transition: -webkit-transform 450ms ease; + -webkit-transition: transform 450ms ease; + transition: transform 450ms ease; + -webkit-transform: perspective(1px) translateZ(0); + -ms-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); +} + +.c16:disabled { + opacity: 50%; + cursor: auto; + pointer-events: none; +} + +.c16 > * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.c16 > a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c82 { + padding: 16px; + width: 200px; + line-height: 24px; + font-weight: 535; + text-align: center; + border-radius: 16px; + outline: none; + border: 1px solid transparent; + color: #222222; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + position: relative; + z-index: 1; + will-change: transform; + -webkit-transition: -webkit-transform 450ms ease; + -webkit-transition: transform 450ms ease; + transition: transform 450ms ease; + -webkit-transform: perspective(1px) translateZ(0); + -ms-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); +} + +.c82:disabled { + opacity: 50%; + cursor: auto; + pointer-events: none; +} + +.c82 > * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.c82 > a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c48 { + background-color: #FFEFFF; + color: #FC72FF; + font-size: 20px; + font-weight: 535; +} + +.c48:focus { + box-shadow: 0 0 0 1pt #FFEFFF; + background-color: #FFEFFF; +} + +.c48:hover { + background-color: #FFEFFF; +} + +.c48:active { + box-shadow: 0 0 0 1pt #FFEFFF; + background-color: #FFEFFF; +} + +.c48:hover .c49 { + background-color: #98A1C014; +} + +.c48:active .c49 { + background-color: #B8C0DC3d; +} + +.c48:disabled { + opacity: 0.4; +} + +.c48:disabled:hover { + cursor: auto; + background-color: transparent; + box-shadow: none; + border: 1px solid transparent; + outline: none; +} + +.c30 { + background-color: #FFFFFF; + color: #7D7D7D; + border: 1px solid #22222212; + font-size: 16px; + font-weight: 535; +} + +.c30:hover { + background-color: #ececec; +} + +.c30:active { + background-color: #e0e0e0; +} + +.c83 { + background-color: transparent; + color: #FC72FF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c83:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c83:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c83:active { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c83:disabled { + opacity: 50%; + cursor: auto; +} + +.c17 { + padding: 0; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + background: none; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c17:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c17:hover { + opacity: 0.9; +} + +.c17:active { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c17:disabled { + opacity: 50%; + cursor: auto; +} + +.c77 { + height: 340px; + width: 100%; + border-radius: 32px; + max-width: 1440px; + margin: 80px 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 32px 48px; + box-shadow: 0px 10px 24px rgba(51,53,72,0.04); + background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); +} + +.c78 { + color: white; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c79 { + font-weight: 535; + font-size: 28px; + line-height: 36px; +} + +.c80 { + margin: 10px 10px 0 0; + font-weight: 535; + font-size: 16px; + line-height: 20px; +} + +.c81 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; +} + +.c81:hover { + opacity: 0.6; +} + +.c84 { + color: white; + border: 1px solid white; +} + +.c43 { + display: grid; + grid-auto-rows: auto; + grid-row-gap: 4px; +} + +.c40 { + -webkit-filter: none; + filter: none; + opacity: 1; + -webkit-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; +} + +.c14 { + display: inline-block; + height: inherit; +} + +.c35 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 24px; + height: 24px; + border-radius: 50%; +} + +.c34 { + width: 24px; + height: 24px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c33 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + color: #222222; + pointer-events: auto; + width: 0; + position: relative; + font-weight: 485; + outline: none; + border: none; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background-color: transparent; + font-size: 28px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0px; + -webkit-appearance: textfield; + text-align: right; +} + +.c28::-webkit-search-decoration { + -webkit-appearance: none; +} + +.c28 [type='number'] { + -moz-appearance: textfield; +} + +.c28::-webkit-outer-spin-button, +.c28::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +.c28::-webkit-input-placeholder { + color: #CECECE; +} + +.c28::-moz-placeholder { + color: #CECECE; +} + +.c28:-ms-input-placeholder { + color: #CECECE; +} + +.c28::placeholder { + color: #CECECE; +} + +.c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + position: relative; + border-radius: 20px; + z-index: 1; + width: initial; + -webkit-transition: height 1s ease; + transition: height 1s ease; + will-change: height; +} + +.c25 { + min-height: 44px; + border-radius: 20px; + width: initial; +} + +.c31 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #FFFFFF; + opacity: 1; + color: #222222; + cursor: pointer; + height: 36px; + border-radius: 18px; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid #22222212; + font-size: 24px; + font-weight: 485; + width: initial; + padding: 4px 8px 4px 4px; + gap: 8px; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-left: 12px; + box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); + visibility: visible; + -webkit-animation: none; + animation: none; +} + +.c31:hover, +.c31:active { + background-color: #F9F9F9; +} + +.c31:before { + background-size: 100%; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ''; +} + +.c31:hover:before { + background-color: #98A1C014; +} + +.c31:active:before { + background-color: #B8C0DC3d; +} + +.c45 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #FC72FF; + opacity: 1; + color: #FFFFFF; + cursor: pointer; + height: 36px; + border-radius: 18px; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid #FC72FF; + font-size: 24px; + font-weight: 485; + width: initial; + padding: 6px 6px 6px 8px; + gap: 8px; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-left: 12px; + box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); + visibility: visible; + -webkit-animation: none; + animation: none; +} + +.c45:hover, +.c45:active { + background-color: #FC72FF; +} + +.c45:before { + background-size: 100%; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ''; +} + +.c45:hover:before { + background-color: #98A1C014; +} + +.c45:active:before { + background-color: #B8C0DC3d; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c38 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #7D7D7D; + font-size: 0.75rem; + line-height: 1rem; +} + +.c38 span:hover { + cursor: pointer; + color: #4a4a4a; +} + +.c39 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + min-height: 24px; + padding: 8px 0px 0px 0px; +} + +.c32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +.c37 { + margin: 0 0.25rem 0 0.35rem; + height: 35%; + margin-left: 8px; +} + +.c37 path { + stroke: #222222; + stroke-width: 2px; +} + +.c46 { + margin: 0 0.25rem 0 0.35rem; + height: 35%; + margin-left: 8px; +} + +.c46 path { + stroke: #FFFFFF; + stroke-width: 2px; +} + +.c36 { + margin: 0 0.25rem 0 0.25rem; + font-size: 20px; + font-weight: 535; +} + +.c29 { + -webkit-filter: none; + filter: none; + opacity: 1; + -webkit-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; + text-align: left; + font-size: 36px; + font-weight: 485; + max-height: 44px; +} + +.c3 { + padding: 68px 8px 0px; + max-width: 480px; + width: 100%; +} + +.c4 { + position: relative; + z-index: 1; + border: 1px solid #22222212; + -webkit-transition: -webkit-transform 250ms ease; + -webkit-transition: transform 250ms ease; + transition: transform 250ms ease; + border-radius: 24px; +} + +.c4:before { + content: ' '; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: absolute; + inset: 0; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + -webkit-filter: blur(50px); + filter: blur(50px); + background-color: rgba(252,114,255,0.075); + z-index: -2; +} + +.c4:hover { + border: 1px solid #22222212; +} + +.c6 { + border-radius: 24px; + background: #FFFFFF; + z-index: -1; + padding: 8px; + padding-top: 12px; +} + +.c41 { + border-radius: 12px; + height: 40px; + width: 40px; + position: relative; + margin-top: -18px; + margin-bottom: -18px; + margin-left: auto; + margin-right: auto; + background-color: #F9F9F9; + border: 4px solid; + border-color: #FFFFFF; + z-index: 2; +} + +.c41:hover { + cursor: pointer; + opacity: 0.8; +} + +.c22 { + height: 24px; + width: 24px; +} + +.c22 > * { + fill: #7D7D7D; +} + +.c20 { + border: none; + background-color: transparent; + margin: 0; + padding: 0; + cursor: pointer; + outline: none; +} + +.c20:not([disabled]):hover { + opacity: 0.7; +} + +.c21 { + padding: 6px 12px; + border-radius: 16px; +} + +.c19 { + position: relative; +} + +.c18 { + color: #7D7D7D; + gap: 4px; + font-weight: 485; +} + +.c18:focus { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c18:active { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c10 { + margin-bottom: 10px; + color: #7D7D7D; +} + +.c12 { + padding: 0 12px; + gap: 16px; +} + +.c42 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.c23 { + background-color: #F9F9F9; + border-radius: 16px; + color: #7D7D7D; + font-size: 14px; + font-weight: 500; + height: 120px; + line-height: 20px; + padding: 16px; + position: relative; +} + +.c23:before { + box-sizing: border-box; + background-size: 100%; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + content: ''; + border: 1px solid #F9F9F9; +} + +.c23:hover:before { + border-color: #98A1C014; +} + +.c23:focus-within:before { + border-color: #B8C0DC3d; +} + +.c44 { + border-bottom: 1px solid #FFFFFF; +} + +.c0 { + position: absolute; + top: 0; + padding: 72px 0px 0px 0px; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-scroll-behavior: smooth; + -moz-scroll-behavior: smooth; + -ms-scroll-behavior: smooth; + scroll-behavior: smooth; + overflow-x: hidden; +} + +.c51 { + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + top: 0; + bottom: 0; + width: 100%; + min-height: 550px; + background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%); + z-index: 990; + pointer-events: none; + height: calc(100vh - 48px); +} + +.c52 { + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + top: 0; + bottom: 0; + width: 100%; + overflow-y: hidden; + height: calc(100vh - 48px); +} + +.c53 { + position: absolute; + top: 68px; + bottom: 0; + background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%); + -webkit-filter: blur(72px); + filter: blur(72px); + border-radius: 24px; + max-width: 480px; + width: 100%; + height: 100%; +} + +.c54 { + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + width: 100%; + padding: 0 0 40px; + max-width: min(720px,90%); + min-height: 535px; + z-index: 990; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; + height: calc(100vh - 120px); + pointer-events: none; +} + +.c54 * { + pointer-events: auto; +} + +.c55 { + color: transparent; + font-size: 36px; + line-height: 44px; + font-weight: 535; + text-align: center; + margin: 0 0 24px; + background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%); + background-clip: text; + -webkit-background-clip: text; +} + +.c57 { + color: #7D7D7D; + font-size: 16px; + line-height: 24px; + font-weight: 535; + text-align: center; + max-width: 500px; + margin: 0 0 32px; +} + +.c56 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c59 { + padding: 16px 0px; + border-radius: 24px; +} + +.c60 { + background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); + border: none; + color: #FFFFFF; + -webkit-transition: all 250ms ease; + transition: all 250ms ease; +} + +.c60:hover { + box-shadow: 0px 0px 16px 0px #ff00c7; +} + +.c61 { + margin: 0px; + font-size: 16px; + font-weight: 535; + white-space: nowrap; +} + +.c58 { + max-width: 300px; + width: 100%; + pointer-events: auto; +} + +.c62 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #CECECE; + cursor: pointer; + font-size: 20px; + font-weight: 535; + margin: 36px 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + visibility: hidden; + pointer-events: auto; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; +} + +.c62:hover { + opacity: 0.6; +} + +.c63 { + margin-left: 14px; + size: 20px; +} + +.c65 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 24px 5rem; + width: 100%; + background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); +} + +.c66 { + display: grid; + gap: 12px; + width: 100%; + padding: 24px 0 0; + max-width: 1440px; + -webkit-scroll-margin: 72px 0 0; + -moz-scroll-margin: 72px 0 0; + -ms-scroll-margin: 72px 0 0; + scroll-margin: 72px 0 0; + grid-template-columns: 1fr; +} + +.c73 { + display: grid; + gap: 12px; + width: 100%; + padding: 24px 0 0; + max-width: 1440px; + -webkit-scroll-margin: 72px 0 0; + -moz-scroll-margin: 72px 0 0; + -ms-scroll-margin: 72px 0 0; + scroll-margin: 72px 0 0; + grid-template-columns: 1fr; +} + +.c1 { + height: calc(100vh - 48px); + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 1; +} + +.c5 * { + pointer-events: none; +} + +.c5:hover { + -webkit-transform: translateY(-4px); + -ms-transform: translateY(-4px); + transform: translateY(-4px); + -webkit-transition: -webkit-transform 250ms ease; + -webkit-transition: transform 250ms ease; + transition: transform 250ms ease; +} + +.c5:hover { + border: 1px solid #FC72FF; +} + +.c2 { + -webkit-text-decoration: none; + text-decoration: none; + max-width: 480px; + width: 100%; +} + +.c64 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + gap: 8px; + margin-top: 24px; + color: #7D7D7D; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; + line-height: 24px; + font-weight: 535; + text-align: center; +} + +.c64:hover { + color: #CECECE; +} + +@media screen and (min-width:1024px) { + .c85 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media screen and (min-width:1024px) { + .c87 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } +} + +@media screen and (min-width:1024px) { + .c102 { + display: none; + } +} + +@media screen and (min-width:1024px) { + .c88 { + display: block; + } +} + +@media screen and (min-width:1280px) { + .c95 { + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 24px; + } +} + +@media screen and (min-width:1280px) { + .c96 { + margin: 0; + } +} + +@media screen and (min-width:640px) { + .c67 { + height: 360px; + } +} + +@media screen and (min-width:1280px) { + .c67 { + padding: 32px; + } +} + +@media screen and (min-width:640px) { + .c72 { + height: 360px; + } +} + +@media screen and (min-width:1280px) { + .c72 { + padding: 32px; + } +} + +@media screen and (min-width:640px) { + .c74 { + height: 260px; + } +} + +@media screen and (min-width:1280px) { + .c74 { + padding: 32px; + } +} + +@media screen and (min-width:1024px) { + .c69 { + font-size: 28px; + line-height: 36px; + } +} + +@media screen and (min-width:1280px) { + .c70 { + font-size: 20px; + line-height: 28px; + max-width: 480px; + } +} + +@media screen and (min-width:1280px) { + .c75 { + font-size: 20px; + line-height: 28px; + max-width: 480px; + } +} + +@media screen and (min-width:1024px) { + .c77 { + height: 140px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +@media screen and (min-width:1280px) { + .c79 { + font-size: 28px; + line-height: 36px; + } +} + +@media screen and (min-width:1280px) { + .c80 { + font-size: 20px; + line-height: 28px; + } +} + +@media screen and (min-width:1024px) { + .c81 { + width: auto; + } +} + +@media only screen and (max-width:768px) { + .c3 { + padding-top: 48px; + } +} + +@media only screen and (max-width:640px) { + .c3 { + padding-top: 20px; + } +} + +@media screen and (min-width:768px) { + .c51 { + height: 100vh; + } +} + +@media screen and (min-width:768px) { + .c52 { + height: 100vh; + } +} + +@media screen and (min-width:640px) { + .c55 { + font-size: 48px; + line-height: 56px; + } +} + +@media screen and (min-width:768px) { + .c55 { + font-size: 64px; + line-height: 72px; + } +} + +@media screen and (min-width:768px) { + .c57 { + font-size: 20px; + line-height: 28px; + } +} + +@media screen and (min-width:640px) { + .c61 { + font-size: 20px; + } +} + +@media screen and (min-width:640px) { + .c62 { + visibility: visible; + } +} + +@media screen and (min-width:768px) { + .c65 { + padding: 0 96px 5rem; + } +} + +@media screen and (min-width:640px) { + .c66 { + grid-template-columns: 1fr 1fr; + gap: 32px; + } +} + +@media screen and (min-width:1024px) { + .c66 { + grid-template-columns: 1fr 1fr; + gap: 32px; + } +} + +@media screen and (min-width:640px) { + .c73 { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media screen and (min-width:1024px) { + .c73 { + grid-template-columns: 1fr 1fr 1fr; + gap: 32px; + } +} + +
+
+
+ +
+
+
+
+
+
+ Swap +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ You pay +
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ You receive +
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+

+ Trade crypto and NFTs with confidence +

+
+
+ Buy, sell, and explore tokens and NFTs +
+
+ + +

+ Get started +

+ + +
+ Learn more + + + + + +
+ + + + + Download the Uniswap Wallet for iOS + +
+
+
+ +
+
+ Swap tokens +
+
+
+ Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. +
+ Trade Tokens +
+
+ + +
+
+ Trade NFTs +
+
+
+ Buy and sell NFTs across marketplaces to find more listings at better prices. +
+ Explore NFTs +
+
+ +
+
+ +
+
+ Buy crypto +
+ + + + +
+
+ Buy crypto with your credit card or bank account at the best rates. +
+ Buy now +
+
+ + +
+
+ Earn +
+ Analytics +
+
+ Provide liquidity to pools on Uniswap and earn fees on swaps. +
+ Provide liquidity +
+
+ + +
+
+ Build dApps +
+ + + + +
+
+ Build apps and tools on the largest DeFi protocol on Ethereum. +
+ Developer docs +
+
+ +
+
+
+
+ Powered by the Uniswap Protocol +
+
+ The leading decentralized crypto trading protocol, governed by a global community. +
+
+
+ + Learn more + +
+
+
+
+ Uniswap Logo +
+ + + discord.svg + + + + + twitter-safe.svg + + + + + github.svg + + +
+ + © + 2023 + Uniswap Labs + +
+
+
+ + App + + + Swap + + + Tokens + + + NFTs + + + Pools + +
+
+ + Protocol + + + Community + + + Governance + + + Developers + +
+
+ + Company + + + Careers + + + Blog + +
+
+ + Get Help + + + Contact Us + + + Help Center + +
+
+
+ Uniswap Logo +
+ + + discord.svg + + + + + twitter-safe.svg + + + + + github.svg + + +
+ + © + 2023 + Uniswap Labs + +
+
+
+
+
+`; diff --git a/src/theme/components/ThemeToggle.tsx b/src/theme/components/ThemeToggle.tsx index c7cd5f26d4..ac542763ac 100644 --- a/src/theme/components/ThemeToggle.tsx +++ b/src/theme/components/ThemeToggle.tsx @@ -45,6 +45,24 @@ export function SystemThemeUpdater() { return null } +export function ThemeColorMetaUpdater() { + const isDark = useIsDarkMode() + + useEffect(() => { + const meta = document.querySelector('meta[name=theme-color]') + if (!meta) return + + if (isDark) { + // this color comes from #background-radial-gradient + meta.setAttribute('content', 'rgb(19, 19, 19)') + } else { + meta.setAttribute('content', '#fff') + } + }, [isDark]) + + return null +} + export function useIsDarkMode(): boolean { const mode = useAtomValue(themeModeAtom) const systemTheme = useAtomValue(systemThemeAtom)