@font-face { font-family: 'Club Arabic'; src: url('/fonts/ibm-plex-arabic-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Club Arabic'; src: url('/fonts/ibm-plex-arabic-semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-variable.ttf') format('truetype'); font-weight: 100 1000; font-style: normal; font-display: swap; }
:root { color-scheme: light; --navy: #10395e; --blue: #9dd9ff; --silver: #b7bdc6; --surface: #f5f8fc; --raised: #fdfefe; --text: #10395e; --muted: #506478; --border: #dce5ee; --tint: #e6f1fa; --shadow: 0 3px 12px #10395e05; --icon-filter: invert(17%) sepia(38%) saturate(1258%) hue-rotate(169deg) brightness(95%) contrast(97%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --surface: #0c1e2e; --raised: #122b40; --text: #ecf4fb; --muted: #b7bdc6; --border: #2c455b; --tint: #193a54; --icon-filter: invert(86%) sepia(7%) saturate(1139%) hue-rotate(175deg) brightness(100%) contrast(97%); } }
:root[data-theme='dark'] { color-scheme: dark; --surface: #0c1e2e; --raised: #122b40; --text: #ecf4fb; --muted: #b7bdc6; --border: #2c455b; --tint: #193a54; --icon-filter: invert(86%) sepia(7%) saturate(1139%) hue-rotate(175deg) brightness(100%) contrast(97%); }
* { box-sizing: border-box; }
body { margin: 0; min-block-size: 100dvh; background: var(--surface); color: var(--text); font: 400 1rem/1.7 'Club Arabic', Tahoma, sans-serif; }
::selection { background: var(--blue); color: var(--navy); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
[hidden] { display: none !important; }
img { vertical-align: middle; max-inline-size: 100%; }
h1, p { margin: 0; }
.latin, [lang='en'] { font-family: 'DM Sans', Arial, sans-serif; }
.brand-banner { position: absolute; inset: 0 0 auto; block-size: 164px; background: var(--navy); overflow: hidden; z-index: -1; }
.brand-banner::after { content: ''; position: absolute; inset: -220px 0 0; background: url('/brand/club-crest.png') center / 580px no-repeat; opacity: .055; }
.toolbar { display: flex; justify-content: space-between; inline-size: min(100% - 3rem, 560px); margin: 1rem auto 0; min-block-size: 44px; }
.tool-button { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid #9dd9ff40; border-radius: 50%; background: #10395e80; }
.tool-button:hover { background: #9dd9ff20; }
.tool-button:focus-visible { outline-color: var(--blue); }
.tool-button img { filter: brightness(0) invert(1); }
.page { inline-size: min(100% - 2.5rem, 520px); margin-inline: auto; padding-block: 20px max(1.7rem, env(safe-area-inset-bottom)); }
.profile { text-align: center; }
.club-crest { box-sizing: content-box; inline-size: 116px; block-size: 116px; aspect-ratio: 1; border: 6px solid var(--surface); border-radius: 50%; background: #f7f9f5; }
.english-name { font-size: .65rem; letter-spacing: .13em; font-weight: 600; margin-block-start: .8rem; color: var(--muted); }
h1 { font-size: clamp(1.3rem, .95rem + 1.5vw, 1.65rem); font-weight: 600; line-height: 1.65; margin-block-start: .25rem; }
.profile-description { font-size: .9rem; color: var(--muted); margin-block-start: .4rem; }
.social-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-inline-size: 360px; margin: 1.6rem auto 1.8rem; }
.social-links a { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-inline-size: 0; font-size: .74rem; }
.social-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border: 1px solid var(--border); background: var(--raised); border-radius: 50%; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.social-icon img, .link-icon img, .link-arrow { filter: var(--icon-filter); }
.social-links a:hover .social-icon { transform: translateY(-3px); background: var(--tint); border-color: var(--text); }
.club-links { display: grid; gap: .75rem; }
.club-links:focus { outline: none; }
.link-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 1rem; min-block-size: 78px; padding: .8rem 1.1rem; background: var(--raised); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); font-weight: 600; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.link-row:hover { transform: translateY(-2px); border-color: var(--text); background: var(--tint); }
.link-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--tint); }
.link-row small { display: block; margin-block-start: .1rem; color: var(--muted); font-weight: 400; font-size: .78rem; overflow-wrap: anywhere; }
.link-row small[dir='ltr'] { inline-size: fit-content; max-inline-size: 100%; }
.featured { background: var(--navy); color: #f7fbff; border-color: var(--navy); }
.featured:hover { background: #174a74; border-color: #174a74; }
.featured .link-icon { background: #9dd9ff1c; }
.featured .link-icon img, .featured .link-arrow { filter: brightness(0) invert(1); }
.featured small { color: var(--blue); }
footer { padding-block: 2rem .5rem; text-align: center; color: var(--muted); font-size: .85rem; }
footer .latin { display: block; margin-block-start: .4rem; font-size: .68rem; letter-spacing: .02em; }
.skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: 1rem; background: var(--raised); padding: .7rem 1rem; border-radius: 8px; transform: translateY(-150%); z-index: 2; }
.skip-link:focus { transform: translateY(0); }
.share-status:empty { display: none; }
.share-status { position: fixed; inset-block-end: max(1.2rem, env(safe-area-inset-bottom)); inset-inline: 1rem; inline-size: fit-content; max-inline-size: calc(100% - 2rem); margin-inline: auto; padding: .7rem 1.2rem; border: 1px solid var(--border); border-radius: 12px; background: var(--raised); color: var(--text); box-shadow: 0 6px 24px #061e3329; font-size: .85rem; z-index: 3; }
@media (max-width: 359px) { .page { inline-size: calc(100% - 2rem); }.toolbar { inline-size: calc(100% - 2rem); }.link-row { gap: .65rem; padding-inline: .85rem; font-size: .9rem; grid-template-columns: 40px minmax(0, 1fr) 18px; }.link-icon { inline-size: 40px; block-size: 40px; }.link-row small { font-size: .72rem; }.social-links { gap: .25rem; }.social-links a { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (forced-colors: active) { .link-row, .social-icon, .tool-button { border: 1px solid ButtonText; }.link-icon img, .link-arrow, .social-icon img { filter: none; } }