Google Page Insights Tweaks

assets/css/ui.css

@@ -20,9 +20,9 @@
   cursor: pointer;
   border: 1.5px solid #c9b08a;
   background: #f5edd6;
-  color: #9a7d5a;
+  color: #6b4228;
   font-family: JetBrains Mono, monospace;
-  font-size: 12px;
+  font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   transition: all 0.15s;
@@ -36,26 +36,36 @@
 }
 /* Active state — brass border + brass text, parchment background */
 .cs-btn.on {
+  background: #c8922a;
   border-color: #c8922a;
-  color: #c8922a;
-  background: #f5edd6;
+  color: #fff;
   font-weight: 600;
 }
 .cs-btn.on:hover {
-  background: #fef3dc;
-  color: #a06e18;
+  background: #a06e18;
   border-color: #a06e18;
+  color: #fff;
 }
 
 /* The chevron arrow inside the button */
 .cs-arrow {
-  font-size: 9px;
-  opacity: 0.6;
-  margin-left: 2px;
-  transition: transform 0.15s;
   display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+  margin-left: 5px;
+  margin-bottom: 3px;
+  opacity: 1;
+  transition: transform 0.15s;
+  vertical-align: middle;
 }
 .cs-wrap.open .cs-arrow {
+  transform: rotate(225deg);
+  margin-bottom: -1px;
+}
+.cs-wrap.open .cs-arrow-old {
   transform: rotate(180deg);
 }
 
@@ -140,7 +150,7 @@
   padding-left: 11px;
   border-radius: 0 20px 20px 0;
   background: #f5edd6;
-  color: #9a7d5a;
+  color: #6b4228;
   user-select: none;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   white-space: nowrap;
@@ -215,7 +225,7 @@
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.18em;
-  color: #b09870;
+  color: #7a5c2a;
   margin-bottom: 12px;
   display: block;
   font-weight: 600;
@@ -301,7 +311,7 @@
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  color: #c0a880;
+  color: #9a7d5a;
   line-height: 2.2;
 }