/* ========================================================================== Khaldiya Club — design tokens -------------------------------------------------------------------------- Every colour, size, space, radius, duration and shadow used anywhere in the site is declared here. Components reference tokens only — there is no hardcoded hex in components.css, which is what lets the admin panel restyle the whole site by overriding a single custom property at runtime. The admin-controlled values (--brand and friends) are re-declared inline in the document ; everything below is the fallback if that never happens. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Typefaces -------------------------------------------------------------------------- Self-hosted, no external requests. OTF/TTF rather than WOFF2 because the source files shipped that way — see the README for the conversion command that halves these payloads. -------------------------------------------------------------------------- */ @font-face { font-family: 'Roundkey'; src: url('../fonts/Roundkey-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roundkey'; src: url('../fonts/Roundkey-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roundkey'; src: url('../fonts/Roundkey-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* One weight only. Arabic headings get their presence from size, tracking and colour rather than weight — never from a synthesised bold, which breaks the joining behaviour of the script. */ @font-face { font-family: 'DIN Next LT Arabic'; src: url('../fonts/DINNextLTArabic-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } :root { --font-en: 'Roundkey', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ar: 'DIN Next LT Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; /* The active stack. Arabic is listed first when the document is in Arabic so the Arabic face wins for shared glyphs like punctuation and digits. */ --font-sans: var(--font-en); --font-num: var(--font-en); } :root:lang(ar), [lang='ar'] { --font-sans: var(--font-ar), var(--font-en); } /* Scores, squad numbers, dates and times stay in Roundkey in both languages so numerals are consistent across the site. */ [lang='ar'] .num, [lang='ar'] time, [lang='ar'] .score, [lang='ar'] .shirt-number { font-family: var(--font-en); } /* -------------------------------------------------------------------------- 2. Brand palette -------------------------------------------------------------------------- Derived from #f3e73f — hsl(56, 88%, 60%). The base yellow is 15.6:1 on the dark canvas and 1.29:1 on white, so it is an accent, never a surface for text. Two rules follow from that and are encoded in the tokens rather than left to discipline: - text placed ON the yellow is always --brand-on (near-black, 14.7:1) - yellow used AS text on a light surface is always --brand-ink (5.0:1) -------------------------------------------------------------------------- */ :root { --brand-100: #fbf7c9; --brand-200: #f8f2a0; --brand-300: #f6ee79; --brand-400: #f3e73f; /* base */ --brand-500: #dccf22; --brand-600: #b0a50f; --brand-700: #6f6605; /* Admin-overridable entry points. */ --brand: var(--brand-400); --brand-hover: var(--brand-500); --brand-ink: var(--brand-700); --brand-on: #141400; /* The gold of the crest bezel. Reserved for the main-sponsor tier and the thin rules that echo the badge — never for body text. */ --accent: #c9a227; --accent-soft: rgba(201, 162, 39, 0.16); /* Translucent brand washes, for hover fills and focus halos. */ --brand-a08: rgba(243, 231, 63, 0.08); --brand-a16: rgba(243, 231, 63, 0.16); --brand-a32: rgba(243, 231, 63, 0.32); } /* -------------------------------------------------------------------------- 3. Status colours -------------------------------------------------------------------------- */ :root { --live: #e5484d; --live-soft: rgba(229, 72, 77, 0.14); --win: #3dd68c; --draw: #9a9aa4; --loss: #e5484d; --info: #4a9eff; } /* -------------------------------------------------------------------------- 4. Semantic surfaces — dark (default) -------------------------------------------------------------------------- Components never reference a neutral directly. They use these. -------------------------------------------------------------------------- */ :root, [data-theme='dark'] { color-scheme: dark; --canvas: #08080a; --surface: #0e0e11; --surface-raised: #16161a; --surface-overlay: #1e1e23; --surface-sunken: #050506; --surface-invert: #f7f7f5; --text-primary: #f5f5f7; --text-secondary: #b4b4be; --text-muted: #8a8a96; --text-invert: #0e0e11; --text-on-image: #ffffff; --border: #2a2a31; --border-strong: #3a3a44; --border-faint: rgba(245, 245, 247, 0.07); /* Brand as text is safe at full strength on dark. */ --brand-text: var(--brand); /* Brand as a *graphic* — underlines, accent ticks, active indicators. These carry meaning, so WCAG 1.4.11 wants 3:1 against their backdrop. On dark that is the yellow itself (15.6:1). */ --brand-rule: var(--brand); --scrim: rgba(5, 5, 6, 0.72); --scrim-soft: rgba(5, 5, 6, 0.4); --hero-veil: linear-gradient( to top, rgba(5, 5, 6, 0.94) 0%, rgba(5, 5, 6, 0.72) 32%, rgba(5, 5, 6, 0.22) 64%, rgba(5, 5, 6, 0.35) 100% ); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.62); /* The full-colour crest is a black shield, so on the dark canvas it needs a lighter plate behind it to stay legible. */ --logo-plate: transparent; --logo-plate-nav: transparent; --skeleton: #1a1a1f; } /* -------------------------------------------------------------------------- 5. Semantic surfaces — light -------------------------------------------------------------------------- Designed, not inverted. Note --brand-text switches to the dark olive so the yellow is never used as text on a pale background. -------------------------------------------------------------------------- */ [data-theme='light'] { color-scheme: light; --canvas: #ffffff; --surface: #f7f7f5; --surface-raised: #ffffff; --surface-overlay: #efefec; --surface-sunken: #eceae4; --surface-invert: #0e0e11; --text-primary: #0e0e11; --text-secondary: #45454d; --text-muted: #6a6a73; --text-invert: #f5f5f7; --text-on-image: #ffffff; --border: #e2e2dd; --border-strong: #c9c9c2; --border-faint: rgba(14, 14, 17, 0.08); --brand-text: var(--brand-ink); /* #f3e73f is 1.29:1 on white — invisible as a rule and a 1.4.11 failure. This darker gold holds the brand hue at 3.5:1. */ --brand-rule: #a8850f; --scrim: rgba(5, 5, 6, 0.6); --scrim-soft: rgba(5, 5, 6, 0.3); --hero-veil: linear-gradient( to top, rgba(5, 5, 6, 0.9) 0%, rgba(5, 5, 6, 0.62) 34%, rgba(5, 5, 6, 0.16) 68%, rgba(5, 5, 6, 0.3) 100% ); --shadow-sm: 0 1px 2px rgba(14, 14, 17, 0.06); --shadow-md: 0 4px 16px rgba(14, 14, 17, 0.08); --shadow-lg: 0 16px 48px rgba(14, 14, 17, 0.12); --logo-plate: transparent; --logo-plate-nav: transparent; --skeleton: #eceae4; } /* -------------------------------------------------------------------------- 6. Type scale -------------------------------------------------------------------------- Fluid between a 360px phone and a 1440px desktop. Display sizes carry negative tracking; the small uppercase labels carry positive tracking. -------------------------------------------------------------------------- */ :root { --fs-display: clamp(2.75rem, 1.35rem + 5.6vw, 6rem); --fs-h1: clamp(2.25rem, 1.3rem + 4.7vw, 4.75rem); --fs-h2: clamp(1.75rem, 1.2rem + 2.7vw, 3.25rem); --fs-h3: clamp(1.375rem, 1.1rem + 1.3vw, 2rem); --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-label: 0.6875rem; --fs-score: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --lh-tight: 0.94; --lh-snug: 1.08; --lh-heading: 1.15; --lh-body: 1.6; --lh-relaxed: 1.75; --ls-display: -0.035em; --ls-heading: -0.02em; --ls-body: 0; --ls-label: 0.14em; --ls-label-wide: 0.22em; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; } /* Arabic needs a slightly larger optical size and much looser leading than Latin at the same nominal size, and tracking must never be applied — it would break the cursive joins. */ [lang='ar'] { --ls-display: 0; --ls-heading: 0; --ls-label: 0; --ls-label-wide: 0; --lh-tight: 1.18; --lh-snug: 1.28; --lh-heading: 1.38; --lh-body: 1.85; --lh-relaxed: 2; } /* -------------------------------------------------------------------------- 7. Space, layout, radius -------------------------------------------------------------------------- */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Vertical rhythm between homepage sections. */ --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem); --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 5rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem); --container: 1480px; --container-narrow: 780px; --container-wide: 1760px; --radius-xs: 2px; --radius-sm: 3px; --radius: 4px; --radius-lg: 8px; --radius-xl: 14px; --radius-pill: 999px; --border-width: 1px; --rule-accent: 3px; --nav-height: 76px; --nav-height-compact: 64px; } @media (max-width: 768px) { :root { --nav-height: 64px; --nav-height-compact: 56px; } } /* -------------------------------------------------------------------------- 8. Motion -------------------------------------------------------------------------- Fast and purposeful. Nothing decorative runs longer than 600ms. -------------------------------------------------------------------------- */ :root { --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-reveal: 620ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); --reveal-distance: 22px; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --reveal-distance: 0px; } } /* -------------------------------------------------------------------------- 9. Elevation order -------------------------------------------------------------------------- */ :root { --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-skip: 600; } /* -------------------------------------------------------------------------- 10. Focus -------------------------------------------------------------------------- One ring, used everywhere, visible against both themes and against photos. -------------------------------------------------------------------------- */ :root { --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 5px var(--brand); --focus-ring-flat: 0 0 0 3px var(--brand); --focus-outline: 2px solid var(--brand); --focus-offset: 3px; }