/* =============================================================================
ZANZA FARMS — BRAND DESIGN SYSTEM
Reusable token + component layer for the Egg-cel Layers Farming System.
Source of truth: ui_skill_design_guard.md (§1–4) + ui_skill_design_requirement.md
Brand: Zanza Brand Guidelines.pdf (dark olive / leaf green / earth brown, off-white
canvas, Inter for headings, Manrope for body).
-----------------------------------------------------------------------------
Fonts: link Inter + Manrope in the host page . Fallbacks below keep the
system usable offline.
============================================================================= */
/* 1. CORE TOKENS ----------------------------------------------------------- */
:root {
/* Palette (guard §1) */
--canvas-bg: #F1F1EB; /* Off-white paper — full background */
--surface-core: #FFFFFF; /* Cards, panels, modals */
--border-color: #E4E3D6; /* Neutral hairline — structural dividers */
--border-color-strong: rgba(62, 82, 38, 0.28); /* Olive-tinted border — interactive controls */
--primary-olive: #3E5226; /* Main brand — headings, primary actions, nominal state */
--primary-olive-hover: #2E3E1C; /* Pressed / hover-darken of primary olive */
--leaf-green: #ADC644; /* Accent — success highlights, active nav, progress fill */
--leaf-green-tint: #EEF3D8; /* Light wash of leaf green — hover backgrounds */
--earth-brown: #594733; /* Secondary accent — category tags, dividers */
--critical-red: #B3261E; /* Errors, hardware locks, allocation faults */
--amber: #B45309; /* Warning state (guard §4 state matrix) */
--text-primary: #23291B; /* Near-black olive — headings & primary text */
--text-muted: #6E7568; /* Muted sage-grey — inactive labels, secondary params */
/* Typography (guard §2) — Inter carries hierarchy, Manrope carries body/UI text */
--font-heading: 'Inter', 'SF Pro Display', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* Geometry — warm, organic (guard §3.1: soft rounding) */
--radius: 10px;
--radius-sm: 6px;
--border-hairline: 1px solid var(--border-color);
/* Touch ergonomics (design_requirement §1) */
--touch-min: 56px;
--grid-gap: 1rem;
/* Elevation + focus rings (guard §4) — soft shadows replace neon glows */
--shadow-sm: 0 1px 2px rgba(35, 41, 27, 0.06), 0 1px 3px rgba(35, 41, 27, 0.08);
--shadow-md: 0 4px 10px rgba(35, 41, 27, 0.08), 0 2px 4px rgba(35, 41, 27, 0.06);
--ring-focus: 0 0 0 3px rgba(62, 82, 38, 0.18); /* olive — inputs/buttons on focus */
--ring-hover-accent: 0 0 0 3px rgba(173, 198, 68, 0.35); /* leaf — hover on interactive cards */
--ring-selected: 0 0 0 2px rgba(62, 82, 38, 0.25); /* olive — selected card */
--ring-critical: 0 0 0 3px rgba(179, 38, 30, 0.15); /* red — lockout box */
/* Default card gradient (guard §4) */
--card-gradient: linear-gradient(180deg, #FFFFFF 0%, #FAFAF5 100%);
}
/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body.z-body {
margin: 0;
background: var(--canvas-bg);
color: var(--text-primary);
/* Base runs on Manrope (guard §2); Inter is reserved for headings/sub-headings
and prominent numeric readouts so the two-typeface brand pairing stays legible
rather than decorative. */
font-family: var(--font-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
/* 3. TYPOGRAPHY ------------------------------------------------------------ */
.z-h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--text-primary); }
.z-h2 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.005em; margin: 0; color: var(--text-primary); }
.z-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Tabular numeric readout (batch codes, ids) — kept on the heading face for
visual weight, without reintroducing a monospace/telemetry typeface. */
.z-mono { font-family: var(--font-heading); font-variant-numeric: tabular-nums; font-weight: 600; }
.z-muted { color: var(--text-muted); font-weight: 300; }
/* Prominent metric readout */
.z-metric {
font-family: var(--font-heading);
font-variant-numeric: tabular-nums;
font-size: 2.25rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
}
.z-metric--emerald { color: var(--primary-olive); }
.z-metric--amber { color: var(--amber); }
.z-metric--red { color: var(--critical-red); }
/* 4. LAYOUT ---------------------------------------------------------------- */
/* Owner dashboard grid (design_requirement §2, Module 3) */
.z-grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--grid-gap);
}
.z-container { max-width: 1440px; margin-inline: auto; padding: 1.5rem; }
.z-container--mobile { max-width: 430px; } /* layer-house terminal target */
/* 5. DATA CARD (guard §3.1) -------------------------------------------------- */
.z-card {
background: var(--card-gradient);
border: var(--border-hairline);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.25rem;
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.z-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.z-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.z-card__panel {
border-top: var(--border-hairline);
padding-top: 0.85rem;
margin-top: 0.85rem;
}
/* Selected / active — outer olive ring (guard §3.1) */
.z-card.is-selected { border-color: var(--primary-olive); box-shadow: var(--ring-selected); }
/* Status left-border banding (design_requirement §2.3 / guard §4) */
.z-card--nominal { border-left: 4px solid var(--primary-olive); }
.z-card--warning { border-left: 4px solid var(--amber); }
.z-card--critical { border-left: 4px solid var(--critical-red); }
/* 6. STATUS BADGE ---------------------------------------------------------- */
.z-badge {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid currentColor;
white-space: nowrap;
}
.z-badge--nominal { color: var(--primary-olive); }
.z-badge--warning { color: var(--amber); }
.z-badge--critical { color: var(--critical-red); }
/* 7. RUNWAY PROGRESS BAR (design_requirement §2, Module 3) ------------------ */
.z-runway {
width: 100%;
height: 0.5rem;
background: var(--canvas-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
}
.z-runway__fill {
height: 100%;
background: linear-gradient(90deg, var(--leaf-green), var(--primary-olive));
}
.z-runway__fill--warning { background: linear-gradient(90deg, #EBCB8E, var(--amber)); }
.z-runway__fill--critical { background: linear-gradient(90deg, #E7ABA5, var(--critical-red)); }
/* 8. BUTTONS --------------------------------------------------------------- */
.z-btn {
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
min-height: var(--touch-min);
padding: 0 1.5rem;
color: var(--primary-olive);
background: var(--surface-core);
border: 1px solid var(--border-color-strong);
border-radius: var(--radius);
cursor: pointer;
transition: background 0.1s ease, color 0.1s ease, box-shadow 0.18s ease;
}
.z-btn:hover { background: var(--leaf-green-tint); box-shadow: var(--shadow-sm); }
/* High-contrast press inversion (guard §3.2 / design_requirement §2.1) */
.z-btn:active,
.z-btn.is-pressed {
background: var(--primary-olive);
color: #FFFFFF;
border-color: var(--primary-olive);
}
.z-btn--primary {
background: var(--primary-olive);
color: #FFFFFF;
border-color: var(--primary-olive);
}
.z-btn--primary:hover { background: var(--primary-olive-hover); }
.z-btn--primary:active { background: var(--primary-olive-hover); }
.z-btn--danger { color: var(--critical-red); border-color: var(--critical-red); }
.z-btn--danger:active { background: var(--critical-red); color: #FFFFFF; }
.z-btn--block { width: 100%; }
/* 9. HIGH-CONTRAST STEPPER TERMINAL (guard §3.2 / Module 1) ----------------- */
.z-stepper { display: grid; gap: 0.75rem; }
.z-stepper__row {
display: grid;
grid-template-columns: var(--touch-min) 1fr var(--touch-min);
gap: 0.75rem;
align-items: stretch;
}
.z-stepper__btn {
min-height: var(--touch-min);
min-width: var(--touch-min);
font-family: var(--font-heading);
font-variant-numeric: tabular-nums;
font-size: 1.75rem;
color: var(--primary-olive);
background: var(--surface-core);
border: 1px solid var(--border-color-strong);
border-radius: var(--radius);
cursor: pointer;
transition: background 0.06s ease, color 0.06s ease;
}
.z-stepper__btn:active { background: var(--primary-olive); color: #FFFFFF; }
.z-stepper__value {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-variant-numeric: tabular-nums;
font-size: 2rem; /* readout ≥ 2rem (design_requirement §2.1) */
background: var(--canvas-bg);
border: 1px solid var(--border-color-strong);
border-radius: var(--radius);
color: var(--text-primary);
}
/* Big ± helper blocks (± 10) */
.z-stepper__helper {
min-height: var(--touch-min);
width: 100%;
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--text-muted);
background: var(--surface-core);
border: 1px solid var(--border-color-strong);
border-radius: var(--radius);
cursor: pointer;
}
.z-stepper__helper:active { background: var(--primary-olive); color: #FFFFFF; }
/* 10. NUMERIC KEYPAD ------------------------------------------------------- */
.z-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
max-width: 320px;
}
.z-key {
min-height: var(--touch-min);
font-family: var(--font-heading);
font-variant-numeric: tabular-nums;
font-size: 1.4rem;
color: var(--text-primary);
background: var(--surface-core);
border: 1px solid var(--border-color-strong);
border-radius: var(--radius);
cursor: pointer;
}
.z-key:active { background: var(--primary-olive); color: #FFFFFF; }
/* 11. PIN GRID (guard §3.3 / Module 2) ------------------------------------- */
.z-pin { display: flex; gap: 0.75rem; justify-content: center; }
.z-pin__input {
width: var(--touch-min);
height: var(--touch-min);
text-align: center;
font-family: var(--font-heading);
font-variant-numeric: tabular-nums;
font-size: 1.75rem;
color: var(--text-primary);
background: var(--canvas-bg);
border: 1px solid var(--border-color-strong);
border-radius: var(--radius);
caret-color: var(--primary-olive);
}
.z-pin__input:focus { outline: none; border-color: var(--primary-olive); box-shadow: var(--ring-focus); }
/* 12. SYSTEM LOCKOUT OVERLAY (guard §3.3 / Module 2) ----------------------- */
.z-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(35, 41, 27, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.z-overlay.is-open { display: flex; }
.z-overlay__box {
width: min(100%, 380px);
background: var(--surface-core);
border: 1px solid var(--critical-red);
border-radius: var(--radius);
box-shadow: var(--ring-critical);
padding: 1.75rem;
text-align: center;
}
.z-overlay__box.is-shaking { animation: z-shake 0.3s ease; }
@keyframes z-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
/* 13. DATA TABLE — RFID culling ledger (Module 4) -------------------------- */
.z-table-wrap { overflow-x: auto; border: var(--border-hairline); border-radius: var(--radius); }
.z-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.z-table th, .z-table td { padding: 0.7rem 0.9rem; text-align: left; white-space: nowrap; }
.z-table thead th {
color: var(--text-muted);
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.08em;
border-bottom: var(--border-hairline);
}
.z-table tbody tr { border-bottom: 1px solid rgba(62,82,38,0.12); transition: color 0.15s ease; }
.z-table tbody tr:hover { background: var(--leaf-green-tint); }
/* Sticky ChickID column */
.z-table .z-sticky-col { position: sticky; left: 0; background: var(--surface-core); }
.z-table tr.is-flagged td { color: var(--critical-red); }
/* 14. OFFLINE BANNER (Module 1) -------------------------------------------- */
.z-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 1rem;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.05em;
border-radius: var(--radius);
color: var(--text-primary);
background: var(--leaf-green); /* online = leaf green */
}
.z-banner.is-offline { background: var(--text-muted); color: var(--surface-core); }
.z-banner__pill { padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); background: rgba(0,0,0,0.15); }
/* 15. SWATCH (showcase helper) --------------------------------------------- */
.z-swatch { border: var(--border-hairline); border-radius: var(--radius); overflow: hidden; }
.z-swatch__chip { height: 84px; }
.z-swatch__meta { padding: 0.6rem 0.75rem; background: var(--surface-core); }
.z-swatch__hex { font-family: var(--font-heading); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.z-swatch__name { font-size: 0.75rem; color: var(--text-muted); }
/* =============================================================================
16. APP SHELL (prototype layer)
Screen-level scaffolding for the Egg-cel prototype pages. Reusable; graduates
into the production theme when the Gin/HTMX templates are built.
============================================================================= */
/* App bar */
.z-appbar {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: 1rem;
padding: 0.85rem 1.25rem;
background: rgba(241,241,235,0.9); backdrop-filter: blur(8px);
border-bottom: var(--border-hairline);
}
.z-appbar__brand { display: inline-flex; align-items: center; }
.z-appbar__brand img { height: 28px; width: auto; display: block; }
.z-appbar__persona { margin-left: auto; }
/* Back link */
.z-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.z-back:hover { color: var(--primary-olive); }
/* Navigation hub cards */
.z-hub-card { display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: inherit; cursor: pointer; }
.z-hub-card:hover { border-color: var(--primary-olive); box-shadow: var(--ring-hover-accent); }
.z-hub-card__idx { font-family: var(--font-heading); font-variant-numeric: tabular-nums; color: var(--primary-olive); font-size: 0.8rem; }
.z-hub-card__title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--text-primary); }
.z-hub-card__desc { color: var(--text-muted); font-weight: 300; font-size: 0.9rem; }
.z-hub-card__go { margin-top: auto; color: var(--primary-olive); font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; }
/* Segmented control (entry-type switch) */
.z-seg { display: grid; grid-auto-flow: column; gap: 0.4rem; padding: 0.3rem; background: var(--surface-core); border: var(--border-hairline); border-radius: var(--radius); }
.z-seg__btn {
min-height: 44px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-muted); background: transparent; transition: background 0.1s ease, color 0.1s ease;
}
.z-seg__btn.is-active { background: var(--primary-olive); color: #FFFFFF; }
/* Panels */
.z-panel[hidden] { display: none; }
/* Form field */
.z-field { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
/* Selection chips (no dropdowns) */
.z-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.z-chip {
min-height: 44px; padding: 0 1rem; cursor: pointer;
font-family: var(--font-body); font-size: 0.9rem;
color: var(--text-primary); background: var(--surface-core);
border: var(--border-hairline); border-radius: var(--radius);
}
.z-chip.is-active { background: var(--primary-olive); color: #FFFFFF; border-color: var(--primary-olive); }
/* Cause / option grid */
.z-optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.z-opt {
min-height: var(--touch-min); cursor: pointer;
font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.04em;
color: var(--text-muted); background: var(--surface-core);
border: var(--border-hairline); border-radius: var(--radius);
}
.z-opt.is-active { color: var(--critical-red); border-color: var(--critical-red); }
/* KPI strip */
.z-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--grid-gap); }
.z-kpi { background: var(--card-gradient); border: var(--border-hairline); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; }
.z-kpi__label { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.z-kpi__val { font-family: var(--font-heading); font-variant-numeric: tabular-nums; font-size: 1.75rem; margin-top: 0.35rem; color: var(--text-primary); }
/* Alert banner (vaccination / stock) */
.z-alert { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--radius); border-left: 4px solid var(--amber); background: var(--surface-core); }
.z-alert--critical { border-left-color: var(--critical-red); }
.z-alert__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.z-alert--critical .z-alert__dot { background: var(--critical-red); }
/* Dimmed terminal (behind lockout) */
.z-terminal-dim { filter: blur(2px) brightness(0.92); pointer-events: none; user-select: none; }
/* Swipe row affordance */
.z-table tbody tr.cull-row { cursor: grab; touch-action: pan-y; }
.z-table tbody tr.cull-row.is-flagged td { color: var(--critical-red); }
.z-flag-tag { color: var(--critical-red); font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; }
/* Utility */
.z-stack { display: grid; gap: 1rem; }
.z-row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.z-tag { font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--text-muted); border-radius: var(--radius-sm); padding: 0.15rem 0.45rem; }
.z-tag--emerald { color: var(--primary-olive); border-color: var(--border-color-strong); }
/* =============================================================================
17. JOURNEY LAYER — login, breadcrumb, tiles, toast
============================================================================= */
/* Breadcrumb / journey trail */
.z-crumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); text-transform: uppercase; flex-wrap: wrap; }
.z-crumb a { color: var(--text-muted); text-decoration: none; }
.z-crumb a:hover { color: var(--primary-olive); }
.z-crumb__cur { color: var(--primary-olive); }
.z-crumb__sep { opacity: 0.4; }
/* Text input */
.z-input {
width: 100%; min-height: var(--touch-min); padding: 0 1rem;
background: var(--canvas-bg); border: var(--border-hairline); border-radius: var(--radius);
color: var(--text-primary); font-family: var(--font-body); font-size: 1rem;
}
.z-input::placeholder { color: var(--text-muted); }
.z-input:focus { outline: none; border-color: var(--primary-olive); box-shadow: var(--ring-focus); }
/* Login shell */
.z-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.z-login__box { width: min(100%, 400px); }
/* Logo lockup wrapper — houses the Zanza logo image (replaces the former text mark) */
.z-logo { display: inline-flex; align-items: center; justify-content: center; }
.z-logo img { height: 56px; width: auto; display: block; margin: 0 auto; }
/* Logout / persona action */
.z-logout { color: var(--text-muted); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.z-logout:hover { color: var(--critical-red); }
/* Task tile (reuses card; icon head) */
.z-tile__icn { font-family: var(--font-heading); font-size: 1.4rem; color: var(--primary-olive); }
/* Success toast / confirmation banner */
.z-toast {
display: none; align-items: center; gap: 0.6rem;
padding: 0.8rem 1rem; border-radius: var(--radius);
border-left: 4px solid var(--leaf-green); background: var(--surface-core);
font-family: var(--font-body); font-size: 0.85rem; color: var(--text-primary);
}
.z-toast.is-shown { display: flex; }
/* Greeting */
.z-greet { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--text-primary); }
/* =============================================================================
18. LIST TOOLS — search & filter (STANDARD on every data table/list)
Any list that can exceed ~10 rows must ship with these. Markup contract:
…
============================================================================= */
.z-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.z-search {
display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 200px;
padding: 0 0.9rem; min-height: 44px;
background: var(--canvas-bg); border: var(--border-hairline); border-radius: var(--radius);
}
.z-search:focus-within { border-color: var(--primary-olive); box-shadow: var(--ring-focus); }
.z-search__icn { color: var(--text-muted); font-size: 1rem; }
.z-search__input { flex: 1; border: 0; background: transparent; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; outline: none; }
.z-search__input::placeholder { color: var(--text-muted); }
.z-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.z-filters .z-chip { min-height: 44px; padding: 0 0.9rem; font-size: 0.8rem; }
.z-count { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.05em; white-space: nowrap; margin-left: auto; }
/* =============================================================================
19. SEARCHABLE PICKER — for selecting from sets that can exceed ~20 options
(users, roles, permissions/scopes, houses, batches…). A search box above a
scrollable option list. Selection still uses .z-chips (single) / [data-multi].
Markup:
============================================================================= */
.z-search--sm { min-height: 42px; }
.z-chips--scroll {
max-height: 176px; overflow-y: auto; align-content: flex-start;
padding: 0.4rem; border: var(--border-hairline); border-radius: var(--radius); background: var(--canvas-bg);
}
.z-chip[hidden] { display: none; }