phoenix_duskmoon 5.1.0 → 6.0.2

package/assets/css/components/button.css

@@ -0,0 +1,491 @@
+
+@layer components {
+  .btn-noise {
+    position: relative;
+    width: 287px;
+    height: 36px;
+    background: none;
+    font-family: "Josefin Sans", sans-serif;
+    font-size: 24px;
+    cursor: pointer;
+    border: none;
+    --sy: 1;
+    --aps: running;
+    --op: 0;
+
+    &::after {
+      content: attr(data-content);
+      opacity: var(--op, 1);
+      transition: opacity 0.4s;
+    }
+    & > i {
+      position: absolute;
+      left: var(--left, 0);
+      top: 50%;
+      width: 3px;
+      height: 72px;
+      transform: translateY(-50%) scaleY(var(--sy, 0));
+      transition: transform var(--duration) ease-out;
+
+      &::after {
+        content: " ";
+        position: absolute;
+        inset: 0;
+        background-image: linear-gradient(#fff, hsl(var(--hue, 0), 75%, 75%));
+        border-radius: 50%;
+        animation: noise var(--duration) infinite ease-in-out alternate;
+        animation-play-state: var(--aps, paused);
+      }
+
+      &:nth-child(1) {
+        --left: 0px;
+        --duration: 387ms;
+        --size: 0.053;
+        --hue: 0;
+      }
+      &:nth-child(2) {
+        --left: 4px;
+        --duration: 320ms;
+        --size: 0.857;
+        --hue: 5;
+      }
+      &:nth-child(3) {
+        --left: 8px;
+        --duration: 231ms;
+        --size: 0.183;
+        --hue: 10;
+      }
+      &:nth-child(4) {
+        --left: 12px;
+        --duration: 231ms;
+        --size: 0.699;
+        --hue: 15;
+      }
+      &:nth-child(5) {
+        --left: 16px;
+        --duration: 397ms;
+        --size: 0.634;
+        --hue: 20;
+      }
+      &:nth-child(6) {
+        --left: 20px;
+        --duration: 315ms;
+        --size: 0.152;
+        --hue: 25;
+      }
+      &:nth-child(7) {
+        --left: 24px;
+        --duration: 360ms;
+        --size: 0.552;
+        --hue: 30;
+      }
+      &:nth-child(8) {
+        --left: 28px;
+        --duration: 379ms;
+        --size: 0.02;
+        --hue: 35;
+      }
+      &:nth-child(9) {
+        --left: 32px;
+        --duration: 337ms;
+        --size: 0.039;
+        --hue: 40;
+      }
+      &:nth-child(10) {
+        --left: 36px;
+        --duration: 267ms;
+        --size: 0.531;
+        --hue: 45;
+      }
+      &:nth-child(11) {
+        --left: 40px;
+        --duration: 385ms;
+        --size: 0.199;
+        --hue: 50;
+      }
+      &:nth-child(12) {
+        --left: 44px;
+        --duration: 268ms;
+        --size: 0.863;
+        --hue: 55;
+      }
+      &:nth-child(13) {
+        --left: 48px;
+        --duration: 370ms;
+        --size: 0.334;
+        --hue: 60;
+      }
+      &:nth-child(14) {
+        --left: 52px;
+        --duration: 266ms;
+        --size: 0.951;
+        --hue: 65;
+      }
+      &:nth-child(15) {
+        --left: 56px;
+        --duration: 340ms;
+        --size: 0.841;
+        --hue: 70;
+      }
+      &:nth-child(16) {
+        --left: 60px;
+        --duration: 255ms;
+        --size: 0.388;
+        --hue: 75;
+      }
+      &:nth-child(17) {
+        --left: 64px;
+        --duration: 222ms;
+        --size: 0.184;
+        --hue: 80;
+      }
+      &:nth-child(18) {
+        --left: 68px;
+        --duration: 390ms;
+        --size: 0.383;
+        --hue: 85;
+      }
+      &:nth-child(19) {
+        --left: 72px;
+        --duration: 370ms;
+        --size: 0.974;
+        --hue: 90;
+      }
+      &:nth-child(20) {
+        --left: 76px;
+        --duration: 285ms;
+        --size: 0.478;
+        --hue: 95;
+      }
+      &:nth-child(21) {
+        --left: 80px;
+        --duration: 252ms;
+        --size: 0.402;
+        --hue: 100;
+      }
+      &:nth-child(22) {
+        --left: 84px;
+        --duration: 298ms;
+        --size: 0.567;
+        --hue: 105;
+      }
+      &:nth-child(23) {
+        --left: 88px;
+        --duration: 389ms;
+        --size: 0.926;
+        --hue: 110;
+      }
+      &:nth-child(24) {
+        --left: 92px;
+        --duration: 368ms;
+        --size: 0.137;
+        --hue: 115;
+      }
+      &:nth-child(25) {
+        --left: 96px;
+        --duration: 219ms;
+        --size: 0.111;
+        --hue: 120;
+      }
+      &:nth-child(26) {
+        --left: 100px;
+        --duration: 344ms;
+        --size: 0.12;
+        --hue: 125;
+      }
+      &:nth-child(27) {
+        --left: 104px;
+        --duration: 329ms;
+        --size: 0.368;
+        --hue: 130;
+      }
+      &:nth-child(28) {
+        --left: 108px;
+        --duration: 241ms;
+        --size: 0.316;
+        --hue: 135;
+      }
+      &:nth-child(29) {
+        --left: 112px;
+        --duration: 393ms;
+        --size: 0.463;
+        --hue: 140;
+      }
+      &:nth-child(30) {
+        --left: 116px;
+        --duration: 304ms;
+        --size: 0.372;
+        --hue: 145;
+      }
+      &:nth-child(31) {
+        --left: 120px;
+        --duration: 300ms;
+        --size: 0.39;
+        --hue: 150;
+      }
+      &:nth-child(32) {
+        --left: 124px;
+        --duration: 366ms;
+        --size: 0.785;
+        --hue: 155;
+      }
+      &:nth-child(33) {
+        --left: 128px;
+        --duration: 337ms;
+        --size: 0.499;
+        --hue: 160;
+      }
+      &:nth-child(34) {
+        --left: 132px;
+        --duration: 262ms;
+        --size: 0.724;
+        --hue: 165;
+      }
+      &:nth-child(35) {
+        --left: 136px;
+        --duration: 230ms;
+        --size: 0.406;
+        --hue: 170;
+      }
+      &:nth-child(36) {
+        --left: 140px;
+        --duration: 333ms;
+        --size: 0.057;
+        --hue: 175;
+      }
+      &:nth-child(37) {
+        --left: 144px;
+        --duration: 348ms;
+        --size: 0.347;
+        --hue: 180;
+      }
+      &:nth-child(38) {
+        --left: 148px;
+        --duration: 229ms;
+        --size: 0.683;
+        --hue: 185;
+      }
+      &:nth-child(39) {
+        --left: 152px;
+        --duration: 240ms;
+        --size: 0.072;
+        --hue: 190;
+      }
+      &:nth-child(40) {
+        --left: 156px;
+        --duration: 325ms;
+        --size: 0.557;
+        --hue: 195;
+      }
+      &:nth-child(41) {
+        --left: 160px;
+        --duration: 304ms;
+        --size: 0.42;
+        --hue: 200;
+      }
+      &:nth-child(42) {
+        --left: 164px;
+        --duration: 202ms;
+        --size: 0.406;
+        --hue: 205;
+      }
+      &:nth-child(43) {
+        --left: 168px;
+        --duration: 383ms;
+        --size: 0.818;
+        --hue: 210;
+      }
+      &:nth-child(44) {
+        --left: 172px;
+        --duration: 362ms;
+        --size: 0.09;
+        --hue: 215;
+      }
+      &:nth-child(45) {
+        --left: 176px;
+        --duration: 393ms;
+        --size: 0.61;
+        --hue: 220;
+      }
+      &:nth-child(46) {
+        --left: 180px;
+        --duration: 287ms;
+        --size: 0.166;
+        --hue: 225;
+      }
+      &:nth-child(47) {
+        --left: 184px;
+        --duration: 333ms;
+        --size: 0.472;
+        --hue: 230;
+      }
+      &:nth-child(48) {
+        --left: 188px;
+        --duration: 223ms;
+        --size: 0.035;
+        --hue: 235;
+      }
+      &:nth-child(49) {
+        --left: 192px;
+        --duration: 310ms;
+        --size: 0.117;
+        --hue: 240;
+      }
+      &:nth-child(50) {
+        --left: 196px;
+        --duration: 220ms;
+        --size: 0.943;
+        --hue: 245;
+      }
+      &:nth-child(51) {
+        --left: 200px;
+        --duration: 219ms;
+        --size: 0.221;
+        --hue: 250;
+      }
+      &:nth-child(52) {
+        --left: 204px;
+        --duration: 274ms;
+        --size: 0.555;
+        --hue: 255;
+      }
+      &:nth-child(53) {
+        --left: 208px;
+        --duration: 339ms;
+        --size: 0.712;
+        --hue: 260;
+      }
+      &:nth-child(54) {
+        --left: 212px;
+        --duration: 214ms;
+        --size: 0.857;
+        --hue: 265;
+      }
+      &:nth-child(55) {
+        --left: 216px;
+        --duration: 215ms;
+        --size: 0.565;
+        --hue: 270;
+      }
+      &:nth-child(56) {
+        --left: 220px;
+        --duration: 247ms;
+        --size: 0.684;
+        --hue: 275;
+      }
+      &:nth-child(57) {
+        --left: 224px;
+        --duration: 283ms;
+        --size: 0.134;
+        --hue: 280;
+      }
+      &:nth-child(58) {
+        --left: 228px;
+        --duration: 362ms;
+        --size: 0.734;
+        --hue: 285;
+      }
+      &:nth-child(59) {
+        --left: 232px;
+        --duration: 363ms;
+        --size: 0.622;
+        --hue: 290;
+      }
+      &:nth-child(60) {
+        --left: 236px;
+        --duration: 396ms;
+        --size: 0.095;
+        --hue: 295;
+      }
+      &:nth-child(61) {
+        --left: 240px;
+        --duration: 245ms;
+        --size: 0.847;
+        --hue: 300;
+      }
+      &:nth-child(62) {
+        --left: 244px;
+        --duration: 278ms;
+        --size: 0.169;
+        --hue: 305;
+      }
+      &:nth-child(63) {
+        --left: 248px;
+        --duration: 375ms;
+        --size: 0.185;
+        --hue: 310;
+      }
+      &:nth-child(64) {
+        --left: 252px;
+        --duration: 392ms;
+        --size: 0.357;
+        --hue: 315;
+      }
+      &:nth-child(65) {
+        --left: 256px;
+        --duration: 315ms;
+        --size: 0.284;
+        --hue: 320;
+      }
+      &:nth-child(66) {
+        --left: 260px;
+        --duration: 215ms;
+        --size: 0.508;
+        --hue: 325;
+      }
+      &:nth-child(67) {
+        --left: 264px;
+        --duration: 372ms;
+        --size: 0.019;
+        --hue: 330;
+      }
+      &:nth-child(68) {
+        --left: 268px;
+        --duration: 232ms;
+        --size: 0.906;
+        --hue: 335;
+      }
+      &:nth-child(69) {
+        --left: 272px;
+        --duration: 262ms;
+        --size: 0.974;
+        --hue: 340;
+      }
+      &:nth-child(70) {
+        --left: 276px;
+        --duration: 349ms;
+        --size: 0.302;
+        --hue: 345;
+      }
+      &:nth-child(71) {
+        --left: 280px;
+        --duration: 293ms;
+        --size: 1;
+        --hue: 350;
+      }
+      &:nth-child(72) {
+        --left: 284px;
+        --duration: 315ms;
+        --size: 0.186;
+        --hue: 355;
+      }
+
+    }
+
+    &:hover {
+      border: none;
+      --sy: 1;
+      --aps: running;
+      --op: 0;
+    }
+  }
+
+  @keyframes noise {
+    0% {
+      transform: scaleY(calc(1 - (var(--size, 0))));
+    }
+    100% {
+      transform: scaleY(calc(1 + (var(--size, 0))));
+    }
+  }
+}

package/assets/css/components/eclipse.css

@@ -0,0 +1,75 @@
+
+@layer components {
+  .eclipse {
+    --bg-color: #09090b;
+    --r: 600px;
+    width: var(--r);
+    height: var(--r);
+    position: relative;
+    overflow: hidden;
+
+    .layer {
+      position: absolute;
+      inset: 0;
+    }
+  
+    .layer-1 {
+      animation: 30s linear rotate infinite;
+      transform-origin: 66% 40%;
+      background:
+        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.46) 3.96%, rgba(69,168,255,0) 8.33%, rgba(69,168,255,0) 8.33%) 69.5% 37.7% / 17.2% 17.2% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,1) 0%, rgba(69,168,255,0) 47.22%) 74.1% 35.6% / 33.6% 36.6% no-repeat; 
+    }
+  
+    .layer-2 {
+      animation: 20s linear rotate infinite reverse;
+      transform-origin: 66% 40%;
+      background:
+              radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 20%, var(--bg-color) 29%) 77.4% 33.8% / 40% 40% no-repeat, 
+              repeating-conic-gradient(from 15deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.51) 2.64%, rgba(69,168,255,0) 5.56%, rgba(69,168,255,0) 5.56%) 69.5% 37.7% / 17.2% 17.2% no-repeat; 
+    }
+  
+    .layer-3 {
+      animation: 20s linear rotate infinite;
+      background:
+        repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 8.1%, rgba(69,168,255,0) 16.67%, rgba(69,168,255,0) 16.67%) 0 0 / 100% 100% no-repeat; 
+    }
+  
+    .layer-4 {
+      animation: 40s linear rotate infinite reverse;
+      background:
+        repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 2.86%, rgba(69,168,255,0) 5.88%, rgba(69,168,255,0) 5.88%) 0% 0% / 100% 100% no-repeat; 
+    }
+  
+    .layer-5 {
+      animation: 40s linear rotate infinite;
+      background:
+        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 6.62%, rgba(69,168,255,0) 7.69%, rgba(69,168,255,0) 7.69%) 0% 0% / 100% 100% no-repeat; 
+    }
+  
+    .layer-6 {
+      background:
+        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.27) 0%, rgba(69,168,255,0) 63.54%) 67% 39.3% / 5.8% 5.8% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 40.28%, rgba(255,183,163,0.05) 52.43%, rgba(69,168,255,0) 63.54%) 68% 38.6% / 13% 13% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.55) 0%, rgba(69,168,255,0) 63.54%) 66.9% 39.3% / 3.4% 3.4% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.2) 0%, rgba(69,168,255,0) 66.67%) 70.7% 36.5% / 25.6% 25.6% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, var(--bg-color) 26%, rgba(69,168,255,0) 26.4%) 0% 0% / 100% 100% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(255,212,148,0.04) 0%, rgba(69,168,255,0) 69.79%) 0% 0% / 100% 100% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(255,240,148,0.11) 0%, rgba(69,168,255,0) 52.43%) 0% 0% / 100% 100% no-repeat, 
+        radial-gradient(ellipse at 51% 49%, rgba(69,168,255,0) 23.96%, var(--bg-color) 40.63%) 0% 0% / 100% 100% no-repeat, 
+        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,239,69,0.14) 11.04%, rgba(69,168,255,0) 20%, rgba(69,168,255,0) 20%) 0% 0% / 100% 100% no-repeat, 
+        radial-gradient(ellipse at 52% 48%, rgba(69,168,255,0) 23.96%, var(--bg-color) 34.03%) 0% 0% / 100% 100% no-repeat, 
+        radial-gradient(ellipse at 50% 50%, rgba(255,185,147,0.29) 28%, rgba(69,168,255,0) 30%) 0% 0% / 100% 100% no-repeat; 
+    }
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/assets/css/components/footer-bubbles.css

@@ -0,0 +1,40 @@
+
+@layer components {
+  .footer-bubbles {
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    height:1rem;
+    background: var(--footer-bg-color);
+
+    .bubble {
+        position: absolute;
+        left:var(--position, 50%);
+        background: var(--footer-bg-color);
+        border-radius:100%;
+        animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
+            bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
+        transform:translate(-50%, 100%);
+    }
+  }
+
+  @keyframes bubble-size {
+    0%, 75% {
+        width:var(--size, 4rem);
+        height:var(--size, 4rem);
+    }
+    100% {
+        width:0rem;
+        height:0rem;
+    }
+  }
+  @keyframes bubble-move {
+    0% {
+        bottom:-4rem;
+    }
+    100% {
+        bottom:var(--distance, 10rem);
+    }
+  }
+}