diff --git a/src/app.css b/src/app.css index 726aaf7..cdf7b1e 100644 --- a/src/app.css +++ b/src/app.css @@ -70,11 +70,11 @@ a { position: fixed; overflow: hidden; background: - radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.2), transparent 23rem), - radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.42), transparent 35rem), - radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.38), transparent 34rem), - radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.58), transparent 42rem), - linear-gradient(180deg, #03000b 0%, #0d001b 26%, #260047 62%, #57008f 100%); + radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.14), transparent 23rem), + radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.22), transparent 35rem), + radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.2), transparent 34rem), + radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.32), transparent 42rem), + linear-gradient(180deg, #020008 0%, #05000f 30%, #0c001c 64%, #17002b 100%); } .space-backdrop::before { @@ -82,9 +82,9 @@ a { position: absolute; inset: -16svh -8vw; background: - radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.22), transparent 28rem), - radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.18), transparent 24rem), - radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.44), transparent 35rem); + radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.12), transparent 28rem), + radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.1), transparent 24rem), + radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.2), transparent 35rem); filter: blur(18px); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0); will-change: transform; @@ -202,7 +202,7 @@ a { .video-card { width: min(940px, 92vw); - margin: clamp(0.9rem, 2.4vw, 1.65rem) auto clamp(2.45rem, 4.2vw, 3.35rem); + margin: clamp(0.9rem, 2.4vw, 1.65rem) auto 0; padding: clamp(0.45rem, 1vw, 0.75rem); border: 1px solid var(--border-purple); border-radius: 24px; @@ -223,7 +223,7 @@ a { .intro { width: min(820px, 88vw); - margin: 0 auto; + margin: clamp(3rem, 5vw, 4.5rem) auto 0; text-align: center; } @@ -240,7 +240,7 @@ a { .star-divider { width: min(24rem, 72vw); - margin: clamp(2.25rem, 4.2vw, 3.15rem) auto 0; + margin: clamp(3rem, 5vw, 4.5rem) auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; @@ -358,11 +358,16 @@ a { .intro { width: min(34rem, 88vw); + margin-top: clamp(2.4rem, 9vw, 3.2rem); } .intro p { font-size: clamp(1.12rem, 5vw, 1.5rem); } + + .star-divider { + margin-top: clamp(2.35rem, 9vw, 3.2rem); + } } @media (prefers-reduced-motion: reduce) {