Files
talk-pro/src/styles/footer.css

130 lines
1.9 KiB
CSS
Raw Normal View History

.site-footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 64px 0;
background: #fef0eb;
}
.site-footer__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 1280px;
gap: 36px;
margin: 0 auto;
padding: 0 16px;
}
.site-footer__top {
display: flex;
flex-direction: column;
width: 100%;
gap: 40px;
}
.site-footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
min-width: 0;
gap: 24px;
overflow: clip;
}
.site-footer__logo-frame {
position: relative;
width: 220px;
height: 64px;
}
.site-footer__logo {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.site-footer__description {
max-width: 320px;
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #7a726d;
}
.site-footer__divider {
width: 100%;
height: 1px;
background: #e3d9d1;
}
.site-footer__bottom {
display: flex;
flex-direction: column;
width: 100%;
gap: 12px;
overflow: clip;
}
.site-footer__legal {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: normal;
color: #7a726d;
}
.site-footer__spacer {
display: none;
}
@media (min-width: 768px) {
.site-footer__bottom {
flex-direction: row;
align-items: center;
gap: 20px;
}
.site-footer__spacer {
display: block;
flex: 1;
min-width: 0;
}
}
@media (min-width: 1023px) {
.site-footer {
padding: 120px 0;
}
.site-footer__inner {
padding: 0 24px;
}
.site-footer__top {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 0;
}
}
@media (min-width: 1280px) {
.site-footer__inner {
padding: 0;
}
.site-footer__legal {
white-space: nowrap;
}
}