/* ========================================================================== BESA Theme ========================================================================== Single source of truth for fonts, sizes, colors, and component styles. To change the look of the site, edit this file — no other file needs touching for styling. Visual direction: modern light sports-federation — clean, institutional, confident. White/light surfaces, deep navy structure, a single vibrant accent (the brand royal blue). Light is the default; dark mode is the opt-in via a `dark` class on . Brand colors ------------ be-blue : #1107A7 (primary accent — the submitted brand blue. Deep royal blue. Fills, buttons, badge backgrounds, focus rings.) be-blue-bright : #6D7CFF (luminous accent — used in DARK mode for text, links, icons, borders. In LIGHT mode it auto-deepens to #1D4ED8 for legibility on white.) be-navy : #0B1B3F (structural navy — hero band, dark-mode base, footer accents.) be-gray : #EFEFEF (light neutral) Font system ------------ Inter (400/500/600/700) : EVERYTHING — headings, nav, buttons, cards, body, forms, footer. Professional sans. Bebas Neue (400) : HERO ONLY — the big display headline on the home page (and stat numerals). Applied via the scoped .font-bebas helper, never globally. ========================================================================== */ /* ========================================================================== 1. THEME VARIABLES (light-first) ========================================================================== */ :root { --bg-primary: #F5F6F8; --bg-secondary: #FFFFFF; --text-primary: #12151B; --text-muted: rgba(18, 21, 27, 0.58); --border-light: rgba(18, 21, 27, 0.12); --surface: #FFFFFF; --surface-hover: rgba(18, 21, 27, 0.05); --header-bg: rgba(255, 255, 255, 0.85); --mobile-bg: rgba(250, 251, 253, 0.97); --overlay-bg: rgba(11, 27, 63, 0.45); /* Blue brand accent family */ --accent: #1107A7; --accent-hover: #0E0A8C; --accent-bright: #1D4ED8; --accent-soft: #EEF1FF; --accent-glow: rgba(17, 7, 167, 0.20); /* Structural navy — hero band + dark-mode base */ --navy: #0B1B3F; /* Semantic status color (live / errors) */ --color-live: #E11D48; } /* Dark theme — a `dark` class on (see partials/_theme-init). Navy-tinted near-black surfaces; the luminous accent brightens back to #6D7CFF where it reads clearly on dark. */ :root.dark { --bg-primary: #0A1224; --bg-secondary: #0D1730; --text-primary: #F5F7FC; --text-muted: #A3AEC4; --border-light: rgba(255, 255, 255, 0.10); --surface: #101C38; --surface-hover: rgba(255, 255, 255, 0.06); --header-bg: rgba(10, 18, 36, 0.85); --mobile-bg: rgba(10, 18, 36, 0.97); --overlay-bg: rgba(0, 0, 0, 0.6); --accent: #4E5BFF; --accent-hover: #3A47E8; --accent-bright: #6D7CFF; --accent-soft: rgba(109, 124, 255, 0.14); --accent-glow: rgba(109, 124, 255, 0.30); --navy: #0B1B3F; --color-live: #F43F5E; } /* ========================================================================== 2. BASE ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; } /* ---- FONT ROLES ---- EVERYTHING = Inter. Only the homepage hero and stat numerals use Bebas, via the scoped .font-bebas helper below — never globally. */ /* Headings: clean Inter with tight tracking and strong weight. */ h1, h2, h3, h4, h5 { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; } /* Bebas display helper — HERO ONLY. Condensed, uppercase, monumental. */ .font-bebas { font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 0.01em; line-height: 1; text-transform: uppercase; } /* Avoid single-word orphans in paragraphs */ p { text-wrap: pretty; } /* Hide Alpine-managed elements until Alpine is ready (prevents flash of content) */ [x-cloak] { display: none !important; } /* Hero — always a navy band, in both themes. The faint photo overlay is applied via ::before so hero text stays white regardless of theme. */ .hero-section { position: relative; background-color: var(--navy); color: #FFFFFF; overflow: hidden; } .hero-section::before { content: ""; position: absolute; inset: 0; background-image: url('../assets/besabg.png'); background-size: cover; background-position: 90% center; background-repeat: no-repeat; opacity: 0.22; pointer-events: none; } .hero-section > * { position: relative; z-index: 1; } /* The luminous accent stays bright on the navy hero in both themes. */ .hero-section .text-be-blue-bright { color: #6D7CFF; } .hero-section .link-brand { color: #6D7CFF; } /* The ticker pill is a light surface inside the navy hero — its accent must use the theme value so it stays legible on that surface. */ .hero-section .ticker .text-be-blue-bright, .hero-section .ticker .link-brand { color: var(--accent-bright); } /* Accessible focus indicator for keyboard navigation */ :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; } /* Skip-to-content link — hidden until focused */ .skip-link { position: absolute; left: -9999px; top: 0.75rem; z-index: 100; padding: 0.625rem 1rem; border-radius: 0.5rem; background: var(--accent); color: #fff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; } .skip-link:focus { left: 0.75rem; } /* Tabular numerals for stats and date rails — keeps digits optically aligned. */ .tabular-nums, .ix-day, .ix-month { font-variant-numeric: tabular-nums; } /* ========================================================================== 3. BRAND COLOR UTILITIES ========================================================================== */ /* Deep blue — fills, badge backgrounds, solid accents (works on both themes). */ .text-be-blue { color: var(--accent); } .bg-be-blue { background-color: var(--accent); } /* Luminous blue — text, links, icons, borders. Auto-deepens in light mode. */ .text-be-blue-bright { color: var(--accent-bright); } .bg-be-blue-bright { background-color: var(--accent-bright); } .border-be-blue-bright { border-color: var(--accent-bright); } /* Structural navy — hero band, dark sections. */ .text-be-navy { color: var(--navy); } .bg-be-navy { background-color: var(--navy); } .text-be-gray { color: #EFEFEF; } .text-be-black { color: #0A1224; } .bg-be-gray { background-color: #EFEFEF; } .bg-be-black { background-color: #0A1224; } .text-primary { color: var(--text-primary); } .text-muted { color: var(--text-muted); } .border-light { border-color: var(--border-light); } .bg-surface { background-color: var(--surface); } .bg-surface-hover:hover { background-color: var(--surface-hover); } .bg-secondary { background-color: var(--bg-secondary); } /* ========================================================================== 4. BUTTONS & LINKS ========================================================================== */ .btn-brand { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.01em; background: var(--accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(11, 27, 63, 0.08); transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .btn-brand:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--accent-glow); } /* Pressed feedback — simulates a physical click */ .btn-brand:active { transform: translateY(0) scale(0.98); } /* Secondary / outline button */ .btn-secondary { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.01em; color: var(--accent-bright); background: transparent; border: 1px solid var(--border-light); display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .btn-secondary:hover { border-color: var(--accent-bright); background: var(--accent-soft); transform: translateY(-1px); } .btn-secondary:active { transform: scale(0.98); } .link-brand { color: var(--accent-bright); font-weight: 600; transition: color 0.25s ease, gap 0.25s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .link-brand:hover { color: var(--accent); gap: 0.65rem; } /* ========================================================================== 5. NAVIGATION ========================================================================== */ .nav-link { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s; } .nav-link:hover, .nav-link.active { color: var(--text-primary); } /* Mobile menu — the active-state links skip .nav-link, so force uppercase here too. */ .mobile-menu a { text-transform: uppercase; letter-spacing: 0.04em; } /* Mobile menu */ .mobile-menu { position: fixed; top: 0; right: 0; width: 75%; max-width: 320px; height: 100dvh; /* iOS-safe: avoids the bottom-bar jump */ transform: translateX(100%); transition: transform 0.35s ease; z-index: 40; background: var(--mobile-bg); backdrop-filter: blur(12px); border-left: 1px solid var(--border-light); } .mobile-menu.open { transform: translateX(0); } .menu-overlay { position: fixed; inset: 0; background: var(--overlay-bg); z-index: 35; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .menu-overlay.open { opacity: 1; pointer-events: auto; } .header-bg { background: var(--header-bg); backdrop-filter: blur(12px); border-bottom-color: var(--border-light); } /* ========================================================================== 6. COMPONENTS ========================================================================== */ .event-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 0.75rem; } .ticker { background: var(--surface); border: 1px solid var(--border-light); } /* Marquee — seamless auto-scrolling single row (game titles, partners). Two identical groups sit side by side; translating the track by -50% moves exactly one group's width, so the loop is seamless. Pauses on hover. Respects prefers-reduced-motion via the global block below. */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; will-change: transform; } .marquee-track:hover { animation-play-state: paused; } .carousel-btn { background: var(--surface); border: 1px solid var(--border-light); color: var(--text-primary); } .carousel-btn:hover { background: var(--surface-hover); border-color: var(--accent-bright); } .section-divider { border-color: var(--border-light); } .dot-inactive { background: var(--text-muted); } .dot-inactive:hover { background: var(--text-primary); opacity: 0.4; } /* Corporate index cards — events & news. Clean white card, subtle border, image top, restrained hover lift with a navy-tinted shadow and a quiet accent border. */ .card-ix { position: relative; background: var(--surface); border: 1px solid var(--border-light); border-radius: 0.75rem; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card-ix:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -14px rgba(11, 27, 63, 0.20); border-color: rgba(17, 7, 167, 0.28); } /* Media block with gentle zoom on hover */ .card-ix-media { position: relative; overflow: hidden; } .card-ix-media img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); width: 100%; height: 100%; object-fit: cover; } .card-ix:hover .card-ix-media img { transform: scale(1.04); } /* Title — Inter semibold; deepens to the brand blue on hover */ .ix-title { font-family: 'Inter', sans-serif; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; transition: color .25s ease; } .card-ix:hover .ix-title { color: var(--accent); } /* Date rail */ .ix-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border-right: 1px solid var(--border-light); padding-right: 0.875rem; } .ix-day { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--text-primary); } .ix-day.live { color: var(--color-live); } .ix-month { font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.2rem; } .ix-end { font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-bright); margin-top: 0.2rem; } /* Live dot — small, static, semantic */ .live-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--color-live); flex-shrink: 0; } /* Tag pill (game / category) — solid soft badge, no dashed border */ .tag-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--accent-bright); background: var(--accent-soft); padding: 0.2rem 0.6rem; border-radius: 0.375rem; white-space: nowrap; } .tag-pill-featured { background: var(--accent); color: #FFFFFF; } /* Arrow link */ .arrow-link { font-family: 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 600; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .arrow-link svg { flex-shrink: 0; display: block; transition: transform .3s ease; } .card-ix:hover .arrow-link svg { transform: translateX(4px); } /* Featured (wide) card — larger typography */ .card-ix.featured .ix-day { font-size: 2.75rem; } .card-ix.featured .ix-month { font-size: 0.875rem; } /* Icon buttons (social, controls) */ .icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0.5rem; border: 1px solid var(--border-light); background: var(--surface); color: var(--text-muted); transition: all 0.2s; } .icon-btn:hover { background: var(--surface-hover); border-color: var(--accent-bright); color: var(--accent-bright); } /* Soft neutral fill — "card on card" / out-of-month cells. Follows the theme. */ .bg-subtle { background-color: rgba(18, 21, 27, 0.05); } :root.dark .bg-subtle { background-color: rgba(255, 255, 255, 0.05); } /* Dropdown / popover surface (Media submenu) — follows the theme. */ .nav-dropdown { background: var(--mobile-bg); backdrop-filter: blur(12px); } /* Light / dark theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0.5rem; border: 1px solid var(--border-light); background: var(--surface); color: var(--text-muted); transition: all 0.2s; cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { background: var(--surface-hover); border-color: var(--accent-bright); color: var(--accent-bright); } /* Light (default): show the moon icon (switch to dark). */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } /* Dark: show the sun icon (switch to light). */ :root.dark .theme-toggle .icon-moon { display: none; } :root.dark .theme-toggle .icon-sun { display: block; } /* Theme-aware logo — light (default) shows dark-logo.svg; dark shows logo.svg. */ .theme-logo { display: none; } :root:not(.dark) .theme-logo-light { display: block; } :root.dark .theme-logo-dark { display: block; } /* ========================================================================== 7. TYPOGRAPHY OVERRIDES ========================================================================== */ /* Form inputs — theme-aware. The !important rules beat the Tailwind forms plugin, which forces white backgrounds + dark text. */ .form-input, .form-input:focus, .form-input:active, .form-input:focus-within { background-color: var(--surface) !important; border: 1px solid var(--border-light) !important; color: var(--text-primary) !important; border-radius: 0.5rem; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { border-color: var(--accent-bright) !important; outline: none; box-shadow: 0 0 0 3px var(--accent-glow); } /* Rich text article body — professional reading experience. Comfortable measure, clear hierarchy. */ .post-content { font-size: 1.125rem; line-height: 1.8; max-width: 65ch; } .post-content p { margin-bottom: 1.5rem; } .post-content h1, .post-content h2, .post-content h3 { margin: 2rem 0 1rem; line-height: 1.2; } .post-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; } .post-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; } .post-content li { margin-bottom: 0.5rem; } .post-content a { color: var(--accent-bright); text-decoration: underline; } .post-content a:hover { color: var(--accent); } .post-content img { border-radius: 0.5rem; margin: 1.5rem 0; max-width: 100%; } .post-content blockquote { border-left: 3px solid var(--accent-bright); padding: 0.5rem 0 0.5rem 1.25rem; margin: 1.75rem 0; color: var(--text-muted); font-style: italic; } .post-content strong { color: var(--text-primary); font-weight: 600; } /* ========================================================================== 8. MOTION — respect reduced-motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }