Remove glitch effect, fix floating cards overlap
- Remove glitch effect CSS and HTML wrapper entirely - Adjust floating card positions to prevent overlap: - Card 2 (Economic sci-fi): top 20% - Card 3 (Games): bottom 5%, left 10% - Card 4 (Parallel worlding): top 50% - Card 5 (Guerrilla futuring): bottom 5%, right 5% Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
2c0b2e9169
commit
33baf8d108
70
index.html
70
index.html
|
|
@ -217,10 +217,6 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.glitch-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-family: 'Space Mono', monospace;
|
font-family: 'Space Mono', monospace;
|
||||||
font-size: clamp(3rem, 12vw, 8rem);
|
font-size: clamp(3rem, 12vw, 8rem);
|
||||||
|
|
@ -241,54 +237,6 @@
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Glitch effect */
|
|
||||||
.glitch {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch::before,
|
|
||||||
.glitch::after {
|
|
||||||
content: attr(data-text);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch:hover::before {
|
|
||||||
animation: glitch-1 0.3s linear infinite;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
opacity: 0.8;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch:hover::after {
|
|
||||||
animation: glitch-2 0.3s linear infinite;
|
|
||||||
color: var(--accent-magenta);
|
|
||||||
opacity: 0.8;
|
|
||||||
z-index: -2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glitch-1 {
|
|
||||||
0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -2px); }
|
|
||||||
20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, 2px); }
|
|
||||||
40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
|
|
||||||
60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
|
|
||||||
80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
|
|
||||||
100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glitch-2 {
|
|
||||||
0% { clip-path: inset(65% 0 25% 0); transform: translate(2px, 2px); }
|
|
||||||
20% { clip-path: inset(10% 0 85% 0); transform: translate(-2px, -2px); }
|
|
||||||
40% { clip-path: inset(75% 0 15% 0); transform: translate(2px, -2px); }
|
|
||||||
60% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
|
|
||||||
80% { clip-path: inset(20% 0 70% 0); transform: translate(2px, 2px); }
|
|
||||||
100% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, -2px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-family: 'Space Mono', monospace;
|
font-family: 'Space Mono', monospace;
|
||||||
|
|
@ -497,26 +445,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-card:nth-child(2) {
|
.floating-card:nth-child(2) {
|
||||||
top: 30%;
|
top: 20%;
|
||||||
right: 0;
|
right: 0;
|
||||||
animation: float 6s ease-in-out infinite 1s;
|
animation: float 6s ease-in-out infinite 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-card:nth-child(3) {
|
.floating-card:nth-child(3) {
|
||||||
bottom: 10%;
|
bottom: 5%;
|
||||||
left: 15%;
|
left: 10%;
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-card:nth-child(4) {
|
.floating-card:nth-child(4) {
|
||||||
top: 55%;
|
top: 50%;
|
||||||
right: 5%;
|
right: 0;
|
||||||
animation: float 6s ease-in-out infinite 3s;
|
animation: float 6s ease-in-out infinite 3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-card:nth-child(5) {
|
.floating-card:nth-child(5) {
|
||||||
bottom: 35%;
|
bottom: 5%;
|
||||||
right: 30%;
|
right: 5%;
|
||||||
animation: float 6s ease-in-out infinite 4s;
|
animation: float 6s ease-in-out infinite 4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1291,9 +1239,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<header class="hero">
|
<header class="hero">
|
||||||
<div class="glitch-wrapper">
|
<h1><span class="highlight">WORLD</span>PLAY</h1>
|
||||||
<h1 class="glitch" data-text="WORLDPLAY"><span class="highlight">WORLD</span>PLAY</h1>
|
|
||||||
</div>
|
|
||||||
<p class="subtitle">(TO BE DEFINED)</p>
|
<p class="subtitle">(TO BE DEFINED)</p>
|
||||||
|
|
||||||
<div class="cta-group">
|
<div class="cta-group">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue