ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: one protagonist per surface — photo hero keeps Ken Burns only (flares removed), login gets Gemini-style large soft aurora; services trimmed to 4 real tiles + planned line

Browse Source
This commit is contained in:
ctao
2026-07-25 14:55:01 +02:00
parent 95f8f7b1a6
commit 6e3f8e23b6
2 changed files with 20 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+12 -25
View File
@@ -55,17 +55,13 @@
/* Nebula glow (BRAND D.5) — auth band, static AND animated. Alphas are
contrast ceilings (DESIGN.md): Cherenkov ≤.38 / Azure ≤.35; cores sit in
opposite corners — cores never meet. */
/* Lava-lamp rule (research): motion reads only on DEFINED shapes — blobs are
~30% wide with visible falloff edges, high alpha, and travel far. Cherenkov
core stays pinned to the right half (text zone lives left of ~52%). */
/* Aurora rule (Gemini-style): gradient-only surfaces (login) get LARGE, soft,
slowly flowing color fields — one protagonist per surface: the photo hero
animates only the photo (Ken Burns), never glow flares on top of it. */
--nebula:
radial-gradient(34% 40% at 76% 74%, rgba(0, 228, 216, 0.55), transparent 62%),
radial-gradient(30% 36% at 14% 18%, rgba(0, 122, 255, 0.45), transparent 60%),
radial-gradient(75% 85% at 40% 55%, rgba(0, 0, 156, 0.8), transparent 72%);
/* Photo-hero variant: no indigo depth blob over photography. */
--nebula-glow:
radial-gradient(30% 42% at 80% 72%, rgba(0, 228, 216, 0.6), transparent 60%),
radial-gradient(26% 36% at 14% 20%, rgba(0, 122, 255, 0.5), transparent 60%);
radial-gradient(60% 70% at 78% 78%, rgba(0, 228, 216, 0.42), transparent 70%),
radial-gradient(55% 62% at 10% 12%, rgba(0, 122, 255, 0.36), transparent 68%),
radial-gradient(80% 90% at 42% 55%, rgba(0, 0, 156, 0.8), transparent 74%);
/* Hero scrim over the photo — worst-case AA computed in DESIGN.md:
small text lives left of 52% band width (α ≥ .76 there). */
--hero-scrim: linear-gradient(to right,
@@ -461,7 +457,8 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive
.tile { padding: var(--space-m); gap: 8px; }
.tile .ico { width: 26px; height: 26px; stroke-width: 1.75; stroke-linejoin: round; color: var(--galaxy); }
.tile h3 { margin: 0; }
.tile--planned :is(h3, .ico) { color: var(--muted); }
/* Planned services — one quiet line under the grid, never dead tiles */
.planned-note { color: var(--muted); font-size: var(--fs-s); margin: var(--space-m) 0 0; }
/* Article — 70ch column; on ≥1200px a sticky "On this page" rail sits to the right */
.article-layout { display: grid; grid-template-columns: minmax(0, 70ch); }
@@ -710,7 +707,7 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
.band-bg::before {
content: ""; position: absolute; inset: -45% -30%;
background: var(--nebula);
animation: nebula 12s ease-in-out infinite alternate;
animation: nebula 18s ease-in-out infinite alternate;
}
/* Photo hero, animated path: the photo itself moves (slow Ken Burns zoom —
the unmistakable "alive" signal) and carries its scrim so the AA zones
@@ -722,12 +719,6 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
background: var(--hero-scrim), url("/brand/hero.jpg") center / cover;
animation: kenburns 26s ease-in-out infinite alternate;
}
.hero-band .band-bg::after {
content: ""; position: absolute; inset: -45% -30%;
background: var(--nebula-glow);
mix-blend-mode: screen; /* blobs GLOW over the photo instead of tinting it */
animation: glowdrift 9s ease-in-out infinite alternate;
}
/* Whole-page wash — slow drift, clearly alive */
.has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; }
/* Hero content rises in once, gently staggered */
@@ -745,13 +736,9 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
.suggest li { transition: background-color var(--dur) var(--ease); } /* same quiet fade as every hover */
.card:hover, .search-results li:hover { transform: translateY(-2px); } /* the one elevate gesture (no cover zoom) */
}
@keyframes nebula { /* inert unless applied inside the block above */
from { transform: translate3d(-8%, -5%, 0) rotate(-6deg) scale(1); opacity: 0.75; }
to { transform: translate3d(8%, 6%, 0) rotate(6deg) scale(1.3); opacity: 1; }
}
@keyframes glowdrift {
from { transform: translate3d(-13%, -9%, 0) rotate(-6deg) scale(1); opacity: 0.5; }
to { transform: translate3d(13%, 10%, 0) rotate(6deg) scale(1.3); opacity: 1; }
@keyframes nebula { /* Gemini-style aurora: slow, ample, gentle breath */
from { transform: translate3d(-9%, -6%, 0) rotate(-5deg) scale(1); opacity: 0.85; }
to { transform: translate3d(9%, 7%, 0) rotate(5deg) scale(1.22); opacity: 1; }
}
@keyframes kenburns {
from { transform: scale(1) translate3d(0, 0, 0); }