osi-cards-lib 1.0.0

package/styles/components/sections/_contact.scss

@@ -0,0 +1,250 @@
+/* Contact Section - Modern, Clean Design */
+
+@import 'sections/sections-base';
+@import 'unified-cards';
+
+/* Contact Grid Layout */
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--section-card-gap) !important;
+  width: 100%;
+  
+  @media (max-width: 820px) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* Contact Card */
+.contact-card {
+  @include card;
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap) !important;
+  min-height: auto;
+  cursor: pointer;
+  padding: var(--card-padding) !important;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--card-background);
+  position: relative;
+  overflow: hidden;
+
+  /* Subtle top accent border for executives */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-brand);
+    opacity: 0;
+    transition: opacity 0.22s ease;
+  }
+
+  /* Minimalistic hover effect */
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px color-mix(in srgb, var(--foreground) 12%, transparent),
+                0 0 0 1px color-mix(in srgb, var(--color-brand) 15%, transparent);
+
+    .contact-card__name {
+      color: var(--color-brand);
+    }
+
+    .contact-card__avatar {
+      transform: scale(1.05);
+    }
+    
+    .contact-card__header {
+      border-bottom-color: color-mix(in srgb, var(--color-brand) 20%, transparent);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+}
+
+/* Card Header */
+.contact-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 0;
+  padding-bottom: var(--card-gap);
+  border-bottom: 1px solid color-mix(in srgb, var(--card-text-secondary) 10%, transparent);
+}
+
+.contact-card__avatar {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  min-height: 48px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, 
+    color-mix(in srgb, var(--color-brand) 22%, transparent), 
+    color-mix(in srgb, var(--color-brand) 12%, transparent));
+  overflow: hidden;
+  border: 3px solid color-mix(in srgb, var(--color-brand) 60%, transparent);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 15%, transparent),
+              inset 0 1px 2px rgba(255, 255, 255, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  align-self: flex-start;
+  
+  .contact-card:hover & {
+    border-color: var(--color-brand);
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 15%, transparent),
+                0 0 0 2px color-mix(in srgb, var(--color-brand) 15%, transparent),
+                inset 0 1px 2px rgba(255, 255, 255, 0.1);
+  }
+}
+
+.contact-card__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.contact-card__initials {
+  @include card-title-text;
+  font-size: calc(var(--card-title-font-size) * 0.85);
+  font-weight: 600;
+  color: var(--color-brand);
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.contact-card__header-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--card-gap) * 0.375);
+  padding-top: 2px;
+}
+
+.contact-card__name {
+  @include card-title-text;
+  margin: 0;
+  line-height: 1.3;
+  color: var(--card-text-primary);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-weight: 700;
+  font-size: calc(var(--card-title-font-size) * 1.15);
+  transition: color 0.22s ease;
+  letter-spacing: -0.01em;
+  
+  .contact-card:hover & {
+    color: var(--color-brand);
+  }
+}
+
+.contact-card__role {
+  @include card-subtitle-text;
+  margin: 0;
+  color: var(--card-text-secondary);
+  line-height: 1.4;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-size: var(--card-subtitle-font-size);
+  hyphens: auto;
+  max-width: 100%;
+}
+
+/* Contact Meta Information */
+.contact-card__meta {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--card-gap) * 0.625);
+  margin-top: var(--card-gap);
+}
+
+.contact-card__meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.625);
+  @include card-meta-text;
+  color: var(--card-text-secondary) !important;
+  text-decoration: none;
+  min-width: 0;
+  transition: color 0.25s ease, transform 0.2s ease;
+  padding: calc(var(--card-gap) * 0.35) 0;
+  border-radius: 4px;
+
+  &:hover {
+    color: var(--card-text-hover) !important;
+    transform: translateX(2px);
+    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
+
+    .contact-card__meta-icon {
+      opacity: 1;
+      color: var(--color-brand);
+      transform: scale(1.1) translateX(1px);
+    }
+  }
+
+  &--link {
+    color: var(--card-text-secondary) !important;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--card-text-hover) !important;
+    }
+  }
+}
+
+.contact-card__meta-icon {
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  opacity: 0.65;
+  color: var(--color-brand);
+  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.contact-card__meta-text {
+  @include card-meta-text;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.4;
+  /* ENHANCED: Allow wrapping for very long text */
+  @media (max-width: 480px) {
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+}
+
+/* Empty State */
+.section-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--card-padding) * 3);
+  text-align: center;
+  color: var(--card-text-muted);
+}
+
+.section-empty__icon {
+  margin-bottom: calc(var(--card-gap) * 1.5);
+  opacity: 0.5;
+}
+
+.section-empty__text {
+  @include card-meta-text;
+  margin: 0;
+  color: var(--card-text-muted);
+}