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>
This commit is contained in:
Maaxxs
parent
999f7c471b
commit
7fb4576dc1
6 changed files with 40 additions and 25 deletions
|
|
@ -80,6 +80,28 @@ html {
|
|||
--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);
|
||||
|
|
|
|||
|
|
@ -190,30 +190,23 @@ export default function ContactPage() {
|
|||
<path d="M 860 -160 A 700 700 0 0 1 860 1160" fill="none" stroke="rgba(168,225,12,0.18)" strokeWidth="1" strokeDasharray="2 9" />
|
||||
</svg>
|
||||
|
||||
{/* Light Mode: Auto-Foto unten links verankert + gruener Lichtstreifen rechts (ab 981px, s. README).
|
||||
Maske uebernimmt die weiche Ausblendung nach oben (kein harter oberer Rand bei
|
||||
voller Hoehe), der Scrim obendrauf das weiche Verlaufen nach rechts in die Seite. */}
|
||||
{/* Light Mode: Auto-Foto unten links in NATUERLICHER Groesse (310x512-Asset,
|
||||
Breite per clamp ~460px gedeckelt, siehe .kontakt-bg-foto in index.css) -
|
||||
nicht auf Sektionsgroesse strecken. Ab 981px, im Dark Mode aus. */}
|
||||
<img
|
||||
src={carPhoto}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="kontakt-bg-foto hidden dark:!hidden min-[981px]:block"
|
||||
/>
|
||||
{/* Gruene Lichtstreifen-Gruppe rechts: volle Sektionshoehe, 42% Breite,
|
||||
6 Grad rotiert, vier Ebenen (README "Hintergruende -> Light Mode"). */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute bottom-0 left-0 hidden h-full w-[34%] dark:!hidden min-[981px]:block"
|
||||
className="pointer-events-none absolute right-0 top-0 hidden h-full w-[42%] rotate-6 dark:!hidden min-[981px]:block"
|
||||
>
|
||||
<div
|
||||
className="h-full w-full bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${carPhoto})`,
|
||||
backgroundPosition: 'left bottom',
|
||||
WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, black 40%)',
|
||||
maskImage: 'linear-gradient(180deg, transparent 0%, black 40%)',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0" style={{ background: 'var(--kf-scrim)' }} />
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute right-[4%] top-0 hidden h-full w-[26%] rotate-6 dark:!hidden min-[981px]:block"
|
||||
>
|
||||
<div
|
||||
className="absolute right-1/2 top-0 h-full w-[3px] opacity-80 blur-[1px]"
|
||||
className="absolute right-1/2 top-0 h-full w-[3px] opacity-[0.85] blur-[1px]"
|
||||
style={{ background: 'linear-gradient(180deg, transparent, #b6e619 30%, #cfef5a 55%, transparent)' }}
|
||||
/>
|
||||
<div
|
||||
|
|
@ -225,7 +218,7 @@ export default function ContactPage() {
|
|||
style={{ background: 'linear-gradient(180deg, transparent, #b6e619 35%, transparent)' }}
|
||||
/>
|
||||
<div
|
||||
className="absolute right-1/2 top-1/3 h-[420px] w-[420px] translate-x-1/2 rounded-full opacity-70 blur-[40px]"
|
||||
className="absolute right-1/2 top-1/3 h-[420px] w-[420px] translate-x-1/2 rounded-full opacity-70 blur-[20px]"
|
||||
style={{ background: 'radial-gradient(circle, rgba(207,239,90,0.35), transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
1
hifi/assets/index-C9rG7muU.css
Normal file
1
hifi/assets/index-C9rG7muU.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -43,9 +43,9 @@
|
|||
"sameAs": ["https://www.youtube.com/@hifiplanet2812"]
|
||||
}
|
||||
</script>
|
||||
<script type="module" crossorigin src="/assets/index-CVbBNBDp.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-Ojki4k68.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/lucide-icons-CnpfS6R8.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CTVFMvNc.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-C9rG7muU.css">
|
||||
</head>
|
||||
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue