presspage.scss

//main.scss

@import 'abstracts/variables';
@import 'base/base';
@import 'layout/grid';
@import 'components/buttons';
@import 'pages/press-page';


//abstracts/_variables.scss

$primary-color: #d6e3f8;
$secondary-color: #ebe8e8;
$background-color: #131212;
$background-color-article: #313131;
$font-family: 'Helvetica, Arial, sans-serif';
$spacing-unit: 1rem;
$transition-time: 0.3s;
$border-radius: 10px;


//base/_base.scss

body {
  font-family: $font-family;
  margin: 0;
  padding: 0;
  background-color: $background-color;
  color: $secondary-color;
}

h1, h2, h3 {
  margin-bottom: $spacing-unit;
}

a {
  color: $primary-color;
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-unit;
}


//components/_buttons.scss

.button {
  padding: $spacing-unit calc($spacing-unit * 2);
  background-color: $primary-color;
  color: #000;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  transition: background-color $transition-time, transform $transition-time;

  &:hover {
    background-color: darken($primary-color, 10%);
    transform: scale(1.05);
  }
}


// layout/_grid.scss

.grid--2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  // Defines two equal-width columns
  grid-gap: $spacing-unit;
  // Adds gap between grid items

  @media (max-width: 768px) {
    grid-template-columns: 1fr;  // On smaller screens, make the grid 1 column
  }
}


//pages/_press-page.scss

.press-page {
  padding: $spacing-unit calc($spacing-unit * 2);

  &__header {
    position: relative;
    height: 100vh;  // Takes up 1/4 of the screen height
    background-color: $primary-color;
    clip-path: polygon(0 14%, 99% 0, 100% 78%, 0 100%);
    margin-bottom: calc($spacing-unit * 3);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000;
    background-image: url('../img/headerimg.jpg');
    background-size: cover;
    background-position: center;

    &__overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); // Dark overlay for better text visibility
    }

  }

  &__grid {
    @extend .grid--2x2;  // Apply 2x2 grid layout
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
  }

  &__article {
    background-color: $background-color-article;
    padding: $spacing-unit;
    border-radius: $border-radius;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform $transition-time;
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-10px);
    }

    &-image {
      width: 100%;
      height: 200px;
      border-radius: $border-radius $border-radius 0 0;
      object-fit: cover;
    }

    &-content {
      padding: $spacing-unit;
    }

    &-title {
      font-size: 1.5rem;
      margin-bottom: $spacing-unit;
      font-weight: bold;
    }

    &-excerpt {
      font-size: 1rem;
      color: lighten($secondary-color, 20%);
      margin-bottom: $spacing-unit;
    }

    &-link {
      font-size: 1rem;
      font-weight: bold;
      color: $primary-color;
      text-transform: uppercase;
    }
  }

  &__contact {
    padding: calc($spacing-unit * 4) calc($spacing-unit * 2);
    text-align: center;

    &-title {
      font-size: 2rem;
      margin-bottom: calc($spacing-unit * 2);
      font-weight: bold;
    }

    &-logo {
      display: flex;
      justify-content: center;
      margin-bottom: $spacing-unit * 2;

      &-image {
        width: 350px;
        height: auto;
        border-radius: $border-radius;
      }
    }

    &-info {
      &-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: $spacing-unit;
      }

      p {
        font-size: 1rem;
        //color: $text-color;
        margin-bottom: $spacing-unit;

        a {
          color: $primary-color;
          text-decoration: none;
          font-weight: bold;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  &__about {
    padding: calc($spacing-unit * 4) calc($spacing-unit * 2);
    background-color: $secondary-color;
    text-align: center;
    color: #000;

    &-title {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: calc($spacing-unit * 2);
    }

    &-text {
      font-size: 1.2rem;
      max-width: 800px;
      margin: 0 auto;
      margin-bottom: calc($spacing-unit * 4);
    }

    &-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-unit * 4;
      justify-content: center;

      &-stat {
        text-align: center;

        &-icon {
          width: 3.125rem;
          height: auto;
          margin-bottom: $spacing-unit * 2;
        }

        &-title {
          font-size: 1.8rem;
          font-weight: bold;
          margin-bottom: $spacing-unit;
        }

        p {
          font-size: 1rem;
          // color: $text-color-light;
        }
      }
    }
  }
}


.heading-main {
  position:relative;
  z-index: 1;

  &__title {
    font-size: 2.5rem;
    animation: slideIn 0.8s ease-in-out;
    text-align: center;
  }
}



@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}