:root { --primary: #121212; --secondary: #1ad389; --accent: #ff4757; --text-light: rgba(255,255,255,0.8); } body { font-family: 'Montserrat', sans-serif; background-color: var(--primary); color: white; line-height: 1.6; margin: 0; padding: 0; } .bg-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: radial-gradient(circle at 75% 50%, rgba(0,255,153,.1) 0, transparent 90%), radial-gradient(circle at 25% 30%, rgba(0,255,115,.1) 0, transparent 90%); animation: bgPulse 3s infinite alternate; } @keyframes bgPulse { 0% { opacity: .3 } 50% { opacity: .6 } 100% { opacity: .3 } } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Хедер как на главной */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 15px 0; background: rgba(18,18,18,.9); backdrop-filter: blur(10px); transition: all 0.4s ease; border-bottom: 1px solid rgba(255,255,255,.05); } header.scrolled { padding: 10px 0; box-shadow: 0 5px 30px rgba(0,0,0,.3); } .header-container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 28px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: 1px; position: relative; } .logo span { color: var(--secondary); } .nav-menu { display: flex; list-style: none; } .nav-menu li { margin-left: 30px; } .nav-menu a { color: rgba(255,255,255,.8); text-decoration: none; font-weight: 500; font-size: 16px; transition: all 0.3s ease; position: relative; } .nav-menu a:hover { color: var(--secondary); } .nav-menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--secondary); transition: all 0.3s ease; } .nav-menu a:hover::after { width: 100%; } .nav-btn { background: var(--secondary); color: var(--primary); padding: 12px 25px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(26,211,137,.3); display: inline-block; border: none; cursor: pointer; font-family: inherit; font-size: 16px; } .nav-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(26,211,137,.4); } /* Мобильное меню */ .menu-toggle { display: none; cursor: pointer; font-size: 24px; color: #fff; } /* Контент страницы статистики */ .statistic { padding: 150px 0 0; } .statistic h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 20px; position: relative; } .statistic p { margin: 0 auto 40px; opacity: 0.8; font-size: 1.1rem; line-height: 1.6; } /* Кнопки раскрытия */ .collapse-btn { display: block; margin: 0 auto 20px; background: linear-gradient(135deg, var(--secondary), #0fd36e); color: var(--primary); border: none; padding: 12px 25px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(26,211,137,.3); } .collapse-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(26,211,137,.4); } /* Карточки с таблицами */ .stats-card { background: rgba(255,255,255,.03); border-radius: 15px; padding: 30px; border: 1px solid rgba(255,255,255,.1); margin-bottom: 30px; backdrop-filter: blur(10px); } .stats-card h6 { font-size: 1.3rem; font-weight: 700; margin-bottom: 25px; text-align: center; color: var(--secondary); } /* Таблицы с четкими границами */ .year-stat { width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); } .year-stat th, .year-stat td { padding: 12px 15px; text-align: center; border: 1px solid rgba(255,255,255,.1); } .year-stat tr:first-child { background: rgba(26,211,137,.1); } .year-stat tr:first-child td { font-weight: 700; color: var(--secondary); padding-bottom: 10px; } .year-stat tr:nth-child(2) td { font-weight: 500; } .year-stat tr:nth-child(3) td { font-weight: 700; color: var(--secondary); } /* Форма выбора даты */ .date-picker-container { margin: 40px 0 30px; } .date-picker-container label { display: block; margin-bottom: 10px; } .date-picker-container input { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 12px 15px; color: #fff; font-family: inherit; font-size: 16px; transition: all 0.3s ease; } .date-picker-container input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 2px rgba(26,211,137,.2); } /* Блок результатов */ /* #match-results { background: rgba(255,255,255,.03); border-radius: 15px; padding: 30px; border: 1px solid rgba(255,255,255,.1); margin-top: 30px; backdrop-filter: blur(10px); } */ .match-result-orange{ background-color: dimgray; padding: 5px; border-radius: 5px; margin: 5px; } /* Нижний текст */ .test { padding: 0 0 60px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.4)); } .test p { margin: 0 auto; opacity: 0.7; font-size: 1rem; } .match-name img{ width: 20px; } .country img{ width: 20px; } /* Футер */ footer { background: #0a0a0a; padding: 60px 0 30px; border-top: 1px solid rgba(255,255,255,.05); } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 50px; } .percent{ background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(40, 40, 40, 0.95)); border: 2px solid var(--secondary, #1ad389); border-radius: 8px; padding: 15px; margin: 20px 0; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); font-family: 'Montserrat', sans-serif; color: #fff; order: -1;} .footer-logo { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 20px; display: inline-block; } .footer-logo span { color: var(--secondary); } .footer-text { opacity: 0.6; margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6; } .footer-links h3 { color: #fff; font-size: 1.1rem; margin-bottom: 20px; font-weight: 700; position: relative; display: inline-block; } .footer-links h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--secondary); } .footer-link { display: block; color: rgba(255,255,255,.6); margin-bottom: 12px; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; } .footer-link:hover { color: var(--secondary); padding-left: 5px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: #fff; text-decoration: none; font-size: 1.1rem; } .social-link:hover { background: var(--secondary); color: var(--primary); transform: translateY(-3px); } .copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.05); opacity: 0.6; font-size: 0.9rem; } /* Адаптивность */ @media (max-width: 992px) {.nav-menu { position: fixed; top: 70px; left: -100%; width: 80%; height: calc(100vh - 70px); background: rgba(18,18,18,.95); backdrop-filter: blur(10px); flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 30px; transition: all 0.4s ease; border-right: 1px solid rgba(255,255,255,.1); } .nav-menu.active { left: 0; } .nav-menu li { margin: 15px 0; } .menu-toggle { display: block; } .statistic { padding-top: 120px; } .year-stat { font-size: 0.9rem; } .footer-container { grid-template-columns: 1fr; text-align: center; } .footer-links h3 { display: block; } .social-links { justify-content: center; } } @media (max-width: 576px) { .year-stat td { padding: 8px 5px; font-size: 10px; } .stats-card { padding: 20px 15px; } .year-stat { overflow-x: auto; } .stats-card h6{ font-size: 12px; } } /* #match-results { background-color: #333333; color: #fff; font-family: sans-serif; padding: 10px; } */ .match-table { background-color: #1e1e1e; border-radius: 10px; padding: 15px; margin-bottom: 10px; } .league-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .league-heading img { width: 20px; } .league-name h6 { margin: 0; font-size: 16px; font-weight: normal; } .match { display: flex; align-items: center; padding-top: 10px; border-top: 1px solid #333; } .match-time { width: 60px; color: #bbb; margin-left: 5px;} .match-name { flex: 1; overflow: hidden; } .match-line { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; min-width: 0; } .match-team { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .match-score { flex: 0 0 auto; min-width: 60px; text-align: center; background-color: #000000; padding: 3px 12px; border-radius: 5px; font-weight: bold; } .team-logo{ width: 20px; } .match-score.draw { background-color: #520000 !important; color: #fff; } .match-result-red{ background-color: #5d0000; border-radius: 8px; padding: 5px 7px 5px 10px; margin: 5px; } .match-result{ background-color: #000000; border-radius: 8px; padding: 5px 7px 5px 10px; margin: 5px; } /* Адаптивность */ @media (max-width: 768px) { .nav-btn { padding: 5px 15px; border-radius: 50px; font-weight: 500; font-size: 12px; } #match-results{ padding: 5px; } .match-line { align-items: flex-start; justify-content: center; } .match-team { flex: 100%; justify-content: center; } .match-score { margin-bottom: 5px; } .match{ font-size: 12px; } .league-name h6 { font-size: 12px; } .match-time{ display: none; } .match-team, .match-line{ gap: 2px; } .match-score { padding: 3px 6px; } .match-table{ margin-bottom: 5px; padding: 5px; } } .match-card {background: rgba(255, 255, 255, 0.03);border-radius: 10px;padding: 10px;margin-bottom: 10px;border: 1px solid rgba(255, 255, 255, 0.08);transition: all 0.3s ease;}.game-block {padding: 10px;}.match-card:hover {background: rgba(26, 211, 137, 0.05);border-color: rgba(26, 211, 137, 0.2);transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}.match-header {display: flex;align-items: center;margin-bottom: 10px;padding-bottom: 8px;border-bottom: 1px solid #6f6f6f;font-size: 0.85rem;color: rgba(255, 255, 255, 0.7);}.flag {width: 30px;margin-right: 10px;border-radius: 2px;}.league-name {flex-grow: 1;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.match-time {background: rgba(26, 211, 137, 0.2);color: var(--secondary);padding: 3px 8px;border-radius: 4px;font-weight: 600;font-size: 0.8rem;text-align: center;}.teams {display: flex;align-items: center;justify-content: center;}.team {display: flex;align-items: center;width: 40%;}.team.home {justify-content: right;flex-direction: row-reverse;text-align: right;}.team.away {justify-content: flex-start;text-align: left;}.team-logo {width: 28px;height: 28px;object-fit: contain;margin: 0 10px;}.team-name {font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.home .team-name {margin-left: 0;margin-right: 10px;}.away .team-name {margin-right: 0;margin-left: 10px;}.score {background-color: #141414;text-align: center;font-weight: 700;font-size: 1.2rem;color: var(--secondary);padding: 0 10px;border-radius: 5px;}@media (max-width: 768px) {.flag {width: 25px;}.team-name {font-size: 0.9rem;}.team-logo {width: 16px;height: 16px;margin: 0 8px;}.score {font-size: 1rem;margin: 0 5px;}}@media (max-width: 480px) {.match-card {padding: 7px;}.team {align-items: center;text-align: center !important;}.team-name {font-size: 0.8rem;margin: 5px 0 0 !important;white-space: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}.team-logo {margin: 0;}.team-name {display: inline-block;white-space: nowrap;overflow: hidden;position: relative;}.team-name::after {content: "";position: absolute;left: 0;right: 0;height: 100%;pointer-events: none;}.team.home .team-name {text-align: right;padding-right: 5px;}.team.away .team-name {text-align: left;padding-left: 5px;}.team-logo {width: 20px;height: 20px;}.score {font-size: 0.9rem;padding: 0 5px;}} .stats-accordion { margin: 30px 0; } .stats-year-card { background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 15px; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .stats-year-card.current-year { background: rgba(26, 211, 137, 0.05); border-color: rgba(26, 211, 137, 0.2); } .stats-year-toggle { width: 100%; padding: 20px; text-align: left; background: none; border: none; color: white; cursor: pointer; display: flex; flex-direction: column; gap: 10px; } .year-header { display: flex; align-items: center; gap: 15px; } .year-badge { background: var(--secondary); color: var(--primary); padding: 5px 12px; border-radius: 20px; font-weight: 700; font-size: 14px; } .stats-year-toggle h3 { margin: 0; font-size: 1.2rem; font-weight: 600; flex-grow: 1; } .toggle-icon { transition: transform 0.3s ease; } .stats-year-card.active .toggle-icon { transform: rotate(180deg); } .year-summary { display: flex; align-items: center; gap: 20px; margin-top: 5px; } .success-rate { font-size: 1.1rem; font-weight: 700; color: var(--secondary); } .matches-count { font-size: 0.9rem; opacity: 0.8; } .stats-year-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; } .stats-year-card.active .stats-year-content { max-height: 2000px; padding: 0 20px 20px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; } .month-card { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 15px; transition: all 0.3s ease; } .month-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); } .month-card.current { background: rgba(26, 211, 137, 0.1); border: 1px solid rgba(26, 211, 137, 0.3); } .month-header { font-weight: 600; margin-bottom: 10px; color: var(--secondary); } .month-stats { display: flex; flex-direction: column; gap: 5px; } .matches { font-size: 0.9rem; opacity: 0.8; } .percent { font-weight: 700; font-size: 1.1rem; } .percent.success { color: var(--secondary); } .percent.warning { color: #FFA726; } .year-total { margin-top: 25px; } .total-card { background: rgba(26, 211, 137, 0.1); border-radius: 8px; padding: 15px; display: flex; justify-content: space-between; align-items: center; } .total-percent { font-size: 1.3rem; font-weight: 800; color: var(--secondary); } .total-matches { font-size: 0.9rem; opacity: 0.8; } .current-month-highlight { margin-top: 25px; } .highlight-card { background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(40, 40, 40, 0.95)); border: 2px solid var(--secondary); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; } .highlight-title { font-size: 1.2rem; font-weight: 700; color: var(--secondary); margin-bottom: 15px; display: block; position: relative; z-index: 1; } .highlight-stats { display: flex; flex-direction: column-reverse; gap: 15px; position: relative; z-index: 1; } .stat-item { background: rgba(0, 0, 0, 0.3); padding: 12px; border-radius: 8px; } .stat-label { display: block; font-size: 0.8rem; opacity: 0.7; margin-bottom: 5px; } .stat-value { font-weight: 700; font-size: 1.1rem; } .stat-value.success { color: var(--secondary); } .stat-value.accent { color: #FFA726; } /* Адаптивность */ @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stats-year-toggle { padding: 15px; } .stats-year-toggle h3 { font-size: 1rem; } } /* Анимация при открытии */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .stats-year-content .stats-grid { animation: fadeIn 0.4s ease forwards; } /* Стиль для матчей с нулевым счётом */ .score.zero-score { background-color: #5d0000!important; /* Красный фон */ color: white!important; } @media (max-width: 576px) { .statistic .container{ padding: 0!important; } .date-picker-container, .line{ margin-left: 20px!important; text-align: left; } .statistic h1, h2{ margin-left: 20px; } .statistic p{ margin-left: 20px; } } .date-picker-container { margin: 20px 0; max-width: 300px; } .date-picker-container label { display: block; margin-bottom: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.8); font-size: 20px; } #datePicker { width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 15px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(5px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); cursor: pointer; } /* Стили для календаря */ .flatpickr-calendar { background: #121212 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; font-family: 'Montserrat', sans-serif !important; } .flatpickr-day.selected { background: #1ad389 !important; border-color: #1ad389 !important; } .flatpickr-current-month { color: #1ad389; } span.flatpickr-weekday { color: rgb(255 255 255 / 50%); } .flatpickr-day { color: #838383; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: #37453f; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: #ffffff; } .flatpickr-day.today { border-color: #1ad389; } #match-results {display: flex; flex-direction: column;}