From d43c3d4713850ebb96b1125ce0f87386aceffb10 Mon Sep 17 00:00:00 2001 From: SandObserver <260779319+SandObserver@users.noreply.github.com> Date: Sat, 29 Aug 2026 09:13:25 -0400 Subject: [PATCH] Fix: give the landing page badges the product's capsule corner Both badge rules computed a radius of exactly half the pill's height, on a height that is scaled by a fraction. WebKit tears the rounded edge when such a badge repaints, and the demo counter rewrites it every 3.4 seconds. --- src/pages/index.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 03c87c4..52e612d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -476,7 +476,7 @@ if (!reduced) { .ilabel{width:var(--lblw);font-size:var(--lbl);line-height:1.3846;letter-spacing:-0.0062em;font-weight:500; color:rgba(255,255,255,.90);text-shadow:0 1px 4px rgba(0,0,0,.7);text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} - .badge{position:absolute;top:calc(-7px * var(--gs));right:calc(-7px * var(--gs));z-index:3;min-width:calc(20px * var(--gs));height:calc(20px * var(--gs));padding:0 calc(5px * var(--gs));border-radius:calc(10px * var(--gs)); + .badge{position:absolute;top:calc(-7px * var(--gs));right:calc(-7px * var(--gs));z-index:3;min-width:calc(20px * var(--gs));height:calc(20px * var(--gs));padding:0 calc(5px * var(--gs));border-radius:50px; display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--gs));line-height:1;font-weight:700;color:#fff; transform:translateZ(0)} @@ -641,7 +641,7 @@ if (!reduced) { .screen-inner .ilabel{width:100%;font-size:var(--lbl)} .screen-inner .badge{top:calc(-5px * var(--sc));right:calc(-5px * var(--sc)); min-width:calc(15px * var(--sc));height:calc(15px * var(--sc)); - border-radius:calc(7.5px * var(--sc));padding:0 calc(4px * var(--sc)); + border-radius:50px;padding:0 calc(4px * var(--sc)); font-size:calc(9px * var(--sc))} .screen-inner .wcell,.screen-inner .np{grid-column:span 2;grid-row:span 2; width:100%;height:auto;aspect-ratio:1;border-radius:18%;transform:none}