style: refine page colors and header layout

country-explorer/src/components/App.css

@@ -1,18 +1,28 @@
 header {
   padding: 0 0 var(--space-3);
   max-width: 700px;
+  margin-inline: auto;
+  text-align: center;
+}
+header h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  font-size: clamp(1.75rem, 6vw, 4rem);
 }
-header::before {
-  content: '';
-  display: block;
-  width: 2.75rem;
-  height: 0.3rem;
-  border-radius: 1rem;
-  background: var(--accent);
-  margin-bottom: var(--space-3);
+header h1 > span:last-child {
+  min-width: 0;
+}
+.header-globe {
+  flex-shrink: 0;
+  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
+  font-size: 0.85em;
+  line-height: 1;
 }
 header p {
   max-width: 540px;
+  margin-inline: auto;
   font-size: 1.1rem;
 }
 main {
@@ -78,7 +88,4 @@ footer {
   header h1 {
     font-size: 2.25rem;
   }
-  header::before {
-    margin-bottom: var(--space-1);
-  }
 }

country-explorer/src/components/App.tsx

@@ -93,7 +93,12 @@ function App() {
   return (
     <>
       <header>
-        <h1>Country Explorer</h1>
+        <h1>
+          <span className="header-globe" aria-hidden="true">
+            🌍
+          </span>
+          <span>Country Explorer</span>
+        </h1>
         <p>Browse countries in Europe, filter and sort them, and save your favorites.</p>
       </header>
 

country-explorer/src/components/FavoriteButton.css

@@ -11,7 +11,7 @@
   background: var(--accent-bg);
 }
 .favorite-button[aria-pressed='true']:hover {
-  background: #d9ebdf;
+  background: #d4e5fa;
 }
 .favorite-button__icon {
   font-size: 1.3em;

country-explorer/src/components/NavigationControls.css

@@ -14,7 +14,7 @@
   color: white;
 }
 .country-navigation button:hover:not(:disabled) {
-  background: #174a39;
+  background: #183d65;
 }
 @media (max-width: 600px) {
   .country-navigation {

country-explorer/src/index.css

@@ -7,18 +7,18 @@
     BlinkMacSystemFont,
     'Segoe UI',
     sans-serif;
-  color: #52645f;
-  background: #f4f6f3;
+  color: #52647c;
+  background: #edf5ff;
   color-scheme: light;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  --text: #52645f;
-  --text-h: #183c32;
+  --text: #52647c;
+  --text-h: #193858;
   --bg: #fff;
-  --border: #dce5df;
-  --accent: #21634e;
-  --accent-bg: #eaf3ed;
+  --border: #d1deed;
+  --accent: #24558a;
+  --accent-bg: #e5effb;
   --space-1: 0.5rem;
   --space-2: 1rem;
   --space-3: 1.5rem;
@@ -71,7 +71,7 @@ select {
   font: inherit;
   color: var(--text-h);
   background: var(--bg);
-  border: 1px solid #a9bcb1;
+  border: 1px solid #a9bcd3;
   border-radius: 0.65rem;
   min-height: 46px;
   padding: 0.65rem 1rem;
@@ -100,7 +100,7 @@ select {
     calc(100% - 16px) center;
   background-size: 5px 5px;
   background-repeat: no-repeat;
-  box-shadow: 0 1px 2px #183c3208;
+  box-shadow: 0 1px 2px #19385808;
   cursor: pointer;
 }
 button:hover:not(:disabled),