Update index.html

-- UI/UX improvements

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 {
@@ -116,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;
@@ -138,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);
 }
@@ -161,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;
@@ -396,6 +402,10 @@ ul {
   justify-content: center;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .justify-right {
   margin-left: auto;
 }
@@ -695,134 +705,11 @@ ul {
   background: rgba(var(--text-color), 0.06);
   margin: 1.5rem 0;
 }
-.card h2 {
+.card + .card {
-  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;
-}
-.label:first-of-type {
   margin-top: 0;
 }
-.label + * {
+.card 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;
-}
-
-@-webkit-keyframes flyInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@keyframes flyInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes flyInRight {
-  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;
-}
-#highlights .highlight-item {
-  opacity: 0;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 1.5rem;
-  border-left: 0.1rem solid rgba(var(--text-color), 0.2);
-  --animation-duration: 0.3s;
-}
-#highlights .highlight-item .label {
-  margin-top: auto;
-}
-#highlights .highlight-item h1 {
-  font-size: 2rem;
-  letter-spacing: 0.1rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  overflow-wrap: break-word;
-}
-#highlights .highlight-item:first-of-type {
-  text-transform: uppercase;
-}
-#highlights .highlight-item:nth-of-type(2) {
-  text-transform: capitalize;
-}
-#highlights .highlight-item:first-of-type {
-  -webkit-animation: flyInLeft var(--animation-duration) forwards;
-          animation: flyInLeft var(--animation-duration) forwards;
-}
-#highlights .highlight-item:nth-of-type(2) {
-  -webkit-animation: flyInLeft var(--animation-duration) 0.1s forwards;
-          animation: flyInLeft var(--animation-duration) 0.1s forwards;
-}
-#highlights .highlight-item:nth-of-type(3) {
-  -webkit-animation: flyInLeft var(--animation-duration) 0.2s forwards;
-          animation: flyInLeft var(--animation-duration) 0.2s forwards;
-}
-#highlights .highlight-item:last-of-type {
-  -webkit-animation: flyInLeft var(--animation-duration) 0.3s forwards;
-          animation: flyInLeft var(--animation-duration) 0.3s forwards;
 }
 
 #main_header {
@@ -899,6 +786,9 @@ theme-toggle {
   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 {
@@ -911,6 +801,152 @@ 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;
+}
+.label:first-of-type {
+  margin-top: 0;
+}
+.label + :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;
+}
+
+@-webkit-keyframes flyInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes flyInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@-webkit-keyframes flyInRight {
+  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;
+}
+#highlights .highlight-item {
+  position: relative;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1.5rem;
+  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;
+}
+#highlights .highlight-item h1 {
+  font-size: 2rem;
+  letter-spacing: 0.1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  overflow-wrap: break-word;
+}
+#highlights .highlight-item:first-of-type {
+  text-transform: uppercase;
+}
+#highlights .highlight-item:nth-of-type(2) {
+  text-transform: capitalize;
+}
+#highlights .highlight-item:first-of-type {
+  -webkit-animation: flyInLeft var(--animation-duration) forwards;
+          animation: flyInLeft var(--animation-duration) forwards;
+}
+#highlights .highlight-item:nth-of-type(2) {
+  -webkit-animation: flyInLeft var(--animation-duration) 0.1s forwards;
+          animation: flyInLeft var(--animation-duration) 0.1s forwards;
+}
+#highlights .highlight-item:nth-of-type(3) {
+  -webkit-animation: flyInLeft var(--animation-duration) 0.2s forwards;
+          animation: flyInLeft var(--animation-duration) 0.2s forwards;
+}
+#highlights .highlight-item:last-of-type {
+  -webkit-animation: flyInLeft var(--animation-duration) 0.3s forwards;
+          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;
@@ -1000,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);
 }
@@ -1016,6 +1055,7 @@ theme-toggle {
 .address {
   text-transform: none !important;
   word-break: break-all;
+  font-weight: 700;
 }
 
 #winners_container {
@@ -1121,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 {
@@ -1198,6 +1237,33 @@ 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;
+}
+.goal-milestone:last-of-type {
+  margin-left: auto;
+  text-align: end;
+  align-items: flex-end;
+}
+
 .smart-contract-list {
   display: grid;
   gap: 1rem;
@@ -1241,12 +1307,7 @@ theme-toggle {
 .sc-card .sc-card__actions {
   justify-content: flex-end;
   padding-top: 1rem;
-}
+  margin-top: auto;
-.sc-card .sc-card__actions .button {
-  background-color: transparent;
-  border: solid 1px var(--accent-color);
-  font-size: 0.9rem;
-  padding: 0.5rem 1rem;
 }
 .sc-card .badge {
   margin-right: auto;
@@ -1292,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;
@@ -1361,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 {
@@ -102,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;
@@ -122,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);
 
@@ -148,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;
@@ -365,6 +371,9 @@ ul {
 .justify-content-center {
   justify-content: center;
 }
+.justify-items-center {
+  justify-items: center;
+}
 
 .justify-right {
   margin-left: auto;
@@ -649,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 {
@@ -815,6 +733,9 @@ theme-toggle {
   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,
@@ -828,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;
@@ -913,6 +947,11 @@ theme-toggle {
       background-color: var(--green);
     }
   }
+  &.expired {
+    &::before {
+      background-color: var(--yellow);
+    }
+  }
   &.closed {
     &::before {
       background-color: var(--danger-color);
@@ -930,6 +969,7 @@ theme-toggle {
 .address {
   text-transform: none !important;
   word-break: break-all;
+  font-weight: 700;
 }
 #winners_container {
   display: grid;
@@ -1025,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;
@@ -1092,6 +1131,30 @@ 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 {
 }
@@ -1133,20 +1196,10 @@ theme-toggle {
       fill: var(--accent-color);
     }
   }
-  &.closed,
-  &.expired {
-    h4 {
-    }
-  }
   .sc-card__actions {
     justify-content: flex-end;
     padding-top: 1rem;
-    .button {
+    margin-top: auto;
-      background-color: transparent;
-      border: solid 1px var(--accent-color);
-      font-size: 0.9rem;
-      padding: 0.5rem 1rem;
-    }
   }
   .badge {
     margin-right: auto;
@@ -1192,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;
@@ -1265,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) {