Merge branch 'master' of https://github.com/ranchimall/floscout-testnet

css/main.css

@@ -17,7 +17,7 @@ body {
 body {
   --accent-color: #3d5afe;
   --secondary-color: #ffac2e;
-  --text-color: 34, 34, 34;
+  --text-color: 54, 54, 54;
   --foreground-color: 252, 253, 255;
   --background-color: 241, 243, 248;
   --danger-color: rgb(255, 75, 75);
@@ -56,6 +56,7 @@ strong {
   line-height: 1.7;
   color: rgba(var(--text-color), 0.9);
   max-width: 70ch;
+  font-size: 0.9rem;
 }
 
 img {
@@ -87,6 +88,22 @@ a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
 
+input[type=datetime-local] {
+  width: 100%;
+  padding: 0.8rem 0.6rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: rgba(var(--text-color), 0.06);
+}
+input[type=datetime-local]:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.1rem var(--accent-color);
+}
+
 button,
 .button {
   -webkit-user-select: none;
@@ -100,10 +117,10 @@ button,
   color: inherit;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
-  font-size: inherit;
+  font-size: 0.9rem;
   font-weight: 500;
   white-space: nowrap;
-  padding: 0.8rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.3rem;
   justify-content: center;
   flex-shrink: 0;
@@ -122,6 +139,7 @@ button:not(:disabled),
   border: solid thin rgba(var(--text-color), 0.06);
 }
 .button--primary {
+  padding: 0.6rem 1rem;
   color: rgba(var(--background-color), 1);
   background-color: var(--accent-color);
 }
@@ -145,8 +163,12 @@ button:not(:disabled),
   padding: 0.4rem 0.6rem;
 }
 .button--outlined {
-  border: solid rgba(var(--text-color), 0.3) 0.1rem;
+  border: solid var(--accent-color) 1px;
-  background-color: rgba(var(--foreground-color), 1);
+  background-color: transparent;
+  color: var(--accent-color);
+}
+.button--outlined .icon {
+  fill: var(--accent-color);
 }
 .button--transparent {
   background-color: transparent;
@@ -198,7 +220,7 @@ details summary {
           user-select: none;
   cursor: pointer;
   align-items: center;
-  justify-content: space-between;
+  gap: 1rem;
   color: var(--accent-color);
 }
 
@@ -380,6 +402,10 @@ ul {
   justify-content: center;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .justify-right {
   margin-left: auto;
 }
@@ -575,6 +601,17 @@ ul {
   display: none;
 }
 
+.password-field label {
+  display: flex;
+  flex-shrink: 0;
+}
+.password-field label input:checked ~ .visible {
+  display: none;
+}
+.password-field label input:not(:checked) ~ .invisible {
+  display: none;
+}
+
 .multi-state-button {
   display: grid;
   text-align: center;
@@ -586,6 +623,7 @@ ul {
 }
 .multi-state-button button {
   z-index: 1;
+  width: 100%;
 }
 
 #confirmation_popup,
@@ -667,10 +705,102 @@ ul {
   background: rgba(var(--text-color), 0.06);
   margin: 1.5rem 0;
 }
+.card + .card {
+  margin-top: 0;
+}
 .card h2 {
   margin-bottom: 1.5rem;
 }
 
+#main_header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "search theme";
+  margin-top: 1rem;
+  gap: 1rem;
+}
+
+#logo {
+  grid-area: logo;
+  color: inherit;
+  margin-right: auto;
+}
+
+.app-brand {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+}
+.app-brand .icon {
+  height: 1.7rem;
+  width: 1.7rem;
+}
+
+.app-name__company {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+
+theme-toggle {
+  grid-area: theme;
+  justify-self: end;
+  align-self: center;
+}
+
+#search_wrapper {
+  grid-area: search;
+  width: min(28rem, 100%);
+  position: relative;
+}
+
+#main_search_field {
+  width: 100%;
+  --min-height: 2.8rem;
+  font-weight: 500;
+  border: solid thin rgba(var(--text-color), 0.3);
+  border-radius: 0.5rem;
+}
+
+#suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: rgba(var(--foreground-color), 1);
+  border-radius: 0.5rem;
+  z-index: 1;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.2s ease-in-out;
+}
+#suggestions:not(:empty) {
+  margin-top: 0.3rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.16);
+  border: solid thin rgba(var(--text-color), 0.3);
+}
+
+.suggestion {
+  padding: 0.8rem 1rem;
+  display: flex;
+  align-items: center;
+  color: rgba(var(--text-color), 0.9);
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.suggestion:hover, .suggestion:active, .suggestion:focus {
+  background: rgba(var(--text-color), 0.06);
+  outline: none;
+}
+.suggestion .address {
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.6);
+  margin-left: auto;
+}
+
 .transaction-container {
   display: grid;
   margin-top: 1.5rem;
@@ -688,7 +818,7 @@ ul {
 .label:first-of-type {
   margin-top: 0;
 }
-.label + * {
+.label + :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) {
   font-weight: 700;
 }
 
@@ -698,6 +828,8 @@ ul {
 }
 
 #homepage {
+  display: grid;
+  gap: 3rem 1rem;
   padding-top: 0;
 }
 
@@ -751,19 +883,31 @@ header.grid-2 {
   }
 }
 #highlights {
