/**
* /var/www/pavel-gorin/public/css/style.css
* Основные стили проекта — логотип по центру
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background-color: var(--color-bg);
margin: 0;
padding: 0 0 48px 0;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.bi::before {
line-height: 1.7 !important;
}
#neural-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.5;
}
.gradient-container {
flex: 1;
width: 100%;
background: radial-gradient(circle, rgba(42, 87, 199, 0.8) 0%, transparent 80%);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
.logo-container {
max-width: 400px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.logo-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.floating-buttons-container {
position: fixed;
top: 20px;
right: 20px;
display: flex;
flex-direction: row;
gap: 15px;
z-index: 1000;
pointer-events: none;
}
.floating-buttons-container > * {
pointer-events: auto;
}
.floating-btn {
background: rgba(6, 25, 52, 0.95);
border: 2px solid rgba(42, 87, 199, 0.5);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--color-primary-light);
font-size: 24px;
box-shadow: 0 5px 15px rgba(42, 87, 199, 0.3);
flex-shrink: 0;
}
.floating-btn:hover,
.floating-btn:focus,
.floating-btn:focus-visible {
box-shadow: 0 5px 25px rgba(42, 87, 199, 0.6);
transform: translateY(-2px) scale(1.05);
color: var(--color-white);
outline: none;
}
.floating-btn:active {
transform: translateY(0) scale(0.98);
}
/* === ГЛОБАЛЬНЫЙ СКРОЛЛБАР — ФИРМЕННЫЙ СТИЛЬ === */
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-track {
background: rgba(6, 25, 52, 0.8);
border-left: 1px solid rgba(42, 87, 199, 0.3);
}
html::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius: 6px;
border: 2px solid rgba(6, 25, 52, 0.8);
}
html::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}
html::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary-xl) 100%);
}
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: var(--color-primary) rgba(6, 25, 52, 0.8);
}
/* === ПРЕДУПРЕЖДЕНИЕ О МАЛЕНЬКОМ ЭКРАНЕ — СКРЫТО ПО УМОЛЧАНИЮ === */
.screen-warning {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(6, 25, 52, 0.98);
z-index: 999999;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.screen-warning-content {
max-width: 300px;
}
.screen-warning-content i {
font-size: 48px;
color: var(--color-error);
margin-bottom: 20px;
}
.screen-warning-content h2 {
color: var(--color-primary-light);
font-size: 20px;
margin-bottom: 15px;
}
.screen-warning-content p {
color: rgba(149, 196, 250, 0.8);
font-size: 14px;
line-height: 1.6;
}
/* Показываем только на очень маленьких экранах (≤250px) */
@media (max-width: 250px) {
body {
overflow: hidden;
}
.gradient-container,
.floating-buttons-container,
footer,
.page-content {
display: none !important;
}
.screen-warning {
display: flex;
}
}
@media (max-width: 768px) {
.logo-container {
max-width: 360px;
}
.floating-buttons-container {
top: 15px;
right: 15px;
gap: 12px;
}
.floating-btn {
width: 45px;
height: 45px;
font-size: 20px;
}
}
@media (max-width: 576px) {
/* Корректировка отступа в мобильной версии */
body {
padding-bottom: 196px;
}
.logo-container {
max-width: 320px;
padding: 15px;
}
.floating-buttons-container {
top: 10px;
right: 10px;
gap: 10px;
}
.floating-btn {
width: 42px;
height: 42px;
font-size: 18px;
}
}
@media (max-width: 375px) {
.logo-container {
max-width: 260px;
padding: 12px;
}
.floating-buttons-container {
top: 10px;
right: 10px;
gap: 8px;
}
.floating-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
}