styles_food.css

:root{

    --white: hsla(0, 0%, 100%, 1);
    --white1: hsla(0, 0%, 100%, 0.08);
    --white2: hsla(0, 0%, 100%, 0.12);
    --cultured: hsla(220, 20%, 97%, 1);
    --snow: hsla(345, 57%, 97%, 1);
    --gray: hsla(219, 10%, 62%, 1);
    --gray-blue: hsla(220, 12%, 43%, 1);
    --cadet-blue: hsla(222, 23%, 71%, 0.2);
    --calm-blue: #dcf0f0;
    --calm-blue-2: #8ac9ed;
    --black-1: hsla(216, 14%, 14%, 1);
    --gunmetal: hsla(214, 15%, 21%, 1);
    --charcoal: hsla(219, 22%, 26%, 1);
    
    /* */
    --ff-manrope: 'Manrope', sans-serif;
    
    --fs-1: calc(2.7rem + 1.38vw);
    --fs-2: calc(2.6rem + .66vw);
    --fs-3: calc(2.6rem + .24vw);
    --fs-4: 1.9rem;
    --fs-5: 1.8rem;
    --fs-6: 1.7rem;
    --fs-7: 1.5rem;
    --fs-8: 1.4rem;
    
    --fw-700: 700;
    
    /* */
    --section-padding: 90px;
    
    /*Shadow*/
    --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
    --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);
    
    
    --radius-circle: 50%;
    --radius-pill: 100px;
    --radius-8: 8px;
    --radius-6: 6px;
    /*Transition*/
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --transition-3: 0.3s ease-in-out;
    
    }
    
    
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    li { list-style: none; }
    
    a,
    img,
    span,
    button,
    ion-icon { display: block; }
    
    a {
      color: inherit;
      text-decoration: none;
    }
    
    img { height: auto; }
    
    input,
    button,
    textarea {
      background: none;
      border: none;
      font: inherit;
    }
    
    input,
    textarea { width: 100%; }
    
    button { cursor: pointer; }
    
    ion-icon { pointer-events: none; }
    
    html {
      font-family: var(--ff-manrope);
      font-size: 10px;
      scroll-behavior: smooth;
    }
    
    body {
      background-color: var(--white);
      color: var(--gray-blue);
      font-size: 1.6rem;
      line-height: 1.7;
    }
    
    body.nav-active { overflow: hidden; }
    
    ::-webkit-scrollbar { width: 10px; }
    
    ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
    
    ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
    
    ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
    
    
    
    .container { padding-inline: 16px; }
    
    .social-list {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .social-link {
      font-size: 2rem;
      transition: var(--transition-1);
    }
    
    .social-link:is(:hover, :focus-visible) { transform: translateY(-3px); }
    
    .section { padding-block: var(--section-padding); }
    
    .w-100 { width: 100%; }
    
    .h1,
    .h2,
    .h3,
    .h4 {
      color: var(--charcoal);
      line-height: 1.3;
    }
    
    .h1 { font-size: var(--fs-1); }
    
    .h2 { font-size: var(--fs-2); }
    
    .h3 { font-size: var(--fs-3); }
    
    .h4 { font-size: var(--fs-4); }
      
    
    .section-text { font-size: var(--fs-5); }
    
    .section-title { margin-block-end: 16px; }
    
    .grid-list {
      display: grid;
      gap: 30px;
    }
    
    [data-reveal] {
      opacity: 0;
      transition: 0.75s ease;
    }
    
    [data-reveal="top"] { transform: translateY(-30px); }
    
    [data-reveal="bottom"] { transform: translateY(30px); }
    
    [data-reveal="left"] { transform: translateX(-30px); }
    
    [data-reveal="right"] { transform: translateX(30px); }
    
    [data-reveal].revealed {
      transform: translate(0);
      opacity: 1;
    }
    
    
    
    
    .header {
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--white);
        width: 100%;
        padding-block: 20px;
        box-shadow: var(--shadow-1);
        z-index: 4;
      }
      
      .header.active {
        position: fixed;
        animation: slideIn 0.5s ease forwards;
      }
      
      @keyframes slideIn {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(0); }
      }
      
      .header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .nav-open-btn {
        font-size: 3.5rem;
        color: var(--gunmetal);
      }
      
      .navbar {
        position: fixed;
        top: 0;
        left: -300px;
        background-color: var(--black-1);
        color: var(--white);
        max-width: 300px;
        width: 100%;
        height: 100vh;
        padding: 30px;
        padding-block-end: 40px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        z-index: 2;
        visibility: hidden;
        transition: var(--transition-3);
      }
      
      .navbar.active {
        visibility: visible;
        transform: translateX(300px);
      }
      
      .navbar-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .nav-close-btn {
        background-color: var(--white1);
        color: var(--white);
        font-size: 2rem;
        padding: 6px;
        border-radius: var(--radius-circle);
        transition: var(--transition-1);
      }
      
      .nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }
      
      .nav-close-btn:is(:hover, :focus-visible) { background-color: var(--white2); }
      
      .navbar-list { margin-block-end: auto; }
      
      .navbar-link {
        font-weight: var(--fw-700);
        padding-block: 6px;
      }
      
      .contact-link { transition: var(--transition-1); }
      
      .contact-link:is(:hover, :focus-visible) { color: var(--calm-blue); }
      
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--black-1);
        pointer-events: none;
        opacity: 0;
        transition: var(--transition-1);
      }
      
      .overlay.active {
        pointer-events: all;
        opacity: 0.8;
      }
      
      
      .hero {
        padding-block-start: calc(var(--section-padding) + 50px);
        background-color: var(--cultured);
      }
      
      .hero .container {
        display: grid;
        gap: 50px;
      }
      
      .hero-banner {
        position: relative;
        max-width: max-content;
        margin-inline: auto;
      }
      
      .hero-banner .w-100 {
        mask-image: url("assets/Blog.svg");
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        mask-size: auto;
        -webkit-mask-size: auto;
      }
    
    
    
    
    /*FOOTER */
    
    .footer { padding-block: 40px; }
    
    .copyright { margin-block-end: 12px; }
    
    .footer .social-link { color: var(--charcoal); }
    
      
    @media (min-width: 575px) {
    
        /* REUSED STYLE */
      
        .container {
          max-width: 540px;
          width: 100%;
          margin-inline: auto;
        }
      
      }
      @media (max-width:1250px){
        .blog-box{
            width: 300px;
        }
    }
    @media (max-width:1100px){
      .blog-box{
        width: 70%;
      }
    }
    @media (max-width:550px){
        .blog-box{
            margin: 20px 10px;
            width: 90%;
        }
    
    #blog{
     padding: 20px;
    }
}
      /* Responsive for large than 768px scree */
      
      @media (min-width: 768px) {
      
        .container { max-width: 720px; }
      
        .section-text { --fs-5: 2rem; }
      
      
        /*FOOTER*/
      
        .footer .container {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      
        .copyright { margin-block-end: 0; }
      
      }
    
    /* Blog */
    #blog{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 40px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .blog-heading{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .blog-heading h3{
      font-size:3.5rem ;
      color: #2b2b2b;
      font-weight: 600;
  }
  .blog-container{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
  }
  .blog-box{
      width: 350px;
      background-color: #ffffff;
      border: 1px solid #ececec;
      margin: 20px;
  }
  .blog-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
  }
  .blog-text{
      padding: 30px;
      display: flex;
      flex-direction: column;
  
  }
  .blog-text span{
      color: var(--gray-blue);
      font-size: 1rem;
  }
  .blog-text .blog-title{
      font-size: 2rem;
      font-weight: 500;
       color: #272727;
  }
  .blog-text .blog-title:hover{
  
       color: #f33c3c;
       transition: all ease 0.3s;
  }
  .blog-text p{
       color: #9b9b9b;
       font-size: 1.2rem;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 20px 0px;
  }
  .blog-text a{
  color:#0f0f0f;
  }
  .blog-text a:hover{
      color:#f33c3c;
      transition: all ease 0.3s;
      }
      
      
      
      
      /**
       * responsive for large than 992px screen
       */
      
      @media (min-width: 992px) {
      
        /**
         * CUSTOM PROPERTY
         */
      
        :root {
      
          /**
           * spacing
           */
      
          --section-padding: 120px;
      
        }
      
      
        /* REUSED STYLE*/
      
        .container { max-width: 960px; }
      
      
        /*HEADER*/
      
        .nav-open-btn,
        .navbar-top,
        .navbar .wrapper,
        .overlay { display: none; }
      
        .navbar,
        .navbar.active {
          all: unset;
          display: flex;
          flex-grow: 1;
        }
      
        .navbar-list {
          display: flex;
          gap: 36px;
          margin-inline: auto;
        }
      
        .navbar-link {
          color: var(--charcoal);
          transition: var(--transition-1);
        }
      
        .navbar-link:is(:hover, :focus-visible) { color: var(--calm-blue); }
      
        .navbar .social-link {
          color: var(--charcoal);
          font-size: 1.8rem;
        }
      
        .header {
          top: 45px;
          max-width: 960px;
          left: 50%;
          transform: translateX(-50%);
          padding-inline: 16px;
          border-radius: var(--radius-8);
        }
      
        .header.active {
          top: 0;
          left: 0;
          max-width: unset;
          border-radius: 0;
        }
      
      
        /* HERO */
      
        .hero { padding-block-start: calc(var(--section-padding) + 80px); }
      
        .hero .container {
          grid-template-columns: 0.8fr 1fr;
          align-items: center;
          gap: 100px;
        }
      
        .hero-content { text-align: left; }
      
        .hero .btn-wrapper { justify-content: flex-start; }
      
      }
      
      
      /* responsive for large than 1200px screen*/
      
      @media (min-width: 1200px) {
      
        /**
         * REUSED STYLE
         */
      
        .container,
        .header { max-width: 1140px; }
      
      }
      
      
      /*responsive for large than 1400px screen */
      
      @media (min-width: 1400px) {
      
        /*REUSED STYLE*/
      
        .container,
        .header { max-width: 1320px; }
      
        /*HERO */
      
        .hero .container { grid-template-columns: 1fr 0.8fr; }
      
        .hero .section-text { --fs-5: 2.4rem; }
      
      
      
        /* ABOUT*/
      
        .about .wrapper { gap: 100px; }
      
        .about .grid-list { gap: 60px; }
      
      }