3b718f7123
The logo was much taller than the text columns and top-aligned, making the footer look lopsided. Vertically centers the grid columns and shrinks the logo so it's proportionate to the rest of the footer. Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH
88 lines
1.4 KiB
CSS
88 lines
1.4 KiB
CSS
.footer {
|
|
background: var(--color-charcoal);
|
|
color: var(--color-cream);
|
|
font-family: var(--font-serif);
|
|
font-size: 0.85rem;
|
|
border-top: 1px solid rgba(176, 141, 87, 0.35);
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--color-cream);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
.inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: var(--space-xl) var(--space-lg) var(--space-lg);
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr 1fr;
|
|
align-items: center;
|
|
gap: var(--space-xl);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
width: 100%;
|
|
max-width: 130px;
|
|
height: auto;
|
|
}
|
|
|
|
.columnTitle {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: var(--color-gold);
|
|
margin: 0 0 var(--space-sm);
|
|
}
|
|
|
|
.column p,
|
|
.column a {
|
|
display: block;
|
|
margin: 0 0 0.4rem;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.copyright {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: var(--space-md) var(--space-lg) var(--space-lg);
|
|
border-top: 1px solid rgba(247, 243, 236, 0.12);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.5px;
|
|
color: rgba(247, 243, 236, 0.5);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.inner {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.links {
|
|
align-items: center;
|
|
}
|
|
|
|
.brand {
|
|
justify-content: center;
|
|
}
|
|
}
|