ecusm/rss/css/main.scss

@import 'variables';
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography utilities */
body {
    font-family: $font-family-base;
      // font-family: "Roboto", sans-serif;

    font-size: map-get($font-sizes, base);
    line-height: map-get($line-heights, normal);
    color: map-get($colors, dark);
    background-color: #{map-get($colors, white)};
  }

  a{
    all: inherit;
    cursor: pointer;
  }

  h1, h2, h3, h4, h5, h6{
    font-weight: #{map-get($font-weights, 'light')};
    // font-size: #{map-get($font-sizes, 'heading')};
    line-height: #{map-get($line-heights, 'normal')};
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.25rem; }
  h6 { font-size: 1rem; }


  p{
    font-weight: #{map-get($font-weights, 'light')};
    font-size: #{map-get($font-sizes, 'normal')};
    line-height: #{map-get($line-heights, 'normal')};
    margin-bottom: 1rem;
  }
  
  @each $name, $size in $font-sizes {
    .text-#{$name} {
      font-size: $size;
    }
  }
  
  @each $name, $weight in $font-weights {
    .fw-#{$name} {
      font-weight: $weight;
    }
  }
  
  @each $name, $lh in $line-heights {
    .lh-#{$name} {
      line-height: $lh;
    }
  }
  
  h1, .h1 { font-size: map-get($font-sizes, xxl); line-height: map-get($line-heights, heading); }
  h2, .h2 { font-size: map-get($font-sizes, xl); line-height: map-get($line-heights, heading); }
  h3, .h3 { font-size: map-get($font-sizes, lg); line-height: map-get($line-heights, heading); }
  h4, .h4 { font-size: map-get($font-sizes, base); line-height: map-get($line-heights, heading); }
  h5, .h5 { font-size: map-get($font-sizes, sm); line-height: map-get($line-heights, heading); }
  h6, .h6 { font-size: map-get($font-sizes, xs); line-height: map-get($line-heights, heading); }

  
/* Container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: $container-padding;
  padding-left: $container-padding;

  @each $breakpoint, $container-max-width in $container-max-widths {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      max-width: $container-max-width;
    }
  }
}

/* Display utilities */
@each $type in $display-types {
  .d-#{$type} {
    display: $type;
  }
}

/* Color utilities */
@each $name, $color in $colors {
  .text-#{$name} { color: $color !important; }
  .bg-#{$name} { background-color: $color !important; }
}

/* Margin and padding utilities */
@for $i from 0 through length($spacing-scale) - 1 {
  $value: nth($spacing-scale, $i + 1);

  .m-#{$i} { margin: $value !important; }
  .p-#{$i} { padding: $value !important; }

  .mt-#{$i} { margin-top: $value !important; }
  .mb-#{$i} { margin-bottom: $value !important; }
  .ml-#{$i} { margin-left: $value !important; }
  .mr-#{$i} { margin-right: $value !important; }

  .pt-#{$i} { padding-top: $value !important; }
  .pb-#{$i} { padding-bottom: $value !important; }
  .pl-#{$i} { padding-left: $value !important; }
  .pr-#{$i} { padding-right: $value !important; }
}

/* Grid system */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$container-padding;
  margin-left: -$container-padding;
}

.col {
  flex: 1 0 0%;
  padding-right: $container-padding;
  padding-left: $container-padding;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  padding-right: $container-padding;
  padding-left: $container-padding;
}

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    flex: 0 0 percentage($i / $grid-columns);
    max-width: percentage($i / $grid-columns);
    padding-right: $container-padding;
    padding-left: $container-padding;
  }
}

@each $breakpoint, $breakpoint-width in $breakpoints {
  @media (min-width: $breakpoint-width) {
    .col-#{$breakpoint} {
      flex: 1 0 0%;
      padding-right: $container-padding;
      padding-left: $container-padding;
    }

    .col-#{$breakpoint}-auto {
      flex: 0 0 auto;
      width: auto;
      padding-right: $container-padding;
      padding-left: $container-padding;
    }

    @for $i from 1 through $grid-columns {
      .col-#{$breakpoint}-#{$i} {
        flex: 0 0 percentage($i / $grid-columns);
        max-width: percentage($i / $grid-columns);
        padding-right: $container-padding;
        padding-left: $container-padding;
      }
    }
  }
}

