snow-flow 3.4.35 → 3.4.39

package/website/components/layout/LayoutComponents.css

@@ -0,0 +1,697 @@
+/* Layout Components - Black/White Minimalist Design */
+
+/* =============================================================================
+   CSS Custom Properties
+   ============================================================================= */
+
+:root {
+  /* Spacing Scale */
+  --sf-space-xs: 0.25rem;    /* 4px */
+  --sf-space-sm: 0.5rem;     /* 8px */
+  --sf-space-md: 1rem;       /* 16px */
+  --sf-space-lg: 1.5rem;     /* 24px */
+  --sf-space-xl: 2rem;       /* 32px */
+  --sf-space-2xl: 3rem;      /* 48px */
+  --sf-space-3xl: 4rem;      /* 64px */
+
+  /* Border Radius */
+  --sf-radius-sm: 4px;
+  --sf-radius-md: 8px;
+  --sf-radius-lg: 12px;
+  --sf-radius-xl: 16px;
+
+  /* Shadows */
+  --sf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --sf-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --sf-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --sf-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
+  --sf-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
+
+  /* Colors */
+  --sf-bg-primary: #ffffff;
+  --sf-bg-secondary: #f8f9fa;
+  --sf-bg-tertiary: #f0f0f0;
+  --sf-bg-dark: #1a1a1a;
+  
+  --sf-border-light: rgba(0, 0, 0, 0.1);
+  --sf-border-medium: rgba(0, 0, 0, 0.2);
+  
+  --sf-gradient-primary: linear-gradient(135deg, #000000 0%, #333333 100%);
+  --sf-gradient-secondary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  --sf-gradient-divider: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
+
+  /* Transitions */
+  --sf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --sf-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --sf-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* =============================================================================
+   Container Component
+   ============================================================================= */
+
+.sf-container {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.sf-container--fluid {
+  max-width: none !important;
+  width: 100%;
+}
+
+/* Container Padding Variants */
+.sf-container--none {
+  padding: 0;
+}
+
+.sf-container--small {
+  padding: 0 var(--sf-space-sm);
+}
+
+.sf-container--medium {
+  padding: 0 var(--sf-space-md);
+}
+
+.sf-container--large {
+  padding: 0 var(--sf-space-lg);
+}
+
+.sf-container--xl {
+  padding: 0 var(--sf-space-xl);
+}
+
+/* Responsive Container Padding */
+@media (min-width: 640px) {
+  .sf-container--small { padding: 0 var(--sf-space-md); }
+  .sf-container--medium { padding: 0 var(--sf-space-lg); }
+  .sf-container--large { padding: 0 var(--sf-space-xl); }
+  .sf-container--xl { padding: 0 var(--sf-space-2xl); }
+}
+
+@media (min-width: 1024px) {
+  .sf-container--small { padding: 0 var(--sf-space-lg); }
+  .sf-container--medium { padding: 0 var(--sf-space-xl); }
+  .sf-container--large { padding: 0 var(--sf-space-2xl); }
+  .sf-container--xl { padding: 0 var(--sf-space-3xl); }
+}
+
+/* =============================================================================
+   Grid Component
+   ============================================================================= */
+
+.sf-grid {
+  display: grid;
+  width: 100%;
+}
+
+/* Grid Gap Variants */
+.sf-grid--gap-none { gap: 0; }
+.sf-grid--gap-xs { gap: var(--sf-space-xs); }
+.sf-grid--gap-small { gap: var(--sf-space-sm); }
+.sf-grid--gap-medium { gap: var(--sf-space-md); }
+.sf-grid--gap-large { gap: var(--sf-space-lg); }
+.sf-grid--gap-xl { gap: var(--sf-space-xl); }
+
+/* Responsive Grid */
+.sf-grid--responsive {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .sf-grid--responsive {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+
+/* =============================================================================
+   Flex Component
+   ============================================================================= */
+
+.sf-flex {
+  display: flex;
+}
+
+/* Flex Direction */
+.sf-flex--row { flex-direction: row; }
+.sf-flex--column { flex-direction: column; }
+.sf-flex--row-reverse { flex-direction: row-reverse; }
+.sf-flex--column-reverse { flex-direction: column-reverse; }
+
+/* Flex Align Items */
+.sf-flex--align-start { align-items: flex-start; }
+.sf-flex--align-center { align-items: center; }
+.sf-flex--align-end { align-items: flex-end; }
+.sf-flex--align-stretch { align-items: stretch; }
+.sf-flex--align-baseline { align-items: baseline; }
+
+/* Flex Justify Content */
+.sf-flex--justify-start { justify-content: flex-start; }
+.sf-flex--justify-center { justify-content: center; }
+.sf-flex--justify-end { justify-content: flex-end; }
+.sf-flex--justify-between { justify-content: space-between; }
+.sf-flex--justify-around { justify-content: space-around; }
+.sf-flex--justify-evenly { justify-content: space-evenly; }
+
+/* Flex Wrap */
+.sf-flex--wrap { flex-wrap: wrap; }
+.sf-flex--nowrap { flex-wrap: nowrap; }
+
+/* Flex Gap */
+.sf-flex--gap-none { gap: 0; }
+.sf-flex--gap-xs { gap: var(--sf-space-xs); }
+.sf-flex--gap-small { gap: var(--sf-space-sm); }
+.sf-flex--gap-medium { gap: var(--sf-space-md); }
+.sf-flex--gap-large { gap: var(--sf-space-lg); }
+.sf-flex--gap-xl { gap: var(--sf-space-xl); }
+
+/* =============================================================================
+   Section Component
+   ============================================================================= */
+
+.sf-section {
+  width: 100%;
+  position: relative;
+}
+
+/* Section Backgrounds */
+.sf-section--bg-default {
+  background: var(--sf-bg-primary);
+}
+
+.sf-section--bg-light {
+  background: var(--sf-bg-secondary);
+}
+
+.sf-section--bg-lighter {
+  background: var(--sf-bg-tertiary);
+}
+
+.sf-section--bg-dark {
+  background: var(--sf-bg-dark);
+  color: white;
+}
+
+.sf-section--bg-gradient {
+  background: var(--sf-gradient-secondary);
+}
+
+/* Section Padding */
+.sf-section--padding-none { padding: 0; }
+.sf-section--padding-small { padding: var(--sf-space-md) 0; }
+.sf-section--padding-medium { padding: var(--sf-space-lg) 0; }
+.sf-section--padding-large { padding: var(--sf-space-xl) 0; }
+.sf-section--padding-xl { padding: var(--sf-space-2xl) 0; }
+
+@media (min-width: 768px) {
+  .sf-section--padding-small { padding: var(--sf-space-lg) 0; }
+  .sf-section--padding-medium { padding: var(--sf-space-xl) 0; }
+  .sf-section--padding-large { padding: var(--sf-space-2xl) 0; }
+  .sf-section--padding-xl { padding: var(--sf-space-3xl) 0; }
+}
+
+/* =============================================================================
+   Divider Component
+   ============================================================================= */
+
+.sf-divider {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Divider Types */
+.sf-divider--line {
+  border-top: 1px solid var(--sf-border-light);
+  margin: var(--sf-space-md) 0;
+}
+
+.sf-divider--line.sf-divider--gradient {
+  border: none;
+  height: 1px;
+  background: var(--sf-gradient-divider);
+}
+
+.sf-divider--line.sf-divider--animated {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(0,0,0,0.1) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: sf-divider-flow 3s ease-in-out infinite;
+}
+
+@keyframes sf-divider-flow {
+  0%, 100% { background-position: 200% 0; }
+  50% { background-position: -200% 0; }
+}
+
+/* Divider Thickness */
+.sf-divider--thin { height: 1px; }
+.sf-divider--medium { height: 2px; }
+.sf-divider--thick { height: 4px; }
+
+/* Dots Divider */
+.sf-divider--dots {
+  border: none;
+  margin: var(--sf-space-lg) 0;
+}
+
+.sf-divider__dots {
+  display: flex;
+  gap: var(--sf-space-sm);
+}
+
+.sf-divider__dots span {
+  width: 6px;
+  height: 6px;
+  background: var(--sf-border-medium);
+  border-radius: 50%;
+  display: block;
+}
+
+.sf-divider--animated .sf-divider__dots span {
+  animation: sf-dots-pulse 2s ease-in-out infinite;
+}
+
+.sf-divider--animated .sf-divider__dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.sf-divider--animated .sf-divider__dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes sf-dots-pulse {
+  0%, 100% { opacity: 0.3; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+/* Wave Divider */
+.sf-divider--wave {
+  height: 60px;
+  margin: var(--sf-space-lg) 0;
+}
+
+.sf-divider__wave {
+  width: 100%;
+  height: 100%;
+  fill: var(--sf-border-light);
+}
+
+.sf-divider--animated .sf-divider__wave {
+  animation: sf-wave-flow 4s ease-in-out infinite;
+}
+
+@keyframes sf-wave-flow {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(-20px); }
+}
+
+/* Space Divider */
+.sf-divider--space.sf-divider--thin { height: var(--sf-space-sm); }
+.sf-divider--space.sf-divider--medium { height: var(--sf-space-md); }
+.sf-divider--space.sf-divider--thick { height: var(--sf-space-lg); }
+
+/* =============================================================================
+   Card Component
+   ============================================================================= */
+
+.sf-card {
+  background: var(--sf-bg-primary);
+  border-radius: var(--sf-radius-md);
+  transition: var(--sf-transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Card Elevation */
+.sf-card--elevation-none {
+  box-shadow: none;
+}
+
+.sf-card--elevation-low {
+  box-shadow: var(--sf-shadow-sm);
+}
+
+.sf-card--elevation-medium {
+  box-shadow: var(--sf-shadow-md);
+}
+
+.sf-card--elevation-high {
+  box-shadow: var(--sf-shadow-lg);
+}
+
+.sf-card--elevation-highest {
+  box-shadow: var(--sf-shadow-xl);
+}
+
+/* Card Padding */
+.sf-card--padding-none { padding: 0; }
+.sf-card--padding-small { padding: var(--sf-space-sm); }
+.sf-card--padding-medium { padding: var(--sf-space-md); }
+.sf-card--padding-large { padding: var(--sf-space-lg); }
+.sf-card--padding-xl { padding: var(--sf-space-xl); }
+
+/* Card Border Radius */
+.sf-card--radius-none { border-radius: 0; }
+.sf-card--radius-small { border-radius: var(--sf-radius-sm); }
+.sf-card--radius-medium { border-radius: var(--sf-radius-md); }
+.sf-card--radius-large { border-radius: var(--sf-radius-lg); }
+.sf-card--radius-xl { border-radius: var(--sf-radius-xl); }
+
+/* Card Border */
+.sf-card--border {
+  border: 1px solid var(--sf-border-light);
+}
+
+/* Card Hover */
+.sf-card--hover:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--sf-shadow-lg);
+}
+
+.sf-card--hover {
+  cursor: pointer;
+}
+
+/* =============================================================================
+   Stack Component
+   ============================================================================= */
+
+.sf-stack {
+  display: flex;
+}
+
+.sf-stack--vertical {
+  flex-direction: column;
+}
+
+.sf-stack--horizontal {
+  flex-direction: row;
+}
+
+/* Stack Spacing */
+.sf-stack--spacing-none { gap: 0; }
+.sf-stack--spacing-xs { gap: var(--sf-space-xs); }
+.sf-stack--spacing-small { gap: var(--sf-space-sm); }
+.sf-stack--spacing-medium { gap: var(--sf-space-md); }
+.sf-stack--spacing-large { gap: var(--sf-space-lg); }
+.sf-stack--spacing-xl { gap: var(--sf-space-xl); }
+
+/* Stack Alignment */
+.sf-stack--align-start { align-items: flex-start; }
+.sf-stack--align-center { align-items: center; }
+.sf-stack--align-end { align-items: flex-end; }
+.sf-stack--align-stretch { align-items: stretch; }
+
+/* =============================================================================
+   Spacer Component
+   ============================================================================= */
+
+.sf-spacer {
+  flex-shrink: 0;
+}
+
+.sf-spacer--xs { height: var(--sf-space-xs); width: var(--sf-space-xs); }
+.sf-spacer--small { height: var(--sf-space-sm); width: var(--sf-space-sm); }
+.sf-spacer--medium { height: var(--sf-space-md); width: var(--sf-space-md); }
+.sf-spacer--large { height: var(--sf-space-lg); width: var(--sf-space-lg); }
+.sf-spacer--xl { height: var(--sf-space-xl); width: var(--sf-space-xl); }
+.sf-spacer--2xl { height: var(--sf-space-2xl); width: var(--sf-space-2xl); }
+.sf-spacer--3xl { height: var(--sf-space-3xl); width: var(--sf-space-3xl); }
+
+/* Responsive Spacers */
+@media (max-width: 767px) {
+  .sf-spacer--responsive.sf-spacer--large { 
+    height: var(--sf-space-md); 
+    width: var(--sf-space-md); 
+  }
+  .sf-spacer--responsive.sf-spacer--xl { 
+    height: var(--sf-space-lg); 
+    width: var(--sf-space-lg); 
+  }
+  .sf-spacer--responsive.sf-spacer--2xl { 
+    height: var(--sf-space-xl); 
+    width: var(--sf-space-xl); 
+  }
+  .sf-spacer--responsive.sf-spacer--3xl { 
+    height: var(--sf-space-2xl); 
+    width: var(--sf-space-2xl); 
+  }
+}
+
+/* =============================================================================
+   Center Component
+   ============================================================================= */
+
+.sf-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* =============================================================================
+   Demo Styles
+   ============================================================================= */
+
+.sf-layout-demo {
+  background: var(--sf-bg-secondary);
+  min-height: 100vh;
+  padding: var(--sf-space-xl) 0;
+}
+
+.sf-layout-demo__header {
+  text-align: center;
+  margin-bottom: var(--sf-space-3xl);
+}
+
+.sf-layout-demo__title {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 800;
+  margin-bottom: var(--sf-space-md);
+  background: var(--sf-gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.sf-layout-demo__subtitle {
+  font-size: 1.25rem;
+  color: #666666;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.sf-demo-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #333333;
+  margin-bottom: var(--sf-space-md);
+  position: relative;
+  padding-bottom: var(--sf-space-sm);
+}
+
+.sf-demo-title::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 60px;
+  height: 3px;
+  background: var(--sf-gradient-primary);
+  border-radius: 2px;
+}
+
+.sf-demo-grid-container,
+.sf-demo-flex-container,
+.sf-divider-demo,
+.sf-stack-demo {
+  margin-bottom: var(--sf-space-lg);
+}
+
+.sf-demo-grid-container h3,
+.sf-demo-flex-container h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: var(--sf-space-sm);
+  color: #555555;
+}
+
+/* Demo Card Styling */
+.sf-layout-demo .sf-card {
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-weight: 500;
+  color: #333333;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.sf-layout-demo .sf-card h3 {
+  margin: 0 0 var(--sf-space-xs) 0;
+  font-size: 1.1rem;
+  color: #222222;
+}
+
+.sf-layout-demo .sf-card p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #666666;
+  line-height: 1.4;
+}
+
+/* =============================================================================
+   Utility Classes
+   ============================================================================= */
+
+/* Display Utilities */
+.sf-d-none { display: none !important; }
+.sf-d-block { display: block !important; }
+.sf-d-flex { display: flex !important; }
+.sf-d-grid { display: grid !important; }
+.sf-d-inline { display: inline !important; }
+.sf-d-inline-block { display: inline-block !important; }
+
+/* Positioning Utilities */
+.sf-position-relative { position: relative !important; }
+.sf-position-absolute { position: absolute !important; }
+.sf-position-fixed { position: fixed !important; }
+.sf-position-sticky { position: sticky !important; }
+
+/* Text Alignment */
+.sf-text-left { text-align: left !important; }
+.sf-text-center { text-align: center !important; }
+.sf-text-right { text-align: right !important; }
+
+/* Width Utilities */
+.sf-w-full { width: 100% !important; }
+.sf-w-auto { width: auto !important; }
+
+/* Height Utilities */
+.sf-h-full { height: 100% !important; }
+.sf-h-screen { height: 100vh !important; }
+.sf-h-auto { height: auto !important; }
+
+/* =============================================================================
+   Responsive Utilities
+   ============================================================================= */
+
+@media (max-width: 639px) {
+  .sf-sm-hidden { display: none !important; }
+}
+
+@media (min-width: 640px) {
+  .sf-sm-block { display: block !important; }
+  .sf-sm-flex { display: flex !important; }
+  .sf-sm-grid { display: grid !important; }
+}
+
+@media (min-width: 768px) {
+  .sf-md-block { display: block !important; }
+  .sf-md-flex { display: flex !important; }
+  .sf-md-grid { display: grid !important; }
+}
+
+@media (min-width: 1024px) {
+  .sf-lg-block { display: block !important; }
+  .sf-lg-flex { display: flex !important; }
+  .sf-lg-grid { display: grid !important; }
+}
+
+/* =============================================================================
+   Accessibility & Special States
+   ============================================================================= */
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  :root {
+    --sf-border-light: rgba(0, 0, 0, 0.3);
+    --sf-border-medium: rgba(0, 0, 0, 0.5);
+  }
+
+  .sf-card {
+    border: 2px solid var(--sf-border-light);
+  }
+
+  .sf-divider--line {
+    border-top-color: var(--sf-border-medium);
+  }
+
+  .sf-layout-demo__title {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .sf-card--hover,
+  .sf-divider--animated,
+  .sf-divider__dots span,
+  .sf-divider__wave {
+    animation: none;
+    transition: none;
+  }
+
+  .sf-card--hover:hover {
+    transform: none;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .sf-layout-demo.sf-dark-mode {
+    --sf-bg-primary: #1a1a1a;
+    --sf-bg-secondary: #2a2a2a;
+    --sf-bg-tertiary: #3a3a3a;
+    
+    color: white;
+  }
+
+  .sf-layout-demo.sf-dark-mode .sf-card {
+    background: var(--sf-bg-secondary);
+    color: white;
+  }
+
+  .sf-layout-demo.sf-dark-mode .sf-demo-title {
+    color: white;
+  }
+
+  .sf-layout-demo.sf-dark-mode .sf-layout-demo__subtitle {
+    color: #cccccc;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .sf-layout-demo {
+    background: white;
+  }
+
+  .sf-card {
+    box-shadow: none;
+    border: 1px solid #ddd;
+    break-inside: avoid;
+  }
+
+  .sf-layout-demo__title {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+
+  .sf-divider--animated,
+  .sf-divider__wave {
+    display: none;
+  }
+}