/* ===================================================================== MQ SPORT MANAGEMENT — Public stylesheet Colours, fonts and spacing all resolve through CSS custom properties that the CMS writes into . Nothing brand-specific is hard-coded. ===================================================================== */ /* ── Reset ─────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0} ul[class],ol[class]{list-style:none;padding:0} img,picture,video,svg{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} table{border-collapse:collapse;width:100%} /* ── Tokens ────────────────────────────────────────────────────── */ :root{ --bg:var(--brand-bg,#0A0A0A); --surface:var(--brand-surface,#121212); --surface-2:var(--brand-surface-2,#191919); --text:var(--brand-text,#F5F5F5); --heading:var(--brand-heading,#FFFFFF); --muted:var(--brand-muted,#8A8A8A); --line:var(--brand-border,#242424); --accent:var(--brand-accent,#E94F24); --accent-2:var(--brand-accent-2,#FF8A3D); --link:var(--brand-link,#E94F24); --on-accent:var(--brand-btn-text,#FFFFFF); --header-bg:var(--brand-header-bg,#0A0A0A); --footer-bg:var(--brand-footer-bg,#0A0A0A); --card-bg:var(--brand-card-bg,#121212); --ok:var(--brand-success,#35C48B); --danger:var(--brand-danger,#FF6B6B); --accent-rgb:var(--brand-accent-rgb,233,79,36); --text-rgb:var(--brand-text-rgb,245,245,245); --bg-rgb:var(--brand-bg-rgb,10,10,10); --surface-rgb:var(--brand-surface-rgb,18,18,18); --wrap:1320px; --gutter:clamp(20px,5vw,64px); --sec-y:clamp(60px,7.4vw,116px); --header-h:78px; --r:2px; /* the brand is angular, not rounded */ --cut:18px; /* overridden by Admin -> Branding */ --ease:cubic-bezier(.22,.61,.36,1); --t:.45s var(--ease); } /* ── Base ──────────────────────────────────────────────────────── */ body{ background:var(--bg);color:var(--text); font-family:var(--font-body,"Inter",system-ui,sans-serif); font-size:16px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{overflow:hidden} /* Film grain: barely there, but it stops flat black looking like a bug. */ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain-opacity,.035); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } ::selection{background:var(--accent);color:var(--on-accent)} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:3px; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:10000; background:var(--accent);color:var(--on-accent);padding:12px 20px;font-weight:700;letter-spacing:.08em; } .skip-link:focus{left:0} /* ── Layout ────────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap-narrow{max-width:860px} .sec{padding-block:var(--sec-y);position:relative} .sec--tight{padding-block:clamp(48px,6vw,88px)} .sec--line{border-top:1px solid var(--line)} /* ── Typography ────────────────────────────────────────────────── */ .display,h1,h2,h3,.h1,.h2,.h3{ color:var(--heading); font-family:var(--font-display,"Archivo",sans-serif); font-weight:800;line-height:.92;letter-spacing:-.025em; text-transform:uppercase;text-wrap:balance; } .h-xl{font-size:clamp(2.4rem,6.1vw,5.25rem)} .h-lg{font-size:clamp(2rem,4.4vw,3.9rem)} .h-md{font-size:clamp(1.6rem,2.9vw,2.6rem)} .h-sm{font-size:clamp(1.25rem,2vw,1.75rem)} .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-family:var(--font-display,"Archivo",sans-serif); font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);margin-bottom:22px; } .eyebrow::before{content:"";width:34px;height:2px;background:var(--accent);flex:none} .eyebrow--plain::before{display:none} .lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);max-width:62ch;line-height:1.6} .muted{color:var(--muted)} .accent{color:var(--accent)} .sec-head{margin-bottom:clamp(36px,5vw,64px)} .sec-head--split{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between} .sec-head p{margin-top:18px} /* Editorial body copy (CMS rich text) */ .prose{font-size:1.0625rem;line-height:1.8;color:rgba(var(--text-rgb),.84);max-width:72ch} .prose > * + *{margin-top:1.15em} .prose h2,.prose h3,.prose h4{color:var(--heading);margin-top:1.8em;letter-spacing:-.01em} .prose h2{font-size:1.9rem}.prose h3{font-size:1.45rem}.prose h4{font-size:1.15rem} .prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px} .prose ul,.prose ol{padding-inline-start:1.3em} .prose ul{list-style:disc}.prose ol{list-style:decimal} .prose li + li{margin-top:.5em} .prose blockquote{ border-inline-start:2px solid var(--accent);padding-inline-start:24px; font-size:1.2rem;color:var(--text);font-style:normal; } .prose img{margin-block:1.6em} .prose hr{border:0;border-top:1px solid var(--line);margin-block:2.4em} /* ── Buttons ───────────────────────────────────────────────────── */ .btn{ --btn-bg:var(--accent);--btn-fg:var(--on-accent);--btn-bd:var(--accent); position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:16px 30px;min-height:54px; font-family:var(--font-display,"Archivo",sans-serif); font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd); transition:background var(--t),color var(--t),border-color var(--t),transform .25s var(--ease); clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:rgba(var(--text-rgb),.28);clip-path:none} .btn--ghost:hover{--btn-bg:var(--text);--btn-fg:var(--bg);--btn-bd:var(--text)} .btn--light{--btn-bg:var(--text);--btn-fg:var(--bg);--btn-bd:var(--text)} .btn--light:hover{--btn-bg:transparent;--btn-fg:var(--text)} .btn--sm{padding:12px 22px;min-height:44px;font-size:.72rem} .btn--block{width:100%} .btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none} .btn-row{display:flex;flex-wrap:wrap;gap:14px} /* Text link with an animated rule */ .link-arrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-display,"Archivo",sans-serif); font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; padding-bottom:6px;border-bottom:1px solid rgba(var(--text-rgb),.22); transition:color var(--t),border-color var(--t); } .link-arrow:hover{color:var(--accent);border-color:var(--accent)} .link-arrow svg{width:15px;height:15px;transition:transform .3s var(--ease)} .link-arrow:hover svg{transform:translateX(5px)} /* ── Header ────────────────────────────────────────────────────── */ .site-header{ position:fixed;inset-block-start:0;inset-inline:0;z-index:900; height:var(--header-h);display:flex;align-items:center; transition:background .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease); border-bottom:1px solid transparent; } .site-header.is-solid{ background:color-mix(in srgb,var(--header-bg) 92%,transparent);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line); } .site-header.is-hidden{transform:translateY(-100%)} .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%} .brand{display:flex;align-items:center;flex:none} .brand img{height:30px;width:auto;transition:height .35s var(--ease)} .site-header.is-solid .brand img{height:26px} .nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px)} .nav__link{ position:relative;font-family:var(--font-display,"Archivo",sans-serif); font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:rgba(var(--text-rgb),.72);padding-block:6px;transition:color var(--t); } .nav__link::after{ content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:100%; background:var(--accent);transform:scaleX(0);transform-origin:inline-start; transition:transform .35s var(--ease); } .nav__link:hover,.nav__link.is-active{color:var(--text)} .nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)} .nav-toggle{display:none;width:46px;height:46px;align-items:center;justify-content:center;flex:none;margin-inline-end:-10px} .nav-toggle span{display:block;width:24px;height:2px;background:var(--text);position:relative;transition:background .2s} .nav-toggle span::before,.nav-toggle span::after{ content:"";position:absolute;inset-inline-start:0;width:24px;height:2px;background:var(--text); transition:transform .35s var(--ease),top .35s var(--ease); } .nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} @media (max-width:960px){ .nav-toggle{display:flex} .nav{ position:fixed;inset:var(--header-h) 0 0;background:var(--bg); flex-direction:column;align-items:flex-start;justify-content:center; gap:8px;padding:var(--gutter); transform:translateX(100%);transition:transform .45s var(--ease); overflow-y:auto; } .nav.is-open{transform:translateX(0)} .nav__link{font-size:1.9rem;letter-spacing:.02em;font-weight:800;color:var(--text);padding-block:10px} .nav__link::after{display:none} .nav__link.is-active{color:var(--accent)} .nav .btn{margin-top:22px} } /* ── Hero ──────────────────────────────────────────────────────── */ .hero{ position:relative;min-height:min(100svh,940px); display:flex;align-items:flex-end; padding-block:calc(var(--header-h) + 60px) clamp(56px,8vw,110px); overflow:hidden;isolation:isolate; } .hero__media{position:absolute;inset:0;z-index:-2} .hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:center 22%} .hero--mono .hero__media img,.hero--mono .hero__media video{filter:grayscale(1) contrast(1.12) brightness(.82)} .hero__media::after{ content:"";position:absolute;inset:0; background: linear-gradient(to top,rgba(var(--bg-rgb),.97) 0%,rgba(var(--bg-rgb),.55) 42%,rgba(var(--bg-rgb),.35) 72%,rgba(var(--bg-rgb),.75) 100%), linear-gradient(to right,rgba(var(--bg-rgb),.8) 0%,rgba(var(--bg-rgb),.15) 60%); } .hero--plain{min-height:auto;padding-block:calc(var(--header-h) + clamp(64px,10vw,130px)) clamp(40px,6vw,80px)} .hero__inner{position:relative;width:100%} .hero__title{margin-bottom:clamp(22px,3vw,34px);max-width:17ch} .hero__text{max-width:56ch;margin-bottom:clamp(28px,4vw,42px)} .scroll-cue{ position:absolute;inset-inline-start:var(--gutter);bottom:26px; display:flex;align-items:center;gap:12px; font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted); } .scroll-cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:cue 2.2s var(--ease) infinite} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (max-width:700px){.scroll-cue{display:none}} /* ── Page hero (inner pages) ───────────────────────────────────── */ .page-hero{ padding-block:calc(var(--header-h) + clamp(58px,9vw,120px)) clamp(36px,5vw,64px); border-bottom:1px solid var(--line);position:relative;overflow:hidden; } .page-hero__bg{position:absolute;inset:0;z-index:-1;opacity:.24} .page-hero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .page-hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--bg),rgba(var(--bg-rgb),.4))} /* ── Breadcrumb ────────────────────────────────────────────────── */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px; font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:24px} .crumbs a:hover{color:var(--accent)} .crumbs span[aria-hidden]{opacity:.4} /* ── Player grid & cards ───────────────────────────────────────── */ .player-grid{display:grid;gap:clamp(18px,2vw,30px);grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} .player-grid--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} @media (max-width:560px){.player-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}} .player-card{ position:relative;display:block;background:var(--card-bg); border:1px solid var(--line);overflow:hidden;isolation:isolate; clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); transition:border-color var(--t),transform var(--t); } .player-card:hover{border-color:rgba(var(--accent-rgb),.55);transform:translateY(-4px)} .player-card__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg)} .player-card__media img{ width:100%;height:100%;object-fit:cover;object-position:center 15%; filter:grayscale(1) contrast(1.08); transition:transform .8s var(--ease),filter .6s var(--ease); } .player-card:hover .player-card__media img{transform:scale(1.06);filter:grayscale(.15) contrast(1.05)} .player-card__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(var(--bg-rgb),.96) 4%,rgba(var(--bg-rgb),.25) 48%,transparent 72%); } /* No photo? Show the initials, not a broken box. */ .player-card__initials{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-display,"Archivo",sans-serif);font-size:clamp(3rem,7vw,4.5rem);font-weight:900; color:rgba(var(--text-rgb),.07);letter-spacing:-.04em; background:repeating-linear-gradient(-45deg,var(--surface) 0 12px,var(--surface-2) 12px 24px); } .player-card__body{position:absolute;inset-inline:0;bottom:0;padding:clamp(16px,2vw,24px);z-index:2} .player-card__name{ font-family:var(--font-display,"Archivo",sans-serif);font-weight:800;text-transform:uppercase; font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.02;letter-spacing:-.015em; } .player-card__meta{ display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px; font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } .player-card__meta i{display:block;width:3px;height:3px;background:var(--accent);flex:none} .player-card__code{ position:absolute;inset-block-start:0;inset-inline-end:0;z-index:2; padding:7px 12px;background:var(--accent);color:var(--on-accent); font-family:var(--font-display,"Archivo",sans-serif); font-size:.62rem;font-weight:800;letter-spacing:.14em; } .player-card__flag{ position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2; font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; padding:5px 9px;background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(6px); border:1px solid rgba(var(--text-rgb),.16); } .player-card__badge{ position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2; display:inline-flex;align-items:center;gap:6px;padding:5px 10px; background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(6px); border:1px solid rgba(var(--accent-rgb),.5);color:var(--accent); font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; } /* ── Filters ───────────────────────────────────────────────────── */ .filters{ display:flex;flex-wrap:wrap;gap:12px;align-items:center; padding-block:22px;border-block:1px solid var(--line);margin-bottom:clamp(30px,4vw,48px); } .filters__search{position:relative;flex:1 1 260px;min-width:210px} .filters__search input{ width:100%;background:transparent;border:1px solid var(--line);color:var(--text); padding:13px 44px 13px 16px;font-size:.9rem;transition:border-color var(--t); } .filters__search input:focus{border-color:var(--accent);outline:none} .filters__search button{position:absolute;inset-inline-end:6px;inset-block-start:50%;transform:translateY(-50%); width:34px;height:34px;display:grid;place-items:center;color:var(--muted)} .filters__search button:hover{color:var(--accent)} .filters select{ background:transparent;border:1px solid var(--line);color:var(--text); padding:13px 38px 13px 16px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A8A8A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px; } .filters select:focus{border-color:var(--accent);outline:none} .filters select option{background:var(--surface);color:var(--text)} .filters__count{margin-inline-start:auto;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} @media (max-width:640px){.filters__count{margin-inline-start:0;width:100%}} /* ── Empty state ───────────────────────────────────────────────── */ .empty{ text-align:center;padding:clamp(56px,9vw,110px) 24px;border:1px dashed var(--line); } .empty h3{font-size:clamp(1.4rem,3vw,2.2rem);margin-bottom:12px} .empty p{color:var(--muted);max-width:44ch;margin-inline:auto} .empty .btn{margin-top:28px} /* ── Pagination ────────────────────────────────────────────────── */ .pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:clamp(44px,6vw,72px)} .pager a,.pager span{ min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);font-size:.8rem;font-weight:600;letter-spacing:.08em; padding-inline:14px;transition:all var(--t); } .pager a:hover{border-color:var(--accent);color:var(--accent)} .pager .is-current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .pager .is-disabled{opacity:.3;pointer-events:none} /* ===================================================================== PLAYER PROFILE ===================================================================== */ .p-hero{ position:relative;overflow:hidden;isolation:isolate; padding-block:calc(var(--header-h) + clamp(50px,7vw,90px)) 0; } .p-hero__bg{position:absolute;inset:0;z-index:-2} .p-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 18%; filter:grayscale(1) contrast(1.15) brightness(.6)} .p-hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--bg) 2%,rgba(var(--bg-rgb),.72) 40%,rgba(var(--bg-rgb),.6) 100%)} /* Watermark initials behind the hero — fills the frame when there is no photo. */ .p-hero__watermark{ position:absolute;inset-block-start:8%;inset-inline-end:-2%;z-index:-1; font-family:var(--font-display,"Archivo",sans-serif);font-weight:900; font-size:clamp(9rem,26vw,24rem);line-height:.8;letter-spacing:-.06em; color:rgba(var(--text-rgb),.035);pointer-events:none;user-select:none; } .p-hero__grid{ display:grid;gap:clamp(28px,4vw,56px);align-items:end; grid-template-columns:minmax(0,1fr); } .p-hero--photo .p-hero__grid{grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr)} @media (max-width:900px){.p-hero--photo .p-hero__grid{grid-template-columns:minmax(0,1fr)}} .p-hero__content{padding-bottom:clamp(40px,6vw,76px);padding-top:clamp(24px,4vw,56px)} .p-hero__tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px} .tag{ display:inline-flex;align-items:center;gap:8px;padding:7px 13px; border:1px solid rgba(var(--text-rgb),.2);background:rgba(var(--bg-rgb),.5); backdrop-filter:blur(6px); font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; } .tag--accent{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.09)} .tag--solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .p-hero__name{margin-bottom:18px} .p-hero__name .given{display:block;font-size:.46em;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-bottom:.12em} .p-hero__sub{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px; font-family:var(--font-display,"Archivo",sans-serif); font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .p-hero__sub i{width:4px;height:4px;background:var(--accent);flex:none;display:block} .p-hero__jersey{ font-family:var(--font-display,"Archivo",sans-serif);font-weight:900; font-size:clamp(3.5rem,9vw,7rem);line-height:.8;color:var(--accent);letter-spacing:-.05em; } .p-hero__portrait{position:relative;align-self:end} .p-hero__portrait img{ width:100%;height:min(62svh,620px);object-fit:cover;object-position:center 12%; filter:grayscale(1) contrast(1.1); clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px); } .p-hero__portrait::before{ content:"";position:absolute;inset:-1px;z-index:-1;background:var(--accent); clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px); opacity:.5; } /* ── Quick facts: the grid sizes itself to whatever data exists ──── */ .facts{ display:grid;gap:0; border-block-start:1px solid var(--line); border-inline-start:1px solid var(--line); grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); } .facts[data-count="1"]{--cols:1} .facts[data-count="2"]{--cols:2} .facts[data-count="3"]{--cols:3} .facts[data-count="4"]{--cols:4} .facts[data-count="5"]{--cols:5} .facts[data-count="6"]{--cols:3} .facts[data-count="7"]{--cols:4} .facts[data-count="8"]{--cols:4} .facts[data-count="9"]{--cols:3} .facts[data-count="10"],.facts[data-count="11"],.facts[data-count="12"]{--cols:4} @media (max-width:1080px){ .facts{--cols:3!important} .facts[data-count="1"]{--cols:1!important} .facts[data-count="2"],.facts[data-count="4"]{--cols:2!important} } @media (max-width:620px){ .facts{--cols:2!important} .facts[data-count="1"]{--cols:1!important} } .fact{ padding:clamp(18px,2.4vw,30px); border-inline-end:1px solid var(--line); border-block-end:1px solid var(--line); } .fact__label{ font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);margin-bottom:10px; } .fact__value{ font-family:var(--font-display,"Archivo",sans-serif);font-weight:800;text-transform:uppercase; font-size:clamp(1.05rem,1.8vw,1.5rem);line-height:1.05;letter-spacing:-.01em; } /* ── Current club card ─────────────────────────────────────────── */ .club-card{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,40px); padding:clamp(24px,3vw,40px);border:1px solid var(--line);background:var(--surface); clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); } .club-card__logo{ flex:none;width:clamp(72px,9vw,110px);height:clamp(72px,9vw,110px); display:grid;place-items:center;background:rgba(var(--text-rgb),.04);padding:14px; } .club-card__logo img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1) brightness(2.2) contrast(.9)} .club-card__name{font-size:clamp(1.4rem,2.6vw,2.2rem);margin-bottom:10px} .club-card__meta{display:flex;flex-wrap:wrap;gap:8px 16px; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .club-card__meta i{width:3px;height:3px;background:var(--accent);flex:none;align-self:center;display:block} .club-card--free{border-color:rgba(var(--accent-rgb),.4)} .club-card--free .club-card__name{color:var(--accent)} /* ── Career timeline ───────────────────────────────────────────── */ .timeline{position:relative;border-top:1px solid var(--line)} .tl-item{ display:grid;gap:clamp(12px,2.5vw,40px);align-items:center; grid-template-columns:minmax(120px,180px) 56px minmax(0,1fr); padding-block:clamp(20px,2.6vw,32px);border-bottom:1px solid var(--line); transition:background var(--t); } .tl-item:hover{background:rgba(var(--text-rgb),.025)} .tl-item__season{ font-family:var(--font-display,"Archivo",sans-serif);font-weight:800; font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:.02em;color:var(--accent);white-space:nowrap; } .tl-item__logo{width:56px;height:56px;display:grid;place-items:center;flex:none} .tl-item__logo img{max-width:100%;max-height:100%;object-fit:contain; filter:grayscale(1) brightness(2.4) contrast(.85);opacity:.85;transition:opacity var(--t),filter var(--t)} .tl-item:hover .tl-item__logo img{opacity:1;filter:grayscale(0)} .tl-item__logo--blank{ border:1px solid var(--line);color:var(--muted); font-family:var(--font-display,"Archivo",sans-serif);font-size:.85rem;font-weight:800; } .tl-item__club{font-family:var(--font-display,"Archivo",sans-serif);font-weight:800; text-transform:uppercase;font-size:clamp(1.05rem,1.9vw,1.6rem);line-height:1.05;letter-spacing:-.01em} .tl-item__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px; font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .tl-item__meta i{width:3px;height:3px;background:var(--accent);flex:none;align-self:center;display:block} .tl-item__notes{margin-top:10px;color:var(--muted);font-size:.9rem;max-width:62ch} @media (max-width:760px){ .tl-item{grid-template-columns:44px minmax(0,1fr);gap:14px 16px} .tl-item__season{grid-column:1/-1;font-size:.95rem} .tl-item__logo{width:44px;height:44px} } /* ── Achievements ──────────────────────────────────────────────── */ .ach-grid{display:grid;gap:0; border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line); grid-template-columns:repeat(auto-fill,minmax(310px,1fr))} .ach{position:relative;padding:clamp(24px,3vw,36px);transition:background var(--t); border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)} .ach:hover{background:var(--surface)} .ach__index{ font-family:var(--font-display,"Archivo",sans-serif);font-weight:900;font-size:.85rem; color:rgba(var(--text-rgb),.22);letter-spacing:.1em;margin-bottom:18px;display:block; } .ach__icon{width:44px;height:44px;margin-bottom:18px;object-fit:contain} .ach__year{ display:inline-block;margin-bottom:12px;padding:4px 10px;border:1px solid rgba(var(--accent-rgb),.45); color:var(--accent);font-size:.64rem;font-weight:700;letter-spacing:.16em; } .ach__title{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.1;margin-bottom:10px} .ach__meta{display:flex;flex-wrap:wrap;gap:6px 12px; font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .ach__meta i{width:3px;height:3px;background:var(--accent);flex:none;align-self:center;display:block} .ach__text{margin-top:14px;color:var(--muted);font-size:.92rem;line-height:1.65} /* ── Video highlights ──────────────────────────────────────────── */ .vid-feature{margin-bottom:clamp(18px,2vw,26px)} .vid-grid{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} @media (max-width:560px){.vid-grid{grid-template-columns:1fr}} .vid{ position:relative;display:block;width:100%;background:var(--bg);overflow:hidden; border:1px solid var(--line);text-align:start; clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); transition:border-color var(--t),transform var(--t); } .vid:hover{border-color:rgba(var(--accent-rgb),.6);transform:translateY(-3px)} .vid__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface)} .vid__media img{width:100%;height:100%;object-fit:cover; filter:grayscale(.65) contrast(1.06);transition:transform .8s var(--ease),filter .5s var(--ease)} .vid:hover .vid__media img{transform:scale(1.05);filter:grayscale(0)} .vid__media::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(var(--bg-rgb),.92),rgba(var(--bg-rgb),.08) 55%,transparent)} .vid__play{ position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;z-index:2; width:clamp(58px,7vw,78px);aspect-ratio:1;display:grid;place-items:center; background:rgba(var(--accent-rgb),.94);color:var(--on-accent); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); transition:transform .35s var(--ease),background .35s var(--ease); } .vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.09)} .vid__play svg{width:38%;height:38%;margin-inline-start:8%} .vid__body{position:absolute;inset-inline:0;bottom:0;padding:clamp(16px,2vw,24px);z-index:2} .vid__title{font-family:var(--font-display,"Archivo",sans-serif);font-weight:800;text-transform:uppercase; font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.1;letter-spacing:-.005em} .vid__desc{margin-top:8px;font-size:.8rem;color:var(--muted);line-height:1.5} .vid--feature .vid__title{font-size:clamp(1.3rem,2.6vw,2.1rem)} .vid--feature .vid__body{padding:clamp(20px,3vw,40px)} .vid__badge{ position:absolute;inset-block-start:0;inset-inline-end:0;z-index:3;padding:7px 13px; background:var(--accent);color:var(--on-accent);font-family:var(--font-display,"Archivo",sans-serif); font-size:.6rem;font-weight:800;letter-spacing:.16em; } /* ── Gallery ───────────────────────────────────────────────────── */ .gallery{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .gallery--single{grid-template-columns:1fr;max-width:1000px} .gallery--two{grid-template-columns:repeat(2,1fr)} @media (max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery--two{grid-template-columns:1fr}} .gal{position:relative;display:block;overflow:hidden;background:var(--surface);width:100%;padding:0;border:0} .gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5; filter:grayscale(1) contrast(1.06);transition:transform .8s var(--ease),filter .5s var(--ease)} .gallery--single .gal img{aspect-ratio:16/9} .gal:hover img{transform:scale(1.05);filter:grayscale(0)} .gal__cap{ position:absolute;inset-inline:0;bottom:0;padding:16px;z-index:2; font-size:.78rem;color:var(--text);opacity:0;translate:0 10px; background:linear-gradient(to top,rgba(var(--bg-rgb),.9),transparent); transition:opacity .4s var(--ease),translate .4s var(--ease); } .gal:hover .gal__cap{opacity:1;translate:0 0} .gal--wide{grid-column:span 2} @media (max-width:560px){.gal--wide{grid-column:span 2}} /* ── Lightbox (videos + gallery) ───────────────────────────────── */ .lb{ position:fixed;inset:0;z-index:1000;display:none; background:rgba(0,0,0,.96);backdrop-filter:blur(8px); align-items:center;justify-content:center;padding:clamp(16px,4vw,54px); } .lb.is-open{display:flex} .lb__stage{position:relative;width:100%;max-width:1200px} .lb__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000} .lb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .lb__img{max-height:82svh;width:auto;max-width:100%;margin-inline:auto;object-fit:contain} .lb__cap{margin-top:16px;text-align:center;color:var(--muted);font-size:.85rem} .lb__close,.lb__nav{ position:absolute;z-index:5;width:52px;height:52px;display:grid;place-items:center; background:rgba(var(--text-rgb),.08);border:1px solid rgba(var(--text-rgb),.2);color:var(--text); transition:background var(--t),border-color var(--t); } .lb__close:hover,.lb__nav:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .lb__close{inset-block-start:-64px;inset-inline-end:0} .lb__nav{inset-block-start:50%;translate:0 -50%} .lb__nav--prev{inset-inline-start:-68px} .lb__nav--next{inset-inline-end:-68px} .lb__close svg,.lb__nav svg{width:20px;height:20px} @media (max-width:1100px){ .lb__nav--prev{inset-inline-start:6px}.lb__nav--next{inset-inline-end:6px} .lb__close{inset-block-start:-56px} } /* ── Socials ───────────────────────────────────────────────────── */ .socials{display:flex;flex-wrap:wrap;gap:12px} .social{ width:52px;height:52px;display:grid;place-items:center; border:1px solid var(--line);color:var(--muted); transition:color var(--t),border-color var(--t),background var(--t),transform var(--t); } .social:hover{color:var(--on-accent);background:var(--accent);border-color:var(--accent);transform:translateY(-3px)} .social svg{width:19px;height:19px} .social--lg{width:58px;height:58px} .social--inline{width:auto;height:auto;padding:12px 18px;gap:10px;display:inline-flex;align-items:center; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} /* ── Clubs logo wall ───────────────────────────────────────────── */ .logo-wall{ display:grid;gap:0; border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } .logo-wall__item{ aspect-ratio:16/9;display:grid;place-items:center;padding:clamp(18px,2.4vw,32px); transition:background var(--t); border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line); } .logo-wall__item:hover{background:var(--surface)} .logo-wall__item img{ max-height:100%;max-width:100%;width:auto;object-fit:contain; filter:grayscale(1) brightness(2.6) contrast(.75);opacity:.45; transition:opacity .45s var(--ease),filter .45s var(--ease),transform .45s var(--ease); } .logo-wall__item:hover img{opacity:1;filter:grayscale(0) brightness(1) contrast(1);transform:scale(1.05)} .logo-wall__item span{ font-family:var(--font-display,"Archivo",sans-serif);font-weight:800;text-transform:uppercase; font-size:.92rem;letter-spacing:.06em;color:rgba(var(--text-rgb),.4);text-align:center; transition:color var(--t); } .logo-wall__item:hover span{color:var(--text)} /* Slow drifting marquee variant */ .marquee{overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)} .marquee__track{display:flex;gap:clamp(40px,6vw,90px);width:max-content;animation:drift 52s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__item{flex:none;height:clamp(40px,5vw,62px);display:grid;place-items:center} .marquee__item img{height:100%;width:auto;object-fit:contain; filter:grayscale(1) brightness(2.6) contrast(.75);opacity:.4;transition:opacity .4s var(--ease),filter .4s var(--ease)} .marquee__item:hover img{opacity:1;filter:grayscale(0) brightness(1) contrast(1)} .marquee__item span{font-family:var(--font-display,"Archivo",sans-serif);font-weight:800; text-transform:uppercase;font-size:1.05rem;letter-spacing:.06em;color:rgba(var(--text-rgb),.35);white-space:nowrap} @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── Stats ─────────────────────────────────────────────────────── */ .stats{display:grid;gap:0; border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .stat{padding:clamp(28px,4vw,52px) clamp(18px,2.4vw,30px);text-align:center; border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)} .stat__value{font-family:var(--font-display,"Archivo",sans-serif);font-weight:900; font-size:clamp(2.6rem,6vw,4.6rem);line-height:.9;letter-spacing:-.04em} .stat__value em{font-style:normal;color:var(--accent)} .stat__label{margin-top:14px;font-size:.66rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--muted)} /* ── Services ──────────────────────────────────────────────────── */ .svc-grid{display:grid;gap:0; border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .svc{padding:clamp(28px,3.4vw,46px);position:relative;transition:background var(--t); border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)} .svc:hover{background:var(--surface)} .svc__num{font-family:var(--font-display,"Archivo",sans-serif);font-weight:900;font-size:.8rem; letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:22px} .svc__title{font-size:clamp(1.1rem,1.6vw,1.35rem);margin-bottom:14px;line-height:1.1} .svc__text{color:var(--muted);font-size:.94rem;line-height:1.7} /* ── Split feature (about / agent) ─────────────────────────────── */ .split{display:grid;gap:clamp(30px,5vw,80px);align-items:center;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .split--media-end > .split__media{order:2} @media (max-width:760px){.split--media-end > .split__media{order:0}} .split__media{position:relative} .split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.08); clip-path:polygon(32px 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%,0 32px)} .split__media--wide img{aspect-ratio:4/3} /* Crop-mark accent: two rules that sit just outside the photo's corner, so it never paints across the image regardless of stacking order. */ .split__media::after{ content:"";position:absolute;inset-block-end:-16px;inset-inline-end:-16px; width:38%;height:38%;pointer-events:none; border-inline-end:1px solid rgba(var(--accent-rgb),.55); border-block-end:1px solid rgba(var(--accent-rgb),.55); } .split__quote{ margin-top:28px;padding-inline-start:22px;border-inline-start:2px solid var(--accent); font-family:var(--font-display,"Archivo",sans-serif);font-weight:700;text-transform:uppercase; font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.25;letter-spacing:-.01em; } /* Definition list used for agent facts / contact details */ .deflist{display:grid;gap:0; border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:30px} .deflist > div{padding:20px 22px; border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)} .deflist dt{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .deflist dd{margin:0;font-family:var(--font-display,"Archivo",sans-serif);font-weight:700; text-transform:uppercase;font-size:1rem;letter-spacing:-.005em;word-break:break-word} .deflist a:hover{color:var(--accent)} /* Compact list (experience / certifications) */ .reclist{border-top:1px solid var(--line)} .reclist__item{display:grid;gap:6px 30px;grid-template-columns:minmax(90px,140px) minmax(0,1fr); padding-block:22px;border-bottom:1px solid var(--line)} .reclist__year{font-family:var(--font-display,"Archivo",sans-serif);font-weight:800; color:var(--accent);font-size:.9rem;letter-spacing:.06em} .reclist__title{font-family:var(--font-display,"Archivo",sans-serif);font-weight:800; text-transform:uppercase;font-size:1.05rem;line-height:1.15} .reclist__sub{color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-top:6px} .reclist__text{color:var(--muted);font-size:.92rem;margin-top:8px;line-height:1.65} @media (max-width:620px){.reclist__item{grid-template-columns:1fr}} /* ── CTA band ──────────────────────────────────────────────────── */ .cta-band{position:relative;overflow:hidden;border-top:1px solid var(--line); padding-block:clamp(64px,9vw,128px);text-align:center} .cta-band::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background:radial-gradient(ellipse 70% 130% at 50% 120%,rgba(var(--accent-rgb),.22),transparent 70%); } .cta-band__title{margin-bottom:20px} .cta-band p{margin-inline:auto;margin-bottom:34px} .cta-band .btn-row{justify-content:center} /* ── Forms ─────────────────────────────────────────────────────── */ .form-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .field{display:flex;flex-direction:column;gap:9px} .field--full{grid-column:1/-1} .field label{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .field label .req{color:var(--accent)} .field input,.field textarea,.field select{ width:100%;background:transparent;border:1px solid var(--line);color:var(--text); padding:15px 16px;font-size:.98rem;transition:border-color var(--t),background var(--t); } .field textarea{min-height:170px;resize:vertical;line-height:1.6} .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent);outline:none;background:rgba(var(--text-rgb),.02)} .field input::placeholder,.field textarea::placeholder{color:rgba(var(--text-rgb),.3)} .field select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A8A8A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:11px} .field select option{background:var(--surface);color:var(--text)} .field__error{color:var(--accent);font-size:.78rem;letter-spacing:.04em} .field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--accent)} .honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .notice{ display:flex;gap:14px;align-items:flex-start;padding:18px 20px;margin-bottom:26px; border:1px solid var(--line);border-inline-start:3px solid var(--accent);background:var(--surface); font-size:.92rem;line-height:1.6; } .notice--ok{border-inline-start-color:var(--ok)} .notice--error{border-inline-start-color:var(--accent)} .notice svg{width:19px;height:19px;flex:none;margin-top:2px} /* ── Footer ────────────────────────────────────────────────────── */ .site-footer{border-top:1px solid var(--line);padding-block:clamp(52px,7vw,88px) 0;background:var(--footer-bg)} .footer-top{display:grid;gap:clamp(34px,5vw,60px);grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr))} @media (max-width:760px){.footer-top{grid-template-columns:1fr}} .footer-brand img{height:64px;width:auto;margin-bottom:24px} .footer-brand p{color:var(--muted);font-size:.92rem;max-width:42ch;line-height:1.7} .footer-col h4{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);margin-bottom:20px;font-family:var(--font-display,"Archivo",sans-serif)} .footer-col ul{display:flex;flex-direction:column;gap:12px} .footer-col a{font-size:.94rem;color:rgba(var(--text-rgb),.78);transition:color var(--t)} .footer-col a:hover{color:var(--accent)} .footer-partners{margin-top:clamp(44px,6vw,72px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)} .footer-partners h4{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:22px} .footer-bottom{ margin-top:clamp(40px,5vw,64px);padding-block:26px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between; font-size:.78rem;color:var(--muted); } .footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px} .footer-bottom a:hover{color:var(--accent)} /* ── 404 ───────────────────────────────────────────────────────── */ .oops{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--header-h) + 40px) var(--gutter) 60px} .oops__code{font-family:var(--font-display,"Archivo",sans-serif);font-weight:900; font-size:clamp(6rem,22vw,17rem);line-height:.78;letter-spacing:-.06em;color:rgba(var(--text-rgb),.07)} .oops__title{margin-top:-.12em;margin-bottom:20px} .oops p{max-width:44ch;margin-inline:auto;margin-bottom:34px} /* ── Reveal on scroll ──────────────────────────────────────────── */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}} /* ── RTL / Arabic ──────────────────────────────────────────────── */ [dir="rtl"] body{font-family:"Noto Kufi Arabic",var(--font-body,"Inter"),sans-serif} [dir="rtl"] .display,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ font-family:"Noto Kufi Arabic",var(--font-display,"Archivo"),sans-serif;letter-spacing:0;line-height:1.2} [dir="rtl"] .btn svg,[dir="rtl"] .link-arrow svg{transform:scaleX(-1)} [dir="rtl"] .btn:hover svg,[dir="rtl"] .link-arrow:hover svg{transform:scaleX(-1) translateX(4px)} [dir="rtl"] .marquee__track{animation-direction:reverse} /* ── Print ─────────────────────────────────────────────────────── */ @media print{ body{background:#fff;color:#000} body::after,.site-header,.site-footer,.cta-band,.lb,.scroll-cue,.vid__play{display:none!important} .p-hero__bg,.hero__media{display:none} a[href]::after{content:" (" attr(href) ")";font-size:.7em;color:#555} .facts,.ach-grid,.svc-grid,.deflist{background:none;border-color:#ccc} .fact,.ach,.svc,.deflist > div{background:none;border:1px solid #ddd} img{filter:none!important} } /* ===================================================================== PLAYER CARD — collectible / FIFA-style, with pointer-driven 3D tilt The tilt is CSS transforms driven by two custom properties that JS updates; with JS off, or reduced motion, the card is simply flat. ===================================================================== */ .pcard-wrap{ perspective:1100px; perspective-origin:50% 50%; /* Set by JS on pointer move; the resting state is dead flat. */ --rx:0deg; --ry:0deg; --mx:50%; --my:50%; --lift:0; } .pcard{ position:relative;display:block;width:100%;aspect-ratio:3/4.15; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--lift) * 14px)); transition:transform .5s var(--ease); will-change:transform; isolation:isolate; color:var(--text); } .pcard-wrap.is-tilting .pcard{transition:transform .08s linear} /* The frame itself: angular, echoing the cut corners of the MQ mark. */ .pcard__frame{ position:absolute;inset:0;overflow:hidden; background:linear-gradient(160deg,var(--brand-card-from,#1C1C1C) 0%,var(--brand-card-to,#050505) 78%); border:1px solid rgba(var(--brand-card-frame-rgb,233,79,36),.34); clip-path:polygon( calc(var(--cut) * 1.5) 0, 100% 0, 100% calc(100% - var(--cut) * 1.5), calc(100% - var(--cut) * 1.5) 100%, 0 100%, 0 calc(var(--cut) * 1.5)); transition:border-color var(--t); } .pcard-wrap:hover .pcard__frame{border-color:rgba(var(--brand-card-frame-rgb,233,79,36),.85)} /* A faint diagonal weave so an empty card still has surface. */ .pcard__frame::before{ content:"";position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(-45deg, rgba(var(--brand-text-rgb),.022) 0 10px,transparent 10px 20px); } /* Readability scrim under the rail. */ .pcard__frame::after{ content:"";position:absolute;inset-inline:0;top:0;height:42%; background:linear-gradient(to bottom, rgba(var(--brand-bg-rgb),.72) 0%,rgba(var(--brand-bg-rgb),.28) 45%,transparent 100%); } /* Photo: anchored to the bottom of the frame like a cut-out. */ .pcard__photo{ position:absolute;inset-inline:0;inset-block-end:17%;top:9%; display:flex;align-items:flex-end;justify-content:center;overflow:hidden; transform:translateZ(38px); } .pcard__photo img{ width:100%;height:100%;object-fit:cover;object-position:center 12%; filter:grayscale(1) contrast(1.12); transition:filter .55s var(--ease),transform .7s var(--ease); -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%); mask-image:linear-gradient(to bottom,#000 72%,transparent 99%); } .pcard--colour .pcard__photo img{filter:none} .pcard-wrap:hover .pcard__photo img{filter:grayscale(.12) contrast(1.06);transform:scale(1.035)} .pcard__initials{ font-family:var(--font-display);font-weight:900; font-size:clamp(3rem,9vw,5rem);letter-spacing:-.05em; color:rgba(var(--brand-text-rgb),.07);align-self:center; } /* Left rail: code, position, flag — the FIFA "rating" column. */ .pcard__rail{ position:absolute;inset-block-start:6%;inset-inline-start:7%;z-index:3; display:flex;flex-direction:column;align-items:center;gap:7px; transform:translateZ(58px);text-align:center; } .pcard__code{ font-family:var(--font-display);font-weight:900;line-height:.9; font-size:clamp(.95rem,2.4vw,1.35rem);letter-spacing:.02em; color:var(--brand-card-frame,var(--accent)); } .pcard__pos{ font-family:var(--font-display);font-weight:800; font-size:clamp(.66rem,1.5vw,.82rem);letter-spacing:.14em; color:rgba(var(--brand-text-rgb),.82); } .pcard__rail .flag{width:26px;height:19px} .pcard__rail::after{ content:"";width:22px;height:1px;background:rgba(var(--brand-text-rgb),.28); } .pcard__club{width:26px;height:26px;object-fit:contain; filter:grayscale(1) brightness(2.4);opacity:.75} /* Free-agent flash, top-right. */ .pcard__flash{ position:absolute;inset-block-start:0;inset-inline-end:0;z-index:4; max-width:72%;transform:translateZ(60px); padding:6px 10px;background:var(--brand-card-frame,var(--accent));color:var(--brand-btn-text,#fff); font-family:var(--font-display);font-size:.56rem;font-weight:800;letter-spacing:.12em; text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .pcard__flash--signed{background:rgba(var(--brand-success-rgb,53,196,139),.92)} /* Name plate + stats. */ .pcard__plate{ position:absolute;inset-inline:0;inset-block-end:0;z-index:3; display:flex;flex-direction:column; padding:0 8% 7%;transform:translateZ(52px); background:linear-gradient(to top, rgba(var(--brand-bg-rgb),.97) 30%,rgba(var(--brand-bg-rgb),.55) 70%,transparent); } .pcard__plate > *{display:block;width:100%} .pcard__name{ font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:clamp(.98rem,2.15vw,1.3rem);line-height:1.02;letter-spacing:-.018em; text-align:center;margin-bottom:9px;text-wrap:balance; } .pcard__rule{height:1px;background:rgba(var(--brand-text-rgb),.16);margin-bottom:9px} .pcard__stats{display:flex;justify-content:center;gap:clamp(8px,2.4vw,18px)} .pcard__stat{text-align:center;min-width:0} .pcard__stat b{ display:block;font-family:var(--font-display);font-weight:800; font-size:clamp(.74rem,1.6vw,.92rem);line-height:1.1;letter-spacing:-.01em; } .pcard__stat span{ display:block;margin-top:2px;font-size:.53rem;font-weight:600; letter-spacing:.16em;color:var(--muted); } .pcard__meta{ text-align:center;margin-top:8px; font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Specular sweep that tracks the pointer. */ .pcard__shine{ position:absolute;inset:0;z-index:5;pointer-events:none; transform:translateZ(70px); background:radial-gradient( circle at var(--mx) var(--my), rgba(255,255,255,.17) 0%, rgba(255,255,255,.06) 22%, transparent 55%); opacity:0;transition:opacity .35s var(--ease); clip-path:polygon( calc(var(--cut) * 1.5) 0, 100% 0, 100% calc(100% - var(--cut) * 1.5), calc(100% - var(--cut) * 1.5) 100%, 0 100%, 0 calc(var(--cut) * 1.5)); } .pcard-wrap:hover .pcard__shine{opacity:1} .pcard-wrap.no-shine .pcard__shine{display:none} /* Glow cast underneath on hover. */ .pcard__glow{ position:absolute;inset:8% 6% -6%;z-index:-1;pointer-events:none; background:radial-gradient(ellipse at 50% 100%,rgba(var(--brand-card-frame-rgb,233,79,36),.34),transparent 68%); opacity:0;transition:opacity .45s var(--ease);filter:blur(14px); } .pcard-wrap:hover .pcard__glow{opacity:1} .pcard:focus-visible{outline:2px solid var(--accent);outline-offset:4px} /* Touch and reduced-motion get a flat, perfectly usable card. */ @media (hover:none),(prefers-reduced-motion:reduce){ .pcard{transform:none!important;transition:none} .pcard__shine,.pcard__glow{display:none} .pcard__photo,.pcard__rail,.pcard__plate,.pcard__flash{transform:none} } /* ── Flags ─────────────────────────────────────────────────────── */ .flag{ display:inline-block;width:28px;height:20px;object-fit:cover;flex:none; border:1px solid rgba(var(--text-rgb),.22);vertical-align:middle; } .flag--emoji{ width:auto;height:auto;border:0;font-size:1.05em;line-height:1; /* Windows has no flag glyphs and falls back to the two letters, which is still readable — so the box is left to size itself either way. */ } .flag--lg{width:34px;height:24px} .flag--lg.flag--emoji{font-size:1.3em} .flag--sm{width:22px;height:16px} /* ── Contracts ─────────────────────────────────────────────────── */ .contracts{display:grid;gap:clamp(12px,1.6vw,18px)} .contract{ border:1px solid var(--line);background:var(--surface); clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); transition:border-color var(--t); } .contract:hover{border-color:rgba(var(--accent-rgb),.45)} .contract--primary{border-color:rgba(var(--accent-rgb),.42)} .contract__head{ display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center; padding:13px clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line); background:rgba(var(--text-rgb),.022); } .contract__type{ font-family:var(--font-display);font-weight:800; font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .contract__left{ margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px; padding:5px 12px;border:1px solid rgba(var(--accent-rgb),.5);color:var(--accent); font-family:var(--font-display);font-size:.66rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;white-space:nowrap; } .contract--primary .contract__left{background:rgba(var(--accent-rgb),.1)} .contract__body{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px); padding:clamp(18px,2.6vw,28px) clamp(20px,2.6vw,30px); } .contract__logo{ flex:none;width:58px;height:58px;display:grid;place-items:center; background:rgba(var(--text-rgb),.04);padding:9px; } .contract__logo img{max-width:100%;max-height:100%;object-fit:contain; filter:grayscale(1) brightness(2.3) contrast(.9)} .contract__club{ font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.05;letter-spacing:-.01em; } .contract__meta{ display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px; font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } .contract__meta i{width:3px;height:3px;background:var(--accent);flex:none;align-self:center;display:block} .contract__notes{margin-top:10px;color:var(--muted);font-size:.9rem;max-width:62ch;line-height:1.6} .contract__dates{ display:flex;gap:1px;margin:0;flex:none; border-inline-start:1px solid var(--line); } .contract__dates > div{padding-inline:clamp(14px,2vw,24px)} .contract__dates dt{ font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);margin-bottom:6px; } .contract__dates dd{ margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:1rem;letter-spacing:-.005em;white-space:nowrap; } @media (max-width:640px){ .contract__dates{border-inline-start:0;border-top:1px solid var(--line); padding-top:16px;width:100%;gap:26px} .contract__dates > div{padding-inline:0} } /* Availability chip used in the player hero */ .tag--ok{border-color:rgba(var(--brand-success-rgb,53,196,139),.55);color:var(--ok); background:rgba(var(--brand-success-rgb,53,196,139),.1)}