*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
/* ====================================== */
/* Шапка сайту */
/* ====================================== */
body{
margin:0;
color:#fff;
font-family:"Poppins",Arial,sans-serif;
background:linear-gradient(135deg,#720000,#250000 45%,#050505);
min-height:100vh
}
img{
max-width:100%;
display:block
}
.container{
width:min(1400px,92%);
margin:auto
}
.site-header{
position:sticky;
top:0;
z-index:1000;
background:rgba(10,10,10,.96); /*фон*/
border-bottom:2px solid #990000;/**червона лінія знизу*/
box-shadow:0 6px 20px rgba(0,0,0,.45)
}
.header-inner{
width:min(1500px,96%);
margin:auto;
min-height:105px;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px
}
.brand{
display:flex;
align-items:center;
gap:16px;
flex-shrink:0
}
.club-logo{
width:76px;
height:76px;
object-fit:contain;
transition:.3s
}
.club-logo:hover{
transform:scale(1.06)
}
.brand-text h1{
margin:0;
font-size:21px
}
.brand-text p{
margin:4px 0 0;
color:#bbb;
font-size:12px
}
/* Меню навігації */
.main-nav{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:4px
}
.main-nav a{
color:#f3efef;
text-decoration:none;
font-weight:bold;
padding:12px 18px;
transition:0.3s;
}
.main-nav a:hover,.main-nav a.active{
background:#990000;
transform:translateY(-2px)
}
.header-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
flex-shrink:0
}
.languages,.social-links{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end
}
/* ====================================== */
/* Кнопки мов (однаковий вигляд) */
/* ====================================== */
.languages a{
background:#111111;
color:#ffffff;
text-decoration:none;
font-weight:bold;
padding:8px 14px;
border:2px solid #990000;
border-radius:10px;
transition:0.3s;
}
/* При наведенні */
.languages a:hover{
background:#990000;
color:#ffffff;
}
/* Активна мова */
/*.languages a.active{
background:#111111;
color:#ffffff;
border:2px solid #990000;
}*/
.social-links a{
text-decoration:none;
color:#ccc;
font-size:11px
}
.social-links a:hover{
color:#fff
}
/* Головний банер сайту */
.hero{
min-height:600px;
padding:60px 20px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.82)),url("../images/stadium.jpg") center/cover no-repeat
}
.hero-content{
max-width:900px
}
.hero h2{
font-size:clamp(42px,7vw,82px);
margin:0 0 16px;
text-transform:uppercase
}
.hero p{
font-size:clamp(18px,2.5vw,28px);
margin:0 0 32px;
color:#e1e1e1
}
.hero-buttons{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap
}
.button,.button2{
display:inline-block;
text-decoration:none;
padding:14px 32px;
border-radius:30px;
font-weight:700;
transition:.3s
}
/* ====================================== */
/* Основна кнопка */
/* ====================================== */
.button{
display:inline-block;
background:#ffffff;
color:#000000;
text-decoration:none;
padding:14px 30px;
border:2px solid #ffffff;
border-radius:30px;
font-weight:bold;
transition:0.3s;
}
.button:hover{
background:#990000;
color:#ffffff;
border:2px solid #990000;
}
/* Кнопка «Підтримати клуб» */
.button2{
display:inline-block;
background:#ffffff;
color:#000000;
text-decoration:none;
padding:14px 30px;
border:2px solid #ffffff;
border-radius:30px;
font-weight:bold;
transition:0.3s;
}
/* При наведенні кнопка стає червоною */
.button2:hover{
background:#990000;
color:#ffffff;
border-color:#990000;
}
.page-hero{
padding:70px 20px;
text-align:center;
background:rgba(0,0,0,.28)
}
.page-hero h2{
font-size:clamp(38px,5vw,58px);
margin:0 0 10px
}
.page-hero p{
margin:0;
color:#ccc
}
.section{
padding:75px 0
}
.section-title{
text-align:center;
max-width:760px;
margin:0 auto 45px
}
.section-title h2{
font-size:44px;
margin:0 0 12px
}
.section-title p{
color:#ccc;
line-height:1.7
}
.news-container{
display:flex;
justify-content:center;
gap:28px;
flex-wrap:wrap
}
.card{
width:360px;
background:#181818;
border-radius:18px;
overflow:hidden;
box-shadow:0 14px 32px rgba(0,0,0,.35);
transition:.35s
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(255,0,0,.22)
}
.card img{
width:100%;
height:220px;
object-fit:cover
}
.card-content{
padding:24px
}
.card h3{
font-size:24px;
margin:0 0 12px
}
.card p{
color:#ccc;
line-height:1.7
}
.card a{
text-decoration:none;
color:#ff5555;
font-weight:700
}
.table-wrap{
overflow-x:auto;
background:rgba(15,15,15,.55);
border-radius:16px;
padding:10px
}
table{
width:100%;
border-collapse:collapse;
min-width:760px
}
th{
background:#990000;
color:#fff;
padding:16px
}
td{
padding:16px;
text-align:center;
border-bottom:1px solid #444;
background:rgba(15,15,15,.7)
}
tbody tr:hover td{
background:#5d0000
}
.players-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px
}
.player-card{
background:linear-gradient(180deg,#242424,#151515);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.35);
transition:.3s
}
.player-card:hover{
transform:translateY(-8px);
box-shadow:0 22px 45px rgba(153,0,0,.35)
}
.player-photo{
position:relative;
height:340px;
overflow:hidden
}
.player-photo img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s
}
.player-card:hover .player-photo img{
transform:scale(1.05)
}
.player-number{
position:absolute;
right:16px;
bottom:16px;
width:56px;
height:56px;
display:flex;
justify-content:center;
align-items:center;
background:#990000;
border:3px solid #fff;
border-radius:50%;
font-size:22px;
font-weight:700
}
.player-info{
padding:22px
}
.player-position{
color:#ff4a4a;
text-transform:uppercase;
font-weight:700;
font-size:13px
}
.player-info h3{
margin:8px 0 16px;
font-size:22px
}
.player-info p{
color:#ccc;
margin:7px 0
}
.gallery-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.photo{
overflow:hidden;
border-radius:18px;
background:#111;
box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.photo img{
width:100%;
height:280px;
object-fit:cover;
transition:.5s
}
.photo:hover img{
transform:scale(1.1)
}
.photo p{
padding:18px;
text-align:center;
font-weight:700;
margin:0
}
.video-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px
}
.video-card{
background:#181818;
border-radius:18px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.35)
}
.video-card iframe{
width:100%;
height:320px;
border:0
}
.video-info{
padding:22px
}
.video-info h3{
margin:0 0 8px
}
.video-info p{
color:#ccc
}
.content-block{
width:min(1100px,92%);
margin:0 auto 40px;
background:rgba(20,20,20,.72);
padding:34px;
border-radius:18px
}
.content-block h3{
font-size:30px;
margin-top:0
}
.content-block p{
color:#ddd;
line-height:1.8
}
.stadium-image{
width:100%;
border-radius:18px;
margin-top:20px
}
.timeline .year{
background:#181818;
padding:22px;
margin-bottom:16px;
border-left:8px solid #990000;
border-radius:10px
}
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:35px;
align-items:start
}
.contact-card,form{
background:rgba(20,20,20,.8);
padding:28px;
border-radius:18px
}
form{
width:100%;
max-width:560px
}
label{
display:block;
font-size:17px;
margin:12px 0 7px
}
input,textarea{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid #555;
background:#111;
color:#fff;
font:inherit
}
textarea{
height:150px;
resize:vertical
}
button{
background:#b30000;
color:#fff;
padding:14px 28px;
border:0;
border-radius:10px;
cursor:pointer;
font-weight:700
}
button:hover{
background:#d40505
}
.support-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.support-card{
background:#181818;
border-radius:18px;
padding:28px;
text-align:center
}
.support-card h3{
font-size:24px
}
.support-card p{
color:#ccc;
line-height:1.7
}
/* Нижня частина сайту */
.site-footer{
background:#0d0d0d;
margin-top:70px;
padding-top:55px;
border-top:2px solid #620000
}
.footer-container{
width:min(1400px,92%);
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:38px
}
.footer-logo img{
width:88px
}
.footer-logo h2{
font-size:24px
}
.footer-logo p,.footer-contact p{
color:#bbb;
line-height:1.7
}
.footer-menu,.footer-social{
display:flex;
flex-direction:column;
gap:10px
}
.footer-menu a,.footer-social a{
text-decoration:none;
color:#ddd
}
.footer-menu a:hover,.footer-social a:hover{
color:#ff4444
}
.copyright{
text-align:center;
padding:26px;
margin-top:38px;
border-top:1px solid #333;
color:#999
}
/* ====================================== */
/* Соціальні мережі */
/* ====================================== */
.social-links{
display:flex;
justify-content:center; /* Центр по горизонталі */
align-items:center; /* Центр по вертикалі */
gap:20px;
width:100%;
}
.social-links a{
width:45px;
height:45px;
display:flex;
justify-content:center;
align-items:center;
background:#ffffff;
color:#000000;
border-radius:50%;
text-decoration:none;
font-size:22px;
transition:0.3s;
}
.social-links a:hover{
background:#990000;
color:#ffffff;
transform:scale(1.15);
}
/* ====================================== */
/* Новини на головній сторінці */
/* ====================================== */
.home-news{
padding:80px 0;
}
/* Сітка з чотирьох новин */
.news-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:24px;
}
/* Одна картка новини */
.news-card{
overflow:hidden;
background:#181818;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,0.35);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Ефект при наведенні */
.news-card:hover{
transform:translateY(-8px);
box-shadow:0 22px 45px rgba(153,0,0,0.35);
}
/* Фотографія новини */
.news-card img{
width:100%;
height:210px;
object-fit:cover;
}
/* Текст усередині картки */
.news-card-content{
padding:22px;
}
.news-card-content h3{
margin:8px 0 12px;
font-size:22px;
}
.news-card-content p{
color:#cccccc;
line-height:1.6;
}
/* Дата новини */
.news-date{
color:#ff5555 !important;
font-size:13px;
font-weight:bold;
}
/* Посилання «Читати більше» */
.news-card-content a{
color:#ff5555;
text-decoration:none;
font-weight:bold;
}
/* Кнопка «Переглянути всі новини» */
.all-news-button{
margin-top:40px;
text-align:center;
}
@media(max-width:1150px){
.header-inner{
flex-direction:column;
padding:16px 0
}
.header-actions{
align-items:center
}
.players-grid{
grid-template-columns:repeat(3,1fr)
}
}
@media(max-width:900px){
.gallery-container,.video-grid,.footer-container,.contact-grid{
grid-template-columns:repeat(2,1fr)
}
.players-grid{
grid-template-columns:repeat(2,1fr)
}
.support-grid{
grid-template-columns:1fr
}
}
@media(max-width:650px){
.brand{
flex-direction:column;
text-align:center
}
/* Меню навігації */
.main-nav{
flex-direction:column;
width:100%
}
.main-nav a{
width:100%;
text-align:center
}
.languages,.social-links{
justify-content:center
}
.hero-buttons{
flex-direction:column;
align-items:center
}
.button,.button2{
width:260px
}
.gallery-container,.video-grid,.players-grid,.footer-container,.contact-grid{
grid-template-columns:1fr
}
.section{
padding:50px 0
}
.section-title h2{
font-size:36px
}
.player-photo{
height:380px
}
}
/* Планшет */
@media(max-width:1100px){
.news-grid{
grid-template-columns:repeat(2, 1fr);
}
}
/* Телефон */
@media(max-width:600px){
.news-grid{
grid-template-columns:1fr;
}
}
/* =============================== */
/* Випадаюче меню */
/* =============================== */
.nav-item{position:relative;display:inline-block}
.dropbtn{display:block;padding:9px 10px;text-decoration:none}
.dropdown-content{
display:none;
position:absolute;
background:#111;
min-width:220px;
border:1px solid #900;
border-radius:8px;
z-index:999;
}
.dropdown-content a{
display:block;
padding:10px;
text-decoration:none;
color:white;
}
.dropdown-content a:hover{background:#900;}
.nav-item:hover>.dropdown-content{display:block;}
/* ===================================== */
/* МОБІЛЬНЕ МЕНЮ */
/* ===================================== */
.menu-toggle { /*На комп’ютері кнопка прихована.*/
display: none; /**/
width: 46px;
height: 42px;
padding: 8px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 8px;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 100%;
height: 3px;
margin: 5px 0;
background: #ffffff;
border-radius: 5px;
transition: 0.3s;
}
/* Вигляд сайту на телефоні */
@media (max-width: 900px) { /*Код усередині працює тільки на екранах до 900 пікселів — телефонах і планшетах.*/
.header-inner {
position: relative;
flex-wrap: wrap;
}
.menu-toggle {
display: block;
margin-left: auto;
}
.main-nav {
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
margin-top: 15px;
padding: 15px;
background: rgba(15, 15, 15, 0.98);
border-radius: 10px;
}
/* Клас open додаватиме JavaScript */
.main-nav.open { /*JavaScript додаватиме клас open, після чого меню з’являтиметься.*/
display: flex;
}
.main-nav > a,
.main-nav .dropbtn {
display: block;
width: 100%;
padding: 12px;
text-align: left;
}
.nav-item {
width: 100%;
}
.dropdown-content {
position: static;
display: none;
width: 100%;
margin-top: 4px;
padding-left: 12px;
background: rgba(45, 45, 45, 0.95);
box-shadow: none;
}
/* Відкритий підпункт */
.nav-item.open .dropdown-content { /*Коли JavaScript додасть клас open до пункту «Клуб», «Матчі» або іншого пункту, його підпункти з’являться.*/
display: flex;
flex-direction: column;
}
.dropdown-content a {
padding: 11px 14px;
}
}
/* Перетворення кнопки ☰ на хрестик */
.menu-toggle.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* ===================================== */
/* ПЕРЕГЛЯД ФОТОГРАФІЙ НА ВЕСЬ ЕКРАН */
/* ===================================== */
.gallery-image {
display: block;
width: 100%;
cursor: pointer;
transition:
transform 0.3s ease,
filter 0.3s ease;
}
.gallery-image:hover {
transform: scale(1.04);
filter: brightness(1.08);
}
/* Затемнений фон */
.lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 70px 90px 40px;
background: rgba(0, 0, 0, 0.94);
}
/* Відкрите вікно */
.lightbox.open { /* І вікно стає видимим. */
display: flex;
}
/* Блок із фотографією */
.lightbox-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Велика фотографія */
.lightbox-content img {
display: block;
max-width: 100%;
max-height: calc(100vh - 150px);
object-fit: contain;
border-radius: 8px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.55);
}
/* Підпис фотографії */
.lightbox-content p {
margin: 16px 0 0;
color: #ffffff;
font-size: 18px;
text-align: center;
}
/* Хрестик */
.lightbox-close {
position: absolute;
top: 20px;
right: 25px;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
background: rgba(20, 20, 20, 0.8);
color: #ffffff;
font-size: 24px;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.lightbox-close:hover {
background: #a00000;
transform: rotate(90deg);
}
/* Стрілки вперед і назад */
.lightbox-arrow {
position: absolute;
top: 50%;
width: 52px;
height: 60px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: rgba(20, 20, 20, 0.75);
color: #ffffff;
font-size: 25px;
cursor: pointer;
transform: translateY(-50%);
transition:
background 0.25s ease,
transform 0.25s ease;
}
.lightbox-arrow:hover {
background: #a00000;
transform:
translateY(-50%)
scale(1.08);
}
.lightbox-prev {
left: 22px;
}
.lightbox-next {
right: 22px;
}
/* Заборона прокручування сторінки */
body.lightbox-open {
overflow: hidden;
}
/* Вигляд на телефоні */
@media (max-width: 700px) {
.lightbox {
padding: 70px 55px 30px;
}
.lightbox-arrow {
width: 42px;
height: 52px;
font-size: 20px;
}
.lightbox-prev {
left: 7px;
}
.lightbox-next {
right: 7px;
}
.lightbox-close {
top: 12px;
right: 12px;
width: 42px;
height: 42px;
}
.lightbox-content img {
max-height: calc(100vh - 130px);
}
.lightbox-content p {
font-size: 15px;
}
}
/* ===================================== */
/* АКТИВНИЙ ПУНКТ ГОЛОВНОГО МЕНЮ */
/* ===================================== */
/* Активне пряме посилання */
.main-nav > a.active-page,
.main-nav .dropbtn.active-page {
color: #ffffff;
background: #9e0000;
border-radius: 7px;
}
/* Активний підпункт */
.dropdown-content a.active-page {
color: #ffffff;
background: #9e0000;
}
/* Червона лінія під активним пунктом */
.main-nav > a.active-page::after,
.main-nav .dropbtn.active-page::after {
width: 100%;
}
/* Активний пункт на телефоні */
@media (max-width: 900px) {
.main-nav > a.active-page,
.main-nav .dropbtn.active-page {
background: #9e0000;
color: #ffffff;
}
.dropdown-content a.active-page {
background: rgba(158, 0, 0, 0.8);
color: #ffffff;
}
}
/* ===================================== */
/* КОНТАКТНА ФОРМА */
/* ===================================== */
.contact-form {
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 30px;
background: rgba(20, 20, 20, 0.94);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.3);
}
/* Один блок форми */
.form-group {
margin-bottom: 22px;
}
/* Назва поля */
.form-group label {
display: block;
margin-bottom: 8px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
/* Поля введення */
.form-group input,
.form-group textarea {
width: 100%;
padding: 13px 15px;
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
font-family: inherit;
font-size: 16px;
outline: none;
transition:
border-color 0.25s ease,
background 0.25s ease;
}
/* Колір підказки */
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #a9a9a9;
}
/* Поле після натискання */
.form-group input:focus,
.form-group textarea:focus {
border-color: #d00000;
background: rgba(255, 255, 255, 0.1);
}
/* Забороняємо змінювати ширину textarea */
.form-group textarea {
resize: vertical;
min-height: 150px;
}
/* Поле з помилкою */
.form-group input.input-error,
.form-group textarea.input-error {
border-color: #ff3b3b;
background: rgba(255, 0, 0, 0.08);
}
/* Текст помилки */
.form-error {
display: block;
min-height: 20px;
margin-top: 6px;
color: #ff6b6b;
font-size: 13px;
}
/* Кнопка надсилання */
.contact-submit {
display: inline-block;
padding: 13px 24px;
background: #920000;
color: #ffffff;
border: 0;
border-radius: 8px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.contact-submit:hover {
background: #c00000;
transform: translateY(-2px);
}
/* Повідомлення про успіх */
.form-success {
min-height: 24px;
margin: 18px 0 0;
color: #70e58c;
font-size: 15px;
font-weight: 600;
}
/* Вигляд форми на телефоні */
@media (max-width: 700px) {
.contact-form {
padding: 22px 16px;
}
.contact-submit {
width: 100%;
}
}
/* ===================================== */
/* ЗАХИСТ КОНТАКТНОЇ ФОРМИ ВІД СПАМУ */
/* ===================================== */
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* ===================================== */
/* СТАН НАДСИЛАННЯ КОНТАКТНОЇ ФОРМИ */
/* ===================================== */
/* Заблокована кнопка під час надсилання */
.contact-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
/* Повідомлення про помилку надсилання */
.form-success.form-message-error {
color: #ff6b6b;
}
/* Повідомлення про успішне надсилання */
.form-success:not(.form-message-error) {
color: #70e58c;
}
/* ===================================== */
/* ЛІЧИЛЬНИК СИМВОЛІВ У ФОРМІ */
/* ===================================== */
.field-information {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 7px;
color: #a9a9a9;
font-size: 13px;
}
/* Звичайний вигляд лічильника */
.character-counter {
min-width: 75px;
color: #bdbdbd;
font-weight: 600;
text-align: right;
transition: color 0.25s ease;
}
/* Залишилося мало символів */
.character-counter.counter-warning {
color: #ffb347;
}
/* Досягнуто максимальної кількості */
.character-counter.counter-limit {
color: #ff5c5c;
}
/* Вигляд на вузькому екрані */
@media (max-width: 500px) {
.field-information {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.character-counter {
text-align: left;
}
}
/* ===================================== */
/* СПРОЩЕНА СИСТЕМА НОВИН */
/* ===================================== */
.simple-news-card img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.simple-news-date {
color: #ff7777;
font-size: 13px;
font-weight: 600;
}
.open-news-button {
padding: 0;
border: 0;
background: transparent;
color: #ff6767;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.open-news-button:hover {
background: transparent;
color: #ffffff;
}
.show-more-wrapper {
display: flex;
justify-content: center;
margin-top: 35px;
}
.show-more-news {
min-width: 190px;
padding: 13px 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: #920000;
color: #ffffff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.show-more-news:hover {
background: #c00000;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(160, 0, 0, 0.3);
}
.show-more-news:active {
transform: translateY(0);
}
.show-more-news[hidden] {
display: none;
}
/* Вікно повної новини */
.news-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.82);
}
.news-modal[hidden] {
display: none;
}
.news-modal-window {
position: relative;
width: min(850px, 100%);
max-height: 90vh;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
background: #151515;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}
.news-modal-image {
display: block;
width: 100%;
max-height: 430px;
object-fit: cover;
}
.news-modal-content {
padding: 28px;
}
.news-modal-content h2 {
margin: 0 0 18px;
color: #ffffff;
font-size: clamp(25px, 4vw, 38px);
}
.news-modal-date {
margin-bottom: 12px;
color: #ff7777;
font-size: 14px;
font-weight: 600;
}
.news-modal-text p {
margin: 0 0 18px;
color: #dddddd;
font-size: 17px;
line-height: 1.7;
}
.news-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.75);
color: #ffffff;
font-size: 25px;
cursor: pointer;
}
.news-modal-close:hover {
background: #a00000;
}
body.modal-open {
overflow: hidden;
}
@media (max-width: 600px) {
.show-more-news {
width: 100%;
}
.news-modal {
padding: 10px;
}
.news-modal-content {
padding: 22px 17px;
}
.news-modal-text p {
font-size: 16px;
}
}
/* ===================================== */
/* ПОШУК НОВИН */
/* ===================================== */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.news-search {
width: min(760px, 100%);
margin: 0 auto 38px;
}
.news-search-control {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 7px 7px 17px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
background: rgba(18, 18, 18, 0.92);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
.news-search-control:focus-within {
border-color: #c00000;
box-shadow:
0 0 0 3px rgba(192, 0, 0, 0.18),
0 12px 30px rgba(0, 0, 0, 0.24);
}
.news-search-control i {
color: #ff6868;
font-size: 17px;
}
.news-search-control input {
flex: 1;
min-width: 0;
padding: 11px 4px;
border: 0;
border-radius: 0;
background: transparent;
color: #ffffff;
outline: none;
}
.news-search-control input::-webkit-search-cancel-button {
display: none;
}
.news-search-clear {
flex-shrink: 0;
padding: 10px 15px;
border-radius: 8px;
background: #780000;
font-size: 14px;
}
.news-search-clear:hover {
background: #b00000;
}
.news-search-clear[hidden] {
display: none;
}
.news-search-status {
min-height: 21px;
margin: 8px 4px 0;
color: #bdbdbd;
font-size: 14px;
}
.news-search-empty {
width: min(700px, 100%);
margin: 0 auto;
padding: 28px 22px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 12px;
background: rgba(20, 20, 20, 0.88);
color: #dddddd;
text-align: center;
}
@media (max-width: 560px) {
.news-search-control {
gap: 8px;
padding-left: 13px;
}
.news-search-clear {
padding: 10px 11px;
font-size: 13px;
}
}
/* ===================================== */
/* КАТЕГОРІЇ НОВИН */
/* ===================================== */
.news-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: -15px auto 35px;
}
.news-filter-button {
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(20, 20, 20, 0.9);
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.news-filter-button:hover {
background: #710000;
border-color: #b00000;
transform: translateY(-2px);
}
.news-filter-button.active {
background: #a00000;
border-color: #d00000;
box-shadow: 0 8px 22px rgba(160, 0, 0, 0.28);
}
.news-category-badge {
display: inline-block;
margin-bottom: 10px;
padding: 5px 10px;
border: 1px solid rgba(255, 100, 100, 0.35);
border-radius: 999px;
background: rgba(150, 0, 0, 0.2);
color: #ff8b8b;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
}
@media (max-width: 520px) {
.news-filters {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.news-filter-button {
width: 100%;
}
}
/* ===================================== */
/* ПРЯМІ ПОСИЛАННЯ НА НОВИНИ */
/* ===================================== */
.news-modal-actions {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.news-modal-action {
min-height: 44px;
padding: 11px 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9px;
background: #850000;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.news-modal-action:hover {
background: #b50000;
transform: translateY(-2px);
}
.news-modal-action[hidden] {
visibility: hidden;
pointer-events: none;
}
.news-modal-navigation:first-child {
justify-self: start;
}
.news-modal-navigation:last-child {
justify-self: end;
}
.news-copy-link {
justify-self: center;
background: #292929;
}
.news-copy-link:hover {
background: #444444;
}
.news-copy-status {
min-height: 21px;
margin: 10px 0 0;
color: #70e58c;
font-size: 14px;
font-weight: 600;
text-align: center;
}
@media (max-width: 650px) {
.news-modal-actions {
display: flex;
flex-direction: column;
align-items: stretch;
}
.news-modal-action {
width: 100%;
}
.news-modal-action[hidden] {
display: none;
}
}
/* ===================================== */
/* ПОШИРЕННЯ НОВИН */
/* ===================================== */
.news-share {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.news-share-title {
margin: 0 0 13px !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700;
}
.news-share-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.news-share-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 15px;
border: 0;
border-radius: 8px;
color: #ffffff;
text-decoration: none;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
transform 0.25s ease,
filter 0.25s ease;
}
.news-share-button:hover {
color: #ffffff;
transform: translateY(-2px);
filter: brightness(1.12);
}
.news-share-button.telegram {
background: #229ed9;
}
.news-share-button.facebook {
background: #1877f2;
}
.news-share-button.whatsapp {
background: #25d366;
}
.news-share-button.native-share {
background: #6b1bb1;
}
.news-share-button[hidden] {
display: none;
}
@media (max-width: 560px) {
.news-share-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
}
.news-share-button {
width: 100%;
}
}
/* ===================================== */
/* РОЗДІЛ МАТЧІВ */
/* ===================================== */
.match-page-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.match-page-links a {
display: inline-block;
padding: 11px 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9px;
background: #750000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.match-page-links a:hover {
background: #aa0000;
transform: translateY(-2px);
}
.match-page-links a.active-page {
background: #d00000;
box-shadow: 0 8px 24px rgba(160, 0, 0, 0.28);
}
.match-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.match-filter-button {
padding: 10px 19px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(20, 20, 20, 0.92);
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.match-filter-button:hover {
background: #710000;
border-color: #ba0000;
transform: translateY(-2px);
}
.match-filter-button.active {
background: #a00000;
border-color: #d00000;
}
.next-match-card {
width: min(850px, 100%);
margin: 0 auto 28px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-left: 6px solid #c00000;
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(125, 0, 0, 0.42),
rgba(18, 18, 18, 0.94)
);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}
.next-match-label {
margin: 0 0 9px;
color: #ff8a8a;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.next-match-card h3 {
margin: 7px 0 10px;
color: #ffffff;
font-size: clamp(22px, 4vw, 32px);
}
.next-match-date,
.next-match-stadium {
margin: 0;
color: #d4d4d4;
}
.match-filter-status {
min-height: 22px;
margin: 0 0 12px;
color: #bdbdbd;
font-size: 14px;
text-align: right;
}
.matches-table-wrap,
.standings-table-wrap {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(15, 15, 15, 0.62);
}
.site-table {
width: 100%;
min-width: 920px;
border-collapse: collapse;
}
.site-table th,
.site-table td {
padding: 14px 12px;
border: 1px solid rgba(255, 255, 255, 0.13);
text-align: center;
}
.site-table th {
position: sticky;
top: 0;
background: #8f0000;
color: #ffffff;
font-size: 14px;
}
.site-table td {
background: rgba(20, 20, 20, 0.94);
color: #ffffff;
}
.site-table tbody tr:hover td {
background: rgba(105, 0, 0, 0.88);
}
.site-table .team-name {
min-width: 210px;
text-align: left;
}
.match-score {
min-width: 82px;
color: #ffffff;
font-size: 18px;
font-weight: 800;
}
.match-status-badge {
display: inline-block;
min-width: 95px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.match-status-badge.completed {
background: rgba(65, 180, 95, 0.18);
color: #7ee397;
}
.match-status-badge.upcoming {
background: rgba(255, 175, 35, 0.18);
color: #ffc368;
}
.match-completed td {
opacity: 0.86;
}
.matches-empty {
margin: 22px 0 0;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: rgba(20, 20, 20, 0.9);
color: #dddddd;
text-align: center;
}
.standings-information {
width: min(950px, 100%);
margin: 0 auto 25px;
padding: 17px 20px;
border-left: 5px solid #c00000;
border-radius: 9px;
background: rgba(145, 0, 0, 0.18);
}
.standings-information p {
margin: 0;
color: #dedede;
line-height: 1.65;
}
.standings-table .galychyna-row td {
background: rgba(145, 0, 0, 0.78);
font-weight: 700;
}
.standings-table .standings-points {
color: #ffffff;
font-size: 18px;
font-weight: 800;
}
.standings-updated {
margin: 15px 0 0;
color: #a9a9a9;
font-size: 13px;
text-align: right;
}
@media (max-width: 650px) {
.match-page-links,
.match-filters {
display: grid;
grid-template-columns: 1fr;
}
.match-page-links a,
.match-filter-button {
width: 100%;
text-align: center;
}
.next-match-card {
padding: 21px 17px;
}
.match-filter-status,
.standings-updated {
text-align: left;
}
}
/* ===================================== */
/* РОЗДІЛ КОМАНДИ */
/* ===================================== */
.team-page-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.team-page-links a {
display: inline-block;
padding: 11px 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9px;
background: #750000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.team-page-links a:hover {
background: #aa0000;
transform: translateY(-2px);
}
.team-page-links a.active-page {
background: #d00000;
box-shadow: 0 8px 24px rgba(160, 0, 0, 0.28);
}
.player-search {
width: min(760px, 100%);
margin: 0 auto 23px;
}
.player-search-control {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 7px 7px 17px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
background: rgba(18, 18, 18, 0.92);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
.player-search-control:focus-within {
border-color: #c00000;
box-shadow:
0 0 0 3px rgba(192, 0, 0, 0.18),
0 12px 30px rgba(0, 0, 0, 0.24);
}
.player-search-control i {
color: #ff6868;
font-size: 17px;
}
.player-search-control input {
flex: 1;
min-width: 0;
padding: 11px 4px;
border: 0;
background: transparent;
color: #ffffff;
outline: none;
}
.player-search-control input::-webkit-search-cancel-button {
display: none;
}
.player-search-clear {
flex-shrink: 0;
padding: 10px 15px;
border-radius: 8px;
background: #780000;
font-size: 14px;
}
.player-search-clear:hover {
background: #b00000;
}
.player-search-clear[hidden] {
display: none;
}
.player-search-status {
min-height: 21px;
margin: 8px 4px 0;
color: #bdbdbd;
font-size: 14px;
}
.player-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 auto 35px;
}
.player-filter-button {
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(20, 20, 20, 0.9);
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.player-filter-button:hover {
background: #710000;
border-color: #b00000;
transform: translateY(-2px);
}
.player-filter-button.active {
background: #a00000;
border-color: #d00000;
box-shadow: 0 8px 22px rgba(160, 0, 0, 0.28);
}
.dynamic-players-grid {
margin-top: 0;
}
.dynamic-player-card {
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.dynamic-player-card:hover,
.dynamic-player-card:focus-visible {
transform: translateY(-7px);
border-color: rgba(215, 0, 0, 0.65);
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
}
.dynamic-player-card:focus-visible {
outline: 3px solid rgba(220, 0, 0, 0.35);
outline-offset: 3px;
}
.player-card-details {
color: #cfcfcf;
}
.player-open-label {
display: inline-block;
margin-top: 12px;
color: #ff7c7c;
font-size: 14px;
font-weight: 700;
}
.players-loading,
.players-empty {
grid-column: 1 / -1;
margin: 0;
padding: 28px 22px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 12px;
background: rgba(20, 20, 20, 0.88);
color: #dddddd;
text-align: center;
}
.players-empty {
width: min(700px, 100%);
margin: 0 auto;
}
.players-empty[hidden] {
display: none;
}
.player-modal {
position: fixed;
z-index: 5000;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
background: rgba(0, 0, 0, 0.84);
backdrop-filter: blur(7px);
}
.player-modal[hidden] {
display: none;
}
.player-modal-window {
position: relative;
width: min(900px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 16px;
background: #141414;
box-shadow: 0 25px 75px rgba(0, 0, 0, 0.62);
}
.player-modal-close {
position: absolute;
z-index: 2;
top: 13px;
right: 13px;
width: 43px;
height: 43px;
border-radius: 50%;
background: #8f0000;
color: #ffffff;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.player-modal-close:hover {
background: #c00000;
}
.player-modal-layout {
display: grid;
grid-template-columns: minmax(240px, 340px) 1fr;
gap: 30px;
align-items: center;
}
.player-modal-photo-wrap {
position: relative;
}
.player-modal-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 13px;
background: #252525;
}
.player-modal-number {
position: absolute;
right: 13px;
bottom: 13px;
display: grid;
place-items: center;
min-width: 58px;
height: 58px;
padding: 0 10px;
border: 3px solid rgba(255, 255, 255, 0.82);
border-radius: 50%;
background: #a00000;
color: #ffffff;
font-size: 23px;
font-weight: 800;
}
.player-modal-position {
margin: 0 0 8px;
color: #ff7777;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.55px;
text-transform: uppercase;
}
.player-modal-content h2 {
margin: 0 0 22px;
color: #ffffff;
font-size: clamp(27px, 5vw, 42px);
line-height: 1.12;
}
.player-modal-details {
display: grid;
gap: 10px;
margin: 0 0 22px;
}
.player-detail-row {
display: grid;
grid-template-columns: minmax(125px, 0.8fr) 1fr;
gap: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.player-detail-row[hidden] {
display: none;
}
.player-detail-row dt {
color: #a9a9a9;
}
.player-detail-row dd {
margin: 0;
color: #ffffff;
font-weight: 700;
}
.player-modal-bio {
margin: 0;
color: #d4d4d4;
line-height: 1.72;
}
@media (max-width: 720px) {
.team-page-links,
.player-filters {
display: grid;
grid-template-columns: 1fr;
}
.team-page-links a,
.player-filter-button {
width: 100%;
text-align: center;
}
.player-modal {
align-items: flex-start;
padding: 12px;
}
.player-modal-window {
padding: 58px 18px 22px;
}
.player-modal-layout {
grid-template-columns: 1fr;
}
.player-modal-photo-wrap {
width: min(330px, 100%);
margin: 0 auto;
}
}
@media (max-width: 500px) {
.player-search-control {
gap: 8px;
padding-left: 13px;
}
.player-search-clear {
padding: 10px 11px;
font-size: 13px;
}
.player-detail-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* ===================================== */
/* РОЗДІЛ КЛУБУ */
/* ===================================== */
.club-page-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 auto 34px;
}
.club-page-menu a {
display: inline-block;
padding: 11px 18px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9px;
background: #750000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.club-page-menu a:hover {
background: #aa0000;
transform: translateY(-2px);
}
.club-page-menu a.active {
background: #d00000;
box-shadow: 0 8px 24px rgba(160, 0, 0, 0.28);
}
.club-history-intro {
display: grid;
grid-template-columns: 1fr minmax(210px, 310px);
gap: 35px;
align-items: center;
margin-bottom: 34px;
padding: 32px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 16px;
background:
linear-gradient(
135deg,
rgba(120, 0, 0, 0.42),
rgba(18, 18, 18, 0.96)
);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}
.club-founded-badge {
display: inline-block;
margin-bottom: 14px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(210, 0, 0, 0.22);
color: #ff8a8a;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.club-history-text h3 {
margin: 0 0 14px;
color: #ffffff;
font-size: clamp(29px, 5vw, 45px);
line-height: 1.1;
}
.club-history-text p {
margin: 0;
color: #d6d6d6;
line-height: 1.75;
}
.club-history-logo {
display: flex;
justify-content: center;
}
.club-history-logo img {
width: min(255px, 100%);
height: auto;
filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
}
.club-facts-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-bottom: 28px;
}
.club-fact-card {
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 13px;
background: rgba(20, 20, 20, 0.92);
}
.club-fact-card i {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 12px;
background: rgba(160, 0, 0, 0.26);
color: #ff7575;
font-size: 21px;
}
.club-fact-card h3 {
margin: 0 0 10px;
color: #ffffff;
}
.club-fact-card p {
margin: 0;
color: #d0d0d0;
line-height: 1.68;
}
.club-stadium-card {
position: relative;
margin: 0 0 42px;
overflow: hidden;
border-radius: 15px;
background: #171717;
}
.club-stadium-card img {
display: block;
width: 100%;
height: clamp(260px, 48vw, 530px);
object-fit: cover;
}
.club-stadium-card figcaption {
position: absolute;
right: 15px;
bottom: 15px;
padding: 8px 13px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.72);
color: #ffffff;
font-weight: 600;
}
.club-timeline {
position: relative;
width: min(850px, 100%);
margin: 0 auto;
}
.club-timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 13px;
width: 3px;
background:
linear-gradient(
#cf0000,
rgba(207, 0, 0, 0.15)
);
}
.club-timeline-item {
position: relative;
display: grid;
grid-template-columns: 28px 1fr;
gap: 20px;
padding-bottom: 28px;
}
.club-timeline-marker {
position: relative;
z-index: 1;
width: 28px;
height: 28px;
border: 6px solid #2a0000;
border-radius: 50%;
background: #d00000;
}
.club-timeline-content {
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: rgba(20, 20, 20, 0.92);
}
.club-timeline-content h3 {
margin: 0 0 7px;
color: #ff7979;
}
.club-timeline-content p {
margin: 0;
color: #d1d1d1;
}
.financial-report-intro {
display: flex;
gap: 22px;
align-items: flex-start;
margin-bottom: 28px;
padding: 25px;
border-left: 6px solid #c00000;
border-radius: 13px;
background: rgba(125, 0, 0, 0.19);
}
.financial-report-intro > i {
color: #ff7474;
font-size: 35px;
}
.financial-report-intro h3 {
margin: 0 0 8px;
color: #ffffff;
}
.financial-report-intro p {
margin: 0;
color: #d2d2d2;
line-height: 1.65;
}
.report-controls {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.report-controls label {
color: #d8d8d8;
font-weight: 600;
}
.report-controls select {
min-width: 170px;
padding: 10px 13px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
background: #181818;
color: #ffffff;
}
.financial-reports-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.financial-report-card {
position: relative;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 13px;
background: rgba(20, 20, 20, 0.94);
}
.financial-report-card > i {
margin-bottom: 16px;
color: #ff6969;
font-size: 38px;
}
.financial-report-year {
position: absolute;
top: 18px;
right: 18px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(160, 0, 0, 0.26);
color: #ff8b8b;
font-size: 12px;
font-weight: 700;
}
.financial-report-card h3 {
margin: 0 0 10px;
color: #ffffff;
}
.financial-report-card p {
color: #cccccc;
line-height: 1.62;
}
.financial-report-link {
display: inline-block;
margin-top: 8px;
padding: 10px 15px;
border-radius: 8px;
background: #8f0000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
}
.financial-report-link:hover {
background: #c00000;
color: #ffffff;
}
.reports-loading,
.management-loading {
grid-column: 1 / -1;
padding: 25px;
color: #cfcfcf;
text-align: center;
}
.reports-empty {
padding: 38px 24px;
border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 14px;
background: rgba(20, 20, 20, 0.76);
text-align: center;
}
.reports-empty[hidden] {
display: none;
}
.reports-empty i {
margin-bottom: 13px;
color: #ff7474;
font-size: 38px;
}
.reports-empty h3 {
margin: 0 0 9px;
color: #ffffff;
}
.reports-empty p {
margin: 0;
color: #c9c9c9;
}
.management-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.management-card {
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(20, 20, 20, 0.94);
text-align: center;
transition:
transform 0.25s ease,
border-color 0.25s ease;
}
.management-card:hover {
transform: translateY(-6px);
border-color: rgba(210, 0, 0, 0.55);
}
.management-avatar {
display: grid;
place-items: center;
width: 105px;
height: 105px;
margin: 0 auto 18px;
border: 4px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
background:
linear-gradient(
135deg,
#8f0000,
#2b0000
);
color: #ffffff;
font-size: 42px;
}
.management-avatar img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.management-role {
margin: 0 0 8px;
color: #ff7777;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.management-card h3 {
margin: 0 0 12px;
color: #ffffff;
}
.management-description {
margin: 0;
color: #c9c9c9;
font-size: 14px;
line-height: 1.6;
}
.club-emblem-section {
display: grid;
grid-template-columns: minmax(220px, 340px) 1fr;
gap: 38px;
align-items: center;
margin-bottom: 45px;
padding: 32px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 16px;
background:
linear-gradient(
135deg,
rgba(120, 0, 0, 0.42),
rgba(18, 18, 18, 0.96)
);
}
.club-emblem-image {
display: flex;
justify-content: center;
}
.club-emblem-image img {
width: min(270px, 100%);
height: auto;
}
.club-emblem-text h3 {
margin: 0 0 14px;
color: #ffffff;
font-size: clamp(28px, 5vw, 42px);
}
.club-emblem-text p {
margin: 0;
color: #d3d3d3;
line-height: 1.72;
}
.club-colors-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.club-color-card {
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 13px;
background: rgba(20, 20, 20, 0.94);
text-align: center;
}
.club-color-swatch {
height: 125px;
margin-bottom: 17px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
}
.club-color-card h3 {
margin: 0 0 8px;
color: #ffffff;
}
.club-color-card code {
display: block;
margin-bottom: 14px;
color: #ff8a8a;
font-size: 16px;
}
.copy-color-button {
padding: 9px 14px;
border-radius: 8px;
background: #850000;
color: #ffffff;
font-weight: 600;
}
.copy-color-button:hover {
background: #b00000;
}
.color-copy-status {
min-height: 22px;
margin: 14px 0 0;
color: #73e48e;
font-weight: 600;
text-align: center;
}
.symbols-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 30px;
padding: 17px 19px;
border-left: 5px solid #c00000;
border-radius: 9px;
background: rgba(145, 0, 0, 0.18);
}
.symbols-note i {
margin-top: 3px;
color: #ff7474;
}
.symbols-note p {
margin: 0;
color: #d3d3d3;
line-height: 1.6;
}
@media (max-width: 950px) {
.financial-reports-grid,
.management-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.club-page-menu {
display: grid;
grid-template-columns: 1fr;
}
.club-page-menu a {
width: 100%;
text-align: center;
}
.club-history-intro,
.club-emblem-section {
grid-template-columns: 1fr;
}
.club-history-logo {
order: -1;
}
.club-facts-grid,
.club-colors-grid {
grid-template-columns: 1fr;
}
.report-controls {
justify-content: stretch;
align-items: stretch;
flex-direction: column;
}
.report-controls select {
width: 100%;
}
}
@media (max-width: 570px) {
.financial-reports-grid,
.management-grid {
grid-template-columns: 1fr;
}
.club-history-intro,
.club-emblem-section {
padding: 22px 18px;
}
.financial-report-intro {
flex-direction: column;
}
}
/* ===================================== */
/* РОЗДІЛ МЕДІА */
/* ===================================== */
.media-page-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.media-page-links a {
display: inline-block;
padding: 11px 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9px;
background: #750000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.media-page-links a:hover {
background: #aa0000;
transform: translateY(-2px);
}
.media-page-links a.active-page {
background: #d00000;
box-shadow: 0 8px 24px rgba(160, 0, 0, 0.28);
}
.photo-filters,
.video-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}
.photo-filter-button,
.video-filter-button {
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(20, 20, 20, 0.9);
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.photo-filter-button:hover,
.video-filter-button:hover {
background: #710000;
border-color: #b00000;
transform: translateY(-2px);
}
.photo-filter-button.active,
.video-filter-button.active {
background: #a00000;
border-color: #d00000;
box-shadow: 0 8px 22px rgba(160, 0, 0, 0.28);
}
.media-filter-status {
min-height: 22px;
margin: 0 0 14px;
color: #bdbdbd;
font-size: 14px;
text-align: right;
}
.modern-photo-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.modern-photo-card {
position: relative;
min-height: 270px;
margin: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: #171717;
cursor: pointer;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.modern-photo-card:hover,
.modern-photo-card:focus-visible {
transform: translateY(-6px);
border-color: rgba(210, 0, 0, 0.58);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.modern-photo-card:focus-visible {
outline: 3px solid rgba(210, 0, 0, 0.3);
outline-offset: 3px;
}
.modern-photo-card img {
display: block;
width: 100%;
height: 100%;
min-height: 270px;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.45s ease;
}
.modern-photo-card:hover img {
transform: scale(1.055);
}
.modern-photo-caption {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
background:
linear-gradient(
transparent 25%,
rgba(0, 0, 0, 0.88)
);
}
.media-category-badge {
display: inline-block;
margin-bottom: 9px;
padding: 5px 9px;
border: 1px solid rgba(255, 120, 120, 0.3);
border-radius: 999px;
background: rgba(160, 0, 0, 0.34);
color: #ff9696;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.modern-photo-caption h3 {
margin: 0;
color: #ffffff;
font-size: 20px;
}
.media-card-date {
margin: 7px 0 0;
color: #d0d0d0;
font-size: 13px;
}
.media-card-date[hidden] {
display: none;
}
.photo-open-icon {
position: absolute;
top: 15px;
right: 15px;
display: grid;
place-items: center;
width: 39px;
height: 39px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.62);
color: #ffffff;
}
.media-loading,
.media-empty {
grid-column: 1 / -1;
padding: 30px 22px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 13px;
background: rgba(20, 20, 20, 0.88);
color: #d5d5d5;
text-align: center;
}
.media-empty[hidden] {
display: none;
}
.media-lightbox {
position: fixed;
z-index: 6000;
inset: 0;
display: grid;
place-items: center;
padding: 55px 90px;
background: rgba(0, 0, 0, 0.93);
backdrop-filter: blur(8px);
}
.media-lightbox[hidden] {
display: none;
}
.media-lightbox-content {
width: min(1150px, 100%);
max-height: calc(100vh - 110px);
overflow-y: auto;
text-align: center;
}
.media-lightbox-content img {
display: block;
width: auto;
max-width: 100%;
max-height: calc(100vh - 230px);
margin: 0 auto;
border-radius: 10px;
object-fit: contain;
}
.media-lightbox-caption {
margin-top: 15px;
}
.media-lightbox-caption h3 {
margin: 0;
color: #ffffff;
font-size: clamp(20px, 4vw, 29px);
}
.media-lightbox-caption p {
margin: 7px 0 0;
color: #cccccc;
}
.media-lightbox-counter {
color: #ff8989 !important;
font-weight: 700;
}
.media-lightbox-close {
position: fixed;
z-index: 2;
top: 18px;
right: 20px;
width: 46px;
height: 46px;
border-radius: 50%;
background: #8f0000;
color: #ffffff;
font-size: 29px;
line-height: 1;
cursor: pointer;
}
.media-lightbox-close:hover {
background: #c00000;
}
.media-lightbox-arrow {
position: fixed;
z-index: 2;
top: 50%;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(125, 0, 0, 0.86);
color: #ffffff;
cursor: pointer;
transform: translateY(-50%);
}
.media-lightbox-arrow:hover {
background: #c00000;
}
.media-lightbox-arrow[hidden] {
display: none;
}
.media-lightbox-prev {
left: 20px;
}
.media-lightbox-next {
right: 20px;
}
.video-source-notice {
display: flex;
gap: 20px;
align-items: flex-start;
margin-bottom: 27px;
padding: 23px;
border-left: 6px solid #c00000;
border-radius: 13px;
background: rgba(125, 0, 0, 0.19);
}
.video-source-notice > i {
color: #ff4d4d;
font-size: 38px;
}
.video-source-notice h3 {
margin: 0 0 8px;
color: #ffffff;
}
.video-source-notice p {
margin: 0;
color: #d2d2d2;
line-height: 1.65;
}
.modern-video-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.modern-video-card {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(20, 20, 20, 0.94);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}
.video-frame-wrap {
position: relative;
aspect-ratio: 16 / 9;
background: #090909;
}
.video-frame-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.modern-video-info {
padding: 21px;
}
.modern-video-info h3 {
margin: 0 0 10px;
color: #ffffff;
}
.modern-video-info > p:not(.media-card-date) {
margin: 0;
color: #cccccc;
line-height: 1.62;
}
.video-empty i {
margin-bottom: 12px;
color: #ff6868;
font-size: 38px;
}
.video-empty h3 {
margin: 0 0 9px;
color: #ffffff;
}
.video-empty p {
margin: 0;
}
@media (max-width: 850px) {
.modern-photo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.media-page-links,
.photo-filters,
.video-filters {
display: grid;
grid-template-columns: 1fr;
}
.media-page-links a,
.photo-filter-button,
.video-filter-button {
width: 100%;
text-align: center;
}
.modern-video-grid {
grid-template-columns: 1fr;
}
.media-filter-status {
text-align: left;
}
.media-lightbox {
padding: 65px 12px 95px;
}
.media-lightbox-arrow {
top: auto;
bottom: 21px;
transform: none;
}
.media-lightbox-prev {
left: calc(50% - 72px);
}
.media-lightbox-next {
right: calc(50% - 72px);
}
}
@media (max-width: 540px) {
.modern-photo-grid {
grid-template-columns: 1fr;
}
.video-source-notice {
flex-direction: column;
}
}
/* ===================================== */
/* КОНТАКТИ ТА ПІДТРИМКА */
/* ===================================== */
.contact-page-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 34px;
}
.contact-page-links a {
display: inline-block;
padding: 11px 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9px;
background: #750000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.contact-page-links a:hover {
background: #aa0000;
transform: translateY(-2px);
}
.contact-page-links a.active-page {
background: #d00000;
box-shadow: 0 8px 24px rgba(160, 0, 0, 0.28);
}
.contact-layout {
display: grid;
grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
gap: 25px;
align-items: start;
}
.contact-information-panel,
.contact-form-panel {
padding: 27px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 15px;
background: rgba(20, 20, 20, 0.94);
box-shadow: 0 17px 38px rgba(0, 0, 0, 0.25);
}
.contact-panel-heading {
margin-bottom: 23px;
}
.contact-panel-heading h2 {
margin: 0 0 8px;
color: #ffffff;
}
.contact-panel-heading p {
margin: 0;
color: #c9c9c9;
line-height: 1.6;
}
.contact-detail-card {
display: grid;
grid-template-columns: 48px 1fr;
gap: 15px;
align-items: start;
padding: 17px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-detail-card:last-child {
border-bottom: 0;
}
.contact-detail-card > i {
display: grid;
place-items: center;
width: 45px;
height: 45px;
border-radius: 11px;
background: rgba(150, 0, 0, 0.28);
color: #ff7777;
font-size: 18px;
}
.contact-detail-card h3 {
margin: 0 0 5px;
color: #ffffff;
font-size: 16px;
}
.contact-detail-card p {
margin: 0;
color: #cccccc;
overflow-wrap: anywhere;
}
.contact-detail-link {
display: inline-block;
margin-top: 9px;
color: #ff7e7e;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.contact-detail-link:hover {
color: #ffffff;
}
.modern-contact-form {
display: grid;
gap: 18px;
}
.form-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.modern-contact-form .form-group {
margin: 0;
}
.modern-contact-form label {
display: block;
margin-bottom: 7px;
color: #e5e5e5;
font-size: 14px;
font-weight: 600;
}
.modern-contact-form input,
.modern-contact-form textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, 0.17);
border-radius: 9px;
background: #111111;
color: #ffffff;
font-family: inherit;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.modern-contact-form textarea {
min-height: 165px;
resize: vertical;
}
.modern-contact-form input:focus,
.modern-contact-form textarea:focus {
border-color: #c00000;
box-shadow: 0 0 0 3px rgba(190, 0, 0, 0.17);
}
.modern-contact-form input.input-error,
.modern-contact-form textarea.input-error {
border-color: #ff4d4d;
box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.12);
}
.form-error {
display: block;
min-height: 19px;
margin-top: 5px;
color: #ff7979;
font-size: 13px;
}
.field-information {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 6px;
color: #aaaaaa;
font-size: 12px;
}
.character-counter.counter-warning {
color: #ffc460;
}
.character-counter.counter-limit {
color: #ff6969;
font-weight: 700;
}
.contact-submit {
min-height: 48px;
border: 0;
border-radius: 9px;
background: #940000;
color: #ffffff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.contact-submit:hover {
background: #c00000;
transform: translateY(-2px);
}
.contact-submit:disabled {
opacity: 0.65;
cursor: wait;
transform: none;
}
.contact-form-note {
margin: -4px 0 0;
color: #999999;
font-size: 12px;
line-height: 1.55;
}
.form-status {
min-height: 23px;
margin: 0;
font-weight: 600;
}
.form-status.success {
color: #77df91;
}
.form-status.error {
color: #ff7777;
}
.contact-map-section {
margin-top: 45px;
}
.contact-map-frame {
display: block;
width: 100%;
height: 430px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 15px;
background: #151515;
}
.support-demo-warning {
display: flex;
gap: 18px;
align-items: flex-start;
max-width: 980px;
margin: 0 auto 28px;
padding: 20px 22px;
border: 1px solid rgba(255, 190, 45, 0.48);
border-left: 6px solid #ffb32f;
border-radius: 12px;
background: rgba(255, 176, 30, 0.11);
}
.support-demo-warning > i {
margin-top: 3px;
color: #ffc04c;
font-size: 27px;
}
.support-demo-warning h3 {
margin: 0 0 7px;
color: #ffffff;
}
.support-demo-warning p {
margin: 0;
color: #e2d4b7;
line-height: 1.65;
}
.support-intro-modern {
max-width: 900px;
margin: 0 auto 30px;
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(130, 0, 0, 0.42),
rgba(20, 20, 20, 0.95)
);
text-align: center;
}
.support-intro-modern h2 {
margin: 0 0 10px;
color: #ffffff;
}
.support-intro-modern p {
margin: 0;
color: #d5d5d5;
line-height: 1.68;
}
.payment-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
margin-bottom: 18px;
}
.payment-card,
.support-option {
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
background: rgba(20, 20, 20, 0.94);
}
.payment-card h3,
.support-option h3 {
margin: 0 0 18px;
color: #ffffff;
}
.payment-row {
margin-bottom: 17px;
padding-bottom: 17px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.payment-row:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.payment-label {
display: block;
margin-bottom: 6px;
color: #aaaaaa;
font-size: 13px;
}
.payment-value {
display: block;
color: #ffffff;
font-size: 17px;
font-weight: 700;
overflow-wrap: anywhere;
}
.card-number {
font-size: clamp(20px, 3vw, 29px);
letter-spacing: 1.7px;
}
.copy-support-button,
.support-link {
display: inline-block;
margin-top: 12px;
padding: 10px 15px;
border: 0;
border-radius: 8px;
background: #850000;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.copy-support-button:hover,
.support-link:hover {
background: #b80000;
color: #ffffff;
}
.copy-status {
min-height: 24px;
margin: 0 0 20px;
color: #7be093;
font-weight: 600;
text-align: center;
}
.support-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 26px;
}
.support-option > i {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 17px;
border-radius: 12px;
background: rgba(150, 0, 0, 0.28);
color: #ff7676;
font-size: 21px;
}
.support-option p,
.needs-list {
color: #cccccc;
line-height: 1.65;
}
.needs-list {
margin: 0;
padding-left: 20px;
}
.needs-list li {
margin-bottom: 7px;
}
.support-security-note {
display: flex;
align-items: flex-start;
gap: 13px;
margin-top: 27px;
padding: 18px 20px;
border-left: 5px solid #c00000;
border-radius: 9px;
background: rgba(145, 0, 0, 0.17);
}
.support-security-note i {
margin-top: 3px;
color: #ff7777;
}
.support-security-note p {
margin: 0;
color: #d5d5d5;
line-height: 1.6;
}
.thanks-box {
margin-top: 30px;
padding: 31px;
border-radius: 15px;
background:
linear-gradient(
135deg,
rgba(110, 0, 0, 0.94),
rgba(24, 24, 24, 0.96)
);
text-align: center;
}
.thanks-box h2 {
margin: 0 0 9px;
color: #ffffff;
}
.thanks-box p {
margin: 0 0 10px;
color: #d5d5d5;
}
.thanks-box strong {
color: #ff8a8a;
}
@media (max-width: 900px) {
.contact-layout {
grid-template-columns: 1fr;
}
.payment-grid,
.support-options {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.contact-page-links {
display: grid;
grid-template-columns: 1fr;
}
.contact-page-links a {
width: 100%;
text-align: center;
}
.contact-information-panel,
.contact-form-panel {
padding: 22px 17px;
}
.contact-map-frame {
height: 330px;
}
.support-demo-warning {
flex-direction: column;
}
.field-information {
align-items: flex-start;
flex-direction: column;
}
}
/* ===================================== */
/* ГОЛОВНА СТОРІНКА РОЗДІЛУ «КЛУБ» */
/* ===================================== */
.club-navigation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 30px;
}
.club-navigation-card {
display: flex;
flex-direction: column;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 13px;
background: rgba(20, 20, 20, 0.94);
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.club-navigation-card:hover {
transform: translateY(-5px);
border-color: rgba(205, 0, 0, 0.55);
box-shadow: 0 17px 38px rgba(0, 0, 0, 0.28);
}
.club-navigation-card h3 {
margin: 0 0 10px;
color: #ffffff;
}
.club-navigation-card p {
flex: 1;
margin: 0;
color: #cccccc;
line-height: 1.65;
}
.club-navigation-card a {
display: inline-block;
align-self: flex-start;
margin-top: 18px;
padding: 10px 17px;
border-radius: 8px;
background: #8f0000;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.club-navigation-card a:hover {
background: #c00000;
color: #ffffff;
transform: translateY(-2px);
}
@media (max-width: 700px) {
.club-navigation {
grid-template-columns: 1fr;
}
}
/* Статуси матчів із адмінпанелі */
.match-status-badge.postponed {
background: rgba(255, 181, 52, 0.18);
color: #ffd477;
}
.match-status-badge.cancelled {
background: rgba(205, 55, 55, 0.2);
color: #ff8f8f;
}
.next-match-competition {
margin: 0 0 7px;
color: #ff8989;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.standings-empty-cell {
padding: 30px 18px !important;
color: #bdbdbd;
text-align: center !important;
}
/* ====================================================== */
/* ПРОФЕСІЙНА ГОЛОВНА СТОРІНКА 2026 */
/* ====================================================== */
.home-pro-page {
--pro-bg: #080808;
--pro-panel: #111111;
--pro-panel-2: #171717;
--pro-border: rgba(255,255,255,.11);
--pro-red: #b0000a;
--pro-red-bright: #e11a25;
--pro-muted: #a4a4a7;
background: var(--pro-bg);
color: #fff;
font-family: "Manrope", Arial, sans-serif;
}
.home-pro-page h1,
.home-pro-page h2,
.home-pro-page h3,
.home-pro-page .pro-kicker,
.home-pro-page .pro-section-kicker {
font-family: "Oswald", "Manrope", sans-serif;
}
.home-pro-page .container {
width: min(1420px, 92%);
}
.home-pro-page .pro-site-header {
border-bottom: 1px solid rgba(255,255,255,.09);
background: rgba(7,7,7,.89);
box-shadow: 0 12px 38px rgba(0,0,0,.34);
backdrop-filter: blur(18px);
}
.home-pro-page .header-inner {
min-height: 88px;
width: min(1500px, 95%);
}
.home-pro-page .brand-logo-link {
display: block;
}
.home-pro-page .club-logo {
width: 62px;
height: 62px;
}
.home-pro-page .brand-text h1 {
font-family: "Oswald", sans-serif;
font-size: 20px;
letter-spacing: .01em;
text-transform: uppercase;
}
.home-pro-page .brand-text p {
color: #8f8f93;
letter-spacing: .035em;
}
.home-pro-page .main-nav {
flex-wrap: nowrap;
gap: 2px;
}
.home-pro-page .main-nav > a,
.home-pro-page .main-nav .dropbtn {
display: flex;
gap: 7px;
align-items: center;
min-height: 42px;
padding: 10px 13px;
border-radius: 8px;
font-size: 13px;
letter-spacing: .01em;
}
.home-pro-page .main-nav .dropbtn i {
font-size: 9px;
opacity: .65;
}
.home-pro-page .main-nav a:hover,
.home-pro-page .main-nav a.active {
background: rgba(176,0,10,.86);
transform: none;
}
.home-pro-page .dropdown-content {
min-width: 215px;
padding: 8px;
border: 1px solid var(--pro-border);
border-radius: 12px;
background: rgba(17,17,17,.98);
box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.home-pro-page .dropdown-content a {
padding: 11px 12px;
border-radius: 8px;
}
.home-pro-page .header-actions {
flex-direction: row;
align-items: center;
gap: 10px;
}
.home-pro-page .languages a {
padding: 7px 9px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 7px;
background: transparent;
font-size: 11px;
}
.home-pro-page .languages a.active,
.home-pro-page .languages a:hover {
border-color: rgba(225,26,37,.75);
background: rgba(176,0,10,.32);
}
.header-support-button {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 40px;
padding: 9px 13px;
border-radius: 8px;
background: #fff;
color: #080808;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.header-support-button:hover {
background: #e9e9e9;
}
.pro-hero {
position: relative;
display: grid;
min-height: calc(100vh - 88px);
overflow: hidden;
isolation: isolate;
background:
linear-gradient(90deg, rgba(7,7,7,.97) 0%, rgba(7,7,7,.88) 43%, rgba(7,7,7,.42) 100%),
linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.85)),
url("../images/stadium.jpg") center / cover no-repeat;
}
.pro-hero::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(circle at 17% 52%, rgba(180,0,10,.35), transparent 34%),
linear-gradient(105deg, transparent 52%, rgba(176,0,10,.12) 52%, transparent 69%);
}
.pro-hero-pattern {
position: absolute;
z-index: -1;
inset: 0;
opacity: .16;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 70px 70px;
mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.pro-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .72fr);
gap: clamp(38px, 6vw, 100px);
align-items: center;
padding-block: 75px 110px;
}
.pro-kicker,
.pro-section-kicker {
margin: 0 0 14px;
color: #f25c64;
font-size: 12px;
font-weight: 700;
letter-spacing: .17em;
text-transform: uppercase;
}
.pro-kicker {
display: flex;
align-items: center;
gap: 10px;
}
.pro-kicker span {
width: 34px;
height: 2px;
background: var(--pro-red-bright);
}
.pro-hero-copy h2 {
max-width: 850px;
margin: 0;
font-size: clamp(66px, 10vw, 146px);
line-height: .83;
letter-spacing: -.035em;
text-transform: uppercase;
text-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.pro-hero-copy h2 strong {
display: block;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255,255,255,.72);
font-weight: 700;
}
.pro-hero-lead {
max-width: 710px;
margin: 28px 0 0;
color: #d0d0d2;
font-size: clamp(17px, 2vw, 22px);
line-height: 1.65;
}
.pro-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.pro-button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 9px;
min-height: 50px;
padding: 13px 21px;
border: 1px solid transparent;
border-radius: 9px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.pro-button:hover {
transform: translateY(-2px);
}
.pro-button.primary {
background: var(--pro-red);
color: #fff;
box-shadow: 0 14px 34px rgba(176,0,10,.27);
}
.pro-button.primary:hover {
background: #d0000c;
}
.pro-button.ghost {
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.055);
color: #fff;
backdrop-filter: blur(10px);
}
.pro-button.ghost:hover {
border-color: rgba(255,255,255,.36);
background: rgba(255,255,255,.1);
}
.pro-button.light {
flex: 0 0 auto;
background: #fff;
color: #111;
}
.pro-hero-facts {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 46px;
}
.pro-hero-facts > div {
min-width: 145px;
padding: 0 26px;
border-left: 1px solid rgba(255,255,255,.16);
}
.pro-hero-facts > div:first-child {
padding-left: 0;
border-left: 0;
}
.pro-hero-facts strong,
.pro-hero-facts span {
display: block;
}
.pro-hero-facts strong {
font-family: "Oswald", sans-serif;
font-size: 25px;
text-transform: uppercase;
}
.pro-hero-facts span {
margin-top: 4px;
color: #9b9b9e;
font-size: 11px;
letter-spacing: .05em;
}
.pro-next-match {
overflow: hidden;
border: 1px solid rgba(255,255,255,.13);
border-radius: 18px;
background: rgba(10,10,10,.76);
box-shadow: 0 32px 80px rgba(0,0,0,.48);
backdrop-filter: blur(18px);
}
.pro-card-top,
.pro-match-foot {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 17px 20px;
}
.pro-card-top {
border-bottom: 1px solid rgba(255,255,255,.09);
}
.pro-card-top span,
.pro-card-top a {
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-decoration: none;
text-transform: uppercase;
}
.pro-card-top span i {
margin-right: 7px;
color: #f34b54;
}
.pro-card-top a {
color: #aaa;
}
.pro-card-top a:hover {
color: #fff;
}
.pro-next-match-content {
min-height: 260px;
padding: 38px 27px;
text-align: center;
}
.pro-next-match-content .next-match-competition {
margin: 0 0 18px;
color: #f05a62;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.pro-next-match-content .next-match-date,
.pro-next-match-content .next-match-stadium {
margin: 10px 0;
color: #a6a6a9;
font-size: 13px;
}
.pro-next-match-content h3 {
margin: 24px 0;
font-size: clamp(27px, 3vw, 43px);
line-height: 1.18;
text-transform: uppercase;
}
.pro-match-foot {
justify-content: center;
border-top: 1px solid rgba(255,255,255,.09);
color: #8d8d91;
font-size: 11px;
}
.pro-match-foot i {
margin-right: 7px;
color: #e94f57;
}
.pro-scroll-cue {
position: absolute;
bottom: 26px;
left: 50%;
display: flex;
flex-direction: column;
gap: 7px;
align-items: center;
color: #aaa;
font-size: 10px;
letter-spacing: .14em;
text-decoration: none;
text-transform: uppercase;
transform: translateX(-50%);
}
.pro-scroll-cue i {
color: #fff;
animation: pro-bounce 1.8s infinite;
}
@keyframes pro-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
.home-pro-section {
padding: clamp(78px, 9vw, 125px) 0;
}
.pro-news-section {
background: #0b0b0b;
}
.pro-section-heading,
.pro-panel-heading {
display: flex;
justify-content: space-between;
gap: 30px;
align-items: flex-end;
margin-bottom: 34px;
}
.pro-section-heading h2,
.pro-panel-heading h2,
.pro-team-feature h2,
.pro-support-inner h2 {
margin: 0;
font-size: clamp(34px, 5vw, 62px);
line-height: 1.03;
text-transform: uppercase;
}
.pro-section-heading > div > p:last-child {
max-width: 660px;
margin: 15px 0 0;
color: var(--pro-muted);
line-height: 1.65;
}
.pro-text-link,
.pro-panel-heading > a {
display: inline-flex;
gap: 8px;
align-items: center;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255,255,255,.25);
color: #fff;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.pro-text-link:hover,
.pro-panel-heading > a:hover {
border-color: #e11a25;
color: #f46c73;
}
.home-pro-page .pro-news-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.home-pro-page .pro-news-grid .news-card {
overflow: hidden;
border: 1px solid var(--pro-border);
border-radius: 14px;
background: #121212;
box-shadow: 0 22px 48px rgba(0,0,0,.23);
transition: transform .25s ease, border-color .25s ease;
}
.home-pro-page .pro-news-grid .news-card:hover {
border-color: rgba(225,26,37,.42);
transform: translateY(-6px);
}
.home-pro-page .pro-news-grid .news-card img {
aspect-ratio: 16 / 10;
object-fit: cover;
}
.pro-season-section {
background:
radial-gradient(circle at 85% 20%, rgba(176,0,10,.16), transparent 28%),
#0e0e0e;
}
.pro-season-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(360px, .75fr);
gap: 24px;
}
.pro-standings-panel,
.pro-team-feature {
overflow: hidden;
border: 1px solid var(--pro-border);
border-radius: 18px;
background: #121212;
box-shadow: 0 25px 60px rgba(0,0,0,.26);
}
.pro-standings-panel {
padding: 26px;
}
.pro-panel-heading {
align-items: center;
margin-bottom: 22px;
}
.pro-panel-heading h2 {
font-size: clamp(28px, 4vw, 46px);
}
.pro-home-table {
max-height: 510px;
overflow: auto;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
}
.pro-home-table .site-table {
min-width: 760px;
}
.pro-home-table th {
position: sticky;
z-index: 1;
top: 0;
background: #202020;
}
.pro-home-table td,
.pro-home-table th {
padding: 12px 11px;
font-size: 12px;
}
.pro-home-table .galychyna-row td {
background: rgba(176,0,10,.18);
}
.pro-team-feature {
position: relative;
display: grid;
min-height: 600px;
isolation: isolate;
}
.pro-team-feature::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(180deg, rgba(13,13,13,.06), #111 78%);
}
.pro-team-feature-content {
align-self: end;
padding: 30px;
}
.pro-team-feature h2 {
font-size: clamp(32px, 4vw, 54px);
}
.pro-team-feature p:not(.pro-section-kicker) {
margin: 18px 0 25px;
color: var(--pro-muted);
line-height: 1.65;
}
.pro-player-collage {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
order: -1;
height: 330px;
overflow: hidden;
}
.pro-player-collage img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.65) contrast(1.08);
}
.pro-media-section {
background: #080808;
}
.pro-heading-links {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.pro-media-grid {
display: grid;
grid-template-columns: 1.35fr .65fr;
grid-template-rows: repeat(2, minmax(220px, 1fr));
gap: 14px;
min-height: 600px;
}
.pro-media-item {
position: relative;
overflow: hidden;
min-height: 0;
border-radius: 14px;
color: #fff;
text-decoration: none;
}
.pro-media-item.large {
grid-row: 1 / 3;
}
.pro-media-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.88));
}
.pro-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease, filter .5s ease;
}
.pro-media-item:hover img {
transform: scale(1.05);
filter: saturate(1.1);
}
.pro-media-item span {
position: absolute;
z-index: 2;
right: 24px;
bottom: 23px;
left: 24px;
font-family: "Oswald", sans-serif;
font-size: clamp(24px, 3vw, 38px);
line-height: 1.1;
text-transform: uppercase;
}
.pro-media-item span small {
display: block;
margin-bottom: 8px;
color: #f15a62;
font-family: "Manrope", sans-serif;
font-size: 10px;
letter-spacing: .13em;
}
.pro-support-cta {
padding: 72px 0;
background:
linear-gradient(105deg, rgba(120,0,8,.97), rgba(210,0,15,.92)),
url("../images/stadium.jpg") center / cover;
}
.pro-support-inner {
display: flex;
justify-content: space-between;
gap: 35px;
align-items: center;
}
.pro-support-inner h2 {
max-width: 850px;
}
.pro-support-inner > div > p:last-child {
max-width: 800px;
margin: 16px 0 0;
color: rgba(255,255,255,.84);
line-height: 1.65;
}
.home-pro-page .pro-footer {
border-top: 0;
background: #090909;
}
.pro-footer-grid {
display: grid;
grid-template-columns: 1.45fr repeat(3, minmax(150px, .65fr));
gap: 42px;
align-items: start;
padding-block: 65px 45px;
}
.pro-footer-brand {
display: flex;
gap: 17px;
align-items: center;
}
.pro-footer-brand img {
width: 72px;
height: 72px;
}
.pro-footer-brand h2 {
margin: 0 0 7px;
font-size: 21px;
text-align: left;
}
.pro-footer-brand p {
max-width: 320px;
margin: 0;
color: #8f8f93;
text-align: left;
}
.home-pro-page .footer-menu h3,
.home-pro-page .footer-contact h3 {
margin-top: 0;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
}
.home-pro-page .footer-menu a,
.home-pro-page .footer-contact p {
color: #9d9da0;
font-size: 12px;
}
.pro-footer-social {
justify-content: flex-start;
margin-top: 18px;
}
.pro-footer-social a {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 9px;
color: #fff;
font-size: 15px;
}
.home-pro-page .copyright {
display: flex;
justify-content: space-between;
gap: 20px;
width: min(1420px, 92%);
margin: auto;
padding: 22px 0 30px;
border-top: 1px solid rgba(255,255,255,.08);
color: #777;
font-size: 11px;
}
.home-pro-page .copyright a {
color: #777;
text-decoration: none;
}
.home-pro-page .copyright a:hover {
color: #fff;
}
@media (max-width: 1180px) {
.home-pro-page .header-inner {
flex-wrap: wrap;
padding-block: 12px;
}
.home-pro-page .main-nav {
order: 3;
width: 100%;
justify-content: center;
}
.pro-hero {
min-height: auto;
}
.pro-hero-grid,
.pro-season-grid {
grid-template-columns: 1fr;
}
.pro-hero-grid {
padding-top: 85px;
}
.pro-next-match {
max-width: 760px;
}
.pro-team-feature {
grid-template-columns: 1fr 1fr;
min-height: 440px;
}
.pro-player-collage {
height: 100%;
}
.pro-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.home-pro-page .header-inner {
min-height: 74px;
flex-wrap: nowrap;
}
.home-pro-page .club-logo {
width: 52px;
height: 52px;
}
.home-pro-page .brand-text p,
.header-support-button span {
display: none;
}
.header-support-button {
width: 40px;
padding: 9px;
}
.home-pro-page .main-nav {
display: none;
position: absolute;
top: 74px;
right: 0;
left: 0;
width: 100%;
max-height: calc(100vh - 74px);
overflow-y: auto;
padding: 16px;
border-top: 1px solid rgba(255,255,255,.08);
background: #0b0b0b;
}
.home-pro-page .main-nav.open {
display: grid;
}
.home-pro-page .main-nav > a,
.home-pro-page .main-nav .dropbtn {
justify-content: space-between;
width: 100%;
padding: 12px 13px;
}
.home-pro-page .dropdown-content {
position: static;
width: 100%;
margin-top: 4px;
box-shadow: none;
}
.pro-hero-grid {
padding-block: 70px 100px;
}
.pro-hero-copy h2 {
font-size: clamp(62px, 18vw, 105px);
}
.home-pro-page .pro-news-grid,
.pro-media-grid {
grid-template-columns: 1fr;
}
.pro-media-grid {
grid-template-rows: repeat(3, minmax(310px, 1fr));
}
.pro-media-item.large {
grid-row: auto;
}
.pro-team-feature {
grid-template-columns: 1fr;
}
.pro-player-collage {
height: 300px;
}
.pro-support-inner,
.pro-section-heading,
.pro-panel-heading {
align-items: flex-start;
flex-direction: column;
}
.pro-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.home-pro-page .brand-text h1 {
font-size: 16px;
}
.home-pro-page .languages {
display: none;
}
.pro-hero-copy h2 {
font-size: clamp(57px, 19vw, 88px);
}
.pro-hero-lead {
font-size: 16px;
}
.pro-hero-actions,
.pro-button,
.pro-support-inner .pro-button {
width: 100%;
}
.pro-hero-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.pro-hero-facts > div {
min-width: 0;
padding: 0 10px;
text-align: center;
}
.pro-hero-facts strong {
font-size: 18px;
}
.pro-hero-facts span {
font-size: 9px;
}
.pro-next-match-content {
min-height: 230px;
padding: 30px 18px;
}
.pro-card-top {
align-items: flex-start;
flex-direction: column;
}
.home-pro-section {
padding: 72px 0;
}
.pro-standings-panel,
.pro-team-feature-content {
padding: 18px;
}
.pro-player-collage {
height: 240px;
}
.pro-footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.home-pro-page .copyright {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.pro-scroll-cue i,
.pro-media-item img,
.pro-button,
.home-pro-page .pro-news-grid .news-card {
animation: none;
transition: none;
}
}
/* ====================================================== */
/* ПРОФЕСІЙНІ ВНУТРІШНІ СТОРІНКИ 2026 */
/* ====================================================== */
.inner-pro-page {
--inner-bg: #080808;
--inner-panel: #111111;
--inner-panel-2: #171717;
--inner-border: rgba(255,255,255,.105);
--inner-red: #b0000a;
--inner-red-bright: #e11a25;
--inner-muted: #a4a4a7;
background:
radial-gradient(circle at 9% 12%, rgba(176,0,10,.13), transparent 28%),
radial-gradient(circle at 90% 36%, rgba(176,0,10,.07), transparent 24%),
#080808;
color: #fff;
font-family: "Manrope", Arial, sans-serif;
}
.inner-pro-page h1,
.inner-pro-page h2,
.inner-pro-page h3,
.inner-pro-page .inner-page-kicker,
.inner-pro-page .section-title {
font-family: "Oswald", "Manrope", sans-serif;
}
.inner-pro-page .container {
width: min(1420px, 92%);
}
/* Шапка */
.inner-pro-page .pro-site-header {
border-bottom: 1px solid rgba(255,255,255,.09);
background: rgba(7,7,7,.9);
box-shadow: 0 12px 38px rgba(0,0,0,.34);
backdrop-filter: blur(18px);
}
.inner-pro-page .header-inner {
width: min(1500px, 95%);
min-height: 88px;
}
.inner-pro-page .club-logo {
width: 62px;
height: 62px;
}
.inner-pro-page .brand-text h1 {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 20px;
letter-spacing: .01em;
text-transform: uppercase;
}
.inner-pro-page .brand-text p {
color: #8f8f93;
letter-spacing: .035em;
}
.inner-pro-page .main-nav {
flex-wrap: nowrap;
gap: 2px;
}
.inner-pro-page .main-nav > a,
.inner-pro-page .main-nav .dropbtn {
display: flex;
gap: 7px;
align-items: center;
min-height: 42px;
padding: 10px 13px;
border-radius: 8px;
font-size: 13px;
letter-spacing: .01em;
}
.inner-pro-page .main-nav .dropbtn i {
font-size: 9px;
opacity: .65;
}
.inner-pro-page .main-nav a:hover,
.inner-pro-page .main-nav a.active {
background: rgba(176,0,10,.86);
transform: none;
}
.inner-pro-page .dropdown-content {
min-width: 220px;
padding: 8px;
border: 1px solid var(--inner-border);
border-radius: 12px;
background: rgba(17,17,17,.985);
box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.inner-pro-page .dropdown-content a {
padding: 11px 12px;
border-radius: 8px;
}
.inner-pro-page .header-actions {
flex-direction: row;
align-items: center;
gap: 10px;
}
.inner-pro-page .languages a {
padding: 7px 9px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 7px;
background: transparent;
font-size: 11px;
}
.inner-pro-page .languages a.active,
.inner-pro-page .languages a:hover {
border-color: rgba(225,26,37,.75);
background: rgba(176,0,10,.32);
}
.inner-pro-page .header-actions > .social-links {
gap: 6px;
}
.inner-pro-page .header-actions > .social-links a {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
color: #d8d8d8;
font-size: 12px;
}
.inner-pro-page .header-actions > .social-links a:hover {
border-color: rgba(225,26,37,.6);
background: rgba(176,0,10,.3);
}
/* Великий заголовок кожної сторінки */
.inner-pro-page .page-hero {
position: relative;
isolation: isolate;
display: flex;
min-height: 390px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
overflow: hidden;
padding:
120px
max(4%, calc((100% - 1420px) / 2))
68px;
border-bottom: 1px solid rgba(255,255,255,.08);
background:
linear-gradient(90deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.8) 52%, rgba(5,5,5,.34) 100%),
linear-gradient(0deg, rgba(176,0,10,.24), transparent 65%),
url("../images/stadium.jpg") center 46% / cover no-repeat;
text-align: left;
}
.inner-pro-page .page-hero::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
linear-gradient(115deg, transparent 0 64%, rgba(176,0,10,.23) 64% 66%, transparent 66%),
repeating-linear-gradient(125deg, transparent 0 56px, rgba(255,255,255,.018) 57px 58px);
}
.inner-pro-page .page-hero::after {
content: "";
position: absolute;
z-index: -1;
right: max(4%, calc((100% - 1420px) / 2));
bottom: -28px;
width: 250px;
height: 250px;
background: url("../images/logo.png") center / contain no-repeat;
opacity: .11;
filter: grayscale(1);
}
.inner-pro-page .inner-page-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
color: #ff6971;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
}
.inner-pro-page .inner-page-kicker::before {
content: "";
width: 35px;
height: 3px;
border-radius: 99px;
background: var(--inner-red-bright);
}
.inner-pro-page .page-hero h1,
.inner-pro-page .page-hero h2 {
max-width: 920px;
margin: 0 0 13px;
font-size: clamp(43px, 7vw, 78px);
line-height: .98;
letter-spacing: -.025em;
text-transform: uppercase;
text-shadow: 0 10px 32px rgba(0,0,0,.55);
}
.inner-pro-page .page-hero p {
max-width: 720px;
margin: 0;
color: rgba(255,255,255,.72);
font-size: clamp(16px, 1.8vw, 21px);
line-height: 1.65;
}
/* Загальний контент */
.inner-pro-page main {
overflow: hidden;
}
.inner-pro-page .section {
padding: 82px 0;
background: transparent;
}
.inner-pro-page main > .section:nth-of-type(even) {
border-block: 1px solid rgba(255,255,255,.045);
background: rgba(255,255,255,.014);
}
.inner-pro-page .section-title {
margin: 0 0 28px;
font-size: clamp(29px, 4vw, 46px);
letter-spacing: -.02em;
text-transform: uppercase;
}
.inner-pro-page .section-title::after {
display: block;
width: 60px;
height: 4px;
margin-top: 13px;
border-radius: 99px;
background: var(--inner-red-bright);
content: "";
}
/* Навігація всередині розділів */
.inner-pro-page .match-page-links,
.inner-pro-page .team-page-links,
.inner-pro-page .media-page-links,
.inner-pro-page .club-page-menu,
.inner-pro-page .contact-page-links {
display: flex;
width: fit-content;
max-width: 100%;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 32px;
padding: 7px;
border: 1px solid var(--inner-border);
border-radius: 13px;
background: rgba(17,17,17,.92);
box-shadow: 0 15px 38px rgba(0,0,0,.22);
}
.inner-pro-page .match-page-links a,
.inner-pro-page .team-page-links a,
.inner-pro-page .media-page-links a,
.inner-pro-page .club-page-menu a,
.inner-pro-page .contact-page-links a {
min-height: 40px;
padding: 10px 15px;
border-radius: 9px;
color: #b8b8bc;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.inner-pro-page .match-page-links a:hover,
.inner-pro-page .team-page-links a:hover,
.inner-pro-page .media-page-links a:hover,
.inner-pro-page .club-page-menu a:hover,
.inner-pro-page .contact-page-links a:hover,
.inner-pro-page .match-page-links .active-page,
.inner-pro-page .team-page-links .active-page,
.inner-pro-page .media-page-links .active-page,
.inner-pro-page .club-page-menu .active,
.inner-pro-page .contact-page-links .active-page {
background: var(--inner-red);
color: #fff;
}
/* Пошук та фільтри */
.inner-pro-page .news-search,
.inner-pro-page .player-search {
max-width: 760px;
margin: 0 auto 25px;
}
.inner-pro-page .news-search-control,
.inner-pro-page .player-search-control {
display: flex;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 8px 13px 8px 18px;
border: 1px solid var(--inner-border);
border-radius: 14px;
background: rgba(17,17,17,.96);
box-shadow: 0 15px 40px rgba(0,0,0,.23);
}
.inner-pro-page .news-search-control input,
.inner-pro-page .player-search-control input,
.inner-pro-page .contact-form input,
.inner-pro-page .contact-form textarea,
.inner-pro-page .report-controls input,
.inner-pro-page .report-controls select {
width: 100%;
border: 1px solid rgba(255,255,255,.11);
border-radius: 10px;
background: #0c0c0c;
color: #fff;
font: inherit;
outline: 0;
}
.inner-pro-page .news-search-control input,
.inner-pro-page .player-search-control input {
min-width: 0;
border: 0;
background: transparent;
}
.inner-pro-page .news-search-control input:focus,
.inner-pro-page .player-search-control input:focus,
.inner-pro-page .contact-form input:focus,
.inner-pro-page .contact-form textarea:focus,
.inner-pro-page .report-controls input:focus,
.inner-pro-page .report-controls select:focus {
border-color: rgba(225,26,37,.8);
box-shadow: 0 0 0 4px rgba(225,26,37,.12);
}
.inner-pro-page .news-filters,
.inner-pro-page .player-filters,
.inner-pro-page .photo-filters,
.inner-pro-page .video-filters,
.inner-pro-page .match-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin: 0 0 34px;
}
.inner-pro-page .news-filter-button,
.inner-pro-page .player-filter-button,
.inner-pro-page .photo-filter-button,
.inner-pro-page .video-filter-button,
.inner-pro-page .match-filter-button {
min-height: 42px;
padding: 9px 16px;
border: 1px solid var(--inner-border);
border-radius: 999px;
background: #131313;
color: #b6b6b9;
font: inherit;
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition: .2s ease;
}
.inner-pro-page .news-filter-button:hover,
.inner-pro-page .player-filter-button:hover,
.inner-pro-page .photo-filter-button:hover,
.inner-pro-page .video-filter-button:hover,
.inner-pro-page .match-filter-button:hover,
.inner-pro-page .news-filter-button.active,
.inner-pro-page .player-filter-button.active,
.inner-pro-page .photo-filter-button.active,
.inner-pro-page .video-filter-button.active,
.inner-pro-page .match-filter-button.active {
border-color: rgba(225,26,37,.6);
background: var(--inner-red);
color: #fff;
transform: translateY(-1px);
}
.inner-pro-page .news-search-status,
.inner-pro-page .player-search-status,
.inner-pro-page .media-filter-status,
.inner-pro-page .match-filter-status,
.inner-pro-page .standings-updated {
color: #8f8f93;
font-size: 12px;
}
/* Картки */
.inner-pro-page .news-container,
.inner-pro-page .news-grid,
.inner-pro-page .players-grid,
.inner-pro-page .management-grid,
.inner-pro-page .financial-reports-grid,
.inner-pro-page .modern-photo-grid,
.inner-pro-page .modern-video-grid,
.inner-pro-page .support-grid,
.inner-pro-page .club-navigation,
.inner-pro-page .club-facts-grid,
.inner-pro-page .payment-grid,
.inner-pro-page .support-options {
gap: 22px;
}
.inner-pro-page .news-card,
.inner-pro-page .simple-news-card,
.inner-pro-page .player-card,
.inner-pro-page .management-card,
.inner-pro-page .financial-report-card,
.inner-pro-page .modern-photo-card,
.inner-pro-page .modern-video-card,
.inner-pro-page .support-card,
.inner-pro-page .club-navigation-card,
.inner-pro-page .club-fact-card,
.inner-pro-page .payment-card,
.inner-pro-page .support-option,
.inner-pro-page .contact-information-panel,
.inner-pro-page .contact-form-panel,
.inner-pro-page .club-stadium-card,
.inner-pro-page .club-timeline-content,
.inner-pro-page .club-emblem-section,
.inner-pro-page .club-color-card,
.inner-pro-page .financial-report-intro,
.inner-pro-page .support-intro-modern,
.inner-pro-page .support-security-note,
.inner-pro-page .thanks-box,
.inner-pro-page .video-source-notice,
.inner-pro-page .standings-information,
.inner-pro-page .next-match-card {
border: 1px solid var(--inner-border);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(25,25,25,.98), rgba(14,14,14,.98));
box-shadow: 0 22px 55px rgba(0,0,0,.25);
}
.inner-pro-page .news-card,
.inner-pro-page .simple-news-card,
.inner-pro-page .player-card,
.inner-pro-page .management-card,
.inner-pro-page .financial-report-card,
.inner-pro-page .modern-photo-card,
.inner-pro-page .modern-video-card,
.inner-pro-page .support-card,
.inner-pro-page .club-navigation-card,
.inner-pro-page .club-fact-card,
.inner-pro-page .support-option,
.inner-pro-page .club-color-card {
overflow: hidden;
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.inner-pro-page .news-card:hover,
.inner-pro-page .simple-news-card:hover,
.inner-pro-page .player-card:hover,
.inner-pro-page .management-card:hover,
.inner-pro-page .financial-report-card:hover,
.inner-pro-page .modern-photo-card:hover,
.inner-pro-page .modern-video-card:hover,
.inner-pro-page .support-card:hover,
.inner-pro-page .club-navigation-card:hover,
.inner-pro-page .club-fact-card:hover,
.inner-pro-page .support-option:hover,
.inner-pro-page .club-color-card:hover {
border-color: rgba(225,26,37,.42);
box-shadow: 0 28px 64px rgba(0,0,0,.35);
transform: translateY(-6px);
}
.inner-pro-page .news-card img,
.inner-pro-page .simple-news-card img,
.inner-pro-page .player-photo img,
.inner-pro-page .modern-photo-card img {
transition: transform .5s ease;
}
.inner-pro-page .news-card:hover img,
.inner-pro-page .simple-news-card:hover img,
.inner-pro-page .player-card:hover .player-photo img,
.inner-pro-page .modern-photo-card:hover img {
transform: scale(1.045);
}
.inner-pro-page .player-card {
border-radius: 17px;
}
.inner-pro-page .player-info {
padding: 20px;
}
.inner-pro-page .player-position,
.inner-pro-page .management-role,
.inner-pro-page .media-category-badge,
.inner-pro-page .report-year {
color: #ff6971;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.inner-pro-page .player-open-label,
.inner-pro-page .support-link,
.inner-pro-page .financial-report-download {
color: #ff6971;
font-weight: 800;
}
/* Наступний матч */
.inner-pro-page .next-match-card {
position: relative;
overflow: hidden;
margin-bottom: 30px;
padding: 27px;
border-color: rgba(225,26,37,.33);
}
.inner-pro-page .next-match-card::after {
content: "";
position: absolute;
right: -35px;
bottom: -55px;
width: 180px;
height: 180px;
background: url("../images/logo.png") center / contain no-repeat;
opacity: .055;
filter: grayscale(1);
}
.inner-pro-page .next-match-label {
color: #ff6971;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
/* Таблиці */
.inner-pro-page .table-wrap {
overflow: hidden;
border: 1px solid var(--inner-border);
border-radius: 16px;
background: #101010;
box-shadow: 0 22px 52px rgba(0,0,0,.25);
}
.inner-pro-page .site-table {
width: 100%;
border-collapse: collapse;
}
.inner-pro-page .site-table th {
padding: 15px 13px;
border-bottom: 1px solid rgba(255,255,255,.09);
background: linear-gradient(180deg, #202020, #191919);
color: #adadb1;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
.inner-pro-page .site-table td {
padding: 15px 13px;
border-bottom: 1px solid rgba(255,255,255,.065);
color: #d7d7da;
font-size: 13px;
}
.inner-pro-page .site-table tbody tr {
transition: background .18s ease;
}
.inner-pro-page .site-table tbody tr:hover {
background: rgba(255,255,255,.025);
}
.inner-pro-page .site-table .galychyna-row,
.inner-pro-page .site-table .our-team-row {
background: linear-gradient(90deg, rgba(176,0,10,.2), rgba(176,0,10,.05));
}
.inner-pro-page .site-table .galychyna-row td:first-child,
.inner-pro-page .site-table .our-team-row td:first-child {
box-shadow: inset 4px 0 0 var(--inner-red-bright);
}
/* Контакти */
.inner-pro-page .contact-layout {
gap: 24px;
}
.inner-pro-page .contact-information-panel,
.inner-pro-page .contact-form-panel {
padding: 28px;
}
.inner-pro-page .contact-panel-heading h2 {
margin-top: 0;
font-size: 31px;
}
.inner-pro-page .contact-detail-card {
border: 1px solid rgba(255,255,255,.075);
border-radius: 12px;
background: rgba(255,255,255,.02);
}
.inner-pro-page .contact-detail-card i {
color: #ff6971;
}
.inner-pro-page .contact-form {
gap: 16px;
}
.inner-pro-page .contact-form input,
.inner-pro-page .contact-form textarea {
min-height: 48px;
padding: 12px 14px;
}
.inner-pro-page .contact-form textarea {
min-height: 150px;
resize: vertical;
}
.inner-pro-page .contact-submit,
.inner-pro-page .button,
.inner-pro-page .show-more-news,
.inner-pro-page .copy-support-button,
.inner-pro-page .copy-color-button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 11px 18px;
border: 1px solid rgba(225,26,37,.6);
border-radius: 10px;
background: var(--inner-red);
color: #fff;
font: inherit;
font-weight: 800;
text-decoration: none;
cursor: pointer;
transition: .2s ease;
}
.inner-pro-page .contact-submit:hover,
.inner-pro-page .button:hover,
.inner-pro-page .show-more-news:hover,
.inner-pro-page .copy-support-button:hover,
.inner-pro-page .copy-color-button:hover {
background: var(--inner-red-bright);
transform: translateY(-2px);
}
.inner-pro-page .contact-map-frame {
overflow: hidden;
border: 1px solid var(--inner-border);
border-radius: 16px;
box-shadow: 0 22px 52px rgba(0,0,0,.25);
}
/* Історія та символіка */
.inner-pro-page .club-history-intro,
.inner-pro-page .club-emblem-section {
gap: 38px;
}
.inner-pro-page .club-history-logo,
.inner-pro-page .club-emblem-image {
filter: drop-shadow(0 24px 36px rgba(0,0,0,.45));
}
.inner-pro-page .club-founded-badge {
border: 1px solid rgba(225,26,37,.35);
border-radius: 999px;
background: rgba(176,0,10,.16);
color: #ff777d;
}
.inner-pro-page .club-timeline::before {
background: linear-gradient(var(--inner-red-bright), rgba(225,26,37,.1));
}
.inner-pro-page .club-timeline-marker {
border-color: #080808;
background: var(--inner-red-bright);
box-shadow: 0 0 0 5px rgba(225,26,37,.14);
}
/* Модальні вікна */
.inner-pro-page .news-modal,
.inner-pro-page .player-modal,
.inner-pro-page .media-lightbox {
backdrop-filter: blur(12px);
}
.inner-pro-page .news-modal-window,
.inner-pro-page .player-modal-window {
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
background: #101010;
box-shadow: 0 35px 90px rgba(0,0,0,.65);
}
/* Футер */
.inner-pro-page .pro-footer {
border-top: 1px solid rgba(255,255,255,.075);
background: #090909;
}
.inner-pro-page .footer-container {
display: grid;
grid-template-columns: 1.35fr .8fr .9fr .75fr;
gap: 42px;
width: min(1420px, 92%);
padding: 64px 0 44px;
}
.inner-pro-page .footer-logo {
align-items: flex-start;
text-align: left;
}
.inner-pro-page .footer-logo img {
width: 74px;
height: 74px;
}
.inner-pro-page .footer-logo h2 {
margin: 14px 0 7px;
font-size: 22px;
text-align: left;
}
.inner-pro-page .footer-logo p {
color: #8f8f93;
text-align: left;
}
.inner-pro-page .footer-menu h3,
.inner-pro-page .footer-contact h3,
.inner-pro-page .footer-social h3 {
margin-top: 0;
font-family: "Oswald", sans-serif;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
}
.inner-pro-page .footer-menu a,
.inner-pro-page .footer-contact p {
color: #9d9da0;
font-size: 12px;
}
.inner-pro-page .footer-menu a:hover {
color: #fff;
}
.inner-pro-page .footer-social .social-links {
justify-content: flex-start;
}
.inner-pro-page .footer-social .social-links a {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 9px;
color: #fff;
font-size: 15px;
}
.inner-pro-page .copyright {
width: min(1420px, 92%);
margin: auto;
padding: 22px 0 30px;
border-top: 1px solid rgba(255,255,255,.08);
color: #777;
font-size: 11px;
}
/* Адаптація */
@media (max-width: 1220px) {
.inner-pro-page .header-inner {
flex-wrap: wrap;
padding-block: 12px;
}
.inner-pro-page .main-nav {
order: 3;
width: 100%;
justify-content: center;
}
.inner-pro-page .footer-container {
grid-template-columns: 1.3fr repeat(2, 1fr);
}
.inner-pro-page .footer-social {
grid-column: 2 / -1;
}
}
@media (max-width: 900px) {
.inner-pro-page .page-hero {
min-height: 330px;
padding-top: 105px;
}
.inner-pro-page .page-hero::after {
width: 180px;
height: 180px;
opacity: .075;
}
.inner-pro-page .section {
padding: 64px 0;
}
.inner-pro-page .footer-container {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.inner-pro-page .footer-social {
grid-column: auto;
}
}
@media (max-width: 820px) {
.inner-pro-page .header-inner {
min-height: 76px;
flex-wrap: nowrap;
}
.inner-pro-page .club-logo {
width: 52px;
height: 52px;
}
.inner-pro-page .brand-text p,
.inner-pro-page .header-actions > .social-links {
display: none;
}
.inner-pro-page .main-nav {
position: absolute;
z-index: 1001;
top: calc(100% + 1px);
left: 4%;
right: 4%;
display: none;
width: auto;
padding: 12px;
border: 1px solid var(--inner-border);
border-radius: 14px;
background: rgba(12,12,12,.99);
box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.inner-pro-page .main-nav.open {
display: grid;
}
.inner-pro-page .main-nav > a,
.inner-pro-page .main-nav .dropbtn {
width: 100%;
justify-content: space-between;
}
.inner-pro-page .dropdown-content {
position: static;
display: grid;
box-shadow: none;
margin: 4px 0 9px;
}
.inner-pro-page .menu-toggle {
display: flex;
}
}
@media (max-width: 650px) {
.inner-pro-page .header-inner {
width: 92%;
gap: 10px;
}
.inner-pro-page .brand-text h1 {
font-size: 16px;
}
.inner-pro-page .languages a {
padding: 6px 7px;
}
.inner-pro-page .page-hero {
min-height: 285px;
padding:
92px
5%
45px;
}
.inner-pro-page .page-hero::after {
right: -25px;
bottom: -35px;
width: 150px;
height: 150px;
}
.inner-pro-page .inner-page-kicker {
font-size: 10px;
}
.inner-pro-page .page-hero h1,
.inner-pro-page .page-hero h2 {
font-size: clamp(38px, 14vw, 58px);
}
.inner-pro-page .page-hero p {
font-size: 15px;
}
.inner-pro-page .section {
padding: 50px 0;
}
.inner-pro-page .match-page-links,
.inner-pro-page .team-page-links,
.inner-pro-page .media-page-links,
.inner-pro-page .club-page-menu,
.inner-pro-page .contact-page-links {
width: 100%;
}
.inner-pro-page .match-page-links a,
.inner-pro-page .team-page-links a,
.inner-pro-page .media-page-links a,
.inner-pro-page .club-page-menu a,
.inner-pro-page .contact-page-links a {
flex: 1 1 130px;
text-align: center;
}
.inner-pro-page .table-wrap {
overflow-x: auto;
border-radius: 12px;
}
.inner-pro-page .site-table {
min-width: 760px;
}
.inner-pro-page .footer-container {
grid-template-columns: 1fr;
gap: 28px;
padding-top: 48px;
}
.inner-pro-page .footer-social {
grid-column: auto;
}
}
/* ===================================================== */
/* ПРОФЕСІЙНИЙ ПАКЕТ САЙТУ: СЕРВІСНІ ЕЛЕМЕНТИ */
/* ===================================================== */
.site-floating-tools{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
gap:12px;
z-index:1200
}
.floating-support-button,
.back-to-top{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:52px;
padding:0 18px;
border:none;
border-radius:999px;
background:linear-gradient(135deg,#b40000,#650000);
color:#fff;
text-decoration:none;
font-weight:700;
box-shadow:0 12px 28px rgba(0,0,0,.35);
cursor:pointer;
transition:.25s
}
.back-to-top{
width:52px;
padding:0;
opacity:0;
visibility:hidden;
transform:translateY(12px)
}
.back-to-top.visible{
opacity:1;
visibility:visible;
transform:translateY(0)
}
.floating-support-button:hover,
.back-to-top:hover{
transform:translateY(-2px);
filter:brightness(1.05)
}
.error-page{
min-height:100vh;
display:grid;
place-items:center;
padding:40px 20px;
background:radial-gradient(circle at top, rgba(170,0,0,.24), transparent 30%), linear-gradient(135deg,#4a0000,#150000 46%,#050505)
}
.error-page-inner{
max-width:760px;
text-align:center;
padding:42px 28px;
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
background:rgba(10,10,10,.82);
box-shadow:0 24px 60px rgba(0,0,0,.35)
}
.error-logo{
width:110px;
margin:0 auto 20px
}
.error-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
background:rgba(180,0,0,.16);
color:#ffb7b7;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
font-size:12px
}
.error-page h1{
margin:18px 0 12px;
font-size:clamp(34px,6vw,62px)
}
.error-page p{
margin:0 auto;
max-width:620px;
color:#e2e2e2;
line-height:1.8
}
.error-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-top:28px
}
@media (max-width:700px){
.site-floating-tools{
right:14px;
bottom:14px
}
.floating-support-button span{
display:none
}
.floating-support-button{
width:52px;
padding:0
}
.error-page-inner{
padding:32px 18px
}
}
/* ===================================================== */
/* ВХІД В АДМІНПАНЕЛЬ ЧЕРЕЗ ПУБЛІЧНИЙ САЙТ */
/* ===================================================== */
.header-admin-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 8px 13px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 10px;
background: rgba(255, 255, 255, 0.045);
color: #d6d6d6;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
border-color 0.2s ease,
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.header-admin-button i {
color: #ff8585;
}
.header-admin-button:hover {
border-color: rgba(185, 0, 0, 0.55);
background: rgba(145, 0, 0, 0.22);
color: #ffffff;
transform: translateY(-1px);
}
.footer-admin-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #a8a8a8;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition:
color 0.2s ease,
transform 0.2s ease;
}
.footer-admin-link i {
color: #d85f5f;
}
.footer-admin-link:hover {
color: #ffffff;
transform: translateY(-1px);
}
.copyright {
gap: 14px;
}
@media (max-width: 1050px) {
.header-admin-button span {
display: none;
}
.header-admin-button {
width: 38px;
padding: 0;
}
}
@media (max-width: 700px) {
.copyright {
align-items: center;
flex-direction: column;
text-align: center;
}
}
/* ===================================================== */
/* ВИПРАВЛЕНА КНОПКА «ВХІД» */
/* ===================================================== */
.header-admin-button span {
display: inline !important;
}
.header-admin-button {
width: auto !important;
min-width: 82px;
padding: 9px 15px !important;
position: relative;
z-index: 20;
cursor: pointer;
}
.footer-admin-link {
position: relative;
z-index: 20;
cursor: pointer;
}
@media (max-width: 1050px) {
.header-admin-button span {
display: inline !important;
}
.header-admin-button {
width: auto !important;
min-width: 82px;
padding: 9px 15px !important;
}
}
@media (max-width: 560px) {
.header-admin-button {
min-width: 72px;
padding: 8px 12px !important;
}
}