Update hero section tools and add PLAY NOW banner to README
This commit is contained in:
80
style.css
80
style.css
@@ -94,6 +94,86 @@ body {
|
||||
color: var(--trae-green);
|
||||
}
|
||||
|
||||
/* Play Banner */
|
||||
.play-banner {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
max-width: 800px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.banner-inner {
|
||||
background: rgba(0, 255, 102, 0.05);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 2px solid rgba(0, 255, 102, 0.3);
|
||||
border-radius: 24px;
|
||||
padding: 40px 60px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 30px rgba(0, 255, 102, 0.1);
|
||||
}
|
||||
|
||||
.play-banner:hover {
|
||||
transform: scale(1.02) translateY(-5px);
|
||||
}
|
||||
|
||||
.banner-tag {
|
||||
background: var(--trae-green);
|
||||
color: var(--bg-dark);
|
||||
font-family: var(--font-accent);
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 16px;
|
||||
border-radius: 50px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 2px;
|
||||
box-shadow: 0 0 20px var(--trae-green);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-family: var(--font-accent);
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
color: var(--trae-green);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.banner-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(0, 255, 102, 0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
animation: rotateGlow 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateGlow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.play-banner:hover .banner-inner {
|
||||
border-color: var(--trae-green);
|
||||
background: rgba(0, 255, 102, 0.1);
|
||||
box-shadow: 0 30px 60px rgba(0, 255, 102, 0.2),
|
||||
inset 0 0 40px rgba(0, 255, 102, 0.2);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
|
||||
Reference in New Issue
Block a user