lets go

wodydoc · Jul 18, 2023 · b622b23 · b622b23
1 parent 5fa9c50
commit b622b23
Showing 1 changed file with 42 additions and 68 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -34,7 +34,7 @@
   --text-color-light-light: hsl(211, 39%, 23%);
   --body-color-light: hsl(212, 33%, 89%);
   --container-color-light: hsl(210, 36%, 96%);
-  --doing-third-light: hsl(210, 36%, 96%);
+  --doing-third-light: hsl(208.09deg 20.18% 57.5%);
   --thinking-third-light: hsl(210, 22%, 49%);
   --feeling-third-light: hsla(209, 23%, 60%, 0.976);
   --cool-grey-light: hsl(211, 12%, 43%);
@@ -354,7 +354,6 @@ the website, in dark theme
 }
 
 .header {
-  padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
 }
 
@@ -863,8 +862,6 @@ svg#universal-man path.c {
 svg.icon {
   width: 100%;
   height: 100%;
-  transform: scale(0.75);
-  transform-origin: center center;
   object-fit: contain;
   overflow: hidden;
 }
@@ -941,10 +938,10 @@ div#doing-deck .deck-inner .deck-back {
   transition: transform 0.5s ease-in-out;
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
 }
-/* 
+
 .deck:hover {
   transform: scale(1.05);
-} */
+}
 
 .deck .deck-inner {
   position: relative;
@@ -972,13 +969,18 @@ div#doing-deck .deck-inner .deck-back {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.2em;
+  /* font-size: 1.2em; */
 }
 
 .deck-inner .deck-back {
   transform: rotateY(180deg);
 }
 
+.deck-back h2 {
+  font-size: 2.75rem;
+  font-weight: var(--font-black);
+}
+
 /*=============== SWIPER ===============*/
 .swiper-container {
   width: 100%;
@@ -1189,20 +1191,19 @@ span.behavior {
   text-transform: uppercase;
   text-align: center;
   margin: var(--mb-1-5) 0;
-  font-size: var(--smaller-font-size);
-  /* animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal; */
+  font-size: var(--h3-font-size);
 }
 
 .chart {
+  background: var(--shape-gradient);
   position: relative;
   border-radius: 15px;
   text-align: center;
   transition: transform 0.3s ease-in-out, box-shadow 0.5s ease-in-out;
-  padding: 1rem;
-  width: 100%;
-  max-width: 300px;
+  max-width: 100%;
+  width: 300px;
   height: 300px;
-  margin: 1rem 0;
+  margin-bottom: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1217,10 +1218,12 @@ span.behavior {
 
 .canvas-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 3rem;
-  position: relative;
+  justify-content: space-evenly;
+  align-items: stretch;
+  align-content: stretch;
+  flex-wrap: wrap;
+  position: absolute;
+  top: 40%;
   transition: all 0.3s ease-in-out;
 }
 
@@ -1242,90 +1245,60 @@ canvas {
 }
 
 .percentage-container {
-  font-size: 4.5rem;
+  font-size: 4rem;
   letter-spacing: -1px;
   color: var(--title-color);
-  font-weight: var(--font-super);
+  font-weight: var(--font-regular);
   text-align: center;
   position: absolute;
-  top: 33%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: background 0.3s;
+  top: 16%;
 }
 
 .improvement-label {
-  color: #4caf50;
+  color: var(--container-color);
   background-color: var(--title-color);
   border-radius: 1rem;
   line-height: 1;
-  padding: 0.01rem 0.5rem 0.4rem;
-  font-weight: var(--font-semibold);
-  margin: auto;
-  font-size: 1.25rem;
-  letter-spacing: 2px;
+  padding: 0.1rem 0.5rem 0.45rem;
+  font-weight: var(--font-medium);
+  /* margin: auto; */
+  font-size: 1rem;
+  letter-spacing: 0.5px;
   text-align: center;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: font-size 0.3s;
+  top: 45%;
+  transition: transform 0.3s ease-in-out;
 }
 
 .improvement-label:hover {
-  font-size: 1.5rem;
+  transform: scale(1.03);
 }
 
 .curved-text {
   position: absolute;
   bottom: 0;
-  margin: auto;
   width: 100%;
-  max-width: 275px;
+  max-width: 269px;
   height: auto;
   line-height: 1;
-  padding: 0.12rem 0.25rem 0.75rem;
   font-size: 1.55rem;
-  font-weight: var(--font-bold);
+  font-weight: var(--font-semibold);
   letter-spacing: -1px;
   text-align: center;
   color: var(--title-color);
-  background-color: var(--container-color);
-  border-radius: 3rem;
   pointer-events: none;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.25rem;
   transition: color 0.3s, background 0.3s;
 }
 
-.curved-text:hover {
-  color: var(--container-color);
-  background-color: var(--title-color);
-}
+
 
 @media screen and (max-width: 768px) {
   .custom-charts-container {
     justify-content: center;
   }
 }
 
-@keyframes typewriter {
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-}
-
-@keyframes blinkTextCursor {
-  from {
-    border-right-color: var(--text-color);
-  }
-  to {
-    border-right-color: transparent;
-  }
-}
-
 /*=============== meet-joey-schewee ===============*/
 
 .meet-joey-schewee__container {
@@ -2034,21 +2007,22 @@ canvas {
   text-transform: uppercase;
 }
 .card__description {
-  font-size: var(--h3-font-size);
+  font-size: var(--h2-font-size);
   font-weight: var(--font-medium);
-  margin: var(--mb-1) var(--mb-2);
-  text-transform: uppercase;
+  margin: var(--mb-1) var(--mb-0-5);
+  text-transform: capitalize;
   color: var(--title-color);
 }
 
 .rely__on {
-  margin: auto;
+  text-transform: uppercase;
+  margin: 0 auto;
   width: 100%;
   max-width: 275px;
   height: auto;
   line-height: 1;
   padding: 0.12rem 0.25rem 0.5rem;
-  font-size: 1.55rem;
+  font-size: 1.25rem;
   font-weight: var(--font-bold);
   letter-spacing: 1px;
   text-align: center;