Skip to content

Commit 949b44c

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#875 from Pavithra-git162/footer-hover-effects
Enhanced footer hover
2 parents 3b85f48 + f906975 commit 949b44c

1 file changed

Lines changed: 372 additions & 0 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 372 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3152,6 +3152,378 @@ body.sidebar-active .hero-controls {
31523152
color: var(--text-tertiary);
31533153
opacity: 0.5;
31543154
}
3155+
/* ═══════════════════════════════════════════════════════════════════
3156+
FOOTER HOVER ENHANCEMENTS v3 — Drop-in override
3157+
Paste AFTER your existing stylesheet (or at the very end of it).
3158+
═══════════════════════════════════════════════════════════════════ */
3159+
3160+
/* ── 1. Footer container — sweeping shimmer top line ───────────── */
3161+
.footer {
3162+
overflow: hidden;
3163+
position: relative;
3164+
}
3165+
3166+
.footer::before {
3167+
content: "";
3168+
position: absolute;
3169+
top: 0;
3170+
left: -100%;
3171+
width: 100%;
3172+
height: 2px;
3173+
background: linear-gradient(
3174+
90deg,
3175+
transparent,
3176+
var(--accent, #22c55e) 40%,
3177+
#06b6d4 60%,
3178+
transparent
3179+
);
3180+
animation: footerShimmer 3.5s ease-in-out infinite;
3181+
pointer-events: none;
3182+
}
3183+
3184+
@keyframes footerShimmer {
3185+
0% { left: -100%; opacity: 0; }
3186+
10% { opacity: 1; }
3187+
80% { opacity: 1; }
3188+
100% { left: 100%; opacity: 0; }
3189+
}
3190+
3191+
[data-theme="light"] .footer::before {
3192+
background: linear-gradient(
3193+
90deg,
3194+
transparent,
3195+
#6abf8d 40%,
3196+
#f2a65a 60%,
3197+
transparent
3198+
);
3199+
}
3200+
3201+
/* ── 2. Social icons — ORIGINAL simple hover (restored) ─────────── */
3202+
/*
3203+
Restores the original clean lift + accent tint from your first CSS.
3204+
Removes the sweep-fill animation entirely.
3205+
*/
3206+
.footer-social-icons a {
3207+
position: static; /* undo any relative stacking */
3208+
overflow: visible;
3209+
transition:
3210+
background var(--duration-fast, 200ms) ease,
3211+
border-color var(--duration-fast, 200ms) ease,
3212+
color var(--duration-fast, 200ms) ease,
3213+
transform var(--duration-fast, 200ms) ease,
3214+
box-shadow var(--duration-fast, 200ms) ease;
3215+
will-change: transform;
3216+
}
3217+
3218+
/* Remove the sweep-fill layer added in earlier versions */
3219+
.footer-social-icons a::after {
3220+
display: none;
3221+
content: none;
3222+
}
3223+
3224+
.footer-social-icons a > * {
3225+
position: static; /* reset z-index stacking */
3226+
}
3227+
3228+
.footer-social-icons a:hover {
3229+
background: var(--accent-soft, rgba(34,197,94,.12));
3230+
border-color: var(--border-accent, rgba(34,197,94,.2));
3231+
color: var(--accent, #22c55e);
3232+
transform: translateY(-2px);
3233+
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.18);
3234+
}
3235+
3236+
/* Arcade light */
3237+
[data-theme="light"] .footer-social-icons a:hover {
3238+
background: rgba(106,191,141,0.14);
3239+
border-color: rgba(106,191,141,0.35);
3240+
color: #3d8a5e;
3241+
box-shadow: 0 4px 12px rgba(106, 191, 141, 0.2);
3242+
}
3243+
3244+
/* Arcade dark */
3245+
[data-theme="dark"] .footer-social-icons a:hover {
3246+
background: rgba(159,221,181,0.12);
3247+
border-color: rgba(159,221,181,0.32);
3248+
color: #9fddb5;
3249+
box-shadow: 0 4px 12px rgba(159, 221, 181, 0.18);
3250+
}
3251+
3252+
/* ── 3. Section headings — growing accent underline ─────────────── */
3253+
.footer-links h3 {
3254+
display: inline-block;
3255+
position: relative;
3256+
padding-bottom: 6px;
3257+
}
3258+
3259+
.footer-links h3::after {
3260+
content: "";
3261+
position: absolute;
3262+
bottom: 0;
3263+
left: 0;
3264+
width: 0;
3265+
height: 2px;
3266+
border-radius: 1px;
3267+
background: linear-gradient(90deg, var(--accent, #22c55e), #06b6d4);
3268+
transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
3269+
}
3270+
3271+
.footer-links:hover h3::after,
3272+
.footer-links:focus-within h3::after {
3273+
width: 100%;
3274+
}
3275+
3276+
[data-theme="light"] .footer-links h3::after {
3277+
background: linear-gradient(90deg, #6abf8d, #f2a65a);
3278+
}
3279+
[data-theme="dark"] .footer-links h3::after {
3280+
background: linear-gradient(90deg, #9fddb5, #f6c58d);
3281+
}
3282+
3283+
@media (max-width: 576px) {
3284+
.footer-links h3::after {
3285+
left: 50%;
3286+
transform: translateX(-50%);
3287+
}
3288+
}
3289+
3290+
/* ── 4. Nav links — gradient text + pill glow ───────────────────── */
3291+
.footer-links a {
3292+
position: relative;
3293+
display: inline-flex;
3294+
align-items: center;
3295+
gap: 6px;
3296+
padding: 3px 8px 3px 6px;
3297+
border-radius: 6px;
3298+
text-decoration: none;
3299+
transition:
3300+
color var(--duration-fast, 200ms) ease,
3301+
background-color 0.28s ease,
3302+
box-shadow 0.28s ease,
3303+
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
3304+
padding-left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
3305+
}
3306+
3307+
/* Pill glow background — expands from left */
3308+
.footer-links a::before {
3309+
content: "";
3310+
position: absolute;
3311+
inset: 0;
3312+
border-radius: inherit;
3313+
background: linear-gradient(
3314+
90deg,
3315+
rgba(34, 197, 94, 0.10),
3316+
rgba(6, 182, 212, 0.08)
3317+
);
3318+
opacity: 0;
3319+
transform: scaleX(0.4);
3320+
transform-origin: left;
3321+
transition:
3322+
opacity 0.3s ease,
3323+
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
3324+
z-index: 0;
3325+
}
3326+
3327+
/* Gradient underline slides in from left */
3328+
.footer-links a::after {
3329+
content: "";
3330+
position: absolute;
3331+
bottom: 1px;
3332+
left: 6px;
3333+
right: 6px;
3334+
height: 1.5px;
3335+
border-radius: 1px;
3336+
background: linear-gradient(90deg, var(--accent, #22c55e), #06b6d4);
3337+
transform: scaleX(0);
3338+
transform-origin: left;
3339+
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
3340+
z-index: 1;
3341+
}
3342+
3343+
/* Text + icons sit above pseudo layers */
3344+
.footer-links a > * {
3345+
position: relative;
3346+
z-index: 2;
3347+
}
3348+
3349+
.footer-links a:hover {
3350+
/* Gradient text effect on the text content */
3351+
background-image: linear-gradient(90deg, var(--accent, #22c55e), #06b6d4);
3352+
-webkit-background-clip: text;
3353+
-webkit-text-fill-color: transparent;
3354+
background-clip: text;
3355+
padding-left: 10px;
3356+
transform: translateX(3px);
3357+
box-shadow: none;
3358+
}
3359+
3360+
.footer-links a:hover::before {
3361+
opacity: 1;
3362+
transform: scaleX(1);
3363+
}
3364+
3365+
.footer-links a:hover::after {
3366+
transform: scaleX(1);
3367+
}
3368+
3369+
/* ── FIX: icons inside hovered links must stay visible ──────────── */
3370+
/*
3371+
background-clip:text makes ALL children transparent including icons.
3372+
These rules explicitly restore colour + visibility for every common
3373+
icon pattern: Font Awesome <i>, <svg>, <img>, inline SVG fills.
3374+
*/
3375+
.footer-links a:hover i,
3376+
.footer-links a:hover svg,
3377+
.footer-links a:hover img,
3378+
.footer-links a:hover span.sidebar-icon,
3379+
.footer-links a:hover [class*="fa-"],
3380+
.footer-links a:hover [class*="icon"] {
3381+
-webkit-text-fill-color: initial;
3382+
background-image: none;
3383+
background-clip: initial;
3384+
-webkit-background-clip: initial;
3385+
color: var(--accent, #22c55e); /* icon picks up accent colour */
3386+
opacity: 1;
3387+
}
3388+
3389+
/* SVG paths and shapes inherit fill from color */
3390+
.footer-links a:hover svg path,
3391+
.footer-links a:hover svg circle,
3392+
.footer-links a:hover svg rect,
3393+
.footer-links a:hover svg polyline,
3394+
.footer-links a:hover svg line {
3395+
stroke: var(--accent, #22c55e);
3396+
fill: currentColor;
3397+
}
3398+
3399+
/* Mobile — centred layout resets */
3400+
@media (max-width: 576px) {
3401+
.footer-links a { justify-content: center; }
3402+
.footer-links a:hover { transform: none; padding-left: 6px; }
3403+
.footer-links a::after { left: 50%; transform-origin: center; }
3404+
}
3405+
3406+
/* Arcade light */
3407+
[data-theme="light"] .footer-links a::before {
3408+
background: linear-gradient(90deg, rgba(106,191,141,0.12), rgba(242,166,90,0.08));
3409+
}
3410+
[data-theme="light"] .footer-links a::after {
3411+
background: linear-gradient(90deg, #6abf8d, #f2a65a);
3412+
}
3413+
[data-theme="light"] .footer-links a:hover {
3414+
background-image: linear-gradient(90deg, #4a8a5e, #c07a3a);
3415+
-webkit-background-clip: text;
3416+
background-clip: text;
3417+
-webkit-text-fill-color: transparent;
3418+
}
3419+
[data-theme="light"] .footer-links a:hover i,
3420+
[data-theme="light"] .footer-links a:hover svg,
3421+
[data-theme="light"] .footer-links a:hover [class*="fa-"],
3422+
[data-theme="light"] .footer-links a:hover [class*="icon"] {
3423+
-webkit-text-fill-color: initial;
3424+
background-image: none;
3425+
background-clip: initial;
3426+
-webkit-background-clip: initial;
3427+
color: #4a8a5e;
3428+
}
3429+
3430+
/* Arcade dark */
3431+
[data-theme="dark"] .footer-links a::before {
3432+
background: linear-gradient(90deg, rgba(159,221,181,0.12), rgba(246,197,141,0.08));
3433+
}
3434+
[data-theme="dark"] .footer-links a::after {
3435+
background: linear-gradient(90deg, #9fddb5, #f6c58d);
3436+
}
3437+
[data-theme="dark"] .footer-links a:hover {
3438+
background-image: linear-gradient(90deg, #9fddb5, #f6c58d);
3439+
-webkit-background-clip: text;
3440+
background-clip: text;
3441+
-webkit-text-fill-color: transparent;
3442+
}
3443+
[data-theme="dark"] .footer-links a:hover i,
3444+
[data-theme="dark"] .footer-links a:hover svg,
3445+
[data-theme="dark"] .footer-links a:hover [class*="fa-"],
3446+
[data-theme="dark"] .footer-links a:hover [class*="icon"] {
3447+
-webkit-text-fill-color: initial;
3448+
background-image: none;
3449+
background-clip: initial;
3450+
-webkit-background-clip: initial;
3451+
color: #9fddb5;
3452+
}
3453+
3454+
/* ── 5. Bottom bar links — dot-bloom underline ──────────────────── */
3455+
.footer-bottom-links a {
3456+
position: relative;
3457+
display: inline-block;
3458+
padding-bottom: 2px;
3459+
transition:
3460+
color var(--duration-fast, 200ms) ease,
3461+
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
3462+
}
3463+
3464+
.footer-bottom-links a::after {
3465+
content: "";
3466+
position: absolute;
3467+
bottom: 0;
3468+
left: 50%;
3469+
width: 4px;
3470+
height: 1.5px;
3471+
border-radius: 1px;
3472+
background: linear-gradient(90deg, var(--accent, #22c55e), #06b6d4);
3473+
transform: translateX(-50%) scaleX(0);
3474+
transform-origin: center;
3475+
transition:
3476+
width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
3477+
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
3478+
left 0.35s ease;
3479+
}
3480+
3481+
.footer-bottom-links a:hover {
3482+
color: var(--accent, #22c55e);
3483+
transform: translateY(-2px);
3484+
}
3485+
3486+
.footer-bottom-links a:hover::after {
3487+
left: 0;
3488+
width: 100%;
3489+
transform: translateX(0) scaleX(1);
3490+
}
3491+
3492+
[data-theme="light"] .footer-bottom-links a::after { background: linear-gradient(90deg, #6abf8d, #f2a65a); }
3493+
[data-theme="light"] .footer-bottom-links a:hover { color: #4a8a5e; }
3494+
[data-theme="dark"] .footer-bottom-links a::after { background: linear-gradient(90deg, #9fddb5, #f6c58d); }
3495+
[data-theme="dark"] .footer-bottom-links a:hover { color: #9fddb5; }
3496+
3497+
/* ── 6. Brand description — subtle warm reveal ──────────────────── */
3498+
.footer-brand p {
3499+
transition: color 0.4s ease;
3500+
}
3501+
.footer:hover .footer-brand p { color: var(--text-secondary, #8892a4); }
3502+
[data-theme="light"] .footer:hover .footer-brand p { color: #5a4e47; }
3503+
[data-theme="dark"] .footer:hover .footer-brand p { color: #e0c8b4; }
3504+
3505+
/* ── 7. Reduced-motion safety ───────────────────────────────────── */
3506+
@media (prefers-reduced-motion: reduce) {
3507+
.footer::before { animation: none !important; }
3508+
.footer-social-icons a,
3509+
.footer-links a::before,
3510+
.footer-links a::after,
3511+
.footer-links h3::after,
3512+
.footer-bottom-links a::after {
3513+
transition: none !important;
3514+
transform: none !important;
3515+
}
3516+
.footer-social-icons a:hover,
3517+
.footer-links a:hover,
3518+
.footer-bottom-links a:hover {
3519+
transform: none !important;
3520+
}
3521+
/* Restore plain colour when gradient-text can't animate */
3522+
.footer-links a:hover {
3523+
-webkit-text-fill-color: var(--accent, #22c55e);
3524+
background-image: none;
3525+
}
3526+
}
31553527

31563528
/* ═══════════════════════════════════════════════════════════════
31573529
BACK TO TOP

0 commit comments

Comments
 (0)