/* ------------------------------------------------------------------
Design tokens — GK Software brand (2026-05-29).
Re-pointed from the prior teal/slate modernization palette to the
official GK palette (gk-software-brand skill; mirrored in config/brand/).
The whole UI is driven from the :root tokens below, so the rebrand is
this one block — every template and rule inherits it.
- Primary dark brand: GK Blue #1c1c59 (header, headings, CTAs).
- UI interactive color: GK Action Blue #2c60f5 (focus rings, links,
active-nav underline). Used as the supporting accent, not for big fields.
- Surfaces/text: warm GK Grey #2d251e and its shades; 10% GK Grey
#f7f2f2 as the warm near-white app background.
- Status chips reuse the GK mega-tag accents (green/yellow/orange) plus
Action Blue, only as small UI elements per brand rules.
- Typeface: Roboto everywhere (loaded in _base.html), Arial fallback.
------------------------------------------------------------------ */
:root {
/* ----------------------------------------------------------------
GK Software brand palette (2026-05-29). Values from the
gk-software-brand skill (config/brand/). Token NAMES are unchanged
so every template/rule inherits the rebrand from this one block.
- GK Blue #1c1c59 = primary dark brand (logo, headings, dark bg)
- Action Blue #2c60f5 = UI active/interactive color (buttons, focus)
- GK Grey #2d251e (warm brown-grey) = body text; shades for borders
- 10% GK Grey #f7f2f2 = warm near-white app background
- Status chips reuse the GK mega-tag accents (green/yellow/orange)
+ Action Blue, used only as small UI elements per brand rules.
---------------------------------------------------------------- */
/* Brand */
--color-brand: #1c1c59; /* GK Blue */
--color-brand-hover: #2e2e7a;
--color-brand-deep: #14143f;
/* Accent = GK Action Blue (UI active/interactive states: focus, links) */
--color-accent: #2c60f5;
--color-accent-hover: #1f4ad1;
--color-accent-soft: rgba(44, 96, 245, 0.14);
/* Primary CTA = GK Primary CTA (call-to-action buttons, per token files) */
--color-cta: #464ab9;
--color-cta-hover: #383c9c;
/* Tertiary = GK muted blue-grey for secondary UI text/supporting elements */
--color-tertiary: #8c91af;
/* Status — GK mega-tag accents (small UI use only) */
--color-success: #2a9d78; /* GK Green, darkened for contrast */
--color-success-bg: #e7f6f0;
--color-success-fg: #14533d;
--color-warn: #b88600; /* GK Yellow, darkened for contrast */
--color-warn-bg: #fdf3d6;
--color-warn-fg: #6b4e00;
--color-danger: #ff4125; /* GK Orange */
--color-danger-bg: #ffe7e2;
--color-danger-fg: #8f1d0d;
--color-info: #2c60f5; /* Action Blue */
--color-info-bg: #e3eaff;
--color-info-fg: #15307a;
/* Surfaces (white + warm-grey shades) */
--surface: #ffffff;
--surface-subtle: #f7f2f2; /* 10% GK Grey */
--surface-emphasis: #e2dbd9; /* 20% GK Grey */
--surface-app: #f7f2f2; /* body background = 10% GK Grey */
/* Borders + text (warm GK Grey shades) */
--border-subtle: #e2dbd9; /* 20% GK Grey */
--border-strong: #c8c0bc; /* 30% GK Grey */
--text-primary: #2d251e; /* GK Grey */
--text-secondary: #62564f; /* 80% GK Grey */
--text-muted: #776c65; /* 70% GK Grey (passes AA on warm bg) */
/* Shadows + motion */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04),
0 1px 3px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06),
0 2px 4px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; }
body {
/* GK brand typeface is Roboto everywhere (loaded from Google Fonts in
_base.html). Arial is the GK-specified fallback. */
font-family: "Roboto", Arial, sans-serif;
margin: 0;
/* White at the top so the header reads clean, warm 10% GK Grey below. */
background:
linear-gradient(180deg, #ffffff 0%, var(--surface-app) 220px,
var(--surface-app) 100%);
min-height: 100vh;
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-brand); }
a:hover { color: var(--color-accent); }
header {
background: linear-gradient(180deg,
var(--color-brand) 0%,
var(--color-brand-deep) 100%);
color: white;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06),
0 4px 12px rgba(28, 28, 89, 0.08);
}
header h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
header h1 a { color: white; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
/* Official GK negative logo placed directly on the GK Blue header.
Sized by height; the lockup is a stacked mega tag + GK + endorsement. */
header h1 .gk-logo {
display: block;
height: 40px;
width: auto;
}
/* Divider + product name to the right of the logo. */
header h1 .gk-product {
font-weight: 600;
letter-spacing: -0.01em;
padding-left: 12px;
border-left: 1px solid rgba(255, 255, 255, 0.28);
}
header nav a {
color: white;
text-decoration: none;
margin-left: 20px;
opacity: 0.85;
position: relative;
padding: 4px 0;
transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
}
header nav a:hover { opacity: 1; }
/* Teal underline on top-level nav hover. Skips the dropdown items
(they have their own hover style inside .nav-dropdown-menu). */
header nav > a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--color-accent);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.18s var(--ease);
}
header nav > a:hover::after { transform: scaleX(1); }
main {
max-width: 1000px;
margin: 24px auto;
padding: 0 24px;
}
h1 {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px 0;
}
h2 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 12px 0;
}
h3 {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0 0 8px 0;
}
/* Category / eyebrow label (h4 by convention). Optional uppercase
variant used in stat groups and section dividers. */
.eyebrow,
h4.eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 6px 0;
}
/* Section divider: thin line above + label underneath. Used to
group related content within a card. */
.section-header {
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.card {
background: var(--surface);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
padding: 22px 26px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
/* No transition by default — static cards shouldn't move on mouse-over.
Interactive cards opt in via .card-interactive. */
}
.card h2, .card h3 { margin-top: 0; }
/* Cards that wrap a link or behave as a button. Apply the lift on
hover and a tactile press on active. */
.card-interactive {
transition: transform 0.15s var(--ease),
box-shadow 0.15s var(--ease),
border-color 0.15s var(--ease);
cursor: pointer;
}
.card-interactive:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--border-strong);
}
.card-interactive:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.field { margin: 14px 0; }
.field label {
display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px;
color: var(--text-primary);
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: inherit;
background: var(--surface);
color: var(--text-primary);
transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
/* Apply focus ring to bare inputs too (forms without .field wrappers
are common across admin pages). */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.field.checkbox label { font-weight: normal; }
.field .hint { color: var(--text-secondary); font-size: 12px; margin: 4px 0 0 0; }
details { margin: 16px 0; }
details summary {
cursor: pointer;
padding: 8px 12px;
background: var(--surface-emphasis);
border-radius: var(--radius-sm);
font-weight: 600;
color: var(--text-primary);
transition: background 0.12s var(--ease);
}
details summary:hover { background: var(--border-subtle); }
details[open] summary { margin-bottom: 8px; }
button.primary, .primary.button {
background: var(--color-cta); /* GK Primary CTA #464ab9 */
color: white;
border: none;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: background 0.12s var(--ease),
transform 0.08s var(--ease),
box-shadow 0.12s var(--ease);
}
button.primary:hover, .primary.button:hover {
background: var(--color-cta-hover);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(70, 74, 185, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
button.primary:active, .primary.button:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
button.primary:focus-visible, .primary.button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-accent-soft),
0 1px 2px rgba(15, 23, 42, 0.08);
}
table.jobs-table,
table.gloss-table,
table.corr-table,
table.cases-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
table.jobs-table th,
table.jobs-table td,
table.gloss-table th,
table.gloss-table td,
table.corr-table th,
table.corr-table td,
table.cases-table th,
table.cases-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border-subtle);
}
/* Sticky table headers — readable when a long list is scrolled. The
parent card has a white background so we paint the th in white too. */
table.jobs-table th,
table.gloss-table th,
table.corr-table th,
table.cases-table th {
background: var(--surface);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid var(--border-subtle);
box-shadow: 0 1px 0 var(--border-subtle);
}
table.jobs-table tbody tr,
table.gloss-table tbody tr,
table.corr-table tbody tr,
table.cases-table tbody tr {
transition: background 0.08s var(--ease);
}
table.jobs-table tbody tr:hover,
table.gloss-table tbody tr:hover,
table.corr-table tbody tr:hover,
table.cases-table tbody tr:hover {
background: var(--surface-subtle);
}
/* ------------------------------------------------------------------
Status pills. Legacy .badge-* and .badge-HIGH/MEDIUM/LOW classes
are kept (templates still ship them); the new .chip system is the
one templates should reach for going forward.
------------------------------------------------------------------ */
.badge {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge-running { background: var(--color-info); color: white; }
.badge-done { background: var(--color-success); color: white; }
.badge-crashed { background: var(--color-danger); color: white; }
.badge-aborted { background: var(--color-warn); color: white; }
/* Confidence badges. LOW = grey, not red — a low-confidence answer is a
functional outcome, not a system failure. */
.badge-HIGH, .badge-high { background: var(--color-success); color: white; }
.badge-MEDIUM, .badge-medium { background: var(--color-warn); color: #4d3a00; }
.badge-LOW, .badge-low { background: var(--border-strong); color: var(--text-primary); }
.badge-ERROR, .badge-error { background: var(--color-danger); color: white; }
/* Unified chip/pill system. Use these instead of per-template
.admin-chip / .pending-chip / .force-chip / .state-chip going
forward. Per-template versions are left in place where they had
page-specific semantics (e.g., admin_settings inverts ON/OFF
meaning), but the global tokens are now consistent. */
.chip {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--surface-emphasis);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
white-space: nowrap;
}
.chip--success { background: var(--color-success-bg); color: var(--color-success-fg); border-color: transparent; }
.chip--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); border-color: transparent; }
.chip--danger { background: var(--color-danger-bg); color: var(--color-danger-fg); border-color: transparent; }
.chip--info { background: var(--color-info-bg); color: var(--color-info-fg); border-color: transparent; }
.chip--brand { background: var(--color-brand); color: white; border-color: transparent; }
.chip--accent { background: var(--color-accent); color: white; border-color: transparent; }
.chip--neutral { /* default */ }
/* Common button variants. Use instead of redefining per page. */
button.secondary, .secondary.button {
background: var(--surface);
color: var(--color-brand);
border: 1px solid var(--border-strong);
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
cursor: pointer;
font-weight: 600;
transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
button.secondary:hover, .secondary.button:hover {
background: var(--surface-subtle);
border-color: var(--color-accent);
color: var(--color-accent-hover);
}
button.secondary:focus-visible, .secondary.button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-accent-soft);
}
button.danger, .danger.button {
background: var(--color-danger);
color: white;
border: none;
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
cursor: pointer;
font-weight: 600;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
transition: background 0.12s var(--ease), transform 0.08s var(--ease);
}
button.danger:hover, .danger.button:hover {
background: #d6361d; /* GK Orange, darkened for hover */
transform: translateY(-1px);
}
button.danger:active, .danger.button:active { transform: translateY(1px); }
button.danger:focus-visible, .danger.button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}
/* Mobile responsiveness. Sales reps check status on phones. */
@media (max-width: 720px) {
main { padding: 0 12px; margin: 12px auto; max-width: 100%; }
header { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
header nav { display: flex; flex-wrap: wrap; gap: 8px 14px; }
header nav a { margin-left: 0; font-size: 13px; }
.user-chip { margin-left: 0; }
.card { padding: 16px 18px; }
h1 { font-size: 24px; }
table.jobs-table,
table.gloss-table,
table.corr-table,
table.cases-table {
font-size: 12px; display: block; overflow-x: auto;
}
.field input, .field select { font-size: 16px; } /* iOS won't zoom */
/* On mobile the body bg gradient produces an ugly cutoff under
long pages; flatten it. */
body { background: var(--surface-app); }
}
.job-meta p { margin: 4px 0; font-size: 14px; }
.job-meta code {
background: var(--surface-emphasis);
padding: 1px 6px;
border-radius: 3px;
font-size: 12px;
}
.progress-stats {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 12px 0;
}
.stat {
background: var(--surface-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 16px;
min-width: 90px;
text-align: center;
transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.stat:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.stat-num { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.stat-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
.stat.green { background: var(--color-success-bg); border-color: transparent; }
.stat.green .stat-num { color: var(--color-success-fg); }
.stat.yellow { background: var(--color-warn-bg); border-color: transparent; }
.stat.yellow .stat-num { color: var(--color-warn-fg); }
.stat.red { background: var(--color-danger-bg); border-color: transparent; }
.stat.red .stat-num { color: var(--color-danger-fg); }
.stat.dark { background: var(--surface-emphasis); border-color: transparent; }
.current-line code {
background: #1d1d1f;
color: #d4d4d4;
padding: 6px 10px;
border-radius: 4px;
font-size: 12px;
word-break: break-all;
display: inline-block;
margin-top: 4px;
}
pre {
background: var(--color-brand-deep); /* GK Blue deep, was off-brand slate */
color: #f7f2f2;
padding: 12px;
border-radius: var(--radius-sm);
font-size: 11px;
overflow-x: auto;
line-height: 1.5;
}
footer {
text-align: center;
padding: 24px;
color: var(--text-muted);
font-size: 12px;
}
.user-chip {
background: rgba(255,255,255,0.15);
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
margin-left: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ------------------------------------------------------------------
Empty-state component. Replaces bare "No X yet" paragraphs across
admin pages. Render as:
+
No customers registered yet
Add one below to start scoping answers per customer.
------------------------------------------------------------------ */
.empty-state {
text-align: center;
padding: 32px 20px;
color: var(--text-secondary);
background: var(--surface-subtle);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
margin: 12px 0;
}
.empty-state h4 {
margin: 8px 0 4px 0;
font-size: 15px;
color: var(--text-primary);
font-weight: 600;
}
.empty-state p {
margin: 4px 0 0 0;
font-size: 13px;
color: var(--text-secondary);
}
.empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 999px;
background: var(--surface-emphasis);
color: var(--color-accent);
font-size: 22px;
font-weight: 700;
line-height: 1;
margin-bottom: 4px;
}
/* ------------------------------------------------------------------
Skeleton loader. Use as a placeholder while content polls in.
------------------------------------------------------------------ */
.skeleton {
background: linear-gradient(90deg,
var(--surface-emphasis) 0%,
var(--border-subtle) 50%,
var(--surface-emphasis) 100%);
background-size: 200% 100%;
border-radius: var(--radius-sm);
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line {
height: 12px;
margin: 6px 0;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 92%; }
@keyframes skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Dark-themed skeleton — for use inside the dark log viewer. */
.skeleton-dark {
background: linear-gradient(90deg,
#1f2937 0%, #334155 50%, #1f2937 100%);
background-size: 200% 100%;
border-radius: var(--radius-sm);
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
/* Health badge in the header nav. Shows a colored dot + a short text
hint. Hover reveals the summary via the title attribute. */
.health-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
margin-left: 12px;
text-decoration: none;
color: white;
}
.health-badge .health-dot {
width: 8px; height: 8px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.health-green { background: rgba(34, 197, 94, 0.25); color: #bbf7d0; }
.health-yellow { background: rgba(245, 158, 11, 0.30); color: #fde68a; }
.health-red { background: rgba(220, 38, 38, 0.35); color: #fecaca;
animation: health-blink 2s ease-in-out infinite; }
.health-unknown { background: rgba(255,255,255,0.15); color: #d1d1d6; }
@keyframes health-blink { 0%,100%{opacity:1} 50%{opacity:.55} }
/* Suppress the teal hover underline on the header chips/badges so it
doesn't streak under the pill. */
header nav > a.health-badge::after,
header nav > a.user-chip::after { display: none; }
/* Task #158 (2026-05-26): pending-signup badge on the Users nav link.
Sits as a superscript on the link, red+white, gently pulses to draw
the eye without being obnoxious. */
.nav-users-link { position: relative; }
.pending-badge {
display: inline-block;
background: var(--color-danger);
color: white;
font-size: 10px;
font-weight: 700;
line-height: 16px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
text-align: center;
margin-left: 5px;
vertical-align: top;
position: relative;
top: -3px;
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.0);
animation: pending-pulse 2.5s ease-in-out infinite;
}
@keyframes pending-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
}
50% {
box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.0);
}
}
.login-card {
max-width: 400px;
margin: 80px auto;
}
.login-card .error {
background: var(--color-danger-bg);
color: var(--color-danger-fg);
padding: 10px 14px;
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
/* Flash banners. Replaces the legacy pattern of that scattered green
success banners under the .error class name. Use these instead. */
.flash-success, .flash-warn, .flash-error {
padding: 12px 16px;
border-radius: var(--radius-sm);
margin-bottom: 14px;
font-size: 13px;
border: 1px solid transparent;
display: flex;
align-items: center;
gap: 10px;
}
.flash-success {
background: var(--color-success-bg);
color: var(--color-success-fg);
border-color: rgba(22, 163, 74, 0.18);
}
.flash-warn {
background: var(--color-warn-bg);
color: var(--color-warn-fg);
border-color: rgba(245, 158, 11, 0.18);
}
.flash-error {
background: var(--color-danger-bg);
color: var(--color-danger-fg);
border-color: rgba(220, 38, 38, 0.18);
}
/* ------------------------------------------------------------------
Admin dropdown menu (UI_REVIEW_2026-05-27 section 2 / Task #88).
Pure-CSS dropdown for desktop (:hover / :focus-within) plus a tiny
click toggle for touch devices. The trigger is a