osi-cards-lib 1.5.30 → 1.5.32

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

@@ -1,718 +0,0 @@
-/* ===================================================================
-   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)
- */