/* ════════════════════════════════════════════════════════════ BHAI·LOK — static design system Themes: Light · Dark · Glass. No motion. Static states only. ════════════════════════════════════════════════════════════ */ /* ── 1. Type · space · geometry ───────────────────────────── */ :root{ --font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-display:"Plus Jakarta Sans",Inter,system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --page-title:30px; --section-title:18px; --card-title:15px; --body:14px; --small:12px; --micro:11px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --radius-lg:14px; --radius:10px; --radius-pill:999px; --nav-w:232px; --nav-w-collapsed:72px; --rail-w:312px; --topbar-h:64px; /* legacy aliases → new tokens */ --gap-xs:var(--space-2); --gap-sm:var(--space-3); --gap-md:var(--space-4); --gap-lg:var(--space-5); --gap-xl:var(--space-6); --fs-h1:var(--page-title); --fs-h2:var(--section-title); --fs-h3:var(--card-title); --fs-body:var(--body); --fs-meta:var(--small); } /* ── 2. Theme tokens ──────────────────────────────────────── */ :root,[data-theme="dark"]{ --app-bg:#101214; --nav-bg:#151719; --panel-bg:#151719; --card-bg:#1C1F23; --card-muted:#20242A; --text-strong:#F5F6F7; --text:#E0E3E6; --text-muted:#A4ABB3; --text-faint:#747C85; --line:#30353C; --line-strong:#414852; --brand:#F5F6F7; --brand-contrast:#151719; --accent:#E06A60; --success:#52C98D; --warning:#E3AD55; --danger:#F07A7A; --focus:#8B9AFF; --shadow:0 12px 36px rgba(0,0,0,.26); } [data-theme="light"]{ --app-bg:#F4F6F8; --nav-bg:#FBFCFD; --panel-bg:#FBFCFD; --card-bg:#FFFFFF; --card-muted:#F7F8FA; --text-strong:#151719; --text:#2C3035; --text-muted:#6F767D; --text-faint:#9AA1A8; --line:#E6E9ED; --line-strong:#D7DCE2; --brand:#17191C; --brand-contrast:#FFFFFF; --accent:#B23A36; --success:#247A55; --warning:#A56A13; --danger:#B43333; --focus:#536DFF; --shadow:0 10px 30px rgba(24,30,38,.06); } [data-theme="glass"]{ --app-bg:#0B0E13; --nav-bg:rgba(8,11,16,.42); --panel-bg:rgba(8,11,16,.38); --card-bg:rgba(10,14,20,.58); --card-muted:rgba(255,255,255,.08); --text-strong:#F5F8FB; --text:#DDE4EB; --text-muted:#9DA8B4; --text-faint:#6F7A87; --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.30); --brand:#E8483C; --brand-contrast:#FFFFFF; --accent:#FF5A4E; --success:#2FD08A; --warning:#FFB03A; --danger:#FF5A4E; --focus:#7C9AFF; --shadow:0 18px 44px rgba(0,0,0,.45); /* Theme background (drop the chosen artwork at shell-frontend/theme-bg.jpg). Second layer is the fallback so the theme still renders before the file lands. */ --glass-image:url("../theme-bg.jpg"), url("../bhai-lok-glass-bg.jpg"); } /* aliases used by existing page styles → resolve per theme */ [data-theme="dark"],[data-theme="glass"],:root{ --fg:var(--text); --muted:var(--text-muted); --muted-2:var(--text-faint); } [data-theme="light"]{ --fg:var(--text); --muted:var(--text-muted); --muted-2:var(--text-faint); } [data-theme="dark"]{ --surface:var(--card-muted); --raised:var(--card-bg); } [data-theme="light"]{ --surface:var(--card-muted); --raised:#FFFFFF; } [data-theme="glass"]{ --surface:rgba(255,255,255,.08); --raised:rgba(255,255,255,.14); } :root{ --border:var(--line); --border-2:var(--line-strong); } :root{ --glass-chrome:var(--nav-bg); --glass-surface:var(--card-bg); --glass-elevated:var(--card-bg); --glass-solid:var(--card-bg); } [data-theme="glass"]{ --glass-surface:rgba(10,14,20,.55); } /* ── 3. Base ──────────────────────────────────────────────── */ *{ box-sizing:border-box; margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; } body{ font-family:var(--font-ui); font-size:var(--body); line-height:1.55; color:var(--text); background:var(--app-bg); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } a,button,[role="button"],input,select,textarea,label{ touch-action:manipulation; } html,body{ overscroll-behavior:none; } h1,h2,h3{ font-family:var(--font-display); color:var(--text-strong); } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; font-size:inherit; line-height:1.2; -webkit-appearance:none; appearance:none; background:none; border:0; cursor:pointer; color:inherit; } svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; width:18px; height:18px; flex-shrink:0; } /* icons inside text buttons and state cards scale to their control */ .btn svg{ width:16px; height:16px; flex-shrink:0; } [data-theme="glass"] .btn svg{ width:18px; height:18px; } .state-icon svg{ width:20px; height:20px; } img,video{ max-width:100%; display:block; } ::selection{ background:color-mix(in srgb, var(--focus) 26%, transparent); } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; } .num{ font-variant-numeric:tabular-nums; } /* glass backdrop (admin-selected image + readability scrim) */ .app-bg{ position:fixed; inset:0; z-index:0; display:none; } [data-theme="glass"] .app-bg{ display:block; background:var(--glass-image) center/cover no-repeat; filter:saturate(1.35) contrast(1.06) blur(12px); transform:scale(1.12); } /* image-warm = default launch theme: same artwork background, slightly softer */ [data-theme="image-warm"] .app-bg{ display:block; background:var(--glass-image) center/cover no-repeat; filter:saturate(1.28) contrast(1.05) blur(11px); transform:scale(1.1); } [data-theme="glass"] .app-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,6,10,.52), rgba(4,6,10,.68)); } .app-atmosphere{ display:none !important; } /* permission visibility */ body:not(.session-ready) [data-group="admin"], body:not(.session-ready) [data-group="superadmin"], body:not(.can-admin) [data-group="admin"], body:not(.can-superadmin) [data-group="superadmin"]{ display:none !important; } .live-boot .main{ visibility:hidden; } /* ── 4. Shell layout — locked frame, three independent scroll columns ── */ .app-shell{ position:relative; z-index:1; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; } .topbar{ position:sticky; top:0; z-index:30; height:var(--topbar-h); background:var(--panel-bg); border-bottom:1px solid var(--line); } [data-theme="glass"] .topbar{ -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); background:rgba(8,11,16,.55); border-bottom-color:rgba(255,255,255,.10); } .topbar-inner{ height:100%; padding-inline:var(--space-6); display:flex; align-items:center; gap:var(--space-4); } .topbar-title{ font-family:var(--font-display); font-weight:650; font-size:18px; color:var(--text-strong); } .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--space-2); } .icon-btn{ width:40px; height:40px; border-radius:var(--radius); display:grid; place-items:center; color:var(--text-muted); } .icon-btn:hover{ background:var(--card-muted); color:var(--text-strong); } .icon-btn svg{ width:20px; height:20px; } .dot-alert{ position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--accent); } .menu-toggle,.search-icon-btn{ display:none; } .account-chip{ display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:var(--radius-pill); } .account-chip:hover{ background:var(--card-muted); } .avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--card-muted); border:1px solid var(--line); display:grid; place-items:center; font-size:11px; font-weight:600; } .account-meta{ display:flex; flex-direction:column; line-height:1.3; text-align:left; } .account-name{ font-size:13px; font-weight:600; color:var(--text-strong); } .account-role{ font-size:var(--micro); color:var(--text-muted); } .app-body{ flex:1; min-height:0; height:100%; display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:var(--nav-w) minmax(0,1fr); overflow:hidden; } .app-body.has-rail{ grid-template-columns:var(--nav-w) minmax(0,1fr) var(--rail-w); } /* left navigation */ .sidebar{ height:100%; width:var(--nav-w); background:var(--nav-bg); border-right:1px solid var(--line); min-height:0; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; z-index:20; } [data-theme="glass"] .sidebar{ -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); } .sidebar-nav{ flex:1; padding:var(--space-3) var(--space-2); display:flex; flex-direction:column; gap:var(--space-4); } .nav-group{ display:flex; flex-direction:column; gap:2px; } .nav-group-label{ margin:0 0 4px 12px; font-size:var(--micro); font-weight:550; letter-spacing:.02em; color:var(--text-faint); } .nav-item{ display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 12px; border-radius:var(--radius); font-size:14px; font-weight:500; color:var(--text-muted); } .nav-item svg{ width:20px; height:20px; flex-shrink:0; } .nav-item:hover{ background:var(--card-muted); color:var(--text-strong); } .nav-item.active{ background:var(--card-muted); color:var(--text-strong); font-weight:600; } .nav-item .count{ margin-left:auto; font-size:var(--small); color:var(--text-muted); } .nav-item .dot-alert{ position:static; margin-left:auto; } .theme-switch{ display:flex; gap:2px; margin:var(--space-2); padding:3px; border:1px solid var(--line); border-radius:var(--radius); } .theme-switch button{ flex:1; min-height:28px; border-radius:7px; font-size:var(--small); display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:0 10px; font-weight:550; color:var(--text-muted); } .theme-switch button.active{ background:var(--card-bg); color:var(--text-strong); box-shadow:inset 0 0 0 1px var(--line); } .sidebar-head-mobile{ display:none; align-items:center; justify-content:space-between; padding:14px 16px 6px; } .sidebar-scrim{ position:fixed; inset:0; z-index:70; display:block; background:rgba(10,12,15,.5); border:0; } .sidebar-scrim[hidden]{ display:none; } .drawer-close{ display:none; } /* main column */ .main{ position:relative; min-width:0; min-height:0; max-height:100%; padding:var(--space-6); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; } .main-inner{ max-width:900px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-5); } /* right panel */ .rail-panel{ height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; align-self:start; background:var(--panel-bg); border-left:1px solid var(--line); padding:var(--space-5) var(--space-4); display:flex; flex-direction:column; gap:var(--space-5); } [data-theme="glass"] .rail-panel{ -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); } .rail-panel::-webkit-scrollbar{ width:8px; } .rail-panel::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; } .rp-section{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4); } [data-theme="glass"] .rp-section{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .rp-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); } .rp-title h3{ font-size:var(--small); font-weight:600; color:var(--text-strong); } .rp-title a{ font-size:var(--micro); color:var(--text-muted); text-decoration:none; } .rp-title a:hover{ color:var(--text); } .rp-empty{ font-size:var(--small); color:var(--text-faint); } /* rail panel — account block, drawer chrome, scrim */ .rp-head{ display:none; align-items:center; justify-content:space-between; gap:var(--space-2); } .rp-head .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--text-strong); } .rp-head .brand-mark{ display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--brand); color:var(--brand-contrast); } .brand-logo{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:0 0 16px rgba(31,214,236,.28); } .rp-account{ display:flex; flex-direction:column; gap:var(--space-3); } .rp-account .account-chip{ width:100%; padding:8px 12px 8px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-muted); } .rp-links{ display:flex; flex-direction:column; gap:2px; } .rp-link{ display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 12px; border-radius:var(--radius); font-size:14px; font-weight:500; color:var(--text-muted); text-decoration:none; position:relative; } .rp-link svg{ width:20px; height:20px; flex-shrink:0; } .rp-link:hover{ background:var(--card-muted); color:var(--text-strong); } .rp-link.active{ background:var(--card-muted); color:var(--text-strong); font-weight:600; } .rp-link .dot-alert{ position:static; margin-left:auto; } .rp-logout{ width:100%; } .rp-close{ display:none; } .rail-scrim{ position:fixed; inset:0; z-index:60; display:block; background:rgba(10,12,15,.5); border:0; } .rail-scrim[hidden]{ display:none; } .rail-toggle{ display:none; } @media (max-width:1279px){ body.has-rail-panel .rail-toggle{ display:grid; } body.has-rail-panel .rp-head{ display:flex; } body.has-rail-panel .rp-close{ display:grid; } .app-body.has-rail{ grid-template-columns:var(--nav-w-collapsed) minmax(0,1fr); } .rail-panel{ position:fixed; right:0; top:0; bottom:0; z-index:65; width:min(340px,88vw); transform:translateX(105%); box-shadow:var(--shadow); } .rail-panel.open{ transform:none; } } /* ── 5. Buttons ───────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 18px; border-radius:var(--radius); border:1px solid transparent; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; } .btn-sm{ min-height:32px; padding:6px 12px; font-size:13px; } .btn-primary{ background:var(--brand); color:var(--brand-contrast); } .btn-secondary{ background:var(--card-bg); color:var(--text-strong); border-color:var(--line-strong); } [data-theme="dark"] .btn-secondary,[data-theme="glass"] .btn-secondary{ background:var(--card-muted); } .btn-ghost{ background:transparent; color:var(--text-muted); } .btn-ghost:hover{ background:var(--card-muted); color:var(--text-strong); } .btn-danger{ background:var(--danger); color:#fff; } .btn:disabled{ opacity:.45; cursor:not-allowed; } /* ── 6. Forms ─────────────────────────────────────────────── */ .field{ display:flex; flex-direction:column; gap:6px; } .field label{ font-size:13px; font-weight:550; color:var(--text-strong); } .input,.textarea,.select{ width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--card-bg); color:var(--text-strong); font-family:inherit; font-size:14px; } .input::placeholder,.textarea::placeholder{ color:var(--text-faint); } .input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--focus); } .textarea{ min-height:96px; resize:vertical; line-height:1.55; } .help-text{ font-size:var(--small); color:var(--text-muted); line-height:1.5; } .error-text{ font-size:var(--small); color:var(--danger); } /* ── 7. Badges · pills · tags · segmented · sort bar ─────── */ .pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:var(--radius-pill); font-size:var(--micro); font-weight:550; } .pill svg{ width:12px; height:12px; } .pill-accent{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } .pill-fg{ background:var(--card-muted); color:var(--text); border:1px solid var(--line); } .pill-muted{ background:transparent; color:var(--text-muted); border:1px solid var(--line); } .badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:6px; font-size:var(--micro); font-weight:550; } .badge-positive{ background:color-mix(in srgb, var(--success) 13%, transparent); color:var(--success); } .badge-warn{ background:color-mix(in srgb, var(--warning) 15%, transparent); color:var(--warning); } .badge-muted{ background:var(--card-muted); color:var(--text-muted); } .tag{ display:inline-flex; align-items:center; padding:3px 10px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:var(--small); color:var(--text-muted); text-decoration:none; } .segmented,.sortbar{ display:inline-flex; gap:2px; padding:3px; background:var(--card-muted); border:1px solid var(--line); border-radius:var(--radius); } .segmented button,.sortbar button{ height:32px; padding:0 14px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:13px; font-weight:550; color:var(--text-muted); } .segmented button.active,.sortbar button.active{ background:var(--card-bg); color:var(--text-strong); box-shadow:inset 0 0 0 1px var(--line); } [data-theme="glass"] .segmented button.active,[data-theme="glass"] .sortbar button.active{ background:#fff; color:#11161C; } /* tabs */ .tabs-underline{ display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; } .tabs-underline::-webkit-scrollbar{ display:none; } .tab{ padding:10px 14px; font-size:14px; font-weight:550; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; } .tab:hover{ color:var(--text-strong); } .tab.active{ color:var(--text-strong); border-bottom-color:var(--accent); } .tab-panel{ display:none; } .tab-panel.active{ display:block; } /* ── 8. Cards ─────────────────────────────────────────────── */ .card,.rail-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4); } [data-theme="glass"] .card,[data-theme="glass"] .rail-card{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .card-title{ font-size:var(--card-title); font-weight:600; color:var(--text-strong); } .section-title{ font-size:var(--section-title); font-weight:650; color:var(--text-strong); } .page-head{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-5); } .page-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; } .page-title{ font-family:var(--font-display); font-size:var(--page-title); font-weight:700; line-height:1.15; color:var(--text-strong); } .page-sub{ font-size:14px; color:var(--text-muted); max-width:64ch; } .breadcrumb{ display:flex; align-items:center; gap:6px; font-size:var(--small); color:var(--text-muted); flex-wrap:wrap; } .breadcrumb a{ text-decoration:none; } .breadcrumb a:hover{ color:var(--text-strong); } .breadcrumb svg{ width:12px; height:12px; opacity:.55; } .page-actions{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; } /* ── 9. Post card (one component everywhere) ──────────────── */ .post-list{ display:flex; flex-direction:column; gap:var(--space-4); } .post{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); } [data-theme="glass"] .post{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .post-head{ display:flex; align-items:center; gap:10px; margin-bottom:var(--space-3); } .post-author{ font-size:14px; font-weight:600; color:var(--text-strong); } .post-meta{ font-size:var(--small); color:var(--text-muted); } .post-more{ margin-left:auto; width:34px; height:34px; border-radius:8px; } .post-title{ font-family:var(--font-display); font-size:18px; font-weight:650; line-height:1.3; color:var(--text-strong); margin-bottom:6px; } .post-body{ color:var(--text); max-width:68ch; text-wrap:pretty; } .post-media{ margin-top:var(--space-3); } .post-media img,.live-media,.post-media video{ width:100%; max-height:420px; object-fit:cover; border-radius:10px; border:1px solid var(--line); } .media-pending-row{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-muted); } .media-icon svg{ width:16px; height:16px; color:var(--text-muted); } .media-label{ font-size:13.5px; font-weight:550; } .media-sub{ font-size:var(--small); color:var(--text-muted); } .post-foot{ display:flex; align-items:center; gap:4px; margin-top:var(--space-3); } .react-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px; border-radius:var(--radius); font-size:13px; font-weight:500; color:var(--text-muted); } .react-btn:hover{ background:var(--card-muted); color:var(--text-strong); } .react-btn svg{ width:16px; height:16px; } .react-count{ font-variant-numeric:tabular-nums; } .react-spacer{ flex:1; } .react-like.active{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); font-weight:600; } .replies{ margin-top:var(--space-3); padding-left:16px; display:flex; flex-direction:column; gap:12px; position:relative; } .replies::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line); } .reply{ display:flex; gap:10px; } .reply .avatar{ width:28px; height:28px; font-size:9px; } .reply-body{ font-size:13.5px; color:var(--text); } .reply-body strong{ color:var(--text-strong); font-weight:600; } .reply-meta{ font-size:var(--micro); color:var(--text-faint); margin-top:2px; } /* source citation */ .source-card{ display:flex; align-items:center; gap:12px; margin-top:var(--space-3); padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-muted); text-decoration:none; } .source-card:hover{ border-color:var(--line-strong); } .src-icon svg{ width:16px; height:16px; color:var(--accent); } .src-body{ min-width:0; display:flex; flex-direction:column; } .source-title{ font-size:13.5px; font-weight:600; } .source-url{ font-family:var(--font-mono); font-size:var(--micro); color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .src-arrow{ margin-left:auto; color:var(--text-muted); } .src-arrow svg{ width:15px; height:15px; } /* audio row */ .play-row{ margin-top:var(--space-3); display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-muted); } .play-btn{ width:42px; height:42px; border-radius:50%; background:var(--brand); color:var(--brand-contrast); display:grid; place-items:center; flex-shrink:0; } .play-btn svg{ width:17px; height:17px; margin-left:2px; } .play-meta{ min-width:0; flex:1; } .play-title{ font-size:14px; font-weight:600; } .play-sub{ display:block; font-size:var(--small); color:var(--text-muted); } .play-track{ flex:1.2; height:4px; border-radius:2px; background:var(--line); overflow:hidden; } .play-fill{ display:block; width:31%; height:100%; background:var(--text-muted); } .play-time{ font-size:var(--small); color:var(--text-muted); font-variant-numeric:tabular-nums; } /* ── 10. Composer ─────────────────────────────────────────── */ .composer{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4); } [data-theme="glass"] .composer{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .composer-row{ display:flex; gap:var(--space-3); align-items:flex-start; } .composer textarea{ flex:1; resize:none; min-height:44px; max-height:200px; background:none; border:0; color:var(--text-strong); font-size:14px; line-height:1.5; padding:8px 0; } .composer textarea::placeholder{ color:var(--text-faint); } .composer textarea:focus{ outline:none; } .composer-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px solid var(--line); } .composer-tools{ display:flex; align-items:center; gap:2px; } .composer-tools .icon-btn{ width:36px; height:36px; } .composer-tools .icon-btn svg{ width:17px; height:17px; } .composer-right{ display:flex; align-items:center; gap:var(--space-3); margin-left:auto; } .verified-toggle{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; border:1px solid var(--line-strong); font-size:var(--small); color:var(--text-muted); font-weight:500; } .verified-toggle.active{ color:var(--accent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); } .verified-toggle svg{ width:14px; height:14px; } .char-count{ font-size:var(--small); color:var(--text-faint); font-variant-numeric:tabular-nums; } .char-count.over{ color:var(--danger); } /* ── 11. Static loading · empty · error ───────────────────── */ .skel{ background:var(--card-muted); border-radius:8px; } .skel-text{ height:12px; margin-top:8px; } .skel-block{ min-height:120px; } .state-card{ text-align:center; padding:var(--space-8) var(--space-5); background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); } .state-title{ font-family:var(--font-display); font-size:16px; font-weight:650; color:var(--text-strong); margin-bottom:4px; } .state-sub{ font-size:14px; color:var(--text-muted); max-width:44ch; margin:0 auto var(--space-4); } .state-icon{ width:32px; height:32px; margin:0 auto var(--space-3); color:var(--text-faint); } .error-state .state-icon{ color:var(--danger); } /* ── 12. Right-panel inner lists ──────────────────────────── */ .rp-list{ list-style:none; display:flex; flex-direction:column; gap:2px; } .rp-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; margin-inline:-8px; border-radius:8px; font-size:13.5px; color:var(--text); text-decoration:none; } .rp-row:hover{ background:var(--card-muted); } .rp-row .avatar{ width:26px; height:26px; font-size:9px; } .rp-rank{ width:18px; text-align:center; font-size:var(--small); color:var(--text-faint); font-variant-numeric:tabular-nums; } .rp-row:first-child .rp-rank{ color:var(--accent); font-weight:700; } .rp-main{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rp-side{ font-size:var(--small); color:var(--text-faint); font-variant-numeric:tabular-nums; } .stat-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .stat-tile{ background:var(--card-muted); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; } .stat-num{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums; } .stat-label{ font-size:var(--micro); color:var(--text-faint); } .rank-progress{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:8px; } .rank-progress > span{ display:block; height:100%; background:var(--accent); } /* ── 13. Nivaas banner · discovery · slideshow ────────────── */ .nivaas-banner{ position:relative; height:200px; border-radius:var(--radius-lg); overflow:hidden; background:var(--card-muted); border:1px solid var(--line); } .nivaas-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .nivaas-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,15,.72), rgba(10,12,15,.15) 55%); } .nivaas-banner-body{ position:absolute; left:20px; right:20px; bottom:16px; z-index:1; color:#fff; } .nivaas-banner-body h1,.nivaas-banner-body h2{ font-size:26px; font-weight:700; line-height:1.2; } .nivaas-banner-body p{ font-size:14px; opacity:.92; max-width:60ch; } .nivaas-row{ display:flex; gap:var(--space-3); overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; } .nivaas-chip{ flex-shrink:0; display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card-bg); text-decoration:none; } [data-theme="glass"] .nivaas-chip{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .nivaas-chip:hover{ border-color:var(--line-strong); } .nivaas-chip svg{ width:18px; height:18px; color:var(--accent); } .nivaas-chip b{ font-size:13.5px; font-weight:600; color:var(--text-strong); white-space:nowrap; } .slideshow{ position:relative; height:340px; border-radius:var(--radius-lg); overflow:hidden; background:var(--card-muted); border:1px solid var(--line); } .slideshow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .slideshow::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,15,.74), rgba(10,12,15,.10) 55%); } .slideshow-body{ position:absolute; left:24px; right:24px; bottom:20px; z-index:1; color:#fff; } .slideshow-body h2{ font-size:22px; font-weight:700; } .slideshow-body p{ font-size:14px; opacity:.92; max-width:64ch; } .slide-controls{ position:absolute; right:16px; top:16px; z-index:2; display:flex; gap:6px; } .slide-controls button{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#11161C; } .slide-controls svg{ width:16px; height:16px; } @media (max-width:767px){ .slideshow{ height:210px; } .nivaas-banner{ height:150px; } .nivaas-banner-body h1,.nivaas-banner-body h2{ font-size:21px; } } /* ── 14. Tables (admin/leaderboard only) · responsive ── */ .ds-table,.adm-table{ width:100%; border-collapse:collapse; font-size:14px; } .ds-table th,.adm-table th{ text-align:left; padding:10px 12px; font-size:var(--micro); font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--text-faint); border-bottom:1px solid var(--line); } .ds-table td,.adm-table td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; } .adm-actions{ display:flex; gap:6px; justify-content:flex-end; } @media (max-width:1279px){ :root{ --nav-w:var(--nav-w-collapsed); } .nav-item{ justify-content:center; padding:8px 0; } .nav-item .label,.nav-group-label,.nav-item .count,.theme-switch,.brand span:last-child{ display:none; } .main{ padding:var(--space-5); } .rail-panel{ position:fixed; right:0; top:0; bottom:0; z-index:65; width:min(340px,88vw); transform:translateX(105%); box-shadow:var(--shadow); } .rail-panel.open{ transform:none; } } @media (max-width:767px){ :root{ --topbar-h:56px; } body{ font-size:15px; } /* must match .app-body.has-rail's higher specificity or main lands in the 72px rail column */ .app-body,.app-body.has-rail{ grid-template-columns:minmax(0,1fr); } /* nav drawer — above its scrim (scrim sits later in DOM at equal z) */ .sidebar{ position:fixed; inset:0 auto 0 0; width:min(280px,85vw); z-index:80; transform:translateX(-105%); border-right:1px solid var(--line-strong); padding-bottom:env(safe-area-inset-bottom); } .sidebar.open{ transform:none; } .nav-item{ justify-content:flex-start; padding:11px 12px; } .nav-item .label{ display:inline; } .nav-group-label{ display:block; } .theme-switch{ display:flex; } .brand span:last-child{ display:inline; } .sidebar-head-mobile{ display:flex; } .drawer-close{ display:grid; } .menu-toggle{ display:grid; } .search-icon-btn{ display:none; } .account-meta{ display:none; } .topbar-inner{ padding-inline:var(--space-3); } .topbar-title{ font-size:16px; } .main{ padding:var(--space-4) var(--space-3); padding-bottom:max(var(--space-6), env(safe-area-inset-bottom)); } .page-title{ font-size:24px; } .react-btn,.btn,.tab{ min-height:44px; } .post-foot{ flex-wrap:wrap; row-gap:6px; } /* 16px controls prevent iOS Safari focus auto-zoom */ .input,.textarea,.select,.composer textarea{ font-size:16px; } /* right-panel drawer keeps clear of the home-indicator area */ .rail-panel{ padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ } } :root{ --positive:var(--success); } /* ══ 15. GLASS OVERHAUL — header removed · bigger UI · every control in its own bubble ══ Lists with many rows (leaderboard, feed, songs, tables) intentionally stay lists. */ /* — bigger base — */ [data-theme="glass"] body{ font-size:16.5px; } [data-theme="glass"]{ --nav-w:264px; --rail-w:340px; } [data-theme="glass"] .page-title{ font-size:clamp(28px,3.2vw,36px); } [data-theme="glass"] .section-title{ font-size:20px; } [data-theme="glass"] .post-title{ font-size:20px; } [data-theme="glass"] .avatar{ width:38px; height:38px; font-size:13px; } /* — header bar removed; its actions float as individual bubbles — */ [data-theme="glass"] .topbar{ position:fixed; top:14px; right:18px; left:auto; width:auto; height:auto; z-index:80; background:transparent; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none; } /* only offset when the rail is an actual on-screen column (≥1280px); unscoped, this out-specifies the mobile topbar rules and breaks phones */ @media (min-width:1280px){ :root[data-theme="glass"] body:has(.app-body.has-rail) [data-theme="glass"] .topbar{ right:calc(var(--rail-w) + 24px); } } [data-theme="glass"] .topbar-inner{ height:auto; padding:0; gap:10px; } [data-theme="glass"] .topbar-title{ display:none; } [data-theme="glass"] .topbar .menu-toggle{ display:none; } [data-theme="glass"] .topbar .icon-btn{ pointer-events:auto; width:48px; height:48px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } [data-theme="glass"] .topbar .icon-btn svg{ width:24px; height:24px; } [data-theme="glass"] .topbar .account-chip{ pointer-events:auto; height:48px; padding:4px 18px 4px 4px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } [data-theme="glass"] .topbar .account-chip .avatar{ width:40px; height:40px; } [data-theme="glass"] .main{ padding-top:80px; } /* — sidebar: each nav item in its own bubble — */ [data-theme="glass"] .nav-group{ gap:8px; } [data-theme="glass"] .nav-item{ min-height:54px; padding:10px 16px; font-size:15.5px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); } [data-theme="glass"] .nav-item svg{ width:24px; height:24px; } [data-theme="glass"] .nav-item:hover{ background:rgba(255,255,255,.14); } [data-theme="glass"] .nav-item.active{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); } [data-theme="glass"] .theme-switch{ gap:8px; margin:var(--space-2); } [data-theme="glass"] .theme-switch button{ height:auto; min-height:34px; padding:0 18px; font-size:13.5px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); } [data-theme="glass"] .theme-switch button.active{ background:rgba(255,255,255,.92); color:#0B0E13; border-color:transparent; } /* — buttons · icon buttons — */ [data-theme="glass"] .btn{ min-height:48px; padding:12px 24px; font-size:15px; border-radius:999px; } [data-theme="glass"] .btn-sm{ min-height:40px; padding:9px 18px; font-size:14px; } [data-theme="glass"] .btn-secondary{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); } [data-theme="glass"] .btn-ghost{ border:1px solid transparent; } [data-theme="glass"] .icon-btn{ width:46px; height:46px; border-radius:15px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); } [data-theme="glass"] .icon-btn:hover{ background:rgba(255,255,255,.16); } [data-theme="glass"] .icon-btn svg{ width:23px; height:23px; } [data-theme="glass"] .react-btn{ min-height:44px; padding:0 18px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); } /* — tabs: each tab is its own pill — */ [data-theme="glass"] .tabs-underline{ gap:8px; border-bottom:0; } [data-theme="glass"] .tab{ padding:12px 22px; font-size:15px; border-bottom:0; margin-bottom:0; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:var(--text); } [data-theme="glass"] .tab:hover{ color:var(--text-strong); background:rgba(255,255,255,.13); } [data-theme="glass"] .tab.active{ background:rgba(255,255,255,.92); color:#0B0E13; border-color:transparent; } /* — segmented · sortbar: container dissolves, each option is a bubble — */ [data-theme="glass"] .segmented,[data-theme="glass"] .sortbar{ background:transparent; border:0; padding:0; gap:8px; } [data-theme="glass"] .segmented button,[data-theme="glass"] .sortbar button{ height:42px; padding:0 20px; font-size:14.5px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); } [data-theme="glass"] .segmented button.active,[data-theme="glass"] .sortbar button.active{ background:rgba(255,255,255,.92); color:#0B0E13; border-color:transparent; box-shadow:none; } /* — pills · tags · badges · inputs — */ [data-theme="glass"] .pill{ font-size:12px; padding:4px 12px; } [data-theme="glass"] .tag{ font-size:14px; padding:6px 14px; } [data-theme="glass"] .badge{ font-size:12px; padding:4px 10px; } [data-theme="glass"] .input,[data-theme="glass"] .textarea,[data-theme="glass"] .select{ min-height:50px; font-size:15px; border-radius:14px; background:rgba(255,255,255,.07); } /* — mobile — */ @media (max-width:767px){ [data-theme="glass"] .topbar{ top:max(10px, env(safe-area-inset-top)); left:10px; right:10px; } [data-theme="glass"] .topbar-inner{ justify-content:space-between; } [data-theme="glass"] .topbar .menu-toggle{ display:grid; } [data-theme="glass"] .main{ padding-top:92px; } [data-theme="glass"] .rail-panel{ padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom)); } } /* ── Shared component defaults — classes previously styled only inside some pages'