-  padding: 1.5rem 0;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   gap: 1.5rem;
+  margin-top: 2rem;
 }
 #highlights .highlight-item {
+  position: relative;
   opacity: 0;
   display: flex;
   flex-direction: column;
   padding: 1rem 1.5rem;
-  border-left: 0.1rem solid rgba(var(--text-color), 0.2);
+  border-left: 1px solid var(--accent-color);
   --animation-duration: 0.3s;
 }
+#highlights .highlight-item::before {
+  content: "";
+  position: absolute;
+  width: 0.2rem;
+  height: 1rem;
+  top: 0;
+  left: 0;
+  border-radius: 0 0.1rem 0.1rem 0;
+  display: inline-block;
+  background-color: var(--accent-color);
+}
 #highlights .highlight-item .label {
   margin-top: auto;
 }
@@ -797,84 +941,10 @@ header.grid-2 {
           animation: flyInLeft var(--animation-duration) 0.3s forwards;
 }
 
-#main_header {
+#top_smart_contracts_container {
   display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "search theme";
-  margin-top: 1rem;
   gap: 1rem;
-}
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-
-#logo {
-  grid-area: logo;
-  color: inherit;
-}
-
-.app-brand {
-  display: flex;
-  gap: 0.3rem;
-  align-items: center;
-}
-.app-brand .icon {
-  height: 1.7rem;
-  width: 1.7rem;
-}
-
-.app-name__company {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
-}
-
-theme-toggle {
-  grid-area: theme;
-  justify-self: end;
-  align-self: center;
-}
-
-#search_wrapper {
-  grid-area: search;
-  width: min(28rem, 100%);
-  position: relative;
-}
-
-#main_search_field {
-  width: 100%;
-  --min-height: 2.8rem;
-  font-weight: 500;
-}
-
-#suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  background: rgba(var(--foreground-color), 1);
-  border-radius: 0.5rem;
-  z-index: 1;
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.2s ease-in-out;
-}
-#suggestions:not(:empty) {
-  max-height: 20rem;
-  overflow-y: auto;
-}
-
-.suggestion {
-  padding: 0.8rem 1rem;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.suggestion:hover, .suggestion:active, .suggestion:focus {
-  background: rgba(var(--text-color), 0.06);
-  outline: none;
-}
-.suggestion .address {
-  font-size: 0.8rem;
-  color: rgba(var(--text-color), 0.6);
-  margin-left: auto;
 }
 
 #page_header {
@@ -966,6 +1036,9 @@ theme-toggle {
 .status.active::before {
   background-color: var(--green);
 }
+.status.expired::before {
+  background-color: var(--yellow);
+}
 .status.closed::before {
   background-color: var(--danger-color);
 }
@@ -982,14 +1055,18 @@ theme-toggle {
 .address {
   text-transform: none !important;
   word-break: break-all;
+  font-weight: 700;
 }
 
-.contract-choice {
+#winners_container {
+  display: grid;
+  gap: 1rem;
+}
+
+.contract-winner {
   display: grid;
   gap: 0.5rem 1rem;
-}
+  font-size: 0.95rem;
-.contract-choice:last-of-type {
-  margin-bottom: 0;
 }
 
 #token_balance_list {
@@ -1084,9 +1161,8 @@ theme-toggle {
 #all_blocks_page,
 #top_blocks_container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 1rem;
-  margin-top: 1rem;
 }
 
 .block-card {
@@ -1116,11 +1192,11 @@ theme-toggle {
   padding: 1.5rem 0;
 }
 
-#view-wrappe .view-wrapper {
+.view-wrapper {
   display: grid;
   align-items: flex-start;
 }
-#view-wrappe .view-wrapper > * {
+.view-wrapper > * {
   grid-area: 1/1;
 }
 
@@ -1140,6 +1216,7 @@ theme-toggle {
 .participant,
 .deposit-card {
   flex-wrap: wrap;
+  align-items: center;
   gap: 2rem;
   background-color: rgba(var(--foreground-color), 1);
   padding: max(1rem, 1.5vw);
@@ -1148,6 +1225,7 @@ theme-toggle {
 .participant .address,
 .deposit-card .address {
   min-width: 12rem;
+  flex: 1;
 }
 
 #transaction_page {
@@ -1159,15 +1237,43 @@ theme-toggle {
   min-width: 12rem;
 }
 
-#smart_contract_list {
+#goal_progress_wrapper {
+  position: relative;
+  display: flex;
+  height: 0.3rem;
+  background-color: rgba(var(--text-color), 0.3);
+  border-radius: 1rem;
+}
+
+.progress-bar {
+  position: relative;
+  background-color: var(--accent-color);
+  width: var(--progress);
+  border-radius: 1rem;
+}
+
+.goal-milestone {
+  position: relative;
+  align-items: center;
+  padding-top: 1rem;
+  font-size: 0.9rem;
+}
+.goal-milestone:last-of-type {
+  margin-left: auto;
+  text-align: end;
+  align-items: flex-end;
+}
+
+.smart-contract-list {
   display: grid;
   gap: 1rem;
   margin-top: 1rem;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
 
 .sc-card {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
   background-color: rgba(var(--foreground-color), 1);
   padding: max(1rem, 1.5vw);
@@ -1198,15 +1304,13 @@ theme-toggle {
 .sc-card__info-link .icon {
   fill: var(--accent-color);
 }
-.sc-card > :last-child {
+.sc-card .sc-card__actions {
   justify-content: flex-end;
   padding-top: 1rem;
+  margin-top: auto;
 }
-.sc-card > :last-child .button {
+.sc-card .badge {
-  background-color: transparent;
+  margin-right: auto;
-  border: solid 1px var(--accent-color);
-  font-size: 0.9rem;
-  padding: 0.5rem 1rem;
 }
 
 .involved-tokens li {
@@ -1249,6 +1353,194 @@ theme-toggle {
   display: none;
 }
 
+fieldset {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: solid 1px rgba(var(--text-color), 0.3);
+}
+fieldset legend {
+  padding: 0 0.5rem;
+}
+fieldset label {
+  padding: 0.3rem 0.5rem;
+}
+fieldset label:has(input:not(:disabled):not(:checked)) {
+  cursor: pointer;
+}
+fieldset input[type=radio] {
+  height: 1.1em;
+  width: 1.1em;
+  margin-right: 0.5rem;
+  accent-color: var(--accent-color);
+}
+
+#smart_contract_creation_popup {
+  --width: min(32rem, 100%);
+}
+#smart_contract_creation_popup::part(popup) {
+  view-transition-name: sc-popup;
+}
+#smart_contract_creation_popup::part(popup-header) {
+  view-transition-name: sc-popup-header;
+}
+
+::view-transition-old(sc-popup),
+::view-transition-new(sc-popup) {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  height: 100%;
+  width: 100%;
+}
+
+.smart-contract-template {
+  display: grid;
+  grid-template-areas: "heading arrow" "description arrow";
+  grid-template-columns: 1fr auto;
+  padding: max(1rem, 2vw);
+  border: solid 1px rgba(var(--text-color), 0.3);
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+  text-align: start;
+  white-space: normal;
+  width: 100%;
+  justify-content: flex-start;
+}
+.smart-contract-template h4 {
+  grid-area: heading;
+}
+.smart-contract-template p {
+  grid-area: description;
+  font-weight: 400;
+  line-height: 1.3;
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+  text-transform: none;
+}
+.smart-contract-template .icon {
+  margin-top: auto;
+  grid-area: arrow;
+  border: solid 1px rgba(var(--text-color), 0.3);
+  border-radius: 3rem;
+  padding: 0.4rem;
+  height: 2rem;
+  width: 2rem;
+  fill: var(--accent-color);
+}
+
+.payee-address-wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+}
+.payee-address-wrapper:first-of-type {
+  grid-template-areas: "address" "share";
+}
+.payee-address-wrapper:not(:first-of-type) {
+  grid-template-areas: "address address" "share button";
+}
+.payee-address-wrapper .payee-address {
+  grid-area: address;
+}
+.payee-address-wrapper .payee-share {
+  grid-area: share;
+}
+.payee-address-wrapper .icon-only {
+  grid-area: button;
+}
+.payee-address-wrapper .icon-only {
+  height: 3.18rem;
+}
+
+.choice-wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+}
+.choice-wrapper .icon-only {
+  aspect-ratio: 1/1;
+  height: 3.18rem;
+}
+
+#transaction_result {
+  display: grid;
+  gap: 1.5rem;
+  height: max(40vh, 24rem);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  align-content: center;
+}
+#transaction_result:empty {
+  display: none;
+}
+#transaction_result h3 {
+  text-align: center;
+  width: 100%;
+}
+#transaction_result > .icon {
+  justify-self: center;
+  height: 4rem;
+  width: 4rem;
+  border-radius: 5rem;
+  margin-bottom: 1rem;
+  -webkit-animation: popup 1s;
+          animation: popup 1s;
+}
+#transaction_result > .icon--success {
+  fill: rgba(var(--background-color), 1);
+  padding: 1rem;
+  background-color: #0bbe56;
+}
+#transaction_result > .icon--failed {
+  background-color: rgba(var(--text-color), 0.03);
+  fill: var(--danger-color);
+}
+#transaction_result sm-copy {
+  font-size: 0.8rem;
+}
+#transaction_result #transaction_link {
+  justify-self: center;
+}
+
+@-webkit-keyframes popup {
+  0% {
+    opacity: 0;
+    transform: scale(0.2) translateY(600%);
+  }
+  10% {
+    transform: scale(0.2) translateY(5rem);
+    opacity: 1;
+  }
+  40% {
+    transform: scale(0.2) translateY(0);
+  }
+  80% {
+    transform: scale(1.1) translateY(0);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: scale(0.2) translateY(600%);
+  }
+  10% {
+    transform: scale(0.2) translateY(5rem);
+    opacity: 1;
+  }
+  40% {
+    transform: scale(0.2) translateY(0);
+  }
+  80% {
+    transform: scale(1.1) translateY(0);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+  }
+}
 @media only screen and (max-width: 640px) {
   .hide-on-small {
     display: none;
@@ -1286,7 +1578,7 @@ theme-toggle {
   .transaction > .icon:first-of-type {
     grid-area: 1/1/3/2;
   }
-  .contract-choice {
+  .contract-winner {
     grid-template-columns: 2fr 1fr 1fr;
     align-items: center;
   }
@@ -1318,11 +1610,24 @@ theme-toggle {
   .transfer-step > :nth-child(3) {
     flex: 1;
   }
+  .payee-address-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 8rem 3rem;
+  }
+  .payee-address-wrapper:first-of-type {
+    grid-template-areas: "address share share";
+  }
+  .payee-address-wrapper:not(:first-of-type) {
+    grid-template-areas: "address share button";
+  }
 }
 @media only screen and (min-width: 1280px) {
   .margin,
 .page {
-    margin: 0 10vw;
+    margin: 0 8vw;
+  }
+  #homepage {
+    grid-template-columns: 1fr 22rem;
   }
 }
 @media (hover: hover) {

css/main.scss

@@ -17,7 +17,7 @@ body {
 body {
   --accent-color: #3d5afe;
   --secondary-color: #ffac2e;
-  --text-color: 34, 34, 34;
+  --text-color: 54, 54, 54;
   --foreground-color: 252, 253, 255;
   --background-color: 241, 243, 248;
   --danger-color: rgb(255, 75, 75);
@@ -55,6 +55,7 @@ strong {
   line-height: 1.7;
   color: rgba(var(--text-color), 0.9);
   max-width: 70ch;
+  font-size: 0.9rem;
 }
 
 img {
@@ -76,7 +77,21 @@ a {
 a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
-
+input[type="datetime-local"] {
+  width: 100%;
+  padding: 0.8rem 0.6rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: rgba(var(--text-color), 0.06);
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.1rem var(--accent-color);
+  }
+}
 button,
 .button {
   user-select: none;
@@ -88,10 +103,10 @@ button,
   color: inherit;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
-  font-size: inherit;
+  font-size: 0.9rem;
   font-weight: 500;
   white-space: nowrap;
-  padding: 0.8rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.3rem;
   justify-content: center;
   flex-shrink: 0;
@@ -108,6 +123,7 @@ button,
   background-color: rgba(var(--text-color), 0.02);
   border: solid thin rgba(var(--text-color), 0.06);
   &--primary {
+    padding: 0.6rem 1rem;
     color: rgba(var(--background-color), 1);
     background-color: var(--accent-color);
 
@@ -134,8 +150,12 @@ button,
   }
 
   &--outlined {
-    border: solid rgba(var(--text-color), 0.3) 0.1rem;
+    border: solid var(--accent-color) 1px;
-    background-color: rgba(var(--foreground-color), 1);
+    background-color: transparent;
+    color: var(--accent-color);
+    .icon {
+      fill: var(--accent-color);
+    }
   }
   &--transparent {
     background-color: transparent;
@@ -177,7 +197,7 @@ details summary {
   user-select: none;
   cursor: pointer;
   align-items: center;
-  justify-content: space-between;
+  gap: 1rem;
   color: var(--accent-color);
 }
 
@@ -351,6 +371,9 @@ ul {
 .justify-content-center {
   justify-content: center;
 }
+.justify-items-center {
+  justify-items: center;
+}
 
 .justify-right {
   margin-left: auto;
@@ -536,6 +559,18 @@ ul {
 .observe-empty-state:not(:empty) ~ .empty-state {
   display: none;
 }
+.password-field {
+  label {
+    display: flex;
+    flex-shrink: 0;
+    input:checked ~ .visible {
+      display: none;
+    }
+    input:not(:checked) ~ .invisible {
+      display: none;
+    }
+  }
+}
 .multi-state-button {
   display: grid;
   text-align: center;
@@ -546,6 +581,7 @@ ul {
   }
   button {
     z-index: 1;
+    width: 100%;
   }
 }
 
@@ -622,102 +658,11 @@ ul {
   border-radius: 0.5rem;
   background: rgba(var(--text-color), 0.06);
   margin: 1.5rem 0;
-  h2 {
+  & + & {
-    margin-bottom: 1.5rem;
-  }
-}
-.transaction-container {
-  display: grid;
-  margin-top: 1.5rem;
-  gap: 0.5rem;
-}
-.label {
-  text-transform: capitalize;
-  font-size: 0.8rem;
-  margin-bottom: 0.3rem;
-  color: rgba(var(--text-color), 0.8);
-  margin-top: 1.5rem;
-  font-weight: 500;
-  &:first-of-type {
     margin-top: 0;
   }
-  & + * {
+  h2 {
-    font-weight: 700;
+    margin-bottom: 1.5rem;
-  }
-}
-.header {
-  justify-items: center;
-  flex-direction: column;
-}
-#homepage {
-  padding-top: 0;
-}
-#first_section {
-  display: grid;
-}
-header.grid-2 {
-  margin-top: 2rem;
-}
-@keyframes flyInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes flyInRight {
-  from {
-    opacity: 0;
-    transform: translateX(0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-#highlights {
-  padding: 1.5rem 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-  gap: 1.5rem;
-  .highlight-item {
-    opacity: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem 1.5rem;
-    border-left: 0.1rem solid rgba(var(--text-color), 0.2);
-    .label {
-      margin-top: auto;
-    }
-    h1 {
-      font-size: 2rem;
-      letter-spacing: 0.1rem;
-      font-weight: 500;
-      text-transform: uppercase;
-      overflow-wrap: break-word;
-    }
-    &:first-of-type {
-      text-transform: uppercase;
-    }
-    &:nth-of-type(2) {
-      text-transform: capitalize;
-    }
-    --animation-duration: 0.3s;
-    &:first-of-type {
-      animation: flyInLeft var(--animation-duration) forwards;
-    }
-    &:nth-of-type(2) {
-      animation: flyInLeft var(--animation-duration) 0.1s forwards;
-    }
-    &:nth-of-type(3) {
-      animation: flyInLeft var(--animation-duration) 0.2s forwards;
-    }
-    &:last-of-type {
-      animation: flyInLeft var(--animation-duration) 0.3s forwards;
-    }
   }
 }
 #main_header {
@@ -730,6 +675,7 @@ header.grid-2 {
 #logo {
   grid-area: logo;
   color: inherit;
+  margin-right: auto;
 }
 .app-brand {
   display: flex;
@@ -761,6 +707,8 @@ theme-toggle {
   width: 100%;
   --min-height: 2.8rem;
   font-weight: 500;
+  border: solid thin rgba(var(--text-color), 0.3);
+  border-radius: 0.5rem;
 }
 #suggestions {
   position: absolute;
@@ -774,14 +722,20 @@ theme-toggle {
   max-height: 0;
   transition: max-height 0.2s ease-in-out;
   &:not(:empty) {
+    margin-top: 0.3rem;
     max-height: 20rem;
     overflow-y: auto;
+    box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.16);
+    border: solid thin rgba(var(--text-color), 0.3);
   }
 }
 .suggestion {
   padding: 0.8rem 1rem;
   display: flex;
   align-items: center;
+  color: rgba(var(--text-color), 0.9);
+  font-weight: 500;
+  font-size: 0.9rem;
   cursor: pointer;
   &:hover,
   &:active,
@@ -795,6 +749,119 @@ theme-toggle {
     margin-left: auto;
   }
 }
+.transaction-container {
+  display: grid;
+  margin-top: 1.5rem;
+  gap: 0.5rem;
+}
+.label {
+  text-transform: capitalize;
+  font-size: 0.8rem;
+  margin-bottom: 0.3rem;
+  color: rgba(var(--text-color), 0.8);
+  margin-top: 1.5rem;
+  font-weight: 500;
+  &:first-of-type {
+    margin-top: 0;
+  }
+  & + :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) {
+    font-weight: 700;
+  }
+}
+.header {
+  justify-items: center;
+  flex-direction: column;
+}
+#homepage {
+  display: grid;
+  gap: 3rem 1rem;
+  padding-top: 0;
+}
+#first_section {
+  display: grid;
+}
+header.grid-2 {
+  margin-top: 2rem;
+}
+@keyframes flyInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes flyInRight {
+  from {
+    opacity: 0;
+    transform: translateX(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+#highlights {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+  .highlight-item {
+    position: relative;
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 1.5rem;
+    border-left: 1px solid var(--accent-color);
+    &::before {
+      content: "";
+      position: absolute;
+      width: 0.2rem;
+      height: 1rem;
+      top: 0;
+      left: 0;
+      border-radius: 0 0.1rem 0.1rem 0;
+      display: inline-block;
+      background-color: var(--accent-color);
+    }
+    .label {
+      margin-top: auto;
+    }
+    h1 {
+      font-size: 2rem;
+      letter-spacing: 0.1rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      overflow-wrap: break-word;
+    }
+    &:first-of-type {
+      text-transform: uppercase;
+    }
+    &:nth-of-type(2) {
+      text-transform: capitalize;
+    }
+    --animation-duration: 0.3s;
+    &:first-of-type {
+      animation: flyInLeft var(--animation-duration) forwards;
+    }
+    &:nth-of-type(2) {
+      animation: flyInLeft var(--animation-duration) 0.1s forwards;
+    }
+    &:nth-of-type(3) {
+      animation: flyInLeft var(--animation-duration) 0.2s forwards;
+    }
+    &:last-of-type {
+      animation: flyInLeft var(--animation-duration) 0.3s forwards;
+    }
+  }
+}
+#top_smart_contracts_container {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
 #page_header {
   padding: 1rem 0;
   align-items: center;
@@ -880,6 +947,11 @@ theme-toggle {
       background-color: var(--green);
     }
   }
+  &.expired {
+    &::before {
+      background-color: var(--yellow);
+    }
+  }
   &.closed {
     &::before {
       background-color: var(--danger-color);
@@ -897,13 +969,16 @@ theme-toggle {
 .address {
   text-transform: none !important;
   word-break: break-all;
+  font-weight: 700;
 }
-.contract-choice {
+#winners_container {
+  display: grid;
+  gap: 1rem;
+}
+.contract-winner {
   display: grid;
   gap: 0.5rem 1rem;
-  &:last-of-type {
+  font-size: 0.95rem;
-    margin-bottom: 0;
-  }
 }
 #token_balance_list {
   display: flex;
@@ -990,9 +1065,8 @@ theme-toggle {
 #all_blocks_page,
 #top_blocks_container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 1rem;
-  margin-top: 1rem;
 }
 .block-card {
   grid-template-columns: 5rem 1fr auto;
@@ -1018,7 +1092,7 @@ theme-toggle {
 #error_page {
   padding: 1.5rem 0;
 }
-#view-wrappe .view-wrapper {
+.view-wrapper {
   display: grid;
   align-items: flex-start;
   & > * {
@@ -1039,12 +1113,14 @@ theme-toggle {
 .participant,
 .deposit-card {
   flex-wrap: wrap;
+  align-items: center;
   gap: 2rem;
   background-color: rgba(var(--foreground-color), 1);
   padding: max(1rem, 1.5vw);
   border-radius: 0.5rem;
   .address {
     min-width: 12rem;
+    flex: 1;
   }
 }
 #transaction_page {
@@ -1055,17 +1131,42 @@ theme-toggle {
     min-width: 12rem;
   }
 }
+#goal_progress_wrapper {
+  position: relative;
+  display: flex;
+  height: 0.3rem;
+  background-color: rgba(var(--text-color), 0.3);
+  border-radius: 1rem;
+}
+.progress-bar {
+  position: relative;
+  background-color: var(--accent-color);
+  width: var(--progress);
+  border-radius: 1rem;
+}
+.goal-milestone {
+  position: relative;
+  align-items: center;
+  padding-top: 1rem;
+  font-size: 0.9rem;
+  &:last-of-type {
+    margin-left: auto;
+    text-align: end;
+    align-items: flex-end;
+  }
+}
 
 #smart_contract_page {
 }
-#smart_contract_list {
+.smart-contract-list {
   display: grid;
   gap: 1rem;
   margin-top: 1rem;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
 .sc-card {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
   background-color: rgba(var(--foreground-color), 1);
   padding: max(1rem, 1.5vw);
@@ -1095,15 +1196,13 @@ theme-toggle {
       fill: var(--accent-color);
     }
   }
-  > :last-child {
+  .sc-card__actions {
     justify-content: flex-end;
     padding-top: 1rem;
-    .button {
+    margin-top: auto;
-      background-color: transparent;
+  }
-      border: solid 1px var(--accent-color);
+  .badge {
-      font-size: 0.9rem;
+    margin-right: auto;
-      padding: 0.5rem 1rem;
-    }
   }
 }
 .involved-tokens {
@@ -1146,6 +1245,166 @@ theme-toggle {
   }
 }
 
+fieldset {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: solid 1px rgba(var(--text-color), 0.3);
+  legend {
+    padding: 0 0.5rem;
+  }
+  label {
+    padding: 0.3rem 0.5rem;
+    &:has(input:not(:disabled):not(:checked)) {
+      cursor: pointer;
+    }
+  }
+  input[type="radio"] {
+    height: 1.1em;
+    width: 1.1em;
+    margin-right: 0.5rem;
+    accent-color: var(--accent-color);
+  }
+}
+#smart_contract_creation_popup {
+  --width: min(32rem, 100%);
+  &::part(popup) {
+    view-transition-name: sc-popup;
+  }
+  &::part(popup-header) {
+    view-transition-name: sc-popup-header;
+  }
+}
+::view-transition-old(sc-popup),
+::view-transition-new(sc-popup) {
+  animation-duration: 0.3s;
+  height: 100%;
+  width: 100%;
+}
+.smart-contract-template {
+  display: grid;
+  grid-template-areas: "heading arrow" "description arrow";
+  grid-template-columns: 1fr auto;
+  padding: max(1rem, 2vw);
+  border: solid 1px rgba(var(--text-color), 0.3);
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+  text-align: start;
+  white-space: normal;
+  width: 100%;
+  justify-content: flex-start;
+  h4 {
+    grid-area: heading;
+  }
+  p {
+    grid-area: description;
+    font-weight: 400;
+    line-height: 1.3;
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.8);
+    text-transform: none;
+  }
+  .icon {
+    margin-top: auto;
+    grid-area: arrow;
+    border: solid 1px rgba(var(--text-color), 0.3);
+    border-radius: 3rem;
+    padding: 0.4rem;
+    height: 2rem;
+    width: 2rem;
+    fill: var(--accent-color);
+  }
+}
+
+.payee-address-wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+  &:first-of-type {
+    grid-template-areas: "address" "share";
+  }
+  &:not(:first-of-type) {
+    grid-template-areas: "address address" "share button";
+  }
+  .payee-address {
+    grid-area: address;
+  }
+  .payee-share {
+    grid-area: share;
+  }
+  .icon-only {
+    grid-area: button;
+  }
+  .icon-only {
+    height: 3.18rem;
+  }
+}
+.choice-wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+  .icon-only {
+    aspect-ratio: 1/1;
+    height: 3.18rem;
+  }
+}
+#transaction_result {
+  display: grid;
+  gap: 1.5rem;
+  height: max(40vh, 24rem);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  align-content: center;
+  &:empty {
+    display: none;
+  }
+  h3 {
+    text-align: center;
+    width: 100%;
+  }
+  & > .icon {
+    justify-self: center;
+    height: 4rem;
+    width: 4rem;
+    border-radius: 5rem;
+    margin-bottom: 1rem;
+    animation: popup 1s;
+    &--success {
+      fill: rgba(var(--background-color), 1);
+      padding: 1rem;
+      background-color: #0bbe56;
+    }
+    &--failed {
+      background-color: rgba(var(--text-color), 0.03);
+      fill: var(--danger-color);
+    }
+  }
+  sm-copy {
+    font-size: 0.8rem;
+  }
+  #transaction_link {
+    justify-self: center;
+  }
+}
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: scale(0.2) translateY(600%);
+  }
+  10% {
+    transform: scale(0.2) translateY(5rem);
+    opacity: 1;
+  }
+  40% {
+    transform: scale(0.2) translateY(0);
+  }
+  80% {
+    transform: scale(1.1) translateY(0);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+  }
+}
 @media only screen and (max-width: 640px) {
   .hide-on-small {
     display: none;
@@ -1189,7 +1448,7 @@ theme-toggle {
       grid-area: 1/1/3/2;
     }
   }
-  .contract-choice {
+  .contract-winner {
     grid-template-columns: 2fr 1fr 1fr;
     align-items: center;
   }
@@ -1219,11 +1478,24 @@ theme-toggle {
       flex: 1;
     }
   }
+  .payee-address-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 8rem 3rem;
+    &:first-of-type {
+      grid-template-areas: "address share share";
+    }
+    &:not(:first-of-type) {
+      grid-template-areas: "address share button";
+    }
+  }
 }
 @media only screen and (min-width: 1280px) {
   .margin,
   .page {
-    margin: 0 10vw;
+    margin: 0 8vw;
+  }
+  #homepage {
+    grid-template-columns: 1fr 22rem;
   }
 }
 @media (hover: hover) {