From 291b2cdfe077cadbae2a53f1a4e022fd84b7e0f9 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Mon, 25 May 2026 15:57:56 +0200
Subject: [PATCH] fix(design): drop landing hr + duplicate link + snowflake
 background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Playwright inspection of the redesigned root page surfaced three real
issues:

1. The .landing-hero element had a bottom-border that rendered as a
   harsh horizontal rule between the intro and the search. Combined
   with the footer's top-border, a short landing page had TWO visual
   <hr> lines fighting each other. Removed the bottom-border.

2. The intro's secondary paragraph ended with "Mer om personvern og
   hvordan det virker." — the persistent footer right below has the
   exact same link. Two identical CTAs within ~400 vertical pixels
   on a short page. Dropped the inline link.

3. **Real contrast bug**: the body's snowflake background image was
   meant to be barely-visible (a body::before wash at z-index -1 was
   supposed to fade it). But `z-index: -1` on a pseudo-element of
   body puts it BEHIND the body's painted background — not in
   front. So the wash did nothing, and on full-screen viewports
   (≥1100 px) the snowflake rendered at full luminosity-blended
   opacity, wrecking text contrast. The user spotted this in full
   screen.

   Fix: remove the body-background snowflake entirely. The ❄ glyph
   next to the wordmark in nav.top h1::after already carries the
   seasonal icon language and never interferes with content text.

Also: extended .gitignore to drop .playwright-mcp/ artefacts and
*.png. The previous attempt at this commit accidentally included
inspection screenshots and console logs; reset and redone.
---
 .gitignore                          |  5 ++++
 frontend/src/components/Home.svelte |  1 -
 frontend/src/styles.css             | 39 +++++------------------------
 3 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/.gitignore b/.gitignore
index c7cbad9..0d66673 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,8 @@ data/
 .env
 .env.local
 .DS_Store
+
+# Playwright inspection artefacts — generated by the MCP browser tool when
+# inspecting the live site. Never source of truth, never committed.
+.playwright-mcp/
+*.png
diff --git a/frontend/src/components/Home.svelte b/frontend/src/components/Home.svelte
index fb1eddd..546c441 100644
--- a/frontend/src/components/Home.svelte
+++ b/frontend/src/components/Home.svelte
@@ -131,7 +131,6 @@
         <p class="muted-secondary" style="margin: 0;">
           Du velger selv om hver oppføring er privat (kryptert i nettleseren
           din), anonym (synlig uten navn), eller offentlig.
-          <a href="/personvern">Mer om personvern og hvordan det virker.</a>
         </p>
       </div>
     {:else if session.user}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index efc30b0..2f18186 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -55,38 +55,10 @@ html, body {
   -webkit-text-size-adjust: 100%;
 }
 
-/* Body gets a very subtle snowflake silhouette in the corner, picking up the
-   icon language without being intrusive. Hidden on small viewports because
-   it competes with content. Disabled under prefers-reduced-motion only when
-   the background image could imply motion — here it's static, so it stays. */
-@media (min-width: 1100px) {
-  body {
-    background-image: url('/icon.svg');
-    background-position: calc(50% + 420px) 80px;
-    background-size: 260px;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    /* Heavily de-emphasised so it never competes with text contrast. */
-    background-blend-mode: luminosity;
-    background-color: var(--bg);
-  }
-  body::before {
-    /* Layer a soft wash over the icon to fade it to barely-visible. */
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: var(--bg);
-    opacity: 0.92;
-    pointer-events: none;
-    z-index: -1;
-  }
-}
-
 main {
   max-width: 720px;
   margin: 0 auto;
   padding: 1.5rem max(1rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
-  position: relative;  /* sit above the body::before wash */
 }
 
 h1, h2, h3, h4 { line-height: 1.2; margin-top: 0; }
@@ -263,12 +235,13 @@ nav.top h1::after {
   opacity: 0.85;
 }
 
-/* Hero treatment on the landing — a touch more breathing room and weight
-   on the first paragraph so the page reads as inviting, not utilitarian. */
+/* Hero treatment on the landing — extra weight on the first paragraph so
+   the page reads as inviting, not utilitarian. No bottom border: a short
+   landing page only needs one horizontal rule (the footer's), and adding
+   a second made the hero read as a separate section visually fighting the
+   list below. */
 .landing-hero {
-  margin-bottom: 1.25rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--border);
+  margin-bottom: 1.5rem;
 }
 .landing-hero p {
   font-size: 1.05rem;