add: new design (wip)

New design as WIP, swipe controls

app/assets/styles/footer.css

@@ -1,5 +1,5 @@
 .Footer {
-    background: var(--color-main-darkest);
+    background: var(--color-darkest);
     padding: 1rem;
 
     & h4 {

app/assets/styles/header.css

@@ -3,7 +3,8 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--padding-default);
-    background-color: var(--color-lightest);
+    background-color: rgba(255 255 255 / .8);
+    backdrop-filter: blur(10px);
     box-shadow: var(--box-shadow-z2);
     color: var(--color-darkest);
     position: sticky;

app/assets/styles/priceCard.css

@@ -71,7 +71,7 @@
 
             & > span:nth-child(1) {
                 font-weight: bold;
-                max-width: 150px;
+                max-width: 210px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -80,7 +80,7 @@
             & > span:nth-child(2)::before {
                 content: '•';
                 margin-right: .5rem;
-                opacity: .5;
+                color: var(--color-middle);
             }
         }
 
@@ -105,7 +105,7 @@
                 & > .pro {
                     font-size: .6rem;
                     font-weight: bold;
-                    opacity: .7;
+                    color: var(--color-middle);
                 }
             }
         }

app/assets/styles/toolbar.css

@@ -1,7 +1,7 @@
 .Toolbar {
     display: flex;
     justify-content: space-evenly;
-    background: var(--color-gradient-main-dark);
+    background: var(--color-main-darkest);
     position: sticky;
     bottom: 0;
     box-shadow: var(--box-shadow-upper);