First commit

frontend/app/assets/css/_home.scss

@@ -0,0 +1,152 @@
+// ---------- Hero (home) ----------
+.home-main {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -120px -20% auto -20%;
+    height: 480px;
+    pointer-events: none;
+    background:
+      radial-gradient(38% 60% at 30% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
+      radial-gradient(34% 55% at 72% 22%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
+    filter: blur(30px);
+  }
+}
+
+.hero {
+  position: relative;
+  text-align: center;
+  padding: clamp(56px, 11vh, 104px) 0 44px;
+
+  h1 {
+    margin: 0;
+    font-size: clamp(2.4rem, 6vw, 3.7rem);
+    font-weight: 850;
+    letter-spacing: -0.035em;
+    line-height: 1.08;
+
+    // the headline's ink drifts between the two accents — the gradient is
+    // painted twice as wide as the text and slides through it; both ends are
+    // the accent colour, so the loop has no seam
+    .gradient {
+      background: linear-gradient(
+        92deg,
+        var(--accent) 10%,
+        var(--accent-2) 50%,
+        var(--accent) 90%
+      );
+      background-size: 200% 100%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: hero-gradient-pan 4.5s linear infinite;
+    }
+  }
+
+  .sub {
+    margin: 18px auto 0;
+    max-width: 56ch;
+    color: var(--muted);
+    font-size: clamp(1rem, 1.6vw, 1.13rem);
+  }
+}
+
+@keyframes hero-gradient-pan {
+  to { background-position-x: 200%; }
+}
+
+.search-wrap {
+  position: relative;
+  max-width: 620px;
+  margin: 34px auto 0;
+
+  svg {
+    position: absolute;
+    left: 19px;
+    top: 50%;
+    translate: 0 -50%;
+    color: var(--faint);
+    pointer-events: none;
+  }
+}
+
+.search-input {
+  width: 100%;
+  height: 58px;
+  padding: 0 52px 0 52px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  font-size: 1rem;
+  transition: border-color 0.15s, box-shadow 0.2s;
+
+  &::placeholder { color: var(--faint); }
+
+  &:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
+}
+
+.search-kbd {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  translate: 0 -50%;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--faint);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  padding: 2px 7px;
+  background: var(--surface-2);
+  pointer-events: none;
+}
+
+.hero-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 22px;
+  flex-wrap: wrap;
+}
+
+// ---------- Section / results meta ----------
+.results-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 10px 0 18px;
+
+  h2 {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--text);
+  }
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+  font-size: 0.82rem;
+  font-weight: 600;
+
+  button {
+    color: inherit;
+    opacity: 0.75;
+    display: grid;
+    place-items: center;
+
+    &:hover { opacity: 1; }
+  }
+}