feat(console): Update /black plan selection, light rays effect. mobile styles (#8731)

Co-authored-by: Github Action <[email protected]>

1 files changed, 306 insertions, 262 deletions

diff --git a/packages/console/app/src/routes/black.css b/packages/console/app/src/routes/black.css
index 99353f273..a0cd5712b 100644
--- a/packages/console/app/src/routes/black.css
+++ b/packages/console/app/src/routes/black.css
@@ -1,3 +1,135 @@
+::view-transition-group(*) {
+  animation-duration: 250ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 250ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+::view-transition-image-pair(root) {
+  isolation: isolate;
+}
+
+::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-terms {
+  from {
+    mask-position: 0% 200%;
+  }
+  to {
+    mask-position: 0% 50%;
+  }
+}
+
+@keyframes hide-terms {
+  from {
+    mask-position: 0% 50%;
+  }
+  to {
+    mask-position: 0% 200%;
+  }
+}
+
+::view-transition-old(terms-20),
+::view-transition-old(terms-100),
+::view-transition-old(terms-200) {
+  mask-image: linear-gradient(to bottom, transparent, black 25% 75%, transparent);
+  mask-repeat: no-repeat;
+  mask-size: 100% 200%;
+  animation: hide-terms 200ms cubic-bezier(0.25, 0, 0.5, 1) forwards;
+}
+
+::view-transition-new(terms-20),
+::view-transition-new(terms-100),
+::view-transition-new(terms-200) {
+  mask-image: linear-gradient(to bottom, transparent, black 25% 75%, transparent);
+  mask-repeat: no-repeat;
+  mask-position: 0% 200%;
+  mask-size: 100% 200%;
+  animation: reveal-terms 300ms cubic-bezier(0.25, 0, 0.5, 1) 50ms forwards;
+}
+
+::view-transition-old(action-20),
+::view-transition-old(action-100),
+::view-transition-old(action-200) {
+  animation: fade-out 100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+::view-transition-new(action-20),
+::view-transition-new(action-100),
+::view-transition-new(action-200) {
+  animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
+  opacity: 0;
+}
+
+::view-transition-group(plan-card-20),
+::view-transition-group(plan-card-100),
+::view-transition-group(plan-card-200) {
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+::view-transition-image-pair(plan-card-20),
+::view-transition-image-pair(plan-card-100),
+::view-transition-image-pair(plan-card-200) {
+  isolation: isolate;
+}
+
+::view-transition-old(plan-card-20),
+::view-transition-old(plan-card-100),
+::view-transition-old(plan-card-200) {
+  animation: fade-out 120ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(plan-card-20),
+::view-transition-new(plan-card-100),
+::view-transition-new(plan-card-200) {
+  animation: fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1) 50ms forwards;
+  opacity: 0;
+  mix-blend-mode: normal;
+}
+
 [data-page="black"] {
   background: #000;
   min-height: 100vh;
@@ -8,13 +140,18 @@
   font-family: var(--font-mono);
   color: #fff;
 
-  [data-component="header-gradient"] {
+  [data-component="header-logo"] {
+    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
+    position: relative;
+    z-index: 1;
+  }
+
+  .header-light-rays {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 288px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
+    inset: 0 0 auto 0;
+    height: 30dvh;
+    pointer-events: none;
+    z-index: 0;
   }
 
   [data-component="header"] {
@@ -48,27 +185,35 @@
 
       h1 {
         color: rgba(255, 255, 255, 0.92);
-        font-size: 18px;
+        font-size: 16px;
         font-style: normal;
         font-weight: 400;
-        line-height: 160%;
+        line-height: 1.45;
         margin: 0;
 
         @media (min-width: 768px) {
-          font-size: 22px;
+          font-size: 20px;
+        }
+
+        @media (max-width: 480px) {
+          font-size: 14px;
         }
       }
 
       p {
         color: rgba(255, 255, 255, 0.59);
-        font-size: 18px;
+        font-size: 16px;
         font-style: normal;
         font-weight: 400;
-        line-height: 160%;
+        line-height: 1.45;
         margin: 0;
 
         @media (min-width: 768px) {
-          font-size: 22px;
+          font-size: 20px;
+        }
+
+        @media (max-width: 480px) {
+          font-size: 14px;
         }
       }
     }
@@ -76,30 +221,36 @@
     [data-slot="hero-black"] {
       margin-top: 40px;
       padding: 0 20px;
+      position: relative;
 
       @media (min-width: 768px) {
         margin-top: 60px;
       }
 
       svg {
-        --hero-black-fill-from: hsl(0 0% 100%);
-        --hero-black-fill-to: hsl(0 0% 100% / 0%);
-        --hero-black-stroke-from: hsl(0 0% 100% / 60%);
-        --hero-black-stroke-to: hsl(0 0% 100% / 0%);
-
         width: 100%;
         max-width: 590px;
         height: auto;
-        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
+        overflow: visible;
+        filter: drop-shadow(0 0 20px rgba(255, 255, 255, calc(0.1 + var(--hero-black-glow-intensity, 0) * 0.15)))
+          drop-shadow(0 -5px 30px rgba(255, 255, 255, calc(var(--hero-black-glow-intensity, 0) * 0.2)));
         mask-image: linear-gradient(to bottom, black, transparent);
         stroke-width: 1.5;
 
-        [data-slot="black-fill"] {
+        [data-slot="black-base"] {
           fill: url(#hero-black-fill-gradient);
+          stroke: url(#hero-black-stroke-gradient);
         }
 
-        [data-slot="black-stroke"] {
-          fill: url(#hero-black-stroke-gradient);
+        [data-slot="black-glow"] {
+          fill: url(#hero-black-top-glow);
+          pointer-events: none;
+        }
+
+        [data-slot="black-shimmer"] {
+          fill: url(#hero-black-shimmer-gradient);
+          pointer-events: none;
+          mix-blend-mode: overlay;
         }
       }
     }
@@ -107,14 +258,14 @@
     [data-slot="cta"] {
       display: flex;
       flex-direction: column;
-      gap: 32px;
+      gap: 16px;
       align-items: center;
       text-align: center;
-      margin-top: -32px;
+      margin-top: -40px;
       width: 100%;
 
       @media (min-width: 768px) {
-        margin-top: -16px;
+        margin-top: -20px;
       }
 
       [data-slot="heading"] {
@@ -129,7 +280,6 @@
           display: inline-block;
         }
       }
-
       [data-slot="subheading"] {
         color: rgba(255, 255, 255, 0.59);
         font-size: 15px;
@@ -142,7 +292,6 @@
           line-height: 160%;
         }
       }
-
       [data-slot="button"] {
         display: inline-flex;
         height: 40px;
@@ -154,7 +303,7 @@
         background: rgba(255, 255, 255, 0.92);
         text-decoration: none;
         color: #000;
-        font-family: var(--font-mono);
+        font-family: "JetBrains Mono Nerd Font";
         font-size: 16px;
         font-style: normal;
         font-weight: 500;
@@ -168,16 +317,14 @@
           transform: scale(0.98);
         }
       }
-
       [data-slot="back-soon"] {
         color: rgba(255, 255, 255, 0.59);
         text-align: center;
         font-size: 13px;
         font-style: normal;
         font-weight: 400;
-        line-height: 160%;
+        line-height: 160%; /* 20.8px */
       }
-
       [data-slot="follow-us"] {
         display: inline-flex;
         height: 40px;
@@ -201,98 +348,99 @@
         flex-direction: column;
         gap: 16px;
         width: 100%;
-        max-width: 680px;
+        max-width: 660px;
         padding: 0 20px;
-        box-sizing: border-box;
+
+        @media (min-width: 768px) {
+          padding: 0;
+        }
       }
 
       [data-slot="pricing-card"] {
         display: flex;
         flex-direction: column;
-        align-items: flex-start;
+        gap: 12px;
+        padding: 24px;
         border: 1px solid rgba(255, 255, 255, 0.17);
-        border-radius: 5px;
+        background-color: rgba(0, 0, 0, 0.75);
+        backdrop-filter: blur(4px);
+        background-clip: padding-box;
+        border-radius: 4px;
         text-decoration: none;
-        background: #000;
+        transition: border-color 0.15s ease;
+        cursor: pointer;
         text-align: left;
-        overflow: hidden;
-        width: 100%;
-        transition: border-color 200ms ease;
 
-        &:hover:not([data-selected="true"]) {
-          border-color: rgba(255, 255, 255, 0.35);
+        @media (max-width: 480px) {
+          padding: 16px;
         }
 
-        [data-slot="card-trigger"] {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          width: 100%;
-          padding: 24px;
-          background: transparent;
-          border: none;
-          cursor: pointer;
-          font-family: inherit;
-          text-align: left;
-          transition: padding 200ms ease;
-
-          &:disabled {
-            cursor: default;
-          }
+        &:hover:not(:active) {
+          border-color: rgba(255, 255, 255, 0.35);
         }
 
-        &[data-selected="true"] {
-          [data-slot="amount"] {
-            font-size: 22px;
-          }
+        [data-slot="icon"] {
+          color: rgba(255, 255, 255, 0.59);
+        }
 
-          [data-slot="terms"] {
-            animation: reveal 500ms cubic-bezier(0.25, 0, 0.5, 1) forwards;
-          }
+        [data-slot="price"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: baseline;
+          gap: 8px;
+        }
 
-          [data-slot="actions"] {
-            [data-slot="continue"] {
-              animation-delay: 200ms;
-            }
-          }
+        [data-slot="amount"] {
+          color: rgba(255, 255, 255, 0.92);
+          font-size: 24px;
+          font-weight: 500;
         }
 
-        &[data-collapsed="true"] {
-          [data-slot="card-trigger"] {
-            padding: 20px 24px;
-          }
+        [data-slot="period"] {
+          color: rgba(255, 255, 255, 0.59);
+          font-size: 14px;
+        }
 
-          [data-slot="plan-header"] {
-            flex-direction: row;
-          }
+        [data-slot="multiplier"] {
+          color: rgba(255, 255, 255, 0.39);
+          font-size: 14px;
 
-          [data-slot="amount"] {
-            font-size: 20px;
+          &::before {
+            content: "·";
+            margin-right: 8px;
           }
         }
+      }
 
-        &[data-selected="false"][data-collapsed="false"] {
-          [data-slot="amount"] {
-            font-size: 22px;
-          }
+      [data-slot="selected-plan"] {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        width: 100%;
+        max-width: 660px;
+        margin: 0 auto;
+        position: relative;
+        background-color: rgba(0, 0, 0, 0.75);
+        backdrop-filter: blur(4px);
+        z-index: 1;
 
-          [data-slot="period"],
-          [data-slot="multiplier"] {
-            font-size: 14px;
-          }
+        @media (max-width: 480px) {
+          margin: 0 20px;
+          width: calc(100% - 40px);
         }
+      }
 
-        [data-slot="plan-header"] {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          gap: 12px;
-          transition: gap 200ms ease;
-        }
+      [data-slot="selected-card"] {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 24px;
+        border: 1px solid rgba(255, 255, 255, 0.17);
+        border-radius: 4px;
+        width: 100%;
 
-        [data-slot="plan-icon"] {
+        [data-slot="icon"] {
           color: rgba(255, 255, 255, 0.59);
-          flex-shrink: 0;
         }
 
         [data-slot="price"] {
@@ -300,31 +448,22 @@
           flex-wrap: wrap;
           align-items: baseline;
           gap: 8px;
-          line-height: 24px;
-          margin: 0;
         }
 
         [data-slot="amount"] {
           color: rgba(255, 255, 255, 0.92);
+          font-size: 24px;
           font-weight: 500;
         }
 
-        [data-slot="content"] {
-          width: 100%;
-        }
-
-        [data-slot="period"],
-        [data-slot="multiplier"] {
-          color: rgba(255, 255, 255, 0.59);
-        }
-
-        [data-slot="billing"] {
+        [data-slot="period"] {
           color: rgba(255, 255, 255, 0.59);
           font-size: 14px;
         }
 
         [data-slot="multiplier"] {
           color: rgba(255, 255, 255, 0.39);
+          font-size: 14px;
 
           &::before {
             content: "·";
@@ -334,32 +473,30 @@
 
         [data-slot="terms"] {
           list-style: none;
-          padding: 0 24px 24px 24px;
+          padding: 0;
           margin: 0;
           display: flex;
           flex-direction: column;
-          gap: 12px;
+          gap: 8px;
           text-align: left;
-          width: 100%;
-          opacity: 0;
-          mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
-          mask-repeat: no-repeat;
-          mask-size: 100% 200%;
-          mask-position: 0% 320%;
-        }
 
-        [data-slot="terms"] li {
-          color: rgba(255, 255, 255, 0.59);
-          font-size: 13px;
-          line-height: 1.2;
-          padding-left: 16px;
-          position: relative;
+          li {
+            color: rgba(255, 255, 255, 0.59);
+            font-size: 14px;
+            line-height: 1.5;
+            padding-left: 16px;
+            position: relative;
+
+            &::before {
+              content: "▪";
+              position: absolute;
+              left: 0;
+              color: rgba(255, 255, 255, 0.39);
+            }
 
-          &::before {
-            content: "▪";
-            position: absolute;
-            left: 0;
-            color: rgba(255, 255, 255, 0.39);
+            @media (max-width: 768px) {
+              font-size: 12px;
+            }
           }
         }
 
@@ -367,48 +504,45 @@
           display: flex;
           gap: 16px;
           margin-top: 8px;
-          padding: 0 24px 24px 24px;
-          box-sizing: border-box;
-          width: 100%;
-        }
 
-        [data-slot="actions"] button,
-        [data-slot="actions"] a {
-          flex: 1;
-          display: inline-flex;
-          height: 48px;
-          padding: 0 16px;
-          justify-content: center;
-          align-items: center;
-          border-radius: 4px;
-          font-family: var(--font-mono);
-          font-size: 16px;
-          font-weight: 400;
-          text-decoration: none;
-          cursor: pointer;
-          transition-property: background-color, border-color;
-          transition-duration: 200ms;
-          transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
-        }
-
-        [data-slot="cancel"] {
-          border: 1px solid var(--border-base, rgba(255, 255, 255, 0.17));
-          background: var(--surface-raised-base, rgba(255, 255, 255, 0.06));
-          background-clip: border-box;
-          color: rgba(255, 255, 255, 0.92);
+          button,
+          a {
+            flex: 1;
+            display: inline-flex;
+            height: 48px;
+            padding: 0 16px;
+            justify-content: center;
+            align-items: center;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 16px;
+            font-weight: 400;
+            text-decoration: none;
+            cursor: pointer;
+          }
 
-          &:hover {
-            background: var(--surface-raised-base, rgba(255, 255, 255, 0.08));
-            border-color: rgba(255, 255, 255, 0.25);
+          [data-slot="cancel"] {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.17);
+            color: rgba(255, 255, 255, 0.92);
+            transition-property: background-color, border-color;
+            transition-duration: 150ms;
+            transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
+
+            &:hover {
+              background-color: rgba(255, 255, 255, 0.08);
+              border-color: rgba(255, 255, 255, 0.25);
+            }
           }
-        }
 
-        [data-slot="continue"] {
-          background: rgb(255, 255, 255);
-          color: rgb(0, 0, 0);
+          [data-slot="continue"] {
+            background: rgb(255, 255, 255);
+            color: rgb(0, 0, 0);
+            transition: background-color 150ms cubic-bezier(0.25, 0, 0.5, 1);
 
-          &:hover {
-            background: rgb(255, 255, 255, 0.9);
+            &:hover {
+              background: rgba(255, 255, 255, 0.9);
+            }
           }
         }
       }
@@ -419,7 +553,8 @@
         font-size: 13px;
         font-style: normal;
         font-weight: 400;
-        line-height: 160%;
+        line-height: 160%; /* 20.8px */
+        font-style: italic;
 
         a {
           color: rgba(255, 255, 255, 0.39);
@@ -436,7 +571,7 @@
       align-items: center;
       margin-top: -18px;
       width: 100%;
-      max-width: 540px;
+      max-width: 660px;
       padding: 0 20px;
 
       @media (min-width: 768px) {
@@ -491,7 +626,7 @@
 
       [data-slot="multiplier"] {
         color: rgba(255, 255, 255, 0.39);
-        font-size: 13px;
+        font-size: 14px;
 
         &::before {
           content: "·";
@@ -510,39 +645,6 @@
         font-weight: 400;
       }
 
-      [data-slot="tax-id-section"] {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-
-        [data-slot="label"] {
-          color: rgba(255, 255, 255, 0.59);
-          font-size: 14px;
-        }
-
-        [data-slot="input"] {
-          width: 100%;
-          height: 44px;
-          padding: 0 12px;
-          background: #1a1a1a;
-          border: 1px solid rgba(255, 255, 255, 0.17);
-          border-radius: 4px;
-          color: #ffffff;
-          font-family: var(--font-mono);
-          font-size: 14px;
-          outline: none;
-          transition: border-color 0.15s ease;
-
-          &::placeholder {
-            color: rgba(255, 255, 255, 0.39);
-          }
-
-          &:focus {
-            border-color: rgba(255, 255, 255, 0.35);
-          }
-        }
-      }
-
       [data-slot="checkout-form"] {
         display: flex;
         flex-direction: column;
@@ -583,52 +685,6 @@
         text-align: center;
       }
 
-      [data-slot="success"] {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-
-        [data-slot="title"] {
-          color: rgba(255, 255, 255, 0.92);
-          font-size: 18px;
-          font-weight: 400;
-          margin: 0;
-        }
-
-        [data-slot="details"] {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-
-          > div {
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-            gap: 16px;
-          }
-
-          dt {
-            color: rgba(255, 255, 255, 0.59);
-            font-size: 14px;
-            font-weight: 400;
-          }
-
-          dd {
-            color: rgba(255, 255, 255, 0.92);
-            font-size: 14px;
-            font-weight: 400;
-            margin: 0;
-            text-align: right;
-          }
-        }
-
-        [data-slot="charge-notice"] {
-          color: #d4a500;
-          font-size: 14px;
-          text-align: left;
-        }
-      }
-
       [data-slot="loading"] {
         display: flex;
         justify-content: center;
@@ -645,6 +701,7 @@
         text-align: center;
         font-size: 13px;
         font-style: italic;
+        view-transition-name: fine-print;
 
         a {
           color: rgba(255, 255, 255, 0.39);
@@ -739,7 +796,7 @@
       span,
       a {
         color: rgba(255, 255, 255, 0.39);
-        font-family: var(--font-mono);
+        font-family: "JetBrains Mono Nerd Font";
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
@@ -749,7 +806,7 @@
 
       [data-slot="github-stars"] {
         color: rgba(255, 255, 255, 0.25);
-        font-family: var(--font-mono);
+        font-family: "JetBrains Mono Nerd Font";
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
@@ -764,10 +821,9 @@
         }
       }
     }
-
     [data-slot="anomaly-alt"] {
       color: rgba(255, 255, 255, 0.39);
-      font-family: var(--font-mono);
+      font-family: "JetBrains Mono Nerd Font";
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
@@ -777,7 +833,7 @@
 
       a {
         color: rgba(255, 255, 255, 0.39);
-        font-family: "JetBrains Mono Nerd Font", monospace;
+        font-family: "JetBrains Mono Nerd Font";
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
@@ -791,15 +847,3 @@
     }
   }
 }
-
-::view-transition-group(*) {
-  animation-duration: 200ms;
-  animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
-}
-
-@keyframes reveal {
-  100% {
-    mask-position: 0% 0%;
-    opacity: 1;
-  }
-}