/* ============================================================================ Bookchair — Liquid Glass admin theme Minimal Apple aesthetic. Light + dark (auto via prefers-color-scheme, or forced with ). Per-tenant accent flows in from brandThemeStyles() (--bc-primary / --bc-accent); falls back to iOS blue. ============================================================================ */ /* ── Tokens: light (default) ───────────────────────────────────────────────*/ :root { --accent: var(--bc-primary, #2D5A40); --accent-rgb: var(--bc-primary-rgb, 45,90,64); --accent-ink: color-mix(in srgb, var(--accent), #000 14%); --accent-strong:color-mix(in srgb, var(--accent), #000 6%); --accent-tint: rgba(var(--accent-rgb), .12); --accent-tint-2:rgba(var(--accent-rgb), .07); --page-1: #EFEBE2; --page-2: #F4F1EA; --glass: rgba(255,255,255,.92); --glass-strong: rgba(255,255,255,.98); --glass-quiet: rgba(255,255,255,.65); --hairline: rgba(38,36,31,.10); --hairline-2: rgba(38,36,31,.06); --glass-border: rgba(38,36,31,.13); --shadow: 0 2px 12px rgba(38,36,31,.08), 0 0 0 .5px rgba(38,36,31,.06); --shadow-lg: 0 14px 44px rgba(38,36,31,.10); --text-1: #2C2A24; --text-2: #5C584F; --text-3: #9A958B; --field-bg: rgba(255,255,255,.66); --field-border: rgba(38,36,31,.14); --ok: #2D5A40; --ok-bg: rgba(45,90,64,.13); --warn: #A8743A; --warn-bg: rgba(168,116,58,.15); --danger:#B0432F; --danger-bg:rgba(176,67,47,.13); --radius: 10px; --radius-lg: 14px; --radius-sm: 8px; --blur: saturate(140%) blur(18px); --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; --display: "Fraunces", Georgia, "Times New Roman", serif; } /* ── Tokens: dark (auto + forced) ──────────────────────────────────────────*/ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-ink: color-mix(in srgb, var(--accent), #fff 22%); --accent-strong:color-mix(in srgb, var(--accent), #fff 4%); --accent-tint: rgba(var(--accent-rgb), .22); --accent-tint-2:rgba(var(--accent-rgb), .12); --page-1: #0A0A0A; --page-2: #121212; --glass: rgba(30,30,32,.55); --glass-strong: rgba(40,40,42,.74); --glass-quiet: rgba(30,30,32,.40); --hairline: rgba(255,255,255,.10); --hairline-2: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.10); --shadow: 0 8px 30px rgba(0,0,0,.40); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --text-1: #F4F1EA; --text-2: #C2BCB0; --text-3: #8C877C; --field-bg: rgba(255,255,255,.06); --field-border: rgba(255,255,255,.14); --ok-bg: rgba(40,200,100,.18); --warn-bg: rgba(255,170,30,.18); --danger-bg:rgba(235,90,75,.20); } } :root[data-theme="dark"] { --accent-ink: color-mix(in srgb, var(--accent), #fff 22%); --accent-strong:color-mix(in srgb, var(--accent), #fff 4%); --accent-tint: rgba(var(--accent-rgb), .22); --accent-tint-2:rgba(var(--accent-rgb), .12); --page-1: #0A0A0A; --page-2: #121212; --glass: rgba(30,30,32,.55); --glass-strong: rgba(40,40,42,.74); --glass-quiet: rgba(30,30,32,.40); --hairline: rgba(255,255,255,.10); --hairline-2: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.10); --shadow: 0 8px 30px rgba(0,0,0,.40); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --text-1: #F4F1EA; --text-2: #C2BCB0; --text-3: #8C877C; --field-bg: rgba(255,255,255,.06); --field-border: rgba(255,255,255,.14); --ok-bg: rgba(40,200,100,.18); --warn-bg: rgba(255,170,30,.18); --danger-bg:rgba(235,90,75,.20); } /* ── Base ──────────────────────────────────────────────────────────────────*/ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--text-1); background: var(--page-2); min-height: 100vh; position: relative; } /* Soft ambient wash so the glass has something to refract — kept subtle. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 60rem at 8% -10%, var(--accent-tint-2), transparent 60%), radial-gradient(50rem 50rem at 100% 0%, rgba(var(--accent-rgb),.05), transparent 55%), linear-gradient(160deg, var(--page-1), var(--page-2)); } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--accent-tint); } /* Quiet, modern scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; } /* ── App shell ─────────────────────────────────────────────────────────────*/ .fd-app-content { background: transparent; min-width: 0; } .fd-main, main { background: transparent !important; min-height: calc(100vh - 64px); } main::before { content: none !important; } /* kill old neon watermark */ /* ── Sidebar (floating glass) ──────────────────────────────────────────────*/ .fd-sidebar { background: var(--bc-topbar-bg, var(--glass)) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-right: .5px solid rgba(255,255,255,0.06) !important; border: none !important; border-radius: 0; box-shadow: 1px 0 0 rgba(0,0,0,.15); margin: 0; padding: 14px !important; width: 230px; height: calc(100vh - 60px); position: sticky; top: 60px; overflow-y: auto; } /* ── Dark-brand sidebar & topbar overrides (.bc-brand-dark on body) ─────── */ .bc-brand-dark .fd-topbar { background: var(--bc-topbar-bg, #0a0a0a) !important; } .bc-brand-dark .fd-topbar * { color: #fff !important; } .bc-brand-dark .fd-topbar .text-muted { color: rgba(255,255,255,.6) !important; } .bc-brand-dark .fd-topbar .btn-outline-secondary { border-color: rgba(255,255,255,.3) !important; color: #fff !important; } .bc-brand-dark .fd-topbar .btn-outline-secondary:hover { background: rgba(255,255,255,.1) !important; } .bc-brand-dark .fd-sidebar { background: var(--bc-topbar-bg, #0a0a0a) !important; border-right: 1px solid rgba(255,255,255,.07) !important; } .bc-brand-dark .fd-sidebar, .bc-brand-dark .fd-sidebar * { color: rgba(255,255,255,.75) !important; } .bc-brand-dark .fd-sidebar .nav-link { color: rgba(255,255,255,.65) !important; background: transparent !important; border-radius: 8px; } .bc-brand-dark .fd-sidebar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; } .bc-brand-dark .fd-sidebar .nav-link.active { color: #fff !important; background: var(--bc-primary) !important; } .bc-brand-dark .fd-sidebar .fd-nav-toggle { color: rgba(255,255,255,.35) !important; font-size:.65rem; letter-spacing:.1em; } .bc-brand-dark .fd-sidebar .fd-nav-toggle:hover { color: rgba(255,255,255,.7) !important; background: transparent !important; } .bc-brand-dark .fd-sidebar .fd-dot { background: var(--bc-primary) !important; opacity:.8; } .bc-brand-dark .fd-sidebar [style*="#D4A030"] { color: #D4A030 !important; } .bc-brand-dark .fd-sidebar [style*="#3CBCCA"] { color: #3CBCCA !important; } .fd-brand-mark { margin-bottom: 1rem; padding: 4px 6px; display: flex; align-items: center; gap: .6rem; } .fd-brand-logo { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #fff 35%)); box-shadow: 0 2px 10px rgba(var(--accent-rgb), .35); } .fd-brand-name { color: var(--text-1); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; } .fd-brand-tag { color: var(--accent-ink); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* ── Collapsible category nav ──────────────────────────────────────────────*/ .fd-nav-section { margin-bottom: .12rem; } .fd-nav-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; background: transparent; border: 0; color: var(--text-3); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .6rem .75rem; border-radius: var(--radius-sm); cursor: pointer; transition: color .15s, background .15s; } .fd-nav-toggle > span:first-child { margin-right: auto; } .fd-nav-toggle:hover { color: var(--accent-ink); background: var(--accent-tint-2); } .fd-nav-section.is-open > .fd-nav-toggle { color: var(--text-2); } .fd-chevron { width: 12px; height: 12px; opacity: .5; transition: transform .22s ease; flex: none; } .fd-nav-section.is-open > .fd-nav-toggle .fd-chevron { transform: rotate(90deg); opacity: .85; } .fd-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); display: none; flex: none; } .fd-nav-section.has-active:not(.is-open) > .fd-nav-toggle .fd-dot { display: block; } .fd-nav-group { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; } .fd-nav-section.is-open > .fd-nav-group { grid-template-rows: 1fr; } .fd-nav-group-inner { overflow: hidden; min-height: 0; } .fd-sidebar .nav-link, .fd-mobile-menu .nav-link { color: var(--text-2) !important; border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; padding: .55rem .75rem; margin-bottom: .1rem; display: flex; align-items: center; justify-content: space-between; transition: background .15s, color .15s; } .fd-sidebar .nav-link:hover, .fd-mobile-menu .nav-link:hover { color: var(--text-1) !important; background: var(--hairline-2); box-shadow: none; } .fd-sidebar .nav-link.active, .fd-mobile-menu .nav-link.active { color: var(--accent-ink) !important; background: var(--accent-tint); font-weight: 600; box-shadow: none; } /* ── Topbar (glass) ────────────────────────────────────────────────────────*/ .navbar.fd-topbar, .fd-topbar { background: var(--bc-topbar-bg, var(--glass-strong)) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 0 !important; border-bottom: .5px solid rgba(255,255,255,0.08) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.2); min-height: 60px; position: sticky; top: 0; z-index: 30; } .fd-topbar, .fd-topbar * { color: var(--bc-topbar-text, var(--text-1)) !important; } .fd-topbar-title .fw-black { font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--bc-topbar-text, var(--text-1)) !important; } .fd-topbar-title .small { color: var(--bc-topbar-text, var(--text-3)) !important; opacity: .6; font-weight: 500 !important; } .fd-topbar .text-muted { color: var(--bc-topbar-text, var(--text-3)) !important; opacity:.7; } .fd-topbar .btn-outline-secondary { border-color: rgba(255,255,255,.25) !important; color: var(--bc-topbar-text, var(--text-1)) !important; } .fd-topbar .btn-outline-secondary:hover { background: rgba(255,255,255,.1) !important; } /* ── Theme toggle ──────────────────────────────────────────────────────────*/ .bc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--glass); border: .5px solid var(--hairline); color: var(--text-2) !important; cursor: pointer; font-size: 16px; transition: background .15s, color .15s; } .bc-theme-toggle:hover { background: var(--accent-tint); color: var(--accent-ink) !important; } /* ── Cards / panels ────────────────────────────────────────────────────────*/ .card, .fd-card { background: var(--glass) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow); color: var(--text-1); } .card-header { background: transparent !important; border-bottom: .5px solid var(--hairline) !important; font-weight: 600; color: var(--text-1); } .shadow-sm, .shadow { box-shadow: var(--shadow) !important; } .border, .border-0 { border-color: var(--hairline) !important; } .bg-white, .bg-light { background: var(--glass) !important; color: var(--text-1); } .text-muted { color: var(--text-3) !important; } .text-dark { color: var(--text-1) !important; } /* ── Page headings (tone the old giant neon titles right down) ─────────────*/ h1, .fd-page-title { font-family: var(--display) !important; color: var(--text-1) !important; font-size: clamp(1.55rem, 2.4vw, 2.05rem) !important; font-weight: 400 !important; letter-spacing: -.01em !important; line-height: 1.12 !important; margin-bottom: .35rem !important; } h1::after, .fd-page-title::after { content: none !important; } h2, h3, .fd-card-title { font-family: var(--display); font-weight: 500; letter-spacing: -.005em; color: var(--text-1); } .fd-page-subtitle { color: var(--text-3) !important; font-weight: 500; } /* Hero panel → quiet glass header */ .fd-hero-panel { background: var(--glass) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: .5px solid var(--glass-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow); } .fd-hero-panel::before { content: none !important; } .fd-hero-panel .fd-page-title, .fd-hero-panel h1, .fd-hero-panel p { color: var(--text-1) !important; } /* ── Buttons ───────────────────────────────────────────────────────────────*/ .btn { border-radius: var(--radius-sm); font-weight: 500; transition: transform .08s ease, background .15s, box-shadow .15s, border-color .15s; box-shadow: none; } .btn:active { transform: scale(.98); } .btn-primary, .fd-smart-create-btn.is-ready { background: var(--accent-strong) !important; border: 0 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(var(--accent-rgb), .30) !important; } .btn-primary:hover, .fd-smart-create-btn.is-ready:hover { background: color-mix(in srgb, var(--accent-strong), #000 8%) !important; color: #fff !important; } .btn-outline-secondary, .btn-light, .btn-outline-dark { background: var(--glass) !important; border: .5px solid var(--hairline) !important; color: var(--text-2) !important; } .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-dark:hover { background: var(--hairline) !important; color: var(--text-1) !important; } .btn-dark { background: var(--text-1) !important; color: var(--page-2) !important; border: 0 !important; } .btn-dark:hover { background: color-mix(in srgb, var(--text-1), #888 25%) !important; } .btn-outline-danger { background: transparent !important; border: .5px solid var(--danger) !important; color: var(--danger) !important; } .btn-outline-danger:hover { background: var(--danger-bg) !important; color: var(--danger) !important; } .btn-success { background: var(--ok) !important; border: 0 !important; color: #fff !important; } .btn-danger { background: var(--danger) !important; border: 0 !important; color: #fff !important; } .fd-smart-create-btn:disabled { opacity: .5; } /* Dashboard quick-action pills */ .fd-action-grid { gap: 12px; } .fd-action-pill { background: var(--glass) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: .5px solid var(--glass-border) !important; border-radius: var(--radius) !important; color: var(--text-1) !important; box-shadow: var(--shadow); transition: transform .12s ease, background .15s; } .fd-action-pill:hover { transform: translateY(-2px); background: var(--glass-strong) !important; } /* ── Forms ─────────────────────────────────────────────────────────────────*/ /* Native popups white. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } :root[data-theme="dark"] select, :root[data-theme="dark"] option, :root[data-theme="dark"] input { color-scheme: dark; } /* ── Bootstrap tables: adapt to theme (Bootstrap hardcodes near-black text) ─*/ .table { --bs-table-color: var(--text-1); --bs-table-bg: transparent; --bs-table-striped-color: var(--text-1); --bs-table-striped-bg: var(--hairline-2); --bs-table-hover-color: var(--text-1); --bs-table-hover-bg: var(--hairline-2); --bs-table-active-color: var(--text-1); --bs-table-active-bg: var(--accent-tint); --bs-table-border-color: var(--hairline); color: var(--text-1); border-color: var(--hairline); } .table > :not(caption) > * > * { color: var(--text-1); border-color: var(--hairline); background-color: transparent; } .table thead th, .table > thead > tr > th { color: var(--text-3); font-weight: 600; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; border-color: var(--hairline) !important; } .table .text-muted { color: var(--text-3) !important; }