osi-cards-lib 1.5.32 → 1.5.34

package/styles/components/cards/_ai-card.scss

@@ -0,0 +1,718 @@
+/* ===================================================================
+   AI Card Styles - Unified with Docs App
+   =================================================================== */
+
+/* Host element styles - transparent container with padding */
+:host {
+  display: block;
+  padding: var(--osi-card-padding);
+  background: transparent !important;
+  background-color: transparent !important;
+
+  /* Responsive: reduce padding on mobile */
+  @media (max-width: 480px) {
+    padding: var(--osi-card-padding-mobile);
+  }
+}
+
+.ai-card-surface {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0; // Allow content to determine height
+  overflow: visible;
+
+  /* CSS Isolation */
+  isolation: isolate;
+
+  /* Performance optimization: CSS containment (no paint to avoid clipping shadows/glow) */
+  contain: layout style;
+
+  /* Card base */
+  @include surface-ai-card-base;
+
+  /* ========== MAIN CARD SPECIFIC STYLING (Theme-aware) ========== */
+  /* These are specific to the main card container, not sections */
+
+  /* Background - follows theme but has card-specific styling */
+  background: var(--osi-card-background) !important;
+
+  /* Backdrop filter - blur effect for glassmorphism */
+  backdrop-filter: var(--osi-card-backdrop-filter) !important;
+  -webkit-backdrop-filter: var(--osi-card-backdrop-filter) !important;
+
+  /* Border - card-specific (stronger than section borders) */
+  border: var(--osi-card-border) !important;
+
+  /* Box shadow - card-specific elevation */
+  box-shadow: var(--osi-card-shadow) !important;
+
+  /* Padding - card-specific spacing */
+  padding: var(--osi-card-padding) !important;
+  padding-bottom: var(--osi-card-padding) !important;
+
+  /* Border radius - card-specific (larger than sections) */
+  border-radius: var(--osi-card-border-radius) !important;
+
+  /* Gap - specific space between header and sections */
+  gap: var(--osi-card-gap) !important;
+  /* ========== END CARD SPECIFIC STYLES ========== */
+
+  /* Smooth transitions */
+  transition:
+    var(--osi-card-transition-border), var(--osi-card-transition-background),
+    var(--osi-card-transition-shadow) !important;
+
+  /* Text rendering optimization */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1 {
+    transition: opacity 0.2s ease;
+  }
+}
+
+.ai-card-surface:hover {
+  @include surface-ai-card-hover;
+
+  /* ========== CARD HOVER - Theme-aware with card-specific effects ========== */
+  /* Background hover - card-specific (different from sections) */
+  background: var(--osi-card-background-hover) !important;
+
+  /* Border hover - card-specific accent */
+  border: var(--osi-card-border-hover) !important;
+
+  /* Box shadow hover - card-specific elevation */
+  box-shadow: var(--osi-card-shadow-hover) !important;
+  /* ========== END CARD HOVER ========== */
+}
+
+.ai-card-surface--fullscreen {
+  /* Fullscreen styling - use SAME background as normal card */
+  border: var(--osi-card-border-fullscreen) !important;
+  box-shadow: var(--osi-card-shadow-fullscreen) !important;
+  background: var(--osi-card-background-fullscreen) !important; /* Same as normal mode */
+  max-height: none !important;
+  max-width: none !important;
+  width: 100% !important;
+  overflow: visible !important;
+  padding: var(--osi-card-padding) !important;
+
+  /* Disable hover background change in fullscreen */
+  &:hover {
+    background: var(
+      --osi-card-background-fullscreen
+    ) !important; /* Keep same background on hover */
+    border: var(--osi-card-border-fullscreen) !important;
+    box-shadow: var(--osi-card-shadow-fullscreen) !important;
+  }
+
+  /* Disable all tilt effects in fullscreen - handled by _tilt.scss */
+  /* Tilt effects are disabled via .ai-card-surface--fullscreen selector in _tilt.scss */
+
+  /* Remove box-shadow glow from masonry items (sections) in fullscreen */
+  .masonry-item {
+    box-shadow: none !important;
+
+    &:hover {
+      box-shadow: none !important;
+    }
+  }
+
+  /* Compact header - invisible container */
+  .ai-card-header {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .ai-card-title {
+    font-size: var(--text-sm) !important;
+  }
+}
+
+.ai-card-fullscreen-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osi-card-fullscreen-btn-size);
+  height: var(--osi-card-fullscreen-btn-size);
+  border-radius: var(--osi-card-fullscreen-btn-radius);
+  background: var(--osi-card-fullscreen-btn-bg);
+  border: var(--border-width-default) solid var(--osi-card-fullscreen-btn-border);
+  color: var(--foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  /* Position absolutely in top-right corner */
+  position: absolute;
+  top: var(--osi-card-padding);
+  right: var(--osi-card-padding);
+  z-index: 100;
+}
+
+.ai-card-fullscreen-btn:hover {
+  transform: translateY(calc(var(--motion-distance-xs) * -1));
+  background: var(--osi-card-fullscreen-btn-bg-hover);
+  border-color: var(--osi-card-fullscreen-btn-border-hover);
+  box-shadow: var(--osi-card-fullscreen-btn-shadow);
+}
+
+.ai-card-fullscreen-btn:active {
+  transform: translateY(0);
+}
+
+.ai-card-fullscreen-btn__icon {
+  color: currentColor;
+}
+
+.ai-card-header {
+  position: relative;
+  z-index: 10;
+  /* INVISIBLE CONTAINER - No visual styling */
+  /* NO PADDING - completely removed */
+  padding: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-block: 0 !important;
+  padding-block-start: 0 !important;
+  padding-block-end: 0 !important;
+  padding-inline: 0 !important;
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-element-gap-md);
+  /* NO BORDER - completely invisible */
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-image: none !important;
+  border-block: none !important;
+  border-block-start: none !important;
+  border-block-end: none !important;
+  border-inline: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  /* NO BACKGROUND - completely transparent */
+  background: transparent !important;
+  background-color: transparent !important;
+  backdrop-filter: none !important;
+  /* NO BOX SHADOW - completely invisible */
+  box-shadow: none !important;
+  /* NO BORDER RADIUS - no visual styling */
+  border-radius: 0 !important;
+  /* NO OUTLINE - no visual styling */
+  outline: none !important;
+  outline-offset: 0 !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+}
+
+.ai-card-header::before {
+  display: none !important;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-image: none !important;
+  border-block: none !important;
+  border-inline: none !important;
+  padding: 0 !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+  outline: none !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.ai-card-header::after {
+  display: none !important;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-image: none !important;
+  border-block: none !important;
+  border-inline: none !important;
+  padding: 0 !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+  outline: none !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.ai-card-title-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-element-gap-xs);
+}
+
+.ai-card-eyebrow {
+  font-size: var(--font-card-eyebrow);
+  letter-spacing: 0.08em;
+  text-transform: none;
+  color: var(--osi-card-eyebrow-color);
+  font-weight: 600;
+  opacity: 0.9;
+}
+
+/* Removed .ai-card-title-group - content moved up one level */
+
+.ai-card-title {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+  text-transform: none;
+
+  /* ABSOLUTE NO BORDERS - MAXIMUM SPECIFICITY */
+  border: 0 !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-top: 0 !important;
+  border-right: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 0 !important;
+  border-top: none !important;
+  border-right: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-block: none !important;
+  border-inline: none !important;
+  border-image: none !important;
+  border-radius: 0 !important;
+
+  /* NO OUTLINES */
+  outline: none !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+  outline-offset: 0 !important;
+
+  /* NO PADDING */
+  padding: 0 !important;
+  padding-top: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+
+  /* NO MARGIN */
+  margin: 0 !important;
+  margin-top: 0 !important;
+  margin-right: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: 0 !important;
+  margin-block: 0 !important;
+  margin-inline: 0 !important;
+
+  /* NO SHADOWS OR DECORATIONS */
+  box-shadow: none !important;
+  text-decoration: none !important;
+  text-decoration-line: none !important;
+  text-decoration-style: none !important;
+  text-decoration-color: transparent !important;
+  text-underline-offset: 0 !important;
+  text-decoration-thickness: 0 !important;
+
+  /* NO PSEUDO-ELEMENT BORDERS */
+  &::before,
+  &::after {
+    display: none !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-style: none !important;
+    border-color: transparent !important;
+    border-top: none !important;
+    border-right: none !important;
+    border-bottom: none !important;
+    border-left: none !important;
+    border-block: none !important;
+    border-inline: none !important;
+    border-image: none !important;
+    outline: none !important;
+    outline-width: 0 !important;
+    outline-style: none !important;
+    outline-color: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    padding-top: 0 !important;
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
+    padding-left: 0 !important;
+    padding-block: 0 !important;
+    padding-inline: 0 !important;
+    margin: 0 !important;
+    content: none !important;
+  }
+}
+
+.ai-card-type-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--card-element-gap-sm);
+  padding: var(--tag-padding-sm);
+  border-radius: var(--radius-full);
+  border: var(--border-width-default) solid var(--osi-card-type-pill-border);
+  background: var(--osi-card-type-pill-bg);
+  text-transform: none;
+  letter-spacing: 0.05em;
+  font-size: var(--font-card-meta);
+  font-weight: 600;
+  color: var(--osi-card-type-pill-color);
+}
+
+.ai-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--card-element-gap-md);
+  text-transform: none;
+  font-size: var(--font-card-meta);
+  letter-spacing: 0.05em;
+  color: var(--osi-card-meta-color);
+}
+
+.ai-card-meta__chip {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--card-element-gap-md);
+  padding: var(--tag-padding-sm);
+  border-radius: var(--radius-full);
+  border: var(--border-width-default) solid var(--osi-card-meta-chip-border);
+  background: var(--osi-card-meta-chip-bg);
+}
+
+.ai-card-meta__chip-dot {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  border-radius: var(--radius-full);
+  background: var(--osi-card-meta-chip-dot-primary);
+  box-shadow: var(--osi-card-meta-chip-dot-shadow);
+}
+
+.ai-card-meta__chip-dot--primary {
+  background: var(--osi-card-meta-chip-dot-primary);
+}
+
+.ai-card-meta__chip-dot--secondary {
+  background: var(--osi-card-meta-chip-dot-secondary);
+}
+
+.ai-card-meta__chip-dot--tertiary {
+  background: var(--osi-card-meta-chip-dot-tertiary);
+}
+
+.ai-card-meta__chip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1;
+}
+
+.ai-card-meta__chip-label {
+  font-size: 0.48rem;
+  letter-spacing: 0.05em;
+  text-transform: none;
+  color: var(--osi-card-meta-color);
+  font-weight: 600;
+}
+
+.ai-card-meta__chip-value {
+  font-size: var(--font-card-meta-value);
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: 0.01em;
+}
+
+.ai-card-body {
+  position: relative;
+  z-index: 10;
+  flex: 1;
+  /* INVISIBLE CONTAINER - No visual styling */
+  /* NO PADDING - completely removed */
+  padding: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-block: 0 !important;
+  padding-block-start: 0 !important;
+  padding-block-end: 0 !important;
+  padding-inline: 0 !important;
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
+  margin: 0 !important;
+  margin-bottom: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--osi-card-body-gap); /* Constant gap between sections */
+  min-height: 0;
+  /* Allow content to flow properly - no overflow clipping */
+  overflow: visible;
+  /* NO BORDER - completely invisible */
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-image: none !important;
+  border-block: none !important;
+  border-block-start: none !important;
+  border-block-end: none !important;
+  border-inline: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
+  /* NO BACKGROUND - completely transparent */
+  background: transparent !important;
+  background-color: transparent !important;
+  backdrop-filter: none !important;
+  /* NO BOX SHADOW - completely invisible */
+  box-shadow: none !important;
+  /* NO BORDER RADIUS - no visual styling */
+  border-radius: 0 !important;
+  /* NO OUTLINE - no visual styling */
+  outline: none !important;
+  outline-offset: 0 !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+}
+
+.ai-card-body::before {
+  display: none !important;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-image: none !important;
+  border-block: none !important;
+  border-inline: none !important;
+  padding: 0 !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+  outline: none !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.ai-card-body::after {
+  display: none !important;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  border-image: none !important;
+  border-block: none !important;
+  border-inline: none !important;
+  padding: 0 !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+  outline: none !important;
+  outline-width: 0 !important;
+  outline-style: none !important;
+  outline-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Actions are now direct children of .ai-card-body - no wrapper container */
+/* Removed .ai-card-actions container - actions are now direct children */
+
+.ai-card-action {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--card-element-gap-xl);
+  padding: var(--space-2) var(--space-5);
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  font-size: var(--font-card-action, 0.875rem);
+  letter-spacing: 0.01em;
+  border: var(--border-width-default) solid transparent;
+  text-transform: none;
+  cursor: pointer;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ai-card-action--primary {
+  background: var(--osi-card-action-primary-bg);
+  color: var(--osi-card-action-primary-color);
+  border-color: var(--osi-card-action-primary-border);
+  box-shadow: var(--osi-card-action-primary-shadow);
+}
+
+.ai-card-action--primary:hover {
+  transform: translateY(calc(var(--motion-distance-xs) * -0.5));
+  box-shadow: var(--osi-card-action-primary-shadow-hover);
+  background: var(--osi-card-action-primary-bg-hover);
+  border-color: var(--osi-card-action-primary-bg);
+}
+
+.ai-card-action--secondary {
+  background: var(--osi-card-action-secondary-bg);
+  color: var(--osi-card-action-secondary-color);
+  border-color: var(--osi-card-action-secondary-border);
+  box-shadow: var(--osi-card-action-secondary-shadow);
+}
+
+.ai-card-action--secondary:hover {
+  transform: translateY(calc(var(--motion-distance-xs) * -0.5));
+  border-color: var(--osi-card-action-secondary-border-hover);
+  box-shadow: var(--osi-card-action-secondary-shadow-hover);
+  background: var(--osi-card-action-secondary-bg-hover);
+}
+
+.ai-card-action__shine {
+  position: absolute;
+  inset: 0;
+  background: var(--osi-card-shine-gradient-primary);
+  opacity: 0;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.ai-card-action:hover .ai-card-action__shine {
+  opacity: 1;
+}
+
+.ai-card-action--primary .ai-card-action__shine {
+  background: var(--osi-card-shine-gradient-primary);
+}
+
+.ai-card-action--secondary .ai-card-action__shine {
+  background: var(--osi-card-shine-gradient-secondary);
+}
+
+.ai-card-action__content {
+  position: relative;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--card-element-gap-lg);
+}
+
+.ai-card-action__icon {
+  color: currentColor;
+  opacity: 0.9;
+  transition:
+    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ai-card-action__label {
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ai-card-action:hover .ai-card-action__icon {
+  transform: translateX(var(--motion-distance-xs));
+  opacity: 1;
+}
+
+.ai-card-action:hover .ai-card-action__label {
+  transform: translateX(calc(var(--motion-distance-xs) * 0.5));
+}
+
+.ai-card-footnote {
+  margin-top: auto;
+  /* Add bottom margin for proper spacing */
+  margin-bottom: 0 !important;
+  /* NO PADDING - compact design */
+  padding: 0 !important;
+  padding-bottom: 0 !important;
+  /* NO BORDER - removed border */
+  border: none !important;
+  border-top: none !important;
+  text-align: center;
+  /* MUCH SMALLER FONT - reduced font size */
+  font-size: var(--text-xs) !important; /* Reduced from default */
+  letter-spacing: 0.08em;
+  text-transform: none;
+  color: var(--osi-card-footnote-color);
+  line-height: 1.2;
+}
+
+/* All sizing is now continuous via clamp() - no discrete breakpoints */
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-card-surface {
+    transition: none !important;
+    transform: none !important;
+    box-shadow: var(--card-box-shadow) !important;
+  }
+
+  .ai-card-surface::before {
+    opacity: 0 !important;
+  }
+
+  .ai-card-surface:hover {
+    transform: none !important;
+  }
+}
+
+/* Light theme - handled automatically by theme system */
+/* No overrides needed - theme variables handle light/dark/day/night */
+/* Variables used:
+ * - var(--ai-card-background) adapts to theme
+ * - var(--theme-ai-card-border) adapts to theme
+ * - var(--theme-ai-card-box-shadow) adapts to theme
+ *
+ * Theme definitions in tokens/_master.scss:
+ * - Light theme: --theme-ai-card-background: #ffffff
+ * - Dark theme: --theme-ai-card-background: #141414
+ * - Base theme: --theme-ai-card-background: var(--background)
+ */