/* ========================================================================== JobsHives — Signed-in Dashboard Design Tokens + Shell Skin Phase 1 of the dashboard redesign (see "JobsHives Dashboard - Design Spec.md"). This file ports the color / type / shape tokens from the design spec and the sidebar+topbar shell CSS from the JobsHives/dashboard.css prototype, then re-skins the EXISTING dashboard shell markup used in profile.php, saved-jobs.php and applied-jobs.php (.sidebar, .sidebar-header, .nav-link, .nav-section-title, .progress-circle, .top-navbar, .top-user-profile, ...). No HTML IDs or structure are changed by this file — only visual styling of the classes already present in the markup, plus the responsive drawer breakpoint (1080px) called for by the spec. Scoped so it does not touch Bootstrap's own classes (.row, .col-*, .form-control, .btn, etc.) used inside the page content areas. ========================================================================== */ /* ------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root { /* Brand blue */ --jh-blue-700: oklch(0.42 0.16 256); --jh-blue-600: oklch(0.50 0.18 256); --jh-blue-500: oklch(0.58 0.18 256); --jh-blue-50: oklch(0.96 0.025 256); --jh-navy-950: oklch(0.20 0.05 262); --jh-navy-900: oklch(0.25 0.055 262); --jh-navy-800: oklch(0.31 0.05 262); /* Hive amber accent */ --jh-amber-500: oklch(0.80 0.135 78); --jh-amber-400: oklch(0.85 0.13 82); --jh-amber-100: oklch(0.95 0.05 85); /* Neutrals */ --jh-bg: oklch(0.992 0.003 250); --jh-surface: oklch(0.975 0.005 250); --jh-surface-2: oklch(0.955 0.006 250); --jh-border: oklch(0.915 0.007 252); --jh-border-strong: oklch(0.86 0.01 252); --jh-text: oklch(0.27 0.03 262); --jh-text-muted:oklch(0.52 0.022 262); --jh-text-faint:oklch(0.64 0.018 262); --jh-white: #fff; /* Success / live */ --jh-green-500: oklch(0.70 0.15 155); --jh-green-50: oklch(0.95 0.04 155); /* Shape */ --jh-radius-sm: 8px; --jh-radius: 14px; --jh-radius-lg: 22px; --jh-radius-xl: 30px; --jh-radius-pill: 999px; /* Elevation */ --jh-shadow-sm: 0 1px 2px oklch(0.4 0.05 262 / 0.05), 0 1px 3px oklch(0.4 0.05 262 / 0.05); --jh-shadow-md: 0 4px 14px oklch(0.4 0.05 262 / 0.08), 0 2px 6px oklch(0.4 0.05 262 / 0.05); --jh-shadow-lg: 0 18px 50px oklch(0.35 0.06 262 / 0.14), 0 6px 16px oklch(0.35 0.06 262 / 0.07); --jh-shadow-blue: 0 14px 34px oklch(0.50 0.18 256 / 0.28); --jh-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------------------- 2. Type — Bricolage Grotesque (display) / Plus Jakarta Sans (UI) / IBM Plex Mono (kickers). Fonts are linked separately in each page's (see profile.php, saved-jobs.php, applied-jobs.php). This file only assigns them. ------------------------------------------------------------------------- */ .jh-shell, .jh-shell input, .jh-shell select, .jh-shell textarea, .jh-shell button { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; } .jh-mono { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; } .jh-display { font-family: "Bricolage Grotesque", system-ui, sans-serif !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; } /* ------------------------------------------------------------------------- 3. Buttons — spec §1.4. Additive classes; existing .btn-primary-dashboard / .btn-outline-dashboard used deep in the wizard content are left alone (out of scope for Phase 1). ------------------------------------------------------------------------- */ .jh-shell .btn-primary, .jh-shell .btn-ghost, .jh-shell .btn-amber, .jh-shell .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; font-family: "Plus Jakarta Sans", sans-serif; padding: 11px 20px; border-radius: var(--jh-radius-pill); border: none; cursor: pointer; white-space: nowrap; transition: transform 0.18s var(--jh-ease), box-shadow 0.2s var(--jh-ease), background 0.2s; text-decoration: none; } .jh-shell .btn-primary { background: var(--jh-blue-600); color: #fff; box-shadow: var(--jh-shadow-blue); } .jh-shell .btn-primary:hover { background: var(--jh-blue-700); transform: translateY(-2px); color: #fff; } .jh-shell .btn-dark { background: var(--jh-navy-950); color: #fff; } .jh-shell .btn-dark:hover { transform: translateY(-2px); box-shadow: var(--jh-shadow-lg); color: #fff; } .jh-shell .btn-ghost { background: var(--jh-white); color: var(--jh-navy-900); border: 1px solid var(--jh-border-strong); box-shadow: var(--jh-shadow-sm); } .jh-shell .btn-ghost:hover { border-color: var(--jh-blue-500); color: var(--jh-blue-700); transform: translateY(-2px); } .jh-shell .btn-amber { background: var(--jh-amber-500); color: var(--jh-navy-950); } .jh-shell .btn-amber:hover { background: var(--jh-amber-400); transform: translateY(-2px); } .jh-shell .btn-sm { padding: 8px 14px; font-size: 12.5px; } /* ========================================================================== 4. App shell skin — restyles the EXISTING .sidebar / .top-navbar markup already present in profile.php / saved-jobs.php / applied-jobs.php. Class names below are the real, pre-existing selectors; nothing here renames or removes an element. ========================================================================== */ body { background: var(--jh-surface); } /* ---- Sidebar ---- */ .sidebar { background: var(--jh-white) !important; border-right: 1px solid var(--jh-border) !important; box-shadow: none !important; font-family: "Plus Jakarta Sans", sans-serif; } .sidebar-header { border-bottom: 1px solid var(--jh-border) !important; gap: 10px !important; } .sidebar-brand { font-family: "Bricolage Grotesque", sans-serif !important; font-weight: 700 !important; color: var(--jh-navy-950) !important; background: none !important; -webkit-text-fill-color: initial !important; letter-spacing: -0.02em; } .sidebar-toggle { background: var(--jh-white) !important; color: var(--jh-text-muted) !important; border: 1px solid var(--jh-border) !important; border-radius: var(--jh-radius-sm) !important; } .sidebar-toggle:hover { background: var(--jh-surface) !important; color: var(--jh-navy-950) !important; } .nav-section-title { font-family: "IBM Plex Mono", monospace !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; color: var(--jh-text-faint) !important; } .nav-link { color: var(--jh-text-muted) !important; border-radius: 11px !important; font-size: 14.5px !important; font-weight: 500 !important; transition: 0.15s !important; } .nav-link:hover { background: var(--jh-surface) !important; color: var(--jh-navy-950) !important; transform: none !important; } .nav-link:hover .nav-icon { color: var(--jh-blue-600); } .nav-link.active { background: var(--jh-blue-50) !important; color: var(--jh-blue-700) !important; font-weight: 600 !important; box-shadow: none !important; position: relative; } .nav-link.active::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--jh-blue-600); border-radius: 0 3px 3px 0; } .sidebar.collapsed .nav-link.active::before { display: none; } .nav-icon { color: var(--jh-text-faint); transition: 0.15s; } .nav-link.active .nav-icon { color: var(--jh-blue-600); } .nav-badge { font-family: "IBM Plex Mono", monospace !important; letter-spacing: 0.04em !important; animation: none !important; box-shadow: none !important; } .nav-badge.coming-soon, .nav-badge.soon { background: var(--jh-surface-2) !important; color: var(--jh-text-faint) !important; } .nav-badge.new { background: var(--jh-amber-500) !important; color: var(--jh-navy-950) !important; } /* Profile-strength card (spec §2.1.6) — restyles .progress-section */ .progress-section { background: linear-gradient(160deg, var(--jh-blue-600), var(--jh-blue-700)) !important; border: none !important; border-radius: var(--jh-radius) !important; padding: 16px !important; cursor: pointer; transition: transform 0.18s var(--jh-ease) !important; } .progress-section:hover { transform: translateY(-2px); } .progress-title { color: #fff !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; text-align: left !important; margin-bottom: 10px !important; } .progress-circle { background: conic-gradient(var(--jh-amber-400) 0deg, oklch(1 0 0 / 0.25) 0deg) !important; box-shadow: none !important; width: 64px !important; height: 64px !important; margin: 0 auto 10px !important; } .progress-circle::before { background: var(--jh-blue-700) !important; width: 48px !important; height: 48px !important; box-shadow: none !important; } .progress-text { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; font-family: "Bricolage Grotesque", sans-serif !important; font-size: 15px !important; } .progress-description { color: oklch(0.92 0.03 256) !important; font-size: 11.5px !important; text-align: left !important; } .sidebar.collapsed .progress-circle { width: 44px !important; height: 44px !important; } .sidebar.collapsed .progress-circle::before { width: 32px !important; height: 32px !important; } /* ---- Top bar ---- */ .top-navbar { background: oklch(0.992 0.003 250 / 0.85) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--jh-border) !important; box-shadow: none !important; } .page-title { font-family: "Bricolage Grotesque", sans-serif !important; color: var(--jh-navy-950) !important; font-weight: 600 !important; letter-spacing: -0.02em; } .top-user-profile:hover { background: var(--jh-surface) !important; } .top-user-avatar { border: 2px solid var(--jh-border) !important; } .top-user-name { color: var(--jh-navy-950) !important; font-family: "Plus Jakarta Sans", sans-serif !important; } .top-user-role { color: var(--jh-text-faint) !important; } #mobileSidebarToggle, .mobile-sidebar-toggle { color: var(--jh-navy-900) !important; } /* Scrim (mobile drawer backdrop) */ .sidebar-overlay { background: oklch(0.2 0.05 262 / 0.42) !important; } /* ========================================================================== 5. Responsive — sidebar becomes a slide-in drawer below 1080px (spec §2.1), grids collapse to 1-col below 680px. This raises the existing 768px breakpoint used by the pre-Phase-1 shell to the spec's 1080px, reusing the same .mobile-open / .sidebar-overlay.show mechanism that profile.js / saved-jobs.php / applied-jobs.php already toggle — no JS changes required. ========================================================================== */ @media (max-width: 1080px) { .sidebar { transform: translateX(-100%) !important; transition: transform 0.28s var(--jh-ease) !important; box-shadow: var(--jh-shadow-lg) !important; } .sidebar.mobile-open { transform: translateX(0) !important; } .sidebar.collapsed { width: 280px !important; } .main-content, .sidebar.collapsed + .main-content { margin-left: 0 !important; } #mobileSidebarToggle, .mobile-sidebar-toggle { display: inline-flex !important; } } @media (max-width: 680px) { .top-navbar { padding: 0.85rem 1rem !important; } .page-title { font-size: 1.15rem !important; } }