/* ───────────────────────────────────────────────────────────────────────────── Recept — Maison Noir Dark restaurant cellar: deep coffee bg, oxidized brass gold, burgundy 2nd. ───────────────────────────────────────────────────────────────────────────── */ :root{ --bg: #0c0907; --bg-2: #100c08; --surface: #15110b; --surface-2: #1b1610; --surface-3: #221c14; --raise: #2a2218; --border: #2b231a; --border-2: #3a3024; --hairline: #1f1a13; --text: #ece4d3; --text-2: #c5b9a1; --dim: #968874; --faint: #5a5042; --faintest: #3c352b; --gold: #d4a847; /* oxidized brass */ --gold-2: #b9913a; --gold-soft: #8b6d2a; --gold-glow: rgba(212,168,71,.18); --burgundy: #8e2727; --burgundy-2:#6b1d1d; --olive: #6b6b1f; --slate: #2b3540; --rad-xs: 3px; --rad-s: 6px; --rad-m: 10px; --rad-l: 18px; --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sidebar-w: 232px; --topbar-h: 64px; /* density-controlled */ --pad-card: 18px; --gap-grid: 22px; --card-h: 320px; } /* ───────────────────────────────────────────────────────────────────────────── Light theme — warm paper / cream. Toggled via Settings (body[data-theme]). Accent (--gold*) is set inline on by JS and works on both themes. ───────────────────────────────────────────────────────────────────────────── */ body[data-theme="light"]{ color-scheme: light; --bg: #efe7d8; --bg-2: #e9e0cf; --surface: #fbf6ec; --surface-2: #f4eee0; --surface-3: #ece3d1; --raise: #e3d8c0; --border: #d6cab0; --border-2: #c5b698; --hairline: #e8e0cf; --text: #29211a; --text-2: #514636; --dim: #7c715a; --faint: #a99c80; --faintest: #cabfa3; } /* Dark-only white overlays read as invisible on light — re-tint the common hover/scrim cases so light mode stays legible without a full audit. */ body[data-theme="light"] .profile-pill:hover, body[data-theme="light"] .nav-item:hover, body[data-theme="light"] .bn-item:hover{ background:rgba(0,0,0,.05) } body[data-theme="light"] .modal-back, body[data-theme="light"] .nav-drawer-back{ background:rgba(40,33,24,.45) } /* Mobile bottom-nav hardcodes a dark frosted bg (see .bottom-nav below) — that color is theme-blind, so on light mode it stayed dark. Re-tint to the light --bg at the same 0.92 alpha so the frosted blur matches the rest of the UI. */ body[data-theme="light"] .bottom-nav{ background:rgba(239, 231, 216, .92) } [data-density="compact"]{ --pad-card: 12px; --gap-grid: 14px; --card-h: 240px; } [data-density="spacious"]{ --pad-card: 26px; --gap-grid: 32px; --card-h: 380px; } *{box-sizing:border-box;margin:0;padding:0} html, body{height:100%} body{ background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden; } /* gentle grain on bg */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background-image: radial-gradient(at 20% 0%, rgba(212,168,71,.04), transparent 50%), radial-gradient(at 100% 100%, rgba(142,39,39,.05), transparent 50%); mix-blend-mode:screen; } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#2a2218;border-radius:6px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:#3a3024;background-clip:padding-box} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit} /* ───────────────────────────────────────────────────────────────────────────── Layout shell ───────────────────────────────────────────────────────────────────────────── */ .app{ display:grid; grid-template-columns: var(--sidebar-w) 1fr; height:100vh; width:100vw; position:relative; z-index:2; } .sidebar{ background:var(--bg-2); border-right:1px solid var(--hairline); display:flex; flex-direction:column; padding:22px 14px 14px; position:relative; } .sidebar::after{ content:""; position:absolute; top:24px; bottom:24px; right:-1px; width:1px; background:linear-gradient(to bottom, transparent, var(--gold-soft) 40%, var(--gold-soft) 60%, transparent); opacity:.25; } .brand{ display:flex; align-items:center; gap:10px; padding: 4px 8px 22px; border-bottom:1px solid var(--hairline); margin-bottom:18px; } .brand-mark{ width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--gold), var(--gold-soft) 70%, #4a3a18); position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 2px 8px rgba(212,168,71,.25); } .brand-mark::after{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px solid rgba(0,0,0,.4); } .brand-name{ font-family:var(--font-serif); font-size:22px; font-weight:500; letter-spacing:0.06em; font-style:italic; } .brand-name b{font-style:normal;font-weight:600;color:var(--gold)} .nav{display:flex;flex-direction:column;gap:2px} .nav-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--rad-s); color:var(--text-2); font-size:13.5px; font-weight:500; letter-spacing:.005em; transition:background .15s, color .15s; text-align:left; width:100%; position:relative; } .nav-item:hover{background:rgba(255,255,255,.03); color:var(--text)} .nav-item.active{ background:linear-gradient(90deg, rgba(212,168,71,.10), transparent); color:var(--text); } .nav-item.active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--gold); border-radius:0 2px 2px 0; } .nav-item .ic{width:14px;height:14px;flex-shrink:0;opacity:.7} .nav-item.active .ic{opacity:1; color:var(--gold)} .nav-badge{ margin-left:auto; font-family:var(--font-mono); font-size:10px; padding:2px 5px; border-radius:9px; background:var(--burgundy); color:#fff; } .sidebar-section{ margin-top:24px; padding:0 12px 6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); } .sidebar-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--hairline); } .sidebar-logout{ width:100%; justify-content:center; gap:8px; margin-bottom:10px; } .profile-pill{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--rad-s); } .profile-pill:hover{background:rgba(255,255,255,.03)} .profile-pill .nm{font-size:13px; font-weight:500} .profile-pill .hd{font-family:var(--font-mono); font-size:10px; color:var(--dim)} /* ───────────────────────────────────────────────────────────────────────────── Avatars ───────────────────────────────────────────────────────────────────────────── */ .avatar{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:13px; font-weight:600; color:#15110b; letter-spacing:.02em; border:1px solid rgba(0,0,0,.35); position:relative; } .avatar.lg{width:48px;height:48px;font-size:20px} .avatar.xl{width:72px;height:72px;font-size:30px} .avatar.sm{width:22px;height:22px;font-size:11px} .avatar .dot{ position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:#52c265; border:2px solid var(--bg-2); } .avatar.lg .dot{width:12px;height:12px} .avatar .avatar-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; } /* ───────────────────────────────────────────────────────────────────────────── Main column ───────────────────────────────────────────────────────────────────────────── */ .main{ display:flex; flex-direction:column; min-width:0; min-height:0; height:100vh; height:100dvh; background:var(--bg); } .topbar{ height:var(--topbar-h); display:flex; align-items:center; gap:18px; padding:0 32px; border-bottom:1px solid var(--hairline); background:var(--bg); flex-shrink:0; } .search{ flex:1; max-width:520px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-s); padding:8px 12px; transition:border-color .15s, background .15s; } .search:focus-within{border-color:var(--gold-soft); background:var(--surface-2)} .search input{ background:none; border:0; outline:0; flex:1; color:var(--text); font-size:13px; } .search input::placeholder{color:var(--dim); font-style:italic} .search .ic{color:var(--dim); width:14px; height:14px} .search .kbd{ font-family:var(--font-mono); font-size:10px; color:var(--dim); border:1px solid var(--border-2); padding:1px 5px; border-radius:3px; } /* Native