diff --git a/public/gate.html b/public/gate.html
index 6adc59f..4c2093e 100644
--- a/public/gate.html
+++ b/public/gate.html
@@ -21,6 +21,7 @@
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
+ html, body { height: 100%; }
body {
margin: 0;
min-height: 100vh;
@@ -28,13 +29,39 @@
align-items: center;
justify-content: center;
padding: 1.5rem;
+ position: relative;
+ overflow: hidden;
background: var(--c-black);
- background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 20%, transparent), transparent 70%),
- radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 70%);
+ background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 22%, transparent), transparent 70%),
+ radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%);
color: var(--c-text);
font-family: "Inter", "Manrope", system-ui, sans-serif;
line-height: 1.6;
}
+ /* Das echte Van's-Logo als riesiges, sehr dezentes Wasserzeichen im Hintergrund — invert()
+ dreht das schwarze Logo auf weißem Grund um (weiß -> schwarz, schwarz -> weiß), danach macht
+ mix-blend-mode:screen den (jetzt schwarzen) ehemals-weißen Kreis komplett unsichtbar und
+ lässt nur die (jetzt weißen) Linien leicht aufleuchten — kein Bildbearbeitungsprogramm nötig,
+ rein CSS. Langsame Drehung sorgt für einen dezenten "lebendigen" Glanz-Effekt. */
+ .gate-logo-bg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: min(1400px, 200vw);
+ height: min(1400px, 200vw);
+ transform: translate(-50%, -50%);
+ background: url("/logo.png") center / contain no-repeat;
+ filter: invert(1);
+ mix-blend-mode: screen;
+ opacity: 0.09;
+ animation: gate-logo-spin 120s linear infinite;
+ pointer-events: none;
+ }
+ @keyframes gate-logo-spin {
+ from { transform: translate(-50%, -50%) rotate(0deg); }
+ to { transform: translate(-50%, -50%) rotate(360deg); }
+ }
+ @media (prefers-reduced-motion: reduce) { .gate-logo-bg { animation: none; } }
.gate-box {
position: relative;
max-width: 430px;
@@ -54,6 +81,25 @@
0%, 100% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
}
+ .gate-box::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -60%;
+ width: 35%;
+ height: 100%;
+ background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+ transform: skewX(-18deg);
+ animation: gate-shine 6s ease-in-out infinite;
+ pointer-events: none;
+ border-radius: inherit;
+ }
+ @keyframes gate-shine {
+ 0% { left: -60%; }
+ 35%, 100% { left: 130%; }
+ }
+ .gate-box > * { position: relative; z-index: 1; }
+ @media (prefers-reduced-motion: reduce) { .gate-box, .gate-box::after { animation: none; } }
.gate-eyebrow {
display: inline-block;
font-size: 0.78rem;
@@ -127,6 +173,7 @@
+
🔒 Noch nicht öffentlich
Van's DIY & Bastelbedarf