@forwardimpact/pathway 0.1.0

package/app/css/pages/job-builder.css

@@ -0,0 +1,134 @@
+/**
+ * Job Builder Page Styles
+ *
+ * Job builder form and preview components.
+ */
+
+@layer pages {
+  .job-builder-form {
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    box-shadow: var(--shadow-md);
+    margin-bottom: var(--space-xl);
+  }
+
+  .job-preview {
+    background: var(--color-bg);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    margin-top: var(--space-lg);
+  }
+
+  .job-preview-title {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-sm);
+  }
+
+  .job-preview-valid {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    color: var(--color-success);
+  }
+
+  .job-preview-invalid {
+    color: var(--color-text-muted);
+  }
+
+  /* Radar charts */
+  .radar-container {
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .radar-title {
+    text-align: center;
+    margin-bottom: var(--space-md);
+  }
+
+  .radar-chart-wrapper {
+    display: flex;
+    justify-content: center;
+    overflow: visible;
+  }
+
+  @media (max-width: 640px) {
+    .radar-container {
+      overflow-x: auto;
+    }
+  }
+
+  /* Driver coverage */
+  .driver-coverage {
+    display: grid;
+    gap: var(--space-md);
+  }
+
+  .driver-coverage-item {
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .driver-coverage-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-sm);
+  }
+
+  .driver-coverage-name {
+    font-weight: 500;
+  }
+
+  .driver-coverage-score {
+    font-weight: 600;
+    color: var(--color-primary);
+  }
+
+  /* Job description section */
+  .job-description-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .job-description-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+  }
+
+  .job-description-header .text-muted {
+    margin: 0;
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .job-description-textarea {
+    width: 100%;
+    min-height: 400px;
+    padding: var(--space-md);
+    font-family:
+      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: var(--font-size-sm);
+    line-height: 1.6;
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    resize: vertical;
+    color: var(--color-text);
+  }
+
+  .job-description-textarea:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+}

package/app/css/pages/landing.css

@@ -0,0 +1,92 @@
+/**
+ * Landing Page Styles
+ *
+ * Hero section and landing page-specific components.
+ */
+
+@layer pages {
+  .landing-hero {
+    text-align: center;
+    padding: var(--space-2xl) 0;
+  }
+
+  .hero-title-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .brand-tag-hero {
+    position: absolute;
+    top: -8px;
+    right: -60px;
+    font-size: var(--font-size-sm);
+    padding: 4px 12px;
+    transform: rotate(12deg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .landing-hero h1 {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+  }
+
+  .landing-hero p {
+    font-size: var(--font-size-lg);
+    color: var(--color-text-muted);
+    max-width: 600px;
+    margin: 0 auto var(--space-xl);
+  }
+
+  @media (max-width: 640px) {
+    .landing-hero h1 {
+      font-size: var(--font-size-2xl);
+    }
+  }
+
+  /* Capability groups */
+  .capability-group {
+    margin-bottom: var(--space-xl);
+  }
+
+  .capability-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+  }
+
+  .capability-title {
+    margin: 0;
+  }
+
+  /* Grades timeline */
+  .grades-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .grade-timeline-item {
+    display: flex;
+    gap: var(--space-lg);
+    align-items: flex-start;
+  }
+
+  .grade-level-marker {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: var(--font-size-lg);
+    flex-shrink: 0;
+  }
+
+  .grade-timeline-content {
+    flex: 1;
+  }
+}

package/app/css/pages/lifecycle.css

@@ -0,0 +1,118 @@
+/**
+ * Lifecycle Page Styles
+ *
+ * Stage flow and lifecycle components.
+ */
+
+@layer pages {
+  .lifecycle-flow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-md);
+    flex-wrap: wrap;
+    padding: var(--space-lg);
+    background: var(--color-bg);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border);
+  }
+
+  .lifecycle-flow-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+  }
+
+  .lifecycle-stage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-md) var(--space-lg);
+    background: var(--color-surface);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    text-decoration: none;
+    color: var(--color-text);
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .lifecycle-stage:hover {
+    border-color: var(--color-primary);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .lifecycle-emoji {
+    font-size: 2rem;
+  }
+
+  .lifecycle-name {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  .lifecycle-arrow {
+    font-size: 1.5rem;
+    color: var(--color-text-muted);
+    font-weight: 300;
+  }
+
+  /* Page title row */
+  .page-title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    flex-wrap: wrap;
+  }
+
+  .page-title-row .page-title {
+    margin: 0;
+  }
+
+  /* Criteria and constraints */
+  .criteria-list,
+  .constraint-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+  }
+
+  .criteria-item,
+  .constraint-item {
+    padding: var(--space-xs) 0;
+    color: var(--color-text);
+  }
+
+  /* Handoffs */
+  .handoff-list {
+    display: grid;
+    gap: var(--space-md);
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+
+  .handoff-card {
+    padding: var(--space-md);
+  }
+
+  .handoff-header {
+    font-weight: 600;
+    margin-bottom: var(--space-xs);
+  }
+
+  .handoff-link {
+    text-decoration: none;
+    color: var(--color-primary);
+  }
+
+  .handoff-link:hover {
+    text-decoration: underline;
+  }
+
+  .handoff-prompt {
+    font-style: italic;
+    margin: 0;
+    font-size: 0.9rem;
+  }
+}

