Files
web7sys/public/css/footer.css
ben7sys c6f023dccb Verbesserte Standardansicht mit subtilen Hintergründen
Entfernung der dimensionalen Effekte im Normalzustand
Beibehaltung der bewährten Hover-Effekte
Konsistentes Design zwischen Header und Footer
2024-11-17 09:17:46 +01:00

119 lines
2.4 KiB
CSS

footer {
background: var(--bg-card);
padding: var(--spacing-xl) var(--spacing-md);
margin-top: calc(2 * var(--spacing-xl));
border-top: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-lg);
}
.contact-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
}
.contact-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.contact-item i {
color: var(--primary);
font-size: 1.2rem;
}
.contact-item .signal-icon {
color: var(--primary);
width: 1.2rem;
height: 1.2rem;
}
.contact-item a {
color: var(--text);
text-decoration: none;
transition: all 0.3s ease;
padding: 0.3rem 0.5rem;
border-radius: var(--border-radius);
background-color: rgba(var(--bg-hover-rgb), 0.4);
}
.contact-item a:hover {
color: var(--primary);
background-color: var(--bg-card);
transform: translateY(-1px);
}
.contact-item:hover .signal-icon {
color: var(--primary);
}
.social-links {
display: flex;
gap: var(--spacing-lg);
justify-content: center;
}
.social-links a {
color: var(--text);
text-decoration: none;
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: var(--border-radius);
font-size: 1.5rem;
background-color: rgba(var(--bg-hover-rgb), 0.4);
}
.social-links a:hover {
color: var(--primary);
background-color: var(--bg-card);
transform: translateY(-2px);
}
.legal-links {
text-align: center;
font-size: 0.95rem;
color: var(--text-muted);
padding-top: var(--spacing-md);
}
.legal-links a {
color: var(--text);
text-decoration: none;
margin: 0 var(--spacing-sm);
transition: all 0.3s ease;
padding: 0.4rem 0.8rem;
border-radius: var(--border-radius);
position: relative;
background-color: rgba(var(--bg-hover-rgb), 0.4);
font-weight: 500;
letter-spacing: 0.2px;
}
.legal-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: var(--primary);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.legal-links a:hover {
color: var(--primary);
background-color: var(--bg-card);
transform: translateY(-1px);
}
.legal-links a:hover::after {
width: calc(100% - 1.6rem);
}