System-End/YSWS-Catalog
1
0
Fork 0
mirror of https://github.com/System-End/YSWS-Catalog.git synced 2026-04-19 19:55:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance hero title styling with hover effects and animations

Browse source
This commit is contained in:
PawiX25 2025-03-07 02:48:11 +01:00
parent 2ca64bc815
commit 2df6237a8f
1 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
styles.css
View file

@ -1494,12 +1494,27 @@ body.modal-open {
letter-spacing: -0.03em;
line-height: 1.2;
padding-bottom: 0.5rem;
background: linear-gradient(90deg, var(--text) 0%, var(--red) 100%);
color: var(--white);
position: relative;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
cursor: default;
}
.hero-title:hover {
transform: translateY(-8px);
text-shadow: 0 8px 16px rgba(236, 55, 80, 0.3);
letter-spacing: -0.01em;
}
.hero-title .accent {
background: linear-gradient(90deg, var(--red) 0%, var(--orange) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
position: relative;
text-shadow: 0 2px 10px rgba(0,0,0,0.05);
display: inline-block;
}
@ -1511,17 +1526,28 @@ body.modal-open {
transform: translateX(-50%);
width: 100px;
height: 5px;
background: var(--primary);
background: linear-gradient(90deg, var(--red), var(--orange), var(--red));
background-size: 200% auto;
background-position: 0% center;
border-radius: 10px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-title .accent {
background: linear-gradient(90deg, var(--red) 0%, var(--orange) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
position: relative;
display: inline-block;
.hero-title:hover::after {
width: 180px;
height: 6px;
box-shadow: 0 3px 10px rgba(236, 55, 80, 0.5);
background-position: 100% center;
animation: shine 2s linear infinite;
}
@keyframes shine {
from {
background-position: 0% center;
}
to {
background-position: 200% center;
}
}
.hero-description {