투자관리 수정
This commit is contained in:
Macbook
@@ -1,4 +1,4 @@
|
||||
/* GoldenChart splash — 프리미엄 흐림 그라데이션 + 글래스 로그인 */
|
||||
/* GoldenChart splash — 은은한 그라데이션 + 흐릿한 폰 목업 배경 */
|
||||
|
||||
.splash {
|
||||
position: fixed;
|
||||
@@ -7,13 +7,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #05070c;
|
||||
background: #06080e;
|
||||
color: #e8eaed;
|
||||
overflow: hidden;
|
||||
font-family: var(--font, 'Noto Sans KR', 'Inter', sans-serif);
|
||||
}
|
||||
|
||||
/* ── 배경 레이어 ─────────────────────────────────────────────────────────── */
|
||||
/* ── 배경 ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.splash-backdrop {
|
||||
position: absolute;
|
||||
@@ -26,237 +26,149 @@
|
||||
.splash-backdrop__base {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(155deg, #06080f 0%, #0a0e18 38%, #070a12 68%, #05070c 100%);
|
||||
background: linear-gradient(160deg, #05070c 0%, #0a0e16 42%, #070a12 100%);
|
||||
}
|
||||
|
||||
.splash-backdrop__aurora {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.splash-backdrop__aurora--teal,
|
||||
.splash-backdrop__aurora--gold {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
.splash-backdrop__aurora--teal {
|
||||
width: min(58vw, 520px);
|
||||
height: min(58vw, 520px);
|
||||
left: 8%;
|
||||
top: 38%;
|
||||
background: radial-gradient(circle, rgba(34, 197, 94, 0.14) 0%, rgba(45, 212, 191, 0.05) 45%, transparent 70%);
|
||||
}
|
||||
|
||||
.splash-backdrop__aurora--gold {
|
||||
width: min(50vw, 460px);
|
||||
height: min(50vw, 460px);
|
||||
right: 6%;
|
||||
top: 8%;
|
||||
background: radial-gradient(circle, rgba(249, 226, 156, 0.18) 0%, rgba(212, 175, 55, 0.08) 42%, transparent 72%);
|
||||
}
|
||||
|
||||
.splash-backdrop__mesh {
|
||||
position: absolute;
|
||||
inset: -20%;
|
||||
opacity: 0.45;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 38deg at 58% 42%,
|
||||
rgba(212, 175, 55, 0.12) 0deg,
|
||||
transparent 48deg,
|
||||
rgba(34, 197, 94, 0.07) 95deg,
|
||||
transparent 165deg,
|
||||
rgba(56, 189, 248, 0.05) 240deg,
|
||||
transparent 360deg
|
||||
inset: -15%;
|
||||
opacity: 0.35;
|
||||
background: conic-gradient(
|
||||
from 42deg at 55% 40%,
|
||||
rgba(212, 175, 55, 0.1) 0deg,
|
||||
transparent 55deg,
|
||||
rgba(34, 197, 94, 0.06) 110deg,
|
||||
transparent 200deg,
|
||||
rgba(56, 189, 248, 0.04) 280deg,
|
||||
transparent 360deg
|
||||
);
|
||||
filter: blur(48px);
|
||||
}
|
||||
|
||||
/* 대각선 폰 목업 — 중앙→우상단 그라데이션 마스크 */
|
||||
.splash-backdrop__phones {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
perspective: 1100px;
|
||||
mask-image:
|
||||
radial-gradient(ellipse 42% 38% at 50% 48%, transparent 0%, rgba(0, 0, 0, 0.15) 42%, #000 58%),
|
||||
linear-gradient(
|
||||
125deg,
|
||||
rgba(0, 0, 0, 0.25) 0%,
|
||||
#000 18%,
|
||||
#000 42%,
|
||||
rgba(0, 0, 0, 0.45) 58%,
|
||||
transparent 78%
|
||||
);
|
||||
-webkit-mask-image:
|
||||
radial-gradient(ellipse 42% 38% at 50% 48%, transparent 0%, rgba(0, 0, 0, 0.15) 42%, #000 58%),
|
||||
linear-gradient(
|
||||
125deg,
|
||||
rgba(0, 0, 0, 0.25) 0%,
|
||||
#000 18%,
|
||||
#000 42%,
|
||||
rgba(0, 0, 0, 0.45) 58%,
|
||||
transparent 78%
|
||||
);
|
||||
filter: blur(52px);
|
||||
}
|
||||
|
||||
.splash-backdrop__orbs {
|
||||
.splash-backdrop__phones-blur {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: -5%;
|
||||
filter: blur(10px) saturate(0.75) brightness(0.82);
|
||||
}
|
||||
|
||||
.splash-backdrop__orb {
|
||||
.splash-phone {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(72px);
|
||||
width: clamp(88px, 10vw, 148px);
|
||||
aspect-ratio: 9 / 19.5;
|
||||
transform-origin: center center;
|
||||
will-change: transform;
|
||||
animation: splash-orb-float 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--gold {
|
||||
width: min(52vw, 480px);
|
||||
height: min(52vw, 480px);
|
||||
top: -6%;
|
||||
right: 2%;
|
||||
background: radial-gradient(circle, rgba(249, 226, 156, 0.32) 0%, rgba(212, 175, 55, 0.12) 45%, transparent 72%);
|
||||
animation-delay: 0s;
|
||||
.splash-phone__frame {
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
border-radius: clamp(16px, 2.2vw, 24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(14, 18, 28, 0.42);
|
||||
box-shadow:
|
||||
0 16px 48px rgba(0, 0, 0, 0.45),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--teal {
|
||||
width: min(44vw, 400px);
|
||||
height: min(44vw, 400px);
|
||||
top: 18%;
|
||||
right: -6%;
|
||||
background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, rgba(45, 212, 191, 0.06) 50%, transparent 70%);
|
||||
animation-delay: -8s;
|
||||
animation-duration: 24s;
|
||||
.splash-phone__notch {
|
||||
width: 36%;
|
||||
height: 5px;
|
||||
margin: 2px auto 4px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--indigo {
|
||||
width: min(38vw, 340px);
|
||||
height: min(38vw, 340px);
|
||||
bottom: -10%;
|
||||
left: -8%;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 68%);
|
||||
animation-delay: -14s;
|
||||
animation-duration: 26s;
|
||||
}
|
||||
|
||||
@keyframes splash-orb-float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate(1.5%, -1%) scale(1.03);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-1%, 1.5%) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 중앙 → 우측 상단: 캔들·호가 실루엣 ───────────────────────────────────── */
|
||||
|
||||
.splash-backdrop__market-flow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
.splash-phone__screen {
|
||||
height: calc(100% - 14px);
|
||||
border-radius: clamp(12px, 1.6vw, 18px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.splash-phone__svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-backdrop__flow-glow {
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
top: 38%;
|
||||
width: min(95vw, 920px);
|
||||
height: min(72vh, 640px);
|
||||
transform: translate(-18%, -22%);
|
||||
left: 38%;
|
||||
top: 32%;
|
||||
width: min(88vw, 840px);
|
||||
height: min(68vh, 580px);
|
||||
transform: translate(-12%, -8%);
|
||||
background: linear-gradient(
|
||||
128deg,
|
||||
rgba(34, 197, 94, 0.07) 0%,
|
||||
rgba(212, 175, 55, 0.1) 32%,
|
||||
rgba(56, 189, 248, 0.05) 58%,
|
||||
transparent 78%
|
||||
rgba(34, 197, 94, 0.06) 0%,
|
||||
rgba(212, 175, 55, 0.09) 35%,
|
||||
rgba(249, 226, 156, 0.05) 55%,
|
||||
transparent 75%
|
||||
);
|
||||
filter: blur(56px);
|
||||
opacity: 0.9;
|
||||
filter: blur(64px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.splash-backdrop__flow-inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(128vw, 1680px);
|
||||
height: min(96vh, 920px);
|
||||
transform: translate(-42%, -48%);
|
||||
transform-origin: center center;
|
||||
pointer-events: none;
|
||||
/* 중앙(로그인 카드 부근)에서 우측 상단으로 갈수록 서서히 사라짐 */
|
||||
mask-image: linear-gradient(
|
||||
125deg,
|
||||
#000 0%,
|
||||
#000 14%,
|
||||
rgba(0, 0, 0, 0.62) 32%,
|
||||
rgba(0, 0, 0, 0.28) 48%,
|
||||
rgba(0, 0, 0, 0.08) 58%,
|
||||
transparent 72%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
125deg,
|
||||
#000 0%,
|
||||
#000 14%,
|
||||
rgba(0, 0, 0, 0.62) 32%,
|
||||
rgba(0, 0, 0, 0.28) 48%,
|
||||
rgba(0, 0, 0, 0.08) 58%,
|
||||
transparent 72%
|
||||
);
|
||||
}
|
||||
|
||||
.splash-backdrop__chart-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.38;
|
||||
filter: blur(22px) saturate(0.72) brightness(0.78);
|
||||
}
|
||||
|
||||
.splash-backdrop__orderbook-layer {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 6%;
|
||||
width: min(36vw, 340px);
|
||||
height: min(52vh, 480px);
|
||||
opacity: 0.32;
|
||||
filter: blur(14px) saturate(0.65);
|
||||
}
|
||||
|
||||
.splash-chart-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-orderbook-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-ob-mid {
|
||||
stroke: rgba(255, 255, 255, 0.08);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 4 6;
|
||||
}
|
||||
|
||||
.splash-ob-ask-bar {
|
||||
fill: rgba(239, 68, 68, 0.35);
|
||||
}
|
||||
|
||||
.splash-ob-bid-bar {
|
||||
fill: rgba(34, 197, 94, 0.32);
|
||||
}
|
||||
|
||||
.splash-ob-ask-txt,
|
||||
.splash-ob-bid-txt {
|
||||
font-size: 9px;
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
fill: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.splash-ob-spread {
|
||||
fill: rgba(212, 175, 55, 0.08);
|
||||
stroke: rgba(212, 175, 55, 0.15);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-chart-grid {
|
||||
stroke: rgba(255, 255, 255, 0.04);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-vol-bar {
|
||||
fill: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.splash-ichi--tenkan { stroke: rgba(250, 204, 21, 0.35); stroke-width: 1.2; fill: none; }
|
||||
.splash-ichi--kijun { stroke: rgba(96, 165, 250, 0.3); stroke-width: 1.2; fill: none; }
|
||||
.splash-ichi--senkou-a { stroke: rgba(34, 197, 94, 0.22); stroke-width: 1; fill: none; }
|
||||
.splash-ichi--senkou-b { stroke: rgba(239, 68, 68, 0.2); stroke-width: 1; fill: none; }
|
||||
|
||||
.splash-candle-wick {
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-candle-up {
|
||||
fill: rgba(34, 197, 94, 0.42);
|
||||
}
|
||||
|
||||
.splash-candle-down {
|
||||
fill: rgba(239, 68, 68, 0.38);
|
||||
}
|
||||
|
||||
.splash-backdrop__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.35;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
|
||||
}
|
||||
|
||||
.splash-backdrop__grain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.045;
|
||||
opacity: 0.04;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 180px 180px;
|
||||
}
|
||||
@@ -265,27 +177,20 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 68% 58% at 50% 50%, transparent 0%, rgba(5, 7, 12, 0.42) 62%, rgba(2, 3, 6, 0.9) 100%),
|
||||
linear-gradient(128deg, transparent 0%, rgba(5, 7, 12, 0.15) 55%, rgba(5, 7, 12, 0.35) 100%),
|
||||
linear-gradient(180deg, rgba(5, 7, 12, 0.45) 0%, transparent 30%, transparent 70%, rgba(5, 7, 12, 0.5) 100%);
|
||||
radial-gradient(ellipse 70% 62% at 50% 50%, transparent 0%, rgba(5, 7, 12, 0.5) 65%, rgba(2, 3, 6, 0.92) 100%),
|
||||
linear-gradient(128deg, transparent 0%, rgba(5, 7, 12, 0.2) 50%, rgba(5, 7, 12, 0.35) 100%);
|
||||
}
|
||||
|
||||
.splash-backdrop__spotlight {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
ellipse 42% 38% at 50% 46%,
|
||||
rgba(255, 255, 255, 0.06) 0%,
|
||||
ellipse 40% 36% at 50% 46%,
|
||||
rgba(255, 255, 255, 0.05) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.splash-backdrop__orb {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 로그인 카드 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.splash-center {
|
||||
@@ -294,37 +199,35 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: min(92vw, 380px);
|
||||
padding: 24px 16px;
|
||||
gap: 16px;
|
||||
width: min(92vw, 400px);
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.splash-glass {
|
||||
.splash-card {
|
||||
width: 100%;
|
||||
padding: 36px 32px 28px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(10, 12, 18, 0.52);
|
||||
backdrop-filter: blur(24px) saturate(1.15);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.15);
|
||||
padding: 38px 36px 30px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.55);
|
||||
background: rgba(11, 14, 22, 0.97);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(212, 175, 55, 0.06) inset,
|
||||
0 28px 72px rgba(0, 0, 0, 0.55),
|
||||
0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
0 0 0 1px rgba(212, 175, 55, 0.08) inset,
|
||||
0 0 40px rgba(212, 175, 55, 0.1),
|
||||
0 24px 64px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.splash-brand {
|
||||
margin: 0 0 28px;
|
||||
margin: 0 0 30px;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
font-size: 2.15rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e8c547 38%, #c9a227 72%, #a67c00 100%);
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e8c547 40%, #c9a227 78%, #a67c00 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter: drop-shadow(0 2px 16px rgba(212, 175, 55, 0.28));
|
||||
filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.35));
|
||||
}
|
||||
|
||||
.splash-form {
|
||||
@@ -336,24 +239,19 @@
|
||||
.splash-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 13px 14px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(22, 26, 36, 0.95);
|
||||
color: #f3f4f6;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.splash-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.32);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.splash-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(212, 175, 55, 0.5);
|
||||
background: rgba(0, 0, 0, 0.48);
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
|
||||
border-color: rgba(212, 175, 55, 0.45);
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
|
||||
.splash-input:disabled {
|
||||
@@ -369,26 +267,23 @@
|
||||
|
||||
.splash-login-btn {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
padding: 13px 16px;
|
||||
margin-top: 6px;
|
||||
padding: 14px 16px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
color: #1a1408;
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e0c04a 42%, #c9a227 100%);
|
||||
color: #141008;
|
||||
background: linear-gradient(90deg, #f5e6a8 0%, #e8c84a 48%, #d4af37 100%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.25) inset,
|
||||
0 6px 22px rgba(201, 162, 39, 0.38);
|
||||
0 1px 0 rgba(255, 255, 255, 0.3) inset,
|
||||
0 6px 24px rgba(201, 162, 39, 0.4);
|
||||
transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
|
||||
.splash-login-btn:hover:not(:disabled) {
|
||||
filter: brightness(1.06);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.3) inset,
|
||||
0 8px 28px rgba(201, 162, 39, 0.48);
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.splash-login-btn:active:not(:disabled) {
|
||||
@@ -401,17 +296,16 @@
|
||||
}
|
||||
|
||||
.splash-version {
|
||||
margin: 22px 0 0;
|
||||
margin: 24px 0 0;
|
||||
text-align: center;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(255, 255, 255, 0.34);
|
||||
letter-spacing: 0.01em;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
|
||||
.splash-guest-link {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
@@ -427,28 +321,32 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.splash-glass {
|
||||
padding: 28px 22px 22px;
|
||||
border-radius: 16px;
|
||||
@media (max-width: 480px) {
|
||||
.splash-card {
|
||||
padding: 30px 24px 24px;
|
||||
}
|
||||
|
||||
.splash-brand {
|
||||
font-size: 1.65rem;
|
||||
margin-bottom: 22px;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.splash-backdrop__orb {
|
||||
filter: blur(56px);
|
||||
|
||||
.splash-phone {
|
||||
width: clamp(72px, 18vw, 110px);
|
||||
}
|
||||
.splash-backdrop__flow-inner {
|
||||
mask-image: radial-gradient(
|
||||
ellipse 90% 85% at 24% 56%,
|
||||
#000 0%,
|
||||
transparent 75%
|
||||
);
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse 90% 85% at 24% 56%,
|
||||
#000 0%,
|
||||
transparent 75%
|
||||
);
|
||||
|
||||
.splash-backdrop__phones-blur {
|
||||
filter: blur(12px) saturate(0.7) brightness(0.78);
|
||||
}
|
||||
|
||||
.splash-backdrop__aurora--teal,
|
||||
.splash-backdrop__aurora--gold {
|
||||
filter: blur(64px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.splash-phone {
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user