/* * ============================================================ * 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 Syne — display headings, labels, buttons, nav Outfit — body copy, form labels, data, descriptions Both loaded from Google Fonts in every HTML file. ---------------------------------------------------------- */ --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; } /* 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; } /* ============================================================ END OF TOKENS ============================================================ */