/* ============================================================================
GigPost Design System — app-wide shared stylesheet
----------------------------------------------------------------------------
Extracted from the redesigned Client Portal
(public/app/portal/shared/css/01-core.css) per
APPLICATION_REDESIGN_TRACKER.md §0 (Phase 0 — Enablement).
Canonical token registry: docs/design/DESIGN_TOKENS.md
Consistency rules: docs/design/DESIGN_RULES.md §18
Component specs: docs/design/UI_KIT.md / COMPONENT_LIBRARY.md
Usage — link once in , after /api-config.js is not required:
Served by server.js: GET /design-system.css
Vocabulary:
• Tokens are the canonical --db-* custom properties (the technical
signature of a "redesigned" page) + the 4px --space-* scale.
• Components are prefixed .gp-* so they never collide with a page's own
legacy .card / .btn / .nav classes. A redesigned page uses gp-* classes
and --db-* tokens; that pairing is the design-system marker.
The visual language is mobile-first (matching the live app shell). The
design docs describe a desktop-first fixed frame — that layer is
deliberately NOT adopted here (see integrating-design-updates skill).
============================================================================ */
/* ----------------------------------------------------------------------------
1. TOKENS
------------------------------------------------------------------------- */
:root {
/* — Color · surfaces — */
--db-canvas: #EEF1F7; /* app canvas tint (DESIGN_TOKENS §3.1) */
--db-card: #FFFFFF; /* card / panel surface */
--db-faint: #F2F4F8; /* subtle fill: thumbs, hover, empty tiles */
/* — Color · text — */
--db-ink: #161D30; /* text.primary */
--db-muted: #5F6880; /* text.muted (single-muted rule §18-10) */
--db-muted-2: #6A7288; /* text.subtle — placeholders / optional only */
/* — Color · borders — */
--db-border: #DDE2EB; /* default border */
--db-border-soft: #ECEFF5; /* hairline dividers */
/* — Color · brand (orange) — */
--db-brand: #DE2A2E; /* brand fill / icons — NEVER as text (fails AA) */
--db-brand-hover: #C82125; /* brand fill hover */
--db-brand-deep: #B3242A; /* AA-safe orange for text / links (§18-7) */
--db-brand-soft: #FDECEC; /* single soft-orange wash (§18-8) */
/* — Color · semantic — */
--db-success: #15803D; /* single success green (§18-9) */
--db-success-soft: #EAF6EE;
--db-success-border: #BFE3CC;
--db-warning: #6B5E00; /* AA-safe warning */
--db-warning-soft: #FEFCE0;
--db-warning-border: #E4DC70;
/* Danger: derived here (portal had no --db-danger) following the same
fill / deep-text / soft / border pattern as success & warning. */
--db-danger: #8E1B1E; /* danger fill / icon */
--db-danger-deep: #7C1518; /* AA-safe danger text */
--db-danger-soft: #FCECEC;
--db-danger-border: #F0A9AB;
/* — Radius — */
--db-radius-card: 18px; /* radius.xl — cards */
--db-radius-md: 12px; /* radius.md — buttons, inputs, tiles */
--db-radius-sm: 10px; /* radius.sm */
--db-radius-pill: 999px; /* radius.pill — chips / status pills */
/* — Shadow — */
--db-shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
--db-shadow-md: 0 4px 16px rgba(16,24,40,0.10);
--db-shadow-lg: 0 12px 40px rgba(16,24,40,0.16);
--db-shadow-brand: 0 8px 24px rgba(222,42,46,0.28);
/* — Spacing · 4px base — */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px;
--gutter: 20px; /* page inset — mobile */
--gutter-lg: 32px; /* page inset — >=1024px */
--db-maxw: 1180px; /* content frame max width */
/* — Type — */
--db-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--text-xs: 0.72rem; --text-sm: 0.8125rem; --text-base: 0.875rem;
--text-md: 0.95rem; --text-lg: 1.125rem; --text-xl: 1.375rem;
--text-2xl: 1.75rem; --text-3xl: 2.25rem;
/* — Motion — */
--db-ease: cubic-bezier(0.4, 0, 0.2, 1);
--db-dur: 160ms;
/* — Safe area (PWA) — */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* ----------------------------------------------------------------------------
2. RESET + BASE
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.gp {
font-family: var(--db-font);
background: var(--db-canvas);
color: var(--db-ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.gp img, .gp svg, .gp video { max-width: 100%; }
/* Anchors inherit color by default so component anchors (.gp-btn, nav, logo,
footer) keep their own text color. Only *unclassed* content links get the
brand hue — this deliberately avoids the classic "link color beats button
color" specificity trap (.gp a would otherwise override .gp-btn--primary). */
.gp a { text-decoration: none; }
.gp a:not([class]) { color: var(--db-brand-deep); }
.gp a:not([class]):hover { text-decoration: underline; }
.gp h1, .gp h2, .gp h3, .gp h4 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; }
.gp p { margin: 0; }
/* Visible keyboard-focus ring (a11y) — only for keyboard / AT users. */
.gp :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
outline: 2px solid var(--db-brand);
outline-offset: 2px;
border-radius: 4px;
}
/* ----------------------------------------------------------------------------
3. LAYOUT
------------------------------------------------------------------------- */
.gp-container {
width: 100%;
max-width: var(--db-maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
.gp-container { padding-inline: var(--gutter-lg); }
}
.gp-section { padding-block: var(--space-16); }
.gp-section--tight { padding-block: var(--space-10); }
.gp-eyebrow {
font-size: var(--text-xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--db-brand-deep);
}
.gp-eyebrow--muted { color: var(--db-muted); }
.gp-stack { display: flex; flex-direction: column; }
.gp-stack > * + * { margin-top: var(--space-4); }
.gp-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gp-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .gp-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gp-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gp-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .gp-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.gp-center { text-align: center; }
.gp-measure { max-width: 62ch; }
.gp-measure-narrow { max-width: 46ch; }
/* ----------------------------------------------------------------------------
4. TOP BAR (marketing / utility nav)
------------------------------------------------------------------------- */
.gp-topbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.82);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--db-border-soft);
}
.gp-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 62px;
}
.gp-topbar-nav { display: none; align-items: center; gap: var(--space-6); }
.gp-topbar-nav a { color: var(--db-ink); font-size: var(--text-base); font-weight: 600; }
.gp-topbar-nav a:hover { color: var(--db-brand-deep); text-decoration: none; }
.gp-topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 860px) { .gp-topbar-nav { display: flex; } }
/* ----------------------------------------------------------------------------
5. BRAND LOGO (wordmark)
------------------------------------------------------------------------- */
.gp-logo {
font-size: 1.35rem;
font-weight: 900;
letter-spacing: -0.03em;
color: var(--db-ink);
display: inline-flex;
align-items: center;
gap: 2px;
}
.gp-logo span { color: var(--db-brand-deep); }
.gp-logo--light { color: #fff; }
.gp-logo--light span { color: var(--db-brand); }
/* ----------------------------------------------------------------------------
6. BUTTONS
------------------------------------------------------------------------- */
.gp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: inherit;
font-size: var(--text-base);
font-weight: 700;
line-height: 1;
padding: 12px 20px;
min-height: 44px; /* touch target */
border: 1.5px solid transparent;
border-radius: var(--db-radius-md);
cursor: pointer;
white-space: nowrap;
transition: background var(--db-dur) var(--db-ease),
border-color var(--db-dur) var(--db-ease),
color var(--db-dur) var(--db-ease),
transform var(--db-dur) var(--db-ease),
box-shadow var(--db-dur) var(--db-ease);
text-decoration: none;
}
.gp-btn:disabled, .gp-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.gp-btn:hover { text-decoration: none; }
.gp-btn--primary { background: var(--db-brand); color: #fff; box-shadow: var(--db-shadow-brand); }
.gp-btn--primary:hover:not(:disabled) { background: var(--db-brand-hover); transform: translateY(-1px); }
.gp-btn--primary:active:not(:disabled) { transform: translateY(0); }
.gp-btn--secondary { background: var(--db-card); color: var(--db-ink); border-color: var(--db-border); }
.gp-btn--secondary:hover:not(:disabled) { border-color: var(--db-muted-2); background: var(--db-faint); }
.gp-btn--ghost { background: transparent; color: var(--db-brand-deep); }
.gp-btn--ghost:hover:not(:disabled) { background: var(--db-brand-soft); }
.gp-btn--on-dark { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.18); box-shadow: none; }
.gp-btn--on-dark:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.gp-btn--lg { font-size: var(--text-md); padding: 15px 26px; min-height: 52px; }
.gp-btn--sm { font-size: var(--text-sm); padding: 8px 14px; min-height: 38px; }
.gp-btn--block { display: flex; width: 100%; }
/* ----------------------------------------------------------------------------
7. CARDS
------------------------------------------------------------------------- */
.gp-card {
background: var(--db-card);
border: 1px solid var(--db-border);
border-radius: var(--db-radius-card);
box-shadow: var(--db-shadow-sm);
}
.gp-card--pad { padding: var(--space-6); }
.gp-card--flat { box-shadow: none; }
.gp-card--soft { background: var(--db-faint); border-color: var(--db-border-soft); box-shadow: none; }
.gp-card--interactive { transition: transform var(--db-dur) var(--db-ease), box-shadow var(--db-dur) var(--db-ease), border-color var(--db-dur) var(--db-ease); }
.gp-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--db-shadow-md); border-color: var(--db-border); }
.gp-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 14px;
background: var(--db-brand-soft);
color: var(--db-brand-deep);
font-size: 1.35rem;
}
/* ----------------------------------------------------------------------------
8. FORMS
------------------------------------------------------------------------- */
.gp-field { display: block; margin-bottom: var(--space-4); }
.gp-label {
display: block;
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--db-muted);
margin-bottom: 6px;
}
.gp-input, .gp-textarea, .gp-select {
display: block;
width: 100%;
font-family: inherit;
font-size: var(--text-md);
color: var(--db-ink);
background: var(--db-card);
border: 1.5px solid var(--db-border);
border-radius: var(--db-radius-sm);
padding: 12px 14px;
transition: border-color var(--db-dur) var(--db-ease), box-shadow var(--db-dur) var(--db-ease);
}
.gp-input::placeholder, .gp-textarea::placeholder { color: var(--db-muted-2); }
.gp-input:focus, .gp-textarea:focus, .gp-select:focus {
outline: none;
border-color: var(--db-brand);
box-shadow: 0 0 0 3px var(--db-brand-soft);
}
.gp-textarea { resize: vertical; min-height: 96px; }
.gp-help { font-size: var(--text-xs); color: var(--db-muted); margin-top: 6px; }
.gp-help--error { color: var(--db-danger-deep); }
/* ----------------------------------------------------------------------------
9. STATUS PILLS / BADGES
------------------------------------------------------------------------- */
.gp-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 700;
line-height: 1;
padding: 5px 11px;
border-radius: var(--db-radius-pill);
border: 1px solid var(--db-border);
background: var(--db-faint);
color: var(--db-muted);
}
.gp-pill--brand { background: var(--db-brand-soft); color: var(--db-brand-deep); border-color: #F9D6D7; }
.gp-pill--success { background: var(--db-success-soft); color: var(--db-success); border-color: var(--db-success-border); }
.gp-pill--warning { background: var(--db-warning-soft); color: var(--db-warning); border-color: var(--db-warning-border); }
.gp-pill--danger { background: var(--db-danger-soft); color: var(--db-danger-deep); border-color: var(--db-danger-border); }
/* ----------------------------------------------------------------------------
10. AUTH SURFACE (dark) — matches the portal redesigned login screen
------------------------------------------------------------------------- */
.gp-auth {
position: fixed;
inset: 0;
overflow: auto;
background: linear-gradient(135deg, #101725 0%, #161D30 60%, #101725 100%);
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
}
.gp-auth-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 20px;
padding: 40px 34px;
width: 100%;
max-width: 420px;
box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.gp-auth-logo { text-align: center; margin-bottom: 28px; }
.gp-auth-logo .gp-logo { color: #fff; font-size: 1.9rem; }
.gp-auth-logo .gp-logo span { color: var(--db-brand); }
.gp-auth-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.4); margin-top: 4px; }
.gp-auth-title { color: #fff; font-size: 1.15rem; font-weight: 700; text-align: center; margin-bottom: 22px; letter-spacing: -0.01em; }
.gp-auth-label {
display: block; font-size: var(--text-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
color: rgba(255,255,255,0.42); margin-bottom: 6px;
}
.gp-auth-input {
display: block; width: 100%;
background: rgba(255,255,255,0.07);
border: 1.5px solid rgba(255,255,255,0.10);
border-radius: 10px;
padding: 13px 16px;
font-size: var(--text-md); color: #fff; font-family: inherit;
outline: none; transition: border-color var(--db-dur) var(--db-ease);
}
.gp-auth-input:focus { border-color: var(--db-brand); }
.gp-auth-input::placeholder { color: rgba(255,255,255,0.28); }
.gp-auth-btn {
display: block; width: 100%;
background: var(--db-brand); color: #fff;
font-family: inherit; font-size: var(--text-md); font-weight: 700;
padding: 14px; border: none; border-radius: 10px; cursor: pointer;
transition: background var(--db-dur) var(--db-ease); min-height: 48px;
}
.gp-auth-btn:hover:not(:disabled) { background: var(--db-brand-hover); }
.gp-auth-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.gp-auth-msg { margin-top: 14px; font-size: var(--text-sm); text-align: center; color: rgba(255,255,255,0.75); }
.gp-auth-msg--success { color: #4ADE80; }
.gp-auth-msg--error { color: #F0A9AB; }
.gp-auth-note { text-align: center; margin-top: 22px; font-size: var(--text-sm); color: rgba(255,255,255,0.5); }
.gp-auth-note a { color: rgba(255,255,255,0.85); font-weight: 600; }
.gp-auth-note button { background: none; border: none; cursor: pointer; font: inherit; }
/* Split-hero, full-bleed: form LEFT, value panel RIGHT. Opt in with
.gp-auth--split on the .gp-auth container; add .gp-auth--compact for short
forms (login, forgot, reset) that should be capped narrow and vertically
centered. A tall form (signup) uses .gp-auth--split alone — its column scrolls
via .gp-auth while the value panel stays pinned (position:sticky). Collapses to
a stacked card ≤900px with the value panel on top. Mirrors the portal's
public/app/portal/shared/css/01-core.css split block — KEEP THE TWO IN SYNC.
NB: keep overflow:visible on every ancestor between the sticky hero and
.gp-auth (the scroll container) — an overflow:hidden anywhere breaks sticky. */
.gp-auth.gp-auth--split { align-items: start; padding: 0; }
.gp-auth-card--split { max-width: none; width: 100%; padding: 0; border: none; border-radius: 0; overflow: visible; }
/* 3/5 form (left) · 2/5 value panel (right). */
.gp-auth-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.gp-auth-formcol { order: 1; padding: clamp(40px, 7vh, 88px) clamp(28px, 4vw, 64px); }
.gp-auth-formcol > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.gp-auth-title--form { text-align: left; margin-bottom: 20px; }
/* compact: short forms capped narrower + vertically centered in the full-height column */
.gp-auth--compact .gp-auth-formcol { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.gp-auth--compact .gp-auth-formcol > * { max-width: 400px; }
/* RIGHT: value panel — pinned full-height, vertically centered. */
.gp-auth-hero {
order: 2; align-self: start;
position: sticky; top: 0; height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: clamp(40px, 7vh, 88px) clamp(28px, 2.5vw, 40px);
border-left: 1px solid rgba(255,255,255,0.08);
background:
linear-gradient(158deg, rgba(222,42,46,0.16), rgba(222,42,46,0.02) 55%, transparent),
rgba(255,255,255,0.02);
}
.gp-auth-hero-inner { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.gp-auth-logo--hero { text-align: left; margin-bottom: 0; }
.gp-auth-hero-head {
font-size: 1.4rem; font-weight: 800; line-height: 1.16;
letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance;
}
.gp-auth-hero-head b { color: var(--db-brand); }
.gp-auth-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.gp-auth-benefits li { display: flex; gap: 12px; align-items: center; font-size: 0.84rem; line-height: 1.45; color: rgba(255,255,255,0.72); }
.gp-auth-benefits li b { color: #fff; font-weight: 700; }
.gp-auth-benefit-ic {
flex: none; width: 34px; height: 34px; border-radius: 9px;
display: grid; place-items: center; font-size: 1rem;
background: rgba(222,42,46,0.14); border: 1px solid rgba(222,42,46,0.30);
}
.gp-auth-hero-trust {
padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 0.72rem; color: rgba(255,255,255,0.5); line-height: 1.5;
}
/* ≤900px: stack into a centered card, value panel on top. */
@media (max-width: 900px) {
.gp-auth.gp-auth--split {
align-items: flex-start;
padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
}
.gp-auth-card--split {
max-width: 460px; margin: 0 auto;
border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; overflow: hidden;
}
.gp-auth-split { grid-template-columns: 1fr; }
.gp-auth-hero {
order: 0; position: static; height: auto; align-self: auto;
border-left: none; border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 30px 28px;
}
.gp-auth-hero-inner { max-width: none; gap: 16px; }
.gp-auth-hero-head { font-size: 1.3rem; }
.gp-auth-formcol { order: 1; padding: 28px 26px; }
.gp-auth-formcol > * { max-width: none; }
.gp-auth--compact .gp-auth-formcol { min-height: auto; display: block; }
.gp-auth--compact .gp-auth-formcol > * { max-width: none; }
}
@media (max-width: 480px) {
.gp-auth--split .gp-auth-hero { padding: 24px 22px; }
.gp-auth--split .gp-auth-hero-inner { gap: 14px; }
.gp-auth--split .gp-auth-formcol { padding: 24px 22px; }
}
/* ----------------------------------------------------------------------------
11. FOOTER
------------------------------------------------------------------------- */
.gp-footer {
background: #101725;
color: rgba(255,255,255,0.7);
padding-block: var(--space-12);
}
.gp-footer a { color: rgba(255,255,255,0.7); }
.gp-footer a:hover { color: #fff; }
/* ----------------------------------------------------------------------------
12. DATA TABLE (DataDisplay.Table — COMPONENT_LIBRARY §9.7, needed by every
admin console). Wrap the in a .gp-table-wrap so
wide tables scroll inside their own container instead of the page.
------------------------------------------------------------------------- */
.gp-table-wrap {
overflow-x: auto;
background: var(--db-card);
border: 1px solid var(--db-border);
border-radius: var(--db-radius-card);
box-shadow: var(--db-shadow-sm);
}
.gp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gp-table th {
text-align: left;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--db-muted);
background: var(--db-faint);
padding: 10px 14px;
border-bottom: 1px solid var(--db-border);
white-space: nowrap;
}
.gp-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--db-border-soft);
color: var(--db-ink);
vertical-align: middle;
}
.gp-table tbody tr:last-child td { border-bottom: none; }
.gp-table tbody tr:hover { background: var(--db-faint); }
/* Sticky header for tall scrollable lists (give .gp-table-wrap a max-height). */
.gp-table--sticky th { position: sticky; top: 0; z-index: 1; }
/* Numeric / action columns. */
.gp-table .gp-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.gp-table .gp-td-actions { text-align: right; white-space: nowrap; }
/* ----------------------------------------------------------------------------
13. UTILITIES
------------------------------------------------------------------------- */
.gp-muted { color: var(--db-muted); }
.gp-brand-text { color: var(--db-brand-deep); }
.gp-hide { display: none !important; }
.gp-mt-0 { margin-top: 0 !important; }
.gp-lead { font-size: var(--text-lg); color: var(--db-muted); line-height: 1.6; }
/* ----------------------------------------------------------------------------
14. MOTION / ACCESSIBILITY
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gp *, .gp *::before, .gp *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}