max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
HifiPlanet-Website/hifi-src/src/index.css
Maaxxs 7fb4576dc1 Stop stretching the contact page's light-mode car photo 
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>
2026-07-20 07:16:43 +02:00

263 lines
9.3 KiB
CSS
Raw Blame History

@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
.marquee-viewport {
-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
/* Papierkorn nur auf der Seiten-Grundflaeche und den grauen "Band"-Abschnitten
(.grain-band) - NICHT als Overlay ueber allem, damit Karten/Akkordeons/Buttons
weiterhin schlicht bleiben (die haben ihre eigene deckende Hintergrundfarbe, die
das Korn ohnehin verdecken wuerde, aber ganz ohne Overlay ist das unabhaengig vom
Stapelkontext garantiert). */
.page-texture {
background-color: #f6f5f0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
.dark .page-texture {
background-color: #0a0b07;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ==== Kontaktformular Redesign: Design-Tokens (siehe src/referenz/Kontaktformular
Redesign/design_handoff_kontaktformular/README.md) - gescopt auf .kf-page statt
global, damit sie den Rest der Seite nicht beeinflussen. Reagiert automatisch auf
den bestehenden globalen Dark-Mode-Schalter (.dark-Klasse auf <html>), kein
eigener Toggle noetig. */
.kf-page {
--kf-pagebg: linear-gradient(120deg, #eef0ea 0%, #f6f8f3 45%, #fbfcf9 100%);
--kf-card: #ffffff;
--kf-cardbrd: #e4e8dc;
--kf-text: #23271d;
--kf-text2: #2a2e24;
--kf-muted: #6c7360;
--kf-label: #838a72;
--kf-field: #fafcf6;
--kf-fieldbrd: #dde2d3;
--kf-fieldicon: #a7ad9d;
--kf-accent: #a4d417;
--kf-accent2: #8ec21a;
--kf-accentsoft: #f2f8df;
--kf-pill: #ffffff;
--kf-pillbrd: #dfe4d6;
--kf-shadow: 0 24px 60px rgba(60, 70, 40, 0.08);
--kf-shadow2: 0 16px 40px rgba(60, 70, 40, 0.06);
--kf-divider: #e8ecdf;
--kf-topo: #d7dccd;
--kf-pkgbg: #f4fbe4;
--kf-pkgbrd: #cfe89a;
--kf-btntext: #1f2417;
--kf-scrim: linear-gradient(90deg, rgba(244, 246, 241, 0.35) 0%, rgba(244, 246, 241, 0.55) 55%, rgba(246, 248, 243, 1) 100%);
}
.dark .kf-page {
--kf-pagebg: linear-gradient(120deg, #181b0f 0%, #111409 45%, #0a0c06 100%);
--kf-card: #14170e;
--kf-cardbrd: rgba(168, 225, 12, 0.16);
--kf-text: #f3f6ea;
--kf-text2: #e8ece0;
--kf-muted: #9aa38c;
--kf-label: #8f987f;
--kf-field: rgba(0, 0, 0, 0.35);
--kf-fieldbrd: #2c3323;
--kf-fieldicon: #5f6852;
--kf-accent: #a8e10c;
--kf-accent2: #b6e619;
--kf-accentsoft: rgba(168, 225, 12, 0.1);
--kf-pill: #14170e;
--kf-pillbrd: rgba(168, 225, 12, 0.28);
--kf-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
--kf-shadow2: 0 16px 40px rgba(0, 0, 0, 0.45);
--kf-divider: rgba(168, 225, 12, 0.15);
--kf-pkgbg: rgba(168, 225, 12, 0.08);
--kf-pkgbrd: rgba(168, 225, 12, 0.4);
--kf-btntext: #0f1208;
}
/* Auto-Foto unten links im Light Mode: das Asset ist nur 310x512px und darf
NICHT auf Sektionsgroesse gestreckt werden - natuerliche Proportionen,
Breite per clamp gedeckelt (~460px). Doppelmaske (rechts + oben) laesst es
ohne harte Kanten in den Seitenverlauf auslaufen. */
.kontakt-bg-foto {
position: absolute;
left: 0;
bottom: 0;
width: clamp(280px, 24vw, 460px); /* Höhe automatisch, Seitenverhältnis beibehalten */
height: auto;
pointer-events: none;
z-index: 0;
opacity: 0.9;
/* weiches Auslaufen nach rechts UND nach oben, keine harten Kanten: */
-webkit-mask-image: linear-gradient(90deg, black 55%, transparent 100%),
linear-gradient(180deg, transparent 0%, black 45%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, black 55%, transparent 100%),
linear-gradient(180deg, transparent 0%, black 45%);
mask-composite: intersect;
}
.kf-page input::placeholder,
.kf-page textarea::placeholder {
color: var(--kf-fieldicon);
}
.kf-page input:focus,
.kf-page textarea:focus {
border-color: var(--kf-accent) !important;
box-shadow: 0 0 0 3px rgba(164, 212, 23, 0.2);
}
.grain-band {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
.dark .grain-band {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ==== Custom Cursor (Orbital-Motiv, siehe components/CustomCursor.jsx) ====
Die Klasse hifi-cursor-on setzt NUR die Komponente selbst - und nur auf Geraeten
mit echter Maus ohne reduzierte Bewegung. Ohne die Klasse bleibt ueberall der
native Cursor (Touch, prefers-reduced-motion, JS-Fehler). */
html.hifi-cursor-on,
html.hifi-cursor-on * {
cursor: none !important;
}
/* Ueber Textfeldern uebernimmt der native Text-Cursor (die Orbit-Teile blenden sich
per data-state="text" aus) - Praezision beim Textmarkieren geht vor Show. */
html.hifi-cursor-on :is(input, textarea, [contenteditable='true']) {
cursor: auto !important;
}
.hifi-cursor {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 99999;
opacity: 1;
transition: opacity 0.2s ease;
}
.hifi-cursor[data-hidden='true'] {
opacity: 0;
}
/* Kern: gefuellter Punkt, folgt der Maus direkt. Weisser Rand + Glow machen ihn auf
hellem Papier UND dunklen Kacheln gleichermassen sichtbar. */
.hifi-cursor__core {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 9999px;
background: #7fd44a;
box-shadow:
0 0 0 1.5px rgba(255, 255, 255, 0.9),
0 0 10px rgba(127, 212, 74, 0.75);
transition:
width 0.18s ease,
height 0.18s ease,
margin 0.18s ease,
background-color 0.18s ease,
opacity 0.15s ease;
}
/* Der Orbit (Bahn + Satellit) ist im Normalzustand UNSICHTBAR - Kundenwunsch:
Standard ist nur der gruene Punkt, das Orbital-Motiv erscheint erst ueber
bedienbaren Flaechen. */
.hifi-cursor__orbit {
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.18s ease;
}
/* Schraege Ellipsenbahn wie der Orbit-Schwung im Logo. */
.hifi-cursor__ring {
position: absolute;
width: 38px;
height: 15px;
margin: -7.5px 0 0 -19px;
border: 1px solid rgba(139, 234, 60, 0.85);
border-radius: 50%;
transform: rotate(-24deg) scale(0.6);
transition: transform 0.22s ease;
}
/* Satellit: Position auf der Bahn wird per JS gesetzt (rotierender Punkt). */
.hifi-cursor__sat {
position: absolute;
width: 5px;
height: 5px;
margin: -2.5px 0 0 -2.5px;
border-radius: 9999px;
background: #eaffdb;
box-shadow: 0 0 6px rgba(139, 234, 60, 0.9);
}
/* Hover ueber Interaktivem: Orbit blendet ein und weitet sich, Kern wird groesser
und wechselt auf helles Lime (Kundenwunsch: "das Maus-Logo soll gruen sein wenn
der Orbit hinzukommt"). Der weisse Rand + Glow halten ihn auch direkt auf den
markengruenen Buttons erkennbar. Satellit beschleunigt via JS. */
.hifi-cursor[data-state='hover'] .hifi-cursor__orbit {
opacity: 1;
}
.hifi-cursor[data-state='hover'] .hifi-cursor__core {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: #8bea3c;
box-shadow:
0 0 0 1.5px rgba(255, 255, 255, 0.95),
0 0 12px rgba(139, 234, 60, 0.85);
}
.hifi-cursor[data-state='hover'] .hifi-cursor__ring {
transform: rotate(-24deg) scale(1.45);
}
/* Ueber Textfeldern: komplett ausblenden, nativer Text-Cursor uebernimmt. */
.hifi-cursor[data-state='text'] .hifi-cursor__core,
.hifi-cursor[data-state='text'] .hifi-cursor__orbit {
opacity: 0;
}
/* Gedrueckte Maustaste: Kern "thumpt" wie eine Subwoofer-Membran. */
.hifi-cursor[data-down='true'] .hifi-cursor__core {
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
}
/* Klick-Puls: einmalig auslaufender Ring am Klickpunkt. */
.hifi-cursor__pulse {
position: fixed;
top: 0;
left: 0;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 9999px;
border: 1.5px solid rgba(139, 234, 60, 0.9);
opacity: 0;
}
.hifi-cursor__pulse.is-live {
animation: hifi-cursor-pulse 0.45s ease-out forwards;
}
@keyframes hifi-cursor-pulse {
from {
opacity: 0.9;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(3.2);
}
}
Reference in a new issue View git blame Copy permalink