/* ========================================================================== Foundation — token + a11y + shell layer -------------------------------------------------------------------------- Canonical source for surfaces, lines, text, accent, fonts and shell dimensions. Everything else (base.css legacy names, redesign.css card tokens) aliases to these vars, so our cards keep working while the system underneath stays consistent. - Dark is default (:root). Light via . - Shell classes (.app-shell, .center-panel, .doc-topbar, ...) are opt-in; existing .layout / topbar are untouched. ========================================================================== */ :root { color-scheme: dark; --bg: #000; --panel: #0b0b0d; --panel-2: #101012; --line: #28282c; --line-strong: #3a3a3f; --line-soft: #1c1c20; --code-bg: #050507; --text: #d7d7d9; --muted: #aaaab0; --faint: #7d7d84; --accent: #ff5a36; --accent-hover: #ff795b; --accent-contrast: #111; --stable: #b4c96f; --updated: #ffb000; --syntax-string: #b9d4ef; --sidebar-heading: #909090; --sidebar: 280px; --aside: 260px; --topbar: 44px; --mono: "JetBrains Mono", "JetBrainsMono Nerd Font", "CaskaydiaMono Nerd Font Mono", "Caskaydia Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Legacy aliases so existing cards resolve to the canonical tokens */ --bg-color: var(--bg); --secondarybg-color: var(--panel); --secondary-hover: var(--panel-2); --third-bg-color: var(--panel-2); --border-color: var(--line); --secondary-border: var(--line-soft); --text-primary: var(--text); --text-secondary: var(--muted); --text-muted: var(--faint); --text-content: var(--text); --comment-input-bg: var(--code-bg); } :root[data-theme="light"] { color-scheme: light; --bg: #f8f8f6; --panel: #f1f1ef; --panel-2: #fff; --line: #cdcdca; --line-strong: #b9b9b6; --line-soft: #dededb; --code-bg: #fff; --text: #19191b; --muted: #65656a; --faint: #6d6d74; --accent: #c6371c; --accent-hover: #a92e17; --accent-contrast: #fff; --stable: #65751e; --updated: #9a6700; --syntax-string: #315d85; --sidebar-heading: #646870; } /* -------------------------------------------------------------------------- A11y foundation -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 74px; } section[id], header[id] { scroll-margin-top: 74px; } button, a, select { touch-action: manipulation; } button, select { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [hidden] { display: none !important; } .skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: var(--accent); color: var(--accent-contrast); transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- Shell foundation (opt-in; does not replace .layout / topbar) -------------------------------------------------------------------------- */ .app-shell { display: grid; min-height: 100vh; grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--aside); } .app-shell--no-aside { grid-template-columns: var(--sidebar) minmax(0, 1fr); } .app-shell--no-sidebar { grid-template-columns: minmax(0, 1fr) var(--aside); } .app-shell--single { grid-template-columns: minmax(0, 1fr); } .center-panel { min-width: 0; } /* Shell columns: sticky below the site topbar (~98px tall sticky stack) */ .app-shell__sidebar, .app-shell__aside { position: sticky; top: 110px; max-height: calc(100vh - 125px); overflow-y: auto; overscroll-behavior: contain; } .app-shell__sidebar { border-right: 1px solid var(--line); background: var(--panel); padding: 16px 0 24px; } .app-shell__aside { border-left: 1px solid var(--line); background: var(--panel); padding: 22px 18px; } .app-shell__main { min-width: 0; padding: 0 24px 48px; } /* Vertical shell nav (left column) */ .shell-group { padding: 6px 0 10px; } .shell-group + .shell-group { border-top: 1px solid var(--line-soft); } .shell-group__title { padding: 10px 18px 6px; color: var(--sidebar-heading); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .shell-link { display: flex; width: 100%; min-height: 33px; padding: 6px 18px; border: 0; border-left: 2px solid transparent; background: transparent; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: left; text-decoration: none; } .shell-link:hover { background: var(--panel-2); color: var(--text); } .shell-link--active { border-left-color: var(--accent); background: var(--panel-2); color: var(--text); } .shell-link__count { margin-left: auto; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--faint); } .shell-link--active .shell-link__count, .shell-link__count--alert { color: var(--accent); } /* Right-aside blocks */ .aside-block { margin-bottom: 30px; } .aside-block:last-child { margin-bottom: 0; } .aside-title { display: block; margin-bottom: 13px; color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .aside-link { display: block; min-height: 32px; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--muted); font-size: 13px; text-decoration: none; } .aside-link:hover { color: var(--text); } .aside-link--active { border-left-color: var(--accent); color: var(--text); } .aside-meta { display: grid; gap: 10px; } .aside-meta__row { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 13px; line-height: 1.5; } .aside-meta__row strong { color: var(--text); font-weight: 600; } .aside-meta__row a { color: inherit; text-decoration: none; } .aside-meta__row a:hover { color: var(--accent); } .doc-topbar { position: sticky; z-index: 20; top: 0; display: flex; height: var(--topbar); padding: 0 23px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); align-items: center; justify-content: space-between; } /* Shared mono uppercase label (sidebar headings, section eyebrows) */ .label { display: block; margin-bottom: 9px; color: var(--sidebar-heading); font-family: var(--mono); font-size: 12px; line-height: 1.43; letter-spacing: 0.18em; text-transform: uppercase; } /* Keyboard hint */ kbd { padding: 3px 7px; border: 1px solid var(--line-strong); background: var(--code-bg); color: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; } /* Generic ghost action button (pairs with solid .topbar__login CTA) */ .square-action { display: inline-flex; height: 32px; padding: 0 13px; border: 1px solid var(--line); background: transparent; align-items: center; gap: 7px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .square-action + .square-action { border-left: 0; } .square-action:hover { background: var(--panel-2); color: var(--text); } .square-action svg { width: 14px; height: 14px; } /* Note / warning box */ .callout { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1.6; } .callout strong { color: var(--text); } .callout a { color: var(--accent); } /* -------------------------------------------------------------------------- Shell responsive -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .app-shell { grid-template-columns: minmax(0, 1fr) var(--aside); } .app-shell--no-aside, .app-shell--single { grid-template-columns: minmax(0, 1fr); } .app-shell__sidebar { display: none; } } @media (max-width: 760px) { .app-shell, .app-shell--no-aside, .app-shell--no-sidebar, .app-shell--single { grid-template-columns: minmax(0, 1fr); } .app-shell__sidebar, .app-shell__aside { display: none; } .app-shell__main { padding: 0 16px 40px; } } /* -------------------------------------------------------------------------- Superadmin shell header (page-scoped: body.admin-shell only) Doc-shell language for superadmin_dashboard.php: no global topbar; brand lives in the sidebar, crumbs + contextual actions stick to the top of the center panel. Everything below is prefixed with body.admin-shell so no other page is affected. -------------------------------------------------------------------------- */ /* No global sticky header on this page: shell columns stick to viewport top */ body.admin-shell .app-shell__sidebar, body.admin-shell .app-shell__aside { top: 0; max-height: 100vh; } body.admin-shell .app-shell__sidebar { padding-top: 0; display: flex; flex-direction: column; overflow-y: auto; } body.admin-shell .app-shell__sidebar > nav { padding: 8px 0 24px; } /* Sidebar brand (44px bar, logo + label) */ body.admin-shell .sa-brand { position: sticky; top: 0; z-index: 5; display: flex; height: var(--topbar); min-height: var(--topbar); padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); align-items: center; } body.admin-shell .sa-brand a { display: inline-flex; min-width: 0; min-height: 32px; padding: 0 7px; border: 1px solid transparent; align-items: center; gap: 8px; color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } body.admin-shell .sa-brand a:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); } body.admin-shell .sa-brand__img { display: block; height: 24px; width: auto; } /* Doc-topbar crumbs + actions (foundation owns .doc-topbar/.square-action; .crumbs/.top-actions follow the shared shell recipe, scoped to this page) */ body.admin-shell .app-shell__main { padding: 0; } body.admin-shell .doc-topbar { padding: 0 24px; } /* Constrained center content: the sticky bar spans the full column width while the content below is centered at doc width. */ body.admin-shell .page-content { width: min(860px, calc(100% - 80px)); margin: 0 auto; padding: 39px 0 100px; } body.admin-shell .crumbs { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } body.admin-shell .crumbs b { color: var(--text); font-weight: 500; } body.admin-shell .top-actions { display: flex; height: 100%; align-items: center; flex-shrink: 0; } /* Message count pill inside the square-action button */ body.admin-shell .sa-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent); color: var(--accent-contrast); font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* Compact avatar control reusing the nav dropdown (.topbar__dropdown) */ body.admin-shell .sa-avatar-btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); background: transparent; cursor: pointer; } body.admin-shell .sa-avatar-btn__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Page header (eyebrow + h1 + meta row) */ body.admin-shell .sa-page-head { position: relative; margin: 0 0 20px; padding-bottom: 20px; } body.admin-shell .sa-page-head::before { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); content: ""; } .page-eyebrow { margin-bottom: 10px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } body.admin-shell .page-eyebrow { margin-bottom: 10px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } body.admin-shell .sa-page-head h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } body.admin-shell .page-meta { display: flex; margin-top: 10px; align-items: center; flex-wrap: wrap; gap: 15px; color: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } body.admin-shell .page-meta > span + span::before { margin-right: 15px; color: var(--faint); content: "|"; } body.admin-shell .page-meta a { color: var(--text); text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; text-underline-offset: 2px; text-decoration-skip-ink: auto; } @media (max-width: 760px) { body.admin-shell .doc-topbar { padding: 0 16px; } body.admin-shell .crumbs span { display: none; } body.admin-shell .crumbs { color: var(--text); } body.admin-shell .top-actions .desktop-only { display: none; } body.admin-shell .sa-page-head h1 { font-size: 28px; } } /* -------------------------------------------------------------------------- Site footer: gradient hairline with centered accent tick, 3-column mono grid). -------------------------------------------------------------------------- */ .market-footer { width: 100%; max-width: var(--container-width); margin: 64px auto 0; padding: 18px 0 22px; /* Neutralize the legacy base.css `footer` background so the footer sits on the page background like the example. */ background-color: transparent; color: var(--muted); font-family: var(--mono); } .footer-status { position: relative; display: grid; min-height: 54px; padding-top: 12px; align-items: center; grid-template-columns: 1fr auto 1fr; gap: 24px; } .footer-status::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); content: ""; } .footer-status::after { position: absolute; top: -6px; left: 50%; width: 1px; height: 13px; background: var(--accent); content: ""; } .footer-status-link { display: inline-flex; align-items: center; gap: 7px; width: max-content; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-decoration: none; text-underline-position: from-font; transition: color 150ms ease; } .footer-status-link:hover { color: var(--accent); } .footer-maintainer { justify-self: start; } .footer-resource-links { display: flex; justify-self: end; align-items: center; gap: 18px; } .footer-status-copy { display: grid; align-items: center; justify-items: center; gap: 5px; color: var(--faint); font-size: 12px; text-align: center; text-wrap: pretty; } .footer-project-name { color: var(--text); font-weight: 600; letter-spacing: 0.09em; white-space: nowrap; } @media (max-width: 640px) { .footer-status { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; } .footer-maintainer, .footer-resource-links { justify-self: center; } } /* -------------------------------------------------------------------------- Status label (mono uppercase bordered marker: default stable tone, .is-caution for pending/warning states, .is-failed for negative states) -------------------------------------------------------------------------- */ .status-label { display: inline-block; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--stable) 72%, var(--line)); background: transparent; color: var(--stable); font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .status-label.is-caution { border-color: color-mix(in srgb, var(--updated) 72%, var(--line)); color: var(--updated); } :root[data-theme="light"] .status-label.is-caution { border-color: color-mix(in srgb, #965f00 72%, var(--line)); color: #965f00; } .status-label.is-failed { border-color: color-mix(in srgb, var(--accent) 72%, var(--line)); color: var(--accent); } .status-label.is-new { border-color: var(--line-strong); color: var(--text-secondary); }