/* ═══════════════════════════════════════════════════ COACHAY — GLOBAL CSS Importuj ten plik w każdym ekranie: ═══════════════════════════════════════════════════ */ /* ── Fonty ── */ /* Czcionki ładowane przez _sidebar.js lub bezpośrednio w */ @keyframes splashPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* ── Zmienne ── */ :root { --tlo: #0A0A0A; --tlo-karta: #161616; --tlo-karta2: #1E1E1E; --tlo-input: #111111; --border: #272727; --border2: #333333; --bialy: #FFFFFF; --szary: #777777; --szary-j: #AAAAAA; --akcent: #3B82F6; --sukces: #4ADE80; --blad: #F87171; --warn: #FBBF24; --font: 'Nunito', sans-serif; --font-d: 'Syne', sans-serif; --r: 18px; --r-pill: 999px; --nav-h: 72px; --top-h: 62px; --phone-w: 390px; --phone-h: 844px; /* ── Kolory czcionek — globalne ── */ --txt-primary: #FFFFFF; --txt-secondary: #AAAAAA; --txt-muted: #777777; --txt-inverse: #000000; } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } button { cursor: pointer; font-family: var(--font); border: none; outline: none; background: none; } input, textarea { font-family: var(--font); outline: none; border: none; } /* ── Body / ramka telefonu ── */ body { min-height: 100vh; background: #050505; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--font); } .phone { width: 100%; max-width: var(--phone-w); height: var(--phone-h); background: var(--tlo); border-radius: 44px; border: 8px solid #1C1C1C; box-shadow: 0 0 0 1px #2A2A2A, 0 50px 100px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04); position: relative; overflow: hidden; display: flex; flex-direction: column; } .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 30px; background: #1C1C1C; border-radius: 0 0 22px 22px; z-index: 110; pointer-events: none; } /* ── Top bar ── */ .top-bar { height: var(--top-h); background: #000; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 50; } .ctx-switcher { display: flex; align-items: center; gap: 6px; background: var(--tlo-karta); border: 1px solid var(--border2); border-radius: var(--r-pill); padding: 7px 12px 7px 8px; cursor: pointer; max-width: 260px; transition: background 0.2s; } .ctx-switcher:active { background: var(--tlo-karta2); } .ctx-dot { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#3B82F6,#1D4ED8); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; } .ctx-text { display: flex; flex-direction: column; min-width: 0; } .ctx-klub { font-size: 13px; color: var(--szary); font-weight: 700; line-height: 1; } .ctx-team { font-size: 16px; font-weight: 800; color: var(--bialy); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-arrow { color: var(--szary); font-size: 13px; flex-shrink: 0; } .top-bar-right { display: flex; align-items: center; gap: 8px; } .bell-btn { position: relative; width: 38px; height: 38px; background: var(--tlo-karta); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: background 0.2s; } .bell-btn:active { background: var(--tlo-karta2); } .bell-count { position: absolute; top: -4px; right: -4px; background: var(--blad); color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--tlo); } .menu-btn { width: 38px; height: 38px; background: var(--tlo-karta); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .menu-btn:active { background: var(--tlo-karta2); } .menu-btn-lines { display: flex; flex-direction: column; gap: 4px; } .menu-btn-lines span { display: block; width: 16px; height: 2px; background: var(--szary-j); border-radius: 2px; transition: all 0.2s; } .menu-btn.open .menu-btn-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-btn.open .menu-btn-lines span:nth-child(2) { opacity: 0; } .menu-btn.open .menu-btn-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Panel MENU (slide z prawej) ── */ .menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 280px; background: var(--tlo-karta); border-left: 1px solid var(--border); z-index: 160; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.32,0.72,0,1); display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; } .menu-panel::-webkit-scrollbar { display: none; } .menu-panel.open { transform: translateX(0); } .menu-panel-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 155; opacity: 0; pointer-events: none; transition: opacity 0.35s; } .menu-panel-overlay.open { opacity: 1; pointer-events: all; } .menu-panel-top { padding: 48px 20px 20px; border-bottom: 1px solid var(--border); } .menu-panel-avatar { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg,#3B82F6,#1D4ED8); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px; } .menu-panel-name { font-size: 16px; font-weight: 800; color: var(--txt-primary); } .menu-panel-role { font-size: 12px; font-weight: 600; color: var(--txt-muted); margin-top: 2px; } .menu-panel-items { padding: 12px 0; flex: 1; } .menu-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; transition: background 0.15s; text-decoration: none; } .menu-item:active { background: var(--tlo-karta2); } .menu-item-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--tlo-karta2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .menu-item-label { font-size: 14px; font-weight: 800; color: var(--txt-primary); flex: 1; } .menu-item-arrow { font-size: 12px; color: var(--txt-muted); } .menu-panel-bottom { padding: 16px 20px 32px; border-top: 1px solid var(--border); } .menu-logout { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; } .menu-logout-icon { font-size: 18px; } .menu-logout-txt { font-size: 14px; font-weight: 800; color: var(--blad); } /* ── Obszar główny ── */ .screen-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 10px; } .screen-body::-webkit-scrollbar { display: none; } /* Animacja wejścia */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .screen-body > * { animation: fadeUp 0.25s ease both; } .screen-body > *:nth-child(1) { animation-delay: 0.03s; } .screen-body > *:nth-child(2) { animation-delay: 0.07s; } .screen-body > *:nth-child(3) { animation-delay: 0.11s; } .screen-body > *:nth-child(4) { animation-delay: 0.15s; } .screen-body > *:nth-child(5) { animation-delay: 0.19s; } .screen-body > *:nth-child(6) { animation-delay: 0.23s; } .screen-body > *:nth-child(7) { animation-delay: 0.27s; } /* ── Bottom nav ── */ .bottom-nav { height: var(--nav-h); background: rgba(8,8,8,0.98); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 6px 8px; flex-shrink: 0; z-index: 50; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 6px 2px; border-radius: 14px; transition: all 0.2s; text-decoration: none; } .nav-icon { font-size: 20px; line-height: 1; transition: font-size 0.2s; display: block; } .nav-label { font-size: 10px; font-weight: 800; color: var(--szary); letter-spacing: 0.2px; transition: color 0.2s; } .nav-item.active .nav-icon { font-size: 26px; } .nav-item.active .nav-label { color: var(--bialy); } .nav-item:active { background: var(--tlo-karta); } /* MECZ bańka — zawsze wyróżniona */ .nav-mecz { flex: 1; } .nav-mecz-bubble { width: 50px; height: 50px; border-radius: 16px; background: var(--bialy); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 18px rgba(255,255,255,0.12); position: relative; overflow: hidden; transition: transform 0.15s; } .nav-mecz-bubble::after { content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); animation: bubble-shimmer 2.8s ease-in-out infinite; pointer-events: none; } @keyframes bubble-shimmer { 0% { left: -100% } 55% { left: 150% } 100% { left: 150% } } .nav-item.nav-mecz:active .nav-mecz-bubble { transform: scale(0.92); } /* ── Overlay kontekst (z góry) ── */ .ctx-overlay { position: absolute; top: 0; left: 0; right: 0; background: rgba(14,14,14,0.98); border-bottom: 1px solid var(--border); z-index: 140; transform: translateY(-110%); transition: transform 0.3s cubic-bezier(0.32,0.72,0,1); padding: 14px 16px; backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(0,0,0,0.7); } .ctx-overlay.open { transform: translateY(0); } /* ── Panel powiadomień (z prawej) ── */ .notif-overlay { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; background: var(--tlo-karta); border-left: 1px solid var(--border); z-index: 160; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.32,0.72,0,1); display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; padding: 0; } .notif-overlay::-webkit-scrollbar { display: none; } .notif-overlay.open { transform: translateX(0); } .notif-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 155; opacity: 0; pointer-events: none; transition: opacity 0.35s; } .notif-backdrop.open { opacity: 1; pointer-events: all; } .ov-label { font-size: 10px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--szary); margin-bottom: 10px; } /* Kontekst — struktura klub > zespół */ .ctx-klub-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; } .ctx-klub-dot { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#3B82F6,#1D4ED8); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 14px; font-weight: 800; color: #fff; } .ctx-klub-name { font-size: 17px; font-weight: 800; color: var(--bialy); flex: 1; } .ctx-klub-role { font-size: 14px; color: var(--szary); font-weight: 600; } .ctx-teams { padding-left: 14px; border-left: 2px solid var(--border2); margin-left: 13px; margin-bottom: 8px; } .ctx-team-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background 0.15s; margin-bottom: 2px; } .ctx-team-opt.selected, .ctx-team-opt:active { background: var(--tlo-karta); } .ctx-team-color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ctx-team-name { font-size: 16px; font-weight: 800; color: var(--bialy); flex: 1; } .ctx-team-role { font-size: 13px; color: var(--szary); font-weight: 700; } .ctx-team-check { font-size: 17px; color: var(--sukces); opacity: 0; } .ctx-team-opt.selected .ctx-team-check { opacity: 1; } .ctx-overlay { border-radius: 0 0 18px 18px; border-bottom: 2px solid var(--akcent); } /* Powiadomienia */ .notif-hdr { display: flex; justify-content: space-between; align-items: center; padding: 48px 20px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .notif-tytul { font-family: var(--font-d); font-size: 18px; font-weight: 800; color: var(--bialy); } .notif-clear { font-size: 11px; font-weight: 800; color: var(--akcent); cursor: pointer; } .notif-item { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); align-items: flex-start; } .notif-item:last-child { border-bottom: none; } .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); flex-shrink: 0; margin-top: 4px; } .notif-dot.read { background: var(--border2); } .notif-msg { font-size: 13px; font-weight: 700; color: var(--bialy); line-height: 1.4; word-break: break-word; overflow-wrap: break-word; } .notif-time { font-size: 11px; color: var(--szary); margin-top: 2px; font-weight: 600; } /* ── Wspólne komponenty UI ── */ .s-label { font-size: 10px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: var(--szary); } .s-tytul { font-family: var(--font-d); font-size: 24px; font-weight: 800; color: var(--bialy); } .karta { background: var(--tlo-karta); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; } .badge { display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: 4px 12px; font-size: 11px; font-weight: 800; } .badge-green { background: rgba(74,222,128,0.12); color: var(--sukces); } .badge-red { background: rgba(248,113,113,0.12); color: var(--blad); } .badge-warn { background: rgba(251,191,36,0.12); color: var(--warn); } .badge-blue { background: rgba(59,130,246,0.12); color: var(--akcent); } .badge-dark { background: var(--tlo-karta2); color: var(--szary-j); border: 1px solid var(--border2); } .btn-primary { background: var(--bialy); color: #000; border-radius: var(--r-pill); padding: 13px 24px; font-size: 14px; font-weight: 900; position: relative; overflow: hidden; transition: transform 0.15s; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: shimmer 2.4s ease-in-out infinite; pointer-events: none; } @keyframes shimmer { 0% { left: -100% } 55% { left: 150% } 100% { left: 150% } } .btn-primary:active { transform: scale(0.97); } .btn-ghost { background: var(--tlo-karta); color: var(--szary-j); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; font-size: 12px; font-weight: 800; } /* Counter − val + */ .mzc-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--tlo-karta2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: var(--bialy); cursor: pointer; transition: background 0.1s; flex-shrink: 0; } .mzc-btn:active { background: var(--border2); } .mzc-val { min-width: 32px; text-align: center; font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--bialy); } /* Login overlay */ .login-overlay { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: rgba(0,0,0,0.97); z-index: 200; transform: translateY(-100%); transition: transform 0.45s cubic-bezier(0.32,0.72,0,1); display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; } .login-overlay::-webkit-scrollbar { display: none; } .login-overlay.open { transform: translateY(0); } .login-handle { display: flex; justify-content: center; padding: 14px 0 6px; cursor: pointer; flex-shrink: 0; } .login-handle-bar { width: 36px; height: 4px; background: var(--border2); border-radius: var(--r-pill); } .login-close { position: absolute; top: 10px; right: 16px; width: 30px; height: 30px; background: var(--tlo-karta); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--szary); cursor: pointer; z-index: 10; } .login-body { flex: 1; padding: 8px 26px 36px; display: flex; flex-direction: column; } .login-logo { text-align: center; margin-bottom: 24px; } .login-logo-txt { font-family: var(--font-d); font-size: 26px; font-weight: 800; color: var(--bialy); letter-spacing: 4px; text-transform: uppercase; } .login-logo-sub { font-size: 12px; color: var(--szary); font-weight: 600; margin-top: 4px; } .auth-tabs { display: flex; background: var(--tlo-karta); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; margin-bottom: 22px; } .auth-tab { flex: 1; padding: 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 900; color: var(--szary); background: transparent; transition: all 0.2s; } .auth-tab.active { background: var(--bialy); color: #000; } .form-group { margin-bottom: 14px; } .form-lbl { font-size: 11px; font-weight: 900; color: var(--szary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 7px; display: block; } .form-inp { width: 100%; background: var(--tlo-karta); border: 1.5px solid var(--border2); border-radius: 14px; padding: 14px 16px; color: var(--bialy); font-size: 15px; font-weight: 600; transition: border-color 0.2s, box-shadow 0.2s; } .form-inp::placeholder { color: var(--szary); } .form-inp:focus { border-color: var(--akcent); box-shadow: 0 0 0 3px rgba(59,130,246,0.14); } .auth-div { display: flex; align-items: center; gap: 12px; margin: 16px 0; } .auth-div-line { flex: 1; height: 1px; background: var(--border); } .auth-div-txt { font-size: 12px; color: var(--szary); font-weight: 700; } .social-btns { display: flex; gap: 10px; } .social-btn { flex: 1; padding: 12px; background: var(--tlo-karta); border: 1px solid var(--border2); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--szary-j); } .social-btn:active { background: var(--tlo-karta2); } .kod-info { margin-top: 16px; background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.18); border-radius: 14px; padding: 14px; text-align: center; } .kod-info-txt { font-size: 12px; color: rgba(147,197,253,0.9); font-weight: 700; line-height: 1.5; } /* JS helpers — shared */ /* Shared JS jest w _global.js */ @media (max-width: 430px) { body { padding: 0 !important; align-items: flex-start !important; } .phone { width: 100% !important; height: 100vh !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; } } /* Appka natywna (Capacitor) — ramka telefonu zawsze zdjęta, niezależnie od viewportu */ html.native-app body { padding: 0 !important; align-items: flex-start !important; } html.native-app .phone { width: 100% !important; height: 100vh !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; } html.native-app .notch { display: none !important; }