/* * ============================================================ * ZENNA PLATFORM — SHARED DESIGN TOKENS * Rokstars Global HRM | zenna.rokstarshrm.com * * This file is the single source of truth for all design * decisions across the platform. Both the dark candidate * theme and the light admin/client theme pull from these * tokens. Never hardcode a colour, font, or spacing value * in a component file — always reference a token here. * * Import order in every HTML file: * 1. zenna-tokens.css (this file — always first) * 2. zenna-theme-dark.css (candidate-facing pages) * OR * zenna-theme-light.css (admin and client panels) * 3. Component-specific styles inline or in a page file * * WCAG 2.1 AA compliance notes are included inline. * All colour pairs listed have been verified to meet * minimum 4.5:1 contrast ratio for normal text and * 3:1 for large text and UI components. * ============================================================ */ :root { /* ---------------------------------------------------------- ROKSTARS BRAND PALETTE These never change regardless of theme. ---------------------------------------------------------- */ /* Primary blues — from Rokstars logo */ --brand-navy: #0D1F3C; /* deepest navy — sidebar, headers */ --brand-blue: #2B7FE0; /* primary action blue */ --brand-blue-bright: #4CA3FF; /* accent / hover state */ --brand-blue-dim: rgba(43, 127, 224, 0.12); /* Cyan — Zenna's accent colour, sub-brand identity */ --brand-cyan: #00C8D7; --brand-cyan-dim: rgba(0, 200, 215, 0.12); --brand-cyan-glow: rgba(0, 200, 215, 0.4); --brand-cyan-border: rgba(0, 200, 215, 0.3); /* Gradient — primary CTA, always black text on top */ --brand-gradient: linear-gradient(135deg, #4CA3FF 0%, #00C8D7 100%); --brand-gradient-hover: linear-gradient(135deg, #65b4ff 0%, #1dd8e8 100%); /* ---------------------------------------------------------- SEMANTIC COLOURS Shared across both themes. ---------------------------------------------------------- */ --color-success: #00D48A; --color-success-dim: rgba(0, 212, 138, 0.12); --color-success-border: rgba(0, 212, 138, 0.3); --color-warning: #F5A623; --color-warning-dim: rgba(245, 166, 35, 0.12); --color-warning-border: rgba(245, 166, 35, 0.3); --color-error: #FF5252; --color-error-dim: rgba(255, 82, 82, 0.08); --color-error-border: rgba(255, 82, 82, 0.3); --color-error-text: #FF7575; /* lighter for readability on dark surfaces */ /* Score system — always shown as number + colour + text label per WCAG: colour is never the sole indicator */ --score-strong-bg: rgba(0, 212, 138, 0.12); --score-strong-text: #00D48A; --score-strong-border:rgba(0, 212, 138, 0.3); --score-potential-bg: rgba(245, 166, 35, 0.12); --score-potential-text: #F5A623; --score-potential-border: rgba(245, 166, 35, 0.3); --score-not-bg: rgba(255, 82, 82, 0.08); --score-not-text: #FF7575; --score-not-border: rgba(255, 82, 82, 0.3); /* ---------------------------------------------------------- TYPOGRAPHY Unbounded -- heading font: page titles and section headings Syne -- display UI face: buttons, nav, labels, avatars, stat numbers Outfit -- body copy, form labels, data, descriptions All three are loaded from Google Fonts in the page head. Heading font is deliberately separate from the UI face: change --font-heading below to restyle every heading platform-wide. ---------------------------------------------------------- */ --font-heading: 'Unbounded', 'Syne', sans-serif; --font-display: 'Syne', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Type scale — fluid where indicated */ --text-xs: 0.68rem; /* 10.9px — labels, badges, eyebrows */ --text-sm: 0.75rem; /* 12px — hints, footnotes */ --text-base: 0.875rem; /* 14px — body default */ --text-md: 1rem; /* 16px — comfortable reading */ --text-lg: 1.125rem; /* 18px — section intros */ --text-xl: 1.5rem; /* 24px — card headings */ --text-2xl: 2rem; /* 32px — page headings */ --text-3xl: clamp(2rem, 4vw, 3rem); /* hero headings */ --text-4xl: clamp(2.5rem, 5vw, 4rem); /* landing hero */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.65; --leading-relaxed:1.8; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; /* ---------------------------------------------------------- SPACING SCALE Used for padding, margin, gap throughout. ---------------------------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* pill shape */ /* ---------------------------------------------------------- SHADOWS — light theme (used in admin/client panels) ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(13, 31, 60, 0.06); --shadow-sm: 0 2px 8px rgba(13, 31, 60, 0.08); --shadow-md: 0 4px 16px rgba(13, 31, 60, 0.1); --shadow-lg: 0 8px 32px rgba(13, 31, 60, 0.12); --shadow-xl: 0 16px 48px rgba(13, 31, 60, 0.15); /* Brand glow shadows — used on primary CTAs in both themes */ --shadow-cyan: 0 4px 20px rgba(0, 200, 215, 0.25); --shadow-cyan-lg: 0 8px 32px rgba(0, 200, 215, 0.4); --shadow-blue: 0 4px 20px rgba(43, 127, 224, 0.25); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 350ms; /* ---------------------------------------------------------- FOCUS RING Identical in both themes — cyan always used. Never remove focus indicators. WCAG 2.4.7. ---------------------------------------------------------- */ --focus-ring: 0 0 0 2px #00C8D7; --focus-ring-offset: 0 0 0 4px rgba(0, 200, 215, 0.25); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --max-width-content: 1120px; /* main content columns */ --max-width-form: 720px; /* forms and single-column content */ --max-width-narrow: 560px; /* centered text blocks */ --sidebar-width: 260px; /* admin/client sidebar */ --header-height: 60px; /* sticky header height */ /* ---------------------------------------------------------- Z-INDEX SCALE ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-skip: 9999; /* ---------------------------------------------------------- PIPELINE STAGE COLOURS Used in pipeline views — always shown with text label, never colour alone. WCAG 1.4.1. ---------------------------------------------------------- */ --stage-sourced-bg: rgba(74, 81, 104, 0.15); --stage-sourced-text: #8B93B0; --stage-sourced-border: rgba(139, 147, 176, 0.3); --stage-contacted-bg: rgba(43, 127, 224, 0.12); --stage-contacted-text: #4CA3FF; --stage-contacted-border:rgba(76, 163, 255, 0.3); --stage-screening-bg: rgba(245, 166, 35, 0.12); --stage-screening-text: #F5A623; --stage-screening-border:rgba(245, 166, 35, 0.3); --stage-shortlisted-bg: rgba(0, 200, 215, 0.12); --stage-shortlisted-text:#00C8D7; --stage-shortlisted-border: rgba(0, 200, 215, 0.3); --stage-interview-bg: rgba(138, 43, 226, 0.12); --stage-interview-text: #B47FFF; --stage-interview-border:rgba(138, 43, 226, 0.3); --stage-hired-bg: rgba(0, 212, 138, 0.12); --stage-hired-text: #00D48A; --stage-hired-border: rgba(0, 212, 138, 0.3); --stage-archived-bg: rgba(74, 81, 104, 0.08); --stage-archived-text: #4A5168; --stage-archived-border: rgba(74, 81, 104, 0.2); } /* ============================================================ DARK THEME TOKENS Applied to candidate-facing pages. Page background is near-black — "in the black." ============================================================ */ html[data-theme="dark"], .theme-dark { /* Backgrounds */ --bg-page: #08090D; --bg-surface-0: #0B0D16; --bg-surface-1: #111422; --bg-surface-2: #171A2C; --bg-surface-3: #1E2238; /* Borders */ --border-subtle: rgba(255, 255, 255, 0.07); --border-base: rgba(255, 255, 255, 0.11); --border-strong: rgba(76, 163, 255, 0.35); /* Text --text-primary on --bg-page: contrast ratio ~15:1 ✓ --text-secondary on --bg-page: contrast ratio ~5.2:1 ✓ --text-muted: decorative only, not used for content */ --text-primary: #F0F2FF; --text-secondary: #8B93B0; --text-muted: #4A5168; /* Input fields */ --input-bg: #171A2C; --input-bg-focus: #1E2238; --input-border: rgba(255, 255, 255, 0.11); --input-border-focus: #2B7FE0; /* Scrollbar */ --scrollbar-track: #0B0D16; --scrollbar-thumb: #1E2238; } /* ============================================================ LIGHT THEME TOKENS Applied to admin and client-facing panels. Clean and professional — a workspace, not a showcase. Navy sidebar anchors the Rokstars brand identity. ============================================================ */ html[data-theme="light"], .theme-light { /* Backgrounds */ --bg-page: #F4F6FB; /* very light blue-grey — easier on eyes than pure white */ --bg-surface-0: #FFFFFF; /* cards, panels */ --bg-surface-1: #F8F9FC; /* secondary surfaces */ --bg-surface-2: #EEF1F8; /* subtle dividers, zebra rows */ --bg-surface-3: #E4E8F3; /* active states, selected rows */ /* Sidebar — always navy regardless of theme */ --sidebar-bg: #0D1F3C; /* brand navy */ --sidebar-text: rgba(255, 255, 255, 0.75); --sidebar-text-active:#FFFFFF; --sidebar-icon: rgba(255, 255, 255, 0.5); --sidebar-icon-active:#00C8D7; /* brand cyan */ --sidebar-item-hover: rgba(255, 255, 255, 0.06); --sidebar-item-active:rgba(0, 200, 215, 0.15); --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-section-label: rgba(255, 255, 255, 0.35); /* Borders */ --border-subtle: rgba(13, 31, 60, 0.06); --border-base: rgba(13, 31, 60, 0.1); --border-strong: rgba(43, 127, 224, 0.4); /* Text --text-primary on --bg-surface-0 (#FFFFFF): contrast ~13.5:1 ✓ --text-secondary on --bg-surface-0: contrast ~5.8:1 ✓ --text-muted: decorative only, not used for required content */ --text-primary: #0D1F3C; /* brand navy — strong contrast on white */ --text-secondary: #4A5577; --text-muted: #8E97AE; /* Input fields */ --input-bg: #FFFFFF; --input-bg-focus: #FAFBFF; --input-border: rgba(13, 31, 60, 0.15); --input-border-focus: #2B7FE0; /* Scrollbar */ --scrollbar-track: #EEF1F8; --scrollbar-thumb: #C8CEDF; /* ── Aliases ────────────────────────────────────────────────── Admin pages use shorthand variable names throughout. Defined here so pages loading only this file work correctly without a local :root block. ---------------------------------------------------------- */ /* Background aliases */ --bg-page: #F4F6FB; --bg-s0: #FFFFFF; --bg-s1: #F8F9FC; --bg-s2: #EEF1F8; --bg-s3: #E4E8F3; /* Text aliases */ --text-pri: #0D1F3C; --text-sec: #4A5577; --text-mut: #8E97AE; /* Border aliases */ --border-sub: rgba(13, 31, 60, 0.06); --border-bas: rgba(13, 31, 60, 0.10); --border-str: rgba(43, 127, 224, 0.4); /* Input aliases */ --input-bg: #FFFFFF; --input-bdr: rgba(13, 31, 60, 0.15); /* Sidebar aliases */ --sb-bg: #0D1F3C; --sb-text: rgba(255, 255, 255, 0.75); --sb-act: #FFFFFF; --sb-icon: rgba(255, 255, 255, 0.5); --sb-cyan: #00C8D7; --sb-hover: rgba(255, 255, 255, 0.06); --sb-sel: rgba(0, 200, 215, 0.15); --sb-bdr: rgba(255, 255, 255, 0.08); --sb-label: rgba(255, 255, 255, 0.35); /* Semantic colour aliases */ --success: #00D48A; --success-dim: rgba(0, 212, 138, 0.10); --success-border: rgba(0, 212, 138, 0.28); --warning: #F5A623; --warning-dim: rgba(245, 166, 35, 0.10); --warning-border: rgba(245, 166, 35, 0.28); --error: #FF5252; --error-dim: rgba(255, 82, 82, 0.07); --error-border: rgba(255, 82, 82, 0.28); --purple: #B47FFF; --purple-dim: rgba(180, 127, 255, 0.10); --purple-border: rgba(180, 127, 255, 0.28); /* Shadow aliases -- light values */ --shadow-sm: 0 1px 4px rgba(13, 31, 60, 0.07); --shadow-md: 0 4px 16px rgba(13, 31, 60, 0.09); --shadow-lg: 0 8px 32px rgba(13, 31, 60, 0.13); --shadow-cyan: 0 4px 18px rgba(0, 200, 215, 0.22); /* Layout aliases */ --sidebar-w: 260px; --header-h: 60px; } /* ============================================================ DARK ADMIN THEME TOKENS Applied to admin and client panels when dark mode is enabled. Sidebar stays navy — brand identity is preserved. All contrast ratios verified at WCAG AA minimum 4.5:1. ============================================================ */ html[data-theme="dark-admin"] { /* Backgrounds */ --bg-page: #0E1117; /* near-black with slight blue tint */ --bg-surface-0: #161B27; /* cards, panels — contrast with page ✓ */ --bg-surface-1: #1C2333; /* secondary surfaces */ --bg-surface-2: #222B3E; /* subtle dividers, zebra rows */ --bg-surface-3: #2A3550; /* active states, selected rows */ /* Sidebar — stays navy in dark mode too */ --sidebar-bg: #0D1F3C; --sidebar-text: rgba(255, 255, 255, 0.75); --sidebar-text-active:#FFFFFF; --sidebar-icon: rgba(255, 255, 255, 0.5); --sidebar-icon-active:#00C8D7; --sidebar-item-hover: rgba(255, 255, 255, 0.06); --sidebar-item-active:rgba(0, 200, 215, 0.15); --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-section-label: rgba(255, 255, 255, 0.35); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border-base: rgba(255, 255, 255, 0.10); --border-strong: rgba(76, 163, 255, 0.4); /* Text --text-primary on --bg-surface-0: #E8EDF5 on #161B27 — contrast ~10.8:1 ✓ --text-secondary on --bg-surface-0: #8B97B8 on #161B27 — contrast ~4.6:1 ✓ */ --text-primary: #E8EDF5; --text-secondary: #8B97B8; --text-muted: #4A566E; /* Input fields */ --input-bg: #1C2333; --input-bg-focus: #222B3E; --input-border: rgba(255, 255, 255, 0.10); --input-border-focus: #2B7FE0; /* Shadows — softer in dark mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* Scrollbar */ --scrollbar-track: #161B27; --scrollbar-thumb: #2A3550; /* ── Aliases ────────────────────────────────────────────────── Admin pages use shorthand variable names throughout. These map the shorthand names to the dark-admin overrides so every page element responds without page-level changes. ---------------------------------------------------------- */ /* Background aliases */ --bg-page: #0E1117; --bg-s0: #161B27; --bg-s1: #1C2333; --bg-s2: #222B3E; --bg-s3: #2A3550; /* Text aliases */ --text-pri: #E8EDF5; --text-sec: #8B97B8; --text-mut: #4A566E; /* Border aliases */ --border-sub: rgba(255, 255, 255, 0.06); --border-bas: rgba(255, 255, 255, 0.10); --border-str: rgba(76, 163, 255, 0.4); /* Input aliases */ --input-bg: #1C2333; --input-bdr: rgba(255, 255, 255, 0.10); /* Sidebar aliases -- sidebar stays navy in dark mode */ --sb-bg: #0D1F3C; --sb-text: rgba(255, 255, 255, 0.75); --sb-act: #FFFFFF; --sb-icon: rgba(255, 255, 255, 0.5); --sb-cyan: #00C8D7; --sb-hover: rgba(255, 255, 255, 0.06); --sb-sel: rgba(0, 200, 215, 0.15); --sb-bdr: rgba(255, 255, 255, 0.08); --sb-label: rgba(255, 255, 255, 0.35); /* Semantic colour aliases -- these do not change between themes but are listed here for completeness so nothing falls through */ --success: #00D48A; --success-dim: rgba(0, 212, 138, 0.12); --success-border: rgba(0, 212, 138, 0.3); --warning: #F5A623; --warning-dim: rgba(245, 166, 35, 0.12); --warning-border: rgba(245, 166, 35, 0.3); --error: #FF5252; --error-dim: rgba(255, 82, 82, 0.08); --error-border: rgba(255, 82, 82, 0.3); --purple: #B47FFF; --purple-dim: rgba(180, 127, 255, 0.12); --purple-border: rgba(180, 127, 255, 0.3); /* Layout aliases */ --sidebar-w: 260px; --header-h: 60px; } /* ============================================================ GLOBAL BASE STYLES Applied once, shared across both themes. Import this file before any theme file. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg-page); color: var(--text-primary); line-height: var(--leading-normal); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Canonical page heading. Defined ONCE here. Pages must NOT redefine .page-title locally -- delete any local copy and let it inherit this. Uses --font-heading (the platform heading font). */ .page-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--text-pri, var(--text-primary)); letter-spacing: 0; } /* Focus ring — never remove. WCAG 2.4.7. Visible in both themes. Cyan always works against both dark and navy/white backgrounds at required contrast. */ :focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 3px; border-radius: var(--radius-sm); } /* Remove focus ring for mouse users only — keyboard users always see it */ :focus:not(:focus-visible) { outline: none; } img, svg { display: block; max-width: 100%; } /* Visually hidden — accessible text for screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link — visible on keyboard focus, WCAG 2.4.1 */ .skip-link { position: absolute; top: -999px; left: var(--sp-4); background: var(--brand-cyan); color: #000000; font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius-md) var(--radius-md); text-decoration: none; z-index: var(--z-skip); transition: top var(--duration-fast); } .skip-link:focus { top: 0; } /* Screen reader live region — announce dynamic changes */ .live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track, transparent); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, rgba(128,128,128,0.3)); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { opacity: 0.8; } /* ============================================================ SHARED COMPONENT TOKENS Buttons, form fields, badges — used in both themes. ============================================================ */ /* PRIMARY BUTTON Always: gradient background, black text. Black text on cyan/blue gradient: contrast ~8.5:1 ✓ */ .btn-primary { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-wide); color: #000000; background: var(--brand-gradient); padding: 0.65rem 1.5rem; border: none; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease), filter var(--duration-normal); box-shadow: var(--shadow-cyan); } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-cyan-lg); filter: brightness(1.07); } .btn-primary:active:not(:disabled) { transform: translateY(0); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 3px; } .btn-primary--sm { font-size: var(--text-sm); padding: 0.4rem 1rem; } .btn-primary--lg { font-size: var(--text-md); padding: 0.9rem 2.25rem; } /* SECONDARY BUTTON Light theme: navy text on white border — contrast 13.5:1 ✓ Dark theme: light text on dark border — contrast 5.2:1 ✓ */ .btn-secondary { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-normal); color: var(--text-secondary); background: transparent; padding: 0.65rem 1.4rem; border: 1px solid var(--border-base); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; transition: color var(--duration-normal), border-color var(--duration-normal), background var(--duration-normal); } .btn-secondary:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-surface-2); } .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; } .btn-secondary--sm { font-size: var(--text-sm); padding: 0.4rem 0.9rem; } .btn-secondary--lg { font-size: var(--text-md); padding: 0.9rem 1.75rem; } /* DANGER BUTTON */ .btn-danger { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--color-error-text); background: var(--color-error-dim); padding: 0.65rem 1.4rem; border: 1px solid var(--color-error-border); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: filter var(--duration-normal), transform var(--duration-normal); } .btn-danger:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .btn-danger:disabled { opacity: 0.45; cursor: not-allowed; } /* FORM FIELD BASE */ .field-input { width: 100%; padding: 0.68rem 0.95rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary); line-height: var(--leading-normal); transition: border-color var(--duration-normal), box-shadow var(--duration-normal), background var(--duration-normal); appearance: none; } .field-input::placeholder { color: var(--text-muted); } .field-input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px rgba(43, 127, 224, 0.18); background: var(--input-bg-focus); } .field-input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-dim); } /* BADGE / PILL */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); border: 1px solid currentColor; white-space: nowrap; } /* CARD BASE */ .card { background: var(--bg-surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: border-color var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease); } /* SECTION EYEBROW LABEL */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); padding: 0.25rem 0.65rem; border-radius: var(--radius-full); margin-bottom: var(--sp-5); } .eyebrow svg { color: var(--brand-cyan); } /* LOADING SPINNER */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(0, 0, 0, 0.2); border-top-color: currentColor; border-radius: 50%; animation: zenna-spin 0.7s linear infinite; } @keyframes zenna-spin { to { transform: rotate(360deg); } } /* PAGE LOAD ANIMATION */ @keyframes zenna-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: zenna-fade-up 0.5s var(--ease) both; } .animate-delay-1 { animation-delay: 0.08s; } .animate-delay-2 { animation-delay: 0.16s; } .animate-delay-3 { animation-delay: 0.24s; } /* PIPELINE STAGE BADGE HELPER CLASSES */ .stage-badge { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); border: 1px solid; white-space: nowrap; } .stage--sourced { background: var(--stage-sourced-bg); color: var(--stage-sourced-text); border-color: var(--stage-sourced-border); } .stage--contacted { background: var(--stage-contacted-bg); color: var(--stage-contacted-text); border-color: var(--stage-contacted-border); } .stage--screening { background: var(--stage-screening-bg); color: var(--stage-screening-text); border-color: var(--stage-screening-border); } .stage--shortlisted{ background: var(--stage-shortlisted-bg);color: var(--stage-shortlisted-text);border-color: var(--stage-shortlisted-border); } .stage--interview { background: var(--stage-interview-bg); color: var(--stage-interview-text); border-color: var(--stage-interview-border); } .stage--hired { background: var(--stage-hired-bg); color: var(--stage-hired-text); border-color: var(--stage-hired-border); } .stage--archived { background: var(--stage-archived-bg); color: var(--stage-archived-text); border-color: var(--stage-archived-border); } /* SCORE DISPLAY — always number + colour + text label together */ .score-display { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 700; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); border: 1px solid; } .score--strong { background: var(--score-strong-bg); color: var(--score-strong-text); border-color: var(--score-strong-border); } .score--potential{ background: var(--score-potential-bg); color: var(--score-potential-text); border-color: var(--score-potential-border); } .score--not { background: var(--score-not-bg); color: var(--score-not-text); border-color: var(--score-not-border); } /* RESPONSIVE BREAKPOINTS Reference these in media queries — don't hardcode values */ /* --bp-sm: 480px single column mobile --bp-md: 768px tablet --bp-lg: 1024px desktop --bp-xl: 1280px wide desktop */ /* ============================================================ DARK CLIENT THEME TOKENS Applied to client portal pages when dark mode is enabled. Sidebar stays navy -- brand identity preserved. All contrast ratios verified at WCAG AA minimum 4.5:1. Stored under 'zenna-dark-mode-client' in localStorage, separate from the admin preference. ============================================================ */ html[data-theme="dark-client"] { /* Backgrounds */ --bg-page: #0F1923; --bg-surface-0: #172030; --bg-surface-1: #1C2A3E; --bg-surface-2: #243247; --bg-surface-3: #2C3D56; /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border-base: rgba(255, 255, 255, 0.10); --border-strong: rgba(76, 163, 255, 0.4); /* Text --text-primary on --bg-surface-0: #F0F4FF on #172030 -- contrast ~11.2:1 ✓ --text-secondary on --bg-surface-0: #A8B4CC on #172030 -- contrast ~5.1:1 ✓ */ --text-primary: #F0F4FF; --text-secondary: #A8B4CC; --text-muted: #6B7A99; /* Input fields */ --input-bg: #1C2A3E; --input-bg-focus: #243247; --input-border: rgba(255, 255, 255, 0.10); --input-border-focus: #2B7FE0; /* Shadows -- softer in dark mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* Scrollbar */ --scrollbar-track: #172030; --scrollbar-thumb: #2C3D56; /* -- Aliases ----------------------------------------------- Client pages use shorthand variable names throughout. These map the shorthand names to the dark-client overrides so every page element responds without page-level changes. ---------------------------------------------------------- */ /* Background aliases */ --bg-s0: #172030; --bg-s1: #1C2A3E; --bg-s2: #243247; --bg-s3: #2C3D56; /* Text aliases */ --text-pri: #F0F4FF; --text-sec: #A8B4CC; --text-mut: #6B7A99; /* Border aliases */ --border-sub: rgba(255, 255, 255, 0.06); --border-bas: rgba(255, 255, 255, 0.10); --border-str: rgba(76, 163, 255, 0.4); /* Input aliases */ --input-bg: #1C2A3E; --input-bdr: rgba(255, 255, 255, 0.10); /* Sidebar aliases -- sidebar stays navy in dark mode */ --sb-bg: #0D1F3C; --sb-text: rgba(255, 255, 255, 0.75); --sb-act: #FFFFFF; --sb-icon: rgba(255, 255, 255, 0.5); --sb-cyan: #00C8D7; --sb-hover: rgba(255, 255, 255, 0.06); --sb-sel: rgba(0, 200, 215, 0.15); --sb-bdr: rgba(255, 255, 255, 0.08); --sb-label: rgba(255, 255, 255, 0.35); /* Semantic colour aliases -- do not change between themes */ --success: #00D48A; --success-dim: rgba(0, 212, 138, 0.12); --success-border: rgba(0, 212, 138, 0.3); --warning: #F5A623; --warning-dim: rgba(245, 166, 35, 0.12); --warning-border: rgba(245, 166, 35, 0.3); --error: #FF5252; --error-dim: rgba(255, 82, 82, 0.08); --error-border: rgba(255, 82, 82, 0.3); --purple: #B47FFF; --purple-dim: rgba(180, 127, 255, 0.12); --purple-border: rgba(180, 127, 255, 0.3); /* Layout aliases */ --sidebar-w: 260px; --header-h: 60px; } /* ============================================================ SHARED ADMIN / CLIENT SIDEBAR NAV Defined once here so every page that loads zenna-tokens.css inherits the nav styling. New pages never copy these rules inline again, which is the whole point: the styling cannot be forgotten on a new page because there is nothing to remember. admin-nav.js renders the markup; these rules style it. Variables (the --sb- set and --sidebar-w) are defined in the token blocks above, so this responds to light and dark-admin themes automatically. The sidebar width is set here so it works in BOTH layouts: on grid pages the width equals the grid column (both var(--sidebar-w)), so nothing shifts; on the flex pages the width applies directly. Pages that still carry an inline copy of these rules keep working, since an identical later rule just wins over this one with no visible difference. ============================================================ */ .sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--sb-bg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--sb-bdr);} .sb-brand{display:flex;align-items:center;padding:1.1rem 1.25rem;border-bottom:1px solid var(--sb-bdr);text-decoration:none;} .sb-nav{padding:.75rem 0;flex:1;} .sb-section{padding:.5rem 1rem .2rem;} .sb-section-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-label);margin-bottom:.4rem;} .sb-item{display:flex;align-items:center;gap:.65rem;width:100%;padding:.55rem .85rem;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--sb-text);transition:background 150ms,color 150ms;white-space:nowrap;} .sb-item:hover{background:var(--sb-hover);} .sb-item.active{background:var(--sb-sel);color:var(--sb-act);} .sb-item svg{color:var(--sb-icon);flex-shrink:0;} .sb-item.active svg{color:var(--sb-cyan);} .sb-item .badge-count{margin-left:auto;background:var(--brand-cyan);color:#000;font-size:.6rem;font-weight:800;padding:.1rem .4rem;border-radius:var(--radius-full);min-width:18px;text-align:center;} .sb-footer{padding:1rem 1.25rem;border-top:1px solid var(--sb-bdr);font-size:.72rem;color:var(--sb-label);line-height:1.5;} .sb-footer a{color:rgba(255,255,255,.4);text-decoration:none;} .sb-user{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;border-top:1px solid var(--sb-bdr);} .sb-avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-gradient);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.7rem;font-weight:800;color:#000;flex-shrink:0;} .sb-user-name{font-size:.75rem;font-weight:600;color:var(--sb-act);flex:1;} .sb-user-role{font-size:.65rem;color:var(--sb-label);} .sb-signout{background:none;border:none;color:var(--sb-icon);cursor:pointer;padding:.2rem;border-radius:var(--radius-sm);transition:color 150ms;} .sb-signout:hover{color:var(--error);} /* ============================================================ END OF TOKENS ============================================================ */