osi-cards-lib 1.5.32 → 1.5.34

package/styles/components/sections/_section-animations.scss

@@ -0,0 +1,331 @@
+// =====================================================================
+// SECTION ANIMATIONS - Unified Animation System
+// =====================================================================
+//
+// Consolidated animation system for all sections.
+// All hover effects use shadow/color changes only (no transforms).
+// Easy to maintain and consistent across all sections.
+//
+// =====================================================================
+
+@use "design-tokens" as *;
+
+// =====================================================================
+// STANDARD CARD HOVER EFFECT
+// =====================================================================
+//
+// Primary hover effect for section cards.
+// Uses shadow and color transitions only (no transforms).
+//
+
+@mixin section-card-hover {
+  transition:
+    box-shadow var(--duration-base) var(--ease-out),
+    background var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out);
+
+  &:hover {
+    box-shadow: var(--shadow-lg);
+    background: var(--osi-section-item-background-hover);
+    border-color: var(--osi-section-item-border-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    box-shadow:
+      var(--shadow-lg),
+      0 0 0 4px rgba(var(--accent-rgb, 255, 121, 0), 0.1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &:hover {
+      box-shadow: var(--shadow-md);
+    }
+  }
+}
+
+// =====================================================================
+// ELEVATED CARD HOVER (Stronger Shadow)
+// =====================================================================
+//
+// For cards that need more prominent hover feedback.
+//
+
+@mixin section-card-hover-elevated {
+  transition:
+    box-shadow var(--duration-slow) var(--ease-out),
+    background var(--duration-slow) var(--ease-out),
+    border-color var(--duration-slow) var(--ease-out);
+
+  &:hover {
+    box-shadow: var(--shadow-xl);
+    background: var(--osi-section-item-background-hover);
+    border-color: var(--osi-section-item-border-hover);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// SUBTLE CARD HOVER (Lighter Shadow)
+// =====================================================================
+//
+// For cards that need minimal hover feedback.
+//
+
+@mixin section-card-hover-subtle {
+  transition:
+    box-shadow var(--duration-base) var(--ease-out),
+    background var(--duration-base) var(--ease-out);
+
+  &:hover {
+    box-shadow: var(--shadow-md);
+    background: var(--osi-section-item-background-hover);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// LIST ITEM HOVER
+// =====================================================================
+//
+// For list items - background and color changes only.
+//
+
+@mixin section-list-item-hover {
+  transition:
+    background var(--duration-base) var(--ease-out),
+    color var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out);
+
+  &:hover {
+    background: var(--surface-raised);
+    color: var(--foreground);
+    border-color: var(--border-strong);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// INTERACTIVE SURFACE HOVER
+// =====================================================================
+//
+// For clickable surfaces - color transitions only.
+//
+
+@mixin section-interactive-hover {
+  transition:
+    background var(--duration-base) var(--ease-out),
+    color var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out);
+
+  &:hover {
+    background: color-mix(in srgb, var(--osi-section-item-background) 90%, var(--foreground) 10%);
+    color: var(--accent);
+  }
+
+  &:active {
+    background: color-mix(in srgb, var(--osi-section-item-background) 85%, var(--foreground) 15%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// GLOW HOVER EFFECT
+// =====================================================================
+//
+// Adds a subtle glow effect on hover using box-shadow.
+//
+
+@mixin section-glow-hover {
+  transition:
+    box-shadow var(--duration-slow) var(--ease-out),
+    border-color var(--duration-slow) var(--ease-out);
+
+  &:hover {
+    box-shadow:
+      var(--shadow-lg),
+      0 0 20px rgba(var(--accent-rgb, 255, 121, 0), 0.2);
+    border-color: var(--accent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// ACCENT LINE HOVER
+// =====================================================================
+//
+// Shows an accent line on hover (top border effect).
+//
+
+@mixin section-accent-line-hover {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-out);
+    border-radius: var(--osi-section-item-border-radius) var(--osi-section-item-border-radius) 0 0;
+  }
+
+  &:hover::before {
+    opacity: 0.8;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      display: none;
+    }
+  }
+}
+
+// =====================================================================
+// ENTRANCE ANIMATIONS
+// =====================================================================
+//
+// Keyframe animations for section/item entrance.
+//
+
+@keyframes section-item-stream {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes section-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes section-fade-in-up {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// =====================================================================
+// STAGGER ANIMATION MIXINS
+// =====================================================================
+//
+// For animating lists of items with staggered delays.
+//
+
+@mixin section-item-animation {
+  &.section-item-streaming {
+    animation: section-item-stream var(--duration-base) var(--ease-out) forwards;
+  }
+
+  &.section-item-entered {
+    animation: none;
+  }
+
+  @for $i from 0 through 15 {
+    &.section-item-stagger-#{$i} {
+      animation-delay: calc(#{$i} * 30ms);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+@mixin legacy-item-animation {
+  &.item-streaming {
+    animation: section-item-stream var(--duration-base) var(--ease-out) forwards;
+  }
+
+  &.item-entered {
+    animation: none;
+  }
+
+  @for $i from 0 through 15 {
+    &.item-stagger-#{$i} {
+      animation-delay: calc(#{$i} * 30ms);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+@mixin legacy-field-animation {
+  &.field-streaming {
+    animation: section-item-stream var(--duration-base) var(--ease-out) forwards;
+  }
+
+  &.field-entered {
+    animation: none;
+  }
+
+  @for $i from 0 through 15 {
+    &.field-stagger-#{$i} {
+      animation-delay: calc(#{$i} * 30ms);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+// =====================================================================
+// REDUCED MOTION SUPPORT
+// =====================================================================
+//
+// Global reduced motion rules for all section animations.
+//
+
+@media (prefers-reduced-motion: reduce) {
+  .unified-card,
+  .section-card,
+  [class*="__card"],
+  [class*="-card"],
+  [class*="__item"],
+  [class*="-item"],
+  .metric-card,
+  .list-item,
+  .analytics-card {
+    transition: none !important;
+    animation: none !important;
+
+    &:hover {
+      transform: none !important;
+    }
+  }
+}
+

package/styles/components/sections/_section-shell.scss

@@ -0,0 +1,337 @@
+/* Base AI section container styling shared across card sections */
+/* =========================================================== */
+/* Consistent spacing across ALL sections - GLOBALLY ENFORCED */
+@import "design-system";
+@import "../../core/color-helpers";
+
+.ai-section {
+  --section-accent: var(--osi-section-accent);
+  --section-border-hover: var(--osi-section-border-hover);
+  --section-background: var(--osi-section-background);
+  --section-background-hover: var(--osi-section-background-hover);
+  --section-backdrop-filter: var(--osi-section-backdrop-filter);
+  --section-spacing-bottom: var(--osi-section-spacing-bottom);
+  --section-glow-background: var(--osi-section-glow-background);
+  --section-glow-opacity-hover: var(--osi-section-glow-opacity-hover);
+  --section-title-underline-length: var(--osi-section-title-underline-length);
+  --section-title-underline-hover-length: var(--osi-section-title-underline-hover-length);
+  --section-title-underline-height: var(--osi-section-title-underline-height);
+  --section-title-underline-offset: var(--osi-section-title-underline-offset);
+  --section-title-hover-color: var(--osi-section-title-hover-color);
+  height: 100% !important;
+  margin-bottom: var(--section-spacing-bottom) !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+
+  /* Performance optimization: CSS containment (no paint to avoid clipping shadows/glow) */
+  contain: layout style;
+
+  * {
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+  }
+
+  &:not(.masonry-item .ai-section) {
+    @include section-wrapper;
+  }
+
+  .masonry-item & {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--osi-section-gap) !important;
+  }
+}
+
+.ai-section--main {
+  --section-background: var(--osi-section-background-main);
+  --section-background-hover: var(--osi-section-background-main-hover);
+}
+
+.ai-section--contrast {
+  --section-background: var(--osi-section-background-contrast);
+  --section-background-hover: var(--osi-section-background-contrast-hover);
+}
+
+.ai-section__header {
+  @include section-header(column, var(--osi-section-header-gap));
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  padding: 0 0 var(--osi-section-header-padding-bottom) 0 !important;
+  border-bottom: none !important;
+  background: transparent !important;
+  margin: 0 !important;
+  flex-wrap: wrap !important;
+  gap: var(--osi-section-header-gap) !important;
+  text-align: left !important;
+}
+
+.ai-section__title {
+  @include section-heading-text;
+  font-size: var(--osi-section-title-font-size) !important;
+  font-weight: var(--osi-section-title-font-weight) !important;
+  letter-spacing: var(--osi-section-title-letter-spacing) !important;
+  line-height: var(--osi-section-title-line-height) !important;
+  color: var(--osi-section-title-color) !important;
+  opacity: 1 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  position: relative !important;
+  transition: var(--osi-section-title-transition) !important;
+  padding: 0 !important;
+  margin: 0 0 var(--osi-section-title-margin-bottom) 0 !important;
+  text-align: left !important;
+  font-family: inherit !important;
+  border: none !important;
+
+  &::before {
+    content: "" !important;
+    position: absolute !important;
+    left: 0 !important;
+    bottom: var(--osi-section-title-underline-offset) !important;
+    width: var(--osi-section-title-underline-length) !important;
+    height: var(--osi-section-title-underline-height) !important;
+    background: var(--osi-section-title-underline-color) !important;
+    border-radius: var(--radius-xs) !important;
+    transition:
+      width 0.22s ease,
+      opacity 0.22s ease !important;
+    transform-origin: left !important;
+    opacity: 0.6 !important;
+  }
+
+  &:hover {
+    color: var(--osi-section-title-color) !important;
+
+    &::before {
+      width: var(--osi-section-title-underline-hover-length) !important;
+      opacity: 1 !important;
+    }
+  }
+}
+
+.ai-section__icon {
+  display: none !important;
+  width: var(--icon-size-section) !important;
+  height: var(--icon-size-section) !important;
+}
+
+.ai-section__details {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--osi-section-header-gap) !important;
+  align-items: flex-start !important;
+  text-align: left !important;
+}
+
+.ai-section__description {
+  @include section-description-text;
+  color: var(--osi-section-description-color) !important;
+  letter-spacing: 0.01em !important;
+  line-height: 1.2 !important;
+  font-weight: 400 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+  text-align: left !important;
+  transition: var(--osi-section-description-transition) !important;
+  font-family: inherit !important;
+}
+
+.ai-section:hover .ai-section__description {
+  color: var(--osi-section-description-color-hover) !important;
+}
+
+.ai-section__badge {
+  @include standard-badge;
+  display: none !important;
+  padding: var(--tag-padding-y-sm) var(--tag-padding-x) !important;
+  border-radius: var(--radius-sm) !important;
+}
+
+/* Show badge for sections that need it */
+.ai-section--contact-card .ai-section__badge,
+.ai-section--solutions .ai-section__badge,
+.ai-section--event .ai-section__badge,
+.ai-section--chart .ai-section__badge,
+.ai-section--financials .ai-section__badge {
+  display: none !important;
+  align-items: center !important;
+  padding: var(--osi-section-badge-padding) !important;
+  background: var(--osi-section-badge-bg) !important;
+  color: var(--osi-section-badge-color) !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: var(--osi-section-border-radius) !important;
+  font-size: var(--card-meta-font-size, 0.6rem) !important;
+  font-weight: var(--card-meta-font-weight, 500) !important;
+  transition:
+    opacity 0.2s ease,
+    background 0.2s ease !important;
+  line-height: 1.2 !important;
+}
+
+.ai-section:hover .ai-section__badge {
+  opacity: 1 !important;
+  background: var(--osi-section-badge-bg-hover) !important;
+}
+
+.ai-section__body {
+  @include section-body(var(--osi-section-gap-internal));
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Consistent empty state styling for all sections */
+.ai-section .section-empty {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: var(--osi-section-padding) !important;
+  text-align: center !important;
+  color: var(--muted-foreground) !important;
+  min-height: auto !important;
+  border-radius: var(--radius-md) !important;
+  background: var(--osi-section-empty-bg) !important;
+  border: var(--osi-section-empty-border) !important;
+  transition:
+    opacity 0.2s ease,
+    background 0.2s ease !important;
+
+  lucide-icon {
+    margin-bottom: var(--osi-section-gap) !important;
+    opacity: var(--osi-section-empty-icon-opacity) !important;
+    color: var(--accent) !important;
+    transition: all 0.2s ease !important;
+  }
+
+  p {
+    font-size: var(--font-section-description, 0.85rem) !important;
+    margin: 0 !important;
+    font-weight: 500 !important;
+    font-family: inherit !important;
+  }
+
+  &:hover {
+    background: var(--osi-section-empty-bg-hover) !important;
+    border-color: var(--osi-section-empty-border-hover) !important;
+
+    lucide-icon {
+      opacity: var(--osi-section-empty-icon-opacity-hover) !important;
+    }
+  }
+}
+
+/* Section type differentiation - subtle visual identities */
+.ai-section--info {
+  --section-accent: var(--osi-section-accent-info);
+}
+
+.ai-section--analytics {
+  --section-accent: var(--osi-section-accent-analytics);
+}
+
+.ai-section--financials {
+  --section-accent: var(--osi-section-accent-financials);
+}
+
+.ai-section--map {
+  --section-accent: var(--osi-section-accent-map);
+}
+
+.ai-section--network-card {
+  --section-accent: var(--osi-section-accent-network);
+}
+
+.ai-section--contact-card {
+  --section-accent: var(--osi-section-accent-contact);
+}
+
+.ai-section--product {
+  --section-accent: var(--osi-section-accent-product);
+}
+
+.ai-section--solutions {
+  --section-accent: var(--osi-section-accent-solutions);
+}
+
+.ai-section--overview {
+  --section-accent: var(--osi-section-accent-overview);
+}
+
+.ai-section--list,
+.ai-section--info-list {
+  --section-accent: var(--osi-section-accent-list);
+}
+
+.ai-section--event {
+  --section-accent: var(--osi-section-accent-event);
+}
+
+.ai-section--chart {
+  --section-accent: var(--osi-section-accent-chart);
+}
+
+.ai-section--text-reference {
+  --section-accent: var(--osi-section-accent-reference);
+}
+
+.ai-section--quotation {
+  --section-accent: var(--osi-section-accent-quotation);
+}
+
+/* Fullscreen mode - consistent padding using main variables */
+.ai-card-surface--fullscreen {
+  .ai-section {
+    --section-padding: var(--osi-section-padding);
+    --section-spacing-bottom: var(--osi-section-spacing-bottom);
+    --section-gap: var(--osi-section-gap);
+    --section-gap-internal: var(--osi-section-gap-internal);
+    --section-title-underline-length: var(--osi-section-title-underline-length);
+    --section-title-underline-hover-length: var(--osi-section-title-underline-hover-length);
+    --section-title-underline-height: var(--osi-section-title-underline-height);
+    --section-title-underline-offset: var(--osi-section-title-underline-offset);
+    --section-box-shadow: none !important;
+    --section-box-shadow-hover: none !important;
+  }
+
+  .masonry-item {
+    box-shadow: var(--osi-section-shadow-fullscreen) !important;
+
+    &:hover {
+      box-shadow: var(--osi-section-shadow-fullscreen) !important;
+    }
+  }
+
+  .ai-section__header {
+    padding: 0 0 var(--osi-section-header-padding-bottom) 0 !important;
+    gap: var(--osi-section-header-gap) !important;
+  }
+
+  .ai-section__title {
+    font-size: var(--card-title-font-size, 0.95rem) !important;
+  }
+
+  .ai-section__body {
+    gap: var(--osi-section-gap-internal) !important;
+  }
+
+  .ai-section__description {
+    font-size: var(--card-meta-font-size, 0.6rem) !important;
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+}
+
+/* Theme overrides are handled automatically by theme system */
+/* No hardcoded colors needed - all sections use theme variables */
+/* Variables adapt based on theme selection (night/day/auto) */
+
+/* Theme system handles all light/dark variations automatically */
+/* All colors adapt through CSS variables defined in tokens/_master.scss */

package/styles/components/sections/_section-types.generated.scss

@@ -0,0 +1,30 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// Generated from section-registry.json
+// Run: npm run generate:from-registry
+//
+// Imports section SCSS files from their section folders.
+// Each section can inherit from design-system and add custom styles.
+
+// Section type styles - imported from section folders
+@import "../../../components/sections/analytics-section/analytics-section.scss"; // analytics
+@import "../../../components/sections/brand-colors-section/brand-colors-section.scss"; // brand-colors
+@import "../../../components/sections/chart-section/chart-section.scss"; // chart
+@import "../../../components/sections/contact-card-section/contact-card-section.scss"; // contact-card
+@import "../../../components/sections/event-section/event-section.scss"; // event
+@import "../../../components/sections/fallback-section/fallback-section.scss"; // fallback
+@import "../../../components/sections/faq-section/faq-section.scss"; // faq
+@import "../../../components/sections/financials-section/financials-section.scss"; // financials
+@import "../../../components/sections/gallery-section/gallery-section.scss"; // gallery
+@import "../../../components/sections/info-section/info-section.scss"; // info
+@import "../../../components/sections/list-section/list-section.scss"; // list
+@import "../../../components/sections/map-section/map-section.scss"; // map
+@import "../../../components/sections/network-card-section/network-card-section.scss"; // network-card
+@import "../../../components/sections/news-section/news-section.scss"; // news
+@import "../../../components/sections/overview-section/overview-section.scss"; // overview
+@import "../../../components/sections/product-section/product-section.scss"; // product
+@import "../../../components/sections/quotation-section/quotation-section.scss"; // quotation
+@import "../../../components/sections/social-media-section/social-media-section.scss"; // social-media
+@import "../../../components/sections/solutions-section/solutions-section.scss"; // solutions
+@import "../../../components/sections/text-reference-section/text-reference-section.scss"; // text-reference
+@import "../../../components/sections/timeline-section/timeline-section.scss"; // timeline
+@import "../../../components/sections/video-section/video-section.scss"; // video