Spaces:
Running
Running
| /* ═══════════════════════════════════════════════════════════ | |
| POWERPATH — ENTERPRISE POWER BI LEARNING PORTAL | |
| Production-Grade Stylesheet | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* ─── CSS CUSTOM PROPERTIES (Design Tokens) ─── */ | |
| :root { | |
| /* Core Palette */ | |
| --clr-bg: #0a0e1a; | |
| --clr-surface: #111827; | |
| --clr-surface-alt: #161d33; | |
| --clr-card: #14202e; | |
| --clr-card-hover: #1a2a3e; | |
| --clr-border: rgba(255,255,255,0.07); | |
| --clr-border-glow: rgba(56,162,255,0.25); | |
| /* Accent System */ | |
| --clr-accent: #38a2ff; | |
| --clr-accent-dim: rgba(56,162,255,0.15); | |
| --clr-accent-glow: rgba(56,162,255,0.35); | |
| --clr-gold: #f0c040; | |
| --clr-gold-dim: rgba(240,192,64,0.18); | |
| --clr-emerald: #34d399; | |
| --clr-emerald-dim: rgba(52,211,153,0.15); | |
| --clr-rose: #fb7185; | |
| --clr-rose-dim: rgba(251,113,133,0.15); | |
| --clr-violet: #a78bfa; | |
| --clr-violet-dim: rgba(167,139,250,0.15); | |
| --clr-amber: #fbbf24; | |
| --clr-amber-dim: rgba(251,191,36,0.15); | |
| --clr-sky: #7dd3fc; | |
| --clr-sky-dim: rgba(125,211,252,0.15); | |
| /* Level badges */ | |
| --clr-beginner: #34d399; | |
| --clr-beginner-bg: rgba(52,211,153,0.12); | |
| --clr-intermediate:#fbbf24; | |
| --clr-inter-bg: rgba(251,191,36,0.12); | |
| --clr-advanced: #fb7185; | |
| --clr-advanced-bg: rgba(251,113,133,0.12); | |
| /* Typography */ | |
| --font-display: 'Georgia', 'Times New Roman', serif; | |
| --font-body: 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif; | |
| --font-mono: 'Consolas', 'Courier New', monospace; | |
| /* Text */ | |
| --clr-text: #e8edf5; | |
| --clr-text-muted: #8b95a8; | |
| --clr-text-dim: #5a6478; | |
| /* Layout */ | |
| --nav-h: 56px; | |
| --radius: 10px; | |
| --radius-sm: 6px; | |
| --radius-lg: 16px; | |
| /* Shadows */ | |
| --shadow-card: 0 2px 20px rgba(0,0,0,0.3); | |
| --shadow-card-hover:0 6px 40px rgba(0,0,0,0.45); | |
| --shadow-glow: 0 0 24px var(--clr-accent-glow); | |
| --shadow-modal: 0 25px 80px rgba(0,0,0,0.7); | |
| /* Transitions */ | |
| --ease: cubic-bezier(.4,0,.2,1); | |
| --dur: 220ms; | |
| --dur-lg: 380ms; | |
| } | |
| /* ─── RESET & BASE ─── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| width: 100%; height: 100%; | |
| overflow: hidden; /* NO SCROLL — enforced */ | |
| background: var(--clr-bg); | |
| color: var(--clr-text); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } | |
| ul { list-style: none; } | |
| /* ─── SCROLLBAR (for inner containers only) ─── */ | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); } | |
| /* ═══════════════════════════════════════════════════════════ | |
| TOP NAVIGATION | |
| ═══════════════════════════════════════════════════════════════ */ | |
| .topnav { | |
| position: fixed; top: 0; left: 0; right: 0; | |
| height: var(--nav-h); | |
| background: rgba(10,14,26,0.85); | |
| backdrop-filter: blur(18px); | |
| -webkit-backdrop-filter: blur(18px); | |
| border-bottom: 1px solid var(--clr-border); | |
| display: flex; align-items: center; | |
| padding: 0 28px; | |
| gap: 24px; | |
| z-index: 100; | |
| } | |
| .nav-brand { | |
| display: flex; align-items: center; gap: 10px; | |
| flex-shrink: 0; | |
| } | |
| .nav-logo { | |
| font-size: 22px; | |
| color: var(--clr-accent); | |
| text-shadow: 0 0 12px var(--clr-accent-glow); | |
| } | |
| .nav-title { | |
| font-family: var(--font-display); | |
| font-size: 18px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| color: #fff; | |
| } | |
| /* Navigation Links */ | |
| .nav-links { | |
| display: flex; align-items: center; | |
| gap: 2px; | |
| flex: 1; | |
| justify-content: center; | |
| overflow-x: auto; | |
| padding: 4px 0; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .nav-links::-webkit-scrollbar { height: 0; } | |
| .nav-link { | |
| display: block; | |
| padding: 6px 13px; | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| color: var(--clr-text-muted); | |
| border-radius: var(--radius-sm); | |
| transition: color var(--dur) var(--ease), | |
| background var(--dur) var(--ease), | |
| box-shadow var(--dur) var(--ease); | |
| white-space: nowrap; | |
| position: relative; | |
| } | |
| .nav-link:hover { | |
| color: #fff; | |
| background: rgba(255,255,255,0.06); | |
| } | |
| .nav-link.active { | |
| color: var(--clr-accent); | |
| background: var(--clr-accent-dim); | |
| box-shadow: 0 0 12px var(--clr-accent-glow); | |
| } | |
| /* Progress bar under nav */ | |
| .nav-progress-bar { | |
| position: absolute; bottom: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: rgba(255,255,255,0.04); | |
| } | |
| .nav-progress-fill { | |
| height: 100%; | |
| width: 8.33%; /* 1/12 sections */ | |
| background: linear-gradient(90deg, var(--clr-accent), var(--clr-violet)); | |
| border-radius: 0 2px 2px 0; | |
| transition: width var(--dur-lg) var(--ease); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| PAGES (SECTIONS) | |
| ═══════════════════════════════════════════════════════════════ */ | |
| .page { | |
| position: absolute; | |
| top: var(--nav-h); left: 0; right: 0; | |
| bottom: 0; | |
| display: none; | |
| flex-direction: column; | |
| overflow-y: auto; /* inner scroll only */ | |
| overflow-x: hidden; | |
| padding: 28px 32px 24px; | |
| opacity: 0; | |
| transform: translateY(12px); | |
| transition: opacity var(--dur-lg) var(--ease), | |
| transform var(--dur-lg) var(--ease); | |
| } | |
| .page.active { | |
| display: flex; | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Subtle animated background noise per page */ | |
| .page::before { | |
| content: ''; | |
| position: fixed; inset: 0; z-index: -1; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 20% 50%, rgba(56,162,255,0.04) 0%, transparent 70%), | |
| radial-gradient(ellipse 60% 40% at 80% 70%, rgba(167,139,250,0.03) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| /* ─── PAGE HEADER ─── */ | |
| .page-header { | |
| text-align: center; | |
| margin-bottom: 22px; | |
| flex-shrink: 0; | |
| } | |
| .page-badge { | |
| display: inline-block; | |
| padding: 3px 14px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 1.4px; | |
| text-transform: uppercase; | |
| color: var(--clr-accent); | |
| background: var(--clr-accent-dim); | |
| border: 1px solid rgba(56,162,255,0.2); | |
| border-radius: 20px; | |
| margin-bottom: 10px; | |
| } | |
| .page-title { | |
| font-family: var(--font-display); | |
| font-size: 26px; | |
| font-weight: 700; | |
| color: #fff; | |
| margin-bottom: 6px; | |
| letter-spacing: -0.3px; | |
| } | |
| .page-desc { | |
| font-size: 13.5px; | |
| color: var(--clr-text-muted); | |
| max-width: 620px; | |
| margin: 0 auto; | |
| line-height: 1.5; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| CARDS GRID | |
| ═══════════════════════════════════════════════════════════════ */ | |
| .cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 16px; | |
| flex: 1; | |
| align-content: start; | |
| padding-bottom: 12px; | |
| } | |
| /* ─── INDIVIDUAL TOOL CARD ─── */ | |
| .tool-card { | |
| background: var(--clr-card); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| cursor: pointer; | |
| transition: background var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease), | |
| transform var(--dur) var(--ease), | |
| box-shadow var(--dur) var(--ease); | |
| position: relative; | |
| overflow: hidden; | |
| /* stagger animation set via JS inline delay */ | |
| opacity: 0; | |
| transform: translateY(18px); | |
| animation: cardReveal 0.45s var(--ease) forwards; | |
| } | |
| @keyframes cardReveal { | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tool-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: var(--card-accent, var(--clr-accent)); | |
| opacity: 0; | |
| transition: opacity var(--dur) var(--ease); | |
| } | |
| .tool-card:hover::before { opacity: 1; } | |
| .tool-card:hover { | |
| background: var(--clr-card-hover); | |
| border-color: var(--clr-border-glow); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-card-hover); | |
| } | |
| /* Card top row */ | |
| .card-top { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .card-icon { | |
| width: 38px; height: 38px; | |
| border-radius: var(--radius-sm); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 18px; | |
| background: var(--card-accent-dim, var(--clr-accent-dim)); | |
| flex-shrink: 0; | |
| } | |
| /* Skill Level Badge */ | |
| .level-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| } | |
| .level-badge .dot { width: 6px; height: 6px; border-radius: 50%; } | |
| .level-badge.beginner { color: var(--clr-beginner); background: var(--clr-beginner-bg); } | |
| .level-badge.beginner .dot { background: var(--clr-beginner); } | |
| .level-badge.intermediate { color: var(--clr-intermediate); background: var(--clr-inter-bg); } | |
| .level-badge.intermediate .dot { background: var(--clr-intermediate); } | |
| .level-badge.advanced { color: var(--clr-advanced); background: var(--clr-advanced-bg); } | |
| .level-badge.advanced .dot { background: var(--clr-advanced); } | |
| /* Card body */ | |
| .card-name { | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: #fff; | |
| letter-spacing: -0.2px; | |
| } | |
| .card-purpose { | |
| font-size: 12.5px; | |
| color: var(--clr-text-muted); | |
| line-height: 1.45; | |
| flex: 1; | |
| } | |
| /* Card footer — "View Details" hint */ | |
| .card-footer { | |
| margin-top: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 11.5px; | |
| color: var(--clr-accent); | |
| font-weight: 600; | |
| opacity: 0.7; | |
| transition: opacity var(--dur) var(--ease); | |
| } | |
| .tool-card:hover .card-footer { opacity: 1; } | |
| /* ═══════════════════════════════════════════════════════════ | |
| HERO SECTION (OVERVIEW) | |
| ═══════════════════════════════════════════════════════════════ */ | |
| #overview { | |
| justify-content: center; | |
| align-items: center; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .hero-bg { | |
| position: absolute; inset: 0; | |
| background: | |
| radial-gradient(ellipse 100% 80% at 50% 40%, rgba(56,162,255,0.07) 0%, transparent 65%), | |
| radial-gradient(ellipse 60% 50% at 10% 80%, rgba(167,139,250,0.05) 0%, transparent 60%), | |
| radial-gradient(ellipse 50% 40% at 90% 20%, rgba(52,211,153,0.04) 0%, transparent 55%); | |
| pointer-events: none; | |
| } | |
| /* Animated grid lines on hero bg */ | |
| .hero-bg::after { | |
| content: ''; | |
| position: absolute; inset: 0; | |
| background-image: | |
| linear-gradient(rgba(56,162,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(56,162,255,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%); | |
| -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%); | |
| } | |
| .hero-content { | |
| position: relative; z-index: 1; | |
| text-align: center; | |
| max-width: 780px; | |
| padding: 0 24px; | |
| animation: heroFadeIn 0.8s var(--ease) both; | |
| } | |
| @keyframes heroFadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .hero-badge { | |
| display: inline-block; | |
| padding: 5px 18px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 1.8px; | |
| text-transform: uppercase; | |
| color: var(--clr-accent); | |
| background: var(--clr-accent-dim); | |
| border: 1px solid rgba(56,162,255,0.2); | |
| margin-bottom: 20px; | |
| } | |
| .hero-title { | |
| font-family: var(--font-display); | |
| font-size: 54px; | |
| font-weight: 700; | |
| color: #fff; | |
| line-height: 1.1; | |
| margin-bottom: 18px; | |
| letter-spacing: -1px; | |
| } | |
| .hero-accent { | |
| display: block; | |
| background: linear-gradient(135deg, var(--clr-accent), var(--clr-violet)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-sub { | |
| font-size: 15px; | |
| color: var(--clr-text-muted); | |
| max-width: 560px; | |
| margin: 0 auto 28px; | |
| line-height: 1.6; | |
| } | |
| /* Hero stats row */ | |
| .hero-stats { | |
| display: flex; justify-content: center; gap: 16px; | |
| margin-bottom: 28px; | |
| flex-wrap: wrap; | |
| } | |
| .stat-card { | |
| background: var(--clr-card); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius); | |
| padding: 14px 22px; | |
| display: flex; flex-direction: column; align-items: center; | |
| gap: 2px; | |
| min-width: 100px; | |
| transition: border-color var(--dur) var(--ease), | |
| box-shadow var(--dur) var(--ease); | |
| } | |
| .stat-card:hover { | |
| border-color: var(--clr-accent); | |
| box-shadow: 0 0 16px var(--clr-accent-dim); | |
| } | |
| .stat-num { | |
| font-family: var(--font-display); | |
| font-size: 26px; | |
| font-weight: 700; | |
| color: #fff; | |
| } | |
| .stat-label { | |
| font-size: 11px; | |
| color: var(--clr-text-muted); | |
| letter-spacing: 0.4px; | |
| text-transform: uppercase; | |
| } | |
| /* Hero learning path */ | |
| .hero-path { | |
| display: flex; align-items: center; justify-content: center; | |
| gap: 10px; | |
| margin-bottom: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .path-step { | |
| display: flex; align-items: center; gap: 7px; | |
| padding: 7px 14px; | |
| border-radius: var(--radius-sm); | |
| background: var(--clr-surface-alt); | |
| border: 1px solid var(--clr-border); | |
| font-size: 12px; | |
| color: var(--clr-text-muted); | |
| transition: background var(--dur) var(--ease), | |
| color var(--dur) var(--ease); | |
| } | |
| .path-step.active-step { | |
| background: var(--clr-accent-dim); | |
| border-color: rgba(56,162,255,0.3); | |
| color: var(--clr-accent); | |
| } | |
| .path-icon { font-size: 9px; color: var(--clr-accent); } | |
| .path-arrow { color: var(--clr-text-dim); font-size: 16px; } | |
| /* CTA Button */ | |
| .hero-cta { | |
| display: inline-block; | |
| padding: 13px 34px; | |
| background: linear-gradient(135deg, var(--clr-accent), #2d8fd6); | |
| color: #fff; | |
| font-size: 14px; | |
| font-weight: 700; | |
| border-radius: var(--radius); | |
| letter-spacing: 0.3px; | |
| box-shadow: 0 4px 24px rgba(56,162,255,0.35); | |
| transition: transform var(--dur) var(--ease), | |
| box-shadow var(--dur) var(--ease); | |
| } | |
| .hero-cta:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 32px rgba(56,162,255,0.5); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| MODAL — TOOL DETAIL PANEL | |
| ═══════════════════════════════════════════════════════════════ */ | |
| .modal-overlay { | |
| position: fixed; inset: 0; | |
| background: rgba(0,0,0,0.6); | |
| backdrop-filter: blur(4px); | |
| -webkit-backdrop-filter: blur(4px); | |
| z-index: 200; | |
| display: flex; align-items: center; justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--dur) var(--ease); | |
| } | |
| .modal-overlay.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .modal-box { | |
| background: var(--clr-surface); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius-lg); | |
| width: 90%; max-width: 700px; | |
| max-height: 82vh; | |
| overflow-y: auto; | |
| padding: 32px 34px 28px; | |
| position: relative; | |
| box-shadow: var(--shadow-modal); | |
| transform: scale(0.94) translateY(16px); | |
| transition: transform var(--dur-lg) var(--ease); | |
| } | |
| .modal-overlay.open .modal-box { | |
| transform: scale(1) translateY(0); | |
| } | |
| .modal-close { | |
| position: absolute; top: 14px; right: 16px; | |
| font-size: 18px; | |
| color: var(--clr-text-muted); | |
| transition: color var(--dur) var(--ease); | |
| line-height: 1; | |
| } | |
| .modal-close:hover { color: #fff; } | |
| /* Modal inner layout */ | |
| .modal-header { | |
| display: flex; align-items: flex-start; gap: 16px; | |
| margin-bottom: 22px; | |
| } | |
| .modal-icon { | |
| width: 48px; height: 48px; | |
| border-radius: var(--radius); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 22px; | |
| flex-shrink: 0; | |
| } | |
| .modal-title-block h2 { | |
| font-family: var(--font-display); | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: #fff; | |
| margin-bottom: 4px; | |
| } | |
| /* Modal detail rows */ | |
| .modal-section { | |
| margin-bottom: 18px; | |
| } | |
| .modal-section-label { | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| letter-spacing: 1.2px; | |
| text-transform: uppercase; | |
| color: var(--clr-text-dim); | |
| margin-bottom: 6px; | |
| } | |
| .modal-section p, .modal-section .modal-text { | |
| font-size: 13.5px; | |
| color: var(--clr-text-muted); | |
| line-height: 1.55; | |
| } | |
| /* Best Practice & Common Mistake boxes */ | |
| .modal-box-highlight { | |
| border-radius: var(--radius-sm); | |
| padding: 12px 15px; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .modal-box-highlight.best { | |
| background: var(--clr-emerald-dim); | |
| border: 1px solid rgba(52,211,153,0.2); | |
| color: var(--clr-emerald); | |
| } | |
| .modal-box-highlight.mistake { | |
| background: var(--clr-rose-dim); | |
| border: 1px solid rgba(251,113,133,0.2); | |
| color: var(--clr-rose); | |
| } | |
| .modal-box-highlight .bh-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| margin-bottom: 3px; | |
| opacity: 0.8; | |
| } | |
| .modal-box-highlight .bh-text { | |
| opacity: 0.9; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| HIRING / FINAL SECTION | |
| ═══════════════════════════════════════════════════════════════ */ | |
| .hiring-layout { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| flex-shrink: 0; | |
| } | |
| .hiring-tier { | |
| border-radius: var(--radius); | |
| border: 1px solid var(--clr-border); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Tier header bars */ | |
| .tier-header { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 10px 16px; | |
| font-size: 13px; | |
| font-weight: 700; | |
| letter-spacing: 0.3px; | |
| } | |
| .tier-must .tier-header { | |
| background: linear-gradient(135deg, rgba(240,192,64,0.2), rgba(240,192,64,0.08)); | |
| border-bottom: 1px solid rgba(240,192,64,0.2); | |
| color: var(--clr-gold); | |
| } | |
| .tier-nice .tier-header { | |
| background: linear-gradient(135deg, rgba(56,162,255,0.15), rgba(56,162,255,0.05)); | |
| border-bottom: 1px solid rgba(56,162,255,0.2); | |
| color: var(--clr-accent); | |
| } | |
| .tier-edge .tier-header { | |
| background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(167,139,250,0.05)); | |
| border-bottom: 1px solid rgba(167,139,250,0.2); | |
| color: var(--clr-violet); | |
| } | |
| .tier-header .tier-icon { font-size: 14px; } | |
| /* Tier item lists */ | |
| .tier-items { | |
| padding: 10px 12px; | |
| background: var(--clr-card); | |
| flex: 1; | |
| overflow-y: auto; | |
| max-height: 310px; | |
| } | |
| .tier-item { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 8px 10px; | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 4px; | |
| transition: background var(--dur) var(--ease); | |
| cursor: default; | |
| } | |
| .tier-item:last-child { margin-bottom: 0; } | |
| .tier-item:hover { background: rgba(255,255,255,0.04); } | |
| .tier-item-rank { | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--clr-text-dim); | |
| width: 18px; | |
| text-align: center; | |
| flex-shrink: 0; | |
| } | |
| .tier-item-info { flex: 1; min-width: 0; } | |
| .tier-item-name { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #fff; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .tier-item-freq { | |
| font-size: 11px; | |
| color: var(--clr-text-dim); | |
| margin-top: 1px; | |
| } | |
| /* Frequency bar */ | |
| .freq-bar-wrap { | |
| width: 48px; | |
| height: 4px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| } | |
| .freq-bar { | |
| height: 100%; | |
| border-radius: 2px; | |
| background: var(--clr-accent); | |
| } | |
| .tier-must .freq-bar { background: var(--clr-gold); } | |
| .tier-nice .freq-bar { background: var(--clr-accent); } | |
| .tier-edge .freq-bar { background: var(--clr-violet); } | |
| /* ─── Hiring Insights ─── */ | |
| .hiring-insights { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .insights-title { | |
| font-family: var(--font-display); | |
| font-size: 16px; | |
| color: #fff; | |
| margin-bottom: 12px; | |
| flex-shrink: 0; | |
| } | |
| .insights-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); | |
| gap: 12px; | |
| overflow-y: auto; | |
| padding-bottom: 8px; | |
| } | |
| .insight-card { | |
| background: var(--clr-card); | |
| border: 1px solid var(--clr-border); | |
| border-radius: var(--radius); | |
| padding: 16px; | |
| transition: border-color var(--dur) var(--ease); | |
| opacity: 0; | |
| animation: cardReveal 0.45s var(--ease) forwards; | |
| } | |
| .insight-card:hover { border-color: var(--clr-border-glow); } | |
| .insight-company { | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--clr-accent); | |
| letter-spacing: 0.4px; | |
| margin-bottom: 4px; | |
| } | |
| .insight-role { | |
| font-size: 11px; | |
| color: var(--clr-text-dim); | |
| margin-bottom: 8px; | |
| } | |
| .insight-tags { | |
| display: flex; flex-wrap: wrap; gap: 5px; | |
| } | |
| .insight-tag { | |
| padding: 3px 9px; | |
| border-radius: 10px; | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| background: var(--clr-surface-alt); | |
| color: var(--clr-text-muted); | |
| border: 1px solid var(--clr-border); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| ANIMATION UTILITIES | |
| ═══════════════════════════════════════════════════════════════ */ | |
| /* Stagger handled via JS animation-delay on .tool-card */ | |
| /* ═══════════════════════════════════════════════════════════ | |
| RESPONSIVE ADJUSTMENTS (laptop-safe) | |
| ═══════════════════════════════════════════════════════════════ */ | |
| @media (max-width: 1100px) { | |
| .hero-title { font-size: 42px; } | |
| .page { padding: 22px 24px 18px; } | |
| .cards-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } | |
| .hiring-layout { grid-template-columns: repeat(3, 1fr); gap: 10px; } | |
| } | |
| @media (max-width: 900px) { | |
| .hero-title { font-size: 34px; } | |
| .hero-sub { font-size: 14px; } | |
| .nav-link { padding: 5px 9px; font-size: 11.5px; } | |
| .cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } | |
| .hiring-layout { | |
| grid-template-columns: 1fr; | |
| max-height: 360px; | |
| overflow-y: auto; | |
| } | |
| .hiring-insights { min-height: auto; } | |
| } | |
| @media (max-width: 680px) { | |
| .topnav { padding: 0 12px; } | |
| .nav-title { display: none; } | |
| .hero-title { font-size: 28px; } | |
| .page { padding: 18px 14px 14px; } | |
| .page-title { font-size: 22px; } | |
| .cards-grid { grid-template-columns: 1fr; } | |
| .hiring-layout { grid-template-columns: 1fr; } | |
| .insights-grid { grid-template-columns: 1fr; } | |
| .modal-box { width: 95%; padding: 22px 18px; max-height: 88vh; } | |
| } | |