line-gestao-frontend/src/app/components/footer/footer.scss

144 lines
2.3 KiB
SCSS

/* ===================================== */
/* FOOTER CONTAINER */
/* ===================================== */
.footer-container {
width: 100%;
background: rgba(3, 15, 170, 0.93);
padding: 25px 60px;
display: flex;
justify-content: space-between;
align-items: flex-start;
font-family: "Inter", sans-serif;
color: #FFFFFF;
/* ===========================
📱 RESPONSIVIDADE
=========================== */
/* Tablets e celulares — empilha tudo */
@media (max-width: 768px) {
flex-direction: column;
padding: 25px 20px;
align-items: flex-start;
}
}
/* ===================================== */
/* LADO ESQUERDO */
/* ===================================== */
.footer-left {
margin-top: 100px;
@media (max-width: 768px) {
margin-top: 40px;
}
@media (max-width: 480px) {
margin-top: 20px;
}
}
.footer-left p {
margin: 0 0 4px 270px;
font-size: 14px;
font-weight: 600;
@media (max-width: 768px) {
margin-left: 0; /* remove o deslocamento gigante */
font-size: 13px;
}
@media (max-width: 480px) {
font-size: 12px;
}
}
/* ===================================== */
/* LADO DIREITO */
/* ===================================== */
.footer-right {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
gap: 0px;
margin-right: 300px;
@media (max-width: 1024px) {
margin-right: 100px;
}
@media (max-width: 768px) {
margin-right: 0;
align-items: flex-start; /* tudo fica alinhado à esquerda */
margin-top: 40px;
}
@media (max-width: 480px) {
margin-top: 20px;
}
}
/* Redes sociais */
.social-wrapper {
width: 100%;
display: flex;
justify-content: flex-start;
margin-bottom: 0;
@media (max-width: 768px) {
margin-top: 5px;
}
}
.social-section {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
@media (max-width: 480px) {
gap: 6px;
}
}
.social-label {
font-size: 14px;
font-weight: 500;
@media (max-width: 480px) {
font-size: 13px;
}
}
.social-icon i {
font-size: 22px;
color: #FFF;
cursor: pointer;
transition: 0.2s;
@media (max-width: 480px) {
font-size: 19px;
}
}
.social-icon i:hover {
opacity: 0.7;
}
/* Botão */
.footer-button-wrapper {
margin-top: 0;
@media (max-width: 768px) {
margin-top: 10px;
}
}