The 310x512 car-light.png was scaled to the full section height via
background-size: cover, which blew it up far past its natural
resolution. It is now a plain <img> (.kontakt-bg-foto in index.css):
natural aspect ratio, width capped at clamp(280px, 24vw, 460px),
anchored bottom-left, opacity .9, and a dual mask (fade right + fade
top, mask-composite: intersect) so it dissolves into the page gradient
with no hard edges. The old scrim overlay is gone - the masks do that
job now.
The green light-streak group on the right is widened to the README's
42% at full section height (was 26%), line opacity .85 and radial glow
blur 20px per spec. Topo lines were already in place.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Rebuilds /kontakt from the design handoff (src/referenz/Kontaktformular
Redesign/) using the site's own stack instead of copying the prototype's
inline-styled HTML: React + Tailwind arbitrary values bound to a small set
of CSS custom properties (.kf-page, index.css) that swap automatically
with the site's existing dark-mode class toggle - no separate theme
control was added, per the brief.
The "Deine Anfrage bezieht sich auf" package box wires into the existing
query-param handoff from the package picker (ModelPage's contactUrl:
brand/model/package/packageId/total) and only renders when all three are
present; the optional-upgrades picker that already existed on this page
is preserved and restyled to match. Submission still posts to the real
/api/contact endpoint (same payload shape as before), so requests keep
landing in the admin inbox.
Adds Michroma (heading/price font) alongside the already-loaded Barlow.
Michroma has no Euro-sign glyph (renders as tofu), so price displays
split the € into a plain-font span rather than showing a broken glyph.
Dark-mode background assets (grunge/splatter) come from the handoff;
the light-mode car photo reuses an existing site asset (hero-trunk) since
none was supplied, masked per the handoff's recipe.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Logo: adds a dedicated dark-mode variant (grey wordmark lightened to
near-white, green orbit untouched) and drops the white background chip
that was previously painted behind the logo in dark mode across Navbar,
AdminLayout and the admin Login page.
Cursor: the hover core goes back to brand green (with a white rim/glow
for contrast on green buttons) instead of white, per clarified feedback.
Homepage: new hero slogan "Home of pure Sound" (replacing "Audiophil aus
Prinzip" / "Audiophile by principle" in both languages), the "So
funktioniert's" / "How it works" three-step section is removed, and the
brand marquee is replaced with the client's actual supplier list (Ground
Zero Audio, Audison, Hertz, Helix, Brax, Gladen, Alpine, Pioneer,
Kenwood, JVC).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Cursor: the default state is now just the green dot - the orbital ring and
satellite only appear over interactive elements, where the core switches
to white with a dark rim so it contrasts with the brand-green buttons
instead of vanishing green-on-green. The click pulse is white for the
same reason.
Packages: new optional price_text field (schema column, migration,
controllers, export/import columns, admin form). While set, it replaces
the "ab ca." label and computed price on the tile - e.g. "Coming soon".
Layouts: third package_card_layout option "coverflow" - a scroll-snap row
with CSS 3D perspective where the centered card faces front and its
neighbors rotate away, transforms driven per scroll frame (rAF-throttled,
ResizeObserver covers card expansion). Selectable in the admin website
settings next to grid and strip.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A filled brand-green core with a glowing satellite circling it on a
tilted elliptical path, echoing the orbit swoosh in the HifiPlanet logo.
Over interactive elements the core grows, the orbit widens and brightens,
and the satellite speeds up; clicking fires a subwoofer-style thump plus
an outward pulse ring. Core and orbit track the mouse in perfect sync -
only orbit speed and radius ease between states.
Enabled only on fine-pointer devices and disabled entirely under
prefers-reduced-motion (native cursor untouched in both cases). Over
text fields the orbit hides and the native I-beam takes over.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The fixed full-viewport overlay painted grain over everything,
including cards, buttons, and the FAQ accordion that should stay
plain. Back to plain background-image on .page-texture plus a new
.grain-band class for the two structural full-width stripe sections
on the homepage - cards keep their own opaque background, which
naturally blocks it without any extra work.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Previously the grain lived on .page-texture's own background-image, so
any section with its own opaque background color (bg-neutral-50 bands)
painted right over it. Moved the grain to a fixed, full-viewport overlay
that sits on top of everything instead.
Also fixed a failed attempt at using mix-blend-mode: overlay for a
single theme-agnostic texture - that blend mode has almost no visible
effect on backgrounds this close to pure white/black, since its math
compresses toward the backdrop at the extremes. Back to plain alpha
transparency with separate light/dark speckle colors, moderate opacity.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bumped the noise layer's alpha from 0.05/0.055 to 0.35/0.4 and coarsened
the turbulence frequency slightly - the previous version was too subtle
to notice at a glance.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The flat ambient-glow background (from an earlier "premium minimalism"
pass) read as plain white/black. Brings back the fine SVG noise grain
so the page background has some structure instead of a bare color.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Used the frontend-design and ui-ux-pro-max skills to research a
Porsche/Rolex-level premium direction. Both point the same way: drop
visible surface texture (grain, dot grids) entirely, use a tiered,
never-pure base color (warm off-white / near-black instead of stark
white/black), and add soft, large ambient glow light instead of decor.
Applied that here with two large low-opacity brand-green radial glows
plus a calmer base tone in both themes.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Swaps the dot grid for a fine SVG noise grain (evokes lightly crumpled
paper rather than a geometric grid), and darkens the base background
color in both themes so it's not a stark, glaring white/black anymore.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Plain white/black backgrounds now have a faint brand-green dot grid
(24px spacing, very low opacity) instead of a flat fill, in both light
and dark mode. Applied site-wide via the public layout wrapper.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
