.top-news {
margin-top: 2rem;
}
.top-news:has(.next-games-football) .news-feed {
grid-row: 2 / 3;
}
.top-news .news-feed {
grid-column: -2 / -1;
grid-row: 2 / 3;
}
.top-news .next-games-football {
grid-column: -2 / -1;
grid-row: 1 / 2;
}
.top-news .covericon {
grid-column: -2 / -1;
grid-row: 1 / 2;
}
.top-news-grid > div:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.top-news-grid > div:nth-child(2) {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.top-news-grid > div:nth-child(3) {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.top-news-grid > div:nth-child(4) {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.top-news-grid > div:nth-child(1),
.top-news-grid > div:nth-child(2),
.top-news-grid > div:nth-child(3) {
min-height: 350px;
}
.top-news-grid > div:nth-child(1) .card-title {
font-size: 3rem;
}
.top-news .next-games-football {
background-color: #000;
color: #fff;
border-radius: 20px;
padding: 1rem;
text-align: center;
position: relative; }
.covericon.mobile-feed,
.top-news .covericon {
background-color: var(--colorDarkGold);
color: #fff;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 500;
padding: 1rem 2rem;
border-radius: 10px;
text-align: center;
}
.top-news .next-games-btns {
position: absolute;
left: 5%;
top: 60%;
width: 90%;
justify-content: space-between;
align-items: center;
}
.top-news .next-games-btns > * {
width: 1rem;
height: 1rem;
border-bottom: 1px solid var(--colorGold);
border-left: 1px solid var(--colorGold);
transform-origin: center;
cursor: pointer;
}
.top-news .next-games-btns .prev {
transform: rotate(45deg);
}
.top-news .next-games-btns .next {
transform: rotate(-135deg);
}
.next-games-football h3 {
color: var(--colorGold);
font-size: 20px;
padding-bottom: 0.5rem;
}
.next-game-ft {
width: 100%;
flex-shrink: 0;
scroll-snap-align: start;
}
.next-game-ft .teams {
justify-content: center;
gap: 2px;
font-size: 20px;
}
.next-game-ft .event-competition {
margin-bottom: 0.5rem;
}
.next-game-ft .event-details {
justify-content: center;
gap: 8px;
font-size: 14px;
}
@media screen and (max-width: 920px) { .top-news-grid > div:nth-child(1) {
grid-column: 1 / -1;
grid-row: 1 / 3;
min-height: 600px;
}
.top-news:has(.covericon) .news-feed,
.top-news:has(.next-games-football) .news-feed {
grid-row: 4 / 6;
}
.top-news .covericon {
grid-row: 3 / 4;
}
.top-news .news-feed {
grid-row: 3 / 6;
}
.top-news-grid > div:nth-child(2),
.top-news-grid > div:nth-child(3),
.top-news-grid > div:nth-child(4) {
grid-column: 1 / 4;
min-height: 300px;
}
.top-news-grid > div:nth-child(2) {
grid-row: 3 / 5;
}
.top-news-grid > div:nth-child(3) {
grid-row: 5 / 6;
}
.top-news-grid > div:nth-child(4) {
grid-row: 6 / 7;
}
.top-news .box.rect {
grid-row: 6 / 7;
}
.top-news-grid > div:nth-child(1) .card-title {
font-size: 2.5rem;
}
.top-news .next-games-football { grid-row: 3/4;
padding-block: 0.5rem;
}
.next-games-football h3 {
font-size: 16px;
}
}
@media screen and (max-width: 650px) {
.top-news-grid {
grid-gap: var(--gridGap) 0;
}
.top-news .next-games-football { grid-row: 1/2;
margin-top: 0.5rem;
border-radius: 10px;
display: none;
}
.top-news {
margin-top: 1rem;
}
.top-news-grid > div:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 3;
min-height: unset; width: calc(100% + 2 * var(--padding));
margin-left: calc(-1 * var(--padding));
}
.top-news-grid > div:nth-child(1) .card {
border-radius: 0;
}
.top-news .news-feed {
display: none;
position: fixed;
left: 0;
bottom: 0;
background-color: #fff;
z-index: 100;
}
.top-news .news-feed.on {
display: block;
z-index: 1010;
}
.top-news-grid > div:nth-child(2),
.top-news-grid > div:nth-child(3),
.top-news-grid > div:nth-child(4) {
grid-column: 1 / -1;
min-height: 350px;
}
.top-news-grid > div:nth-child(2) {
grid-row: 3 / 4;
}
.top-news-grid > div:nth-child(3) {
grid-row: 5 / 6;
}
.top-news-grid > div:nth-child(4) {
grid-row: 6 / 7;
}
.top-news .box.rect {
grid-row: 4 / 5;
grid-column: 1 / -1;
margin-inline: auto;
}
.top-news-grid > div:nth-child(1) .card {
padding: 0 0 0.75rem;
color: #000;
}
.top-news-grid > div:nth-child(1) .card::before {
display: none;
}
.top-news-grid > div:nth-child(1) .card-image {
margin-bottom: 1rem;
position: relative;
height: auto;
}
.top-news-grid > div:nth-child(1) :is(.card-title, .card-details) {
padding-inline: 12px;
}
.top-news .covericon {
grid-row: auto;
}
}
@media screen and (max-width: 580px) {
.top-news-grid > * {
grid-column: 1 / 2;
}
}
@media screen and (max-width: 520px) {
.top-news-grid > div:nth-child(1) .card-title {
font-size: 1.75rem;
}
.top-news {
margin-bottom: 0;
}
}
@media screen and (max-width: 360px) {
.top-news-grid > div:nth-child(1) .card-title {
font-size: 1.5rem;
}
} .latest-game {
position: relative; padding-block: 4rem;
}
.latest-game::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.latest-game .bg-img {
filter: grayscale(1);
background-image: var(--bg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.latest-game--wrapper {
justify-content: center;
align-items: center;
gap: clamp(3rem, 7vw, 140px);
height: 100%;
}
.latest-game-info {
color: #fff;
position: relative;
}
.latest-game-info h2 {
font-size: 20px;
margin-bottom: 0.5rem;
padding-left: 1rem;
}
.latest-game-info h3 {
font-size: 14px;
margin-bottom: 1rem;
padding-left: 1rem;
}
.latest-game-teams {
background-color: rgba(255, 255, 255, 0.75);
padding: 1rem;
border-radius: 10px;
font-size: 2rem;
display: grid;
grid-template-columns: 1fr 5ch;
gap: 0 2rem;
color: #000;
text-transform: uppercase;
}
.latest-game-teams :is(.home, .away) {
grid-column: 1 / 2;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 500;
font-style: normal;
}
.latest-game-teams .score {
padding: 0.5rem;
border-radius: 5px;
font-size: 42px;
letter-spacing: 0.4px;
grid-row: 1 / 3;
grid-column: 2 / 3;
align-self: center;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 700;
font-style: normal;
}
.latest-video {
height: 300px;
width: 500px;
}
.latest-sponsor {
position: absolute;
bottom: 2rem;
}
.latest-game:has(.latest-sponsor) {
padding-bottom: calc(100px + 4rem);
}
@media screen and (max-width: 1080px) {
.latest-game--wrapper {
gap: 2rem;
}
}
@media screen and (max-width: 920px) {
.latest-game .half {
flex-direction: column;
}
.latest-game--wrapper {
flex-direction: column;
}
.latest-game-info :is(h2, h3) {
text-align: center;
padding-left: 0;
}
.latest-game:has(.latest-sponsor) {
padding-block: 2rem;
}
.latest-sponsor {
position: relative;
bottom: unset;
margin-block: 2rem;
}
}
@media screen and (max-width: 620px) {
.latest-game--wrapper {
width: 100%;
}
.latest-video {
max-width: 500px;
width: 100%;
flex-grow: 1;
}
.latest-game-info h2 {
font-size: 18px;
}
.latest-game-teams {
font-size: 1.5rem;
}
.latest-game-teams .score {
font-size: 32px;
}
} .home-blogs {
padding-top: 4rem;
}
.home-bloggers-grid {
margin-bottom: 4rem;
}
.bloggers-container > div {
container-name: blog-card;
container-type: inline-size;
min-height: 160px;
height: fit-content;
}
.home-blogs .card-wrapper.off {
display: none;
}
@container blog-card (width < 480px) {
.card.blog {
min-height: 120px;
}
.card.blog .card-title {
font-size: 1.25rem;
margin-block: 0.5rem;
}
.card.blog .card-image {
width: 100px;
height: 100px;
}
.card.blog .card-info {
padding-left: 130px;
}
}
@container blog-card (width < 380px) {
.card.blog {
min-height: 80px;
}
.card.blog .card-author {
font-size: 14px;
}
.card.blog .card-title {
font-size: 1.125rem;
}
.card.blog .card-image {
width: 80px;
height: 80px;
}
.card.blog .card-info {
padding-left: 110px;
padding-block: 1rem;
}
}
@container blog-card (width < 350px) {
.card.blog {
flex-direction: column;
align-items: center;
}
.card.blog .card-image {
position: relative;
top: unset;
transform: none;
left: unset;
}
.card.blog .card-info {
padding-left: 1rem;
text-align: center;
width: 100%;
}
.card.blog .card-author {
font-size: 12px;
}
.card.blog .card-title {
font-size: 1rem;
}
}
@media screen and (max-width: 1120px) {
.bloggers-container.grid {
grid-gap: 2rem var(--gridGap);
}
}
@media screen and (max-width: 880px) {
.bloggers-container.grid {
grid-gap: 1.5rem var(--gridGap);
}
}
@media screen and (max-width: 720px) {
.bloggers-container.grid {
grid-gap: var(--gridGap);
}
}
@media screen and (max-width: 620px) {
.bloggers-container.grid {
--gridGap: 1.5rem;
}
.bloggers-container > div {
min-height: unset;
}
}
@media screen and (max-width: 520px) {
.bloggers-container.grid {
--gridGap: 1rem;
}
} .home-mobVideos {
color: #fff;
padding-block: 4rem;
margin-bottom: 0;
}
.home-social-videos-wrapper {
gap: 2rem;
--leftSpace: calc((100vw - var(--wrapperWidth) + 2 * var(--padding)) / 2);
padding-inline: var(--leftSpace) 2rem;
}
.social-video {
border-radius: 20px;
width: 345px;
flex-shrink: 0;
overflow: hidden;
aspect-ratio: 0.6;
position: relative;
cursor: pointer;
}
.social-video .vid-icon {
position: absolute;
left: 1rem;
bottom: 1rem;
}
.social-video iframe {
width: 100%;
height: 100%;
}
.social-follow {
align-items: center;
margin-top: 3rem;
justify-content: flex-end;
}
.social-follow h3 {
font-size: 2rem;
margin-right: 2rem;
font-weight: 600;
}
.social-follow li {
background-color: #fff;
width: 4rem;
height: 4rem;
background-size: 50%;
}
@media screen and (max-width: 1430px) {
.home-social-videos-wrapper {
padding-inline: var(--padding);
}
}
@media screen and (max-width: 1020px) {
.social-follow li {
width: 3rem;
height: 3rem;
}
}
@media screen and (max-width: 820px) {
.social-follow h3 {
font-size: 1.75rem;
margin-right: 1.5rem;
}
}
@media screen and (max-width: 620px) {
.social-follow h3 {
font-size: 1.5rem;
}
.social-follow ul li {
margin-right: 1rem;
}
}
@media screen and (max-width: 520px) {
.social-video {
width: clamp(300px, 80vw, 350px);
}
}
@media screen and (max-width: 420px) {
.social-follow {
margin-top: 2em;
flex-direction: column;
gap: 1rem;
}
.social-follow h3 {
margin-right: 0;
}
} .quiz-banner {
background-color: #000;
color: #fff;
border-radius: 30px;
padding: 3rem 4rem;
text-align: center;
margin-top: 4rem;
font-size: 22px;
position: relative;
}
.quiz-banner h2 {
font-size: 4rem;
color: var(--colorGold);
margin-bottom: 1rem;
}
@media screen and (max-width: 920px) {
.quiz-banner {
border-radius: 20px;
padding: 2rem;
margin-top: 3rem;
font-size: 18px;
}
.quiz-banner h2 {
font-size: 3rem;
}
}
@media screen and (max-width: 420px) {
.quiz-banner {
padding: 1rem;
margin-top: 2rem;
font-size: 16px;
}
.quiz-banner h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
} .shorts-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
z-index: 50;
opacity: 0;
pointer-events: none;
display: none;
transition: opacity 0.3s;
}
.shorts-panel.show {
display: block;
}
.shorts-panel.on {
opacity: 1;
pointer-events: all;
}
.shorts-wrapper {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.short-outer {
background-color: #fff;
padding: 2rem;
}
.close-shorts {
background-color: #fff;
border-radius: 50%;
padding: 0.5rem;
width: 2rem;
height: 2rem;
position: absolute;
right: 2rem;
top: 2rem;
cursor: pointer;
}
.close-shorts .line {
width: 60%;
border-top: 2px solid #000;
position: absolute;
left: 20%;
top: calc(50% - 1px);
transform-origin: center;
transform: rotate(45deg);
}
.close-shorts .line:last-of-type {
transform: rotate(-45deg);
} .basket-news { } .openents-news {
margin-top: 4rem;
} .home-videos {
padding-top: 2rem;
}
.home-video-grid .card {
height: 350px;
}
.home-videos .section-banner {
position: relative;
overflow: hidden;
margin-top: 2rem;
background-color: #000;
}
.home-videos .box.wide {
margin: 2rem auto 0;
}
@media screen and (max-width: 1420px) {
.home-videos .section-banner {
height: 250px;
}
}
@media screen and (max-width: 1020px) {
.home-videos .section-banner {
height: 200px;
}
}
@media screen and (max-width: 760px) {
.home-videos .section-banner {
height: 150px;
}
}
@media screen and (max-width: 620px) {
.home-video-grid .card {
min-height: unset;
height: calc((100vw - 2 * var(--padding)) * 9 / 16);
}
}
@media screen and (max-width: 580px) {
.home-videos .section-banner {
height: 120px;
}
}
@media screen and (max-width: 460px) {
.home-videos .section-banner {
height: 100px;
}
}
@media screen and (max-width: 380px) {
.home-videos .section-banner {
height: 80px;
}
} .next-match {
position: relative; }
.next-match::before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
}
.next-match .bg-img {
filter: grayscale(0.8);
background-image: var(--bg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.next-match-info {
color: #fff;
position: relative;
text-align: center;
}
.next-match-info h3 {
font-weight: 600;
font-size: 20px;
}
.next-match-info h4 {
font-size: 18px;
margin-top: 3rem;
}
.next-match-info .date-info {
margin-block: 2rem 1rem;
font-size: 16px;
}
.next-match-info .date-info span {
display: block;
}
.next-match-teams {
font-size: 72px;
line-height: 90%;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 800;
font-style: normal;
justify-content: center;
gap: 1rem;
display: grid;
grid-template-columns: 1fr 2ch 1fr;
}
.next-match-teams .vs {
font-size: 60px;
color: var(--colorGold);
align-self: center;
font-weight: 600;
}
.next-match-teams .home {
text-align: right;
justify-content: end;
}
.next-match-teams .away {
text-align: left;
}
.next-match-teams .home,
.next-match-teams .away { align-items: center;
gap: 1rem;
font-weight: 600;
letter-spacing: -0.25px;
text-transform: uppercase;
}
.next-match-teams .team-logo {
width: 120px;
height: 120px;
object-fit: contain;
}
.next-match-teams .away .team-logo {
order: -1;
}
.match-center-btn {
background-color: #000;
padding: 1rem 3rem;
border-radius: 30px;
width: fit-content;
margin: 4rem auto 0;
}
@media screen and (max-width: 1220px) {
.next-match-teams {
font-size: 60px;
}
.next-match-teams .vs {
font-size: 45px;
}
.next-match-teams .team-logo {
width: 100px;
height: 100px;
}
}
@media screen and (max-width: 980px) {
.next-match-teams {
font-size: 50px;
}
.next-match-teams .vs {
font-size: 40px;
}
}
@media screen and (max-width: 880px) {
.next-match-teams .team-name {
display: none;
}
.next-match-teams .vs {
font-size: 30px;
}
}
@media screen and (max-width: 520px) {
.next-match-info .date-info {
margin-bottom: 3rem;
}
.match-center-btn {
padding: 0.5rem 2rem;
font-size: 14px;
}
.next-match-teams .team-logo {
width: 80px;
height: 80px;
}
}
@media screen and (max-width: 440px) {
.next-match-info h3 {
font-size: 18px;
}
.next-match-info h4 {
font-size: 16px;
}
.next-match-info .date-info {
font-size: 14px;
}
} .home-highlights {
padding-block: 4rem;
margin-bottom: 0;
}
.home-highlights aside {
margin: 4rem auto 0;
}
.home-highlights .box {
margin-inline: auto;
} .home-retro {
padding-block: 4rem;
}
.home-retro .vid-icon {
background-color: var(--colorGold);
}
.home-retro .vid-icon img { }
.home-retro .card {
border-color: var(--colorGold);
} .news { } .travel .card {
height: 300px;
} .home-transfers {
padding-block: 4rem;
margin-bottom: 0;
} .home-analysis {
padding-block: 4rem;
margin-bottom: 0;
}
@media screen and (max-width: 620px) {
.home-analysis .card {
min-height: unset;
height: calc((100vw - 2 * var(--padding)) * 9 / 16);
}
} .clicks {
position: relative;
margin-top: 4rem;
}
.clicks .wrapper {
padding-block: 4rem;
}
.clicks h2 { text-align: center;
}
.cover-wrapper {
justify-content: space-between;
align-items: center;
gap: 3rem;
}
.cover-wrapper .left-col {
flex: 0 0 300px;
}
.cover-wrapper .covers-btn {
width: fit-content;
border: 1px solid var(--colorGold);
border-radius: 10px;
padding: 1rem 2rem;
margin-top: 3rem;
display: block;
}
.clicks-image { margin-left: auto;
width: fit-content;
flex-basis: 60%;
max-width: 700px;
}
.clicks-image img {
width: inherit;
height: inherit;
object-position: center;
object-fit: contain;
}
@media screen and (max-width: 720px) {
.clicks .wrapper {
padding-block: 2rem;
}
.cover-wrapper {
flex-direction: column-reverse;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.cover-wrapper .left-col a {
margin: 2rem auto 0;
}
} .home-match-center {
padding-block: 5rem; }
@media screen and (max-width: 620px) {
.home-match-center .section-header {
margin-bottom: 2rem;
}
} .category-wrapper {
margin-top: 3rem;
}
.category-grid {
margin-bottom: 3rem;
}
.category-grid .card-wrapper {
min-height: 300px;
}
.list {
max-width: 800px;
margin-inline: auto;
display: grid;
grid-template-columns: subgrid;
grid-auto-flow: dense;
grid-column: 1 / 4;
gap: 2rem;
}
.list .card .card-lead {
display: none;
}
.list > .box.wide {
grid-column: 1 / -1;
margin-inline: auto;
}
.pagination {
margin-block: 2rem;
display: flex;
gap: 1rem;
justify-content: center;
}
@media screen and (max-width: 1120px) {
.category-list.grid {
grid-template-columns: repeat(2, 1fr) 300px !important;
}
.list {
grid-column: 1 /3;
}
.category-wrapper {
margin-top: 2rem;
}
}
@media screen and (max-width: 920px) {
.category-list.grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.list {
grid-column: 1 / 3;
}
.category-list > aside:has(> .box.rect) {
grid-column: 1 / -1;
margin-inline: auto;
}
.category-grid {
margin-bottom: 2rem;
}
}
@media screen and (max-width: 740px) {
.category-grid.grid > div:first-of-type {
grid-column: 1 / -1 !important;
}
.category-grid.grid > div:nth-of-type(2) {
grid-column: 1 / 2 !important;
}
.category-grid.grid > aside {
grid-column: 1 / -1 !important;
grid-row: 2 /3;
margin-inline: auto;
}
.list {
gap: 1rem;
}
}
@media screen and (max-width: 560px) {
.category-list.grid {
display: block;
}
}
@media screen and (max-width: 520px) {
.list {
gap: 1rem 0.5rem;
margin-bottom: 1rem;
}
.category-wrapper {
margin-top: 1.5rem;
}
} .category-wrapper.bloggers-category {
margin-bottom: 4rem;
}
.category-bloggers {
gap: 3rem 2rem;
}
.category-bloggers .card-wrapper > a {
position: relative;
}
.category-bloggers > .box.wide {
grid-column: 1 / -1;
margin-inline: auto;
}
@media screen and (max-width: 1060px) {
.category-bloggers {
gap: 2rem;
}
}
@media screen and (max-width: 920px) {
.category-bloggers {
gap: 1rem;
}
}
@media screen and (max-width: 720px) {
.category-bloggers.grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media screen and (max-width: 520px) {
.category-bloggers.grid {
gap: 1rem;
}
} .article article {
margin-block: 2rem;
--width: 1100px;
}
.article-header {
position: relative;
margin-bottom: 8rem;
}
.article-img {
max-width: var(--width);
margin-inline: auto;
position: relative;
border-radius: 20px;
overflow: hidden;
margin-top: 3rem;
width: 100%;
}
.article-img::before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0) 100%
);
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.article-title {
font-size: 42px;
line-height: 110%;
width: 100%;
margin-block: 1rem;
max-width: 900px;
padding-inline: 2rem;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: #fff;
z-index: 2;
text-wrap: balance;
text-align: center;
}
.article-category {
font-weight: 800;
order: -1;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;
font-size: 2rem;
}
.article-category::before {
content: "";
position: absolute;
left: 20%;
top: -0.25rem;
width: 60%;
border-top: 4px solid;
}
.article-header > *:not(.article-img) {
position: absolute;
}
.article-details {
top: calc(100% + 1rem);
width: 100%;
max-width: var(--width);
left: 50%;
transform: translateX(-50%);
justify-content: space-between;
flex-wrap: wrap;
padding: 1rem 2rem;
background-color: #444;
border-radius: 20px;
color: #fff;
}
.article-logo {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 100px;
filter: brightness(0) invert(1);
}
.article-logo::before {
content: "";
width: 4ch;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -5px;
border-top: 2px solid #fff;
}
.article-author {
font-size: 14px;
}
.article-date {
font-size: 14px;
}
.article-share {
width: 100%;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--colorGold);
}
.article-share ul {
justify-content: end;
filter: var(--filterGold);
}
.article-top-banner {
margin-bottom: 2rem;
}
.article-body-wrapper {
max-width: var(--width);
margin-inline: auto;
gap: 2rem;
justify-content: space-between;
flex-wrap: wrap;
}
.article-body-wrapper[data-article="news"] .article-body {
display: none;
}
.article-body-wrapper[data-article="report"] .article-news {
display: none;
}
.article-body-wrapper .aside-top {
width: 100%;
}
.article-body-wrapper .aside-top > div {
margin-inline: auto;
}
.article-body-buttons {
width: 100%;
gap: 1rem;
}
.article-btn {
border-radius: 5px;
padding: 1rem 2rem;
border: 1px solid #000;
cursor: pointer;
}
.article-btn.active {
background-color: #000;
color: var(--colorGold);
}
.article-body {
padding: 2rem;
background-color: #fff;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.article-body > * {
max-width: 650px;
font-size: 18px;
line-height: 150%;
} .article-body > *:not(:last-child) {
margin-bottom: 1rem;
}
.article-body-wrapper aside > * {
position: sticky;
top: 0;
}
.article-col {
width: calc(100% - 300px - 2rem);
}
.article-news {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.article-news .match-article {
height: 350px;
}   .article-body > :is(h1, h2, h3, h4, h5, h6),
.article-body :is(p, li, h1, h2, h3, h4, h5, h6) > a {
color: var(--colorDarkGold);
font-weight: 700;
}
.article-body > p:empty {
display: none;
}
.wp-block-embed iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
.article-body > ins {
max-width: 100%;
margin-inline: auto;
width: 100%;
}
.article-body > .game-center-link {
color: var(--colorGold);
font-weight: 600;
}
.article-body .article-tags {
gap: 1ch;
}
.article-body .article-tags li {
font-size: 12px;
}
.article-footer {
padding: 2rem;
background-color: #f0f0f0;
border-radius: 20px;
margin: 2rem auto 0;
max-width: var(--width);
}
.article-footer-header {
font-weight: 700;
font-size: 20px;
margin-bottom: 1rem;
}
.tags {
flex-wrap: wrap;
gap: 1rem;
}
.tag {
padding: 0.5rem 1rem;
border-radius: 5px;
background-color: #000;
color: #fff;
font-size: 14px;
}
.related-articles {
padding-block: 3rem;
}
.related-grid .card {
height: 350px;
}
.blogger-footer {
max-width: var(--width);
margin-inline: auto;
background-color: #fff;
border-radius: 20px;
display: grid;
grid-template-columns: 200px 1fr; padding: 1rem 2rem;
gap: 0 2rem;
margin-top: 2rem;
place-items: center;
}
.blogger-footer-img {
grid-row: 1 / 3;
grid-column: 1 / 2;
aspect-ratio: 1;
border-radius: 20px;
overflow: hidden;
}
.blogger-footer-name {
font-size: 2rem;
}
.blogger-footer--info {
grid-column: 2 / -1;
grid-row: 1 / 2;
padding: 1rem 2rem;
border-radius: 10px;
background-color: #000;
color: #fff;
align-items: center;
justify-content: space-between;
width: 100%;
}
.blogger-footer .social li {
width: 1.5rem;
height: 1.5rem;
}
.blogger-footer-more {
justify-content: space-between;
align-items: center;
font-size: 18px;
width: 100%;
}
.blogger-footer-more .blogger-more {
margin-left: 2rem;
color: var(--colorGold);
font-weight: 600;
}
.blogger-footer-more .blogger-all {
background-color: var(--colorGold);
padding: 1rem 2rem;
border-radius: 5px;
}
.interview.article article {
margin-top: 0;
}
.interview .article-img {
max-width: unset;
border-radius: 0;
height: 100dvh;
margin-top: 0;
}
.interview-category {
position: absolute;
top: 2rem;
left: var(--padding);
font-size: 2rem;
color: #fff;
text-shadow: 2px 2px 5px #000;
border-bottom: 3px solid var(--colorGold);
z-index: 2;
}
.interview .article-body-wrapper {
flex-direction: column;
}
.interview .article-body figure {
max-width: unset;
margin-block: 2rem;
}
.interview .article-body > * {
margin-inline: auto;
width: 100%;
}
.interview figure.wp-block-video {
max-width: 400px !important;
}
.today-yt-banner {
order: unset !important;
width: fit-content;
margin-inline: auto;
}
@media screen and (max-width: 1164px) {
.interview .article-details {
width: calc(100% - 2 * var(--padding));
margin-inline: auto;
}
}
@media screen and (max-width: 1120px) {
.article-news {
gap: 1rem;
}
}
@media screen and (max-width: 1080px) {
.article-title {
font-size: 36px;
}
.blogger-footer-more .blogger-more {
margin-left: 0;
}
.article-category {
font-size: 26px;
}
}
@media screen and (max-width: 980px) {
.article-title {
margin-block: 0;
}
.blogger-footer {
gap: 1rem;
}
}
@media screen and (max-width: 940px) {
.blogger-footer-more {
flex-direction: column;
align-items: flex-end;
gap: 2rem;
}
.article-top-banner {
display: none;
}
}
@media screen and (max-width: 900px) {
.article-news {
grid-template-columns: 1fr;
grid-gap: 1rem;
}
.interview .article-body figure {
width: calc(100% + 4rem);
margin-left: -2rem;
}
}
@media screen and (max-width: 820px) {
.article article {
margin-block: 1rem;
}
.article-title {
font-size: 32px;
}
.article-body-wrapper {
flex-direction: column;
}
.article-body-wrapper aside {
margin-inline: auto;
}
.blogger-footer {
padding-inline: 1rem;
}
.article-col {
width: 100%;
}
.article-news {
grid-template-columns: 1fr 1fr;
}
.article-news .match-article {
height: 300px;
}
.article-img {
margin-top: 2rem;
}
}
@media screen and (max-width: 760px) {
.blogger-footer-img {
grid-row: 1 / 2;
}
.blogger-footer--info {
grid-column: 1 / -1;
grid-row: 2 / 3;
}
.blogger-footer-more {
align-self: end;
}
.article-header {
gap: 1rem;
}
.match .article-header > *:not(.article-img) {
position: relative;
}
.match .article-img {
order: -1;
}
.interview .article-img {
height: 80dvh;
}
.interview-category {
font-size: 1.75rem;
}
}
@media screen and (max-width: 680px) {
.article-body > * {
max-width: calc(100vw - 2 * var(--padding) - 4rem);
}
.article-title {
font-size: 26px;
padding-inline: 1.5rem;
}
.article-img {
height: 350px;
}
.blogger-footer {
grid-template-columns: 150px 1fr;
gap: 0.5rem;
}
.blogger-footer--info {
padding: 1rem;
}
.blogger-footer-name {
font-size: 1.5rem;
}
.blogger-footer-more {
gap: 1rem;
font-size: 16px;
}
.blogger-footer-more .blogger-all {
padding: 0.5rem 1rem;
}
}
@media screen and (max-width: 620px) {
.article-body > * {
font-size: 16px;
}
.article-footer {
padding: 1rem;
border-radius: 10px;
}
.article-body,
.article-details,
.article-img {
border-radius: 10px;
}
.article-category {
font-size: 20px;
}
.article-details {
top: calc(100% + 0.5rem);
}
.article-title {
bottom: 1.5rem;
}
.article-logo {
width: 60px;
}
.article-logo::before {
width: 3ch;
top: -3px;
border-top: 1px solid #fff;
}
}
@media screen and (max-width: 580px) {
.article-news {
grid-template-columns: 1fr;
}
.interview-category {
font-size: 1.5rem;
top: 1rem;
}
.interview .article-img {
height: 65dvh;
}
}
@media screen and (max-width: 520px) {
.article-title {
font-size: 22px;
padding-inline: 1rem;
}
.tags {
gap: 1rem 0.5rem;
}
.tag {
padding: 0.5rem 0.75rem;
font-size: 12px;
}
.blogger-footer {
gap: 0;
padding-inline: 0.5rem;
}
.blogger-footer-img {
grid-column: 1 / -1;
width: 150px;
margin-inline: auto;
}
.blogger-footer-more {
grid-column: 1 / -1;
align-items: center;
margin-top: 1rem;
}
.article-btn {
padding: 0.5rem 1rem;
font-size: 14px;
}
.article-body {
padding: 1rem 1rem 0;
}
.article-body > * {
max-width: calc(100vw - 2 * var(--padding) - 2rem);
}
.article-details {
padding: 0.5rem 1rem;
}
.interview .article-body figure {
width: calc(100% + 2rem);
margin-left: -1rem;
}
.article-header {
margin-bottom: 6rem;
}
.article-body > .card-wrapper {
width: calc(100% + 2rem);
margin-left: -1rem;
max-width: unset;
}
}
@media screen and (max-width: 420px) {
.blogger-footer-more {
font-size: 14px;
}
.blogger-footer-name {
font-size: 1.25rem;
}
.blogger-footer .social li {
width: 1.25rem;
height: 1.25rem;
}
.interview-category {
font-size: 1.25rem;
}
} .match .article-img {
margin-top: 0;
}
.match-report {
--space: 2rem;
width: 100%;
bottom: 0; background-color: rgba(0, 0, 0, 0.5);
max-width: var(--width);
transform: translateX(-50%);
left: 50%;
z-index: 5;
border-radius: 20px;
color: #fff;
padding: 1rem var(--space);
}
.match-score,
.match-title {
display: grid;
grid-template-columns: 1fr 1rem 1fr;
grid-gap: 1rem;
font-size: 1.75rem;
max-width: 550px;
margin-inline: auto;
text-align: center;
}
.match-score .home,
.match-title .home {
text-align: right;
}
.match-score .away,
.match-title .away {
text-align: left;
}
.match-score .home {
padding-right: 1rem;
}
.match-score .away {
padding-left: 1rem;
}
.match-info {
font-size: 12px;
gap: 1ch;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 0.5rem;
}
.match-venue {
width: 100%;
text-align: center;
}
.match-report-options {
gap: 0.5ch;
margin: 1rem auto 0;
width: fit-content;
font-size: 14px;
border-top: 1px solid var(--colorGold);
padding-top: 0.5rem;
position: relative;
z-index: 2;
}
.match-report-btn {
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 5px;
}
.match-report-btn.on {
background-color: rgba(255, 255, 255, 0.25);
}
.match-report-lists {
display: none;
font-size: 12px;
position: absolute;
top: 1rem;
left: var(--space);
width: calc(100% - 2 * var(--space));
height: calc(100% - 2rem);
justify-content: space-between;
align-items: center;
}
.away li {
text-align: right;
justify-content: end;
}
.match-report.lineups .match-report-lineups,
.match-report.goals .match-report-goals,
.match-report.cards .match-report-cards,
.match-report.subs .match-report-subs {
display: flex;
}
.match-report-lists li {
display: flex;
align-items: center;
position: relative;
}
.match-report-lists li .min {
color: var(--colorGold);
margin-right: 5px;
}
.match-report-subs .arrow {
display: inline-block;
width: 1rem;
height: 1rem;
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/arrow.svg);
background-size: contain;
}
.match-report-subs .arrow.in {
filter: invert(97%) sepia(47%) saturate(4436%) hue-rotate(73deg)
brightness(95%) contrast(83%);
transform: rotate(180deg);
}
.match-report-subs .arrow.out {
filter: invert(18%) sepia(42%) saturate(6499%) hue-rotate(331deg)
brightness(104%) contrast(86%);
}
.away li .min {
order: 5;
margin-inline: 5px 0;
}
.match-report-goals .home li {
padding-left: 1rem;
}
.match-report-goals .away li {
padding-right: 1rem;
} .match-report-goals li::after {
content: "";
width: 0.75rem;
height: 0.75rem;
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/goal.svg);
background-size: contain;
filter: var(--filterGold);
position: absolute;
}
.match-report-goals .home li::after {
left: 0;
}
.match-report-goals .away li::after {
right: 0;
}
.match-report-cards .refCard {
width: 0.75rem;
height: 0.75rem;
background-size: contain;
}
.match-report-cards .home .refCard {
order: -1;
margin-right: 5px;
}
.match-report-cards .away .refCard {
order: 10;
margin-left: 5px;
}
.match-report-cards .refCard.yellow {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/yellow.svg);
}
.match-report-cards .refCard.red {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/red.svg);
}
.match-report-cards .refCard.yelred {
background-image:
url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/red.svg), url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/yellow.svg);
background-position: center, center;
background-size: 0.5rem, contain;
background-repeat: no-repeat, no-repeat;
}
.article.match .article-header {
margin-bottom: 120px;
}
.article.match:has(.paoktoday-match) .article-header {
margin-bottom: calc(260px + 4rem);
}
.article.match .article-details {
top: calc(100% + 1rem);
}
.article.match:has(.paoktoday-match) .article-details {
top: calc(100% + 170px + 2rem);
}
.paoktoday-match {
top: calc(100% + 1rem);
left: 50%;
transform: translateX(-50%);
background-color: var(--colorFt);
width: 100%;
max-width: var(--width);
padding: 1rem 2rem;
border-radius: 20px;
}
.paoktoday-match .logo {
max-width: 225px; margin-inline: auto;
}
.paoktoday-match h3 {
text-align: center;
font-size: 32px;
text-shadow: 1px 1px 5px #fff;
}
.paoktoday-matchvideos {
gap: 2rem;
justify-content: center;
margin-top: 1rem;
}
.paoktoday-match .link {
padding: 0.75rem 1.5rem;
border-radius: 10px;
background-color: #000;
color: #fff;
font-size: 14px;
}
.article.match .short {
display: none;
}
@media screen and (max-width: 1020px) {
.match-report {
--space: 1rem;
}
.match-score,
.match-title {
display: grid;
grid-template-columns: 1fr 0.5rem 1fr;
grid-gap: 0.25rem;
font-size: 1.5rem;
max-width: 500px;
}
}
@media screen and (max-width: 880px) {
.match-report {
--space: 0.5rem;
}
.paoktoday-match {
padding: 1rem;
}
.paoktoday-matchvideos {
gap: 1rem;
}
}
@media screen and (max-width: 760px) {
.article.match .article-header {
margin-bottom: 2rem !important;
}
.match-report {
background: rgb(0, 0, 0);
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0) 200%
);
display: flex;
flex-direction: column;
margin-top: -12.5rem;
}
.match-info {
order: 1;
}
.match-title {
order: 2;
}
.match-score {
order: 3;
}
.match-report-options {
order: 4;
}
.match-report-lists {
position: relative;
order: 5;
padding-bottom: 2rem;
}
}
@media screen and (max-width: 680px) {
.match-report {
margin-top: -11rem;
}
.match-score,
.match-title {
font-size: 1.25rem;
}
.match-report-options {
font-size: 12px;
margin-top: 0.5rem;
padding-top: 0.25rem;
}
.match-report-lists {
padding-bottom: 1rem;
}
.article.match .short {
display: block;
}
.article.match .full {
display: none;
}
.paoktoday-match h3 {
font-size: 24px;
}
.paoktoday-match .logo {
max-width: 170px;
}
}
@media screen and (max-width: 520px) {
.paoktoday-match .link {
font-size: 12px;
border-radius: 5px;
padding: 0.5rem 1rem;
}
.paoktoday-matchvideos {
gap: 0.5rem;
margin-top: 0.5rem;
}
.match-report-subs li {
display: grid;
grid-template-columns: max-content repeat(3, auto);
gap: 3px;
}
.match-report-subs li:not(:last-of-type) {
margin-bottom: 5px;
}
.match-report-subs li .min {
margin: 0;
}
.subs-home li .arrow {
text-align: left;
}
.match-report-subs li .arrow {
grid-column: 2/3;
}
.subs-away li .min {
grid-column: 3/4;
grid-row: 1/2;
}
.subs-away li .player.sub-in {
grid-column: 1/2;
grid-row: 1/2;
}
.subs-away li .player.sub-out {
grid-column: 1/2;
grid-row: 2/3;
}
} .article-header.blog-header > * {
position: relative;
}
.blogger-category {
order: -2;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.4px;
text-align: center;
margin-bottom: 2rem;
color: var(--colorGold);
}
.blogger {
order: -1;
align-items: center;
gap: 2rem;
max-width: var(--width);
margin-inline: auto;
margin-bottom: 1rem;
}
.blogger-img {
width: 150px;
height: 150px;
order: -1;
border-radius: 20px;
overflow: hidden;
}
.blogger-name {
font-size: 2.5rem;
padding-right: 1ch;
}
.blog-header {
margin-bottom: 2rem;
}
.blog-header .article-title {
background-color: #000;
text-align: center;
max-width: var(--width);
font-size: 3rem;
padding: 2rem 3rem 4rem;
bottom: unset;
left: unset;
transform: translateX(0);
margin: 0 auto;
border-radius: 20px 20px 0 0;
}
.blog .article-img {
margin-top: -2rem;
z-index: 2;
}
.blog .article-details {
margin-top: 1rem; justify-content: space-between; }
.blog .article-share {
width: fit-content;
border: none;
margin-top: 0;
padding-top: 0;
}
.article-share.cover-share {
width: fit-content;
margin: 2rem auto;
padding: 1rem 2rem;
border: 1px solid var(--colorGold);
border-radius: 30px;
}
@media screen and (max-width: 1080px) {
.blog-header .article-title {
font-size: 2.5rem;
}
.blogger-img {
width: 180px;
}
.article-share.cover-share ul li {
width: 2rem;
height: 2rem;
}
}
@media screen and (max-width: 820px) {
.blogger-name {
font-size: 2rem;
}
.blog-header .article-title {
font-size: 2rem;
padding-inline: 2rem;
}
}
@media screen and (max-width: 680px) {
.blogger-name {
font-size: 1.75rem;
}
.blogger-img {
width: 150px;
}
}
@media screen and (max-width: 620px) {
.blog-header .article-title {
font-size: 1.75rem;
padding-inline: 1.5rem;
}
}
@media screen and (max-width: 480px) {
.blog-header .article-title {
font-size: 1.5rem;
padding-inline: 1rem;
}
.blogger-img {
width: 120px;
}
.blogger-name {
font-size: 1.5rem;
}
.article-share.cover-share {
padding: 0.5rem 1rem;
border-radius: 20px;
}
.article-share.cover-share ul li {
width: 1.5rem;
height: 1.5rem;
}
} .match-center-header {
padding-block: 3rem;
}
.match-center-header h2 {
font-size: 3rem;
text-align: center;
font-weight: 700;
}
.match-categories {
background-color: #333;
color: #fff;
padding-block: 2rem;
}
.match-categories-list {
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.match-category {
padding: 0.5rem 1rem;
background-color: #777;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.match-category.on {
background-color: #000;
color: var(--colorGold);
}
.match-list {
container-name: match-list;
container-type: inline-size;
}
.match-list-type {
margin-top: 2rem;
gap: 1rem;
}
.match-list-type-option {
padding: 0.5rem 1rem;
border: 1px solid #000;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.match-list-type-option.on {
background-color: #000;
color: var(--colorGold);
}
.match-list-wrapper {
margin-top: 2rem;
gap: 3rem;
}
.match-list-container {
flex-grow: 1;
}
.month-header {
font-weight: 600;
font-size: 22px;
margin-bottom: 1rem;
font-family: "Fira Sans Extra Condensed", sans-serif;
text-transform: uppercase;
}
.month-btns {
font-family: "Fira Sans Extra Condensed", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 18px;
justify-content: space-between;
margin-top: 2rem;
}
.match-item {
margin-bottom: 1rem;
display: grid;
grid-template-columns: 5rem 1fr;
gap: 0 1rem;
}
.match-icon {
grid-row: 1 /3;
background-color: #000;
padding: 1.25rem;
border-radius: 10px;
aspect-ratio: 1;
}
.match-icon img {
filter: brightness(0) invert(1);
}
.match-item .top {
background-color: #ddd;
padding: 0.5rem;
align-items: center;
border-radius: 5px;
}
.match-item .sport {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.match-item .competition {
font-size: 12px; }
.match-item .date {
margin-left: auto;
font-size: 12px;
font-weight: 600;
}
.match-item .time {
margin-left: 1ch;
padding-left: 1ch;
border-left: 1px solid #000;
font-size: 12px;
}
.results .match-item .time {
display: none;
}
.match-item-info {
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 600;
font-size: 26px;
padding-block: 0.5rem;
display: grid;
grid-template-columns: 1fr 1ch 1fr;
grid-gap: 1ch;
padding-inline: 0.5rem;
align-items: center;
}
.match-item-info .dash {
text-align: center;
}
.match-center.results .match-item-info {
grid-template-columns: 1fr auto 1fr;
}
.match-item .score {
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 600;
font-size: 22px;
padding-block: 0.5rem;
display: grid;
grid-template-columns: auto 1ch auto;
padding-inline: 1rem;
margin: 0.5rem auto;
grid-gap: 1ch;
width: fit-content;
background: #000;
color: #fff;
border-radius: 5px;
position: relative;
}
.match-item-info .home,
.match-item-info .away {
display: flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
}
.match-item .score a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.match-item .score .home,
.match-item-info .home {
text-align: right;
}
.match-item .home {
justify-content: flex-end;
}
.match-item .team-logo {
width: 45px;
height: 45px;
object-fit: contain;
mix-blend-mode: darken;
}
.match-item .away .team-logo {
order: -1;
}
.match-item-info:has(+ .score) {
padding-bottom: 0;
}
.match-center.results .match-item-info > .dash {
display: none;
}
.match-item .bottom {
font-size: 14px;
padding: 0.25rem 0.5rem;
background-color: var(--colorGold);
width: fit-content;
margin-inline: auto;
border-radius: 5px;
}
.match-item .bottom:empty {
display: none;
}
.match-list-container .tables-list > div:not(:last-child) {
margin-bottom: 4rem;
}
.match-list-container .tables-list h2 {
margin-bottom: 1rem;
font-weight: 500;
font-size: 24px;
}
@container match-list (width < 620px) {
.match-item {
grid-template-columns: 4rem 1fr;
gap: 0 0.75rem;
}
.match-icon {
padding: 1rem;
}
.match-item .team-logo {
width: 40px;
height: 40px;
}
}
@container match-list (width < 480px) {
.match-item {
gap: 0.5rem;
grid-template-columns: 3rem 1fr;
}
.match-icon {
grid-row: 2 / 3;
}
.match-item .top {
grid-column: 1 / -1;
}
.match-item-info {
padding-top: 0;
}
.match-item .team-logo {
width: 40px;
height: 40px;
}
.match-item .score {
padding-inline: 0.5rem;
grid-gap: 5px;
}
.match-icon {
padding: 0.75rem;
}
}
@container match-list (width < 450px) {
.match-icon {
padding: 0.625rem;
border-radius: 5px;
grid-row: 1 / 2;
} .match-item-info {
gap: 0 1ch;
grid-column: 1 / -1;
}
.match-item .top {
grid-column: 2 / 3;
}
}
@container match-list (width < 375px) {
.match-item .sport {
font-size: 12px;
}
.match-item .competition {
margin-left: 0.5ch;
padding-left: 0.5ch;
}
.match-item .time {
margin-left: 0.5ch;
padding-left: 0.5ch;
}
.match-item {
grid-template-columns: 2.5rem 1fr;
}
.match-icon {
padding: 0.5rem;
}
.match-item .team-logo {
width: 2rem;
height: 2rem;
}
.match-center.results .match-item .team-logo {
width: 25px;
}
.match-center.results .match-item-info {
font-size: 16px;
}
.match-center.results .match-item .score {
font-size: 14px;
}
.match-center.results :is(.match-item-info .home, .match-item-info .away) {
gap: 0.25rem;
}
.match-center.results .match-item-info {
gap: 0 5px;
}
}
@container match-list (width < 350px) {
.match-item .sport {
font-size: 12px;
}
.match-item .competition {
font-size: 10px;
}
}
@media screen and (max-width: 940px) {
.match-list-wrapper {
gap: 2rem;
}
.match-item-info {
font-size: 24px;
}
.match-center-header h2 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 820px) {
.match-list-wrapper {
gap: 1rem;
}
.match-item-info {
font-size: 22px;
}
.match-list-wrapper {
flex-direction: column;
}
.match-item .score {
font-size: 20px;
grid-gap: 0.5ch;
}
}
@media screen and (max-width: 770px) {
.match-categories-list {
max-width: 500px;
margin-inline: auto;
}
.match-list-type {
justify-content: center;
}
}
@media screen and (max-width: 520px) {
.match-center-header {
padding-block: 2.5rem;
}
.match-center-header h2 {
font-size: 2rem;
}
.match-list-type {
gap: 0.5rem;
margin-top: 1rem;
}
.match-categories {
padding-block: 1rem;
}
.match-item-info {
font-size: 20px;
}
.match-item .score {
font-size: 18px;
grid-gap: 0.25ch;
padding-block: 0.25rem;
}
}
@media screen and (max-width: 480px) {
.match-categories-list {
gap: 0.5rem;
}
.match-category {
padding-inline: 0.75rem;
font-size: 12px;
}
}
@media screen and (max-width: 420px) {
.match-item-info {
font-size: 18px;
}
.match-item .score {
font-size: 16px;
}
} .latest-yt-video {
background-color: var(--colorFt);
padding-block: 2rem;
color: #000;
max-width: var(--width);
margin: 2rem auto 0;
border-radius: 20px;
width: 100%;
}
.latest-yt-header {
font-size: 26px;
letter-spacing: 0.28px;
text-align: center;
margin-bottom: 1rem;
text-decoration: underline;
}
.latest-yt-video .logo {
max-width: 260px;
margin-inline: auto; margin-top: 1rem;
}
.yt-video {
margin-inline: auto;
justify-content: center;
}
.yt-video iframe {
max-width: 832px;
width: 100%;
padding-inline: 1rem;
aspect-ratio: 16/9;
height: auto;
} .not-found-text {
text-align: center;
font-size: 22px;
padding-block: 4rem;
}
.not-found-text p:has(> a) {
width: fit-content;
margin: 2rem auto 0;
padding: 0.5rem 2rem;
background-color: var(--colorGold);
border-radius: 10px;
}
@media screen and (max-width: 920px) {
.not-found-text {
font-size: 20px;
}
}
@media screen and (max-width: 520px) {
.not-found-text {
font-size: 18px;
padding-block: 3rem;
}
} .coverpage article {
background-color: #000;
color: #fff;
}
.coverpage-header {
text-align: center;
padding: 2rem var(--padding);
}
.coverpage-title {
font-size: 2.5rem;
}
.coverpage-wrapper {
padding-inline: var(--padding);
}
.coverpage-img {
max-width: 1200px;
margin-inline: auto;
}
.covers-all {
background-color: var(--colorGold);
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 1rem 2rem;
width: fit-content;
margin: 2rem auto 0;
border-radius: 10px;
}
.coverpage .latest-yt-video {
max-width: 1200px;
}
.coverpage > article > footer {
padding: 2rem;
}
@media screen and (max-width: 1020px) {
.coverpage-title {
font-size: 2rem;
}
}
@media screen and (max-width: 520px) {
.coverpage-title {
font-size: 1.75rem;
}
} .all-news .pagination {
grid-column: 1 / -1;
} figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex {
--outerPadding: 2rem;
width: calc(100% + 2 * var(--outerPadding));
max-width: unset;
margin-left: calc(-1 * var(--outerPadding));
}
@media screen and (max-width: 520px) {
figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex {
--outerPadding: 1rem;
}
} .preseason {
padding-block: 4rem;
margin-block: 2rem 0;
} .home-century {
max-width: 100dvw;
overflow: hidden;
height: 100dvh;
position: relative;
background-color: var(--colorDarkGold);
}
.home-century-wrapper {
position: relative;
padding-block: 4rem;
color: #fff;
height: 100%;
}
.home-century-wrapper .wrapper {
height: 100%;
}
.century-header {
z-index: 2;
}
.century-header h2 {
font-size: 45px;
font-weight: 100;
color: #000;
}
.century-header h3 {
font-size: 60px;
letter-spacing: 5px;
font-weight: 700;
order: -1;
width: fit-content;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.century-articles {
margin-top: auto;
}
.century-articles .card {
position: static;
height: auto;
background-color: transparent;
border: none;
}
.century-articles .card:hover {
box-shadow: none;
}
.century-articles .card-image { width: 55%;
height: 100dvh;
position: absolute;
right: 0;
top: 0;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.century-articles .card-image::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(
90deg,
rgba(113, 82, 27, 1),
rgb(171, 136, 74, 0)
);
} .century-articles .card.on .card-image {
opacity: 1;
}
.century-articles .card-title {
font-weight: 300;
max-width: 800px;
text-wrap: pretty;
font-size: 50px;
color: #000;
z-index: 2;
}
.century-articles .card.on .card-title {
color: #fff;
}
.home-century-wrapper .box {
margin-top: 50px;
}
@media screen and (max-width: 1580px) {
.century-articles .card-title {
font-size: 45px;
margin-bottom: 1.5rem;
}
.century-articles .card-image {
width: 60%;
}
}
@media screen and (max-width: 1220px) {
.century-articles .card-title {
font-size: 40px;
margin-bottom: 1rem;
}
.century-articles .card-image {
width: 80%;
}
.century-header h2 {
font-size: 35px;
}
.century-header h3 {
font-size: 45px;
letter-spacing: 5px;
}
}
@media screen and (max-width: 920px) {
.home-century-wrapper {
padding-block: 2rem;
}
.century-articles .card-title {
font-size: 36px;
margin-bottom: 0;
}
.century-articles > div:not(:first-of-type) {
display: none;
}
} .century-wrapper {
width: calc(100% + 2 * var(--padding));
margin-left: calc(-1 * var(--padding));
padding: 1rem var(--padding);
background-color: var(--colorDarkGold);
border-radius: 20px;
}
.century-wrapper > h2 {
font-size: 24px;
font-weight: 300;
color: #fff;
text-align: center;
margin-block: 1rem;
letter-spacing: 4px;
}
.century-wrapper .card-category {
display: none;
}
.century-wrapper .card.cover {
height: calc(100vw / 1.2);
}
.century-wrapper .card.cover .card-image {
aspect-ratio: 1.2;
}
.century-wrapper .card-details .details-time {
border-right: none;
}
.century-wrapper > h2:last-of-type {
z-index: 15;
position: relative;
} .century-single {
background-color: var(--colorDarkGold);
}
.century-single .article-category {
color: #fff;
text-align: center;
width: 300px;
}
.century-single .article-category p:first-of-type {
font-size: 40px;
letter-spacing: 5px;
font-weight: 600;
border-bottom: 1px solid #fff;
}
.century-single .article-category p:last-of-type {
font-size: 25px;
letter-spacing: 2px;
margin-top: 5px;
font-weight: 100;
}
.century-single .article-category::before {
display: none;
}
.century-single .article-details {
background-color: #000;
}
.century-single .article-body {
width: 100%;
}
.century-single .article-body > * {
max-width: unset;
}
.century-single .article-body > iframe {
max-width: 100%;
}
.century-single .article-img {
margin-top: 6.5rem;
aspect-ratio: 1.2;
}
.century-single
.article-body
figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex {
max-width: 800px;
margin-inline: auto;
width: 100%;
}
@media screen and (max-width: 680px) {
.century-single .article-img {
height: auto;
}
} .centuryicon {
border-radius: 10px;
background-color: var(--colorDarkGold);
color: #fff;
font-family: "Fira Sans Extra Condensed", sans-serif;
padding: 1rem 2rem;
border-radius: 10px;
text-align: center;
margin-bottom: 10px;
}
.centuryicon h2 {
letter-spacing: 3px;
font-weight: 600;
font-size: 30px;
}
.centuryicon h3 {
letter-spacing: 1px;
font-weight: 100;
font-size: 22px;
}
.centuryicon p {
letter-spacing: 1px;
font-weight: 300;
font-size: 16px;
margin-top: 4px;
width: fit-content;
margin-inline: auto;
background-color: #000;
padding: 4px 1rem;
border-radius: 5px;
} .live-single .article-body {
width: 100%;
}
.live-single .article-body > * {
max-width: unset;
}