/* Shared desktop shell for /profile, /discovery, /news, /sport, /match. * Linked from each page's . Keeps the nav + sidebar consistent * so every desktop page has the same chrome. */ * { box-sizing: border-box; } html, body { background: #050807; color: var(--text-primary); font-family: var(--font-ui); margin: 0; min-height: 100vh; } a { color: inherit; text-decoration: none; } .app-frame { min-height: 100vh; padding: 16px; background: radial-gradient(ellipse 1200px 800px at 20% 0%, rgba(200,255,62,0.10), transparent 60%), radial-gradient(ellipse 1000px 700px at 90% 100%, rgba(200,255,62,0.06), transparent 60%), #050807; } .app-shell { background: var(--bg-base); border-radius: 24px; border: 1px solid rgba(255,255,255,0.06); overflow: hidden; min-height: calc(100vh - 32px); display: grid; grid-template-rows: auto 1fr; } /* NAV */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(10,15,12,0.4); } .nav-left { display: flex; align-items: center; gap: 36px; } .nav-logo { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; } .nav-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; } .nav-tabs { display: flex; gap: 6px; } .nav-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; } .nav-tab:hover, .nav-tab.active { color: var(--text-primary); background: rgba(255,255,255,0.04); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-lang { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); font-size: 13px; font-weight: 600; } .nav-lang .flag { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #012169 33%, white 33% 66%, #C8102E 66%); } .nav-login { padding: 8px 18px; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); cursor: pointer; } .nav-signup { padding: 8px 18px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; border: 0; cursor: pointer; } /* MAIN: sidebar + content */ .main { display: grid; grid-template-columns: 240px 1fr; min-height: 0; } .sidebar { border-right: 1px solid rgba(255,255,255,0.06); padding: 20px 14px; overflow-y: auto; max-height: calc(100vh - 100px); } .sidebar-section { margin-bottom: 24px; } .sidebar-section-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 0 14px; margin-bottom: 8px; } .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; margin-bottom: 2px; text-decoration: none; } .sidebar-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); } .sidebar-item.active { background: rgba(200,255,62,0.08); color: var(--text-primary); border-left: 3px solid var(--accent); padding-left: 11px; } .sidebar-item .icon { font-size: 16px; width: 20px; display: inline-flex; justify-content: center; } .sidebar-item .badge { margin-left: auto; font-size: 10px; font-weight: 700; background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px; } .sidebar-item .live-pill { margin-left: auto; font-size: 9px; font-weight: 700; color: #FF3B5C; text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 4px; } .sidebar-item .live-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #FF3B5C; animation: pulse-dot 1.2s infinite; } .content { padding: 0; overflow-y: auto; max-height: calc(100vh - 100px); } .preview-pill { position: fixed; bottom: 24px; right: 24px; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); border: 1px solid var(--border-hairline); border-radius: 999px; padding: 10px 18px; font-size: 12px; font-weight: 600; z-index: 99; display: inline-flex; align-items: center; gap: 8px; } .preview-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (max-width: 900px) { .app-frame { padding: 0; } .app-shell { border-radius: 0; min-height: 100vh; } .nav-tabs, .nav-lang { display: none; } .main { grid-template-columns: 1fr; } .sidebar { display: none; } }