package/app/css/pages/progress-builder.css

@@ -0,0 +1,274 @@
+/**
+ * Career Progress Page
+ *
+ * Comparison radars, progression tables, change indicators.
+ */
+
+@layer pages {
+  .progress-detail-page {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  /* Comparison radars */
+  .comparison-radars {
+    display: flex;
+    gap: var(--space-xl);
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .comparison-radar .radar-legend {
+    display: flex;
+    gap: var(--space-lg);
+    justify-content: center;
+    margin-bottom: var(--space-md);
+  }
+
+  .radar-legend .legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-size: var(--font-size-sm);
+  }
+
+  .radar-legend .legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+  }
+
+  /* Progression tables */
+  .progression-tables {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+  }
+
+  .progression-group,
+  .comparison-group {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .progression-group-header,
+  .comparison-group-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: var(--color-bg);
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+  }
+
+  .group-icon {
+    font-size: var(--font-size-lg);
+  }
+
+  .collapsible-header {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .collapsible-header:hover {
+    background: var(--color-border);
+  }
+
+  .collapse-indicator {
+    margin-left: auto;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+
+  .no-change-group .progression-group-header,
+  .same-group .comparison-group-header {
+    color: var(--color-text-muted);
+  }
+
+  /* Progression table rows */
+  .progression-table .change-up {
+    background: rgba(16, 185, 129, 0.05);
+  }
+
+  .progression-table .change-down {
+    background: rgba(239, 68, 68, 0.05);
+  }
+
+  .change-cell {
+    font-weight: 600;
+  }
+
+  .change-cell.change-up {
+    color: var(--color-success);
+  }
+
+  .change-cell.change-down {
+    color: var(--color-error);
+  }
+
+  .change-cell.change-same {
+    color: var(--color-text-muted);
+  }
+
+  .change-cell.change-gained {
+    color: var(--color-info);
+  }
+
+  .change-cell.change-lost {
+    color: var(--color-warning);
+  }
+
+  .change-gained {
+    background: rgba(59, 130, 246, 0.05);
+  }
+
+  .change-lost {
+    background: rgba(245, 158, 11, 0.05);
+  }
+
+  .gained-badge,
+  .lost-badge {
+    display: inline-block;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--radius-sm);
+    margin-left: var(--space-xs);
+    vertical-align: middle;
+  }
+
+  .gained-badge {
+    background: rgba(59, 130, 246, 0.15);
+    color: var(--color-info);
+  }
+
+  .lost-badge {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--color-warning);
+  }
+
+  .gained-header {
+    color: var(--color-info);
+  }
+
+  .lost-header {
+    color: var(--color-warning);
+  }
+
+  .change-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  /* Level cell with dots and text */
+  td.level-cell {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  td.level-cell .level-bar {
+    display: inline-flex;
+    justify-content: center;
+  }
+
+  td.level-cell .level-label {
+    display: block;
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    margin-top: 2px;
+  }
+
+  /* Preview paths in selection page */
+  .preview-paths {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    margin-top: var(--space-sm);
+  }
+
+  .path-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: var(--font-size-sm);
+  }
+
+  .path-icon {
+    font-size: var(--font-size-lg);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 1280px) {
+    .comparison-radars {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .progression-table .level-label {
+      display: none;
+    }
+  }
+
+  /* Comparison section */
+  .comparison-selectors {
+    display: flex;
+    gap: var(--space-lg);
+    flex-wrap: wrap;
+    margin-bottom: var(--space-lg);
+  }
+
+  .comparison-selectors .form-group {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .comparison-selectors label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: var(--space-xs);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+
+  .comparison-selectors .form-select {
+    width: 100%;
+  }
+
+  .comparison-results {
+    margin-top: var(--space-md);
+  }
+
+  .comparison-placeholder {
+    padding: var(--space-xl);
+    text-align: center;
+    background: var(--color-bg);
+    border-radius: var(--radius-lg);
+    border: 2px dashed var(--color-border);
+  }
+
+  .comparison-error {
+    padding: var(--space-lg);
+    text-align: center;
+    background: var(--color-bg);
+    border-radius: var(--radius-lg);
+    color: var(--color-text-muted);
+  }
+
+  .comparison-result {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  @media (max-width: 1280px) {
+    .comparison-selectors {
+      flex-direction: column;
+    }
+
+    .comparison-selectors .form-group {
+      min-width: 100%;
+    }
+  }
+}