Customise site content

assets/css/style.css

@@ -53,6 +53,11 @@
     hsl(45, 100%, 72%), 
     hsl(35, 100%, 68%)
   );
+  --text-gradient-primary: linear-gradient(
+    to right, 
+    var(--primary-color), 
+    var(--secondary-color)
+  );
 
   /* solid */
 
@@ -109,6 +114,12 @@
   --transition-1: 0.25s ease;
   --transition-2: 0.5s ease-in-out;
 
+  /**
+   * theme color
+   */
+  --primary-color: #ff6e75;
+  --secondary-color: #f74851;
+
 }
 
 
@@ -131,6 +142,15 @@ li { list-style: none; }
 
 img, ion-icon, a, button, time, span { display: block; }
 
+article a {
+  display: inline;
+  color: var(--primary-color);
+}
+
+article img path {
+  fill: white;
+}
+
 button {
   font: inherit;
   background: none;
@@ -147,11 +167,11 @@ input, textarea {
 }
 
 ::selection {
-  background: var(--orange-yellow-crayola);
+  background: var(--secondary-color);
   color: var(--smoky-black);
 }
 
-:focus { outline-color: var(--orange-yellow-crayola); }
+:focus { outline-color: var(--secondary-color); }
 
 html { font-family: var(--ff-poppins); }
 
@@ -173,6 +193,7 @@ article {
   padding: 15px;
   box-shadow: var(--shadow-1);
   z-index: 1;
+  color: var(--light-gray);
 }
 
 .separator {
@@ -192,7 +213,7 @@ article {
   justify-content: center;
   align-items: center;
   font-size: 16px;
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   box-shadow: var(--shadow-1);
   z-index: 1;
 }
@@ -251,7 +272,7 @@ article.active {
   left: 0;
   width: 30px;
   height: 3px;
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   border-radius: 3px;
 }
 
@@ -266,7 +287,7 @@ article.active {
 }
 
 .has-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--orange-yellow-crayola);
+  background: var(--secondary-color);
   border-radius: 5px;
 }
 
@@ -361,7 +382,7 @@ main {
   right: -15px;
   border-radius: 0 15px;
   font-size: 13px;
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   background: var(--border-gradient-onyx);
   padding: 10px;
   box-shadow: var(--shadow-2);
@@ -486,7 +507,7 @@ main {
 .navbar-link:hover,
 .navbar-link:focus { color: var(--light-gray-70); }
 
-.navbar-link.active { color: var(--orange-yellow-crayola); }
+.navbar-link.active { color: var(--secondary-color); }
 
 
 
@@ -590,9 +611,11 @@ main {
   left: 0;
   transform: translate(15px, -25px);
   background: var(--bg-gradient-onyx);
-  border-radius: 14px;
   box-shadow: var(--shadow-1);
 }
+.testimonials-avatar-box, .testimonials-avatar-box img {
+  border-radius: 14px;
+}
 
 .testimonials-item-title { margin-bottom: 7px; }
 
@@ -732,7 +755,7 @@ main {
 .clients-list {
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   gap: 15px;
   margin: 0 -15px;
   padding: 25px;
@@ -797,7 +820,7 @@ main {
 }
 
 .timeline-list span {
-  color: var(--vegas-gold);
+  color: var(--primary-color);
   font-weight: var(--fw-400);
   line-height: 1.6;
 }
@@ -819,7 +842,7 @@ main {
   left: -33px;
   height: 6px;
   width: 6px;
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   border-radius: 50%;
   box-shadow: 0 0 0 4px var(--jet);
 }
@@ -863,7 +886,7 @@ main {
 }
 
 .skill-progress-fill {
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   height: 100%;
   border-radius: inherit;
 }
@@ -981,7 +1004,7 @@ main {
   --scale: 0.8;
 
   background: var(--jet);
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1106,7 +1129,7 @@ main {
   transition: var(--transition-1);
 }
 
-.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
+.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
 
 .blog-text {
   color: var(--light-gray);
@@ -1165,7 +1188,7 @@ main {
 
 .form-input::placeholder { font-weight: var(--fw-500); }
 
-.form-input:focus { border-color: var(--orange-yellow-crayola); }
+.form-input:focus { border-color: var(--secondary-color); }
 
 textarea.form-input {
   min-height: 100px;
@@ -1183,7 +1206,7 @@ textarea.form-input::-webkit-resizer { display: none; }
   position: relative;
   width: 100%;
   background: var(--border-gradient-onyx);
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1424,6 +1447,9 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .testimonials-avatar-box {
     transform: translate(30px, -30px);
+  }
+  
+  .testimonials-avatar-box, .testimonials-avatar-box img {
     border-radius: 20px;
   }
 
@@ -1620,7 +1646,7 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .filter-item button:hover { color: var(--light-gray-70); }
 
-  .filter-item button.active { color: var(--orange-yellow-crayola); }
+  .filter-item button.active { color: var(--secondary-color); }
 
   /* portfolio and blog grid */