besper-frontend-site-dev-main/src/styles/base/typography.css

Professional B-esper Frontend Site - Site-wide integration toolkit for full website bot deployment

/* Typography Utilities - Main typography classes */

/* Heading Styles */
.bsp-heading-1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--gray-900);
  margin-bottom: var(--spacing-6);
}

.bsp-heading-2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--gray-900);
  margin-bottom: var(--spacing-5);
}

.bsp-heading-3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--gray-900);
  margin-bottom: var(--spacing-4);
}

.bsp-heading-4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--gray-900);
  margin-bottom: var(--spacing-3);
}

.bsp-heading-5 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--gray-900);
  margin-bottom: var(--spacing-3);
}

.bsp-heading-6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

/* Text Body Styles */
.bsp-text-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--gray-700);
  margin-bottom: var(--spacing-4);
}

.bsp-text-body-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--gray-700);
  margin-bottom: var(--spacing-4);
}

.bsp-text-body-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--gray-600);
  margin-bottom: var(--spacing-3);
}

/* Text Size Utilities */
.bsp-text-xs {
  font-size: var(--font-size-xs);
}
.bsp-text-sm {
  font-size: var(--font-size-sm);
}
.bsp-text-base {
  font-size: var(--font-size-base);
}
.bsp-text-lg {
  font-size: var(--font-size-lg);
}
.bsp-text-xl {
  font-size: var(--font-size-xl);
}
.bsp-text-2xl {
  font-size: var(--font-size-2xl);
}
.bsp-text-3xl {
  font-size: var(--font-size-3xl);
}
.bsp-text-4xl {
  font-size: var(--font-size-4xl);
}
.bsp-text-5xl {
  font-size: var(--font-size-5xl);
}

/* Font Weight Utilities */
.bsp-font-normal {
  font-weight: var(--font-weight-normal);
}
.bsp-font-medium {
  font-weight: var(--font-weight-medium);
}
.bsp-font-semibold {
  font-weight: var(--font-weight-semibold);
}
.bsp-font-bold {
  font-weight: var(--font-weight-bold);
}

/* Text Alignment */
.bsp-text-left {
  text-align: left;
}
.bsp-text-center {
  text-align: center;
}
.bsp-text-right {
  text-align: right;
}
.bsp-text-justify {
  text-align: justify;
}

/* Text Colors */
.bsp-text-primary {
  color: var(--primary-blue);
}
.bsp-text-secondary {
  color: var(--gray-600);
}
.bsp-text-muted {
  color: var(--gray-500);
}
.bsp-text-success {
  color: var(--success);
}
.bsp-text-warning {
  color: var(--warning);
}
.bsp-text-error {
  color: var(--error);
}
.bsp-text-white {
  color: var(--white);
}

/* Line Height Utilities */
.bsp-leading-tight {
  line-height: var(--line-height-tight);
}
.bsp-leading-snug {
  line-height: var(--line-height-snug);
}
.bsp-leading-normal {
  line-height: var(--line-height-normal);
}
.bsp-leading-relaxed {
  line-height: var(--line-height-relaxed);
}
.bsp-leading-loose {
  line-height: var(--line-height-loose);
}

/* Text Transform */
.bsp-uppercase {
  text-transform: uppercase;
}
.bsp-lowercase {
  text-transform: lowercase;
}
.bsp-capitalize {
  text-transform: capitalize;
}

/* Text Decoration */
.bsp-underline {
  text-decoration: underline;
}
.bsp-no-underline {
  text-decoration: none;
}

/* Link Styles */
.bsp-link {
  color: var(--primary-blue);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.bsp-link:hover {
  color: var(--primary-blue-dark);
}

.bsp-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Code and Preformatted Text */
.bsp-code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
  background-color: var(--gray-100);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius);
  color: var(--gray-800);
}

.bsp-pre {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  background-color: var(--gray-100);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  white-space: pre;
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
}

/* Blockquote */
.bsp-blockquote {
  border-left: 4px solid var(--primary-blue);
  padding-left: var(--spacing-4);
  margin: var(--spacing-6) 0;
  font-style: italic;
  color: var(--gray-600);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

/* Lists */
.bsp-list-disc {
  list-style-type: disc;
  padding-left: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

.bsp-list-decimal {
  list-style-type: decimal;
  padding-left: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

.bsp-list-none {
  list-style: none;
  padding-left: 0;
}

.bsp-list-item {
  margin-bottom: var(--spacing-2);
  color: var(--gray-700);
  line-height: var(--line-height-relaxed);
}