/* Gutter utilities with .g-X */
.row {
  margin-right: -#{map-get($gutters, 3)}; /* Default 1rem gutter */
  margin-left: -#{map-get($gutters, 3)};
  margin-top: -#{map-get($gutters, 3)};   /* Vertical gutter */
  margin-bottom: -#{map-get($gutters, 3)};
}

.col {
  padding-right: #{map-get($gutters, 3)}; /* Default 1rem padding */
  padding-left: #{map-get($gutters, 3)};
  padding-top: #{map-get($gutters, 3)};   /* Vertical padding */
  padding-bottom: #{map-get($gutters, 3)};
}

/* Variable gutter classes */
@for $i from 0 through length($gutters) - 1 {
  $gutter-value: map-get($gutters, $i);
  .g-#{$i} {
    margin-right: -$gutter-value;
    margin-left: -$gutter-value;
    margin-top: -$gutter-value;
    margin-bottom: -$gutter-value;
  }
  .col {
    &.g-#{$i} {
      padding-right: $gutter-value;
      padding-left: $gutter-value;
      padding-top: $gutter-value;
      padding-bottom: $gutter-value;
    }
  }
}

/* Responsive gutter classes */
@each $breakpoint, $breakpoint-width in $breakpoints {
  @media (min-width: $breakpoint-width) {
    @for $i from 0 through length($gutters) - 1 {
      $gutter-value: map-get($gutters, $i);
      .#{$breakpoint}-g-#{$i} {
        margin-right: -$gutter-value;
        margin-left: -$gutter-value;
        margin-top: -$gutter-value;
        margin-bottom: -$gutter-value;
      }
      .#{$breakpoint}-col {
        &.g-#{$i} {
          padding-right: $gutter-value;
          padding-left: $gutter-value;
          padding-top: $gutter-value;
          padding-bottom: $gutter-value;
        }
      }
    }
  }
}

/* Shadow utilities */
@each $key, $shadow in $shadows {
  .shadow-#{$key} {
    box-shadow: #{$shadow} !important;
  }
}

@each $key, $shadow in $drop-shadows {
  .drop-shadow-#{$key} {
    box-shadow: #{$shadow};
  }
}

/* Flex utilities */
@each $key, $value in $flex-directions {
  .flex-#{$key} {
    display: flex;
    flex-direction: $value;
  }
}

@each $key, $value in $justify-content-values {
  .justify-#{$key} {
    display: flex;
    justify-content: $value;
  }
}

@each $key, $value in $align-items-values {
  .align-#{$key} {
    display: flex;
    align-items: $value;
  }
}

/* Card component */
.card {
  background-color: map-get($colors, white);
  border-radius: 0.5rem;
  box-shadow: map-get($shadows, 3);
  transition: box-shadow 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;

  .card-header{
    padding: 0.4rem;

    &.theme-header{
      background-color: #{map-get($colors, 'dark')} !important;
      color: #{map-get($colors, primary-alt)};
    }
  }
  .card-body{
    padding: 1rem;
  }

  &.card-hover{
      &:hover {
        box-shadow: map-get($shadows, 5);
      }
  }
}

/* Button base */
.btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.1s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  line-height: 1.2;

  &:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
  }

  &:active {
    transform: translateY(1px);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  // Flat variant
  &.flat {
    box-shadow: none;
    padding: 0.25rem 0.5rem;
  }

  // Background color variants
  &.primary {
    background-color: map-get($colors, primary);
    color: map-get($colors, white);

    &:hover:not(:disabled) {
      background-color: darken(map-get($colors, primary), 7%);
    }
  }

  &.secondary {
    background-color: map-get($colors, secondary);
    color: map-get($colors, white);

    &:hover:not(:disabled) {
      background-color: darken(map-get($colors, secondary), 7%);
    }
  }

  &.danger {
    background-color: map-get($colors, danger);
    color: map-get($colors, white);

    &:hover:not(:disabled) {
      background-color: darken(map-get($colors, danger), 7%);
    }
  }
}


