From 3b8076d82a89206e24af341874c3ea428e486421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?= Date: Tue, 12 May 2026 15:55:09 +0900 Subject: [PATCH] =?UTF-8?q?fix=20:=20utm=20=EB=93=9C=EB=A1=A0=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/main.css | 84 +++++++++++++++++++++++++++--------------------- 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 24a88c2..0fe9901 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -142,23 +142,52 @@ body{overflow-x:hidden;} .main-utm-route--a{width:62%;left:18%;top:42%;transform:rotate(-18deg);} .main-utm-route--b{width:48%;right:12%;top:62%;transform:rotate(22deg);} -.utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;animation:utmAirFlow 18s linear infinite;} -.utm-floating-drone{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.42);backdrop-filter:blur(12px);box-shadow:0 0 0 8px rgba(58,64,129,.04),0 10px 24px rgba(58,64,129,.1);} -.utm-floating-drone svg{position:absolute;inset:9px;width:34px;height:34px;overflow:visible;} -.utm-floating-drone svg circle{fill:none;stroke:#3a4081;stroke-width:2.4;} -.utm-floating-drone svg circle:first-child{filter:drop-shadow(0 0 10px rgba(58,64,129,.34));} -.utm-floating-drone svg path{fill:none;stroke:#3a4081;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} -.utm-floating-drone span{position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(58,64,129,.2);animation:utmDronePulse 2.8s ease-out infinite;} -.utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;} +.utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;opacity:.78;} +.utm-floating-drone{position:absolute;width:46px;height:46px;border-radius:18px;background:rgba(255,255,255,.52);border:1px solid rgba(58,64,129,.1);backdrop-filter:blur(12px);box-shadow:0 14px 30px rgba(31,41,55,.08);} +.utm-floating-drone::before{content:"";position:absolute;inset:-10px;border-radius:24px;border:1px solid rgba(91,108,255,.08);opacity:.6;animation:utmPulse 4s ease-out infinite;} +.utm-floating-drone svg{position:absolute;inset:10px;width:26px;height:26px;overflow:visible;} +.utm-floating-drone svg circle{fill:none;stroke:#3a4081;stroke-width:1.7;opacity:.72;} +.utm-floating-drone svg path{fill:none;stroke:#3a4081;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72;} +.utm-floating-drone span{display:none;} +.utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveA 9s ease-in-out infinite;} +.utm-floating-drone--b{left:44%;top:72px;animation:utmDroneMoveB 11s ease-in-out infinite;animation-delay:-2s;} +.utm-floating-drone--c{right:4%;top:138px;animation:utmDroneMoveC 10s ease-in-out infinite;animation-delay:-4s;} .utm-floating-drone--a svg circle,.utm-floating-drone--a svg path{stroke:#5B6CFF;} -.utm-floating-drone--a svg circle:first-child{filter:drop-shadow(0 0 10px rgba(91,108,255,.34));} -.utm-floating-drone--b{left:44%;top:72px;box-shadow:0 0 0 8px rgba(243,199,104,.08),0 10px 24px rgba(243,199,104,.14);animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;} -.utm-floating-drone--b svg{animation:utmDroneColorShift 6s ease-in-out infinite;} -.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#F3C768;} -.utm-floating-drone--b svg circle:first-child{filter:drop-shadow(0 0 10px rgba(243,199,104,.34));} -.utm-floating-drone--c{right:4%;top:138px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;animation-delay:-2.4s;box-shadow:0 0 0 8px rgba(255,123,123,.06),0 10px 24px rgba(255,123,123,.12);} -.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#FF7B7B;} -.utm-floating-drone--c svg circle:first-child{filter:drop-shadow(0 0 10px rgba(255,123,123,.32));} +.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#8F1700;} +.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#4F7DF3;} +.utm-floating-drone--a svg circle,.utm-floating-drone--a svg path{stroke:#5B6CFF;} +.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#8F1700;} +.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#4F7DF3;} + +@keyframes utmDroneMoveA{ +0%{transform:translate3d(0,0,0) rotate(-6deg);} +25%{transform:translate3d(12px,-10px,0) rotate(-2deg);} +50%{transform:translate3d(-6px,-18px,0) rotate(2deg);} +75%{transform:translate3d(-14px,-6px,0) rotate(-4deg);} +100%{transform:translate3d(0,0,0) rotate(-6deg);} +} + +@keyframes utmDroneMoveB{ +0%{transform:translate3d(0,0,0) rotate(5deg);} +25%{transform:translate3d(-10px,8px,0) rotate(1deg);} +50%{transform:translate3d(14px,-12px,0) rotate(-3deg);} +75%{transform:translate3d(6px,10px,0) rotate(3deg);} +100%{transform:translate3d(0,0,0) rotate(5deg);} +} + +@keyframes utmDroneMoveC{ +0%{transform:translate3d(0,0,0) rotate(-4deg);} +25%{transform:translate3d(8px,-14px,0) rotate(0deg);} +50%{transform:translate3d(-12px,-4px,0) rotate(4deg);} +75%{transform:translate3d(10px,12px,0) rotate(-2deg);} +100%{transform:translate3d(0,0,0) rotate(-4deg);} +} + +@keyframes utmPulse{ +0%{transform:scale(.9);opacity:.4;} +70%{opacity:0;} +100%{transform:scale(1.35);opacity:0;} +} /* ─── Responsive ─── */ @media(max-width:1024px){.main-utm-section{padding-top:76px;} @@ -180,27 +209,8 @@ body{overflow-x:hidden;} } /* ─── Keyframes ─── */ -@keyframes utmAirFlow{0%,100%{transform:translateX(0);} -50%{transform:translateX(-18px);} -} -@keyframes utmDroneMoveA{0%,100%{transform:translate3d(0,0,0) scale(1);} -50%{transform:translate3d(26px,-12px,0) scale(1.04);} -} -@keyframes utmDroneMoveB{0%,100%{transform:translate3d(0,0,0) scale(.82);} -50%{transform:translate3d(-20px,10px,0) scale(.88);} -} -@keyframes utmDronePulse{0%{transform:scale(.7);opacity:.62;} -100%{transform:scale(1.9);opacity:0;} -} -@keyframes utmDronePulseFloat{0%,100%{filter:drop-shadow(0 0 0 rgba(58,64,129,0));} -50%{filter:drop-shadow(0 0 18px rgba(58,64,129,.18));} -} -@keyframes utmDroneColorShift{0%{filter:none;} -45%{filter:none;} -50%{filter:drop-shadow(0 0 10px rgba(243,199,104,.42));} -55%{filter:drop-shadow(0 0 10px rgba(243,199,104,.42));} -100%{filter:none;} -} + +@keyframes utmWaveMove{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}} /* ─── uam ─── */ .airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(58,64,129,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(58,64,129,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);}