9a7f8b47a3
Move the dashboard from boxed glass cards to an airy, hairline-separated layout where type and whitespace carry the page, then surface listing images as the visual anchor. - Solid surfaces (drop backdrop-filter glass, per spec); calm flat field with a single cool top-glow replacing the drifting aurora and dot-grid. - Recent results / recent alerts are now product feeds with 52px thumbnails, listing titles, and price; image_url threaded through ResultRow/AlertRow (data already stored, just unsurfaced). - ListResults gains an OnlyAlerted filter so the alerts panel reuses its decryption path instead of a raw query. - Dashboard recent results capped at 8 for a balanced snapshot.
122 lines
4.3 KiB
CSS
122 lines
4.3 KiB
CSS
/* retro.css — optional "retro-arcade identity" layer.
|
|
*
|
|
* Entirely additive. To revert, delete this file and remove its <link> tag
|
|
* from templates/layout.templ. Nothing else depends on it.
|
|
*
|
|
* What this adds:
|
|
* 1. Two independently-animated aurora blobs that drift across the
|
|
* viewport on different paths — the real "shifting light" feel,
|
|
* not a synchronized slide.
|
|
* 2. Dot-grid overlay over the whole viewport.
|
|
* 3. Heavier display headings with a soft accent glow.
|
|
*
|
|
* Both blobs live on html pseudo-elements at z-index -2 / -1, sitting
|
|
* behind everything else so card glassiness still reads on top.
|
|
*/
|
|
|
|
body {
|
|
/* Let the html-level aurora show through. app.css set a solid blue here;
|
|
dropping it here unlocks the gradient. Removing retro.css restores the
|
|
original solid background automatically. */
|
|
background: transparent;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--bg);
|
|
/* Refined direction: dot-grid and drifting blobs removed. A single calm,
|
|
cool top-glow gradient gives the field depth without reading as a smudge
|
|
or animating in the user's peripheral vision. */
|
|
background-image: radial-gradient(
|
|
120% 75% at 50% -15%,
|
|
#1f3074 0%,
|
|
var(--bg) 58%
|
|
);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Retire the animated aurora blobs for the refined look. */
|
|
html::before, html::after { display: none; }
|
|
|
|
/* Two aurora blobs animated with seven waypoints each (no `alternate`, so
|
|
the second half doesn't mirror the first) on incommensurate periods —
|
|
the two cycles drift in and out of phase, so the eye never locks onto a
|
|
repeating pattern even though each blob is technically on a loop.
|
|
Opacity also wobbles so the lights "breathe" instead of just sliding. */
|
|
|
|
html::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
closest-side,
|
|
rgba(0, 164, 228, 0.13),
|
|
rgba(0, 164, 228, 0.0) 70%
|
|
);
|
|
width: 60vmax;
|
|
height: 60vmax;
|
|
border-radius: 50%;
|
|
filter: blur(70px);
|
|
/* Centered base; keyframes drive all motion from here. */
|
|
top: 50%; left: 50%;
|
|
margin-top: -35vmax; margin-left: -35vmax;
|
|
animation: v-retro-drift-a 41s cubic-bezier(.6,.1,.4,.9) infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
html::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
/* Cooled to a faint mint instead of arcade yellow: the warm blob read as a
|
|
smudge against the cold palette. Kept subtle so it's ambient, not a wash. */
|
|
background: radial-gradient(
|
|
closest-side,
|
|
rgba(0, 228, 164, 0.07),
|
|
rgba(0, 228, 164, 0.0) 70%
|
|
);
|
|
width: 46vmax;
|
|
height: 46vmax;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
top: 50%; left: 50%;
|
|
margin-top: -27.5vmax; margin-left: -27.5vmax;
|
|
animation: v-retro-drift-b 29s cubic-bezier(.5,.2,.3,.8) infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
@keyframes v-retro-drift-a {
|
|
0% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
|
|
14% { transform: translate3d( 5vw, -28vh, 0) scale(1.18); opacity: 1.00; }
|
|
29% { transform: translate3d( 32vw, -10vh, 0) scale(0.92); opacity: 0.75; }
|
|
43% { transform: translate3d( 18vw, 22vh, 0) scale(1.10); opacity: 0.95; }
|
|
58% { transform: translate3d(-15vw, 30vh, 0) scale(1.05); opacity: 0.80; }
|
|
72% { transform: translate3d(-38vw, 8vh, 0) scale(0.95); opacity: 1.00; }
|
|
86% { transform: translate3d(-20vw, -12vh, 0) scale(1.12); opacity: 0.90; }
|
|
100% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
|
|
}
|
|
|
|
@keyframes v-retro-drift-b {
|
|
0% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
|
|
17% { transform: translate3d( 0vw, -10vh, 0) scale(1.20); opacity: 0.95; }
|
|
33% { transform: translate3d(-30vw, 8vh, 0) scale(0.90); opacity: 0.80; }
|
|
48% { transform: translate3d(-12vw, 28vh, 0) scale(1.10); opacity: 1.00; }
|
|
64% { transform: translate3d( 22vw, 18vh, 0) scale(0.95); opacity: 0.75; }
|
|
80% { transform: translate3d( 36vw, -2vh, 0) scale(1.15); opacity: 0.90; }
|
|
100% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
|
|
}
|
|
|
|
/* Refined direction: headings stay clean — no glow, modest weight. The
|
|
page-title/section-title classes in app.css own the real hierarchy. */
|
|
h1, h2 {
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html::before, html::after { animation: none; }
|
|
}
|