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:
parent
54d8ed22f4
commit
ef07e3f785
1 changed files with 50 additions and 7 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue