@charset "UTF-8"; /* inter-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 400; src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: italic; font-weight: 400; src: url("/fonts/inter-v20-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 500; src: url("/fonts/inter-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 700; src: url("/fonts/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /*** The new CSS reset - version 1.11 (last updated 20.9.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { display: block; width: 100%; height: 100%; border-style: none; } ul, ol, li { margin: 0; padding: 0; list-style: none; } a { display: block; text-decoration: none; font-style: normal; color: inherit; cursor: pointer; background-color: transparent; } body { margin: 0px; padding: 0px; } h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; } html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; cursor: pointer; border: none; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } :root { /* ========================== Цвета и фоны ========================== */ --wrapper-bg-color: linear-gradient(10deg, #b748ab99 -72.68%, #0000 30.08%), linear-gradient(189deg, #b748abb3 -30.14%, #0d0d0d 20.61%); --primary-color: #f7f9fc; --description-color: #626262; --accent-color: #b748ab; --header-bg-color: #0d0d0d; --gold-color: #ffc979; --tag-color: #004686; --white-text-color: #f7f9fc; --border-card-color: #e7edf3; --title-section-color: #ffffff; --section-title-border-color: #cdae72; --side-title-color: #0c3153; --footer-bg-color: #001a31; --border-footer-color: rgba(231, 237, 243, 0.25); --side-feed-bg-color: #f7f7f7; --card-date-bg-color: #f7f9fc; --card-date-color: #424242; --video-time-color: #ffffff; --video-time-bg-color: #424242; --video-play-btn-bg-color: #b748ab; --btn-1-color: #d0021b; --transition: 0.25s ease-in-out; --card-border-radius: 8px; /* ========================== Отступы ========================== */ --gap-min: 8px; --gap-basic: 16px; --gap-med: 24px; /* ========================== Таблицы ========================== */ --table-bg-color: #171717; --table-header-bg-color: #b748ab; --table-border-color: rgb(108, 108, 108); --table-pos-color: #b748ab; --table-pos-bg-color: #171717; /* ========================== Текстовые элементы (десктоп) ========================== */ --font-size-xxs: 10px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-xxl: 32px; --font-size-xxxl: 40px; --line-height-xxs: 12px; --line-height-xs: 16px; --line-height-sm: 20px; --line-height-md: 24px; --line-height-lg: 32px; --line-height-xl: 40px; --line-height-xxl: 48px; --line-height-xxxl: 56px; } /* Планшеты: 480–768px */ /* Мобильные: 0–480px */ body { font-family: "Inter", sans-serif; font-size: var(--font-size-sm); line-height: var(--line-height-sm); color: var(--primary-color); } a { -webkit-transition: color var(--transition); -moz-transition: color var(--transition); transition: color var(--transition); } a:hover { color: var(--gold-color); } a:focus { color: var(--gold-color); } .wrapper-global { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; min-height: 100vh; background: var(--wrapper-bg-color); } .container { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .header { padding: 8px 0; z-index: 999; background-color: var(--header-bg-color); } .header__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; } .header--sticky { position: -webkit-sticky; position: sticky; top: 0; } .header-logo { height: 24px; width: 24px; } .header__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 16px; } .header__item { display: inline-block; } .header__link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; color: var(--white-text-color); font-size: 12px; text-transform: uppercase; font-weight: 600; border-bottom: 3px solid transparent; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; padding-bottom: 8px; margin-top: 8px; -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .header__link:hover { border-bottom: 3px solid var(--gold-color); } .header__link--active { color: var(--accent-color); border-bottom: 3px solid var(--gold-color); } .burger-toggle { display: block; background: none; outline: none; border: none; width: 24px; height: 24px; padding: 0; } .nav__list { display: none; } .burger-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 18px; background: var(--header-bg-color); z-index: 999; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .burger-wrapper__top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; } .burger-wrapper.is-open { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .mob-menu__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; gap: 18px; margin-top: 18px; -webkit-flex-wrap: wrap; flex-wrap: wrap; height: 90%; } .mob-menu__link { color: rgb(255, 255, 255); font-weight: 600; font-size: 16px; text-transform: uppercase; border-bottom: 3px solid transparent; } .mob-menu__link:hover { color: var(--gold-color); text-decoration: underline; } :root { --color-dark: #111; /* фон шапки */ --color-white: #fff; /* базовый текст */ --color-accent: orange; } /* утилита для скрытого текста */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* когда меню открыто — блокируем прокрутку (JS может добавить padding-right) */ .no-scroll { overflow: hidden; } .header__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; gap: var(--gap-basic); } .header__logo-link .header__logo { display: block; height: 24px; } /* список */ .header__link:hover { color: var(--accent-color); } .header__link.is-active { color: var(--accent-color); } /* Бургер */ .header__burger { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 5px; width: 44px; height: 44px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; background: transparent; border: 0; cursor: pointer; z-index: 1000; } .header__burger-bar { width: 24px; height: 2px; background: var(--primary-color); -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, -webkit-transform 0.25s ease; transition: opacity 0.25s ease, background-color 0.25s ease, -webkit-transform 0.25s ease; -moz-transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease, -moz-transform 0.25s ease; transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease; transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease, -webkit-transform 0.25s ease, -moz-transform 0.25s ease; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; transform-origin: center; will-change: transform, opacity; } /* Side-drawer */ .header__nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(50vw, 200px); background: var(--color-dark); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; -moz-transition: transform 0.25s ease, -moz-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease, -moz-transform 0.25s ease; padding: 64px 16px 16px; -webkit-box-shadow: -6px 0 18px rgba(0, 0, 0, 0.35); box-shadow: -6px 0 18px rgba(0, 0, 0, 0.35); z-index: 999; overflow-y: auto; } /* мобильный список в столбик */ .header__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; } .header__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; } .header__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.46); opacity: 0; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 998; pointer-events: none; /* по умолчанию не кликается */ } .header__overlay.is-visible { opacity: 1; pointer-events: auto; } /* Состояние "открыто" */ .header--menu-open .header__nav { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* крестик — используем nth-of-type, чтобы не зависеть от sr-only */ .header--menu-open .header__burger .header__burger-bar:nth-of-type(2) { -webkit-transform: translateY(7px) rotate(45deg); -moz-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } .header--menu-open .header__burger .header__burger-bar:nth-of-type(3) { opacity: 0; } .header--menu-open .header__burger .header__burger-bar:nth-of-type(4) { -webkit-transform: translateY(-7px) rotate(-45deg); -moz-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } /* Десктоп */ .main { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; flex: 1; } .page-wrapper__header { padding: 16px 0; background: -webkit-gradient(linear, left top, left bottom, from(rgb(13, 13, 13)), to(rgba(183, 72, 171, 0.35))), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; background: -webkit-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; background: -moz-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; background: linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; } .page-wrapper__header-inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .page-wrapper__post { padding: 16px 0; } .block-more__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .page-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .page-head { padding: 16px 0; background: -webkit-gradient(linear, left top, left bottom, from(rgb(13, 13, 13)), to(rgba(183, 72, 171, 0.15))), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; background: -webkit-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.15)), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; background: -moz-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.15)), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; background: linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.15)), url("https://mlstv.ca/assets/img/88ed486e47cc47b8be638c2fa834da03.png") no-repeat bottom/cover; } .page-head__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .section { padding-top: 8px; padding-bottom: 8px; } .section__head { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: 16px; } .section__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; } .card-category { font-size: 10px; padding: 4px 8px; background-color: var(--tag-color); border-radius: var(--card-border-radius); color: var(--white-text-color); } .card-date { background-color: var(--card-date-bg-color); margin: 0; font-size: var(--font-size-xxs); line-height: var(--line-height-xxs); font-weight: 500; padding: 2px 6px; border-radius: 12px; color: var(--card-date-color); } .card-date--dark { color: var(--description-color); } .card-date__on-card { position: absolute; bottom: 16px; left: 16px; } .video-time { position: absolute; top: 8px; right: 8px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; width: auto; /* можно фиксированную ширину, если нужно */ background-color: var(--video-time-bg-color); color: var(--video-time-color); padding: 2px 4px; /* оставляем только горизонтальный padding */ font-size: var(--font-size-xxs); line-height: var(--line-height-xxs); font-weight: 500; border-radius: 4px; } .img-contain { -o-object-fit: contain; object-fit: contain; } .img-cover { -o-object-fit: cover; object-fit: cover; } .versus__text { font-size: 18px; text-transform: uppercase; font-weight: 700; color: var(--accent-color); } .card-link { height: 100%; color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .card-link:hover { color: var(--gold-color); } .card-link:focus { color: var(--gold-color); } .live-icon { background: #dc0000; color: rgb(255, 255, 255); font-size: var(--font-size-xxs); line-height: var(--line-height-xxs); font-weight: 500; padding-left: 4px; padding-right: 4px; padding-bottom: 2px; padding-top: 2px; border-radius: 4px; text-transform: uppercase; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; align-items: baseline; line-height: normal; } .live-icon::before { content: "•"; font-weight: 400; /* полужирная точка */ } .post-parag { font-size: 11px; } .title-limit--1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .title-limit--2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .title-limit--3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .title-section { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; } .title-section__text { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); font-weight: 700; text-transform: uppercase; color: var(--title-section-color); } .title-section__icon { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; background: #b748ab; border-radius: 4px; height: 16px; width: 16px; } .title-page { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; } .title-page__text { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); font-weight: 700; text-transform: uppercase; color: var(--title-section-color); } .title-page__icon { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; background: #b748ab; border-radius: 4px; height: 16px; width: 16px; } .title-video-post { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); font-weight: 700; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; text-transform: uppercase; color: var(--title-section-color); } .title-video-post::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background: #b748ab; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: var(--card-border-radius); } .title-hero-feed { font-weight: 400; font-size: var(--font-size-sm); line-height: var(--line-height-sm); } .title-hero-feed--main { font-size: var(--font-size-xl); line-height: var(--line-height-xl); font-weight: 500; } .mp-players__card-title { font-size: 12px; font-weight: 400; } .footer-nav__title { all: unset; gap: 16px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; cursor: pointer; font-size: 16px; font-weight: 600; text-transform: uppercase; } .title-article { color: var(--accent-color); text-transform: uppercase; font-size: 16px; font-weight: 600; } .title-news { font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: 400; } .title-videos { font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: 400; } .post-article__title { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); font-weight: 700; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; text-transform: uppercase; color: var(--title-section-color); } .title-aside { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; } .title-aside__text { font-size: var(--font-size-xl); line-height: var(--line-height-xl); font-weight: 700; text-transform: uppercase; color: var(--title-section-color); } .title-aside__icon { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; background: #b748ab; border-radius: 4px; height: 16px; width: 16px; } .subtitle-section { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; } .subtitle-section__text { font-size: var(--font-size-xl); line-height: var(--line-height-xl); font-weight: 700; text-transform: uppercase; color: var(--title-section-color); } .subtitle-section__icon { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; background: #b748ab; border-radius: 4px; height: 16px; width: 16px; } .btn-1 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 6px 16px; font-size: var(--font-size-xs); line-height: var(--line-height-xs); text-transform: uppercase; background: var(--accent-color); color: var(--white-text-color); border-radius: 66px; -webkit-transition: background 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out; transition: background 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out; -moz-transition: filter 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out; transition: filter 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out; transition: filter 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out; } .btn-1:hover { -webkit-filter: brightness(110%); filter: brightness(110%); color: var(--gold-color); } .video-play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 4px; height: 32px; width: 32px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; overflow: hidden; -webkit-transition: -webkit-filter 0.25s ease-in-out; transition: -webkit-filter 0.25s ease-in-out; -moz-transition: filter 0.25s ease-in-out; transition: filter 0.25s ease-in-out; transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out; } .video-play-btn--sm { height: 36px; width: 36px; } .video-play-btn:hover { -webkit-filter: contrast(130%); filter: contrast(130%); } .read-more-btn { font-size: var(--font-size-xs); line-height: var(--line-height-xs); position: absolute; bottom: 16px; right: 16px; } .breadcrumbs__list { list-style: none; padding: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .breadcrumbs__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; } .breadcrumbs__item::after { content: "/"; margin: 0 5px; } .breadcrumbs__item:last-child::after { content: ""; } .breadcrumbs__link { text-decoration: none; color: var(--primary-color); } .breadcrumbs__link:hover { text-decoration: underline; } .breadcrumbs__link--active { font-weight: 600; color: var(--gold-color); pointer-events: none; text-decoration: underline; } .footer { padding-top: 16px; padding-bottom: 16px; } .footer__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; } .footer__top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .footer__center { display: grid; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: var(--gap-basic); grid-template-columns: auto; border-top: 1px solid rgba(108, 108, 108, 0.4); border-bottom: 1px solid rgba(108, 108, 108, 0.4); padding: 16px 0; } .footer__info { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; justify-items: center; -webkit-align-content: center; align-content: center; gap: var(--gap-basic); } .footer__info-text { text-align: center; font-size: 10px; } .footer__menu { display: grid; gap: var(--gap-basic); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; justify-items: center; } .footer__bot { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .footer-logo { height: 72px; width: 72px; } .footer-logo__img { -o-object-fit: contain; object-fit: contain; } .footer-nav { display: grid; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; width: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; justify-items: center; } .footer-nav__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; list-style: none; padding: 0; margin: 16px; max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); row-gap: var(--gap-basic); } .footer-nav[open] .footer-nav__list { max-height: 500px; opacity: 1; } .footer-nav__arrow { width: 12px; height: 12px; -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .footer-nav[open] .footer-nav__arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .footer-nav__link { text-decoration: none; color: var(--primary-color); font-size: 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; } .footer-nav__link:hover { color: var(--gold-color); text-decoration: underline; } .footer-copyrights { font-size: 11px; } .slider-container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; max-width: 100%; /* Максимальная ширина контейнера */ /* padding: 0 20px; Отступы по краям для мобильных устройств */ position: relative; } .swiper-button-next, .swiper-button-prev { margin: 0; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 30px; /* ширина кнопки */ height: 30px; /* высота кнопки */ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; z-index: 10; } /* смещение за края контейнера */ .swiper-button-prev { left: -15px; /* половина ширины кнопки, чтобы симметрия */ } .swiper-button-next { right: -15px; /* то же самое с другой стороны */ } .swiper-button-prev::after, .swiper-button-next::after { content: ""; font-size: 0; /* отключаем стандартные иконки */ width: 30px; /* ширина контейнера */ height: 30px; /* высота контейнера */ -webkit-background-size: cover; background-size: cover; /* SVG растянется */ background-repeat: no-repeat; } /* левая стрелка */ .swiper-button-prev::after { background-image: url("data:image/svg+xml;utf8,"); } /* правая стрелка */ .swiper-button-next::after { background-image: url("data:image/svg+xml;utf8,"); } .news-feed__card { height: 100%; } .news-feed__link { display: grid; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; grid-template-columns: 3fr 2fr; padding: 16px 0; border-style: solid; border-bottom-width: 1px; border-left-width: 0; border-color: rgba(108, 108, 108, 0.4); border-right-width: 0; border-top-width: 0; } .news-feed__link--main { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; border-style: solid; border-bottom-width: 1px; border-left-width: 0; border-color: rgba(108, 108, 108, 0.4); border-right-width: 0; border-top-width: 0; } .news-feed__imgbox { height: 100%; position: relative; overflow: hidden; border-radius: var(--card-border-radius); } .news-feed__content { display: grid; -webkit-align-content: center; align-content: center; justify-items: start; height: 100%; width: 100%; gap: var(--gap-basic); } .news-feed__content--main { padding: 16px 0; } .news-feed__list { display: grid; row-gap: 0; -webkit-column-gap: var(--gap-basic); -moz-column-gap: var(--gap-basic); column-gap: var(--gap-basic); } .news-feed__item { height: 100%; min-height: 120px; grid-column: span 6; } .news-feed__item:nth-child(1) { grid-column: span 6; height: 340px; } .upcoming-matches__card { display: grid; gap: var(--gap-basic); background: -webkit-gradient(linear, left top, right top, from(rgba(183, 72, 171, 0.6)), color-stop(rgba(23, 23, 23, 0.5)), color-stop(rgba(23, 23, 23, 0.5)), to(rgba(183, 72, 171, 0.7019607843))); background: -webkit-linear-gradient(left, rgba(183, 72, 171, 0.6), rgba(23, 23, 23, 0.5), rgba(23, 23, 23, 0.5), rgba(183, 72, 171, 0.7019607843)); background: -moz-linear-gradient(left, rgba(183, 72, 171, 0.6), rgba(23, 23, 23, 0.5), rgba(23, 23, 23, 0.5), rgba(183, 72, 171, 0.7019607843)); background: linear-gradient(to right, rgba(183, 72, 171, 0.6), rgba(23, 23, 23, 0.5), rgba(23, 23, 23, 0.5), rgba(183, 72, 171, 0.7019607843)); padding: 16px; border-radius: var(--card-border-radius); } .upcoming-matches__card-top { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .upcoming-matches__card-match { display: grid; grid-template-columns: 2fr 1fr 2fr; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .upcoming-matches__team { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .upcoming-matches__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; color: var(--white-text-color); -webkit-transition: color 0.25s ease; -moz-transition: color 0.25s ease; transition: color 0.25s ease; } .upcoming-matches__team-link:hover { color: var(--gold-color); } .upcoming-matches__team-link:focus { color: var(--gold-color); } .upcoming-matches__team-figure { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; text-align: center; } .upcoming-matches__team-logo { height: 55px; width: 55px; } .upcoming-matches__versus { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .upcoming-matches__card-bot { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .video-feed { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: var(--gap-basic); grid-row-gap: var(--gap-basic); } .video-feed__card { height: 100%; } .video-feed__link { height: 100%; color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .video-feed__link:hover { color: var(--gold-color); } .video-feed__link:focus { color: var(--gold-color); } .video-feed__imgbox, .video-feed__img { height: 100%; -webkit-filter: brightness(0.91); filter: brightness(0.91); -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .video-feed__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; position: absolute; bottom: 0; left: 0; width: 100%; padding: 16px; background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.8)), color-stop(70%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%); } .video-feed__card { position: relative; overflow: hidden; border-radius: 8px; } .video-feed__thumbnail { position: relative; } .video-feed__thumbnail img { display: block; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .video-feed__duration { position: absolute; bottom: 8px; right: 8px; padding: 2px 6px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.7); border-radius: 4px; } .video-feed__title { position: absolute; bottom: 8px; left: 8px; margin: 0; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } .video-feed__play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 32px; color: rgba(255, 255, 255, 0.9); pointer-events: none; } .video-feed__item { height: 280px; grid-column: span 4; } .video-feed__item:nth-child(1) { grid-column: span 4; } .video-feed__item:nth-child(2) { grid-column: span 4; } .video-feed__item:nth-child(3) { grid-column: span 4; } .vid-play-btn { background: var(--primary-color); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 48px; color: rgba(255, 255, 255, 0.9); pointer-events: none; border-radius: 50%; height: 64px; width: 64px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .mp-players__card-imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; max-height: 280px; position: relative; overflow: hidden; border-radius: var(--card-border-radius); background: -webkit-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -webkit-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, rgba(13, 13, 13, 0.3019607843) 32.61%); background: -moz-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -moz-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, rgba(13, 13, 13, 0.3019607843) 32.61%); background: linear-gradient(10deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), linear-gradient(189deg, rgba(183, 72, 171, 0.7019607843) -30.14%, rgba(13, 13, 13, 0.3019607843) 32.61%); } .mp-players__card-img { -o-object-fit: contain; object-fit: contain; max-height: 240px; -o-object-position: bottom; object-position: bottom; -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .mp-players__card-info { justify-items: center; position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 14px; padding-right: 14px; padding-left: 14px; padding-bottom: 14px; background: rgba(13, 13, 13, 0.8); text-align: center; } .mp-players__card-content-bot { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 16px 0; } .mp-teams__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .mp-teams__link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .mp-teams__card { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .mp-teams__imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; max-width: 96px; aspect-ratio: 1/1; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; overflow: hidden; } .mp-teams__img { -o-object-fit: contain; object-fit: contain; } .mp-teams__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; } .clubs { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .clubs__list { row-gap: 24px; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; grid-template-columns: 1fr; } .clubs-card { background: -webkit-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -webkit-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: -moz-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -moz-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: linear-gradient(10deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), linear-gradient(189deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; border-radius: 6px; overflow: hidden; row-gap: 16px; } .clubs-card__logo-imgbox { height: 112px; width: 112px; } .clubs-card__logo-imgbox-img { -o-object-fit: contain; object-fit: contain; } .clubs-card__logo-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; row-gap: 12px; color: rgb(255, 255, 255); font-weight: 800; font-size: 18px; text-align: center; } .clubs-card__logo-link:hover { color: rgb(255, 201, 121); -webkit-filter: contrast(115%); filter: contrast(115%); } .clubs-card__info { height: 100%; row-gap: 12px; } .clubs-card__info-item { text-align: center; } .clubs-card__info-title { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; margin-bottom: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; text-align: center; } .clubs-card__info-value { color: rgb(183, 72, 171); font-weight: 700; text-transform: none; font-size: 13px; } .clubs-card__right { row-gap: 24px; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 12px 0; margin-top: 12px; grid-column: 1/3; border-style: solid; border-bottom-width: 1px; border-left-width: 0; border-right-width: 0; border-top-width: 1px; border-color: rgba(108, 108, 108, 0.5); } .clubs-card__players { grid-template-columns: 1fr 1fr 1fr; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } .clubs-card__players-item { display: grid; } .clubs-card__players-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; color: rgb(255, 255, 255); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; row-gap: 2px; } .clubs-card__players-link:hover { color: rgb(255, 201, 121); -webkit-filter: contrast(115%); filter: contrast(115%); } .clubs-card__players-pic { height: 72px; width: 72px; } .clubs-card__players-pic-img { -o-object-fit: cover; object-fit: cover; } .clubs-card__players-name { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .clubs-card__players-name-1 { font-weight: 700; font-size: 16px; } .clubs-card__players-name-2 { font-size: 12px; font-weight: 600; } .clubs-card__right-title { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .clubs-card__right-title-text { text-transform: uppercase; font-weight: 700; color: rgb(255, 201, 121); } .clubs-card-top { display: grid; grid-template-columns: 1fr 1fr; padding-top: 16px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; position: relative; padding-left: 16px; padding-right: 16px; } .clubs-card-bot { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; grid-template-columns: 1fr 1fr 2fr; /* border-style: solid; */ border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 1px; border-color: rgba(108, 108, 108, 0.5); margin-left: 16px; margin-right: 16px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid rgba(108, 108, 108, 0.5); } .clubs-card__profile { text-transform: uppercase; font-size: 12px; padding-left: 12px; padding-right: 12px; } .clubs-card__follow { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; position: absolute; top: 0; right: 12px; -webkit-filter: contrast(99%); filter: contrast(99%); } .clubs-card__follow:hover { -webkit-filter: contrast(125%); filter: contrast(125%); } .clubs-card__follow-img { height: 32px; width: 32px; -o-object-fit: contain; object-fit: contain; } .live-page { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .live-page__list { display: grid; gap: var(--gap-basic); grid-template-columns: repeat(1, 1fr); } .live__card { padding: 16px; gap: var(--gap-basic); border-radius: var(--card-border-radius); background: -webkit-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -webkit-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: -moz-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -moz-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: linear-gradient(10deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), linear-gradient(189deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); display: grid; grid-template-columns: auto; } .live__vid { display: none; } .live__vid-link { border-radius: var(--card-border-radius); overflow: hidden; } .live__vid-imgbox { height: 100%; width: 100%; aspect-ratio: 16/9; position: relative; } .live__content { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; row-gap: var(--gap-basic); } .live__content-top { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .live__content-center { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--gap-basic); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .live__content-bot { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .live__team { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .live__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; row-gap: var(--gap-min); } .live__team-imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; aspect-ratio: 1; max-width: 48px; } .live__team-img { -o-object-fit: contain; object-fit: contain; } .live__team-content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; } .live__team-name { font-size: var(--font-size-sm); line-height: var(--line-height-sm); /* ограничиваем строки */ display: -webkit-box; -webkit-line-clamp: 2; /* максимум 2 строки */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.6em; /* резервируем место под 2 строки */ } .live__versus { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .videos { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .videos__list { display: grid; grid-template-columns: auto; gap: var(--gap-basic); } .videos__link { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .videos__imgbox { border-radius: var(--card-border-radius); overflow: hidden; position: relative; aspect-ratio: 16/9; } .videos__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .news { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .news__list { display: grid; grid-template-columns: auto; gap: var(--gap-basic); } .news__link { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .news__imgbox { border-radius: var(--card-border-radius); overflow: hidden; position: relative; aspect-ratio: 16/9; } .news__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; background: var(--table-bg-color); border-radius: var(--card-border-radius); } /* когда таблица именно со скроллом */ .table-wrap .table { width: -webkit-max-content; width: -moz-max-content; width: max-content; /* важный момент */ min-width: 100%; } .table { font-size: 12px; width: 100%; border-collapse: collapse; border-spacing: 0; position: relative; /* заголовок */ /* тело */ /* фиксируем только первую колонку */ } .table__head { background: var(--table-header-bg-color); } .table--sticky-head th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; } .table__row { position: relative; } .table__caption { position: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 2; font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; } .table__body .table__row { border-bottom: 1px solid var(--table-border-color); } .table__body .table__row:hover { -webkit-transition: color 0.3s, background 0.3s, border-color 0.3s; -moz-transition: color 0.3s, background 0.3s, border-color 0.3s; transition: color 0.3s, background 0.3s, border-color 0.3s; } .table__head .table__row .table__cell:first-child, .table__body .table__row .table__cell:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; text-align: center; background: var(--table-header-bg-color); } .table__body .table__row:last-child { border-bottom: none; } .table__cell--head { text-align: left; font-weight: 600; padding: 8px; position: relative; } .table__row:not(.table__row--empty) .table__cell { padding: 8px; vertical-align: middle; } .table--sticky-head .table__head .table__cell--head { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; } .table .table__cell--left { text-align: left; } .table .table__cell--right { text-align: right; } .table .table__cell--center { text-align: center; } /* «командная» ячейка */ .table-team { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; height: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; flex: 1; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; min-width: 0; } .table-team:hover .table-team__name { text-decoration: underline; color: var(--gold-color); } .table-team__logo { width: 28px; height: 28px; padding: 4px; -o-object-fit: contain; object-fit: contain; border-radius: 4px; } .table-team__name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 36ch; } .table__row-header { border-bottom: 0px; } .table__cell-pts { color: var(--gold-color); background: #272727; } .hero { padding-top: 16px; } .hero-feed { background: -webkit-gradient(linear, left top, right top, from(rgba(183, 72, 171, 0.6)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), to(rgba(183, 72, 171, 0.7019607843))); background: -webkit-linear-gradient(left, rgba(183, 72, 171, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(183, 72, 171, 0.7019607843)); background: -moz-linear-gradient(left, rgba(183, 72, 171, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(183, 72, 171, 0.7019607843)); background: linear-gradient(to right, rgba(183, 72, 171, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(183, 72, 171, 0.7019607843)); padding: 16px; border-radius: var(--card-border-radius); } .hero-feed__list { display: grid; gap: var(--gap-basic); } .hero-feed__card { position: relative; overflow: hidden; height: 100%; border-radius: var(--card-border-radius); } .hero-feed__card--main { position: relative; overflow: hidden; height: 100%; border-radius: var(--card-border-radius); } .hero-feed__link { display: grid; grid-template-columns: 3fr 2fr; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; position: relative; overflow: hidden; height: 100%; gap: var(--gap-basic); color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .hero-feed__link:hover { color: var(--gold-color); } .hero-feed__link:focus { color: var(--gold-color); } .hero-feed__link--main { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; height: 100%; color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .hero-feed__link--main:hover { color: var(--gold-color); } .hero-feed__link--main:focus { color: var(--gold-color); } .hero-feed__imgbox { position: absolute; height: 100%; width: 100%; } .hero-feed__imgbox--secondary { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: var(--card-border-radius); } .hero-feed__img { height: 100%; -webkit-filter: brightness(0.91); filter: brightness(0.91); -o-object-position: top; object-position: top; } .hero-feed__content { display: grid; -webkit-align-content: center; align-content: center; justify-items: start; height: 100%; width: 100%; gap: var(--gap-basic); } .hero-feed__content--main { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; bottom: 0; left: 0; width: 100%; padding: 16px; margin: 16px; background: rgba(0, 0, 0, 0.85); border-radius: var(--card-border-radius); z-index: 2; } .hero-feed__item { height: 130px; grid-column: span 6; } .hero-feed__item:nth-child(1) { grid-column: span 6; height: 340px; } .video-post { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .video-post__header { background: var(--header-bg-color); } .video-post__imgbox { height: 100%; } .video-post__imgbox--main { height: 300px; grid-column: span 6; } .video-post__list { display: grid; gap: var(--gap-basic); } .video-post__item { height: 144px; display: none; grid-column: span 6; } .video-post__item:nth-child(1) { display: block; grid-column: span 6; height: auto; } .video-post__link--main { border-radius: var(--card-border-radius); overflow: hidden; height: 100%; color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); position: relative; } .video-post__link--main:hover { color: var(--gold-color); } .video-post__link--main:focus { color: var(--gold-color); } .video-post__card { overflow: hidden; height: 100%; border-radius: var(--card-border-radius); } .video-post__card--main { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; row-gap: var(--gap-basic); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; overflow: hidden; height: 100%; border-radius: var(--card-border-radius); } .video-post__slider-block { display: block; } .video-post__slider-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; } .video-post__slider-list-item { height: 144px; } .video-post-article { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); border-radius: var(--card-border-radius); } .video-post-article__section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .video-post-wrapper { gap: 0; } .title-video-post__wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .hero { padding-top: 16px; } .hero-feed { background: -webkit-gradient(linear, left top, right top, from(rgba(183, 72, 171, 0.6)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), to(rgba(183, 72, 171, 0.7019607843))); background: -webkit-linear-gradient(left, rgba(183, 72, 171, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(183, 72, 171, 0.7019607843)); background: -moz-linear-gradient(left, rgba(183, 72, 171, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(183, 72, 171, 0.7019607843)); background: linear-gradient(to right, rgba(183, 72, 171, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(183, 72, 171, 0.7019607843)); padding: 16px; border-radius: var(--card-border-radius); } .hero-feed__list { display: grid; gap: var(--gap-basic); } .hero-feed__card { position: relative; overflow: hidden; height: 100%; border-radius: var(--card-border-radius); } .hero-feed__card--main { position: relative; overflow: hidden; height: 100%; border-radius: var(--card-border-radius); } .hero-feed__link { display: grid; grid-template-columns: 3fr 2fr; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; position: relative; overflow: hidden; height: 100%; gap: var(--gap-basic); color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .hero-feed__link:hover { color: var(--gold-color); } .hero-feed__link:focus { color: var(--gold-color); } .hero-feed__link--main { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; height: 100%; color: var(--white-text-color); -webkit-transition: var(--transition); -moz-transition: var(--transition); transition: var(--transition); } .hero-feed__link--main:hover { color: var(--gold-color); } .hero-feed__link--main:focus { color: var(--gold-color); } .hero-feed__imgbox { position: absolute; height: 100%; width: 100%; } .hero-feed__imgbox--secondary { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: var(--card-border-radius); } .hero-feed__img { height: 100%; -webkit-filter: brightness(0.91); filter: brightness(0.91); -o-object-position: top; object-position: top; } .hero-feed__content { display: grid; -webkit-align-content: center; align-content: center; justify-items: start; height: 100%; width: 100%; gap: var(--gap-basic); } .hero-feed__content--main { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; bottom: 0; left: 0; width: 100%; padding: 16px; margin: 16px; background: rgba(0, 0, 0, 0.85); border-radius: var(--card-border-radius); z-index: 2; } .hero-feed__item { height: 130px; grid-column: span 6; } .hero-feed__item:nth-child(1) { grid-column: span 6; height: 340px; } .calendar { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .calendar__top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: var(--gap-basic); -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .calendar__month { font-size: 24px; } .calendar__month:hover { text-decoration: underline; } .calendar__year { font-size: 24px; color: var(--accent-color); } .calendar__year:hover { text-decoration: underline; } .calendar__datepick { height: 24px; width: 24px; } .calendar-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; } .calendar-list__card { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: var(--accent-color); -webkit-transition: color var(--transition); -moz-transition: color var(--transition); transition: color var(--transition); row-gap: 8px; padding: 8px; background: #171717; border-radius: var(--card-border-radius); } .calendar-list__card:hover { color: var(--gold-color); } .calendar-list__weekday { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; color: var(--primary-color); row-gap: var(--gap-basic); } .calendar-list__weekday-value { text-transform: uppercase; } .calendar-list__daynumber { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .schedule { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .schedule-list { display: grid; gap: var(--gap-basic); grid-template-columns: 1fr; } .schedule__card { display: grid; gap: var(--gap-basic); background: -webkit-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -webkit-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: -moz-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -moz-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: linear-gradient(10deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), linear-gradient(189deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); padding: 16px; border-left: 2px solid; border-color: var(--accent-color); border-bottom-right-radius: var(--card-border-radius); border-top-right-radius: var(--card-border-radius); -webkit-transition: border-color var(--transition); -moz-transition: border-color var(--transition); transition: border-color var(--transition); } .schedule__card:hover { border-color: var(--gold-color); } .schedule__card-top { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .schedule__card-match { display: grid; grid-template-columns: 2fr 1fr 2fr; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .schedule__team { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .schedule__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: var(--white-text-color); -webkit-transition: color 0.25s ease; -moz-transition: color 0.25s ease; transition: color 0.25s ease; gap: var(--gap-min); text-align: center; } .schedule__team-link:hover { color: var(--gold-color); } .schedule__team-link:focus { color: var(--gold-color); } .schedule__team-imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; aspect-ratio: 1; max-width: 48px; } .schedule__team-name { font-size: var(--font-size-sm); line-height: var(--line-height-sm); } .schedule__versus { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .schedule__card-bot { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .results { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .results-list { display: grid; gap: var(--gap-basic); grid-template-columns: 1fr; } .results__card { display: grid; gap: var(--gap-basic); background: -webkit-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -webkit-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: -moz-linear-gradient(80deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), -moz-linear-gradient(261deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); background: linear-gradient(10deg, rgba(183, 72, 171, 0.6) -72.68%, rgba(0, 0, 0, 0) 27.08%), linear-gradient(189deg, rgba(183, 72, 171, 0.7019607843) -30.14%, #171717 32.61%); padding: 16px; border-left: 2px solid; border-color: var(--accent-color); border-bottom-right-radius: var(--card-border-radius); border-top-right-radius: var(--card-border-radius); -webkit-transition: border-color var(--transition); -moz-transition: border-color var(--transition); transition: border-color var(--transition); } .results__card:hover { border-color: var(--gold-color); } .results__card-top { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .results__card-match { display: grid; gap: var(--gap-basic); grid-template-columns: 2fr 1fr 2fr; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .results__team { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .results__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: var(--white-text-color); -webkit-transition: color 0.25s ease; -moz-transition: color 0.25s ease; transition: color 0.25s ease; gap: var(--gap-min); text-align: center; } .results__team-link:hover { color: var(--gold-color); } .results__team-link:focus { color: var(--gold-color); } .results__team-imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; aspect-ratio: 1; max-width: 48px; } .results__versus { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .results__team-name { font-size: var(--font-size-sm); line-height: var(--line-height-sm); } .results__card-bot { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .card-match-score { display: grid; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; grid-template-columns: 1fr auto 1fr; background: #e8e8e8; border-radius: var(--card-border-radius); } .card-match-score__item { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 8px 8px; } .card-match-score__value { color: #171717; font-size: 20px; font-weight: 600; } .card-match-score__dots { font-size: 16px; font-weight: 600; color: rgba(181, 181, 181, 0.75); } .oteam-header { display: grid; grid-template-columns: auto; gap: var(--gap-basic); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .oteam-center { display: grid; gap: var(--gap-basic); } .oteam-logo { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: var(--gap-basic); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; } .oteam-logo__imgbox { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; gap: var(--gap-basic); font-size: 16px; } .oteam-logo__img { height: 144px; width: 144px; } .oteam-logo__name { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); font-weight: 500; } .oteam-stadium { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .oteam-stadium__imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); text-align: center; aspect-ratio: 16/9; border-radius: var(--card-border-radius); } .oteam-stadium__img { -o-object-fit: cover; object-fit: cover; border-radius: var(--card-border-radius); } .oteam-info { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: var(--gap-basic); background: rgba(13, 13, 13, 0.75); padding: 8px; border-radius: var(--card-border-radius); } .oteam-info__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; } .oteam-info__title { color: var(--primary-color); } .oteam-info__value { color: var(--accent-color); font-weight: 600; } .oteam-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-basic); border-radius: var(--card-border-radius); } .oteam-stats__item { background: rgba(13, 13, 13, 0.75); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: var(--card-border-radius); } .oteam-stats__title { font-size: 12px; color: var(--primary-color); text-transform: uppercase; } .oteam-stats__value { color: var(--accent-color); font-weight: 600; } .oteam-cups { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: var(--gap-basic); border-radius: var(--card-border-radius); } .oteam-cups__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: var(--card-border-radius); } .oteam-cups__imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: var(--gap-basic); } .oteam-cups__img { max-height: 40px; -o-object-fit: contain; object-fit: contain; } .oteam-cups__caption { color: var(--primary-color); } .page-content__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); background: #171717; padding: 16px; border-radius: var(--card-border-radius); } .oteam-section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .oteam-history__img { width: 720px; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; margin: 0 auto; border-radius: var(--card-border-radius); } .oteam-squad { display: grid; gap: var(--gap-basic); } .oteam-players { display: grid; -webkit-column-gap: var(--gap-basic); -moz-column-gap: var(--gap-basic); column-gap: var(--gap-basic); grid-template-columns: auto; } .oteam-scheme__img { -o-object-fit: contain; object-fit: contain; max-height: 240px; } .oteam-roster__header { padding: 8px 8px; border-radius: var(--card-border-radius); background: #222423; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: 8px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .oteam-roster__team { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; } .oteam-roster__team-logo { height: 24px; width: 24px; } .oteam-roster__descr { color: rgb(181, 181, 181); } .oteam-roster__number { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; width: 24px; height: 24px; font-size: 12px; font-weight: 600; color: #171717; background: #f7b5cd; border-radius: 50%; } .oteam-roster__pos { margin-left: auto; color: var(--gold-color); } .oteam-roster__player:hover { text-decoration: underline; } .oteam-lineup { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .oteam-roster__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .oteam-roster__list-item { gap: var(--gap-basic); padding: 8px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; border-bottom: 1px solid var(--table-border-color); } .oteam-col-2 { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .review-section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .stat-main-review { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .stat-main-review__label { text-align: center; font-weight: 600; font-size: 14px; color: var(--primary-color); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .stat-main-review__row { display: grid; gap: 8px; grid-template-columns: auto 1fr auto; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .stat-main-review__value { color: var(--gold-color); font-weight: 600; min-width: 34px; text-align: center; } .stat-main-review__lines { display: grid; grid-template-columns: repeat(2, 1fr); -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } .stat-main-review__line { height: 8px; background-color: #0c3153; } .stat-main-review__line:last-child { background: var(--accent-color); } .review-field__img { margin: 0 auto; max-width: 960px; max-height: 480px; border-radius: var(--card-border-radius); } .review-squads { display: grid; gap: var(--gap-basic); grid-template-columns: auto; } .review-top { background: -webkit-gradient(linear, left top, left bottom, from(rgb(13, 13, 13)), to(rgba(17, 17, 17, 0.65))), url("https://mlstv.ca/assets/img/063b16664902c16bd853c33280e80389.jpg") no-repeat top/cover; background: -webkit-linear-gradient(rgb(13, 13, 13), rgba(17, 17, 17, 0.65)), url("https://mlstv.ca/assets/img/063b16664902c16bd853c33280e80389.jpg") no-repeat top/cover; background: -moz-linear-gradient(rgb(13, 13, 13), rgba(17, 17, 17, 0.65)), url("https://mlstv.ca/assets/img/063b16664902c16bd853c33280e80389.jpg") no-repeat top/cover; background: linear-gradient(rgb(13, 13, 13), rgba(17, 17, 17, 0.65)), url("https://mlstv.ca/assets/img/063b16664902c16bd853c33280e80389.jpg") no-repeat top/cover; border-radius: 6px 6px 0px 0px; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .review-top__inner { padding-top: 24px; padding-right: 24px; padding-left: 24px; padding-bottom: 24px; justify-items: center; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .review-top-wrapper { background: -webkit-gradient(linear, left top, left bottom, from(rgb(13, 13, 13)), to(rgba(183, 72, 171, 0.35))), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; background: -webkit-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; background: -moz-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; background: linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .dgd { display: grid; } .dgd-cent { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .review-board { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: 16px; } .review-board__col1 { grid-template-columns: 2fr 1fr 2fr; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } .review-board__team { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; justify-items: center; } .review-board__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; font-weight: 700; font-size: 16px; color: rgb(255, 255, 255); gap: 12px; text-align: center; } .review-board__team-link:hover { color: rgb(255, 201, 121); } .review-board__team-logo { height: 42px; width: 42px; } .review-board__col2 { justify-items: center; } .review-board__status { background: #b748ab; font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 12px; } .review-board__versus { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .review-board__col3 { grid-template-columns: 2fr 1fr 2fr; -webkit-column-gap: 36px; -moz-column-gap: 36px; column-gap: 36px; } .review-board__match-info { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; row-gap: 16px; } .review-board__match-info-day-text { color: rgb(255, 201, 121); font-weight: 700; font-size: 13px; } .review-board__match-info-time-text { font-weight: 600; font-size: 12px; } .review-board__match-info-place-text { color: rgb(181, 181, 181); font-size: 12px; font-weight: 700; } .review-board__evt { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; row-gap: 8px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } .review-board__evt-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .review-board__evt-min { color: rgb(255, 255, 255); font-weight: 600; font-size: 12px; } .review-board__evt-player { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; color: rgb(183, 72, 171); font-weight: 700; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .review-board__evt-player:hover { color: rgb(255, 201, 121); text-decoration: underline; } .review-board__evt-icon { height: 18px; width: 18px; -o-object-fit: contain; object-fit: contain; } .dfx-end { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .dfx-start { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } .review-board__team--1 { padding-right: 24px; border-style: solid; border-top-width: 0; border-right-width: 6px; border-bottom-width: 0; border-left-width: 0; border-color: rgb(11, 172, 68); -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; } .review-board__team--2 { padding-left: 24px; border-style: solid; border-right-width: 0; border-bottom-width: 0; border-top-width: 0; border-left-width: 6px; border-color: rgb(198, 9, 59); -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } .review-board__score { /* padding-top: 12px; padding-bottom: 12px; */ } .review-board__score-item { padding: 8px; font-size: 24px; } .review-top-wrapper { background: -webkit-gradient(linear, left top, left bottom, from(rgb(13, 13, 13)), to(rgba(183, 72, 171, 0.35))), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; background: -webkit-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; background: -moz-linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; background: linear-gradient(rgb(13, 13, 13), rgba(183, 72, 171, 0.35)), url("https://mlstv.ca/assets/img/9949c0a739f94089e15cf1920ade5a5d.webp") no-repeat center/cover; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .review-board { row-gap: 12px; } .review-board__col1 { grid-template-columns: 2fr 1fr 2fr; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } .review-board__team { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; justify-items: center; } .review-board__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; font-weight: 700; font-size: 16px; color: rgb(255, 255, 255); gap: 12px; text-align: center; } .review-board__team-link:hover { color: rgb(255, 201, 121); } .review-board__team-logo { height: 42px; width: 42px; } .review-board__col2 { justify-items: center; } .review-board__status { background: #b748ab; font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 12px; } .review-board__versus { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .review-board__col3 { grid-template-columns: 2fr 1fr 2fr; -webkit-column-gap: 36px; -moz-column-gap: 36px; column-gap: 36px; } .review-board__match-info { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; row-gap: 6px; } .review-board__match-info-day-text { color: rgb(255, 201, 121); font-weight: 700; font-size: 13px; } .review-board__match-info-time-text { font-weight: 600; font-size: 12px; } .review-board__match-info-place-text { color: rgb(181, 181, 181); font-size: 12px; font-weight: 700; } .review-board__evt { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; row-gap: 8px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } .review-board__evt-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .review-board__evt-min { color: rgb(255, 255, 255); font-weight: 600; font-size: 12px; } .review-board__evt-player { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; color: rgb(183, 72, 171); font-weight: 700; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .review-board__evt-player:hover { color: rgb(255, 201, 121); text-decoration: underline; } .review-board__evt-icon { height: 18px; width: 18px; -o-object-fit: contain; object-fit: contain; } .dfx-end { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .dfx-start { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } .review-board__team--1 { padding-right: 24px; border-style: solid; border-top-width: 0; border-right-width: 6px; border-bottom-width: 0; border-left-width: 0; border-color: rgb(11, 172, 68); -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; } .review-board__team--2 { padding-left: 24px; border-style: solid; border-right-width: 0; border-bottom-width: 0; border-top-width: 0; border-left-width: 6px; border-color: rgb(198, 9, 59); -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; } .review-board__score { /* padding-top: 12px; padding-bottom: 12px; */ } .review-board__score-item { padding: 8px; font-size: 24px; } .m-timeline__row { display: grid; grid-template-columns: 6fr 1fr 6fr; border-style: solid; border-top-width: 0; border-right-width: 0; border-left-width: 0; border-color: rgba(108, 108, 108, 0.4); border-bottom-width: 1px; padding-top: 8px; padding-bottom: 8px; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } .m-timeline__row--bg { background: #424242; border-radius: 8px; } .m-timeline__row-colt1 { display: grid; justify-items: end; } .m-timeline__row-colt2 { display: grid; justify-items: start; } .m-timeline__evt { display: grid; justify-items: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; } .m-timeline__evt-link-icon { height: 16px; width: 16px; -o-object-fit: contain; object-fit: contain; } .m-timeline__pl-main { color: rgb(183, 72, 171); font-weight: 600; font-size: 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; } .m-timeline__pl-main:hover { color: rgb(255, 201, 121); text-decoration: underline; } .m-timeline__evt-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; } .m-timeline__col-time-item { display: grid; justify-items: center; background: #0d0d0d; border-radius: 6px; color: rgb(255, 201, 121); font-size: 12px; font-weight: 600; padding: 3px 6px; } .m-timeline__pl-sec { font-size: 12px; font-weight: 600; color: rgb(10, 132, 255); display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; } .m-timeline__pl-sec:hover { text-decoration: underline; color: rgb(255, 201, 121); } .m-timeline__evt-item--sec { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; } .m-timeline__evt-item--sec-icon { font-size: 11px; border-radius: 50%; background: #0a84ff; height: 16px; width: 16px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; font-weight: 600; } .m-timeline__evt-descr { font-size: 12px; font-weight: 500; font-style: italic; } .m-timeline__row--nobrdbot { border-bottom-width: 0; } .review-lineups__imgbox { border-radius: 4px; overflow: hidden; } .review-squads { grid-template-columns: 1fr; gap: 24px; } [hidden] { display: none !important; } .pagination { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; align-items: stretch; /* fixed */ gap: var(--gap-min); margin-top: 0; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* чтобы не ломалось на мобилках */ } .pagination__link { text-decoration: none; font-size: var(--font-size-sm); line-height: var(--line-height-sm); padding: 8px 16px; color: var(--primary-color); border-radius: var(--card-border-radius); background-color: #171717; border: 1px solid var(--color-gray); display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; /* один раз, вместо двух */ -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; min-width: 40px; /* одинаковая ширина кнопок-номеров */ -webkit-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; -moz-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .pagination__link:hover { background-color: var(--accent-color); border-color: var(--color-primary); color: var(--color-white); } /* Prev/Next жирнее — ок */ .pagination__prev, .pagination__next { font-size: var(--font-size-sm); line-height: var(--line-height-sm); font-weight: 500; } /* Активная страница: поддержка и по классу, и по aria-current */ .pagination__page.active, .pagination__link[aria-current=page] { background-color: var(--accent-color); border-color: var(--color-primary); color: var(--color-white); pointer-events: none; } /* Disabled для через класс или aria-атрибут */ .pagination__link.is-disabled, .pagination__link[aria-disabled=true] { background-color: var(--color-light-gray); border-color: var(--color-gray); color: var(--color-gray); cursor: not-allowed; pointer-events: none; } /* Эллипсис между страницами (если используешь) */ .pagination__ellipsis { padding: 0 6px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--color-gray); } /* Аксессибельный фокус – удобно с клавиатуры */ .pagination__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Mobile: прячем текст у Prev/Next, оставляя иконку */ .contacts__inner { display: grid; grid-template-columns: auto; gap: var(--gap-basic); } .contacts__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .contacts__subsection { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .contacts__subsection-text { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .contacts__form-wrapper { max-width: 600px; margin: 0 auto; padding: 16px; border: 1px solid; border-color: rgba(108, 108, 108, 0.4); border-radius: var(--card-border-radius); } .contacts-form__title { font-size: var(--font-size-xl); line-height: var(--line-height-xl); margin-bottom: 16px; font-weight: 700; text-align: center; } /* Блок формы */ .contacts-form { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 16px; } .contacts-form__field { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .contacts-form__label { margin-bottom: 8px; font-weight: 500; } .contacts-form__input, .contacts-form__textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; } .contacts-form__input:focus, .contacts-form__textarea:focus { border-color: var(--accent-color); outline: none; } .contacts-form__btn { -webkit-align-self: flex-start; align-self: flex-start; } .contacts-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: var(--gap-basic); -webkit-flex-wrap: wrap; flex-wrap: wrap; } .contacts-list__link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: var(--gap-min); } .contacts-list__link-icon { width: 24px; height: 24px; } .post { display: grid; row-gap: var(--gap-basic); grid-template-columns: auto; border-bottom: 1px solid; border-color: rgba(108, 108, 108, 0.4); padding-bottom: 16px; } .post__col-3 { display: none; } .post__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .post-subsection { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; row-gap: var(--gap-basic); } .post-article { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .post-article__head { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .post-article__head-img { max-height: 480px; -o-object-fit: cover; object-fit: cover; aspect-ratio: 16/9; border-radius: var(--card-border-radius); } .post-article__img { -o-object-fit: cover; object-fit: cover; width: 480px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--card-border-radius); } .post-article__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .post-article__subsection { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .aside-news__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .post-more { margin-top: 16px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .privacy { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .privacy__inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .privacy__subsection { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .privacy__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; list-style-type: decimal; /* цифры */ counter-reset: privacy-counter; gap: var(--gap-basic); } .privacy__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; margin-left: var(--gap-basic); counter-increment: privacy-counter; gap: var(--gap-basic); } .privacy__card { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .privacy__item::before { content: counter(privacy-counter) ". "; color: var(--accent-color); font-size: var(--font-size-sm); line-height: var(--line-height-sm); } .one-player-showcase { display: grid; grid-template-columns: auto; gap: var(--gap-basic); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .one-player-meta { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: var(--gap-basic); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-align-content: center; align-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .one-player-meta__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); font-size: var(--font-size-md); line-height: var(--line-height-md); } .one-player-meta__ava { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; width: 224px; aspect-ratio: 1; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; border: 1px solid; border-color: rgba(108, 108, 108, 0.4); border-radius: 50%; overflow: hidden; } .one-player-meta__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: var(--gap-min); color: var(--accent-color); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .one-player-meta__subtitle { color: var(--primary-color); } .one-player-meta__name-value { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); font-weight: 500; } .one-player-meta__team { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-column-gap: var(--gap-basic); -moz-column-gap: var(--gap-basic); column-gap: var(--gap-basic); } .one-player-meta__number { color: var(--accent-color); font-weight: 500; } .one-player-meta__team-link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: var(--gap-min); } .one-player-meta__team-logo { width: 24px; aspect-ratio: 1; } .one-player-meta__country { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: var(--gap-min); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .one-player-meta__country-flag { width: 16px; height: 9px; } .one-player-stats { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .one-player-stats__head { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .one-player-stats__list { display: grid; gap: var(--gap-basic); grid-template-columns: repeat(2, 1fr); } .one-player-stats__item { background: rgba(13, 13, 13, 0.75); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: var(--card-border-radius); } .one-player-stats__value { color: var(--accent-color); font-weight: 600; } .one-player-stats__title { color: var(--primary-color); text-transform: uppercase; font-size: var(--font-size-xs); line-height: var(--line-height-xs); } .one-player-info { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .swiper-trophies { display: grid; width: 100%; } .swiper-trophies-block { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: var(--gap-basic); } .swiper-trophies__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; max-width: 280px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .swiper-trophies__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .swiper-trophies__link { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-min); text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .swiper-trophies__imgbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; width: 50px; height: 50px; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .swiper-trophies__imgbox-img { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -o-object-fit: contain; object-fit: contain; } .swiper-trophies__name { font-size: var(--font-size-xs); line-height: var(--line-height-xs); /* ограничиваем строки */ display: -webkit-box; -webkit-line-clamp: 2; /* максимум 2 строки */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.8em; /* резервируем место под 2 строки */ } .one-player__section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } .one-player-biography { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: var(--gap-basic); } @media (min-width: 480px){ .header-logo { height: 36px; width: 36px; } .mp-players__card-title { font-size: 14px; } .title-article { font-size: 16px; } .footer__center { grid-template-columns: 1fr 3fr; } .footer-logo { height: 72px; width: 72px; } .news-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .news-feed__item { grid-column: span 3; } .news-feed__item:nth-child(1) { height: 360px; grid-column: span 6; } .video-feed__item { grid-column: span 2; } .video-feed__item:nth-child(1) { grid-column: span 2; } .video-feed__item:nth-child(2) { grid-column: span 2; } .video-feed__item:nth-child(3) { grid-column: span 2; } .videos__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .news__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .hero-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .hero-feed__item { grid-column: span 3; } .hero-feed__item:nth-child(1) { height: 360px; grid-column: span 6; } .video-post__imgbox--main { grid-column: span 6; } .video-post__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .video-post__item { grid-column: span 3; } .video-post__item:nth-child(1) { grid-column: span 6; } .video-post__slider-list-item { height: 180px; } .hero-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .hero-feed__item { grid-column: span 3; } .hero-feed__item:nth-child(1) { height: 360px; grid-column: span 6; } .oteam-stats { grid-template-columns: 1fr 1fr 1fr 1fr; } .oteam-cups { grid-template-columns: 1fr 1fr 1fr 1fr; } .oteam-squad { grid-template-columns: 1fr; } .oteam-players { grid-template-columns: 1fr 1fr; } .review-squads { grid-template-columns: auto; } .contacts__inner { grid-template-columns: auto; } .one-player-stats__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px){ .header-logo { height: 44px; width: 44px; } .post-parag { font-size: 12px; } .mp-players__card-title { font-size: 16px; } .footer-nav__title { pointer-events: none; font-size: 16px; } .title-article { font-size: 18px; } .video-play-btn { height: 36px; width: 36px; } .footer__info-text { font-size: 12px; } .footer__menu { display: grid; grid-template-columns: repeat(2, 1fr); } .footer-logo { height: 72px; width: 72px; } .footer-nav__list { max-height: none !important; opacity: 1 !important; overflow: visible !important; } .footer-nav[open] .footer-nav__list { max-height: none !important; opacity: 1 !important; } .footer-nav__arrow { display: none !important; } .footer-nav[open] .footer-nav__arrow { display: none !important; } .news-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .news-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 0; } .news-feed__item { grid-column: span 2; } .news-feed__item:nth-child(1) { grid-row: 1/5; grid-column: 1/5; height: 100%; } .video-feed__item { grid-column: auto; } .video-feed__item:nth-child(1) { grid-row: 1/3; grid-column: 1/3; height: 100%; } .video-feed__item:nth-child(2) { grid-row: 1; grid-column: span 2; } .video-feed__item:nth-child(3) { grid-row: 2; grid-column: span 2; } .live__card { display: grid; grid-template-columns: 1fr 1fr; } .live__vid { display: block; } .live__vid-imgbox { max-height: 192px; } .videos__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .news__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .table { font-size: 14px; } .hero-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .hero-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); } .hero-feed__item { grid-column: span 2; } .hero-feed__item:nth-child(1) { grid-row: 1/5; grid-column: 1/5; height: 100%; } .video-post__imgbox--main { grid-row: 1/5; grid-column: 1/5; max-height: unset; height: 100%; } .video-post__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .video-post__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); } .video-post__item { grid-column: span 2; display: block; } .video-post__item:nth-child(1) { grid-row: 1/5; grid-column: 1/5; height: 100%; } .video-post__slider-block { display: none; } .hero-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .hero-feed__list { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); } .hero-feed__item { grid-column: span 2; } .hero-feed__item:nth-child(1) { grid-row: 1/5; grid-column: 1/5; height: 100%; } .schedule-list { grid-template-columns: 1fr 1fr; } .results-list { grid-template-columns: 1fr 1fr; } .oteam-header { grid-template-columns: 3fr 2fr; } .oteam-stats { grid-template-columns: 1fr 1fr 1fr 1fr; } .oteam-cups { grid-template-columns: 1fr 1fr 1fr 1fr; } .oteam-squad { grid-template-columns: 2fr 1fr; } .oteam-players { grid-template-columns: 1fr 1fr 1fr; } .review-squads { grid-template-columns: repeat(2, 1fr); } .contacts__inner { grid-template-columns: 2fr 1fr; } .contacts__inner { grid-template-columns: 2fr 1fr; } .post { grid-template-columns: 3fr 1fr; row-gap: var(--gap-basic); -webkit-column-gap: var(--gap-basic); -moz-column-gap: var(--gap-basic); column-gap: var(--gap-basic); } .post__col-3 { display: block; } .post__content { padding-right: 16px; border-right: 1px solid; border-color: rgba(108, 108, 108, 0.4); } .one-player-meta { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .one-player-stats__list { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 768px){ .clubs__list { grid-template-columns: 1fr 1fr; } .review-board__team-link { font-size: 20px; } .review-board__team-logo { height: 62px; width: 62px; } .review-board__team-link { font-size: 20px; } .review-board__team-logo { height: 62px; width: 62px; } .review-squads { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px){ .burger-toggle { display: none; } .nav__list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; } .footer__menu { grid-template-columns: repeat(4, 1fr); } .videos__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .news__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .one-player-showcase { grid-template-columns: auto 1fr; } } @media screen and (min-width: 1200px){ .clubs__list { grid-template-columns: 1fr 1fr 1fr; } .review-board__team-link { font-size: 24px; } .review-board__team-logo { height: 82px; width: 82px; } .review-board__team-link { font-size: 24px; } .review-board__team-logo { height: 82px; width: 82px; } } @media (min-width: 1280px){ .header-logo { height: 50px; width: 50px; } .header__nav { position: static; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; padding: 0; background: transparent; -webkit-box-shadow: none; box-shadow: none; width: auto; } .header__overlay { display: none !important; } .header__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; gap: 16px; } .header__burger { display: none; } .mp-players__card-title { font-size: 16px; } .footer-nav__title { pointer-events: none; } .title-article { font-size: 18px; } .footer-logo { height: 72px; width: 72px; } .footer-nav[open] .footer-nav__list { max-height: none !important; opacity: 1 !important; } .footer-nav__arrow { display: none !important; } .footer-nav[open] .footer-nav__arrow { display: none !important; } .live-page__list { grid-template-columns: repeat(2, 1fr); } .videos__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .news__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .video-post__list { -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; } .calendar__month { font-size: 28px; } .calendar__year { font-size: 28px; } .calendar__datepick { height: 32px; width: 32px; } .oteam-stats { grid-template-columns: 1fr 1fr 1fr 1fr; } .oteam-cups { grid-template-columns: 1fr 1fr 1fr 1fr; } .oteam-squad { grid-template-columns: 2fr 1fr; } .oteam-players { grid-template-columns: repeat(4, 1fr); } .post { grid-template-columns: 3fr 1fr; row-gap: var(--gap-basic); -webkit-column-gap: var(--gap-basic); -moz-column-gap: var(--gap-basic); column-gap: var(--gap-basic); } .one-player-showcase { grid-template-columns: auto 1fr; } .one-player-meta { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; } .one-player-stats__list { grid-template-columns: repeat(5, 1fr); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; } } @media (min-width: 1280px) and (min-width: 480px){ .header__nav { width: auto; } } @media (max-width: 768px){ :root { --font-size-xxs: 10px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 15px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-xxl: 28px; --font-size-xxxl: 36px; --line-height-xxs: 12px; --line-height-xs: 16px; --line-height-sm: 20px; --line-height-md: 22px; --line-height-lg: 28px; --line-height-xl: 36px; --line-height-xxl: 44px; --line-height-xxxl: 52px; } .pagination__prev .label, .pagination__next .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pagination__prev i, .pagination__next i { font-size: 16px; } } @media (max-width: 480px){ :root { --font-size-xxs: 9px; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-xxl: 24px; --font-size-xxxl: 32px; --line-height-xxs: 12px; --line-height-xs: 14px; --line-height-sm: 18px; --line-height-md: 20px; --line-height-lg: 24px; --line-height-xl: 32px; --line-height-xxl: 40px; --line-height-xxxl: 48px; } } @media (max-width: 400px){ .table-team__name { display: none; } }