/* Futininja design tokens — DAY (light) is the default mode. Logo-rooted: warm paper, deep ink, emerald green accent. Accent is overridden via the Tweaks panel (mainstream Brazilian club presets). Two surface families coexist: - paper-* : foreground "card" surfaces. - ink-* : page background + dark-accent surfaces (top bar, banners). Day mode (default) renders the entire ink-* scale as LIGHT surfaces so the page chrome paints warm off-white, and paper-* stays as warm whites for cards. Night mode swaps both: ink-* becomes deep navy (the original dark scale), and paper-* becomes a darker card scale so the white "paper card" components stay legible on a dark page. Components throughout the app reference these variables directly — they never hard-code colours — so flipping the mode is a single attribute change on with no per-page CSS. */ :root, :root[data-mode="day"] { /* === Paper (cards / elevated surfaces) === */ --paper-0: #ffffff; /* pure white cards */ --paper-50: #fafaf7; /* warm off-white card */ --paper-100:#f1f0eb; /* card hover, dividers */ --paper-200:#e3e1d9; /* input borders, soft separators */ --paper-300:#c9c6bb; /* muted icons, disabled */ --paper-400:#9c998c; --paper-500:#6e6c61; --paper-700:#3a3a36; /* secondary text */ --paper-900:#15140f; /* primary text */ /* === Ink (page background + dark-accent surfaces) === In DAY mode these resolve to LIGHT shades so the app chrome (top bar, sidebar mini-cards, etc., which all use ink-*) paints warm off-white. The numeric scale still climbs from "deepest text" (50) → "page bg" (900) so existing page CSS keeps working. */ --ink-900: #f1f0eb; /* page background (warm off-white, 1 shade darker than paper-50) */ --ink-850: #ebe9e1; --ink-800: #ffffff; /* "dark card" → white card on light bg */ --ink-700: #e3e1d9; /* subtle borders */ --ink-600: #c9c6bb; --ink-500: #9c998c; --ink-400: #6e6c61; /* muted text on light bg */ --ink-300: #3a3a36; --ink-200: #1f1e1a; --ink-100: #15140f; /* primary text on light bg */ --ink-50: #0a0a08; /* === Accent (emerald default — overridden by tweak preset) === */ --accent: #10b981; --accent-strong: #059669; --accent-soft: #d1fae5; --accent-ink: #022c22; /* === Semantic === */ --win: #22c55e; --draw: #f59e0b; --loss: #ef4444; --live: #ff3355; /* === Type === */ --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --font-sans: "Inter", "Manrope", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* === Radius === */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; /* === Shadow === */ --shadow-card: 0 1px 2px rgba(20,18,12,0.04), 0 8px 24px rgba(20,18,12,0.06); --shadow-pop: 0 24px 48px -12px rgba(20,18,12,0.18), 0 4px 8px rgba(20,18,12,0.06); } /* =========================================================================== NIGHT MODE — opt-in via . Swaps both surface families: - ink-* → deep navy (the original dark scale) - paper-* → dark card shades so the white paper cards stay readable Accent + semantic + radius + type stay identical. ========================================================================= */ :root[data-mode="night"] { /* Paper now points at darker card surfaces. Same numeric scale: 0 = brightest card, 900 = primary text colour on those cards. */ --paper-0: #1d2330; /* elevated card */ --paper-50: #1a2030; /* default card */ --paper-100:#232a3a; /* hover, dividers */ --paper-200:#2c3447; /* borders */ --paper-300:#3a4358; --paper-400:#5a6580; --paper-500:#8892ad; --paper-700:#b9c0d2; /* secondary text on dark cards */ --paper-900:#f4f5f9; /* primary text on dark cards */ /* Ink reverts to its original deep-navy intent — dark page bg + slightly lighter dark cards/banners. */ --ink-900: #0a0d10; --ink-850: #0e1216; --ink-800: #131820; --ink-700: #1a2030; --ink-600: #232a3a; --ink-500: #3a4358; --ink-400: #5a6580; --ink-300: #8892ad; --ink-200: #b9c0d2; --ink-100: #e4e7ef; --ink-50: #f4f5f9; /* Stronger shadows so cards still feel elevated against the dark page. */ --shadow-card: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.30); --shadow-pop: 0 24px 48px -12px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35); } /* =========================================================================== LOCAL "DARK SURFACE" SCOPE — `.fn-dark-surface` Some regions are intentionally dark ON TOP of a light page, regardless of the user's day/night preference: the login hero, the live-match banner, dark CTAs, any future "magazine cover" strip. Those regions paint their own hard-coded dark background (or a dark-to-accent gradient) but still reference `--ink-*` tokens for the text/muted colours, which in day mode resolve to DARK values — producing black-on-black text. Applying `.fn-dark-surface` to the wrapper locally re-points the ink scale at its night-mode values so `var(--ink-100)` text is always light on that slab, never mind the global mode. Keep `--paper-*` unchanged here — paper cards sitting on top of a dark surface should still read as light paper cards in day mode (it's the intended "light paper on dark hero" contrast). ========================================================================= */ .fn-dark-surface { --ink-900: #0a0d10; --ink-850: #0e1216; --ink-800: #131820; --ink-700: #1a2030; --ink-600: #232a3a; --ink-500: #3a4358; --ink-400: #5a6580; --ink-300: #8892ad; --ink-200: #b9c0d2; --ink-100: #e4e7ef; --ink-50: #f4f5f9; /* Default text colour inside a dark slab, so child elements without an explicit color still paint light. Overriding `color` here cascades to descendants, which is exactly what we want. */ color: var(--ink-100); } /* === Reset-ish === */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--paper-900); background: var(--paper-50); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* === Utility classes === */ .fn-display { font-family: var(--font-display); letter-spacing: 0.01em; font-weight: 400; line-height: 0.92; text-transform: uppercase; } .fn-mono { font-family: var(--font-mono); } /* Stadium grain — subtle noise overlay */ .fn-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* Pitch lines pattern — for hero/banner */ .fn-pitch-bg { background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80px, rgba(255,255,255,0.04) 81px, transparent 82px), linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 50%, rgba(255,255,255,0.04) 50% 51%, transparent 51%), radial-gradient(ellipse at 50% 100%, rgba(16,185,129,0.15), transparent 60%); } /* Diagonal stripes for amateur/varzea flavor */ .fn-stripes { background-image: repeating-linear-gradient( -45deg, rgba(20,18,12,0.04) 0, rgba(20,18,12,0.04) 12px, transparent 12px, transparent 24px ); } button { font: inherit; } input, textarea { font: inherit; color: inherit; } a { color: inherit; } /* Custom scrollbar inside scroll regions */ .fn-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .fn-scroll::-webkit-scrollbar-thumb { background: var(--paper-200); border-radius: 4px; } .fn-scroll::-webkit-scrollbar-track { background: transparent; } /* Focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Animations */ @keyframes fn-pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .fn-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: fn-pulse-live 1.2s ease-in-out infinite; margin-right: 6px; vertical-align: middle; } @keyframes fn-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fn-fade-up { animation: fn-fade-up 0.4s ease-out both; } /* Jersey number badge */ .fn-jersey { font-family: var(--font-display); font-size: 1.5em; background: var(--paper-900); color: var(--paper-50); padding: 0.05em 0.4em; border-radius: 4px; display: inline-block; letter-spacing: 0; } /* =========================================================================== RESPONSIVE LAYOUT — breakpoint at 900px. Below 900px the app collapses into a mobile shell: - Auth screens drop the side hero, form goes single-column with logo on top - App shell hides the persistent sidebar; hamburger reveals a slide-in drawer - Header compresses: search input → search icon button (opens overlay) ========================================================================= */ .fn-mobile-only { display: none !important; } .fn-desktop-only { display: initial; } /* === Auth two-column layout === */ .fn-auth-grid { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--ink-900); color: var(--ink-100); } .fn-auth-hero { padding: 40px 56px; } .fn-auth-form { padding: 40px 56px; } .fn-auth-form-inner { max-width: 440px; } .fn-auth-mobile-brand { display: none; } /* === App shell (header + sidebar + main) === */ .fn-app-shell { display: grid; grid-template-columns: 240px 1fr; max-width: 1440px; margin: 0 auto; padding: 24px; gap: 24px; align-items: start; } .fn-app-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; } .fn-app-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--ink-900) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; } .fn-app-search-wrap { flex: 1; max-width: 480px; position: relative; } /* === Home feed two-column layout (feed + right rail) === */ .fn-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .fn-home-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; } /* === Mobile drawer (off-canvas sidebar) === */ .fn-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; animation: fn-fade-in 0.15s ease-out; } @keyframes fn-fade-in { from { opacity: 0; } to { opacity: 1; } } .fn-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px); background: var(--ink-900); border-right: 1px solid rgba(255,255,255,0.06); z-index: 100; padding: 16px; overflow-y: auto; transform: translateX(-100%); animation: fn-slide-in 0.18s ease-out forwards; } @keyframes fn-slide-in { to { transform: translateX(0); } } /* === Mobile search overlay === */ .fn-search-overlay { position: fixed; inset: 0; background: var(--ink-900); z-index: 110; padding: 16px; display: flex; flex-direction: column; gap: 12px; } @media (max-width: 900px) { .fn-mobile-only { display: initial !important; } .fn-desktop-only { display: none !important; } /* Auth: stack hero on top of form (or hide) and drop heavy padding */ .fn-auth-grid { grid-template-columns: 1fr; min-height: 100vh; } .fn-auth-hero { display: none; /* free up the screen for the form on small viewports */ } .fn-auth-form { padding: 24px 20px 32px; min-height: 100vh; } .fn-auth-form-inner { max-width: 100%; margin: 0 auto; } .fn-auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } /* App shell collapses to single column; sidebar is hidden (drawer takes over) */ .fn-app-shell { grid-template-columns: 1fr; padding: 16px; gap: 16px; } .fn-app-sidebar { display: none; } .fn-app-header { padding: 0 12px; gap: 8px; height: 56px; } .fn-app-search-wrap { display: none; } /* Home feed: drop the right rail entirely on mobile so the feed gets the full screen width — the rail is a "coming soon" placeholder, not critical. */ .fn-home-grid { grid-template-columns: 1fr; } .fn-home-aside { display: none; } }