/* =========================================================================== * SHARED_HR — Shared app styles (rem-only, light/dark) * --------------------------------------------------------------------------- * Loaded on EVERY HR page (landing + the 7 module pages) AFTER Tailwind so * these tokens + components layer on top. Authoring rules (DEV_GUIDE): * * ZERO px anywhere — rem only (1rem = 16px baseline). * * Light/dark via [data-theme] on (header-embed.js toggles it AND * the `.dark` class, so Tailwind `dark:` utilities work too). * * Mobile-first 360px; touch targets >= 2.75rem. * * The palette intentionally tracks the SHARED_DASHBOARD shell so HR does * not invent a divergent visual language. Accent = indigo/violet (the * "users-gear" / platform-admin family). * * THEMING CONTRACT: page agents should style with these CSS variables (or * Tailwind utilities) rather than hardcoding colors, so light/dark + future * palette tweaks stay centralized. * ========================================================================= */ :root { /* Surfaces */ --hr-bg: #f6f7fb; --hr-surface: #ffffff; --hr-surface-2: #f0f2f8; --hr-surface-hover: #eef1fa; --hr-border: #e3e6ef; --hr-border-strong: #cdd3e3; /* Text */ --hr-text: #1c2333; --hr-text-secondary: #4a5269; --hr-text-muted: #828aa0; /* Brand / accent (indigo–violet, matches the platform-admin family) */ --hr-accent: #6366f1; --hr-accent-strong: #4f46e5; --hr-accent-soft: #eef0ff; --hr-accent-contrast: #ffffff; /* Status */ --hr-success: #16a34a; --hr-success-soft: #e7f6ec; --hr-warning: #d97706; --hr-warning-soft: #fdf2e2; --hr-danger: #dc2626; --hr-danger-soft: #fce8e8; --hr-info: #0ea5e9; --hr-info-soft: #e4f4fd; /* Radii + elevation + motion (no px) */ --hr-radius-sm: 0.375rem; --hr-radius: 0.625rem; --hr-radius-lg: 1rem; --hr-radius-full: 62.5rem; --hr-shadow-sm: 0 0.0625rem 0.125rem rgba(20, 25, 45, 0.06); --hr-shadow: 0 0.25rem 1rem rgba(20, 25, 45, 0.08); --hr-shadow-lg: 0 1rem 2.5rem rgba(20, 25, 45, 0.16); --hr-transition: 160ms ease; /* Header height the body must clear (matches header-embed 3.75rem). */ --hr-header-h: 3.75rem; } [data-theme='dark'] { --hr-bg: #0e1220; --hr-surface: #161c2d; --hr-surface-2: #1d2438; --hr-surface-hover: #232b42; --hr-border: #2a3350; --hr-border-strong: #394467; --hr-text: #eef1fb; --hr-text-secondary: #b6bfd6; --hr-text-muted: #8893ad; --hr-accent: #818cf8; --hr-accent-strong: #6366f1; --hr-accent-soft: #21284a; --hr-accent-contrast: #0e1220; --hr-success: #4ade80; --hr-success-soft: #14301f; --hr-warning: #fbbf24; --hr-warning-soft: #332208; --hr-danger: #f87171; --hr-danger-soft: #371616; --hr-info: #38bdf8; --hr-info-soft: #0c2a3a; --hr-shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.4); --hr-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.45); --hr-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.6); } /* --------------------------------------------------------------------- * * Base * --------------------------------------------------------------------- */ html { font-size: 100%; } body.hr-body { margin: 0; /* Clear the fixed shared header (header-embed.js also sets this inline, but declaring it here avoids a layout flash before the header boots). */ padding-top: var(--hr-header-h); min-height: 100vh; background: var(--hr-bg); color: var(--hr-text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background var(--hr-transition), color var(--hr-transition); } .hr-container { width: 100%; max-width: 75rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; box-sizing: border-box; } a { color: var(--hr-accent-strong); } [data-theme='dark'] a { color: var(--hr-accent); } :focus-visible { outline: 0.1875rem solid var(--hr-accent); outline-offset: 0.125rem; border-radius: var(--hr-radius-sm); } .hr-skip-link { position: absolute; left: -999rem; top: 0.5rem; z-index: 60; background: var(--hr-accent-strong); color: #fff; padding: 0.625rem 1rem; border-radius: var(--hr-radius); text-decoration: none; } .hr-skip-link:focus { left: 0.75rem; } /* --------------------------------------------------------------------- * * Hero / page header * --------------------------------------------------------------------- */ .hr-hero { position: relative; overflow: hidden; border-radius: var(--hr-radius-lg); padding: 2rem 1.75rem; margin-bottom: 1.75rem; color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), linear-gradient(135deg, var(--hr-accent-strong) 0%, #7c3aed 55%, #9333ea 100%); box-shadow: var(--hr-shadow); } .hr-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; margin: 0 0 0.75rem; } .hr-hero__title { margin: 0 0 0.5rem; font-size: 1.875rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; } .hr-hero__subtitle { margin: 0; max-width: 42rem; font-size: 1rem; opacity: 0.94; } .hr-page-head { margin-bottom: 1.5rem; } .hr-page-head__title { margin: 0 0 0.375rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--hr-text); } .hr-page-head__subtitle { margin: 0; color: var(--hr-text-secondary); font-size: 0.9375rem; } /* --------------------------------------------------------------------- * * Section label * --------------------------------------------------------------------- */ .hr-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; } .hr-section-label__title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--hr-text); } .hr-section-label__hint { margin: 0; font-size: 0.8125rem; color: var(--hr-text-muted); } /* --------------------------------------------------------------------- * * Card grid + module cards (landing) * --------------------------------------------------------------------- */ .hr-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; } .hr-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: var(--hr-surface); border: 0.0625rem solid var(--hr-border); border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-sm); text-decoration: none; color: inherit; transition: transform var(--hr-transition), box-shadow var(--hr-transition), border-color var(--hr-transition); } .hr-card:hover { transform: translateY(-0.1875rem); box-shadow: var(--hr-shadow); border-color: var(--hr-border-strong); } .hr-card:focus-visible { transform: translateY(-0.1875rem); } .hr-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--hr-radius); background: var(--hr-accent-soft); color: var(--hr-accent-strong); font-size: 1.125rem; } [data-theme='dark'] .hr-card__icon { color: var(--hr-accent); } .hr-card__title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--hr-text); } .hr-card__desc { margin: 0; font-size: 0.875rem; color: var(--hr-text-secondary); flex: 1; } .hr-card__cta { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.8125rem; font-weight: 600; color: var(--hr-accent-strong); } [data-theme='dark'] .hr-card__cta { color: var(--hr-accent); } .hr-card:hover .hr-card__cta i { transform: translateX(0.1875rem); } .hr-card__cta i { transition: transform var(--hr-transition); } /* Accent variants so the 8 cards read as distinct at a glance. */ .hr-card--violet .hr-card__icon { background: #eef0ff; color: #6366f1; } .hr-card--teal .hr-card__icon { background: #e3f7f3; color: #0d9488; } .hr-card--amber .hr-card__icon { background: #fdf2e2; color: #d97706; } .hr-card--rose .hr-card__icon { background: #fce8ef; color: #e11d62; } .hr-card--sky .hr-card__icon { background: #e4f4fd; color: #0284c7; } .hr-card--emerald .hr-card__icon { background: #e7f6ec; color: #16a34a; } .hr-card--slate .hr-card__icon { background: #eceff5; color: #475569; } .hr-card--fuchsia .hr-card__icon { background: #fbe9fb; color: #c026d3; } [data-theme='dark'] .hr-card--violet .hr-card__icon { background: #21284a; color: #818cf8; } [data-theme='dark'] .hr-card--teal .hr-card__icon { background: #0e2e2a; color: #2dd4bf; } [data-theme='dark'] .hr-card--amber .hr-card__icon { background: #332208; color: #fbbf24; } [data-theme='dark'] .hr-card--rose .hr-card__icon { background: #3a1322; color: #fb7185; } [data-theme='dark'] .hr-card--sky .hr-card__icon { background: #0c2a3a; color: #38bdf8; } [data-theme='dark'] .hr-card--emerald .hr-card__icon { background: #14301f; color: #4ade80; } [data-theme='dark'] .hr-card--slate .hr-card__icon { background: #232b42; color: #94a3b8; } [data-theme='dark'] .hr-card--fuchsia .hr-card__icon { background: #3a1238; color: #e879f9; } /* --------------------------------------------------------------------- * * Generic surface card (module pages reuse this) * --------------------------------------------------------------------- */ .hr-panel { background: var(--hr-surface); border: 0.0625rem solid var(--hr-border); border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-sm); } .hr-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 0.0625rem solid var(--hr-border); } .hr-panel__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--hr-text); } .hr-panel__body { padding: 1.25rem; } /* --------------------------------------------------------------------- * * Stat tiles (landing overview) * --------------------------------------------------------------------- */ .hr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; } .hr-stat { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; background: var(--hr-surface); border: 0.0625rem solid var(--hr-border); border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-sm); } .hr-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--hr-radius); background: var(--hr-accent-soft); color: var(--hr-accent-strong); flex-shrink: 0; } [data-theme='dark'] .hr-stat__icon { color: var(--hr-accent); } .hr-stat__value { font-size: 1.375rem; font-weight: 800; color: var(--hr-text); line-height: 1.1; } .hr-stat__label { font-size: 0.8125rem; color: var(--hr-text-muted); } /* --------------------------------------------------------------------- * * Buttons (page agents reuse these classes) * --------------------------------------------------------------------- */ .hr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; /* touch target */ padding: 0 1rem; border: 0.0625rem solid transparent; border-radius: var(--hr-radius); font-size: 0.9375rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: background var(--hr-transition), border-color var(--hr-transition), transform var(--hr-transition), box-shadow var(--hr-transition); } .hr-btn:active { transform: translateY(0.0625rem); } .hr-btn--primary { background: var(--hr-accent-strong); color: var(--hr-accent-contrast); } .hr-btn--primary:hover { background: var(--hr-accent); } .hr-btn--secondary { background: var(--hr-surface); border-color: var(--hr-border-strong); color: var(--hr-text); } .hr-btn--secondary:hover { background: var(--hr-surface-hover); } .hr-btn--ghost { background: transparent; color: var(--hr-text-secondary); } .hr-btn--ghost:hover { background: var(--hr-surface-hover); color: var(--hr-text); } .hr-btn--danger { background: var(--hr-danger); color: #fff; } .hr-btn--danger:hover { filter: brightness(1.05); } .hr-btn--icon { width: 2.75rem; padding: 0; } .hr-btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* --------------------------------------------------------------------- * * Badges * --------------------------------------------------------------------- */ .hr-badge { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.1875rem 0.625rem; border-radius: var(--hr-radius-full); font-size: 0.75rem; font-weight: 600; background: var(--hr-surface-2); color: var(--hr-text-secondary); } .hr-badge--success { background: var(--hr-success-soft); color: var(--hr-success); } .hr-badge--warning { background: var(--hr-warning-soft); color: var(--hr-warning); } .hr-badge--danger { background: var(--hr-danger-soft); color: var(--hr-danger); } .hr-badge--info { background: var(--hr-info-soft); color: var(--hr-info); } .hr-badge--accent { background: var(--hr-accent-soft); color: var(--hr-accent-strong); } [data-theme='dark'] .hr-badge--accent { color: var(--hr-accent); } /* --------------------------------------------------------------------- * * Tables (shared by module pages; see app.js renderTable helper) * --------------------------------------------------------------------- */ .hr-table-wrap { width: 100%; overflow-x: auto; border: 0.0625rem solid var(--hr-border); border-radius: var(--hr-radius-lg); } .hr-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .hr-table thead th { position: sticky; top: 0; text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hr-text-muted); background: var(--hr-surface-2); padding: 0.75rem 1rem; border-bottom: 0.0625rem solid var(--hr-border); white-space: nowrap; } .hr-table tbody td { padding: 0.8125rem 1rem; border-bottom: 0.0625rem solid var(--hr-border); color: var(--hr-text); vertical-align: middle; } .hr-table tbody tr:last-child td { border-bottom: none; } .hr-table tbody tr { transition: background var(--hr-transition); } .hr-table tbody tr:hover { background: var(--hr-surface-hover); } /* --------------------------------------------------------------------- * * Forms * --------------------------------------------------------------------- */ .hr-field { margin-bottom: 1rem; } .hr-label { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--hr-text-secondary); } .hr-input, .hr-select, .hr-textarea { width: 100%; min-height: 2.75rem; padding: 0.625rem 0.75rem; font-size: 0.9375rem; font-family: inherit; color: var(--hr-text); background: var(--hr-surface); border: 0.0625rem solid var(--hr-border-strong); border-radius: var(--hr-radius); box-sizing: border-box; transition: border-color var(--hr-transition), box-shadow var(--hr-transition); } .hr-textarea { min-height: 6rem; resize: vertical; } .hr-input:focus, .hr-select:focus, .hr-textarea:focus { outline: none; border-color: var(--hr-accent); box-shadow: 0 0 0 0.1875rem var(--hr-accent-soft); } /* --------------------------------------------------------------------- * * Modal (DEV_GUIDE #4 — max-height 85vh, scrollable body, fixed header/footer) * Driven by app.js openModal/closeModal helpers. * --------------------------------------------------------------------- */ .hr-modal-overlay { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(13, 17, 30, 0.55); backdrop-filter: blur(0.125rem); } .hr-modal-overlay.is-open { display: flex; } .hr-modal { display: flex; flex-direction: column; width: 100%; max-width: 34rem; max-height: 85vh; /* DEV_GUIDE #4 */ background: var(--hr-surface); border: 0.0625rem solid var(--hr-border); border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-lg); overflow: hidden; } .hr-modal__header, .hr-modal__footer { flex-shrink: 0; /* fixed header/footer */ display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; } .hr-modal__header { justify-content: space-between; border-bottom: 0.0625rem solid var(--hr-border); } .hr-modal__footer { justify-content: flex-end; border-top: 0.0625rem solid var(--hr-border); } .hr-modal__title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--hr-text); } .hr-modal__body { flex: 1; overflow-y: auto; padding: 1.25rem; } /* scrollable body */ /* --------------------------------------------------------------------- * * Toasts (DEV_GUIDE #14 — notifications). app.js toast() inserts here. * --------------------------------------------------------------------- */ .hr-toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: 0.625rem; max-width: calc(100vw - 2rem); } .hr-toast { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 16rem; max-width: 24rem; padding: 0.8125rem 1rem; border-radius: var(--hr-radius); background: var(--hr-surface); border: 0.0625rem solid var(--hr-border); border-left: 0.25rem solid var(--hr-accent); box-shadow: var(--hr-shadow); color: var(--hr-text); font-size: 0.875rem; animation: hr-toast-in var(--hr-transition); } .hr-toast--success { border-left-color: var(--hr-success); } .hr-toast--error { border-left-color: var(--hr-danger); } .hr-toast--warning { border-left-color: var(--hr-warning); } .hr-toast__icon { margin-top: 0.0625rem; } .hr-toast--success .hr-toast__icon { color: var(--hr-success); } .hr-toast--error .hr-toast__icon { color: var(--hr-danger); } .hr-toast--warning .hr-toast__icon { color: var(--hr-warning); } .hr-toast--info .hr-toast__icon { color: var(--hr-accent); } @keyframes hr-toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- * * States: error block (api.js renderError), empty, loading skeleton * --------------------------------------------------------------------- */ .hr-error { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.125rem; border-radius: var(--hr-radius); background: var(--hr-danger-soft); border: 0.0625rem solid var(--hr-danger); color: var(--hr-danger); } .hr-error__icon { margin-top: 0.125rem; } .hr-error__title { margin: 0; font-weight: 600; } .hr-error__list { margin: 0.5rem 0 0; padding-left: 1.125rem; font-size: 0.8125rem; } .hr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.625rem; padding: 2.5rem 1.25rem; color: var(--hr-text-muted); } .hr-empty__icon { font-size: 2rem; color: var(--hr-border-strong); } .hr-empty__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--hr-text-secondary); } .hr-empty__msg { margin: 0; font-size: 0.875rem; max-width: 26rem; } .hr-skeleton { position: relative; overflow: hidden; background: var(--hr-surface-2); border-radius: var(--hr-radius-sm); min-height: 1rem; } .hr-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent ); animation: hr-shimmer 1.3s infinite; } [data-theme='dark'] .hr-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); } @keyframes hr-shimmer { to { transform: translateX(100%); } } /* --------------------------------------------------------------------- * * Utilities * --------------------------------------------------------------------- */ .hr-sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hr-row { display: flex; align-items: center; gap: 0.75rem; } .hr-row--wrap { flex-wrap: wrap; } .hr-spacer { flex: 1; } .hr-mt { margin-top: 1rem; } .hr-mt-lg { margin-top: 1.75rem; } .hr-hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Mobile-first refinements at >= 40rem (640px) and >= 64rem (1024px). */ @media (min-width: 40rem) { .hr-container { padding: 2rem 1.75rem 4rem; } .hr-hero { padding: 2.5rem 2.25rem; } .hr-hero__title { font-size: 2.25rem; } }