/* ========================================================================== Khaldiya Club — reset, typography, layout primitives -------------------------------------------------------------------------- Direction-agnostic throughout: every inset, margin, padding, border and alignment uses a logical property, so switching to rtl mirrors the entire layout with no per-component overrides. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--nav-height) + var(--space-4)); -moz-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-block-size: 100vh; background-color: var(--canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Locks scrolling behind the mobile menu without the layout shifting. */ body.is-locked { overflow: hidden; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; } svg { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; inline-size: 100%; } hr { border: 0; border-block-start: var(--border-width) solid var(--border); } ::selection { background: var(--brand); color: var(--brand-on); } /* -------------------------------------------------------------------------- Focus -------------------------------------------------------------------------- Never removed, only restyled. Mouse users do not see it; keyboard users always do. -------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); } /* On top of imagery, the outline alone can disappear — add a dark backing. */ .on-image :focus-visible { outline-color: var(--brand); box-shadow: 0 0 0 6px var(--scrim); } .skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-skip); padding: var(--space-3) var(--space-5); background: var(--brand); color: var(--brand-on); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; border-radius: var(--radius); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; } /* Arabic has a single weight, so headings lean on size and colour instead. Faux-bolding is explicitly disabled — synthetic weight destroys the joins. */ [lang='ar'] h1, [lang='ar'] h2, [lang='ar'] h3, [lang='ar'] h4, [lang='ar'] h5, [lang='ar'] h6, [lang='ar'] strong, [lang='ar'] b { font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; } p { text-wrap: pretty; } .display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: var(--fw-bold); text-transform: uppercase; } /* Arabic is never uppercased — the concept does not exist in the script, and the property would be a no-op that only risks confusing a screen reader. */ [lang='ar'] .display, [lang='ar'] .section-title, [lang='ar'] .eyebrow, [lang='ar'] .label, [lang='ar'] .btn, [lang='ar'] .nav-link { text-transform: none; } .h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-display); } .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } .h3 { font-size: var(--fs-h3); } .h4 { font-size: var(--fs-h4); } .lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); } .muted { color: var(--text-muted); } .secondary { color: var(--text-secondary); } /* The tight uppercase micro-label that runs above almost every section. */ .eyebrow, .label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1; color: var(--text-muted); } .eyebrow--brand { color: var(--brand-text); } /* The 3px brand tick that precedes an eyebrow. */ .eyebrow::before { content: ''; inline-size: 18px; block-size: var(--rule-accent); background: var(--brand-rule); border-radius: var(--radius-xs); } .eyebrow--bare::before { display: none; } .num, .score, .shirt-number { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; /* Western digits in both locales, by explicit instruction. */ -moz-font-feature-settings: 'tnum' 1, 'lnum' 1; } /* -------------------------------------------------------------------------- Rich text — the news article body -------------------------------------------------------------------------- */ .prose { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); } .prose > * + * { margin-block-start: var(--space-6); } .prose h2 { margin-block-start: var(--space-12); font-size: var(--fs-h3); color: var(--text-primary); } .prose h3 { margin-block-start: var(--space-10); font-size: var(--fs-h4); color: var(--text-primary); } .prose strong { color: var(--text-primary); font-weight: var(--fw-bold); } .prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-fast) var(--ease-out); } .prose a:hover { text-decoration-thickness: 2px; } .prose ul, .prose ol { padding-inline-start: var(--space-6); } .prose ul li { list-style: disc; } .prose ol li { list-style: decimal; } .prose li + li { margin-block-start: var(--space-2); } .prose blockquote { padding-inline-start: var(--space-6); border-inline-start: var(--rule-accent) solid var(--brand-rule); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--text-primary); } .prose figure img, .prose > img { inline-size: 100%; border-radius: var(--radius-lg); } .prose figcaption { margin-block-start: var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-inline-size: var(--container-narrow); } .container--wide { max-inline-size: var(--container-wide); } .container--flush { padding-inline: 0; } .section { padding-block: var(--section-y); } .section--tight { padding-block: var(--section-y-tight); } .section--flush-top { padding-block-start: 0; } .section--flush-bottom { padding-block-end: 0; } .section--sunken { background: var(--surface); } /* Section header: eyebrow + title on one side, "view all" on the other. */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5) var(--space-8); margin-block-end: clamp(var(--space-6), 3vw, var(--space-12)); } .section-head__text { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; } .section-title { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-display); text-transform: uppercase; font-weight: var(--fw-bold); } .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } @media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* Horizontal snap rail — used on mobile for fixtures and the roster. */ .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: var(--space-4); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-block-end: var(--space-3); scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; } /* -------------------------------------------------------------------------- Media -------------------------------------------------------------------------- */ .media { position: relative; overflow: hidden; background: var(--skeleton); } .media > img { inline-size: 100%; block-size: 100%; object-fit: cover; } .media--16x9 { aspect-ratio: 16 / 9; } .media--4x3 { aspect-ratio: 4 / 3; } .media--3x4 { aspect-ratio: 3 / 4; } .media--1x1 { aspect-ratio: 1 / 1; } .media--21x9 { aspect-ratio: 21 / 9; } /* Slow, subtle push-in on hover. The transform is on the image, not the box, so the rounded corners stay crisp. */ .media--zoom > img { transition: transform var(--dur-slow) var(--ease-out); will-change: transform; } a:hover .media--zoom > img, a:focus-visible .media--zoom > img { transform: scale(1.045); } /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .full-bleed { inline-size: 100vw; margin-inline-start: 50%; transform: translateX(-50%); } [dir='rtl'] .full-bleed { transform: translateX(50%); } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } .hide-mobile { display: revert; } .show-mobile { display: none; } @media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: revert; } } /* Icons inherit colour and size from their parent. */ .icon { inline-size: 1em; block-size: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--solid { fill: currentColor; stroke: none; } /* Directional glyphs must flip with the writing direction. */ [dir='rtl'] .icon--flip { transform: scaleX(-1); } /* -------------------------------------------------------------------------- Scroll reveal -------------------------------------------------------------------------- Elements marked [data-reveal] start shifted and transparent; main.js adds .is-revealed via IntersectionObserver. If JS never runs, the .no-js rule below leaves everything visible — content is never gated on script. -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-revealed { opacity: 1; transform: none; } .no-js [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- Print -------------------------------------------------------------------------- */ @media print { .site-nav, .site-footer, .banner-strip, .skip-link { display: none !important; } body { background: #fff; color: #000; } }