From 3e93c08b3840c45b2efd0cbbf351b27ee1a3233d Mon Sep 17 00:00:00 2001 From: semianiakavy Date: Tue, 6 Oct 2026 01:34:49 +0000 Subject: [PATCH] =?UTF-8?q?=EF=BB=BFfix:=20clip=20the=20variant=20prompt?= =?UTF-8?q?=20top=20hairline=20to=20the=20rounded=20corners?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 2 +- public/styles.css | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 1f437f7..d69e712 100644 --- a/public/index.html +++ b/public/index.html @@ -20,7 +20,7 @@ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" /> - + diff --git a/public/styles.css b/public/styles.css index ba88c5f..59e47a7 100644 --- a/public/styles.css +++ b/public/styles.css @@ -4351,11 +4351,17 @@ ul { ); box-shadow: 0 18px 44px rgba(31, 26, 28, 0.18), 0 0 0 1px rgba(214, 51, 108, 0.06); backdrop-filter: blur(14px); + /* Clip the top hairline (::before) to the card's 24px corners. A 3px-tall + pseudo-element cannot carry a 24px radius itself — the browser scales the + radii down to half the box height, leaving square ends that poke out past + the rounded silhouette — so the rounded clipping has to come from here. */ + overflow: hidden; transform: translateX(-50%); animation: variantPromptIn 0.42s var(--ease) both; } -/* A thin gradient hairline hugging the top edge. */ +/* A thin gradient hairline hugging the top edge. Its top rounding is inherited + from the parent's border-radius through the `overflow: hidden` above. */ .variantprompt::before { content: ''; position: absolute;