122 lines
2.4 KiB
CSS
122 lines
2.4 KiB
CSS
.site-footer {
|
|
position: relative;
|
|
margin-top: 0;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 82% 10%, rgba(var(--theme-accent-rgb) / 0.15), transparent 22rem),
|
|
var(--footer-bg);
|
|
color: var(--footer-text);
|
|
border-top: 1px solid var(--footer-border);
|
|
}
|
|
|
|
.site-footer--flush {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.site-footer::before {
|
|
content: "ATMOS";
|
|
position: absolute;
|
|
right: var(--page-x);
|
|
bottom: -0.16em;
|
|
color: var(--footer-watermark);
|
|
font-size: clamp(5.5rem, 18vw, 20rem);
|
|
line-height: 0.8;
|
|
letter-spacing: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.site-footer__inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: var(--container-wide);
|
|
margin: 0 auto;
|
|
padding: clamp(2.4rem, 7vw, 6.5rem) 0 clamp(2.2rem, 5vw, 4.8rem);
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.65fr) minmax(12rem, 0.75fr);
|
|
gap: var(--gap-lg);
|
|
align-items: start;
|
|
}
|
|
|
|
.site-footer__brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap-sm);
|
|
}
|
|
|
|
.site-footer__logo {
|
|
width: fit-content;
|
|
color: var(--theme-accent-contrast);
|
|
font-size: clamp(1rem, 1.5vw, 1.2rem);
|
|
letter-spacing: 0.22em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-footer__text {
|
|
max-width: 32rem;
|
|
margin: 0;
|
|
color: var(--footer-text-muted);
|
|
font-size: var(--text-base);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.site-footer__nav-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap-sm);
|
|
padding-top: 0.2rem;
|
|
}
|
|
|
|
.site-footer__heading {
|
|
color: var(--footer-text-faint);
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.site-footer__nav {
|
|
display: block;
|
|
}
|
|
|
|
.site-footer__nav ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.72rem;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.site-footer__nav a {
|
|
width: fit-content;
|
|
color: var(--footer-text);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.2;
|
|
text-decoration: none;
|
|
transition:
|
|
color var(--duration-med) var(--ease-out),
|
|
opacity var(--duration-med) var(--ease-out),
|
|
transform var(--duration-med) var(--ease-out);
|
|
}
|
|
|
|
.site-footer__nav a:hover,
|
|
.site-footer__nav a:focus-visible {
|
|
color: var(--theme-accent);
|
|
transform: translateX(0.25rem);
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.site-footer__inner {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.site-footer__brand {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.site-footer__inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|