/* ========================================================================== Marcturus · Housekeeping --------------------------------------------------------------------------- A dual-theme admin shell. • DARK (default) — deep near-black void, crimson/red accent. Restrained, glassy, hairline borders, tabular numerics. • LIGHT (toggle) — cool near-white, blue accent. Same geometry, inverted depth, soft elevation shadows. Theming is driven by `data-hk-theme` on (set by App.razor before first paint). Tokens are scoped to `.page-hk` (the .hk-shell root) so the public site is untouched. Semantics: --accent* brand / interactive (red in dark · blue in light) --crimson* danger only (stays red in BOTH themes) ========================================================================== */ /* -------------------------------------------------------------------------- Tokens — DARK (default) -------------------------------------------------------------------------- */ .page-hk { /* Neutrals */ --void: #07060a; --ink-950: #0c0b10; --ink-900: #100f17; --ink-850: #15141f; --ink-800: #191825; --ink-700: #201e2d; --ink-600: #2a2839; --ink-500: #3a3849; /* Danger scale — RED in both themes (semantic) */ --crimson-50: #fff1f3; --crimson-100: #ffe4e8; --crimson-200: #fbccd4; --crimson-300: #f59cab; --crimson-400: #f04e6c; --crimson-500: #e5183f; --crimson-600: #c20e35; --crimson-700: #9b0c2c; --crimson-900: #4c0519; /* Brand accent — RED in dark */ --accent-300: #f59cab; --accent-400: #f04e6c; --accent-500: #e5183f; --accent-600: #c20e35; --accent-700: #9b0c2c; --accent: var(--accent-500); --accent-strong: var(--accent-600); --accent-bright: var(--accent-400); --accent-link: var(--accent-300); --accent-soft: rgba(229, 24, 63, 0.12); --accent-softer: rgba(229, 24, 63, 0.06); --accent-line: rgba(229, 24, 63, 0.32); --accent-glow: rgba(229, 24, 63, 0.55); --accent-grad: linear-gradient(140deg, var(--accent-400) 0%, var(--accent-500) 55%, var(--accent-700) 100%); --on-accent: #ffffff; --focus-ring: rgba(229, 24, 63, 0.20); /* Type */ --hk-text: #f6f6f9; --hk-text-soft: #d6d6df; --hk-text-muted: #9d9cab; --hk-text-dim: #6c6b7c; /* Lines + surfaces */ --hk-line: rgba(255, 255, 255, 0.06); --hk-line-strong: rgba(255, 255, 255, 0.11); --hk-line-accent: var(--accent-line); --hk-surface: var(--ink-850); --hk-topbar-bg: linear-gradient(180deg, rgba(21, 20, 31, 0.86), rgba(21, 20, 31, 0.40)); --hk-card: rgba(255, 255, 255, 0.022); --hk-card-solid: #14131e; --hk-card-hover: rgba(255, 255, 255, 0.045); --hk-card-active: rgba(229, 24, 63, 0.05); --hk-input-bg: rgba(0, 0, 0, 0.30); --hk-input-bg-focus: rgba(0, 0, 0, 0.45); --hk-thead-bg: rgba(255, 255, 255, 0.02); --hk-row-hover: rgba(255, 255, 255, 0.025); --hk-soft-fill: rgba(255, 255, 255, 0.035); --hk-soft-fill-2: rgba(255, 255, 255, 0.06); /* App background */ --hk-bg: radial-gradient(900px 460px at 96% -8%, rgba(229, 24, 63, 0.07) 0%, transparent 65%), radial-gradient(700px 480px at -8% 110%, rgba(155, 12, 44, 0.05) 0%, transparent 60%), linear-gradient(180deg, var(--ink-900) 0%, var(--void) 100%); /* Shadows */ --hk-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.025) inset; --hk-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 1px 2px rgba(0, 0, 0, 0.35); --hk-shadow-md: 0 12px 28px -16px rgba(0, 0, 0, 0.65); --hk-shadow-lg: 0 30px 60px -22px rgba(0, 0, 0, 0.85); --hk-shadow-accent: 0 6px 16px -8px var(--accent-glow); /* Geometry + fonts */ --hk-radius-sm: 8px; --hk-radius: 12px; --hk-radius-lg: 16px; --hk-radius-xl: 20px; --hk-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace; --hk-numeric: "Inter", "Space Grotesk", system-ui, sans-serif; background: var(--hk-bg); color: var(--hk-text); min-height: 100vh; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* -------------------------------------------------------------------------- Tokens — LIGHT (data-hk-theme="light") The attribute is set on ; `.page-hk[data-hk-theme]` covers the case where it is ever placed on the shell itself. -------------------------------------------------------------------------- */ :root[data-hk-theme="light"] .page-hk, .page-hk[data-hk-theme="light"] { --void: #e9edf4; --ink-950: #ffffff; --ink-900: #f6f8fc; --ink-850: #ffffff; --ink-800: #f1f4f9; --ink-700: #e8ecf3; --ink-600: #dde2ec; --ink-500: #c8cfdc; /* Danger stays red, tuned for white backgrounds */ --crimson-50: #fff1f3; --crimson-100: #ffe4e8; --crimson-200: #fecdd5; --crimson-300: #be123c; --crimson-400: #e11d48; --crimson-500: #e11d48; --crimson-600: #be123c; --crimson-700: #9f1239; --crimson-900: #4c0519; /* Brand accent — BLUE in light */ --accent-300: #1d4ed8; --accent-400: #3b82f6; --accent-500: #2563eb; --accent-600: #1d4ed8; --accent-700: #1e40af; --accent: var(--accent-500); --accent-strong: var(--accent-600); --accent-bright: var(--accent-400); --accent-link: var(--accent-600); --accent-soft: rgba(37, 99, 235, 0.10); --accent-softer: rgba(37, 99, 235, 0.055); --accent-line: rgba(37, 99, 235, 0.38); --accent-glow: rgba(37, 99, 235, 0.45); --accent-grad: linear-gradient(140deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%); --on-accent: #ffffff; --focus-ring: rgba(37, 99, 235, 0.22); --hk-text: #0f1729; --hk-text-soft: #28303f; --hk-text-muted: #5b6473; --hk-text-dim: #6c7689; --hk-line: rgba(15, 23, 41, 0.09); --hk-line-strong: rgba(15, 23, 41, 0.16); --hk-line-accent: var(--accent-line); --hk-surface: #ffffff; --hk-topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66)); --hk-card: #ffffff; --hk-card-solid: #ffffff; --hk-card-hover: #f6f8fc; --hk-card-active: rgba(37, 99, 235, 0.05); --hk-input-bg: #ffffff; --hk-input-bg-focus: #ffffff; --hk-thead-bg: #f3f6fb; --hk-row-hover: #f6f8fc; --hk-soft-fill: #f2f5fa; --hk-soft-fill-2: #e8edf6; --hk-bg: radial-gradient(900px 460px at 96% -8%, rgba(37, 99, 235, 0.07) 0%, transparent 62%), radial-gradient(720px 480px at -8% 110%, rgba(59, 130, 246, 0.06) 0%, transparent 58%), linear-gradient(180deg, #ffffff 0%, var(--void) 100%); --hk-shadow-xs: 0 1px 0 rgba(15, 23, 41, 0.02) inset; --hk-shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.06), 0 1px 1px rgba(15, 23, 41, 0.04); --hk-shadow-md: 0 14px 32px -18px rgba(15, 23, 41, 0.24); --hk-shadow-lg: 0 34px 64px -24px rgba(15, 23, 41, 0.30); --hk-shadow-accent: 0 8px 18px -8px var(--accent-glow); } .page-hk *::selection { background: var(--accent-soft); color: var(--hk-text); } /* Smooth, brief cross-fade only while actively switching themes */ @media (prefers-reduced-motion: no-preference) { :root.hk-theming .page-hk, :root.hk-theming .page-hk *, :root.hk-theming .page-hk *::before, :root.hk-theming .page-hk *::after { transition: background-color 0.32s ease, border-color 0.32s ease, color 0.28s ease, box-shadow 0.32s ease, fill 0.28s ease !important; } } /* Generic helpers reused by inline page markup */ .page-hk a { color: var(--accent-link); } .page-hk code { font-family: var(--hk-mono); font-size: 0.82rem; background: var(--hk-soft-fill); border: 1px solid var(--hk-line); padding: 0.1rem 0.4rem; border-radius: 6px; color: var(--hk-text-soft); } /* -------------------------------------------------------------------------- Shell -------------------------------------------------------------------------- */ .hk-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; position: relative; } .hk-drawer-backdrop { display: none; appearance: none; border: 0; background: rgba(7, 6, 10, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; position: fixed; inset: 0; z-index: 90; } :root[data-hk-theme="light"] .hk-drawer-backdrop { background: rgba(15, 23, 41, 0.34); } /* -------------------------------------------------------------------------- Sidebar -------------------------------------------------------------------------- */ .hk-sidebar { position: sticky; top: 0; height: 100vh; padding: 1.4rem 0.85rem 1rem; background: var(--hk-surface); border-right: 1px solid var(--hk-line); display: flex; flex-direction: column; gap: 1.1rem; z-index: 95; overflow-y: auto; } .hk-sidebar::-webkit-scrollbar { width: 6px; } .hk-sidebar::-webkit-scrollbar-thumb { background: var(--hk-line-strong); border-radius: 6px; } .hk-sidebar::-webkit-scrollbar-thumb:hover { background: var(--hk-text-dim); } .hk-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.6rem 1rem; border-bottom: 1px solid var(--hk-line); position: relative; } .hk-brand__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-grad); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; box-shadow: var(--hk-shadow-accent), inset 0 -2px 0 rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18); flex-shrink: 0; } :root[data-hk-theme="light"] .hk-brand__mark { box-shadow: var(--hk-shadow-accent), inset 0 -2px 0 rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.30); } .hk-brand__name { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -0.01em; font-size: 0.95rem; color: var(--hk-text); line-height: 1.1; } .hk-brand__sub { font-size: 0.65rem; color: var(--hk-text-muted); text-transform: uppercase; letter-spacing: 0.20em; margin-top: 2px; font-weight: 600; } .hk-drawer-close { display: none; appearance: none; border: 1px solid var(--hk-line); background: var(--hk-soft-fill); color: var(--hk-text-muted); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; margin-left: auto; font-size: 0.9rem; align-items: center; justify-content: center; transition: background 160ms, color 160ms, border-color 160ms; } .hk-drawer-close:hover { background: var(--accent-soft); color: var(--hk-text); border-color: var(--hk-line-accent); } .hk-menu { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; overflow-y: auto; } .hk-menu__group { font-size: 0.6rem; color: var(--hk-text-dim); text-transform: uppercase; letter-spacing: 0.20em; font-weight: 700; padding: 0.85rem 0.85rem 0.35rem; } .hk-menu__group:first-of-type { padding-top: 0.4rem; } .hk-menu__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; border-radius: 9px; font-size: 0.88rem; font-weight: 500; color: var(--hk-text-soft); transition: background 140ms ease, color 140ms ease; border: 0; position: relative; text-decoration: none; line-height: 1.2; } .hk-menu__item:hover { background: var(--hk-soft-fill); color: var(--hk-text); } .hk-menu__item.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; } :root[data-hk-theme="dark"] .hk-menu__item.is-active { color: #fff; } .hk-menu__item.is-active::before { content: ""; position: absolute; left: -0.85rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } :root[data-hk-theme="dark"] .hk-menu__item.is-active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .hk-menu__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 1; font-size: 0.92rem; opacity: 0.68; transition: opacity 140ms, color 140ms; flex-shrink: 0; } .hk-menu__icon i { width: 1em; text-align: center; } .hk-menu__item:hover .hk-menu__icon { opacity: 0.95; } .hk-menu__item.is-active .hk-menu__icon { opacity: 1; color: var(--accent); } :root[data-hk-theme="dark"] .hk-menu__item.is-active .hk-menu__icon { color: var(--accent-bright); } .hk-sidebar__footer { padding-top: 0.9rem; border-top: 1px solid var(--hk-line); font-size: 0.82rem; } .hk-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--hk-text-muted); transition: color 140ms; text-decoration: none; } .hk-link:hover { color: var(--accent-link); } /* -------------------------------------------------------------------------- Main column -------------------------------------------------------------------------- */ .hk-main { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } .hk-topbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem; border-bottom: 1px solid var(--hk-line); background: var(--hk-topbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; box-shadow: 0 10px 24px -22px rgba(0, 0, 0, 0.55); } :root[data-hk-theme="light"] .hk-topbar { box-shadow: 0 12px 26px -22px rgba(15, 23, 41, 0.20); } :root[data-hk-theme="light"] .hk-sidebar { box-shadow: 1px 0 0 var(--hk-line), 8px 0 28px -26px rgba(15, 23, 41, 0.22); } .hk-hamburger, .hk-theme-toggle { display: inline-flex; appearance: none; border: 1px solid var(--hk-line-strong); background: var(--hk-soft-fill); color: var(--hk-text); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; align-items: center; justify-content: center; transition: background 160ms, border-color 160ms, color 160ms, transform 100ms; } .hk-hamburger { display: none; } .hk-hamburger:hover, .hk-theme-toggle:hover { background: var(--hk-soft-fill-2); border-color: var(--hk-line-accent); color: var(--accent-link); } .hk-theme-toggle:active { transform: scale(0.94); } /* Show the glyph for the *current* theme */ .hk-theme-toggle__sun { display: none; } :root[data-hk-theme="light"] .hk-theme-toggle__moon { display: none; } :root[data-hk-theme="light"] .hk-theme-toggle__sun { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .hk-theme-toggle i { transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease; } .hk-theme-toggle:hover i { transform: rotate(-12deg); } } .hk-topbar__title-block { flex: 1; min-width: 0; } .hk-topbar__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem; color: var(--hk-text-dim); font-weight: 700; } .hk-topbar__eyebrow i { color: var(--accent); opacity: 0.9; } .hk-topbar__title { margin: 0.15rem 0 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; color: var(--hk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hk-userchip { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.4rem; border-radius: 999px; border: 1px solid var(--hk-line); background: var(--hk-soft-fill); transition: border-color 160ms, background 160ms; } .hk-userchip:hover { border-color: var(--hk-line-strong); } .hk-userchip__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.84rem; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); } :root[data-hk-theme="light"] .hk-userchip__avatar { box-shadow: 0 1px 2px rgba(15, 23, 41, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .hk-userchip__meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; padding: 0 0.2rem 0 0.1rem; } .hk-userchip__meta strong { font-size: 0.82rem; color: var(--hk-text); white-space: nowrap; font-weight: 600; letter-spacing: -0.005em; } .hk-userchip__meta span { font-size: 0.66rem; color: var(--hk-text-muted); display: inline-flex; align-items: center; gap: 0.28rem; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; } .hk-userchip__meta span i { color: var(--accent); } .hk-userchip__logout { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hk-soft-fill); color: var(--hk-text-muted); border: 1px solid transparent; transition: background 160ms, color 160ms, border-color 160ms; text-decoration: none; flex-shrink: 0; font-size: 0.85rem; } .hk-userchip__logout:hover { background: rgba(225, 29, 72, 0.18); color: #fff; border-color: rgba(225, 29, 72, 0.40); } :root[data-hk-theme="light"] .hk-userchip__logout:hover { background: var(--crimson-500); color: #fff; border-color: var(--crimson-600); } .hk-content { padding: 2rem 1.8rem 4rem; flex: 1; max-width: 1320px; width: 100%; box-sizing: border-box; } /* -------------------------------------------------------------------------- Content header -------------------------------------------------------------------------- */ .content-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .content-header h2 { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.022em; color: var(--hk-text); display: inline-flex; align-items: center; gap: 0.6rem; } .content-header h2 i { color: var(--accent); font-size: 0.92em; } .btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: var(--hk-radius); box-shadow: var(--hk-shadow-sm); overflow: hidden; margin-bottom: 1.2rem; transition: border-color 200ms ease, box-shadow 200ms ease; } .card:hover { border-color: var(--hk-line-strong); box-shadow: var(--hk-shadow-md); } .card__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hk-line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .card__head h3 { margin: 0; font-size: 0.96rem; font-weight: 600; color: var(--hk-text); letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 0.5rem; } .card__head h3 > i:first-child { color: var(--accent); opacity: 0.9; } .card__body { padding: 1.2rem 1.25rem; } .card__body.is-flush { padding: 0; } /* -------------------------------------------------------------------------- Stat tiles -------------------------------------------------------------------------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 1.6rem; } .stat-tile { background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: var(--hk-radius); padding: 1.1rem 1.2rem 1.05rem; box-shadow: var(--hk-shadow-sm); position: relative; overflow: hidden; transition: border-color 200ms ease, transform 200ms ease, background 200ms ease, box-shadow 200ms ease; } .stat-tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--accent-grad); opacity: 0; transition: opacity 220ms ease; } .stat-tile:hover { border-color: var(--hk-line-strong); background: var(--hk-card-hover); transform: translateY(-2px); box-shadow: var(--hk-shadow-md); } .stat-tile:hover::after { opacity: 0.9; } .stat-tile h4 { margin: 0 0 0.65rem; font-size: 0.66rem; color: var(--hk-text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; display: inline-flex; align-items: center; gap: 0.45rem; } .stat-tile h4 i { color: var(--accent); opacity: 0.9; font-size: 0.95em; } .stat-tile .value { font-family: var(--hk-numeric); font-size: 1.85rem; font-weight: 700; color: var(--hk-text); letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; } .stat-tile .delta { font-size: 0.74rem; color: var(--hk-text-muted); margin-top: 0.5rem; font-weight: 500; letter-spacing: -0.005em; } .stat-tile .delta.is-down { color: var(--crimson-400); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Lea Verou scroll-shadow — fade color tracks the card surface */ background: linear-gradient(90deg, var(--hk-card-solid) 30%, rgba(0, 0, 0, 0)) 0 0 / 24px 100% no-repeat local, linear-gradient(-90deg, var(--hk-card-solid) 30%, rgba(0, 0, 0, 0)) 100% 0 / 24px 100% no-repeat local, radial-gradient(8px 100% at 0% 50%, rgba(0, 0, 0, 0.18), transparent) 0 0 / 16px 100% no-repeat scroll, radial-gradient(8px 100% at 100% 50%, rgba(0, 0, 0, 0.18), transparent) 100% 0 / 16px 100% no-repeat scroll; } .table-wrap::-webkit-scrollbar { height: 8px; } .table-wrap::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 8px; } .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); } .table-wrap::-webkit-scrollbar-track { background: transparent; } table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 720px; } .page-hk table.data thead th { text-align: left; padding: 0.85rem 1rem; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--hk-text-muted); background: var(--hk-thead-bg); border-bottom: 1px solid var(--hk-line); position: sticky; top: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 700; white-space: nowrap; } .page-hk table.data tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--hk-line); color: var(--hk-text-soft); vertical-align: middle; } .page-hk table.data tbody tr { transition: background 140ms ease; } .page-hk table.data tbody tr:hover { background: var(--hk-row-hover); } .page-hk table.data tbody tr:last-child td { border-bottom: 0; } .page-hk table.data .id { color: var(--hk-text-muted); font-family: var(--hk-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; } /* -------------------------------------------------------------------------- Forms + buttons -------------------------------------------------------------------------- */ .page-hk .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .page-hk .form-group:last-child { margin-bottom: 0; } .page-hk .form-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hk-text-muted); display: inline-flex; align-items: center; gap: 0.4rem; } .page-hk .form-label i { color: var(--accent); opacity: 0.85; } .page-hk .form-input, .page-hk .form-select, .page-hk .form-textarea { background: var(--hk-input-bg); border: 1px solid var(--hk-line-strong); color: var(--hk-text); border-radius: 9px; padding: 0.6rem 0.85rem; font-size: 0.9rem; font-family: inherit; transition: border-color 160ms, box-shadow 160ms, background 160ms; } .page-hk .form-textarea { resize: vertical; min-height: 84px; line-height: 1.5; } .page-hk .form-input::placeholder, .page-hk .form-textarea::placeholder { color: var(--hk-text-dim); } .page-hk .form-input:focus, .page-hk .form-select:focus, .page-hk .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--hk-input-bg-focus); } .page-hk .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 9px; border: 1px solid transparent; font: 600 0.83rem/1 "Inter", sans-serif; cursor: pointer; transition: filter 140ms ease, background 140ms ease, border-color 140ms ease, transform 100ms ease, box-shadow 140ms ease; background: var(--hk-soft-fill); color: var(--hk-text); border-color: var(--hk-line-strong); text-decoration: none; white-space: nowrap; letter-spacing: -0.005em; } .page-hk .btn:hover { background: var(--hk-soft-fill-2); } .page-hk .btn:active { transform: scale(0.985); } .page-hk .btn i { font-size: 0.92em; } .page-hk .btn-sm { padding: 0.4rem 0.72rem; font-size: 0.76rem; border-radius: 8px; gap: 0.38rem; } .page-hk .btn-primary { background: var(--accent); border-color: var(--accent-strong); color: var(--on-accent); box-shadow: var(--hk-shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .page-hk .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent); } .page-hk .btn-success { background: #059669; border-color: #047857; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .page-hk .btn-success:hover { background: #047857; } .page-hk .btn-warning { background: #f59e0b; border-color: #d97706; color: #1a0f00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .page-hk .btn-warning:hover { background: #fbbf24; } .page-hk .btn-danger { background: var(--crimson-600); border-color: var(--crimson-700); color: #fff; box-shadow: 0 4px 12px -6px rgba(190, 18, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .page-hk .btn-danger:hover { background: var(--crimson-500); } .page-hk .btn-secondary { background: var(--hk-soft-fill); color: var(--hk-text); border-color: var(--hk-line-strong); } .page-hk .btn-secondary:hover { background: var(--hk-soft-fill-2); border-color: var(--hk-line-accent); } /* -------------------------------------------------------------------------- Status badges -------------------------------------------------------------------------- */ .page-hk .status-badge { background: var(--hk-soft-fill); color: var(--hk-text-soft); border: 1px solid var(--hk-line); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; line-height: 1.4; white-space: nowrap; letter-spacing: -0.005em; } .page-hk .status-badge i { font-size: 0.85em; } .page-hk .status-badge--online { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.28); } .page-hk .status-badge--offline { background: var(--hk-soft-fill); color: var(--hk-text-muted); } .page-hk .status-badge--danger { background: rgba(225, 29, 72, 0.12); color: var(--crimson-300); border-color: rgba(225, 29, 72, 0.28); } .page-hk .status-badge--warn { background: rgba(245, 158, 11, 0.12); color: #d97706; border-color: rgba(245, 158, 11, 0.28); } .page-hk .status-badge--info { background: var(--accent-soft); color: var(--accent-link); border-color: var(--accent-line); } :root[data-hk-theme="dark"] .page-hk .status-badge--warn { color: #fcd34d; } /* Light-theme legibility: mint/amber badge text needs darkening on white tints */ :root[data-hk-theme="light"] .page-hk .status-badge--online { color: #047857; } :root[data-hk-theme="light"] .page-hk .status-badge--warn { color: #b45309; } /* -------------------------------------------------------------------------- Modals -------------------------------------------------------------------------- */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(7, 6, 10, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; } :root[data-hk-theme="light"] .modal-backdrop { background: rgba(15, 23, 41, 0.42); } .modal-backdrop.is-open { display: flex; animation: modalFade 200ms ease both; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 460px; border-radius: var(--hk-radius-lg); border: 1px solid var(--hk-line-strong); background: var(--hk-surface); box-shadow: var(--hk-shadow-lg); padding: 1.5rem; position: relative; animation: modalRise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } :root[data-hk-theme="dark"] .modal { background: linear-gradient(180deg, var(--ink-800), var(--ink-900)); } .modal::before { content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: 0.75; } @keyframes modalRise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; display: inline-flex; align-items: center; gap: 0.5rem; } .modal h3 i { color: var(--accent); font-size: 0.92em; } .modal__hint { color: var(--hk-text-muted); font-size: 0.84rem; margin-bottom: 1rem; line-height: 1.45; } .modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.2rem; } /* -------------------------------------------------------------------------- News editor preview -------------------------------------------------------------------------- */ .editor-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; } .editor-grid .preview { position: sticky; top: 6rem; align-self: flex-start; border-radius: var(--hk-radius); overflow: hidden; border: 1px solid var(--hk-line); background: var(--hk-card); box-shadow: var(--hk-shadow-sm); } .editor-grid .preview .preview-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--accent-soft) 0%, var(--hk-card-hover) 100%); display: flex; align-items: center; justify-content: center; color: var(--hk-text-muted); font-size: 0.86rem; background-size: cover; background-position: center; } .editor-grid .preview .preview-cover span { display: inline-flex; align-items: center; gap: 0.4rem; } .editor-grid .preview .preview-body { padding: 1.2rem; } .editor-grid .preview-title { font-size: 1.18rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--hk-text); letter-spacing: -0.02em; } .editor-grid .preview-meta { font-size: 0.76rem; color: var(--hk-text-muted); margin-bottom: 0.8rem; } .editor-grid .preview-summary { background: var(--accent-softer); border-left: 2px solid var(--accent); padding: 0.7rem 0.9rem; border-radius: 4px; margin-bottom: 0.9rem; font-size: 0.9rem; color: var(--hk-text-soft); } .editor-grid .preview-content { font-size: 0.9rem; color: var(--hk-text-soft); line-height: 1.65; white-space: pre-wrap; } .char-count { font-size: 0.72rem; color: var(--hk-text-muted); margin-top: 0.3rem; font-variant-numeric: tabular-nums; } .char-count.is-warn { color: #d97706; } .char-count.is-danger { color: var(--crimson-400); } :root[data-hk-theme="light"] .char-count.is-warn { color: #b45309; } /* -------------------------------------------------------------------------- Image library (/housekeeping/images) -------------------------------------------------------------------------- */ .img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } .img-tile { display: flex; flex-direction: column; border: 1px solid var(--hk-line); border-radius: var(--hk-radius); background: var(--hk-card); box-shadow: var(--hk-shadow-sm); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .img-tile:hover { border-color: var(--hk-line-accent); box-shadow: var(--hk-shadow-md); } /* Checkerboard behind transparent PNG/GIF/WebP. */ .img-tile__thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: repeating-conic-gradient(var(--hk-soft-fill-2) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px; border-bottom: 1px solid var(--hk-line); } .img-tile__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .img-tile__meta { padding: 0.55rem 0.7rem 0.25rem; min-width: 0; } .img-tile__name { font-size: 0.82rem; font-weight: 600; color: var(--hk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .img-tile__info { font-size: 0.7rem; color: var(--hk-text-muted); font-variant-numeric: tabular-nums; margin-top: 0.15rem; } .img-tile__actions { display: flex; gap: 0.35rem; padding: 0.55rem 0.7rem 0.7rem; } /* -------------------------------------------------------------------------- SimpleMDE inside housekeeping (.hk-mde wrapper) simplemde.min.css ships a white, light-only skin; these overrides re-key every surface to the hk tokens, so the editor follows BOTH themes via data-hk-theme with a single rule set. Specificity (not load order) beats the vendor stylesheet; `!important` only where the vendor uses it too. -------------------------------------------------------------------------- */ .page-hk .hk-mde .editor-toolbar { background: var(--hk-soft-fill); border: 1px solid var(--hk-line-strong); border-bottom: none; border-radius: var(--hk-radius-sm) var(--hk-radius-sm) 0 0; opacity: 1; padding: 0.3rem 0.45rem; } .page-hk .hk-mde .editor-toolbar a, .page-hk .hk-mde .editor-toolbar a.fa { color: var(--hk-text-muted) !important; border-color: transparent; } .page-hk .hk-mde .editor-toolbar a:hover, .page-hk .hk-mde .editor-toolbar a.active { background: var(--hk-soft-fill-2); border-color: var(--hk-line-strong); color: var(--hk-text) !important; } .page-hk .hk-mde .editor-toolbar i.separator { border-left-color: var(--hk-line-strong); border-right-color: transparent; } .page-hk .hk-mde .editor-toolbar.disabled-for-preview a:not(.no-disable) { background: transparent; } .page-hk .hk-mde .CodeMirror { background: var(--hk-input-bg); color: var(--hk-text); border: 1px solid var(--hk-line-strong); border-radius: 0 0 var(--hk-radius-sm) var(--hk-radius-sm); font-family: inherit; font-size: 0.92rem; min-height: 12rem; height: auto; padding: 0.35rem 0.3rem; } .page-hk .hk-mde .CodeMirror-scroll { min-height: 12rem; max-height: 24rem; } .page-hk .hk-mde .CodeMirror-focused { background: var(--hk-input-bg-focus); border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--focus-ring); } .page-hk .hk-mde .CodeMirror-cursor { border-left-color: var(--hk-text); } .page-hk .hk-mde .CodeMirror-selected, .page-hk .hk-mde .CodeMirror-focused .CodeMirror-selected { background: var(--accent-soft); } .page-hk .hk-mde .CodeMirror-placeholder { color: var(--hk-text-dim) !important; } .page-hk .hk-mde .CodeMirror-lines { color: var(--hk-text); } /* Markdown token colors, legible on both surfaces. */ .page-hk .hk-mde .cm-header { color: var(--accent-bright); } .page-hk .hk-mde .cm-quote { color: var(--hk-text-muted); font-style: italic; } .page-hk .hk-mde .cm-link { color: var(--accent-link); } .page-hk .hk-mde .cm-url { color: var(--hk-text-dim); } .page-hk .hk-mde .cm-strong, .page-hk .hk-mde .cm-em { color: var(--hk-text); } .page-hk .hk-mde .cm-comment { font-family: var(--hk-mono); background: var(--hk-soft-fill-2); border-radius: 0.2rem; } /* In-editor preview pane (vendor default is white). */ .page-hk .hk-mde .editor-preview, .page-hk .hk-mde .editor-preview-side { background: var(--hk-card-solid); color: var(--hk-text); border-color: var(--hk-line-strong); padding: 0.7rem; } .page-hk .hk-mde .editor-preview a { color: var(--accent-link); } /* -------------------------------------------------------------------------- Detail pages -------------------------------------------------------------------------- */ .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1.3rem; } .kv-grid > div { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } .kv-grid label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--hk-text-muted); display: inline-flex; align-items: center; gap: 0.4rem; } .kv-grid label i { color: var(--hk-text-dim); width: 0.95em; text-align: center; } .kv-grid p { margin: 0; color: var(--hk-text); font-size: 0.92rem; word-break: break-word; letter-spacing: -0.005em; } .badge-wall { display: flex; flex-wrap: wrap; gap: 0.55rem; } .badge-wall img { width: 56px; height: 56px; background: var(--hk-soft-fill); padding: 0.4rem; border-radius: 10px; border: 1px solid var(--hk-line); transition: transform 200ms, border-color 200ms; } .badge-wall img:hover { transform: translateY(-2px); border-color: var(--hk-line-accent); } .action-bar { display: flex; gap: 0.45rem; flex-wrap: wrap; } .search-row { display: flex; gap: 0.55rem; align-items: center; flex: 1; min-width: 0; } .search-row .form-input { max-width: 280px; flex: 1; } .alert { padding: 0.75rem 1rem; border-radius: 9px; font-size: 0.86rem; display: flex; align-items: center; gap: 0.5rem; line-height: 1.4; } .alert i { font-size: 0.95em; } .alert-success { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.26); color: #34d399; } :root[data-hk-theme="light"] .alert-success { color: #066b4f; } .alert-danger { background: rgba(225, 29, 72, 0.10); border: 1px solid rgba(225, 29, 72, 0.26); color: var(--crimson-300); } /* -------------------------------------------------------------------------- Empty state -------------------------------------------------------------------------- */ .hk-empty { text-align: center; padding: 2.6rem 1rem; color: var(--hk-text-muted); } .hk-empty > div:first-child { width: 56px; height: 56px; margin: 0 auto 0.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--hk-soft-fill); border: 1px solid var(--hk-line); color: var(--hk-text-dim); font-size: 1.4rem; } .hk-empty p { margin: 0; font-size: 0.9rem; color: var(--hk-text-muted); letter-spacing: -0.005em; } /* -------------------------------------------------------------------------- Page loader (admin accent) -------------------------------------------------------------------------- */ .page-hk .page-loader__orbit span:nth-child(1) { border-top-color: var(--accent); } .page-hk .page-loader__orbit span:nth-child(2) { border-top-color: var(--accent-bright); } .page-hk .page-loader__orbit span:nth-child(3) { border-top-color: var(--hk-text-dim); } .page-hk .page-loader { color: var(--hk-text-muted); } /* -------------------------------------------------------------------------- Edit-setting modal (premium) -------------------------------------------------------------------------- */ .modal--settings { width: 100%; max-width: 540px; padding: 0; overflow: hidden; } .modal--settings::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: 0.9; } .modal--settings .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.6rem 1rem; border-bottom: 1px solid var(--hk-line); } .modal--settings .modal__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--accent-link); margin-bottom: 0.35rem; } .modal--settings .modal__head h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.022em; color: var(--hk-text); } .modal--settings .modal__close { appearance: none; background: var(--hk-soft-fill); border: 1px solid var(--hk-line); color: var(--hk-text-muted); width: 32px; height: 32px; border-radius: 8px; font-size: 0.95rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 160ms, color 160ms, border-color 160ms; flex-shrink: 0; } .modal--settings .modal__close:hover { background: var(--accent-soft); color: var(--accent-link); border-color: var(--accent-line); } .modal--settings .modal__body { padding: 1.4rem 1.6rem 0.4rem; display: flex; flex-direction: column; gap: 1.1rem; } .modal--settings .modal__actions { padding: 1rem 1.6rem 1.4rem; display: flex; gap: 0.5rem; justify-content: flex-end; border-top: 1px solid var(--hk-line); background: var(--hk-soft-fill); margin-top: 0.4rem; } .form-group--lg { gap: 0.5rem; display: flex; flex-direction: column; } .form-group--lg .form-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hk-text-muted); display: inline-flex; align-items: center; gap: 0.4rem; } .form-input--lg { width: 100%; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--hk-line-strong); background: var(--hk-input-bg); color: var(--hk-text); font-family: var(--hk-mono); font-size: 1rem; font-weight: 500; letter-spacing: -0.005em; transition: border-color 160ms, box-shadow 160ms, background 160ms; } .form-input--lg::placeholder { color: var(--hk-text-dim); } .form-input--lg:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--hk-input-bg-focus); } .form-input--readonly { background: var(--accent-softer); border-color: var(--accent-line); color: var(--accent-link); cursor: default; user-select: all; } .form-input--readonly:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--accent-soft); } .form-help { margin: 0; font-size: 0.74rem; color: var(--hk-text-muted); line-height: 1.45; display: inline-flex; align-items: center; gap: 0.4rem; } .form-help i { color: var(--accent); } /* -------------------------------------------------------------------------- Keyboard focus — visible accent ring on all interactive chrome -------------------------------------------------------------------------- */ .page-hk a:focus-visible, .page-hk .btn:focus-visible, .page-hk .form-input:focus-visible, .page-hk .form-select:focus-visible, .page-hk .form-textarea:focus-visible, .hk-menu__item:focus-visible, .hk-theme-toggle:focus-visible, .hk-hamburger:focus-visible, .hk-drawer-close:focus-visible, .hk-userchip__logout:focus-visible, .modal--settings .modal__close:focus-visible, .hk-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .page-hk *:focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- Responsive — tablet -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .hk-shell { grid-template-columns: 1fr; } .hk-hamburger { display: inline-flex; } .hk-sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: 270px; max-width: 84vw; z-index: 100; transform: translateX(-100%); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 24px 0 60px -16px rgba(0, 0, 0, 0.7); border-right: 1px solid var(--hk-line); } .hk-shell.is-drawer-open .hk-sidebar { transform: translateX(0); } .hk-shell.is-drawer-open .hk-drawer-backdrop { display: block; } .hk-drawer-close { display: inline-flex; } .editor-grid { grid-template-columns: 1fr; gap: 1rem; } .editor-grid .preview { position: static; } .hk-content { padding: 1.6rem 1.4rem 3rem; } .hk-topbar { padding: 0.95rem 1.4rem; } } /* -------------------------------------------------------------------------- Responsive — phone -------------------------------------------------------------------------- */ @media (max-width: 640px) { .hk-content { padding: 1.2rem 1rem 2.4rem; } .hk-topbar { padding: 0.85rem 1rem; gap: 0.6rem; } .hk-topbar__title { font-size: 1.18rem; } .hk-topbar__eyebrow { font-size: 0.58rem; } .hk-userchip__meta { display: none; } .hk-userchip { gap: 0.35rem; padding: 0.25rem; } .stat-tile { padding: 0.95rem 1rem; } .stat-tile .value { font-size: 1.55rem; } .card__head, .card__body { padding-left: 1rem; padding-right: 1rem; } .content-header h2 { font-size: 1.18rem; } .modal--settings .modal__head, .modal--settings .modal__body, .modal--settings .modal__actions { padding-left: 1.1rem; padding-right: 1.1rem; } .modal--settings .modal__head h3 { font-size: 1.15rem; } .form-input--lg { font-size: 0.95rem; padding: 0.78rem 0.9rem; } } @media (max-width: 380px) { .hk-topbar { padding: 0.7rem 0.85rem; } .hk-content { padding: 0.85rem 0.85rem 2rem; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .hk-sidebar, .modal-backdrop.is-open, .modal, .stat-tile, .card { transition: none !important; animation: none !important; } }