:root {
--bg: #0a0805;
--bar-bg: #0f0c07;
--gold: #cb9a3d;
--gold-light: #fdb912;
--gold-dim: rgba(203, 154, 61, 0.35);
--text: #f2ede2;
--text-muted: #cbc3b2;
--font: 'Alexandria', 'Segoe UI', Tahoma, sans-serif;
--section-title-size: clamp(26px, 3vw, 40px);
--section-title-color: var(--text);
--section-subtitle-size: 13px;
--section-subtitle-color: var(--gold-light);
--header-h-top: 58px;
--header-h-nav: 60px;
--logo-w: clamp(120px, 9vw, 170px);
/* notch + nav gap must clear the full shield width, not just the tip */
--notch-w: max(200px, calc(var(--logo-w) + 80px));
--nav-center-pad: calc(var(--logo-w) / 2 + clamp(40px, 4vw, 72px));
}
/* Global resets — frontend body only (never target wp-admin) */
html {
height: 100%;
scroll-behavior: smooth;
}
body:not(.wp-admin) {
margin: 0;
min-height: 100%;
min-height: 100dvh;
font-family: var(--font);
background: var(--bg);
color: var(--text);
}
body:not(.wp-admin) a { text-decoration: none; color: inherit; }
body:not(.wp-admin) ul { list-style: none; margin: 0; }
body:not(.wp-admin) button { font-family: inherit; cursor: pointer; }
/*
* Sticky footer via .site-shell (header + main + footer).
* Survives plugins injecting nodes into (admin bar, cookies, etc.).
* Short pages → footer at viewport bottom; long pages → footer after content.
*/
.site-shell {
box-sizing: border-box;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body.admin-bar .site-shell {
min-height: calc(100vh - 32px);
min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar .site-shell {
min-height: calc(100vh - 46px);
min-height: calc(100dvh - 46px);
}
}
.site-shell > .site-header {
flex: 0 0 auto;
}
.site-shell > main {
flex: 1 0 auto;
width: 100%;
display: block;
}
.site-shell > .site-footer {
flex: 0 0 auto;
margin-top: auto;
width: 100%;
}
/* Keep WP admin bar intact when logged-in on the frontend */
#wpadminbar,
#wpadminbar * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
#wpadminbar a {
color: #a7aaad;
text-decoration: none;
}
#wpadminbar ul {
list-style: none;
}
/* ---------- HEADER ---------- */
.site-header {
position: relative;
z-index: 1000;
background: var(--bar-bg);
}
/* Scrolled: pin header to viewport (also inlined in header.php) */
.site-header.is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: rgba(15, 12, 7, 0.96);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(253, 185, 18, 0.18);
}
body.admin-bar .site-header.is-fixed {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .site-header.is-fixed {
top: 46px;
}
}
.site-header.is-fixed .top-bar {
height: 52px;
padding-top: 10px;
padding-bottom: 0;
}
.site-header.is-fixed .logo-link {
top: 4px;
}
.site-header.is-fixed .logo-img {
max-height: 96px;
}
.site-header.is-fixed .logo-tagline {
font-size: clamp(11px, 2.4vw, 18px);
margin-top: 0;
}
.site-header.is-fixed .main-nav {
height: 52px;
}
.site-header.is-fixed .notch-outline {
display: none;
}
html {
scroll-padding-top: 140px;
}
/* ---- top bar ---- */
.top-bar {
position: relative;
direction: ltr; /* keep left/right groups predictable regardless of page rtl */
height: var(--header-h-top);
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: clamp(34px, 5vw, 66px) clamp(24px, 10vw, 184px) 0;
overflow: visible;
border-bottom: 1px solid #fdb91229;
}
.top-bar__group {
display: flex;
align-items: center;
gap: 18px;
z-index: 2;
}
/* soft glow behind the logo */
.top-bar::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: var(--notch-w);
height: 100%;
background: radial-gradient(55% 90% at 50% 15%, rgba(203, 154, 61, 0.30), transparent 75%);
pointer-events: none;
z-index: 1;
}
/* shield-shaped outline dipping toward the logo */
.notch-outline {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 80px;
z-index: 1;
pointer-events: none;
}
/* login button */
.login-btn {
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: 1px solid var(--gold-dim);
color: var(--text);
padding: 9px 18px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: border-color .2s ease, color .2s ease;
}
.login-btn span:first-child{
color: var(--gold-light);
}
.login-btn:hover {
border-color: var(--gold);
color: var(--gold-light);
}
.login-btn .icon { width: 18px; height: 18px; color: var(--gold); display: flex; }
.login-btn .icon svg { width: 100%; height: 100%; }
.divider {
width: 1px;
height: 24px;
background: var(--gold-dim);
}
.cart-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: var(--text);
}
.cart-btn svg,
.cart-btn img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cart-btn:hover { color: var(--gold-light); }
.cart-count {
position: absolute;
top: -6px;
inset-inline-end: -8px;
left: auto;
min-width: 16px;
height: 16px;
padding: 0;
border-radius: 50%;
background: var(--gold);
color: #1a1305;
font-size: 10px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
pointer-events: none;
}
/* logo */
.top-bar__logo { z-index: 10; }
.logo-link {
position: absolute;
left: 50%;
top: 15px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 10;
text-align: center;
}
.logo-img {
display: block;
width: var(--logo-w);
height: auto;
max-height: 148px;
object-fit: contain;
filter: drop-shadow(0 6px 18px rgba(203, 154, 61, 0.35));
}
.logo-tagline {
display: block;
margin-top: 4px;
color: var(--gold-light);
font-size: clamp(12px, 3.1vw, 26px);
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
/* socials + language */
.socials {
display: flex;
align-items: center;
gap: 10px;
}
.social-btn {
width: 34px;
height: 34px;
border: 1px solid var(--gold-dim);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-light);
}
.social-btn svg { width: 16px; height: 16px; }
.social-btn:hover { border-color: var(--gold); background: rgba(203,154,61,0.1); }
.lang-switch {
display: flex;
align-items: center;
gap: 14px;
margin-inline-start: 12px;
font-size: 14px;
}
.lang-link { color: var(--text-muted); font-weight: 500; }
.lang-link.is-active {
color: var(--gold-light);
font-weight: 700;
padding-bottom: 4px;
border-bottom: 2px solid var(--gold);
}
/* ---- main nav ---- */
/* Mobile hamburger — hidden on desktop */
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--gold-dim);
border-radius: 50%;
background: transparent;
color: var(--gold-light);
cursor: pointer;
z-index: 12;
}
.nav-toggle__bars {
position: relative;
display: block;
width: 16px;
height: 12px;
}
.nav-toggle__bars span {
position: absolute;
left: 0;
right: 0;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.site-header.is-nav-open .nav-toggle__bars span:nth-child(1) {
top: 5px;
transform: rotate(45deg);
}
.site-header.is-nav-open .nav-toggle__bars span:nth-child(2) {
opacity: 0;
}
.site-header.is-nav-open .nav-toggle__bars span:nth-child(3) {
top: 5px;
transform: rotate(-45deg);
}
.main-nav {
direction: ltr; /* two independent halves split exactly at 50% */
position: relative;
z-index: 5; /* below logo (10) */
height: var(--header-h-nav);
display: flex;
align-items: center;
padding: 0 28px;
}
.main-nav__list {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: clamp(12px, 2vw, 40px);
box-sizing: border-box;
padding: 0; /* reset only here; sides set below */
}
.main-nav__list--left {
justify-content: flex-end;
padding-right: var(--nav-center-pad);
}
.main-nav__list--right {
justify-content: flex-start;
padding-left: var(--nav-center-pad);
}
.main-nav__list > li {
position: relative;
flex: 0 0 auto;
}
.main-nav__list a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: clamp(13px, 1.05vw, 17px);
font-weight: 700;
color: #fff !important;
padding-bottom: 6px;
border-bottom: 2px solid transparent !important;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease;
}
.main-nav__list a:hover,
.main-nav__list a:focus-visible,
.main-nav__list a.is-active {
color: var(--gold-light) !important;
border-bottom-color: var(--gold) !important;
}
.main-nav__list .caret { width: 14px; height: 14px; }
/* WP submenus must not sit in the horizontal flex row */
.main-nav__list .sub-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
min-width: 180px;
padding: 10px 0;
background: var(--bar-bg);
border: 1px solid var(--gold-dim);
border-radius: 8px;
z-index: 30;
flex-direction: column;
gap: 0;
}
.main-nav__list .menu-item-has-children:hover > .sub-menu,
.main-nav__list .has-dropdown:hover > .sub-menu,
.main-nav__list .menu-item-has-children:focus-within > .sub-menu,
.main-nav__list .has-dropdown:focus-within > .sub-menu {
display: flex;
}
/* Submenu links stay clean (no underline) */
.main-nav__list .sub-menu a {
display: block;
padding: 8px 16px;
border-bottom: none;
color: #fff;
white-space: nowrap;
}
.main-nav__list .sub-menu a:hover,
.main-nav__list .sub-menu a:focus-visible,
.main-nav__list .sub-menu a.is-active {
color: var(--gold-light);
background: rgba(203, 154, 61, 0.08);
border-bottom: none;
}
/* =========================================================
HERO — layer stack (z-index)
03 bg → 04 smoke → 05 lights → 06 copy → 07–09 scene
→ 10 card → 14 footer glow
Header/Nav sit above (z 20)
========================================================= */
.hero {
--mc-gold: #d99c30;
--mc-gold-bright: #f0b43a;
position: relative;
isolation: isolate;
width: 100%;
height: auto;
aspect-ratio: auto;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
background: #050403;
}
.hero__stage {
position: relative;
z-index: 0;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
overflow: hidden;
background-color: #050403;
/* Fallback when no ![]()
— empty stage keeps a design frame */
aspect-ratio: 1712 / 704;
background-image: var(--hero-banner, none);
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
}
/* Image present → height follows the photo (no top/bottom crop) */
.hero__stage:has(.hero__banner-img) {
aspect-ratio: auto;
background-image: none;
}
/* Full-bleed banner — always show entire image */
.hero__banner-img {
position: relative;
inset: auto;
z-index: 0;
width: 100%;
height: auto;
max-width: 100%;
display: block;
object-fit: unset;
pointer-events: none;
}
/* Overlay layers sit on top of the natural-height banner */
.hero__bg,
.hero__smoke,
.hero__lights {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Soft dark veil over banner — not opaque */
.hero__bg {
z-index: 1;
background: linear-gradient(180deg, rgba(5, 4, 3, 0.15) 0%, rgba(5, 4, 3, 0.05) 40%, rgba(5, 4, 3, 0.35) 100%);
}
.hero__smoke {
z-index: 2;
background: linear-gradient(90deg, rgba(5, 4, 3, 0.4) 0%, transparent 55%);
opacity: 1;
}
.hero__lights {
z-index: 3;
background: radial-gradient(ellipse 35% 28% at 78% 12%, rgba(255, 200, 90, 0.18), transparent 70%);
mix-blend-mode: screen;
opacity: 0.65;
}
/* Legacy layers off */
.hero__scene,
.hero__scene-img,
.hero__football,
.hero__player {
display: none !important;
}
/* Banner text above background */
.hero__copy {
--hero-copy-inset: max(24px, calc((100% - min(1200px, calc(100% - 48px))) / 2));
position: absolute;
z-index: 5;
top: 42%;
right: var(--hero-copy-inset);
left: auto;
transform: translateY(-50%);
text-align: right;
max-width: min(420px, 42vw);
pointer-events: none;
opacity: 0;
}
.hero__copy--visible {
opacity: 1;
}
.hero__copy--left {
left: var(--hero-copy-inset);
right: auto;
text-align: left;
}
.hero__copy--right {
right: var(--hero-copy-inset);
left: auto;
text-align: right;
}
.hero__copy--center {
left: 50%;
right: auto;
transform: translate(-50%, -50%);
text-align: center;
max-width: min(520px, 70vw);
}
.hero__eyebrow {
margin: 0 0 10px;
font-size: clamp(13px, 1.2vw, 18px);
font-weight: 500;
color: var(--mc-gold-bright);
letter-spacing: 0.02em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.hero__title {
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.15;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.65);
}
.hero__title--custom {
font-size: clamp(28px, 4vw, 52px);
font-weight: 800;
line-height: 1.25;
color: var(--text);
display: block;
}
.hero__title-home {
font-size: clamp(36px, 4.5vw, 64px);
font-weight: 800;
color: #fff;
}
.hero__title-vs {
display: inline-flex;
align-items: center;
gap: clamp(8px, 1vw, 14px);
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 800;
color: var(--mc-gold);
}
.hero__title-vs-icon {
width: clamp(28px, 3.2vw, 46px);
height: clamp(28px, 3.2vw, 46px);
object-fit: contain;
display: block;
flex-shrink: 0;
}
.hero__title-vs-team {
line-height: 1;
}
.hero__tagline {
margin: 14px 0 0;
font-size: clamp(12px, 1.1vw, 16px);
color: rgba(242, 237, 226, 0.85);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
/* 14 Footer Glow */
.hero__footer-glow {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 6;
height: 42%;
pointer-events: none;
background:
linear-gradient(180deg, transparent 0%, rgba(5, 4, 3, 0.55) 45%, rgba(5, 4, 3, 0.92) 100%),
radial-gradient(ellipse 70% 55% at 50% 100%, rgba(217, 156, 48, 0.22), transparent 70%);
animation: footer-glow 6s ease-in-out infinite alternate;
}
@keyframes footer-glow {
from { opacity: 0.85; }
to { opacity: 1; }
}
/* ---------- 10 Bottom Card ---------- */
.match-card-wrap {
--mc-cut: 28px;
--mc-gold: #c9922a;
--mc-gold-bright: #f0c040;
--mc-pad-x: clamp(28px, 3.2vw, 44px);
--mc-pad-y: clamp(28px, 3vw, 40px);
position: relative;
z-index: 10;
width: min(1200px, calc(100% - 48px));
/* Slight overlap onto hero bottom */
margin: -48px auto clamp(48px, 5vw, 88px);
}
.match-card {
--mc-cut: inherit;
position: relative;
border: none;
}
.match-card__body {
display: flex;
align-items: stretch;
width: 100%;
min-height: 300px;
direction: ltr;
border: none;
box-sizing: border-box;
background-image: url("../images/frames/match_frame-2.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.match-card__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.match-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 3vw, 48px);
padding: var(--mc-pad-y) var(--mc-pad-x) 26px;
flex: 1;
flex-wrap: nowrap;
min-width: 0;
}
.match-card__top .teams {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
}
.match-card__top .countdown {
flex: 0 0 auto;
}
.match-card__cta,
.countdown__label,
.team__name,
.meta-item,
.match-card__seats {
direction: rtl;
}
/* 11 Team Logos */
.teams {
display: flex;
align-items: center;
gap: 53px;
}
.team {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.team__badge {
width: 80px;
height: 80px;
object-fit: contain;
}
.team__badge--placeholder {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.team__name {
font-size: 14px;
font-weight: 600;
color: #fff;
}
.vs {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.vs img {
width: 36px;
height: 36px;
object-fit: contain;
display: block;
}
/* 12 Countdown — glass boxes */
.countdown {
display: flex;
flex-direction: column;
align-items: center;
margin-inline: auto 0;
padding-inline-end: 8px;
}
.countdown__label {
margin: 0 0 14px;
font-size: 15px;
font-weight: 600;
color: var(--mc-gold-bright);
text-align: center;
text-shadow: 0 0 12px rgba(245, 215, 110, 0.35);
}
.countdown__boxes {
display: flex;
align-items: center;
gap: 10px;
}
.countdown__box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 72px;
height: 70px;
border-radius: 8px;
background: linear-gradient(
180deg,
rgba(40, 32, 18, 0.95) 0%,
rgba(12, 10, 6, 0.98) 55%,
rgba(8, 6, 4, 1) 100%
);
border: 1px solid rgba(212, 175, 55, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 230, 150, 0.18),
inset 0 -8px 16px rgba(0, 0, 0, 0.45),
0 0 10px rgba(212, 175, 55, 0.15);
}
.countdown__box span {
font-size: 28px;
font-weight: 800;
color: var(--mc-gold-bright);
line-height: 1.1;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 14px rgba(245, 215, 110, 0.55);
}
.countdown__box small {
font-size: 11px;
font-weight: 500;
color: rgba(245, 215, 110, 0.75);
margin-top: 2px;
}
.countdown__sep {
color: var(--mc-gold-bright);
font-weight: 700;
font-size: 22px;
line-height: 1;
text-shadow: 0 0 10px rgba(245, 215, 110, 0.5);
padding-bottom: 2px;
}
/* meta — equal 3-column info row */
.match-card__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
align-items: center;
gap: 0;
margin-top: auto;
padding: 16px var(--mc-pad-x) calc(var(--mc-pad-y) - 2px);
border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.teamLogo {
width: 80px;
height: 80px;
}
.teamLogo img {
width: 80px;
max-height: 80px;
height: auto;
object-fit: contain;
}
.meta-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 0;
width: 100%;
padding: 6px 16px;
font-size: 12px;
color: rgba(242, 237, 226, 0.9);
position: relative;
box-sizing: border-box;
}
.meta-item:not(:first-child)::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: rgba(212, 175, 55, 0.28);
pointer-events: none;
}
.meta-item svg,
.meta-item__icon {
width: 50px;
height: 50px;
color: var(--mc-gold-bright);
flex-shrink: 0;
}
.meta-item__icon {
object-fit: contain;
display: block;
}
.meta-item__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
line-height: 1.35;
min-width: 0;
text-align: start;
}
.meta-item__text strong {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.meta-item__text small {
font-size: 11px;
font-weight: 400;
color: rgba(242, 237, 226, 0.65);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.meta-item--datetime {
justify-content: center;
}
.meta-item__rows {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
direction: rtl;
min-width: 0;
}
.meta-item__row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.meta-item__row svg,
.meta-item__row .meta-item__icon {
width: 30px;
height: 30px;
color: var(--mc-gold-bright);
flex-shrink: 0;
}
.meta-item__row strong {
font-size: 12px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 13 Ticket panel — keep CTA fully inside the frame */
.match-card__side {
flex: 0 0 clamp(240px, 23vw, 280px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 18px;
padding: calc(var(--mc-pad-y) + 8px) calc(var(--mc-pad-x) + 12px) calc(var(--mc-pad-y) + 8px) 24px;
margin-inline-end: 6px;
border-inline-start: none;
box-sizing: border-box;
min-width: 0;
overflow: hidden;
position: relative;
}
/* Inset divider so it stays inside the frame (no overflow past chamfer) */
.match-card__side::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 14%;
bottom: 14%;
width: 1px;
background: rgba(212, 175, 55, 0.35);
pointer-events: none;
}
.match-card__cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
min-width: 0;
}
.match-card__cta h4 {
margin: 0 0 6px;
font-size: 17px;
font-weight: 700;
color: #fff;
text-align: center;
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
.match-card__cta p {
margin: 0 0 16px;
font-size: 13px;
font-weight: 500;
color: var(--mc-gold-bright);
text-align: center;
}
.match-card__side .btn-gold {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: #c9a227;
color: #1a1305;
font-weight: 700;
font-size: 14px;
padding: 12px 16px;
border-radius: 6px;
box-shadow: none;
transition: filter 0.2s ease;
}
.match-card__side .btn-gold:hover {
filter: brightness(1.06);
box-shadow: none;
}
.match-card__side .btn-gold svg,
.match-card__side .btn-gold .btn-gold__icon {
width: 30px;
height: 30px;
flex-shrink: 0;
display: block;
object-fit: contain;
}
/* shared gold button (fixtures etc.) */
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(90deg, #f0c040 0%, #e0a820 50%, #c98810 100%);
color: #1a1305;
font-weight: 700;
font-size: 13px;
padding: 12px 14px;
border-radius: 8px;
box-shadow: 0 0 16px rgba(212, 175, 55, 0.45);
transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.btn-gold:hover {
filter: brightness(1.08);
box-shadow: 0 0 24px rgba(212, 175, 55, 0.6);
}
.btn-gold svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-gold__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: block;
object-fit: contain;
/* gold SVG → dark to match button text on gold bg */
filter: brightness(0);
}
.match-card__seats {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
color: rgba(242, 237, 226, 0.9);
}
.match-card__seats svg {
width: 18px;
height: 18px;
color: var(--mc-gold-bright);
flex-shrink: 0;
}
.match-card__seats strong {
font-weight: 700;
font-size: 14px;
color: #fff;
margin-inline-end: 4px;
}
/* Responsive (tablet/mobile) → assets/css/mobile.css */
/* =========================================================
IMAGE PLACEHOLDERS
Swap files in assets/images/ — labels show until image loads
========================================================= */
.ph {
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #1a1510, #0c0a06);
border: 1px dashed rgba(201, 146, 42, 0.35);
}
.ph::after {
content: attr(data-ph);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
font-size: 11px;
color: rgba(201, 146, 42, 0.65);
text-align: center;
pointer-events: none;
z-index: 0;
}
.ph img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ph img[src=""],
.ph img:not([src]) {
opacity: 0;
}
.ph--sm {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
}
.ph--badge {
width: 64px;
height: 64px;
border-radius: 8px;
border: none;
background: transparent;
}
.ph--sponsor {
width: 100px;
height: 48px;
border-radius: 8px;
}
.ph--sponsor img { object-fit: contain; padding: 6px; }
/* Layer cutouts — hidden while using composite hero-banner.
When you add PNGs, set .hero--layers on .hero and remove .hero__scene */
.hero__football,
.hero__player {
display: none;
position: absolute;
z-index: 4;
pointer-events: none;
}
.hero--layers .hero__scene { display: none; }
.hero--layers .hero__football,
.hero--layers .hero__player { display: block; }
.hero--layers .hero__copy { opacity: 1; }
.hero__football {
width: clamp(60px, 8vw, 120px);
aspect-ratio: 1;
top: 38%;
left: 28%;
border: none;
background: transparent;
border-radius: 50%;
}
.hero__player--main {
width: clamp(220px, 32vw, 480px);
height: 78%;
bottom: 0;
left: 22%;
border: none;
background: transparent;
}
.hero__player--main img { object-fit: contain; object-position: bottom center; }
.hero__player--opponent {
width: clamp(180px, 26vw, 380px);
height: 70%;
bottom: 0;
left: 48%;
border: none;
background: transparent;
}
.hero__player--opponent img { object-fit: contain; object-position: bottom center; }
/* =========================================================
SHARED SECTION STYLES
========================================================= */
.container {
width: min(1200px, calc(100% - 48px));
margin-inline: auto;
}
.section {
padding: 42px 0;
position: relative;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
}
.section-head--center {
justify-content: center;
text-align: center;
}
.section-title {
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 48px;
height: 2px;
background: var(--gold);
box-shadow: 0 0 10px rgba(253, 185, 18, 0.5);
}
.section-head--center .section-title::after {
right: 50%;
transform: translateX(50%);
}
.section-link {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
border-bottom: 1px solid transparent;
}
.section-link:hover {
color: var(--gold-light);
border-bottom-color: var(--gold);
}
/* Gold frame cards */
.gold-frame {
border: 1px solid rgba(201, 146, 42, 0.45);
/* background: linear-gradient(180deg, rgba(22, 17, 10, 0.95), rgba(8, 6, 4, 0.98)); */
box-shadow:
0 0 20px rgba(201, 146, 42, 0.12),
inset 0 1px 0 rgba(255, 220, 140, 0.08);
}
.gold-frame-circle {
width: 72px;
height: 72px;
border-radius: 50%;
border: 1px solid rgba(201, 146, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-light);
box-shadow: 0 0 16px rgba(201, 146, 42, 0.25);
background: rgba(12, 10, 6, 0.9);
}
.gold-frame-circle svg { width: 28px; height: 28px; }
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 8px;
border: 1px solid rgba(201, 146, 42, 0.5);
color: var(--gold-light);
font-size: 13px;
font-weight: 700;
transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover {
background: rgba(201, 146, 42, 0.12);
border-color: var(--gold-light);
}
/* ---------- NEWS ---------- */
section#news {
padding-bottom: 42px;
padding-top: 0px;
}
.news-head {
position: relative;
text-align: center;
padding-top: 8px;
}
.news-head__watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
z-index: 0;
font-size: clamp(40px, 7vw, 90px);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.04);
white-space: nowrap;
pointer-events: none;
}
.news-head__title {
position: relative;
z-index: 1;
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
}
.news-head__divider {
display: flex;
align-items: center;
justify-content: center;
margin: 6px 0 20px;
}
.news-head__border {
display: block;
width: min(420px, 25%);
max-width: 100%;
height: auto;
object-fit: contain;
}
.news-slider-wrap {
position: relative;
width: 100%;
}
.news-slider {
position: relative;
overflow: hidden;
}
.news-slider .swiper-slide {
height: auto;
/* Fade stacks all slides — only the active one may receive clicks */
pointer-events: none;
}
.news-slider .swiper-slide-active {
pointer-events: auto;
z-index: 2;
}
.news-slider .swiper-slide-active .news-banner__content,
.news-slider .swiper-slide-active .news-banner__cta {
pointer-events: auto !important;
z-index: 12;
}
.news-slider__arrow {
position: absolute;
top: 50%;
z-index: 40;
transform: translateY(-50%);
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(253, 185, 18, 0.55);
background: rgba(5, 4, 3, 0.55);
color: var(--gold-light);
cursor: pointer;
pointer-events: auto;
transition: background 0.2s ease, border-color 0.2s ease;
}
.news-slider__arrow svg {
width: 18px;
height: 18px;
}
.news-slider__arrow:hover {
background: rgba(253, 185, 18, 0.14);
border-color: var(--gold-light);
}
.news-slider__arrow--prev { left: 10px; }
.news-slider__arrow--next { right: 10px; }
.news-banner {
position: relative;
direction: ltr;
width: 100%;
aspect-ratio: 1414 / 447;
overflow: hidden;
background: #050403;
}
.news-banner__frame {
position: absolute;
inset: 0;
z-index: 5;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
}
.news-banner__media {
position: absolute;
z-index: 1;
inset: 4.4% 1.6% 3.9% 25.8%;
overflow: hidden;
background: #0a0805;
border-radius: 22px;
pointer-events: none;
}
.news-banner__media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center right;
}
.news-banner__shade {
position: absolute;
z-index: 2;
inset: 2.4% 1.8% 2.6% 1.8%;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(5, 4, 3, 0.96) 0%,
rgba(5, 4, 3, 0.88) 28%,
rgba(5, 4, 3, 0.45) 52%,
rgba(5, 4, 3, 0.08) 72%,
transparent 100%
),
radial-gradient(
80% 120% at 78% 35%,
rgba(253, 185, 18, 0.18) 0%,
transparent 55%
);
}
.news-banner__content {
position: absolute;
z-index: 10;
top: 10%;
bottom: 14%;
left: 4.5%;
width: min(46%, 520px);
direction: rtl;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: right;
gap: 12px;
box-sizing: border-box;
padding: 0 clamp(8px, 1.2vw, 18px);
pointer-events: auto;
}
.news-banner__tag {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
font-size: clamp(12px, 1.1vw, 14px);
font-weight: 700;
color: var(--gold-light);
letter-spacing: 0.02em;
}
.news-banner__tag-icon {
width: 8px;
height: 8px;
flex-shrink: 0;
transform: rotate(45deg);
background: var(--gold-light);
box-shadow: 0 0 10px rgba(253, 185, 18, 0.55);
}
.news-banner__title {
margin: 0;
max-width: 34ch;
min-height: 0;
flex: 0 1 auto;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
font-size: clamp(18px, 2.15vw, 30px);
font-weight: 800;
line-height: 1.45;
color: #fff;
text-wrap: balance;
}
.news-banner__cta.btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-top: 4px;
padding: 10px 18px;
min-height: 42px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
color: var(--gold-light);
border-color: rgba(253, 185, 18, 0.7);
background: transparent;
width: fit-content;
position: relative;
z-index: 12;
pointer-events: auto;
cursor: pointer;
}
.news-banner__cta.btn-outline svg {
width: 16px;
height: 16px;
transform: scaleX(-1);
}
.news-banner__cta.btn-outline:hover {
background: rgba(253, 185, 18, 0.12);
border-color: var(--gold-light);
}
.news-strip-frame {
position: relative;
width: 95%;
margin-top: 16px;
padding: 10px 8px 8px;
background: #050403;
border: 1px solid rgba(201, 146, 42, 0.55);
box-shadow:
0 0 0 1px rgba(253, 185, 18, 0.08) inset,
0 0 28px rgba(201, 146, 42, 0.16);
overflow: hidden;
margin: auto;
}
.news-strip-frame::before,
.news-strip-frame::after {
content: "";
position: absolute;
left: 50%;
width: 120px;
height: 2px;
transform: translateX(-50%);
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
rgba(253, 185, 18, 0.95),
transparent
);
box-shadow: 0 0 16px rgba(253, 185, 18, 0.75);
z-index: 2;
}
.news-strip-frame::before { top: -1px; }
.news-strip-frame::after { bottom: -1px; }
.news-strip {
overflow: hidden;
direction: ltr;
}
.news-strip .swiper-slide {
height: auto;
box-sizing: border-box;
}
.news-mini {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 8px 8px 10px;
text-align: inherit;
text-decoration: none;
color: inherit;
background: #050403;
border: 1px solid rgba(201, 146, 42, 0.42);
box-shadow: inset 0 0 0 1px rgba(253, 185, 18, 0.04);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
opacity: 0.65;
font: inherit;
}
.news-mini:hover {
border-color: rgba(253, 185, 18, 0.75);
opacity: 0.9;
}
.news-strip .swiper-slide-active .news-mini {
opacity: 1;
border-color: rgba(253, 185, 18, 0.9);
box-shadow:
inset 0 0 0 1px rgba(253, 185, 18, 0.12),
0 0 14px rgba(201, 146, 42, 0.28);
}
.news-mini__num {
display: block;
font-size: clamp(13px, 1.2vw, 16px);
font-weight: 800;
line-height: 1;
color: var(--gold-light);
letter-spacing: 0.04em;
}
.news-mini__media {
position: relative;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0a0805;
display: grid;
place-items: center;
}
.news-mini__media img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center center;
}
.news-mini__title {
margin: 0;
min-height: 2.4em;
font-size: clamp(11px, 1vw, 12px);
font-weight: 700;
line-height: 1.35;
color: #fff;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
direction: rtl;
}
/* Banner pill dots — display only (not clickable) */
.news-slider__dots.swiper-pagination {
position: absolute !important;
z-index: 30 !important;
left: 4.5% !important;
bottom: 8% !important;
right: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 0 clamp(8px, 1.2vw, 18px);
margin: 0 !important;
transform: none !important;
pointer-events: none !important;
}
.news-slider__dots .swiper-pagination-bullet {
width: 22px !important;
height: 6px !important;
margin: 0 !important;
border-radius: 999px;
background: transparent !important;
border: 1px solid rgba(253, 185, 18, 0.85) !important;
opacity: 1 !important;
pointer-events: none !important;
cursor: default;
flex-shrink: 0;
}
.news-slider__dots .swiper-pagination-bullet-active {
background: #fdb912 !important;
border-color: #fdb912 !important;
box-shadow: 0 0 10px rgba(253, 185, 18, 0.55);
}
/* ---------- MATCHES ---------- */
.matches {
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(180deg, rgba(5, 4, 3, 0.086) 0%, rgba(5, 4, 3, 0.471) 100%),
url("../images/match-bg.webp") center / cover no-repeat;
background-color: #050403;
padding-bottom: 96px;
background-attachment: fixed;
}
.matches::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: min(180px, 28%);
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(5, 4, 3, 0) 0%,
rgba(5, 4, 3, 0.55) 45%,
rgba(5, 4, 3, 0.92) 75%,
#050403 100%
);
}
.matches > .container {
position: relative;
z-index: 2;
}
.matches-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.matches-head__title h2 {
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
}
.matches-head__title p {
margin: 6px 0 0;
font-size: var(--section-subtitle-size);
color: var(--section-subtitle-color);
}
.matches-tabs {
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 28px);
flex-wrap: wrap;
}
.matches-tabs__item {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
padding-bottom: 8px;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.matches-tabs__item:hover { color: var(--text); }
.matches-tabs__item.is-active {
color: var(--gold-light);
font-weight: 700;
border-bottom-color: var(--gold);
}
.matches-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.fixture-card {
position: relative;
display: flex;
border: none;
background: transparent;
clip-path: none;
}
.fixture-card__body {
flex: 1;
min-height: 0;
padding: 40px 36px 36px;
display: flex;
flex-direction: column;
gap: 24px;
border: none;
background-image: url("../images/frames/match-card.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
clip-path: none;
direction: rtl;
}
.fixture-card__teams {
direction: ltr; /* Qadsia on the left, opponent on the right, per reference */
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.fixture-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
.fixture-team__badge {
width: 64px;
height: 64px;
object-fit: contain;
}
.fixture-team__ar {
font-size: 15px;
font-weight: 700;
color: var(--text);
}
.fixture-team__en {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--text-muted);
text-transform: uppercase;
display:none;
}
.fixture-vs {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
display: block;
}
.fixture-card__divider {
height: 1px;
background: rgba(201, 146, 42, 0.2);
}
.fixture-card__info {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0px 18px; ;
}
.fixture-card__info p {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
}
.fixture-card__info svg,
.fixture-card__icon {
width: 25px;
height: 25px;
color: var(--gold);
flex-shrink: 0;
}
.fixture-card__icon {
object-fit: contain;
display: block;
}
.fixture-card__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 4px;
position: relative;
}
.fixture-card__link {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(--gold-light);
white-space: nowrap;
}
.fixture-card__link svg { width: 16px; height: 16px; }
.fixture-card:not(.coming-soon-match) .fixture-card__actions a {
background: linear-gradient(135deg, #f0c14b, #e6a800) !important; /* slightly brighter gold */
box-shadow:
0 0 12px rgba(240, 193, 75, 0.55),
0 0 24px rgba(240, 193, 75, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-1px); /* tiny lift */
border: 1px solid #ffd700;
transition: all 0.25s ease;
}
span.fixture-card__coming-soon {
position: absolute;
top: -15px;
left: 9px;
background: red;
padding: 5px 14px;
border-radius: 7px;
z-index: 2;
}
/* .fixture-card__coming-soon {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
color: #000;
direction: rtl;
} */
.fixture-card:not(.coming-soon-match) .fixture-card__actions a:hover {
background: linear-gradient(135deg, #ffd700, #f0c14b) !important;
box-shadow:
0 0 18px rgba(255, 215, 0, 0.7),
0 0 32px rgba(255, 215, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.btn-gold--fixture {
direction: rtl;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 240px;
min-height: 46px;
padding: 12px 28px;
box-sizing: border-box;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
background:#c9a227;
color: #000 !important;
border: none;
border-radius: 10px;
box-shadow: none;
text-decoration: none;
white-space: nowrap;
transition: filter 0.2s ease, background 0.2s ease;
}
.btn-gold--fixture:hover {
filter: brightness(1.08);
background: #d4ad2e;
box-shadow: none;
color: #fff;
}
.btn-gold--fixture svg,
.btn-gold--fixture .btn-gold__icon {
width: 25px;
height: 25px;
flex-shrink: 0;
display: block;
object-fit: contain;
}
.ph--fixture {
width: 64px;
height: 64px;
border-radius: 10px;
flex-shrink: 0;
}
/* ---------- VIDEO ---------- */
.video-sec {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #050403;
margin-top: -48px;
padding-top: 36px;
}
.video-sec::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/Background_06.webp") center / cover no-repeat;
filter: brightness(0.75) contrast(1.1) saturate(0.95);
opacity: 0.85;
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.35) 12%,
#000 28%,
#000 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.35) 12%,
#000 28%,
#000 100%
);
background-attachment: fixed;
}
.video-sec::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
#050403 0%,
rgba(5, 4, 3, 0.88) 10%,
rgba(5, 4, 3, 0.62) 28%,
rgba(5, 4, 3, 0.7) 55%,
rgba(5, 4, 3, 0.82) 100%
);
}
.video-head {
text-align: center;
margin-bottom: 32px;
}
.video-head__title {
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
}
.video-head__divider {
display: flex;
align-items: center;
justify-content: center;
margin: 14px 0 12px;
}
.video-head__subtitle {
margin: 0;
font-size: var(--section-subtitle-size);
color: var(--section-subtitle-color);
}
.video-frame {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1515 / 696;
max-width: none;
margin-inline: auto;
margin-bottom: 0;
border-radius: clamp(18px, 2.4vw, 36px);
}
.video-frame__border {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
z-index: 3;
}
.video-frame__media {
position: absolute;
inset: 2.6% 1.4%;
border: none;
border-radius: clamp(14px, 1.8vw, 28px);
overflow: hidden;
z-index: 1;
}
.video-frame__player {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #050403;
}
.video-frame.is-playing .video-frame__play {
opacity: 0;
pointer-events: none;
}
.video-frame:hover.is-playing .video-frame__play {
opacity: 1;
pointer-events: auto;
}
.video-frame__play {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
z-index: 4;
width: 72px;
height: 72px;
border-radius: 50%;
border: 2px solid var(--gold-light);
background: rgba(10, 8, 5, 0.65);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 24px rgba(253, 185, 18, 0.4);
transition: transform 0.2s ease, background 0.2s ease;
}
.video-frame__play svg { width: 28px; height: 28px; margin-inline-start: 3px; }
.video-frame__play:hover {
transform: translate(-50%, -50%) scale(1.06);
background: rgba(201, 146, 42, 0.35);
}
.video-frame__scrub {
position: absolute;
z-index: 4;
left: clamp(24px, 3vw, 40px);
right: clamp(24px, 3vw, 40px);
bottom: clamp(18px, 2.4vw, 28px);
display: flex;
align-items: center;
gap: 10px;
}
.video-frame__time {
font-size: 12px;
font-weight: 600;
color: var(--text);
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.video-frame__bar {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.25);
overflow: hidden;
}
.video-frame__bar-fill {
display: block;
width: 0%;
height: 100%;
background: var(--gold-light);
transition: width 0.1s linear;
}
/* ---------- HIGHLIGHT BAR ---------- */
.video-sec .highlight-bar {
margin-top: 18px;
padding: 18px 0px;
border-radius: 27px;
}
.highlight-bar {
display: flex;
align-items: stretch;
width: 100%;
padding: 0;
background: linear-gradient(180deg, rgba(18, 14, 8, 0.92), rgba(8, 6, 4, 0.96));
}
.highlight-bar__item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 22px;
min-width: 0;
text-align: center;
}
.highlight-bar__item:not(:last-child) {
border-inline-end: 1px solid rgba(201, 146, 42, 0.28);
}
.highlight-bar__item--main {
flex: 2;
justify-content: center;
text-align: center;
}
.highlight-bar__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
text-align: center;
}
.highlight-bar__item--date .highlight-bar__text,
.highlight-bar__item--stat .highlight-bar__text {
text-align: center;
align-items: center;
}
.highlight-bar__item--date strong,
.highlight-bar__item--stat strong {
font-size: 15px;
font-weight: 700;
color: #fff;
white-space: normal;
text-align: center;
}
.highlight-bar__item--date span,
.highlight-bar__item--stat span {
font-size: 13px;
color: rgba(242, 237, 226, 0.75);
text-align: center;
}
.highlight-bar__glyph {
width: 45px;
height: 45px;
flex-shrink: 0;
object-fit: contain;
display: block;
margin: 0;
}
.highlight-bar__item--main .highlight-bar__text {
text-align: center;
align-items: center;
max-width: 440px;
margin-inline: auto;
width: 100%;
}
.highlight-bar__item--main .highlight-bar__text strong {
font-size: 17px;
font-weight: 800;
color: var(--gold-light);
line-height: 1.35;
text-align: center;
}
.highlight-bar__item--main .highlight-bar__text p {
margin: 0;
font-size: 13px;
color: rgba(242, 237, 226, 0.88);
line-height: 1.55;
text-align: center;
}
/* ---------- SHOP ---------- */
.shop {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #050403;
}
.shop::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/Background_01.webp") center / cover no-repeat;
filter: brightness(0.75) contrast(1.1) saturate(0.95);
opacity: 0.85;
background-attachment: fixed;
}
.shop::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(5, 4, 3, 0.55) 0%,
rgba(5, 4, 3, 0.7) 50%,
rgba(5, 4, 3, 0.82) 100%
);
}
.shop-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.shop-head__title h2 {
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
}
.shop-head__accent {
color: var(--gold-light);
}
.shop-head__title p {
margin: 6px 0 0;
font-size: var(--section-subtitle-size);
color: var(--section-subtitle-color);
}
.shop-tabs {
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 28px);
flex-wrap: wrap;
flex-shrink: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.shop-tabs__item {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 -1px;
padding: 0 0 10px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
box-shadow: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.shop-tabs__item:hover {
color: var(--gold-light);
}
.shop-tabs__item.is-active {
color: var(--gold-light);
font-weight: 700;
border-bottom-color: var(--gold-light);
}
a.shop-tabs__item {
text-decoration: none;
}
.qadsia-shop-archive .shop-head {
flex-wrap: wrap;
gap: 20px;
}
.qadsia-shop-archive .shop-tabs {
width: 100%;
margin-top: 4px;
}
.shop-tabs-panels {
width: 100%;
}
.shop-tab-panel {
display: none;
}
.shop-tab-panel.is-active {
display: block;
}
.shop-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
}
/* ---- Shop / Squad carousels ---- */
.qadsia-carousel-wrap {
position: relative;
direction: ltr; /* arrows + slide order stay predictable on RTL pages */
width: 100%;
}
.qadsia-carousel-row {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
}
.qadsia-carousel {
position: relative;
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
padding-bottom: 0;
padding-right:12px;
}
.qadsia-carousel .swiper-slide {
height: auto;
box-sizing: border-box;
}
/* Keep gold frame / side chevrons inside the slide (not clipped by overflow).
Do NOT set margin-right here — it breaks Swiper width math / autoplay. */
.roster-carousel .swiper-slide,
.team-sec .swiper-slide {
padding: 26px 6px;
}
.qadsia-carousel .shop-card,
.qadsia-carousel .player-card {
width: 100%;
height: 100%;
}
/* Dots — below the cards, centered */
.qadsia-carousel__dots.swiper-pagination {
position: static !important;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
margin-top: 28px;
padding: 0;
transform: none !important;
}
.qadsia-carousel__dots .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 !important;
background: rgba(203, 154, 61, 0.35);
opacity: 1;
border-radius: 50%;
}
.qadsia-carousel__dots .swiper-pagination-bullet-active {
background: var(--gold-light);
width: 10px;
height: 10px;
}
/* Arrows — outside cards, square gold design */
.qadsia-carousel__arrow {
position: static !important;
flex: 0 0 44px;
width: 44px;
height: 44px;
margin: 0 !important;
inset: auto !important;
display: inline-flex;
align-items: center;
justify-content: center;
color: #c9a24a;
background: #0a0805;
border: 1.5px solid #c9a24a;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
z-index: 2;
}
.qadsia-carousel__arrow svg {
width: 18px;
height: 18px;
display: block;
}
.qadsia-carousel__arrow::after {
display: none !important;
content: none !important;
}
.qadsia-carousel__arrow:hover {
background: rgba(203, 154, 61, 0.12);
border-color: var(--gold-light);
color: var(--gold-light);
}
.qadsia-carousel__arrow.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
/* Matches: hide arrows/dots when slider not active (≤1 mobile / ≤3 desktop) */
.qadsia-carousel-wrap:not(.is-slider-active) > .qadsia-carousel-row > .qadsia-carousel__arrow,
.qadsia-carousel-wrap:not(.is-slider-active) > .qadsia-carousel__dots {
display: none !important;
}
.qadsia-carousel__arrow.swiper-button-lock {
display: none !important;
}
.shop-card {
position: relative;
isolation: isolate;
padding: 28px 22px 3px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
height: 100%;
border: none;
background-color: #050403;
background-image: url("../images/frames/product_frame.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.shop-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(5, 4, 3, 0.35) 0%,
rgba(5, 4, 3, 0.5) 55%,
rgba(5, 4, 3, 0.62) 100%
);
}
.shop-card > * {
position: relative;
z-index: 1;
}
.shop-card__badge {
position: absolute;
top: 4px;
left: 4px;
z-index: 1;
padding: 5px 14px;
font-size: 12px;
font-weight: 700;
color: var(--gold-light);
background: rgba(8, 6, 4, 0.85);
border: 1px solid rgba(201, 146, 42, 0.5);
border-radius: 20px;
}
.shop-card__media {
width: 80%;
aspect-ratio: 1 / 1;
background: transparent;
border: none;
flex-shrink: 0;
}
.shop-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.shop-card h3 {
margin: 0;
width: 100%;
min-height: calc(1.5em * 2); /* reserve 2 lines so buttons align */
font-size: 15px;
font-weight: 700;
line-height: 1.5;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
}
.shop-card h3 a {
color: inherit;
text-decoration: none;
}
.shop-card__price {
margin: 0;
margin-bottom: 11px;
font-size: 16px;
font-weight: 700;
color: var(--gold-light);
}
.shop-card__price del,
.shop-card__price-old {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
text-decoration: line-through;
margin-inline-end: 6px;
}
.shop-card__price ins {
text-decoration: none;
color: var(--gold-light);
}
.shop-card .btn-outline--block {
width: 100%;
max-width: 200px;
justify-content: center;
flex-shrink: 0;
}
/* ---- WooCommerce shop archive (same cards as homepage) ---- */
.qadsia-shop-archive {
padding-top: clamp(48px, 8vw, 96px);
padding-bottom: clamp(48px, 8vw, 96px);
min-height: 50vh;
}
.qadsia-shop-archive .shop-head__title h1,
.qadsia-shop-archive .shop-head__title .page-title {
margin: 0 0 8px;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
line-height: 1.2;
}
.qadsia-shop-archive .shop-head__title .term-description,
.qadsia-shop-archive .shop-head__title .page-description {
margin: 0;
color: var(--section-subtitle-color);
font-size: var(--section-subtitle-size);
}
.qadsia-shop-archive .woocommerce-notices-wrapper {
margin-bottom: 20px;
}
.qadsia-shop-archive .woocommerce-info,
.qadsia-shop-archive .woocommerce-message,
.qadsia-shop-archive .woocommerce-error {
background: rgba(8, 6, 4, 0.9);
border: 1px solid rgba(201, 146, 42, 0.35);
color: var(--text);
padding: 14px 18px;
border-radius: 8px;
}
.qadsia-shop-archive .woocommerce-pagination {
margin-top: 40px;
text-align: center;
}
.qadsia-shop-archive .woocommerce-pagination ul.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.qadsia-shop-archive .woocommerce-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid rgba(201, 146, 42, 0.4);
border-radius: 8px;
color: var(--gold-light);
font-weight: 700;
text-decoration: none;
background: rgba(8, 6, 4, 0.85);
}
.qadsia-shop-archive .woocommerce-pagination .page-numbers.current,
.qadsia-shop-archive .woocommerce-pagination a.page-numbers:hover {
background: #c9a227;
color: #1a1305;
border-color: #c9a227;
}
.qadsia-shop-archive .woocommerce-no-products-found {
text-align: center;
color: var(--text-muted);
padding: 40px 0;
}
/* ---- Single product ---- */
.qadsia-single-shop {
padding-top: clamp(40px, 6vw, 72px);
padding-bottom: clamp(48px, 8vw, 96px);
}
.qadsia-single-product {
color: var(--text);
}
.qadsia-single-product .woocommerce-breadcrumb {
margin: 0 0 28px;
font-size: 13px;
color: var(--text-muted);
text-align: start;
}
.qadsia-single-product .woocommerce-breadcrumb a {
color: var(--gold-light);
}
.qadsia-single-product .woocommerce-breadcrumb a:hover {
text-decoration: underline;
}
.qadsia-single-product .qadsia-product-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 42%));
gap: clamp(28px, 4vw, 56px);
align-items: start;
margin-bottom: 48px;
}
.qadsia-single-product .woocommerce-product-gallery {
position: relative;
width: 100% !important;
max-width: 480px;
float: none !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
/* Never clip thumbs — fixed size belongs on viewport / image wrapper only. */
overflow: visible !important;
height: auto !important;
}
.qadsia-single-product .woocommerce-product-gallery__wrapper {
/* Neutralize Flexslider row/transform — we show slides via .flex-active-slide.
(RTL + max-width fights left Flexslider off-screen / blank main image.) */
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
transition: none !important;
}
.qadsia-single-product .woocommerce-product-gallery .flex-viewport {
position: relative;
z-index: 1;
background-color: #050403;
background-image: url("../images/frames/product_frame.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 0;
border-radius: 0;
overflow: hidden;
width: 100%;
/* Standard fixed box for every product image. */
min-height: 400px;
max-height: 400px;
height: 400px;
}
/* ---- Multi-image (Flexslider) slides: absolute stack ---- */
.qadsia-single-product .woocommerce-product-gallery.flexslider .woocommerce-product-gallery__image {
position: absolute !important;
inset: 0;
float: none !important;
width: 100% !important;
margin: 0 !important;
background: transparent;
border: 0;
border-radius: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
z-index: 1;
pointer-events: none;
}
.qadsia-single-product .woocommerce-product-gallery.flexslider .woocommerce-product-gallery__image.flex-active-slide {
opacity: 1 !important;
visibility: visible !important;
z-index: 2;
pointer-events: auto;
}
.qadsia-single-product .woocommerce-product-gallery.flexslider .woocommerce-product-gallery__image:not(.flex-active-slide) {
opacity: 0 !important;
visibility: hidden !important;
z-index: 1;
pointer-events: none;
}
.qadsia-single-product .woocommerce-product-gallery.flexslider .woocommerce-product-gallery__image img,
.qadsia-single-product .woocommerce-product-gallery.flexslider .wp-post-image {
position: absolute !important;
/* Inset so the gold frame border stays visible around the product */
inset: 7% 6% !important;
z-index: 2;
width: auto !important;
height: auto !important;
max-width: 88% !important;
max-height: 86% !important;
display: block !important;
margin: auto !important;
object-fit: contain;
object-position: center;
background: transparent !important;
opacity: 1;
}
/* ---- Single image (no Flexslider): same fixed box as galleries ---- */
/* Height/overflow only on the image area — never on the gallery root
(that clips .flex-control-thumbs below the main photo). */
.qadsia-single-product .woocommerce-product-gallery:not(.flexslider) {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
height: auto;
}
.qadsia-single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper {
position: relative;
height: 400px !important;
background-color: #050403;
background-image: url("../images/frames/product_frame.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 0;
border-radius: 0;
overflow: hidden;
}
.qadsia-single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image {
position: relative !important;
float: none !important;
width: 100% !important;
height: 400px !important;
margin: 0 !important;
inset: auto !important;
background: transparent;
border: 0;
overflow: hidden;
opacity: 1 !important;
visibility: visible !important;
z-index: 2;
pointer-events: auto;
}
.qadsia-single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image img,
.qadsia-single-product .woocommerce-product-gallery:not(.flexslider) .wp-post-image {
position: absolute !important;
inset: 7% 6% !important;
z-index: 2;
width: auto !important;
height: auto !important;
max-width: 88% !important;
max-height: 86% !important;
display: block !important;
margin: auto !important;
object-fit: contain;
object-position: center;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Kill zoom clone if a plugin still injects it (was covering the photo). */
.qadsia-single-product .woocommerce-product-gallery__image .zoomImg,
.qadsia-single-product .zoomImg {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.qadsia-single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: 12px;
inset-inline-start: 12px;
z-index: 9;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(12, 10, 6, 0.9);
border: 1px solid rgba(201, 146, 42, 0.45);
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
text-indent: -9999px;
overflow: hidden;
pointer-events: auto;
}
.qadsia-single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
border: 2px solid var(--gold-light);
border-radius: 50%;
top: 9px;
inset-inline-start: 9px;
}
.qadsia-single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
content: "";
position: absolute;
width: 7px;
height: 2px;
background: var(--gold-light);
transform: rotate(45deg);
top: 21px;
inset-inline-start: 20px;
}
.qadsia-single-product .flex-control-thumbs {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
margin: 14px 0 0;
padding: 0 !important;
list-style: none;
position: relative;
z-index: 5;
width: 100%;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
}
.qadsia-single-product .flex-control-thumbs li {
width: calc(25% - 9px);
float: none;
margin: 0;
position: relative !important;
inset: auto !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.qadsia-single-product .flex-control-thumbs img {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #0a0805;
opacity: 0.55;
border: 1px solid rgba(201, 146, 42, 0.2);
border-radius: 6px;
cursor: pointer;
display: block !important;
visibility: visible !important;
}
.qadsia-single-product .flex-control-thumbs img.flex-active,
.qadsia-single-product .flex-control-thumbs img:hover {
opacity: 1;
border-color: var(--gold);
}
.qadsia-single-product .onsale {
position: absolute;
top: 16px;
inset-inline-end: 16px;
z-index: 8;
background: #c9a227;
color: #1a1305;
border-radius: 6px;
min-height: auto;
line-height: 1;
padding: 8px 12px;
font-weight: 700;
font-size: 13px;
}
.qadsia-single-product .summary.entry-summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0;
text-align: start;
}
.qadsia-single-product .product_title.entry-title {
font-size: clamp(24px, 3vw, 34px);
font-weight: 800;
line-height: 1.3;
color: #fff;
margin: 0 0 14px;
}
.qadsia-single-product p.price,
.qadsia-single-product span.price,
.qadsia-single-product .summary > .price {
display: block;
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 800;
color: var(--gold-light);
margin: 0 0 20px;
line-height: 1.2;
}
.qadsia-single-product p.price del,
.qadsia-single-product span.price del {
opacity: 0.5;
font-size: 0.7em;
margin-inline-end: 8px;
color: var(--text-muted);
}
.qadsia-single-product p.price ins,
.qadsia-single-product span.price ins {
text-decoration: none;
color: var(--gold-light);
}
.qadsia-single-product .woocommerce-product-details__short-description {
margin: 0 0 22px;
color: var(--text-muted);
font-size: 15px;
line-height: 1.7;
}
.qadsia-single-product table.variations {
width: 100%;
margin: 0 0 12px;
border: 0;
border-collapse: separate;
border-spacing: 0;
}
.qadsia-single-product table.variations tbody tr {
display: block;
margin-bottom: 16px;
}
.qadsia-single-product table.variations th,
.qadsia-single-product table.variations td {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
text-align: start;
vertical-align: top;
}
.qadsia-single-product table.variations label {
display: block;
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.qadsia-single-product table.variations select,
.qadsia-single-product .summary select {
display: block;
width: 100%;
max-width: 100%;
min-height: 48px;
height: 48px;
padding: 0 14px;
border: 1px solid rgba(201, 146, 42, 0.4);
border-radius: 6px;
background: #12100b;
color: #fff;
font-size: 15px;
font-family: inherit;
line-height: 48px;
appearance: auto;
box-sizing: border-box;
}
.qadsia-single-product table.variations .reset_variations {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: var(--gold-light);
}
.qadsia-single-product .woocommerce-variation-availability,
.qadsia-single-product .stock {
margin: 10px 0 16px;
font-size: 14px;
font-weight: 600;
color: var(--gold-light);
}
.qadsia-single-product form.cart {
margin: 0 0 24px;
}
.qadsia-single-product form.cart .woocommerce-variation-add-to-cart,
.qadsia-single-product form.cart:not(.variations_form) {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 12px;
}
.qadsia-single-product form.cart .quantity {
margin: 0 !important;
float: none !important;
display: flex;
align-items: stretch;
}
.qadsia-single-product form.cart .quantity .qty,
.qadsia-single-product form.cart input.qty {
width: 72px;
height: 48px !important;
min-height: 48px !important;
max-height: 48px;
padding: 0 10px !important;
border: 1px solid rgba(201, 146, 42, 0.45) !important;
border-radius: 6px !important;
background: #12100b !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 600;
font-family: inherit;
line-height: 46px !important;
text-align: center;
box-sizing: border-box;
-moz-appearance: textfield;
appearance: textfield;
}
.qadsia-single-product form.cart .quantity .qty::-webkit-outer-spin-button,
.qadsia-single-product form.cart .quantity .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qadsia-single-product form.cart .single_add_to_cart_button,
.qadsia-single-product form.cart button.single_add_to_cart_button,
.qadsia-single-product form.cart button.button,
.qadsia-single-product form.cart .button.alt {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 48px !important;
min-height: 48px !important;
max-height: 48px;
padding: 0 28px !important;
margin: 0 !important;
border: 1px solid #c9a227 !important;
border-radius: 6px !important;
background: #c9a227 !important;
background-image: none !important;
color: #1a1305 !important;
font-size: 15px !important;
font-weight: 700 !important;
font-family: inherit !important;
line-height: 1 !important;
cursor: pointer;
box-shadow: none !important;
text-shadow: none !important;
white-space: nowrap;
}
.qadsia-single-product form.cart .single_add_to_cart_button:hover,
.qadsia-single-product form.cart button.single_add_to_cart_button:hover,
.qadsia-single-product form.cart button.button:hover,
.qadsia-single-product form.cart .button.alt:hover {
filter: brightness(1.06);
background: #d4ae35 !important;
background-image: none !important;
color: #1a1305 !important;
border-color: #d4ae35 !important;
}
.qadsia-single-product .product_meta {
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid rgba(201, 146, 42, 0.22);
font-size: 13px;
color: var(--text-muted);
line-height: 1.8;
}
.qadsia-single-product .product_meta a {
color: var(--gold-light);
}
.qadsia-single-product .woocommerce-tabs {
margin: 0 0 48px;
}
/* Match homepage/shop tab underline style (no grey/white tab boxes) */
.qadsia-single-product .woocommerce-tabs ul.tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(16px, 2.4vw, 28px);
margin: 0 0 18px !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
background: transparent !important;
overflow: visible;
}
.qadsia-single-product .woocommerce-tabs ul.tabs::before,
.qadsia-single-product .woocommerce-tabs ul.tabs::after {
display: none !important;
content: none !important;
}
.qadsia-single-product .woocommerce-tabs ul.tabs li {
margin: 0 0 -1px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.qadsia-single-product .woocommerce-tabs ul.tabs li::before,
.qadsia-single-product .woocommerce-tabs ul.tabs li::after {
display: none !important;
content: none !important;
border: 0 !important;
box-shadow: none !important;
}
.qadsia-single-product .woocommerce-tabs ul.tabs li a {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 0 10px !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-decoration: none !important;
box-shadow: none !important;
white-space: nowrap;
}
.qadsia-single-product .woocommerce-tabs ul.tabs li.active a,
.qadsia-single-product .woocommerce-tabs ul.tabs li a:hover,
.qadsia-single-product .woocommerce-tabs ul.tabs li a:focus {
color: var(--gold-light) !important;
font-weight: 700 !important;
border-bottom-color: var(--gold-light) !important;
background: transparent !important;
}
.qadsia-single-product .woocommerce-tabs .panel {
margin: 0;
padding: 8px 0 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--text-muted);
line-height: 1.7;
}
.qadsia-single-product .woocommerce-tabs .panel h2 {
color: #fff;
font-size: 18px;
margin: 0 0 12px;
}
.qadsia-single-product .woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
}
.qadsia-single-product .woocommerce-product-attributes th,
.qadsia-single-product .woocommerce-product-attributes td {
padding: 10px 12px;
border: 1px solid rgba(201, 146, 42, 0.22);
text-align: start;
color: var(--text);
}
.qadsia-single-product .woocommerce-product-attributes th {
width: 30%;
color: var(--gold-light);
background: rgba(8, 6, 4, 0.6);
}
.qadsia-related-products {
margin-top: 24px;
}
.qadsia-related-title {
margin: 0 0 24px;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
text-align: start;
}
.qadsia-single-product .woocommerce-noreviews,
.qadsia-single-product .comment-reply-title,
.qadsia-single-product .woocommerce-Reviews-title {
color: #fff;
}
.qadsia-single-product .comment-form input[type="text"],
.qadsia-single-product .comment-form input[type="email"],
.qadsia-single-product .comment-form textarea,
.qadsia-single-product .comment-form select {
width: 100%;
max-width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid rgba(201, 146, 42, 0.35);
border-radius: 6px;
background: #12100b;
color: #fff;
font-family: inherit;
box-sizing: border-box;
}
.qadsia-single-product .comment-form .submit {
min-height: 44px;
padding: 10px 22px;
border: 0;
border-radius: 6px;
background: #c9a227;
color: #1a1305;
font-weight: 700;
font-family: inherit;
cursor: pointer;
}
/* ---- WooCommerce notices (add to cart, etc.) — dark theme ---- */
body:not(.wp-admin) .woocommerce-notices-wrapper {
margin-bottom: 20px;
}
body:not(.wp-admin) .woocommerce-message,
body:not(.wp-admin) .woocommerce-info,
body:not(.wp-admin) .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.qadsia-single-shop .woocommerce-message,
.qadsia-single-shop .woocommerce-info,
.qadsia-single-shop .woocommerce-error {
background: transparent !important;
background-color: transparent !important;
border: 1px solid rgba(201, 146, 42, 0.45) !important;
border-top: 1px solid rgba(201, 146, 42, 0.45) !important;
border-radius: 8px !important;
color: var(--gold-light) !important;
padding: 14px 18px !important;
box-shadow: none !important;
list-style: none !important;
}
body:not(.wp-admin) .woocommerce-message::before,
body:not(.wp-admin) .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
color: var(--gold-light) !important;
}
body:not(.wp-admin) .woocommerce-error::before,
.woocommerce .woocommerce-error::before {
color: #e57373 !important;
}
body:not(.wp-admin) .woocommerce-message a,
body:not(.wp-admin) .woocommerce-info a,
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a {
color: var(--gold-light) !important;
}
body:not(.wp-admin) .woocommerce-message .button,
body:not(.wp-admin) .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce-message a.button.wc-forward {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 18px !important;
margin: 0 !important;
border: 1px solid var(--gold) !important;
border-radius: 6px !important;
background: #c9a227 !important;
background-image: none !important;
color: #1a1305 !important;
font-weight: 700 !important;
font-family: inherit !important;
font-size: 13px !important;
text-decoration: none !important;
box-shadow: none !important;
float: none !important;
}
body:not(.wp-admin) .woocommerce-message .button:hover,
body:not(.wp-admin) .woocommerce-info .button:hover,
.woocommerce .woocommerce-message .button:hover,
.woocommerce-message a.button.wc-forward:hover {
background: #d4ae35 !important;
color: #1a1305 !important;
border-color: #d4ae35 !important;
}
/* ---- Cart / Checkout / Account forms — dark theme inputs ---- */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-page .woocommerce {
color: var(--text);
}
/* Keep cart / checkout / account content inside theme container */
.qadsia-cart-page,
.qadsia-checkout-page,
.qadsia-account-page,
.qadsia-page {
padding-top: 48px;
padding-bottom: 64px;
}
.qadsia-page-head {
text-align: center;
margin-bottom: 28px;
}
.qadsia-page-head__title {
margin: 0;
text-align: center;
}
.qadsia-page-head__title::after {
display: none; /* gold line comes from under_textline.svg */
}
.qadsia-page-head__divider {
display: flex;
justify-content: center;
margin: 10px 0 0;
}
.qadsia-page-head__divider .section-underline {
display: block;
width: min(220px, 55%);
height: auto;
}
/* Hide duplicate block cart title if theme heading is shown */
.qadsia-cart-page .wp-block-woocommerce-cart-title-block,
.qadsia-checkout-page .wp-block-woocommerce-checkout-title-block {
display: none;
}
.qadsia-cart-page .container,
.qadsia-checkout-page .container,
.qadsia-account-page .container,
body.woocommerce-cart main > .container,
body.woocommerce-checkout main > .container,
body.woocommerce-account main > .container {
width: min(1200px, calc(100% - 48px));
margin-inline: auto;
}
.qadsia-cart-page .woocommerce,
.qadsia-checkout-page .woocommerce,
.qadsia-account-page .woocommerce,
.qadsia-cart-page .wp-block-woocommerce-cart,
.qadsia-checkout-page .wp-block-woocommerce-checkout,
.qadsia-cart-page .wc-block-cart,
.qadsia-checkout-page .wc-block-checkout {
width: 100%;
max-width: 100%;
}
body.woocommerce-cart .woocommerce form .form-row label,
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-account .woocommerce form .form-row label,
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label,
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox label {
color: var(--text) !important;
}
body.woocommerce-cart .woocommerce input.input-text,
body.woocommerce-cart .woocommerce select,
body.woocommerce-cart .woocommerce textarea,
body.woocommerce-checkout .woocommerce input.input-text,
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea,
body.woocommerce-account .woocommerce input.input-text,
body.woocommerce-account .woocommerce select,
body.woocommerce-account .woocommerce textarea,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
background: transparent !important;
background-color: transparent !important;
border: 1px solid rgba(201, 146, 42, 0.4) !important;
border-radius: 6px !important;
color: #fff !important;
box-shadow: none !important;
min-height: 44px;
}
.woocommerce form .input-text::placeholder,
.woocommerce form textarea::placeholder,
body.woocommerce-checkout .woocommerce input.input-text::placeholder {
color: rgba(242, 237, 226, 0.45) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #fff !important;
line-height: 42px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 42px !important;
}
.select2-dropdown,
.select2-container--open .select2-dropdown {
background: #12100b !important;
border: 1px solid rgba(201, 146, 42, 0.4) !important;
color: #fff !important;
}
.select2-container--default .select2-results__option {
background: #12100b !important;
color: #fff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: rgba(201, 146, 42, 0.25) !important;
color: var(--gold-light) !important;
}
/* WooCommerce Blocks checkout */
.wc-block-checkout,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
color: var(--text);
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wc-block-components-combobox input,
.wc-block-components-textarea textarea,
.wc-block-components-text-input .wc-block-components-text-input__input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
background: transparent !important;
background-color: transparent !important;
border: 1px solid rgba(201, 146, 42, 0.4) !important;
border-radius: 6px !important;
color: #fff !important;
box-shadow: none !important;
}
.wc-block-components-text-input input::placeholder,
.wc-block-components-combobox input::placeholder,
.wc-block-components-textarea textarea::placeholder {
color: rgba(242, 237, 226, 0.45) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label,
.wc-block-components-title,
.wc-block-components-totals-item,
.wc-block-components-order-summary,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__description {
color: var(--text) !important;
}
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
background: transparent !important;
border-color: rgba(201, 146, 42, 0.25) !important;
}
.wc-block-components-sidebar {
padding-right: 2.2641509434%;
}
.wc-block-components-sidebar-layout .wc-block-components-main {
padding-left: 4.528302%;
}
.wp-block-woocommerce-checkout-order-summary-block {
padding: 0 17px;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
background: rgb(253, 185, 18) !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
color: #000000 !important;
}
.wc-blocks-components-select .wc-blocks-components-select__select {
background: #0a0805 !important;
}
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
background: #c9a227 !important;
background-image: none !important;
border: 1px solid #c9a227 !important;
border-radius: 6px !important;
color: #1a1305 !important;
font-weight: 700 !important;
box-shadow: none !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
background: #d4ae35 !important;
color: #1a1305 !important;
}
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
background: transparent !important;
border: 1px solid rgba(201, 146, 42, 0.45) !important;
color: var(--gold-light) !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner a {
color: var(--gold-light) !important;
}
.woocommerce table.shop_table,
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
border-color: rgba(201, 146, 42, 0.25) !important;
background: transparent !important;
color: var(--text) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
border-color: rgba(201, 146, 42, 0.2) !important;
background: transparent !important;
color: var(--text) !important;
}
.woocommerce a.remove {
color: var(--gold-light) !important;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
background: #c9a227 !important;
background-image: none !important;
border: 1px solid #c9a227 !important;
border-radius: 6px !important;
color: #1a1305 !important;
font-weight: 700 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
background: #d4ae35 !important;
color: #1a1305 !important;
}
/* Tabs hidden for now (squad + matches) */
.team-tabs,
.matches-tabs {
display: none !important;
}
.fixture-card__actions--centre-only {
justify-content: center;
}
.fixture-card__actions--centre-only .btn-gold--fixture {
margin-inline: auto;
}
.matches-carousel .fixture-card {
height: 100%;
}
/*
* Desktop: 1–2 matches keep normal card width (same as 3-col), right-aligned.
* .qadsia-carousel uses flex:1 which otherwise stretches a single slide full-width.
*/
@media (min-width: 961px) {
.qadsia-carousel-wrap[data-matches-count="1"] .qadsia-carousel-row,
.qadsia-carousel-wrap[data-matches-count="2"] .qadsia-carousel-row {
justify-content: flex-end;
}
.qadsia-carousel-wrap[data-matches-count="1"] .matches-carousel,
.qadsia-carousel-wrap[data-matches-count="2"] .matches-carousel {
flex: 0 0 auto;
margin-inline-start: auto;
margin-inline-end: 0;
}
.qadsia-carousel-wrap[data-matches-count="1"] .matches-carousel {
width: 380px;
max-width: 100%;
}
.qadsia-carousel-wrap[data-matches-count="2"] .matches-carousel {
width: calc(380px * 2 + 18px);
max-width: 100%;
}
.qadsia-carousel-wrap[data-matches-count="1"] .fixture-card,
.qadsia-carousel-wrap[data-matches-count="2"] .fixture-card {
max-width: 380px;
width: 100%;
margin-inline-start: auto;
margin-inline-end: 0;
}
}
.matches-empty {
text-align: center;
color: var(--text-muted);
padding: 24px 0;
}
.btn-outline--block {
gap: 8px;
}
.btn-outline--block svg { width: 16px; height: 16px; }
.btn-outline__icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.shop-more {
display: flex;
justify-content: center;
margin-top: 36px;
}
.shop-more__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 26px;
border-radius: 8px;
border: 1px solid rgba(201, 146, 42, 0.5);
color: var(--gold-light);
font-size: 14px;
font-weight: 700;
transition: background 0.2s ease, border-color 0.2s ease;
}
.shop-more__btn svg { width: 16px; height: 16px; }
.shop-more__btn:hover {
background: rgba(201, 146, 42, 0.12);
border-color: var(--gold-light);
}
/* ---------- ROSTER ---------- */
.team-sec {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #050403;
}
.team-sec::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/Background_08.webp") center / cover no-repeat;
filter: brightness(0.8) contrast(1.05);
opacity: 0.9;
background-attachment: fixed;
}
.team-sec::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(5, 4, 3, 0.5) 0%,
rgba(5, 4, 3, 0.65) 50%,
rgba(5, 4, 3, 0.78) 100%
);
}
.team-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.team-head__title h2 {
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
}
.team-head__title p {
margin: 6px 0 0;
font-size: var(--section-subtitle-size);
color: var(--section-subtitle-color);
}
.team-tabs {
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 28px);
flex-wrap: wrap;
}
.team-tabs__item {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
padding-bottom: 8px;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.team-tabs__item:hover { color: var(--text); }
.team-tabs__item.is-active {
color: var(--gold-light);
font-weight: 700;
border-bottom-color: var(--gold);
}
.roster-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.player-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
aspect-ratio: 1054 / 1492;
padding: 14px 12px 12px;
text-align: center;
border: none;
border-radius: 0;
overflow: visible;
background-image: url("../images/player_frame.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.player-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(5, 4, 3, 0.12) 0%,
rgba(5, 4, 3, 0.2) 55%,
rgba(5, 4, 3, 0.4) 100%
);
}
.player-card > * {
position: relative;
z-index: 1;
}
.player-card__media {
flex: 1 1 auto;
width: 100%;
min-height: 0;
aspect-ratio: auto;
max-height: none;
border: none;
border-radius: 0;
overflow: hidden;
background: transparent;
}
.player-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 0;
}
.player-card__info {
direction: ltr;
flex: 0 0 23%;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px 6px;
box-sizing: border-box;
min-height: 0;
border-top: none;
text-align: initial;
}
.player-card__badge {
width: 32px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.player-card__badge img {
width: 100%;
height: 100%;
object-fit: contain;
}
.player-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0;
min-width: 0;
line-height: 1.25;
}
.player-card__top {
display: flex;
align-items: baseline;
gap: 8px;
}
.player-card__num {
font-size: 30px;
font-weight: 800;
color: var(--gold-light);
line-height: 1;
flex-shrink: 0;
}
.player-card__top h3 {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #fff;
white-space: nowrap;
direction: rtl;
line-height: 1.2;
}
.player-card__squad {
font-size: 11px;
font-weight: 500;
color: rgba(242, 237, 226, 0.85);
line-height: 1.3;
}
.player-card__sport {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #fff;
line-height: 1.3;
}
.player-card__sport-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ---------- DISCOVER QADSIA ---------- */
.discover {
position: relative;
isolation: isolate;
overflow: hidden;
}
.discover::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url(../images/Background_08.webp) center / cover no-repeat;
filter: brightness(0.8) contrast(1.05);
opacity: 0.4;
background-attachment: fixed;
}
.discover::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.discover-head {
text-align: center;
margin-bottom: 32px;
}
.discover-head__title {
margin: 0;
font-size: var(--section-title-size);
font-weight: 800;
color: var(--section-title-color);
background: none;
-webkit-background-clip: unset;
background-clip: unset;
}
.discover-head__divider {
display: flex;
align-items: center;
justify-content: center;
margin: 14px 0 12px;
}
.discover-head__subtitle {
margin: 0;
font-size: var(--section-subtitle-size);
color: var(--section-subtitle-color);
}
.section-underline {
display: block;
/* width: min(520px, 70%); */
max-width: 100%;
height: auto;
object-fit: contain;
}
.discover-timeline {
display: flex;
flex-direction: column;
gap: clamp(36px, 5vw, 64px);
position: relative;
}
.discover-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0;
width: 100%;
direction: ltr;
}
/* 01 centered on the frame's mid connector circle */
.discover-card__marker {
position: relative;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: clamp(64px, 8vw, 92px);
height: 89%;
min-height: 1px;
flex-shrink: 0;
margin-inline-end: -22px;
align-self: stretch;
}
.discover-card__num {
position: relative;
z-index: 1;
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 800;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(253, 185, 18, 0.85);
transform: translateY(-2px);
}
.discover-card__label {
position: absolute;
top: calc(50% + 20px);
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
color: var(--gold-light);
white-space: nowrap;
text-align: center;
line-height: 1.2;
}
.discover-card__frame {
position: relative;
width: 100%;
aspect-ratio: 800 / 300;
box-sizing: border-box;
overflow: hidden;
}
/* Gold HUD border only (fill is transparent in the PNG) */
.discover-card__frame-border {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
z-index: 5;
}
.discover-card__frame::before {
display: none;
}
/*
Inner opening of 800x300 frame:
top/bottom ~12%/7%, left ~9%, right ~2%, angled split ~50%.
*/
.discover-card__body {
position: absolute;
z-index: 1;
top: 12%;
bottom: 6%;
left: 0.5%;
right: 1.6%;
display: grid;
grid-template-columns: minmax(0, 45%) minmax(0, 55%);
gap: 0;
align-items: stretch;
min-width: 0;
overflow: hidden;
}
.discover-card__content {
grid-column: 1;
grid-row: 1;
position: relative;
z-index: 2;
direction: rtl;
/* text-align: right; */
min-width: 0;
max-width: 82%;
height: 100%;
box-sizing: border-box;
padding: clamp(8px, 1.5vw, 18px) clamp(10px, 1.8vw, 20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
/* overflow: hidden; */
background: rgba(5, 5, 5, 0.92);
color: #fff;
margin-left: auto;
}
.discover-card__content::after{
content: "";
position: absolute;
inset: 0;
z-index: 9;
width: 22%;
/* background: #00000099; */
right: -75px;
background: linear-gradient(269deg,rgba(255, 255, 255, 0.09) 0%, rgb(6 6 5) 82%)
;
}
.discover-card--flip .discover-card__content::after{
width: 16%;
/* background: #00000099; */
left: -60px;
background: linear-gradient(90deg, rgb(90 90 90 / 9%) 0%, rgb(8 8 8) 82%);
}
.discover-card__year {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 700;
color: var(--gold-light);
letter-spacing: 0.02em;
}
.discover-card__year-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(72%) sepia(68%) saturate(700%) hue-rotate(5deg) brightness(105%);
}
.discover-card__content h3 {
margin: 10px 0 0;
font-size: clamp(14px, 1.7vw, 22px);
font-weight: 800;
line-height: 1.35;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.discover-card__content p {
margin: 8px 0 0;
font-size: clamp(12px, 1.1vw, 14px);
color: rgba(255, 255, 255, 0.85);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.discover-card__link {
margin-top: clamp(10px, 1.4vw, 16px);
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
padding: 8px 16px;
border-radius: 4px;
border: 1px solid rgba(201, 146, 42, 0.65);
background: rgba(8, 6, 4, 0.55);
font-size: 12px;
font-weight: 700;
color: var(--gold-light);
transition: background 0.2s ease, border-color 0.2s ease;
}
.discover-card__link svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.discover-card__link:hover {
background: rgba(201, 146, 42, 0.14);
border-color: var(--gold-light);
}
.discover-card__media {
grid-column: 2;
grid-row: 1;
position: relative;
z-index: 1;
min-width: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #0a0805;
clip-path: polygon(0px 0, calc(100% - 75px) 0, 100% 75px, 100% 100%, 0 100%, 0 60px);
}
.discover-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
filter: grayscale(0.3) contrast(1.05);
box-shadow: inset 120px 0 80px -40px rgba(0,0,0,.9);
}
.discover-card__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(
to top,
rgba(203, 154, 61, 0.5) 0%,
rgba(203, 154, 61, 0.15) 45%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
/* Even cards (02, 04): opposite */
.discover-card--flip {
grid-template-columns: minmax(0, 1fr) auto;
}
.discover-card--flip .discover-card__marker {
order: 2;
margin-inline-end: 0;
margin-inline-start: -18px;
}
.discover-card--flip .discover-card__frame {
order: 1;
}
.discover-card--flip .discover-card__frame-border {
transform: scaleX(-1);
}
.discover-card--flip .discover-card__body {
left: 1.7%;
right: 2.5%;
grid-template-columns: minmax(0, 55%) minmax(0, 45%);
}
.discover-card--flip .discover-card__media {
grid-column: 1;
clip-path: polygon( 73px 0px,100% 0px,100% 100%,0 100%,0 72px);
}
.discover-card--flip .discover-card__content {
grid-column: 2;
direction: ltr;
max-width: 86%;
margin-left:unset;
}
/* ---------- ACHIEVEMENTS ---------- */
.achievements {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #050403;
}
.achievements .section-title {
padding-bottom: 0;
text-align: center;
}
.achievements .section-title::after {
display: none;
}
.achievements-head__divider {
display: flex;
align-items: center;
justify-content: center;
margin: 14px 0 12px;
}
.achievements::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/Background_08.webp") center / cover no-repeat;
filter: brightness(0.72) contrast(1.08) saturate(0.95);
opacity: 0.88;
background-attachment: fixed;
}
.achievements::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.achievements-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 28px);
align-items: stretch;
}
.achievements-carousel-wrap {
margin-top: 8px;
}
.achievements-carousel .swiper-slide {
height: auto;
display: flex;
justify-content: center;
}
.achievements-carousel .achieve-card {
width: 100%;
max-width: 280px;
}
.achieve-card__body--image {
inset: 7% 8% 8%;
padding: 0;
overflow: hidden;
}
.achieve-card__photo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.achieve-card {
position: relative;
aspect-ratio: 504 / 580;
width: 100%;
max-width: 280px;
margin-inline: auto;
overflow: hidden;
}
.achieve-card__frame {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
z-index: 3;
}
.achieve-card__body {
position: absolute;
z-index: 2;
inset: 8% 9% 9%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0;
direction: rtl;
}
.achieve-card__icon {
width: 50%;
/* height: clamp(52px, 6vw, 72px); */
/* border-radius: 50%; */
/* border: 1px solid rgba(253, 185, 18, 0.65); */
/* background: rgba(10, 8, 5, 0.75); */
/* box-shadow: 0 0 18px rgba(253, 185, 18, 0.28); */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.achieve-card__icon img {
width: 100%;
height: 100%;
}
.achieve-card__title {
margin: 14px 0 0;
font-size: clamp(14px, 1.35vw, 18px);
font-weight: 800;
color: #fff;
line-height: 1.35;
}
.achieve-card__stat {
margin-top: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.achieve-card__stat strong {
font-size: clamp(34px, 3.6vw, 48px);
font-weight: 800;
color: #d6b163;
line-height: 1;
}
.achieve-card__laurel {
width: 18px;
height: 32px;
color: #d6b163;
flex-shrink: 0;
opacity: 0.9;
}
.achieve-card__laurel--flip {
transform: scaleX(-1);
}
.achieve-card__label {
margin-top: 6px;
font-size: clamp(12px, 1.1vw, 14px);
font-weight: 600;
color: rgba(242, 237, 226, 0.92);
}
.achieve-card__divider {
width: 72%;
max-width: 140px;
height: 1px;
margin: 16px 0 12px;
background: linear-gradient(
90deg,
transparent,
rgba(253, 185, 18, 0.65) 20%,
rgba(253, 185, 18, 0.65) 80%,
transparent
);
}
.achieve-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: clamp(12px, 1.1vw, 14px);
font-weight: 700;
color: var(--gold-light);
transition: opacity 0.2s ease;
}
.achieve-card__link svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.achieve-card__link:hover {
opacity: 0.85;
}
/* ---------- FANS ---------- */
.fans {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #050403;
}
.fans::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/Background_01.webp") center / cover no-repeat;
filter: brightness(0.72) contrast(1.08) saturate(0.95);
opacity: 0.9;
background-attachment: fixed;
}
.fans::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(5, 4, 3, 0.55) 0%,
rgba(5, 4, 3, 0.45) 45%,
rgba(5, 4, 3, 0.72) 100%
);
}
.fans-banner {
position: relative;
direction: ltr;
width: 100%;
aspect-ratio: 1432 / 653;
overflow: hidden;
}
.fans-banner__border {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
z-index: 5;
}
/*
fan_frame panes (1432×653):
left box ~2.3% → 44% (content)
right box ~44% → 97.5% (image) with left-side chamfers
*/
.fans-banner__media {
position: absolute;
z-index: 1;
top: 6.4%;
bottom: 6.6%;
left: 44.2%;
right: 2.8%;
width: auto;
padding: 0;
background: #0a0805;
transform: none;
overflow: hidden;
/* Match frame: angled cuts on image's left (divider) side */
clip-path: polygon(
7% 0,
100% 0,
100% 100%,
12% 100%,
0 84%,
0 11%
)
}
.fans-banner__media-inner {
width: 100%;
height: 100%;
clip-path: none;
}
.fans-banner__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
.fans-banner__content {
position: absolute;
z-index: 2;
top: 9%;
bottom: 9%;
left: 4%;
right: 58%;
direction: rtl;
overflow: hidden;
box-sizing: border-box;
padding: clamp(10px, 1.4vw, 22px) clamp(12px, 1.8vw, 28px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 0;
border-radius: 0;
background: transparent;
}
.fans-banner__content h2 {
margin: 0;
font-size: clamp(22px, 2.6vw, 36px);
font-weight: 800;
color: var(--gold-light);
line-height: 1.25;
}
.fans-banner__content h3 {
margin: 6px 0 0;
font-size: clamp(13px, 1.4vw, 18px);
font-weight: 700;
color: var(--gold-light);
line-height: 1.35;
}
.fans-banner__content p {
margin: 10px 0 0;
max-width: 380px;
font-size: clamp(11px, 1.05vw, 14px);
font-weight: 400;
color: rgba(242, 237, 226, 0.88);
line-height: 1.65;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fans-banner__cta.btn-outline {
margin-top: 14px;
padding: 10px 28px;
min-width: min(100%, 260px);
border-radius: 8px;
border: 1px solid rgba(201, 146, 42, 0.75);
color: var(--gold-light);
font-size: clamp(12px, 1.1vw, 14px);
font-weight: 700;
flex-shrink: 0;
background: transparent;
}
.fans-banner__cta.btn-outline .btn-outline__icon {
width: 16px;
height: 16px;
filter: brightness(0) saturate(100%) invert(72%) sepia(68%) saturate(700%) hue-rotate(5deg) brightness(105%);
}
.fans-perks {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
width: min(100%, 380px);
margin: 16px 0 0;
flex-shrink: 0;
}
.fans-perks__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: auto;
min-height: 0;
padding: 0 8px;
text-align: center;
box-sizing: border-box;
}
.fans-perks__item:not(:last-child) {
border-inline-end: 1px solid rgba(201, 146, 42, 0.22);
}
.fans-perks__item img {
width: 24px;
height: 24px;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(72%) sepia(68%) saturate(700%) hue-rotate(5deg) brightness(105%);
}
.fans-perks__item span {
display: block;
min-height: 2.6em;
font-size: clamp(9px, 0.95vw, 11px);
font-weight: 500;
color: rgba(242, 237, 226, 0.9);
line-height: 1.35;
}
.fans-banner__note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
flex-shrink: 0;
}
.fans-banner__note svg {
width: 16px;
height: 16px;
color: var(--gold-light);
flex-shrink: 0;
}
.fans-banner__note span {
font-size: clamp(10px, 1vw, 12px);
color: rgba(242, 237, 226, 0.85);
}
/* ---------- FANS STATS (inside #fans) ---------- */
.fans .sponsors-stats {
margin-top: 0px;
display: flex;
align-items: stretch;
width: 83%;
direction: ltr;
border-radius: 16px;
overflow: hidden;
margin: 0px auto ;
}
.fans .sponsors-stats__item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 18px;
min-width: 0;
}
.fans .sponsors-stats__item:not(:last-child) {
border-inline-end: 1px solid rgba(201, 146, 42, 0.45);
}
.fans .sponsors-stats__icon {
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: contain;
display: block;
}
.fans .sponsors-stats__text {
display: flex;
flex-direction: column;
gap: 4px;
text-align: right;
direction: rtl;
min-width: 0;
}
.fans .sponsors-stats__text strong {
font-size: 18px;
font-weight: 800;
color: var(--gold-light);
line-height: 1.2;
white-space: nowrap;
}
.fans .sponsors-stats__text span {
font-size: 13px;
font-weight: 500;
color: #ffffff;
line-height: 1.3;
}
/* ---------- FOOTER ---------- */
.site-footer {
position: relative;
isolation: isolate;
background: var(--bg);
padding-top: 120px;
}
.site-footer::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 auto 0;
height: 300px;
background:
linear-gradient(180deg, rgba(5, 4, 3, 0.15) 0%, rgba(5, 4, 3, 0.75) 60%, var(--bg) 100%),
url("../images/footer/footer-bg.webp") top center / 100% auto no-repeat;
}
.site-footer__badge-wrap {
position: absolute;
z-index: 2;
top: -28px;
inset-inline: 0;
display: flex;
justify-content: center;
pointer-events: none;
}
.site-footer__badge {
width: 100px;
height: auto;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(var(--footer-cols, 5), minmax(0, 1fr));
gap: 0;
padding-bottom: 36px;
width: 100%;
}
.site-footer__col {
text-align: center;
padding: 0 clamp(12px, 1.5vw, 24px);
border-left: 1px solid rgba(201, 146, 42, 0.2);
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.site-footer__col:last-child { border-left: none; }
.site-footer__col h4,
.site-footer__col .footer-widget__title,
.site-footer__col .widgettitle {
position: relative;
margin: 0 0 20px;
padding-bottom: 12px;
font-size: 15px;
font-weight: 700;
color: var(--gold-light);
}
.site-footer__col h4::after,
.site-footer__col .footer-widget__title::after,
.site-footer__col .widgettitle::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 36px;
height: 3px;
border-radius: 2px;
background: var(--gold-light);
}
.site-footer__col a {
display: block;
font-size: 13px;
color: var(--text-muted);
padding: 5px 0;
}
.site-footer__col a:hover { color: var(--gold-light); }
.site-footer__col--about p,
.site-footer__col .site-footer__col--about p {
margin: 0;
font-size: 13px;
color: var(--text-muted);
line-height: 1.7;
}
/* WP widget wrappers (Custom HTML / Text / menus) */
.site-footer__col .footer-widget,
.site-footer__col .widget {
margin: 0;
padding: 0;
}
.site-footer__col .custom-html-widget,
.site-footer__col .textwidget,
.site-footer__col .footer-widget__html {
font-size: 13px;
color: var(--text-muted);
line-height: 1.7;
}
.site-footer__col .custom-html-widget p,
.site-footer__col .textwidget p,
.site-footer__col .footer-widget__html p {
margin: 0 0 8px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.7;
}
.site-footer__col .custom-html-widget p:last-child,
.site-footer__col .textwidget p:last-child,
.site-footer__col .footer-widget__html p:last-child {
margin-bottom: 0;
}
.site-footer__col .footer-widget ul,
.site-footer__col .custom-html-widget ul,
.site-footer__col .textwidget ul,
.site-footer__col .footer-widget__html ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__col .footer-widget .menu li a,
.site-footer__col .footer-widget ul li a,
.site-footer__col .custom-html-widget ul li a,
.site-footer__col .textwidget ul li a,
.site-footer__col .footer-widget__html a,
.site-footer__col .custom-html-widget a,
.site-footer__col .textwidget a {
display: block;
font-size: 13px;
color: var(--text-muted);
padding: 5px 0;
}
.site-footer__col .footer-widget .menu li a:hover,
.site-footer__col .footer-widget ul li a:hover,
.site-footer__col .custom-html-widget a:hover,
.site-footer__col .textwidget a:hover,
.site-footer__col .footer-widget__html a:hover {
color: var(--gold-light);
}
/* Contact list — icon + text in one row */
.site-footer__col .site-footer__contact,
.site-footer__col .custom-html-widget .site-footer__contact,
.site-footer__col .textwidget .site-footer__contact,
.site-footer__contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__col .site-footer__contact li,
.site-footer__col .custom-html-widget .site-footer__contact li,
.site-footer__contact li {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.site-footer__col .site-footer__contact a,
.site-footer__col .site-footer__contact li > span,
.site-footer__col .custom-html-widget .site-footer__contact a,
.site-footer__col .custom-html-widget .site-footer__contact li > span,
.site-footer__contact a,
.site-footer__contact li > span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
text-align: start;
color: var(--text-muted);
padding: 0;
width: 100%;
}
.site-footer__col .site-footer__contact a span,
.site-footer__col .site-footer__contact li > span span,
.site-footer__col .custom-html-widget .site-footer__contact a span,
.site-footer__col .custom-html-widget .site-footer__contact li > span span,
.site-footer__contact a span,
.site-footer__contact li > span span {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}
.site-footer__col .site-footer__contact a:hover,
.site-footer__col .site-footer__contact a:hover span,
.site-footer__col .custom-html-widget .site-footer__contact a:hover,
.site-footer__col .custom-html-widget .site-footer__contact a:hover span,
.site-footer__contact a:hover,
.site-footer__contact a:hover span {
color: var(--gold-light);
}
.site-footer__col .site-footer__contact a:hover svg,
.site-footer__col .custom-html-widget .site-footer__contact a:hover svg,
.site-footer__contact a:hover svg {
color: var(--gold-light);
}
.site-footer__col .site-footer__contact svg,
.site-footer__col .custom-html-widget .site-footer__contact svg,
.site-footer__contact svg {
width: 18px;
height: 18px;
color: var(--gold);
flex-shrink: 0;
display: block;
margin: 0;
}
/* If Custom HTML wraps each contact row in */
.site-footer__col .custom-html-widget .site-footer__contact + p,
.site-footer__col .custom-html-widget p:has(svg),
.site-footer__col .custom-html-widget p:has(a[href^="mailto"]),
.site-footer__col .custom-html-widget p:has(a[href^="tel"]) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 12px;
text-align: start;
}
.site-footer__divider {
display: flex;
align-items: center;
justify-content: center;
margin: 4px 0 28px;
}
.site-footer__border {
display: block;
width: min(900px, 100%);
height: auto;
object-fit: contain;
}
.site-footer__sponsors {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-bottom: 32px;
gap: 8px 0;
}
.site-footer__sponsor {
display: flex;
align-items: center;
justify-content: center;
padding: 0 28px;
}
.site-footer__sponsor:not(:last-child) {
border-inline-end: 1px solid rgba(201, 146, 42, 0.2);
}
.site-footer__sponsor.ph {
min-width: 96px;
min-height: 36px;
}
.site-footer__sponsor img {
max-height: 32px;
width: 100%;
max-width: 110px;
object-fit: contain;
}
.site-footer__bottom {
position: relative;
z-index: 1;
border-top: 1px solid rgba(201, 146, 42, 0.15);
padding: 18px 0;
}
.site-footer__bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.site-footer__bottom-row p {
margin: 0;
font-size: 13px;
color: var(--text-muted);
}
.site-footer__bottom-row p span {
color: var(--gold-light);
font-weight: 700;
}
.site-footer__glow {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
pointer-events: none;
background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(201, 146, 42, 0.22), transparent 70%);
}
/* Responsive (tablet/mobile) → assets/css/mobile.css */
.woocommerce table.shop_attributes td{
padding: 0px 16px;
}
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{
width: min(1200px, calc(100% - 48px));
margin-inline: auto;
}
/* Below-fold sections: skip layout work until near viewport.
NOTE: .site-footer excluded — paint containment clips the badge
that pokes above the footer (top: -28px). */
.section.video-sec,
.section.shop,
.section.squad,
.section.discover,
.section.achievements,
.section.fans {
content-visibility: auto;
contain-intrinsic-size: 1px 720px;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 1;
transition: opacity 0.5s ease;
pointer-events: all;
}
#preloader video {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
background: #000;
}
/* *** loader css end **** */