style: warmer "vintersol" treatment

A light touch of sun and warmth without overhauling the design:

1. Decorative radial sun-wash on body::before — soft peach glow from
   top-right and a warmer lemon hint from bottom-left. Pure colour
   (no image), so it doesn't trip the contrast issues the earlier
   snowflake-background hit. Dark mode gets a dimmer ember-toned
   variant so it reads as low winter sun.
2. Wordmark gains a ☀ before the title (warm, with a small text-shadow
   halo) paired with the existing ❄ after. Sun + snow makes the
   "vintersol" metaphor explicit instead of implied.
3. Primary button hover adds a ~4px sun-halo on top of the existing
   drop shadow — feels lit, not just lifted.

All within the existing palette. WCAG contrast unchanged.
This commit is contained in:
Ole-Morten Duesund 2026-05-25 18:11:31 +02:00
commit ef07e3f785

View file

@ -13,6 +13,14 @@
--accent-fg: #ffffff;
--danger: #b3261e;
--card: #ffffff;
/* Sun-wash gradient that sits on top of --bg. A diagonal radial of
warm peach + lemon, very low intensity so it reads as "sunlit room"
not "sunset poster." Used by body::before so it stays purely
decorative (no contrast impact on actual content). */
--sun-wash:
radial-gradient(ellipse 70% 50% at 90% -10%, rgba(255, 196, 120, 0.35), transparent 60%),
radial-gradient(ellipse 60% 40% at 10% 110%, rgba(255, 230, 180, 0.20), transparent 70%);
--sun-glow: 255, 196, 120; /* RGB triplet for halos; alpha set at use-site */
/* Per-visibility colours decoupled from --accent so changing the brand
hue doesn't accidentally make "private" look like a primary action. */
--vis-private: #1f6feb;
@ -41,6 +49,13 @@
--vis-friends: #f1a528;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
/* In dark mode the sun is a distant ember rather than a noon wash
lower alpha and a warmer hue so it reads as low winter sun, not
a spotlight. */
--sun-wash:
radial-gradient(ellipse 70% 50% at 90% -10%, rgba(251, 146, 60, 0.18), transparent 60%),
radial-gradient(ellipse 60% 40% at 10% 110%, rgba(220, 100, 30, 0.10), transparent 70%);
--sun-glow: 251, 146, 60;
}
}
@ -55,6 +70,20 @@ html, body {
-webkit-text-size-adjust: 100%;
}
/* Decorative sun-wash. Lives on body::before so it doesn't interact with
content (z-index: 0; content sits in the implicit z-index: auto stacking
context above). Pure colour with no image, so it doesn't trip the
"no decorative background image" rule that the earlier snowflake hit. */
body::before {
content: '';
position: fixed;
inset: 0;
background: var(--sun-wash);
pointer-events: none;
z-index: 0;
}
main { position: relative; z-index: 1; }
main {
max-width: 720px;
margin: 0 auto;
@ -121,9 +150,14 @@ button.primary {
font-weight: 600;
}
button.primary:hover:not(:disabled) {
/* Subtle elevation on the primary button — it's the most-clicked thing. */
/* Subtle elevation on the primary button it's the most-clicked thing.
Add a warm sun-halo on top of the standard shadow so hover feels
"lit," not just lifted. The two shadows compose; layer-order is
halo first (closer to the button) then drop-shadow. */
transform: translateY(-1px);
box-shadow: var(--shadow-md);
box-shadow:
0 0 0 4px rgba(var(--sun-glow), 0.18),
var(--shadow-md);
background: var(--accent);
border-color: transparent;
}
@ -225,14 +259,23 @@ nav.top h1 {
position: relative;
}
nav.top h1 a { letter-spacing: -0.015em; }
nav.top h1::after {
/* A small snowflake-like accent next to the title. */
content: '';
margin-left: 0.45rem;
nav.top h1::before {
/* Sun before the wordmark — small, warm, glows just enough to feel lit. */
content: '';
margin-right: 0.35rem;
color: var(--accent);
font-size: 0.85em;
font-size: 0.9em;
vertical-align: 0.02em;
text-shadow: 0 0 12px rgba(var(--sun-glow), 0.55);
}
nav.top h1::after {
/* Snowflake on the other side — pairs with the sun for "vintersol". */
content: '❄';
margin-left: 0.4rem;
color: var(--vis-private);
font-size: 0.8em;
vertical-align: 0.05em;
opacity: 0.85;
opacity: 0.75;
}
/* Hero treatment on the landing extra weight on the first paragraph so