/* Filled buttons */
@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
    color: if(lightness($color) > 60%, #212529, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:hover {
      background-color: darken($color, 8%);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:focus-visible {
      box-shadow: 0 0 0 3px rgba($color, 0.4);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

/* Outline buttons */
@each $name, $color in $colors {
  .btn-outline-#{$name} {
    background-color: transparent;
    border: 2px solid $color;
    color: $color;

    &:hover {
      background-color: $color;
      color: if(lightness($color) > 60%, #212529, #fff);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:focus-visible {
      box-shadow: 0 0 0 3px rgba($color, 0.4);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

/* Ghost buttons */
@each $name, $color in $colors {
  .btn-ghost-#{$name} {
    background-color: transparent;
    color: $color;
    border: none;

    &:hover {
      background-color: rgba($color, 0.1);
      box-shadow: none;
    }

    &:focus-visible {
      box-shadow: 0 0 0 3px rgba($color, 0.4);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}


// Borders
@each $key, $width in $border-widths {
    .border-#{$key} {
      border: #{$width} solid currentColor;
    }
  }
  
  .border {
    border: 1px solid currentColor;
  }
  
  .border-top    { border-top: 1px solid currentColor; }
  .border-bottom { border-bottom: 1px solid currentColor; }
  .border-left   { border-left: 1px solid currentColor; }
  .border-right  { border-right: 1px solid currentColor; }
  
  // Border radius
  @each $key, $radius in $border-radius-sizes {
    .rounded-#{$key} {
      border-radius: $radius;
    }
  }
  
  .rounded       { border-radius: 0.25rem; } // default
  .rounded-top   { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
  .rounded-bottom{ border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
  .rounded-left  { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
  .rounded-right { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
  

  // Margin utilities for all directions
@for $i from 0 through length($spacing-scale) - 1 {
    $value: nth($spacing-scale, $i + 1);
  
    .ms-#{$i} { margin-left: $value; }
    .me-#{$i} { margin-right: $value; }
    .mt-#{$i} { margin-top: $value; }
    .mb-#{$i} { margin-bottom: $value; }
  
    .mx-#{$i} { margin-left: $value; margin-right: $value; }
    .my-#{$i} { margin-top: $value; margin-bottom: $value; }
  }
  
  // Padding utilities for all directions
  @for $i from 0 through length($spacing-scale) - 1 {
    $value: nth($spacing-scale, $i + 1);
  
    .ps-#{$i} { padding-left: $value; }
    .pe-#{$i} { padding-right: $value; }
    .pt-#{$i} { padding-top: $value; }
    .pb-#{$i} { padding-bottom: $value; }
  
    .px-#{$i} { padding-left: $value; padding-right: $value; }
    .py-#{$i} { padding-top: $value; padding-bottom: $value; }
  }
  
  // Responsive Margin and Padding
  @each $breakpoint, $breakpoint-width in $breakpoints {
    @media (min-width: $breakpoint-width) {
      @for $i from 0 through length($spacing-scale) - 1 {
        $value: nth($spacing-scale, $i + 1);
  
        .#{$breakpoint}-ms-#{$i} { margin-left: $value; }
        .#{$breakpoint}-me-#{$i} { margin-right: $value; }
        .#{$breakpoint}-mt-#{$i} { margin-top: $value; }
        .#{$breakpoint}-mb-#{$i} { margin-bottom: $value; }
  
        .#{$breakpoint}-mx-#{$i} { margin-left: $value; margin-right: $value; }
        .#{$breakpoint}-my-#{$i} { margin-top: $value; margin-bottom: $value; }
  
        .#{$breakpoint}-ps-#{$i} { padding-left: $value; }
        .#{$breakpoint}-pe-#{$i} { padding-right: $value; }
        .#{$breakpoint}-pt-#{$i} { padding-top: $value; }
        .#{$breakpoint}-pb-#{$i} { padding-bottom: $value; }
  
        .#{$breakpoint}-px-#{$i} { padding-left: $value; padding-right: $value; }
        .#{$breakpoint}-py-#{$i} { padding-top: $value; padding-bottom: $value; }
      }
    }
  }
  

  // Text alignment utilities
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

// Text transformation utilities
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

// Font weight utilities
.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-bold { font-weight: 700; }
.font-weight-heavy { font-weight: 900; }

// Text decoration utilities
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-decoration { text-decoration: none; }

// Image sizing utilities
.img-w-100 { width: 100%; }
.img-w-auto { width: auto; }
.img-w-50 { width: 50%; }
.img-w-75 { width: 75%; }
.img-w-25 { width: 25%; }

.img-h-100 { height: 100%; }
.img-h-auto { height: auto; }
.img-h-50 { height: 50%; }
.img-h-75 { height: 75%; }

.img-max-w-100 { max-width: 100%; }
.img-max-w-50 { max-width: 50%; }
.img-max-h-100 { max-height: 100%; }
.img-max-h-50 { max-height: 50%; }

.image-container{
  position: relative;
  max-width: 100%;
  width:100%;
  flex: 1;

  img{
    width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

// Aspect ratio utilities (for common ratios)
.img-aspect-ratio-16-9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; // 16:9 aspect ratio

  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.img-aspect-ratio-4-3 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; // 4:3 aspect ratio

  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.img-aspect-ratio-1-1 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; // 1:1 aspect ratio (square)

  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// Image border radius utilities
.img-rounded { border-radius: 0.25rem; }
.img-rounded-sm { border-radius: 0.125rem; }
.img-rounded-md { border-radius: 0.375rem; }
.img-rounded-lg { border-radius: 2rem; }
.img-rounded-full { border-radius: 50%; }

// Image border utilities
.img-border { border: 1px solid #ddd; }
.img-border-2 { border: 2px solid #ddd; }
.img-border-3 { border: 3px solid #ddd; }
.img-border-0 { border: none; }

// Image filters
.img-filter-blur {
  filter: blur(4px);
}

.img-filter-grayscale {
  filter: grayscale(100%);
}

.img-filter-brightness {
  filter: brightness(1.2);
}

.img-filter-contrast {
  filter: contrast(1.5);
}

.img-filter-sepia {
  filter: sepia(1);
}

.img-filter-invert {
  filter: invert(1);
}

.img-filter-saturate {
  filter: saturate(2);
}

// Image alignment utilities
.img-align-left { display: block; margin-right: auto; }
.img-align-right { display: block; margin-left: auto; }
.img-align-center { display: block; margin-left: auto; margin-right: auto; }

.img-align-start { align-self: flex-start; }
.img-align-end { align-self: flex-end; }
.img-align-center-flex { align-self: center; }

// Responsive images with max-width and auto height
.img-responsive {
  width: 100%;
  height: auto;
  max-width: 100%;
}


/* Form Inputs */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

label {
  font-size: 1rem;
  font-weight: 400;
}

.form-input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  appearance: none;
  width: 100%;
  padding: 0.35rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border-radius: 0.375rem;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid;
  outline: none;
  border-color: map-get($colors, muted);
  color: map-get($colors, secondary);
  background-color: #fdfdfd;

  &:focus {
    outline: none;
    border-color: map-get($colors, primary);
    box-shadow: 0 0 0 3px rgba(map-get($colors, primary), 0.2);
    background-color: #fff;
  }

  &:disabled {
    background-color: map-get($colors, light);
    cursor: not-allowed;
    opacity: 0.6;
  }
}

::placeholder {
  color: map-get($colors, gray);
  opacity: 1;
}

.sm-reverse{
  @media (max-width: map-get($breakpoints, "md")) {
    flex-direction: column-reverse;
  }
}

.rel{
  position: relative;
}

.full-height{
  height: calc(100vh - 52px);
}

.no-wrap{
  flex-wrap: nowrap;
}

.no-click{
  pointer-events: none;
}

/* Alert */
.alert {
  border-radius: #{map-get($border-radius-sizes, md)};
  padding: #{map-get($spacing, "2")};

  &.success {
    background-color: lighten(map-get($colors, success), 25%);
    color: #{map-get($colors, success)};
  }

  &.warning {
    background-color: lighten(map-get($colors, warning), 25%);
    color: #{map-get($colors, warning)};
  }

  &.danger {
    background-color: lighten(map-get($colors, danger), 25%);
    color: #{map-get($colors, danger)};
  }

  &.info {
    background-color: lighten(map-get($colors, info), 25%);
    color: #{map-get($colors, info)}; 
  }
}



/* Misc tools */
.spinner {
  height: 1rem;
  width: 1rem;
  border: 2px solid #{map-get($colors, dark)};
  border-left-color: transparent !important;
  border-radius: 50%;
  display: inline-block;
  animation: 1s linear infinite spinner;

  &.primary {
    border: 2px solid #{map-get($colors, primary)};
  }

  &.secondary {
    border: 2px solid #{map-get($colors, secondary)};
  }

  &.accent {
    border: 2px solid #{map-get($colors, accent)};
  }
}