feat: #9 connect client search to GraphQL API

client/package.json

@@ -12,8 +12,11 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@apollo/client": "^4.3.3",
+    "graphql": "^16.14.2",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "rxjs": "^7.8.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",

client/src/App.css

@@ -1,84 +1,89 @@
-/* Plain CSS, no framework — smaller bundle, and full control over focus
-   styles and contrast for tilgjengelighet. */
-
-:root {
-  color-scheme: light dark;
-  --bg: #fafaf8;
-  --surface: #ffffff;
-  --text: #1a1a1a;
-  --muted: #5c5c5c;
-  --accent: #2f5d50;
-  --focus: #1a73e8;
-  font-family:
-    system-ui,
-    -apple-system,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
-  line-height: 1.5;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #141414;
-    --surface: #1e1e1e;
-    --text: #f2f2f0;
-    --muted: #a8a8a4;
-    --accent: #6fae9c;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-}
-
 .skip-link {
   position: absolute;
   left: -9999px;
-  top: 0;
-  background: var(--accent);
-  color: var(--surface);
-  padding: 0.5rem 1rem;
+  top: 0.5rem;
+  z-index: 5;
+  background: var(--surface);
+  color: var(--accent);
+  padding: 0.6rem 1rem;
 }
 .skip-link:focus {
-  left: 0;
+  left: 0.5rem;
 }
-
-:where(a, button, input, select, textarea, [tabindex]):focus-visible {
-  outline: 3px solid var(--focus);
-  outline-offset: 2px;
+.site-header {
+  background: #181e1b;
+  color: #f7f5ef;
 }
-
-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
+.navigation {
+  max-width: 1240px;
+  margin: auto;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+}
+.navigation a {
+  text-decoration: none;
+}
+.navigation a[aria-current] {
+  border-bottom: 2px solid #a9c3a3;
+  padding-block: 0.4rem;
+}
+.brand {
+  font-size: 1.8rem;
+  font-weight: 800;
+  letter-spacing: -0.08rem;
 }
-header h1 {
+.brand span {
+  color: #a9c3a3;
+  font-size: 0.65rem;
+  margin-left: 0.25rem;
+}
+#main {
+  max-width: 1240px;
+  padding: 0 2rem;
+  margin: auto;
+}
+.search-section {
+  text-align: center;
+  padding: 2.5rem 0 2rem;
+}
+.search-section h1 {
   margin: 0;
+  font-size: clamp(2rem, 4.5vw, 3.5rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.15;
 }
 .tagline {
-  margin: 0.25rem 0 0;
   color: var(--muted);
+  margin: 1rem 0 1.7rem;
 }
-
-main {
+.catalogue-layout {
+  border-top: 1px solid var(--border);
+  padding-top: 1.25rem;
+}
+.site-footer {
+  text-align: center;
+  border-top: 1px solid var(--border);
   padding: 1.5rem;
-  max-width: 60rem;
-  margin: 0 auto;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+@media (max-width: 700px) {
+  #main {
+    padding-inline: 1rem;
+  }
+  .navigation {
+    padding: 1rem;
+    gap: 1.5rem;
+  }
+  .search-section {
+    padding-block: 2rem;
+  }
+}
+@media (max-width: 420px) {
+  .navigation {
+    gap: 1rem;
+  }
 }