.site-footer {
display: flex;
align-items: center;
margin: 0 auto;
padding: 0 16px;
flex-direction: column;
}
.footer-section {
max-width: 1440px;
width: 100%;
padding: 16px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.footer-container {
position: relative;
background:
linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
var(--gradient-footer-border) border-box;
border: 2px solid transparent;
border-radius: var(--border-radius-lg);
padding: 4px 6%;
width: 1408px;
box-shadow: 0px 0px 0px 1px var(--color-border-light);
outline-offset: -2px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.footer-header {
padding: 32px 0;
border-bottom: 1px solid var(--color-footer-border);
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
position: relative;
}
.footer-logo-container {
display: flex;
align-items: center;
gap: 24px;
}
.footer-logo {
width: 62px;
height: auto;
position: relative;
overflow: hidden;
}
.footer-company-name {
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: var(--color-text);
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-social-icons {
height: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.social-icon {
width: 32px;
height: 32px;
padding: 7px;
background: var(--color-social-bg);
box-shadow: var(--box-shadow-sm);
border-radius: 9px;
outline: 1px solid var(--color-social-border);
outline-offset: -1px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.social-icon:hover {
background: var(--color-bg-light);
transform: translateY(-2px);
}
.footer-content {
height: 308px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 36px;
align-self: stretch;
margin-top: 24px;
}
.footer-column {
flex: 1;
height: 100%;
border-right: 1px #EBEBEB solid;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 2;
}
.footer-column:last-child {
border-right: unset;
}
.footer-column:last-child::after,
.footer-column:last-child::before {
display: none;
}
.footer-column-title {
font-size: 13.9px;
font-weight: 700;
line-height: 20px;
color: var(--color-text);
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-link {
font-size: 13.9px;
font-weight: 400;
line-height: 20px;
color: var(--color-footer-link);
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
}
a.footer-link:hover {
color: var(--color-primary);
}
.footer-bottom {
height: 140px;
padding: 32px 0;
border-top: 1px #EBEBEB solid;
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
position: relative;
}
.copyright {
font-size: 14px;
font-family: 'Segoe UI', sans-serif;
font-weight: 400;
line-height: 21.98px;
color: #1C1934;
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
}
.security-notice {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
.security-icon {
width: 11px;
height: auto;
position: relative;
}
.security-text {
font-size: 14px;
font-family: 'Segoe UI', sans-serif;
font-weight: 400;
line-height: 21.98px;
color: #1C1934;
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-header::before {
content: "";
position: absolute;
bottom: -4px;
left: -4px;
width: 9px;
height: 9px;
background-color: white;
border: 1px solid #EBEBEB;
border-radius: 2px;
}
.footer-header::after {
content: "";
position: absolute;
bottom: -4px;
right: -4px;
width: 9px;
height: 9px;
background-color: white;
border: 1px solid #EBEBEB;
border-radius: 2px;
}
.footer-column::before {
content: "";
position: absolute;
top: -6px;
right: -6px;
width: 9px;
height: 9px;
background-color: white;
border: 1px solid #EBEBEB;
border-radius: 2px;
}
.footer-column::after {
content: "";
position: absolute;
bottom: -6px;
right: -6px;
width: 9px;
height: 9px;
background-color: white;
border: 1px solid #EBEBEB;
border-radius: 2px;
}
.footer-bottom::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 9px;
height: 9px;
background-color: white;
border: 1px solid #EBEBEB;
border-radius: 2px;
}
.footer-bottom::after {
content: "";
position: absolute;
top: -4px;
right: -4px;
width: 9px;
height: 9px;
background-color: white;
border: 1px solid #EBEBEB;
border-radius: 2px;
} @media (max-width: 1024px) {
.footer-container {
width: 100%;
padding: 4px 32px;
}
.footer-header {
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.footer-content {
flex-wrap: wrap;
height: auto;
gap: 24px;
}
.footer-column {
flex: 1 1 calc(50% - 18px);
border-right: none;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
align-items: flex-start;
height: auto;
}
.footer-column::before {
display: none;
}
.footer-column::after {
display: none;
}
}
@media (max-width: 768px) {
.footer-container {
padding: 4px 16px;
}
.footer-header {
padding: 24px 0;
}
.footer-logo-container {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.footer-social-icons {
justify-content: flex-start;
}
.footer-content {
flex-direction: column;
gap: 32px;
}
.footer-column {
flex: 1 1 100%;
border-right: none;
}
.footer-bottom {
padding: 24px 0;
}
}