bismillahcss/src/components/typography.css

The next-gen utility-first CSS framework for modern, futuristic web development.

/* ========== BismillahCSS Typography ========== */

/* Base Typography */
.bismillah-typography {
    color: var(--bismillah-text-color, #333);
    font-family: var(
      --bismillah-font-family,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: var(--bismillah-font-size-base, 1rem);
    line-height: var(--bismillah-line-height-base, 1.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Headings */
  .bismillah-h1,
  .bismillah-h2,
  .bismillah-h3,
  .bismillah-h4,
  .bismillah-h5,
  .bismillah-h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bismillah-heading-color, #212529);
  }
  
  .bismillah-h1 {
    font-size: var(--bismillah-h1-size, 2.5rem);
    letter-spacing: -0.02em;
  }
  
  .bismillah-h2 {
    font-size: var(--bismillah-h2-size, 2rem);
    letter-spacing: -0.015em;
  }
  
  .bismillah-h3 {
    font-size: var(--bismillah-h3-size, 1.75rem);
    letter-spacing: -0.01em;
  }
  
  .bismillah-h4 {
    font-size: var(--bismillah-h4-size, 1.5rem);
  }
  
  .bismillah-h5 {
    font-size: var(--bismillah-h5-size, 1.25rem);
  }
  
  .bismillah-h6 {
    font-size: var(--bismillah-h6-size, 1rem);
  }
  
  /* Responsive Headings */
  @media (max-width: 768px) {
    .bismillah-h1 {
      font-size: calc(var(--bismillah-h1-size, 2.5rem) * 0.8);
    }
  
    .bismillah-h2 {
      font-size: calc(var(--bismillah-h2-size, 2rem) * 0.8);
    }
  
    .bismillah-h3 {
      font-size: calc(var(--bismillah-h3-size, 1.75rem) * 0.85);
    }
  }
  
  /* Display Headings */
  .bismillah-display-1,
  .bismillah-display-2,
  .bismillah-display-3,
  .bismillah-display-4 {
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--bismillah-display-color, #212529);
  }
  
  .bismillah-display-1 {
    font-size: var(--bismillah-display-1-size, 5rem);
  }
  
  .bismillah-display-2 {
    font-size: var(--bismillah-display-2-size, 4.5rem);
  }
  
  .bismillah-display-3 {
    font-size: var(--bismillah-display-3-size, 4rem);
  }
  
  .bismillah-display-4 {
    font-size: var(--bismillah-display-4-size, 3.5rem);
  }
  
  /* Responsive Display Headings */
  @media (max-width: 768px) {
    .bismillah-display-1 {
      font-size: calc(var(--bismillah-display-1-size, 5rem) * 0.6);
    }
  
    .bismillah-display-2 {
      font-size: calc(var(--bismillah-display-2-size, 4.5rem) * 0.6);
    }
  
    .bismillah-display-3 {
      font-size: calc(var(--bismillah-display-3-size, 4rem) * 0.65);
    }
  
    .bismillah-display-4 {
      font-size: calc(var(--bismillah-display-4-size, 3.5rem) * 0.65);
    }
  }
  
  /* Paragraphs */
  .bismillah-p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: var(--bismillah-font-size-base, 1rem);
  }
  
  .bismillah-p.lead {
    font-size: var(--bismillah-lead-size, 1.25rem);
    font-weight: 300;
    line-height: 1.6;
  }
  
  .bismillah-p.small {
    font-size: var(--bismillah-small-size, 0.875rem);
  }
  
  /* Text Utilities */
  .bismillah-text-primary {
    color: var(--bismillah-primary-color, #007bff) !important;
  }
  
  .bismillah-text-secondary {
    color: var(--bismillah-secondary-color, #6c757d) !important;
  }
  
  .bismillah-text-success {
    color: var(--bismillah-success-color, #28a745) !important;
  }
  
  .bismillah-text-danger {
    color: var(--bismill #28a745) !important;
  }
  
  .bismillah-text-danger {
    color: var(--bismillah-danger-color, #dc3545) !important;
  }
  
  .bismillah-text-warning {
    color: var(--bismillah-warning-color, #ffc107) !important;
  }
  
  .bismillah-text-info {
    color: var(--bismillah-info-color, #17a2b8) !important;
  }
  
  .bismillah-text-light {
    color: var(--bismillah-light-color, #f8f9fa) !important;
  }
  
  .bismillah-text-dark {
    color: var(--bismillah-dark-color, #343a40) !important;
  }
  
  .bismillah-text-muted {
    color: var(--bismillah-muted-color, #6c757d) !important;
  }
  
  /* Text Alignment */
  .bismillah-text-left {
    text-align: left !important;
  }
  
  .bismillah-text-center {
    text-align: center !important;
  }
  
  .bismillah-text-right {
    text-align: right !important;
  }
  
  .bismillah-text-justify {
    text-align: justify !important;
  }
  
  /* Text Transforms */
  .bismillah-text-lowercase {
    text-transform: lowercase !important;
  }
  
  .bismillah-text-uppercase {
    text-transform: uppercase !important;
  }
  
  .bismillah-text-capitalize {
    text-transform: capitalize !important;
  }
  
  /* Text Decoration */
  .bismillah-text-underline {
    text-decoration: underline !important;
  }
  
  .bismillah-text-line-through {
    text-decoration: line-through !important;
  }
  
  .bismillah-text-no-decoration {
    text-decoration: none !important;
  }
  
  /* Font Weight */
  .bismillah-font-thin {
    font-weight: 100 !important;
  }
  
  .bismillah-font-light {
    font-weight: 300 !important;
  }
  
  .bismillah-font-normal {
    font-weight: 400 !important;
  }
  
  .bismillah-font-medium {
    font-weight: 500 !important;
  }
  
  .bismillah-font-semibold {
    font-weight: 600 !important;
  }
  
  .bismillah-font-bold {
    font-weight: 700 !important;
  }
  
  .bismillah-font-extrabold {
    font-weight: 800 !important;
  }
  
  .bismillah-font-black {
    font-weight: 900 !important;
  }
  
  /* Font Style */
  .bismillah-font-italic {
    font-style: italic !important;
  }
  
  .bismillah-font-normal {
    font-style: normal !important;
  }
  
  /* Text Wrapping */
  .bismillah-text-nowrap {
    white-space: nowrap !important;
  }
  
  .bismillah-text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  .bismillah-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Lists */
  .bismillah-list {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 2rem;
  }
  
  .bismillah-list-unstyled {
    padding-left: 0;
    list-style: none;
  }
  
  .bismillah-list-inline {
    padding-left: 0;
    list-style: none;
  }
  
  .bismillah-list-inline-item {
    display: inline-block;
  }
  
  .bismillah-list-inline-item:not(:last-child) {
    margin-right: 0.5rem;
  }
  
  /* Description Lists */
  .bismillah-dl {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  
  .bismillah-dt {
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
  
  .bismillah-dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
  }
  
  /* Blockquotes */
  .bismillah-blockquote {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--bismillah-primary-color, #007bff);
    background-color: var(--bismillah-blockquote-bg, rgba(0, 123, 255, 0.05));
    border-radius: 0 var(--bismillah-blockquote-radius, 6px) var(--bismillah-blockquote-radius, 6px) 0;
  }
  
  .bismillah-blockquote-footer {
    display: block;
    font-size: 80%;
    color: var(--bismillah-muted-color, #6c757d);
    margin-top: 0.5rem;
  }
  
  .bismillah-blockquote-footer::before {
    content: "\2014\00A0"; /* em dash, nbsp */
  }
  
  /* Code */
  .bismillah-code {
    font-family: var(
      --bismillah-font-family-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-size: 0.875em;
    color: var(--bismillah-code-color, #e83e8c);
    word-wrap: break-word;
    padding: 0.2em 0.4em;
    background-color: var(--bismillah-code-bg, rgba(232, 62, 140, 0.05));
    border-radius: var(--bismillah-code-radius, 4px);
  }
  
  .bismillah-pre {
    display: block;
    font-family: var(
      --bismillah-font-family-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-size: 0.875em;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    padding: 1rem;
    color: var(--bismillah-pre-color, #212529);
    background-color: var(--bismillah-pre-bg, #f8f9fa);
    border-radius: var(--bismillah-pre-radius, 6px);
    border: 1px solid var(--bismillah-pre-border-color, #e9ecef);
  }
  
  /* Horizontal Rule */
  .bismillah-hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--bismillah-hr-color, rgba(0, 0, 0, 0.1));
  }
  
  /* Fancy Horizontal Rule */
  .bismillah-hr.fancy {
    height: 6px;
    background-image: linear-gradient(
      to right,
      var(--bismillah-primary-color, #007bff),
      var(--bismillah-secondary-color, #6c757d)
    );
    border: none;
    border-radius: 3px;
  }
  
  /* Typography with Gradients */
  .bismillah-text-gradient {
    background: linear-gradient(
      to right,
      var(--bismillah-gradient-start, #4158d0),
      var(--bismillah-gradient-end, #c850c0)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
   
  }
  
  /* Typography with Shadows */
  .bismillah-text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .bismillah-text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  }
  
  /* Typography with Animations */
  .bismillah-text-animated {
    position: relative;
    display: inline-block;
  }
  
  .bismillah-text-animated::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--bismillah-primary-color, #007bff);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
  }
  
  .bismillah-text-animated:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  /* Dark Mode */
  .bismillah-dark .bismillah-typography {
    color: var(--bismillah-text-color-dark, #e0e0e0);
  }
  
  .bismillah-dark .bismillah-h1,
  .bismillah-dark .bismillah-h2,
  .bismillah-dark .bismillah-h3,
  .bismillah-dark .bismillah-h4,
  .bismillah-dark .bismillah-h5,
  .bismillah-dark .bismillah-h6 {
    color: var(--bismillah-heading-color-dark, #f0f0f0);
  }
  
  .bismillah-dark .bismillah-display-1,
  .bismillah-dark .bismillah-display-2,
  .bismillah-dark .bismillah-display-3,
  .bismillah-dark .bismillah-display-4 {
    color: var(--bismillah-display-color-dark, #f0f0f0);
  }
  
  .bismillah-dark .bismillah-blockquote {
    background-color: var(--bismillah-blockquote-bg-dark, rgba(0, 123, 255, 0.1));
  }
  
  .bismillah-dark .bismillah-blockquote-footer {
    color: var(--bismillah-muted-color-dark, #adb5bd);
  }
  
  .bismillah-dark .bismillah-code {
    color: var(--bismillah-code-color-dark, #f06595);
    background-color: var(--bismillah-code-bg-dark, rgba(240, 101, 149, 0.1));
  }
  
  .bismillah-dark .bismillah-pre {
    color: var(--bismillah-pre-color-dark, #e0e0e0);
    background-color: var(--bismillah-pre-bg-dark, #2a2a2a);
    border-color: var(--bismillah-pre-border-color-dark, #444);
  }
  
  .bismillah-dark .bismillah-hr {
    border-top-color: var(--bismillah-hr-color-dark, rgba(255, 255, 255, 0.1));
  }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .bismillah-text-animated::after {
      transition: none !important;
    }
  }