/* For best performance, add to :
*/
/* ═══════════════════════════════════════════════════════════════════════════
RCCrafter Design Tokens — single source of truth for all admin pages.
Load BEFORE any page-specific CSS:
═══════════════════════════════════════════════════════════════════════════ */
/* ── Font loading ───────────────────────────────────────────────────────── */
/* Noto Sans SC — refined CJK+Latin body font, loaded explicitly for consistent
rendering across platforms (NOT relying on OS fallback stacks). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
/* JetBrains Mono — readable monospace for SKUs, prices, data cells. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
/* Typography */
--font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
/* Type scale — 1.25 ratio (major third) */
--text-xs: 0.6875rem; /* 11px — captions, badges */
--text-sm: 0.8125rem; /* 13px — secondary text, table cells */
--text-base: 0.9375rem; /* 15px — body, labels */
--text-md: 1.0625rem; /* 17px — emphasized body */
--text-lg: 1.25rem; /* 20px — section headings (h2) */
--text-xl: 1.5rem; /* 24px — page titles (h1) */
/* Line heights */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.55;
--leading-relaxed: 1.65;
/* Spacing scale — 4pt base */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
/* Border radius */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
/* Shadows — layered depth like premium paper */
--shadow-xs: 0 1px 2px oklch(0.15 0.008 252 / 0.05);
--shadow-sm: 0 2px 8px oklch(0.15 0.008 252 / 0.08);
--shadow-md: 0 4px 20px oklch(0.15 0.008 252 / 0.11);
--shadow-lg: 0 12px 40px oklch(0.15 0.008 252 / 0.16);
/* ── Color palette ──────────────────────────────────────────────────── */
/* Brand — confident indigo-slate, Linear-grade presence */
--brand: oklch(0.47 0.18 252);
--brand-hover: oklch(0.40 0.18 252);
--brand-light: oklch(0.92 0.04 252);
--brand-subtle: oklch(0.96 0.018 252);
/* Warm accent — amber, like Linear's attention color */
--accent: oklch(0.65 0.19 75);
--accent-hover: oklch(0.57 0.19 75);
--accent-light: oklch(0.94 0.08 80);
--accent-subtle: oklch(0.97 0.04 80);
/* Surfaces — paper-like, subtly tinted toward brand */
--bg: oklch(0.975 0.005 252);
--surface: oklch(0.994 0.003 252);
--surface-hover: oklch(0.958 0.008 252);
--surface-raised: oklch(1 0 0);
/* Borders — intentional, not invisible */
--border: oklch(0.865 0.012 252);
--border-light: oklch(0.915 0.007 252);
/* Text — rich, deep, confident */
--text: oklch(0.15 0.012 252);
--text-secondary: oklch(0.40 0.012 252);
--text-muted: oklch(0.55 0.008 252);
/* Semantic */
--success: oklch(0.55 0.18 145);
--success-bg: oklch(0.95 0.04 145);
--warning: oklch(0.65 0.16 85);
--warning-bg: oklch(0.96 0.06 85);
--danger: oklch(0.52 0.22 25);
--danger-bg: oklch(0.96 0.03 25);
--info: oklch(0.55 0.08 230);
--info-bg: oklch(0.95 0.02 230);
/* Focus */
--focus-ring: 0 0 0 2px var(--brand-light), 0 0 0 3px var(--brand);
}
/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
--bg: oklch(0.17 0.015 252);
--surface: oklch(0.21 0.018 252);
--surface-hover: oklch(0.24 0.018 252);
--surface-raised: oklch(0.23 0.018 252);
--border: oklch(0.28 0.015 252);
--border-light: oklch(0.24 0.015 252);
--text: oklch(0.93 0.005 252);
--text-secondary: oklch(0.68 0.008 252);
--text-muted: oklch(0.48 0.005 252);
--brand: oklch(0.62 0.16 252);
--brand-hover: oklch(0.55 0.16 252);
--brand-light: oklch(0.24 0.05 252);
--brand-subtle: oklch(0.20 0.03 252);
--accent: oklch(0.70 0.17 75);
--accent-hover: oklch(0.63 0.17 75);
--accent-light: oklch(0.24 0.08 75);
--accent-subtle: oklch(0.20 0.04 75);
--success: oklch(0.62 0.16 145);
--success-bg: oklch(0.22 0.04 145);
--warning: oklch(0.72 0.14 85);
--warning-bg: oklch(0.24 0.06 85);
--danger: oklch(0.60 0.20 25);
--danger-bg: oklch(0.22 0.04 25);
--info: oklch(0.60 0.07 230);
--info-bg: oklch(0.22 0.02 230);
--shadow-xs: 0 1px 2px oklch(0 0 0 / 0.2);
--shadow-sm: 0 2px 8px oklch(0 0 0 / 0.3);
--shadow-md: 0 4px 20px oklch(0 0 0 / 0.4);
--shadow-lg: 0 12px 40px oklch(0 0 0 / 0.5);
}
/* ── Base styles ────────────────────────────────────────────────────────── */
html {
color-scheme: light dark;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-padding-top: 52px; /* offset for sticky nav so anchor links don't hide content */
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
background: var(--bg);
color: var(--text);
min-height: 100vh;
transition: background 0.25s, color 0.25s;
/* Subtle paper grain — barely perceptible, removes flat-screen sterility */
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
/* ── Card hover lift — subtle elevation on interaction ─────────────────── */
.stat-card, .card, .rcc-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover, .card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
.stat-card, .card, .rcc-card { transition: none; }
.stat-card:hover, .card:hover { transform: none; }
}
/* ── Entrance animation — staggered reveal ─────────────────────────────── */
@keyframes fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.enter-fade-up {
animation: fade-up 0.45s ease-out both;
}
.enter-delay-1 { animation-delay: 0.05s; }
.enter-delay-2 { animation-delay: 0.10s; }
.enter-delay-3 { animation-delay: 0.15s; }
.enter-delay-4 { animation-delay: 0.20s; }
.enter-delay-5 { animation-delay: 0.25s; }
/* ── Table row entrance stagger ────────────────────────────────────────── */
@keyframes row-in {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-rows-in tbody tr {
animation: row-in 0.35s ease-out both;
}
.animate-rows-in tbody tr:nth-child(1) { animation-delay: 0.02s; }
.animate-rows-in tbody tr:nth-child(2) { animation-delay: 0.05s; }
.animate-rows-in tbody tr:nth-child(3) { animation-delay: 0.08s; }
.animate-rows-in tbody tr:nth-child(4) { animation-delay: 0.11s; }
.animate-rows-in tbody tr:nth-child(5) { animation-delay: 0.14s; }
.animate-rows-in tbody tr:nth-child(6) { animation-delay: 0.17s; }
.animate-rows-in tbody tr:nth-child(7) { animation-delay: 0.20s; }
.animate-rows-in tbody tr:nth-child(8) { animation-delay: 0.23s; }
.animate-rows-in tbody tr:nth-child(9) { animation-delay: 0.26s; }
.animate-rows-in tbody tr:nth-child(10) { animation-delay: 0.29s; }
.animate-rows-in tbody tr:nth-child(n+11) { animation-delay: 0.32s; }
/* ── Stat number pulse on load ─────────────────────────────────────────── */
@keyframes count-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.stat-card .num.animate {
animation: count-in 0.5s ease-out both;
}
/* ── Hover highlight on table rows — smooth color transition ───────────── */
tr {
transition: background 0.12s ease;
}
/* ── Focus — visible rings for keyboard users ──────────────────────────── */
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
box-shadow: none;
border-radius: 2px;
}
/* ── Skip link — for keyboard users to bypass navigation ──────────────── */
.skip-link {
position: absolute;
top: -100%;
left: 16px;
z-index: 9999;
padding: 8px 16px;
background: var(--surface);
color: var(--brand);
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--radius-sm);
border: 2px solid var(--brand);
transition: top 0.15s;
}
.skip-link:focus {
top: 8px;
}
/* ── Reduced motion — respect OS preference ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── Color scheme — respect OS preference ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: oklch(0.18 0.012 252);
--surface: oklch(0.22 0.015 252);
--surface-hover: oklch(0.25 0.015 252);
--border: oklch(0.30 0.01 252);
--border-light: oklch(0.26 0.01 252);
--text: oklch(0.93 0.005 252);
--text-secondary: oklch(0.68 0.008 252);
--text-muted: oklch(0.55 0.005 252);
--brand: oklch(0.62 0.12 252);
--brand-hover: oklch(0.55 0.12 252);
--brand-light: oklch(0.25 0.04 252);
}
}
/* Ensure muted text has sufficient contrast (4.5:1 minimum on white) */
:root {
--text-muted: oklch(0.58 0.005 252); /* was 0.62, bumped for AA contrast */
}
/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
background: var(--brand-light);
color: var(--brand);
}
/* ── Scrollbar — subtle, brand-tinted ──────────────────────────────────── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: oklch(0.75 0.01 252);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: oklch(0.65 0.01 252);
}
/* ── Shared component tokens ────────────────────────────────────────────── */
/* Buttons — minimum 36px height for touch targets */
button, .btn, [role="button"] {
font-family: var(--font-body);
cursor: pointer;
min-height: 2.25rem; /* 36px */
}
.btn-primary {
background: var(--brand);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.btn-secondary:hover { background: var(--surface-hover); }
.btn-danger {
background: var(--danger);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.btn-danger:hover { opacity: 0.9; }
.btn-success {
background: var(--success);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.btn-success:hover { opacity: 0.9; }
/* Inputs & selects */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
font-family: var(--font-body);
font-size: var(--text-sm);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
min-height: 2.25rem; /* 36px */
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--brand);
box-shadow: 0 0 0 2px var(--brand-light);
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
th {
text-align: left;
padding: var(--space-2) var(--space-3);
font-weight: 600;
font-size: var(--text-xs);
color: var(--text-secondary);
text-transform: none;
letter-spacing: 0;
border-bottom: 1.5px solid var(--border);
background: var(--bg);
white-space: nowrap;
user-select: none;
}
td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
tr:hover td {
background: var(--surface-hover);
}
/* Badges */
.badge {
display: inline-block;
padding: 1px 7px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.5;
}
.badge-neutral { background: var(--surface-hover); color: var(--text-secondary); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--brand-light); color: var(--brand); }
/* Stat cards — used when card IS the interaction (clickable filter) */
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
.stat-card.active {
border-color: var(--brand);
box-shadow: 0 0 0 2px var(--brand-light);
}
.stat-card .stat-value {
font-size: var(--text-xl);
font-weight: 700;
line-height: var(--leading-tight);
}
.stat-card .stat-label {
font-size: var(--text-xs);
color: var(--text-secondary);
margin-top: var(--space-1);
}
/* Cards — only for content that truly needs a container */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
/* Phase indicator — replaces colored left-border (AI slop pattern) */
.phase-indicator {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
border: 1px solid var(--border);
}
.phase-indicator.completed {
background: var(--success-bg);
border-color: var(--success);
}
.phase-indicator.in-progress {
background: var(--brand-light);
border-color: var(--brand);
}
.phase-indicator .phase-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.phase-indicator.completed .phase-dot { background: var(--success); }
.phase-indicator.in-progress .phase-dot { background: var(--brand); }
/* ── Page heading accent — subtle amber underline, one focal point per page ── */
h1 {
position: relative;
padding-bottom: 8px;
margin-bottom: 4px;
}
h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 3px;
background: var(--accent);
border-radius: 2px;
opacity: 0.7;
}
/* Skeleton loading */
.skeleton {
background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border-light) 50%, var(--surface-hover) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Spinner */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-top-color: var(--brand);
border-radius: 50%;
animation: spin 0.6s linear infinite;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Toast */
.toast {
position: fixed;
bottom: var(--space-5);
right: var(--space-5);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
z-index: 300;
animation: toast-in 0.25s ease-out;
border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--danger); }
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Heading scale */
h1 { font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); }
h3 { font-size: var(--text-md); font-weight: 600; line-height: var(--leading-snug); }
h4 { font-size: var(--text-base); font-weight: 500; line-height: var(--leading-snug); }
/* Monospace utility */
.font-mono { font-family: var(--font-mono); }
/* Layout utilities */
/* ═══ Page container — fluid width, responsive to screen size ═══ */
.page {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: var(--space-4) var(--space-5);
}
@media (max-width: 768px) {
.page { padding: var(--space-3) var(--space-3); }
}
@media (max-width: 480px) {
.page { padding: var(--space-2) var(--space-2); }
}
.toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
}
/* Section heading */
.section-heading {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-3);
}
/* ── Mobile breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
.toolbar {
flex-direction: column;
align-items: stretch;
}
.toolbar input,
.toolbar select {
width: 100% !important;
min-width: 0;
}
.stats-row,
.stats,
.statsby {
grid-template-columns: repeat(2, 1fr) !important;
}
table { font-size: 11px; }
th, td { padding: 4px 6px; }
.page { padding: 8px 10px; }
.rcc-topbar-inner { padding: 0 12px; }
}