snow-flow 3.4.36 → 3.4.39

package/website/components/feature-cards/FeatureCards.css

@@ -0,0 +1,573 @@
+/* Feature Cards Component - Black/White Minimalist Design */
+
+.sf-feature-cards {
+  position: relative;
+  padding: 5rem 0;
+  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
+  overflow: hidden;
+}
+
+.sf-feature-cards__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  position: relative;
+  z-index: 2;
+}
+
+/* Background Elements */
+.sf-feature-cards__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+.sf-feature-cards--visible .sf-feature-cards__background {
+  opacity: 1;
+}
+
+.sf-feature-cards__bg-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: sf-grid-move 20s linear infinite;
+}
+
+@keyframes sf-grid-move {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+.sf-feature-cards__bg-gradient {
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  width: 800px;
+  height: 600px;
+  background: radial-gradient(ellipse at center, rgba(0,0,0,0.03) 0%, transparent 70%);
+  transform: translateX(-50%);
+  animation: sf-gradient-pulse 8s ease-in-out infinite;
+}
+
+@keyframes sf-gradient-pulse {
+  0%, 100% {
+    transform: translateX(-50%) scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateX(-50%) scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+/* Header */
+.sf-feature-cards__header {
+  text-align: center;
+  margin-bottom: 4rem;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sf-feature-cards--visible .sf-feature-cards__header {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sf-feature-cards__title {
+  font-size: clamp(2.5rem, 5vw, 3.5rem);
+  font-weight: 800;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #000000 0%, #333333 50%, #000000 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: sf-gradient-text 4s ease-in-out infinite;
+  position: relative;
+}
+
+.sf-feature-cards__title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 3px;
+  background: linear-gradient(90deg, #000000, #666666, #000000);
+  border-radius: 2px;
+}
+
+.sf-feature-cards__subtitle {
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  color: #666666;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+@keyframes sf-gradient-text {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Grid */
+.sf-feature-cards__grid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  margin-bottom: 3rem;
+}
+
+/* Individual Feature Card */
+.sf-feature-card {
+  position: relative;
+  background: white;
+  border-radius: 20px;
+  padding: 2.5rem 2rem;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0;
+  transform: translateY(50px) rotateX(15deg);
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  overflow: hidden;
+  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+}
+
+.sf-feature-card--visible {
+  opacity: 1;
+  transform: translateY(0) rotateX(0deg);
+  animation: sf-card-appear 0.6s ease-out forwards;
+}
+
+@keyframes sf-card-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(50px) rotateX(15deg) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) rotateX(0deg) scale(1);
+  }
+}
+
+.sf-feature-card--clickable:hover {
+  transform: translateY(-8px) rotateX(5deg) scale(1.02);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.sf-feature-card--clickable:active {
+  transform: translateY(-4px) rotateX(2deg) scale(1.01);
+}
+
+/* 3D Border Effect */
+.sf-feature-card__border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 20px;
+  pointer-events: none;
+}
+
+.sf-feature-card__border-top,
+.sf-feature-card__border-right,
+.sf-feature-card__border-bottom,
+.sf-feature-card__border-left {
+  position: absolute;
+  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
+  opacity: 0;
+  transition: all 0.4s ease;
+}
+
+.sf-feature-card__border-top,
+.sf-feature-card__border-bottom {
+  height: 2px;
+  left: 0;
+  right: 0;
+}
+
+.sf-feature-card__border-left,
+.sf-feature-card__border-right {
+  width: 2px;
+  top: 0;
+  bottom: 0;
+}
+
+.sf-feature-card__border-top {
+  top: 0;
+  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.2), transparent);
+}
+
+.sf-feature-card__border-right {
+  right: 0;
+  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.15), transparent);
+}
+
+.sf-feature-card__border-bottom {
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
+}
+
+.sf-feature-card__border-left {
+  left: 0;
+  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.05), transparent);
+}
+
+.sf-feature-card:hover .sf-feature-card__border-top,
+.sf-feature-card:hover .sf-feature-card__border-right,
+.sf-feature-card:hover .sf-feature-card__border-bottom,
+.sf-feature-card:hover .sf-feature-card__border-left {
+  opacity: 1;
+}
+
+/* Background Glow */
+.sf-feature-card__glow {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.05));
+  border-radius: 22px;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  z-index: -1;
+}
+
+.sf-feature-card:hover .sf-feature-card__glow {
+  opacity: 1;
+}
+
+/* Content */
+.sf-feature-card__content {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Icon */
+.sf-feature-card__icon-wrapper {
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.sf-feature-card__icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-radius: 16px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.sf-feature-card__icon::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+  transition: left 0.6s ease;
+}
+
+.sf-feature-card__icon--animated {
+  transform: scale(1.1) rotate(5deg);
+  background: linear-gradient(135deg, #ffffff, #f8f9fa);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.sf-feature-card__icon--animated::before {
+  left: 100%;
+}
+
+/* Text Content */
+.sf-feature-card__text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.sf-feature-card__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: #1a1a1a;
+  line-height: 1.3;
+  transition: color 0.3s ease;
+}
+
+.sf-feature-card--clickable:hover .sf-feature-card__title {
+  color: #000000;
+}
+
+.sf-feature-card__description {
+  color: #666666;
+  line-height: 1.6;
+  font-size: 1rem;
+  flex: 1;
+  margin-bottom: 1rem;
+  transition: color 0.3s ease;
+}
+
+.sf-feature-card--clickable:hover .sf-feature-card__description {
+  color: #555555;
+}
+
+/* Hover Arrow */
+.sf-feature-card__arrow {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  width: 24px;
+  height: 24px;
+  color: #999999;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sf-feature-card__arrow--visible {
+  opacity: 1;
+  transform: translateX(0);
+  color: #333333;
+}
+
+/* Ripple Effect */
+.sf-feature-card__ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.6s ease;
+  pointer-events: none;
+}
+
+.sf-feature-card:active .sf-feature-card__ripple {
+  width: 300px;
+  height: 300px;
+}
+
+/* CTA Section */
+.sf-feature-cards__cta {
+  text-align: center;
+  margin-top: 3rem;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
+}
+
+.sf-feature-cards__cta--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sf-feature-cards__cta-button {
+  background: linear-gradient(135deg, #000000, #333333);
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sf-feature-cards__cta-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.sf-feature-cards__cta-button:hover svg {
+  transform: translateX(3px);
+}
+
+.sf-feature-cards__cta-button svg {
+  transition: transform 0.3s ease;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .sf-feature-cards {
+    padding: 3rem 0;
+  }
+
+  .sf-feature-cards__container {
+    padding: 0 1rem;
+  }
+
+  .sf-feature-cards__header {
+    margin-bottom: 3rem;
+  }
+
+  .sf-feature-cards__grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .sf-feature-card {
+    padding: 2rem 1.5rem;
+    min-height: 240px;
+  }
+
+  .sf-feature-card--clickable:hover {
+    transform: translateY(-4px) scale(1.01);
+  }
+
+  .sf-feature-card__icon {
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+  }
+
+  .sf-feature-card__title {
+    font-size: 1.25rem;
+  }
+
+  .sf-feature-card__description {
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .sf-feature-card {
+    padding: 1.5rem;
+    border-radius: 16px;
+  }
+
+  .sf-feature-card__icon-wrapper {
+    margin-bottom: 1rem;
+  }
+
+  .sf-feature-card__title {
+    font-size: 1.125rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .sf-feature-card__description {
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .sf-feature-card {
+    border: 2px solid #000000;
+  }
+
+  .sf-feature-cards__title {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+
+  .sf-feature-card__title {
+    color: black;
+  }
+
+  .sf-feature-card__description {
+    color: #333333;
+  }
+
+  .sf-feature-card__icon {
+    background: #f0f0f0;
+    border: 1px solid #333333;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .sf-feature-cards__bg-grid,
+  .sf-feature-cards__bg-gradient,
+  .sf-feature-cards__title,
+  .sf-feature-card,
+  .sf-feature-card__icon,
+  .sf-feature-card__icon::before,
+  .sf-feature-card__border-top,
+  .sf-feature-card__border-right,
+  .sf-feature-card__border-bottom,
+  .sf-feature-card__border-left,
+  .sf-feature-card__glow,
+  .sf-feature-card__arrow,
+  .sf-feature-card__ripple,
+  .sf-feature-cards__cta-button {
+    animation: none;
+    transition: none;
+  }
+
+  .sf-feature-card--clickable:hover {
+    transform: translateY(-2px);
+  }
+
+  .sf-feature-card__icon--animated {
+    transform: scale(1.05);
+  }
+}
+
+/* Print Styles */
+@media print {
+  .sf-feature-cards {
+    background: white;
+  }
+
+  .sf-feature-cards__background,
+  .sf-feature-card__glow,
+  .sf-feature-card__ripple {
+    display: none;
+  }
+
+  .sf-feature-card {
+    break-inside: avoid;
+    box-shadow: none;
+    border: 1px solid #ddd;
+  }
+
+  .sf-feature-cards__title {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+}