coursecode 0.1.0

package/framework/css/components/engagement.css

@@ -0,0 +1,412 @@
+/* ============================================================================
+   ENGAGEMENT INDICATOR - Circular progress, checklist, and progress bar
+   ============================================================================
+   
+   PURPOSE: Track and display learner engagement and completion status
+   
+   INCLUDES:
+   - Circular progress indicator in footer (SVG-based)
+   - Engagement checklist component
+   - Engagement progress bar
+   - Completion celebration state
+   - Dark mode and accessibility support
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY:
+   - Navigation footer (circular progress)
+   - Slide engagement tracking
+   - Completion indicators
+   
+   AI DEBUGGING TIPS:
+   - Progress not animating? Check stroke-dashoffset CSS variable
+   - Checkmark not appearing? Verify .engagement-progress.complete class
+   - High contrast too thick? Check @media (prefers-contrast: high)
+   - Animation jerky? Check @media (prefers-reduced-motion: reduce)
+   - Progress circle not rotating? Verify SVG transform: rotate(-90deg)
+   
+   STRUCTURE:
+   1. Footer engagement indicator (45-60)
+   2. SVG circle base (65-100)
+   3. Progress animation (105-125)
+   4. Checkmark (130-150)
+   5. Engagement indicator component (155-200)
+   6. Checklist (205-250)
+   7. Progress bar (255-295)
+   8. Completion state (300-320)
+   9. Dark mode (325-340)
+   10. High contrast (345-360)
+   11. Reduced motion (365-385)
+   12. Mobile adjustments (390-410)
+   
+   ============================================================================ */
+
+/* ============================================================================
+   ENGAGEMENT INDICATOR - CIRCULAR PROGRESS IN FOOTER
+   ============================================================================ */
+
+.engagement-indicator-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--space-8);
+  position: relative;
+  opacity: 1;
+}
+
+.engagement-indicator-footer[hidden] {
+  display: none;
+}
+
+/* SVG Circular Progress */
+.engagement-circle {
+  display: block;
+  transform: rotate(-90deg);
+  /* Start progress from top */
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+/* Track (background circle) */
+.engagement-track {
+  stroke: var(--border-strong);
+}
+
+/* Progress circle */
+.engagement-progress {
+  stroke: var(--color-primary);
+  /* stroke-dasharray and stroke-dashoffset are set by JavaScript */
+  /* Longer duration (0.8s) for smoother visual updates when timer ticks every second */
+  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+    stroke 0.3s ease;
+  transform-origin: center;
+}
+
+/* When complete, change color and add subtle animation */
+.engagement-progress.complete {
+  stroke: var(--color-success);
+  animation: pulse-success 0.6s ease-out;
+}
+
+@keyframes pulse-success {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+    filter: drop-shadow(0 0 6px var(--color-success));
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Checkmark */
+.engagement-checkmark {
+  fill: var(--color-success);
+  font-weight: bold;
+  opacity: 0;
+  transition: opacity 0.3s ease 0.2s;
+  /* Delay checkmark appearance */
+  pointer-events: none;
+  transform: rotate(90deg);
+  /* Counter-rotate the checkmark since parent SVG is rotated -90deg */
+  transform-origin: center;
+}
+
+/* ============================================================================
+   ENGAGEMENT INDICATOR COMPONENT (Slide-level tracking)
+   ============================================================================ */
+
+.engagement-indicator {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  margin: var(--space-4) 0;
+  box-shadow: var(--shadow-sm);
+}
+
+.engagement-indicator--top {
+  margin-bottom: var(--space-6);
+}
+
+.engagement-indicator--bottom {
+  margin-top: var(--space-6);
+}
+
+/* ============================================================================
+   PROGRESS BAR
+   ============================================================================ */
+
+.engagement-progress-bar {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  background: var(--bg-muted);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin-bottom: var(--space-3);
+}
+
+.engagement-progress-fill {
+  height: 100%;
+  width: var(--progress, 0%);
+  background: linear-gradient(90deg,
+      var(--color-primary),
+      var(--color-secondary));
+  transition: width 0.5s ease;
+  border-radius: var(--radius-md);
+}
+
+.engagement-progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+  z-index: 1;
+}
+
+/* ============================================================================
+   CHECKLIST
+   ============================================================================ */
+
+.engagement-checklist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.engagement-checklist-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast);
+}
+
+.engagement-checklist-item.incomplete {
+  color: var(--text-muted);
+}
+
+.engagement-checklist-item.complete {
+  color: var(--color-success);
+  font-weight: var(--font-weight-medium);
+}
+
+.engagement-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-lg);
+  line-height: 1;
+}
+
+.engagement-checklist-item.incomplete .engagement-icon {
+  color: var(--text-muted);
+}
+
+.engagement-checklist-item.complete .engagement-icon {
+  color: var(--color-success);
+}
+
+.engagement-label {
+  flex: 1;
+  font-size: var(--font-size-sm);
+}
+
+/* ============================================================================
+   COMPLETION STATE
+   ============================================================================ */
+
+.engagement-indicator.engagement-complete {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--color-success-alpha-10);
+  border: 1px solid var(--color-success-alpha-20);
+  border-radius: var(--radius-md);
+  color: var(--color-success);
+  font-weight: var(--font-weight-semibold);
+}
+
+.engagement-complete .engagement-icon {
+  font-size: var(--font-size-xl);
+}
+
+/* ============================================================================
+   DARK MODE SUPPORT
+   ============================================================================ */
+
+[data-theme="dark"] .engagement-track {
+  stroke: var(--border-strong);
+}
+
+[data-theme="dark"] .engagement-circle {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+}
+
+/* ============================================================================
+   HIGH CONTRAST MODE
+   ============================================================================ */
+
+[data-high-contrast="true"] .engagement-progress {
+  stroke-width: 4;
+}
+
+[data-high-contrast="true"] .engagement-track {
+  stroke-width: 4;
+  opacity: 0.8;
+}
+
+/* ============================================================================
+   REDUCED MOTION PREFERENCE
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .engagement-progress {
+    transition: none;
+  }
+
+  .engagement-checkmark {
+    transition: none;
+  }
+
+  .engagement-progress.complete {
+    animation: none;
+  }
+}
+
+/* ============================================================================
+   MOBILE ADJUSTMENTS
+   ============================================================================ */
+
+/* Hide footer progress indicator on mobile - next button disabled state
+   provides sufficient gating feedback without consuming footer space */
+@media (max-width: 767px) {
+  .engagement-indicator-footer {
+    display: none;
+  }
+}
+
+/* Tablet adjustments - slightly smaller */
+@media (max-width: 768px) {
+  .engagement-circle {
+    width: 28px;
+    height: 28px;
+  }
+
+  .engagement-indicator-footer {
+    margin-left: var(--space-2);
+  }
+
+  .engagement-indicator {
+    padding: var(--space-3);
+  }
+
+  .engagement-progress-bar {
+    height: 28px;
+  }
+
+  .engagement-progress-text {
+    font-size: var(--font-size-xs);
+  }
+
+  .engagement-label {
+    font-size: var(--font-size-xs);
+  }
+}
+
+/* Very small screens - even more compact */
+@media (max-width: 480px) {
+  .engagement-circle {
+    width: 24px;
+    height: 24px;
+  }
+
+  .engagement-checkmark {
+    font-size: var(--font-size-sm);
+  }
+}
+
+/* ============================================================================
+   DATA-LAYOUT VARIANTS
+   ============================================================================
+   Engagement styling controlled by data-layout attribute on <html>.
+   These styles are used by the layout system (framework/css/layouts/).
+   ============================================================================ */
+
+/* -----------------------------------------------------------------------------
+   Article & Focused: Progressive gating border indicator on next button
+   ----------------------------------------------------------------------------- 
+   The button border shows progress via conic-gradient.
+   Uses CSS custom property --engagement-progress (0-100) set by JS.
+   ----------------------------------------------------------------------------- */
+
+/* Hide the old circular engagement indicator - we use the button ring instead */
+[data-layout="article"] .engagement-indicator-footer,
+[data-layout="focused"] .engagement-indicator-footer {
+  display: none;
+}
+
+/* Hide engagement indicator in presentation mode */
+[data-layout="presentation"] #engagement-indicator {
+  display: none;
+}
+
+/* Gated state: border becomes the progress indicator */
+/* Uses !important to override global disabled button styles in buttons.css */
+[data-layout="article"] footer #nextBtn.gated,
+[data-layout="article"] footer #nextBtn.gated:disabled,
+[data-layout="focused"] footer #nextBtn.gated,
+[data-layout="focused"] footer #nextBtn.gated:disabled {
+  border: var(--border-width-sm, 1.5px) solid transparent !important;
+  background:
+    linear-gradient(var(--bg-inset), var(--bg-inset)) padding-box,
+    conic-gradient(from 0deg,
+      var(--color-primary) calc(var(--engagement-progress, 0) * 1%),
+      var(--color-gray-300) calc(var(--engagement-progress, 0) * 1%)) border-box !important;
+  transition: background 0.3s ease-out;
+  opacity: 1 !important;
+}
+
+/* Complete state: full green border with brief pulse animation */
+@keyframes border-complete {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.05);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+[data-layout="article"] footer #nextBtn.gated.engagement-complete,
+[data-layout="article"] footer #nextBtn.gated.engagement-complete:disabled,
+[data-layout="focused"] footer #nextBtn.gated.engagement-complete,
+[data-layout="focused"] footer #nextBtn.gated.engagement-complete:disabled {
+  background:
+    linear-gradient(var(--bg-inset), var(--bg-inset)) padding-box,
+    conic-gradient(from 0deg,
+      var(--color-success) 100%,
+      var(--color-success) 100%) border-box !important;
+  animation: border-complete 0.4s ease-out;
+}

