");
}
.fh-page::after {
content: '';
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 25vh;
min-height: 200px;
z-index: 1;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
}
.fh-link-button > svg {
display: none !important;
}
.fh-link-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
color: var(--text-light);
margin-bottom: 14px;
padding: 1.2rem;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.fh-link-button:has(img) {
flex-direction: column;
padding: 0 !important;
}
.fh-link-button:has(img) > :first-child {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
.fh-link-button:has(img) img {
width: 100% !important;
height: auto;
display: block;
object-fit: cover;
}
.fh-link-button:has(img) .fh-link-label {
width: 100%;
text-align: center;
padding: 1.2rem;
}
.fh-link-button:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
border-color: rgba(212, 229, 178, 0.2);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 229, 178, 0.05);
letter-spacing: 0.3px;
}
.fh-link-primary {
background: linear-gradient(135deg, rgba(212, 229, 178, 0.15), rgba(212, 229, 178, 0.05));
border-color: rgba(212, 229, 178, 0.3);
border-top: 1px solid rgba(212, 229, 178, 0.5);
color: #fff;
}
.fh-link-primary:hover {
background: linear-gradient(135deg, rgba(212, 229, 178, 0.25), rgba(212, 229, 178, 0.1));
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(212, 229, 178, 0.15);
}
.fh-avatar {
border: 2px solid rgba(212, 229, 178, 0.3);
box-shadow: 0 0 30px rgba(254, 250, 224, 0.1);
}
.fh-display-name {
font-family: 'Chakra Petch', sans-serif;
color: var(--sunlight);
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
font-weight: 700;
letter-spacing: 1px;
}
@media (prefers-reduced-motion: reduce) {
.fh-page::before, .fh-page::after { display: none; }
.fh-link-button { backdrop-filter: none; background: #152e1d; }
}
