445 lines
10 KiB
CSS
445 lines
10 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Premium UI fonts — Elvaro Grotesque (primary) */
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff') format('woff');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff') format('woff');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff') format('woff');
|
|
font-weight: 800;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Elvaro Grotesque';
|
|
src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff2') format('woff2'),
|
|
url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff') format('woff');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Premium UI fonts — Blumir (alternative) */
|
|
@font-face {
|
|
font-family: 'Blumir';
|
|
src: url('/Fonts/blumir-font-family/WOFF/Blumir-VF.woff2') format('woff2-variations'),
|
|
url('/Fonts/blumir-font-family/WOFF/Blumir-VF.woff') format('woff-variations');
|
|
font-weight: 100 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* Original design system tokens (for boot/ECG phases) */
|
|
--bg: #FFFFFF;
|
|
--text: #334155;
|
|
--heading: #0F172A;
|
|
--teal: #00897B;
|
|
--teal-light: rgba(0, 137, 123, 0.08);
|
|
--teal-medium: rgba(0, 137, 123, 0.15);
|
|
--coral: #FF6B6B;
|
|
--coral-light: rgba(255, 107, 107, 0.08);
|
|
--muted: #94A3B8;
|
|
--card-bg: #FFFFFF;
|
|
--radius: 16px;
|
|
--font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
--font-secondary: 'Inter Tight', system-ui, sans-serif;
|
|
|
|
/* Typography — Elvaro Grotesque primary, Blumir alternative */
|
|
--font-ui: 'Elvaro Grotesque', system-ui, sans-serif;
|
|
--font-ui-alt: 'Blumir', system-ui, sans-serif;
|
|
--font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
|
|
|
|
/* GP System Dashboard tokens */
|
|
--bg-dashboard: #F0F5F4;
|
|
--surface: #FFFFFF;
|
|
--sidebar-bg: #F7FAFA;
|
|
--text-primary: #1A2B2A;
|
|
--text-secondary: #5B7A78;
|
|
--text-tertiary: #8DA8A5;
|
|
--accent: #0D6E6E;
|
|
--accent-hover: #0A8080;
|
|
--accent-light: rgba(10,128,128,0.08);
|
|
--accent-border: rgba(10,128,128,0.18);
|
|
--amber: #D97706;
|
|
--amber-light: rgba(217,119,6,0.08);
|
|
--amber-border: rgba(217,119,6,0.18);
|
|
--success: #059669;
|
|
--success-light: rgba(5,150,105,0.08);
|
|
--success-border: rgba(5,150,105,0.18);
|
|
--alert: #DC2626;
|
|
--alert-light: rgba(220,38,38,0.08);
|
|
--alert-border: rgba(220,38,38,0.18);
|
|
--purple: #7C3AED;
|
|
--purple-light: rgba(124,58,237,0.08);
|
|
--purple-border: rgba(124,58,237,0.18);
|
|
--border: #D4E0DE;
|
|
--border-light: #E4EDEB;
|
|
--sidebar-width: 272px;
|
|
--topbar-height: 48px;
|
|
--subnav-height: 36px;
|
|
--radius-card: 8px;
|
|
--radius-sm: 6px;
|
|
--shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
|
|
--shadow-md: 0 2px 8px rgba(26,43,42,0.08);
|
|
--shadow-lg: 0 8px 32px rgba(26,43,42,0.12);
|
|
--font-body: var(--font-ui);
|
|
--font-mono-dashboard: 'Geist Mono', 'Fira Code', monospace;
|
|
|
|
/* Detail panel */
|
|
--panel-narrow: 400px;
|
|
--panel-wide: 60vw;
|
|
--backdrop-blur: 4px;
|
|
--backdrop-bg: rgba(26,43,42,0.15);
|
|
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-primary);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@layer utilities {
|
|
.font-primary {
|
|
font-family: var(--font-primary);
|
|
}
|
|
.font-secondary {
|
|
font-family: var(--font-secondary);
|
|
}
|
|
.font-mono {
|
|
font-family: 'Fira Code', monospace;
|
|
}
|
|
.font-ui {
|
|
font-family: var(--font-ui);
|
|
}
|
|
.font-ui-alt {
|
|
font-family: var(--font-ui-alt);
|
|
}
|
|
.font-geist-mono {
|
|
font-family: var(--font-geist-mono);
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes seedPulse {
|
|
0%, 100% { text-shadow: 0 0 8px #00ff41, 0 0 16px #00ff41; }
|
|
50% { text-shadow: 0 0 14px #00ff41, 0 0 28px #00ff41, 0 0 40px rgba(0,255,65,0.3); }
|
|
}
|
|
|
|
.animate-blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
.animate-seed-pulse {
|
|
animation: seedPulse 0.6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 200ms ease-out forwards;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Pulse animation for status badge dot */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
/* Login spinner */
|
|
@keyframes login-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.login-spinner {
|
|
animation: login-spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Login button pulse — draws attention when button becomes clickable */
|
|
@keyframes login-pulse {
|
|
0%, 60%, 100% { transform: scale(1); }
|
|
30% { transform: scale(1.03); }
|
|
}
|
|
|
|
.login-pulse-active {
|
|
animation: login-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.login-pulse-active:hover {
|
|
animation: none;
|
|
}
|
|
|
|
/* Custom scrollbar for sidebar */
|
|
.pmr-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
}
|
|
|
|
.pmr-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.pmr-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.pmr-scrollbar::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.pmr-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-tertiary);
|
|
}
|
|
|
|
/* SubNav horizontal scroll — hide scrollbar */
|
|
.subnav-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Dashboard card grid responsive — mobile-first */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Tablet: 2 columns on wider screens */
|
|
@media (min-width: 768px) {
|
|
.dashboard-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
/* Desktop: maintain 2 columns with generous gap */
|
|
@media (min-width: 1024px) {
|
|
.dashboard-grid {
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Activity grid responsive — mobile-first (used in CareerActivityTile) */
|
|
.activity-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Tablet and up: 2 columns */
|
|
@media (min-width: 768px) {
|
|
.activity-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* ===== COMMAND PALETTE ANIMATIONS ===== */
|
|
@keyframes palette-overlay-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes palette-modal-in {
|
|
from { transform: scale(0.97) translateY(-8px); opacity: 0; }
|
|
to { transform: scale(1) translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
@keyframes palette-overlay-in {
|
|
from { opacity: 1; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes palette-modal-in {
|
|
from { transform: none; opacity: 1; }
|
|
to { transform: none; opacity: 1; }
|
|
}
|
|
}
|
|
|
|
/* ===== FOCUS VISIBLE STYLES (WCAG Compliance) ===== */
|
|
/* Default focus ring for all focusable elements */
|
|
*:focus-visible {
|
|
outline: 2px solid rgba(13, 110, 110, 0.4);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Button-like interactive elements */
|
|
button:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
[role="option"]:focus-visible {
|
|
outline: 2px solid rgba(13, 110, 110, 0.4);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Links */
|
|
a:focus-visible {
|
|
outline: 2px solid rgba(13, 110, 110, 0.4);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Inputs and textareas */
|
|
input:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid rgba(13, 110, 110, 0.6);
|
|
outline-offset: 0px;
|
|
}
|
|
|
|
/* ===== DETAIL PANEL ANIMATIONS ===== */
|
|
@keyframes panel-slide-in {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes panel-slide-out {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes backdrop-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Detail panel responsive widths */
|
|
.detail-panel[data-width="narrow"] {
|
|
width: var(--panel-narrow);
|
|
}
|
|
|
|
.detail-panel[data-width="wide"] {
|
|
width: var(--panel-wide);
|
|
}
|
|
|
|
/* Mobile: both narrow and wide become full-width */
|
|
@media (max-width: 767px) {
|
|
.detail-panel[data-width="narrow"],
|
|
.detail-panel[data-width="wide"] {
|
|
width: 100vw;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
/* Disable pulse animation on status badge dot */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
/* Instant panel animations */
|
|
@keyframes panel-slide-in {
|
|
from { transform: none; }
|
|
to { transform: none; }
|
|
}
|
|
|
|
@keyframes panel-slide-out {
|
|
from { transform: none; }
|
|
to { transform: none; }
|
|
}
|
|
|
|
@keyframes backdrop-fade-in {
|
|
from { opacity: 1; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Static login spinner indicator */
|
|
.login-spinner {
|
|
animation: none;
|
|
border-top-color: #0D6E6E;
|
|
}
|
|
|
|
/* No pulse animation */
|
|
.login-pulse-active {
|
|
animation: none;
|
|
}
|
|
|
|
/* Instant SubNav transitions */
|
|
.subnav-scroll button {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Instant smooth scroll override */
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
}
|