From 12ec415e488d53b7fa2400912b3d0bea8f1d7315 Mon Sep 17 00:00:00 2001 From: TMC Date: Thu, 12 Nov 2026 21:28:07 +0100 Subject: [PATCH] Website: fill the big background words instead of outlining them Unbounded is a variable font whose letters are built from overlapping shapes; an outline (text-stroke) traces every overlap, which drew stray lines inside the hero's giant FLEXERA and the story's chapter number. Both are now a faint solid fill (the hero's with a cyan-to-violet tint). Co-Authored-By: Claude Opus 5.5 --- WEBSITE/styles.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/WEBSITE/styles.css b/WEBSITE/styles.css index e342363c3a..3c3f9db48b 100644 --- a/WEBSITE/styles.css +++ b/WEBSITE/styles.css @@ -185,7 +185,10 @@ a { color: inherit; } .hero__ghost { position: absolute; left: -1vw; bottom: -5.5vw; font: 900 26vw/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase; - color: transparent; -webkit-text-stroke: 2px rgba(245, 244, 255, .08); + /* A faint solid fill, never an outline: the variable font draws its letters from overlapping + shapes, and an outline would trace every overlap. */ + background: linear-gradient(180deg, rgba(118, 250, 252, .11), rgba(101, 61, 240, .07) 60%, rgba(252, 89, 251, .05)); + -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; pointer-events: none; user-select: none; } .hero__grid { @@ -285,7 +288,7 @@ section { position: relative; } .story__num { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 900 clamp(180px, 30vw, 480px)/1 var(--display); letter-spacing: -.07em; - color: transparent; -webkit-text-stroke: 2px rgba(245, 244, 255, .1); + color: rgba(245, 244, 255, .045); /* filled, not outlined, for the same reason as .hero__ghost */ pointer-events: none; user-select: none; } .story .phone-host { height: min(84vh, 880px); height: min(84svh, 880px); position: relative; z-index: 1; }