package/framework/css/components/features.css

@@ -0,0 +1,35 @@
+/* ========================================
+   UI COMPONENT: Feature Showcase
+   Use for: Highlighting 3-4 key features
+   ======================================== */
+[data-component="features"] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-4);
+}
+
+[data-component="features"] .feature-item {
+  text-align: center;
+  padding: var(--space-4);
+  flex: 0 1 200px;
+  max-width: 280px;
+}
+
+[data-component="features"] .feature-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-3);
+  display: block;
+  color: var(--color-primary);
+}
+
+[data-component="features"] .feature-item h3 {
+  margin-bottom: var(--space-2);
+}
+
+@media (max-width: 640px) {
+  [data-component="features"] .feature-item {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}

package/framework/css/components/flip-cards.css

@@ -0,0 +1,253 @@
+/* ============================================================================
+   FLIP CARDS - Interactive 3D Flip Card Component
+   ============================================================================
+   
+   PURPOSE: Interactive cards that reveal content on hover/focus
+   
+   INCLUDES:
+   - Base flip card structure
+   - Front and back face styling
+   - 3D transform animations
+   - Accessibility support (focus-within)
+   
+   DEPENDENCIES:
+   - design-tokens.css
+   
+   USAGE:
+   <div class="flip-card">
+     <div class="flip-card-inner">
+       <div class="flip-card-front">
+         <!-- Front Content -->
+       </div>
+       <div class="flip-card-back">
+         <!-- Back Content -->
+       </div>
+     </div>
+   </div>
+   
+   ============================================================================ */
+
+.flip-card {
+  background-color: transparent;
+  perspective: 1000px;
+  width: 100%; /* Fill grid cell or container width */
+  min-width: 0; /* Allow shrinking in flex/grid contexts */
+  min-height: var(--size-card-min-height);
+  cursor: pointer; /* Indicate interactivity */
+}
+
+/* Flip cards in grid layouts need explicit sizing since content is absolutely positioned.
+   Without min-width, grid columns collapse to 0px because absolutely positioned children
+   contribute no intrinsic size. The width/height: 100% ensures cards fill their grid cell. */
+.card-grid .flip-card,
+.card-grid-2 .flip-card,
+.card-grid-3 .flip-card {
+  min-width: 200px; /* Establish minimum for grid sizing */
+  width: 100%; /* Fill the entire grid cell width */
+  height: 100%; /* Fill the entire grid cell height (for equal row heights) */
+}
+
+.flip-card-inner {
+  display: grid; /* Grid allows both faces to contribute to height */
+  width: 100%;
+  height: 100%; /* Fill parent flip-card height */
+  min-height: var(--size-card-min-height);
+  text-align: center;
+  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
+  transform-style: preserve-3d;
+}
+
+/* Flip when .is-flipped class is present (toggled via JS) */
+.flip-card.is-flipped .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+/* Both faces occupy the same grid cell, so the taller one sets the height */
+.flip-card-front,
+.flip-card-back {
+  grid-area: 1 / 1; /* Both in same cell */
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: var(--border-width-thin) solid var(--color-gray-300);
+  background-color: var(--bg-elevated);
+}
+
+.flip-card-front {
+  color: var(--color-text);
+  z-index: 2;
+}
+
+.flip-card-back {
+  transform: rotateY(180deg);
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border-color: var(--color-primary);
+  z-index: 1;
+}
+
+/* Flip card content container - handles text alignment */
+.flip-card-content {
+  width: 100%;
+  text-align: left; /* Default to left-aligned text for readability */
+}
+
+/* Front face content typically centered */
+.flip-card-front .flip-card-content {
+  text-align: center;
+}
+
+/* Back face keeps left alignment for lists/paragraphs but centers the block */
+.flip-card-back .flip-card-content {
+  text-align: center; /* Center headings */
+}
+
+/* Lists and paragraphs on back should be left-aligned for readability */
+.flip-card-back .flip-card-content ul,
+.flip-card-back .flip-card-content ol,
+.flip-card-back .flip-card-content p:not(:first-child) {
+  text-align: left;
+}
+
+/* High contrast text for back of card - inherit white for all text elements */
+.flip-card-back .flip-card-title,
+.flip-card-back .flip-card-text,
+.flip-card-back h1,
+.flip-card-back h2,
+.flip-card-back h3,
+.flip-card-back h4,
+.flip-card-back h5,
+.flip-card-back h6,
+.flip-card-back p,
+.flip-card-back li,
+.flip-card-back strong,
+.flip-card-back b {
+  color: inherit;
+}
+
+/* Ensure strong/bold text stays bold white, not theme colors */
+.flip-card-back strong,
+.flip-card-back b {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Styled list markers should also be white on dark backgrounds */
+.flip-card-back .list-styled li::marker,
+.flip-card-back .list-numbered li::marker {
+  color: var(--color-white);
+}
+
+/* Callouts inside flip card back need special handling */
+.flip-card-back .callout {
+  --callout-bg: rgba(255, 255, 255, 0.15);
+  --callout-border: rgba(255, 255, 255, 0.3);
+  background-color: var(--callout-bg);
+  border-color: var(--callout-border);
+}
+
+.flip-card-back .callout p,
+.flip-card-back .callout strong {
+  color: var(--color-white);
+}
+
+/* Warning callout gets a slightly different treatment for visibility */
+.flip-card-back .callout-warning {
+  --callout-bg: rgba(255, 193, 7, 0.2);
+  --callout-border: rgba(255, 193, 7, 0.5);
+}
+
+/* Variant: Light Back (Alternative for better readability) */
+.flip-card-back.bg-light {
+  background-color: var(--bg-subtle);
+  color: var(--color-text);
+  border-color: var(--color-gray-300);
+}
+.flip-card-back.bg-light .flip-card-title,
+.flip-card-back.bg-light .flip-card-text,
+.flip-card-back.bg-light h1,
+.flip-card-back.bg-light h2,
+.flip-card-back.bg-light h3,
+.flip-card-back.bg-light h4,
+.flip-card-back.bg-light p,
+.flip-card-back.bg-light li,
+.flip-card-back.bg-light strong {
+  color: var(--color-text);
+}
+
+.flip-card-back.bg-light .list-styled li::marker,
+.flip-card-back.bg-light .list-numbered li::marker {
+  color: var(--color-primary);
+}
+
+.flip-card-back.bg-light .callout {
+  --callout-bg: initial;
+  --callout-border: initial;
+  background-color: var(--callout-bg);
+  border-color: var(--callout-border);
+}
+
+/* Variant: Subtle/Light Semantic Backgrounds - Override white text with dark text */
+.flip-card-back.bg-primary-subtle,
+.flip-card-back.bg-secondary-subtle,
+.flip-card-back.bg-success-subtle,
+.flip-card-back.bg-warning-subtle,
+.flip-card-back.bg-danger-subtle,
+.flip-card-back.bg-info-subtle {
+  color: var(--color-text);
+  border-color: var(--color-gray-300);
+}
+
+.flip-card-back.bg-primary-subtle .flip-card-title,
+.flip-card-back.bg-primary-subtle .flip-card-text,
+.flip-card-back.bg-secondary-subtle .flip-card-title,
+.flip-card-back.bg-secondary-subtle .flip-card-text,
+.flip-card-back.bg-success-subtle .flip-card-title,
+.flip-card-back.bg-success-subtle .flip-card-text,
+.flip-card-back.bg-warning-subtle .flip-card-title,
+.flip-card-back.bg-warning-subtle .flip-card-text,
+.flip-card-back.bg-danger-subtle .flip-card-title,
+.flip-card-back.bg-danger-subtle .flip-card-text,
+.flip-card-back.bg-info-subtle .flip-card-title,
+.flip-card-back.bg-info-subtle .flip-card-text {
+  color: var(--color-text);
+  text-shadow: none;
+}
+
+/* Variant: Secondary Color */
+.flip-card-back.bg-secondary {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+  color: var(--color-text); /* Secondary is usually light/yellow */
+}
+
+/* Variant: Dark Color */
+.flip-card-back.bg-dark {
+  background-color: var(--color-gray-900);
+  border-color: var(--color-gray-900);
+}
+
+/* Content styling helpers */
+.flip-card-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-4);
+  display: block;
+}
+
+.flip-card-title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-2);
+}
+
+.flip-card-text {
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+}