/**
* /var/www/pavel-gorin/public/css/footer.css
* Стили для меню в подвале — кнопки разной ширины, одинаковые отступы
*/
footer {
padding: 0;
text-align: center;
background: linear-gradient(
180deg,
rgba(42, 87, 199, 0.25) 0%,
rgba(42, 87, 199, 0.15) 50%,
rgba(42, 87, 199, 0.20) 100%
);
border-top: 1px solid rgba(149, 196, 150, 0.4);
border-bottom: 1px solid rgba(6, 25, 52, 0.6);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
backdrop-filter: blur(16px) saturate(180%);
box-shadow:
0 -4px 20px rgba(42, 87, 199, 0.4),
inset 0 1px 0 rgba(149, 196, 150, 0.3);
display: flex;
align-items: center;
justify-content: center;
height: 48px;
flex-shrink: 0;
box-sizing: border-box;
}
.footer-menu {
display: flex;
flex-direction: row;
gap: 0;
justify-content: center;
align-items: center;
list-style: none;
margin: 0 auto;
padding: 0;
background: linear-gradient(
180deg,
rgba(42, 87, 199, 0.45) 0%,
rgba(42, 87, 199, 0.25) 50%,
rgba(42, 87, 199, 0.35) 100%
);
box-shadow:
inset 0 1px 0 rgba(149, 196, 150, 0.5),
inset 0 -1px 0 rgba(6, 25, 52, 0.5),
0 4px 20px rgba(42, 87, 199, 0.5),
0 0 30px rgba(42, 87, 199, 0.3);
height: 48px;
width: auto;
max-width: calc(100vw - 20px);
border-top: 1px solid rgba(149, 196, 150, 0.35);
border-bottom: 1px solid rgba(6, 25, 52, 0.6);
backdrop-filter: blur(12px) saturate(150%);
flex-shrink: 0;
box-sizing: border-box;
border-radius: 0;
overflow: visible;
}
.footer-menu-item {
margin: 0;
border-right: 1px solid rgba(149, 196, 150, 0.25);
height: 48px;
display: flex;
align-items: center;
position: relative;
flex: 0 0 auto;
min-width: 0;
box-sizing: border-box;
}
.footer-menu-item:last-child {
border-right: none;
}
.footer-menu-link {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(0, 0, 0, 0.1) 100%
);
border: none;
border-radius: 0;
padding: 0 24px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #ffffff;
font-size: 11px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
width: 100%;
text-shadow: 0 0 8px rgba(42, 87, 199, 0.6), 0 0 15px rgba(42, 87, 199, 0.3);
position: relative;
overflow: visible;
flex-shrink: 0;
box-sizing: border-box;
white-space: nowrap;
}
.footer-menu-link:hover {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.2) 100%
);
color: #ffffff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 0 25px rgba(42, 87, 199, 0.7),
0 0 50px rgba(149, 196, 150, 0.4);
text-shadow: 0 0 12px rgba(42, 87, 199, 0.9), 0 0 25px rgba(42, 87, 199, 0.5);
}
.footer-menu-link:active {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.15) 50%,
rgba(0, 0, 0, 0.3) 100%
);
box-shadow:
inset 0 2px 6px rgba(0, 0, 0, 0.5),
0 0 10px rgba(42, 87, 199, 0.4);
}
.footer-menu-link.active {
background: linear-gradient(
180deg,
rgba(6, 25, 52, 0.85) 0%,
rgba(6, 25, 52, 0.75) 50%,
rgba(6, 25, 52, 0.80) 100%
);
box-shadow:
inset 0 1px 0 rgba(149, 196, 150, 0.4),
inset 0 2px 6px rgba(6, 25, 52, 0.9),
0 0 15px rgba(42, 87, 199, 0.5);
text-shadow: 0 0 10px rgba(42, 87, 199, 0.8);
}
@media (max-width: 768px) {
footer {
height: 48px;
}
.footer-menu {
max-width: 100%;
border-radius: 0;
}
.footer-menu-item {
height: 48px;
}
.footer-menu-link {
padding: 0 20px;
font-size: 10px;
letter-spacing: 0.8px;
}
}
@media (max-width: 576px) {
footer {
height: auto;
min-height: 48px;
padding: 8px 0;
}
.footer-menu {
flex-direction: column;
width: 100%;
max-width: 260px;
height: auto;
border-radius: 0;
border-top: 1px solid rgba(149, 196, 150, 0.35);
border-bottom: 1px solid rgba(6, 25, 52, 0.6);
}
.footer-menu-item {
border-right: none;
border-bottom: 1px solid rgba(149, 196, 150, 0.25);
width: 100%;
height: 44px;
}
.footer-menu-item:last-child {
border-bottom: none;
}
.footer-menu-link {
padding: 0 24px;
font-size: 11px;
height: 44px;
}
}