@aegov/design-system/dist/blocks.css

A design system for the Government of the United Arab Emirates. The design system has been created based on research and information collected from in-depth studies conducted on user behaviour and benchmarking best practices. The primary use of this desig

.aegov-header {
  @apply before:from-primary-400 before:to-primary-600 relative pt-2 before:absolute before:top-0 before:h-2 before:w-full before:bg-gradient-to-b;
}
.custom-divide-common {
  @apply before:absolute before:end-0 before:top-2/4 before:-translate-y-2/4;
}
.custom-divide > * {
    @apply relative inline-flex;
  }
.custom-divide > *:not(:last-child) {
      @apply custom-divide-common before:bg-aeblack-100 me-3 pe-3 before:h-3.5 before:w-px xl:me-4 xl:pe-4;
    }
.custom-divide-sm > *:not(:last-child) {
      @apply me-1.5 pe-1.5 before:h-3.5 before:w-px xl:me-2 xl:pe-2;
    }
.logos {
  @apply flex flex-shrink-0 items-center;
}
.logos .logo-item {
    @apply relative;
  }
.logos .logo-item:not(:last-child) {
      @apply  me-4 md:me-5 lg:me-6 xl:me-10 ;
    }
.logo img {
    @apply block max-h-12 sm:max-h-14 md:max-h-16 lg:max-h-[4.688rem] xl:max-h-20 2xl:max-h-24 max-w-[8.75rem] sm:max-w-[10.625rem] md:max-w-[11.25rem] lg:max-w-[13rem] xl:max-w-[15rem] 2xl:max-w-[25rem];
  }
/* .rating-logo {
  @apply inline-block w-8 md:w-10 lg:w-12 xl:w-auto;
} */
.secondary-logo {
  @apply h-8 md:h-12 lg:h-14 xl:h-[4.5rem] object-contain;
}
.header-top-right {
  @apply relative min-w-10 md:min-w-12 lg:min-w-16 xl:min-w-20 min-h-10 md:min-h-12 xl:min-h-20;
}
.header-top-right > a {
    @apply absolute -top-2 right-0 min-w-max min-h-max;
  }
.header-top-right .emblem-logo {
    @apply w-12 h-12 md:w-14 md:h-14 lg:w-[4.5rem] lg:h-[4.5rem] xl:w-24 xl:h-24 max-w-max;
  }
/* .header-top {
  @apply py-2.5 lg:py-3;
} */
.hamburger-icon svg {
  @apply inline-flex h-8 w-8;
}
.header-common-links li:not(:last-child) {
      @apply before:bg-primary-300;
    }
.header-common-links a {
    @apply text-aeblack-700 hover:text-primary-500 flex items-center gap-3 text-sm font-medium no-underline;
  }
.header-navs {
  @apply bg-aeblack-50;
}
.main-navigation .nav-menu > .menu-item > a {
        @apply text-aeblack-800 inline-flex items-center rounded-none border-b border-transparent font-bold md:border-b-2 lg:h-14 lg:px-2 lg:text-sm xl:h-16 xl:border-b-[0.188rem] xl:px-3 xl:text-base 2xl:border-b-4 2xl:text-lg delay-200;
      }
.main-navigation .menu-item a {
      @apply no-underline;
    }
.main-navigation .menu-item.active-page > a {
        @apply border-primary-900 text-primary-900;
      }
.main-navigation .menu-item.menu-item-has-children > a {
        @apply inline-flex items-center gap-2 transition-colors lg:pe-6 xl:pe-8 2xl:pe-9;
      }
.main-navigation .menu-item.menu-item-has-children .submenu-btn {
        @apply focus:ring-primary-support-400 relative inline-block focus:outline-none focus:ring-2 focus:ring-offset-0 lg:-ms-5 xl:-ms-8 lg:w-4 xl:w-6 lg:h-14 xl:h-16 [&.active-ic-btn]:ring-2 [&.active-ic-btn]:ring-primary-support-400 [&.inactive-ic-btn]:!ring-0;
      }
.main-navigation .menu-item.menu-item-has-children .submenu-btn svg, .main-navigation .menu-item.menu-item-has-children .submenu-btn img{
          @apply lg:w-3 lg:h-3 mx-auto;
        }
[dir="rtl"] .aegov-header .main-navigation .nav-menu > .menu-item > a {
           @apply font-medium lg:font-bold lg:text-xs xl:text-sm 2xl:text-base;
          }
[dir="rtl"] .aegov-header .main-navigation .nav-menu > .menu-item.menu-item-has-children > a {
              @apply gap-1 lg:gap-2;
            }
[dir="rtl"] .aegov-header .main-navigation .nav-menu > .menu-item:first-child > a > span {
                display:none;
              }
.has-link-icon a {
    @apply inline-flex items-center gap-2 no-underline;
  }
.has-link-icon a svg {
      @apply h-4 w-4 flex-shrink-0 xl:h-5 xl:w-5;
    }
.header-navs-right li a {
      @apply text-primary-600 hover:text-primary-500 text-sm font-bold lg:text-xs xl:text-sm;
    }
.submenu {
  @apply bg-whitely-50;
}
.submenu .submenu-title {
    @apply capitalize lg:mb-4 xl:mb-5 2xl:mb-6;
  }
.submenu li a {
      @apply text-aeblack-900 hover:text-primary-700 hover:underline inline-block px-3 py-2 text-sm transition-colors xl:text-base;
    }
.submenu-title {
  @apply text-primary-500 font-bold lg:text-sm xl:text-base;
}
/* .menu-item-has-children{
    &:hover{
       & .submenu{
            @apply block;
        }
    }
} */
.rounded-bordered {
  @apply border-aeblack-100 rounded-lg border;
}
.aegov-backdrop + .aegov-backdrop, .aegov-modal-backdrop + .aegov-modal-backdrop {
  @apply z-50;
}
/* footer  */
.aegov-footer {
  @apply bg-aeblack-50 before:from-primary-400 before:to-primary-600 relative pt-2 before:absolute before:top-0 before:h-2 before:w-full before:bg-gradient-to-b;
}
.aegov-footer a {
    @apply text-aeblack-700 hover:text-primary-600 text-sm font-normal no-underline xl:text-base;
  }
.aegov-footer .accordion-title button {
      @apply !text-primary-600 text-base font-bold md:text-lg lg:text-xl;
    }
.aegov-footer .accordion-title button svg {
        @apply text-aeblack-600;
      }
.aegov-footer .accordion-title button.accordion-active {
        @apply text-primary-700;
      }
.aegov-footer .accordion-title button.accordion-active svg {
          @apply text-primary-700;
        }
.aegov-footer .accordion-content-body {
    @apply space-y-3;
  }
.footer-contact {
  @apply max-lg:text-center max-sm:py-8;
}
.footer-contact li {
    @apply w-full justify-center py-3 xl:px-8;
  }
.footer-contact li > a {
      @apply text-aeblack-800 hover:text-aeblack-600 font-bold;
    }
.footer-contact li svg {
      @apply inline-block h-4 w-4 flex-shrink-0;
    }
.inline-with-gap {
  @apply inline-flex items-center gap-3;
}
.social-sharing {
  @apply flex items-center gap-6;
}
.social-sharing a {
    @apply text-aeblack-600 hover:text-aeblack-500;
  }
.social-sharing svg {
    @apply inline-block h-8 w-8;
  }
.footer-bottom {
  @apply border-aeblack-100 border-t max-lg:text-center;
}
/* Aegov Hero */
.aegov-hero {
  @apply w-full m-auto;
}
.aegov-hero picture img {
      @apply w-full;
    }
.aegov-hero .hero-viewport {
    @apply overflow-hidden;
  }
.aegov-hero .hero-container {
    backface-visibility: hidden;
    touch-action: pan-y pinch-zoom;
    /* margin-left: calc(1rem * -1); */
    @apply flex rtl:flex-row-reverse;
  }
.aegov-hero .hero-slide {
    @apply min-w-0 flex-[0_0_100%];
  }
.aegov-hero .hero-controls {
    @apply flex items-center justify-between gap-3 lg:absolute lg:bottom-5 xl:bottom-7 mt-2 md:mt-4 lg:mt-0 px-4 md:px-8 lg:px-0 lg:start-12 xl:start-[4.25rem];
  }
.aegov-hero .hero-buttons {
    @apply flex gap-3 items-center;
  }
.aegov-hero .hero-button {
    @apply appearance-none bg-transparent touch-manipulation inline-flex no-underline cursor-pointer border-0 p-0 m-0 shadow-none w-7 h-7 z-[1] items-center justify-center rounded-full;
  }
.aegov-hero .hero-button:disabled {
      @apply opacity-40;
    }
.aegov-hero .hero-dots {
    @apply flex flex-wrap justify-end items-center;
  }
.aegov-hero .hero-dots button {
      @apply appearance-none bg-transparent touch-manipulation inline-flex no-underline cursor-pointer border-0 p-0 m-0 shadow-none w-6 h-6 items-center justify-center rounded-3xl text-[0px] after:bg-aeblack-800/30 after:w-3 after:h-3 after:rounded-full after:flex after:items-center;
    }
.aegov-hero .hero-dots button.hero-dot-selected:after {
        @apply bg-aeblack-800;
      }
.aegov-hero .hero-row {
    @apply flex md:flex-row flex-col-reverse bg-primary-100 rtl:[direction:rtl];
  }
.aegov-hero .hero-col-left {
    @apply relative sm:basis-2/4 md:basis-8/12 lg:basis-2/4 pt-5 xl:pt-12 px-8 xl:px-12 pb-10 lg:pb-24 xl:pb-32 flex items-center md:before:absolute md:before:inset-0 md:before:z-10 md:before:w-[130%] md:before:h-full md:before:bg-gradient-to-r rtl:md:before:bg-gradient-to-l md:before:from-primary-100 md:before:from-80%;
  }
.aegov-hero .hero-col-right {
    @apply sm:basis-2/4 md:basis-4/12 lg:basis-2/4 relative;
  }
.aegov-hero .hero-col-right img{
      @apply md:absolute md:inset-0 w-full md:h-full object-cover 2xl:aspect-[4/2.8] 2xl:static;
    }
.aegov-hero .hero-col-content {
    @apply space-y-4 xl:space-y-5 text-center md:text-left rtl:md:text-right relative z-20;
  }
.aegov-hero .hero-hero-title-wrap {
    @apply absolute top-6 md:top-2/4 md:-translate-y-2/4 text-center px-4 sm:px-0 left-0 right-0 sm:right-auto sm:text-left rtl:sm:text-right sm:start-6 md:start-8 lg:start-12 xl:start-[4.25rem] space-y-4 md:space-y-5 xl:space-y-10 rtl:[direction:rtl];
  }
.aegov-hero .hero-title {
    @apply text-h4 md:text-h3 xl:text-h2 text-aegold-700 font-inter rtl:font-alexandria font-semibold line-clamp-2;
  }
.aegov-hero .hero-hero-title {
    @apply text-h4 md:text-h3 lg:text-h1 xl:text-display font-light text-whitely-50 sm:w-7/12 lg:w-[54%] xl:w-7/12 font-inter rtl:font-alexandria line-clamp-2;
  }
.aegov-hero .hero-description {
    @apply text-h6 md:text-h5 xl:text-h4 text-aegold-700 font-inter rtl:font-notokufi font-extralight line-clamp-3;
  }
/* .has-ratio-image {
  @apply max-sm:[&_picture_img]:aspect-[4/3] sm:[&_picture_img]:aspect-[4/2.7] md:[&_picture_img]:aspect-[4/6.1] lg:[&_picture_img]:aspect-[4/3.5] xl:[&_picture_img]:aspect-[4/2.8] [&_picture_img]:object-cover [&_picture_img]:!w-full;
} */
.has-ratio-image {
  @apply 2xl:[&_picture_img]:aspect-[4/2.8] [&_picture_img]:object-cover [&_picture_img]:!w-full;
}
/* Hero slick  */
.hero-dots ul {
    @apply flex items-center mt-0 space-x-0;
    
  }
.hero-dots ul li {
      @apply flex;
    }
.hero-dots ul li.slick-active button::after {
            @apply bg-aeblack-800;
          }
.aegov-hero .slick-slide {
    @apply rtl:float-left;
  }
.aegov-hero .slick-slide .slick-track, .aegov-hero .slick-slide .slick-list{
      direction: ltr;
    }
/* Hero static */
.aegov-hero-static {
  @apply py-8 md:py-12 xl:py-16 bg-no-repeat bg-cover;
}
.aegov-hero-static .hero-static-header {
    @apply text-center max-w-4xl mx-auto mb-8 md:mb-10 lg:mb-12 xl:mb-14;
  }
.aegov-hero-static .hero-static-title-sm {
    @apply uppercase text-primary-700 font-inter text-base md:text-lg xl:text-xl font-extralight mb-4;
  }
.aegov-hero-static .hero-static-title {
    @apply text-primary-500 font-inter text-h4 md:text-h3 lg:text-h2 xl:text-h1 font-extrabold mb-10 md:mb-12 xl:mb-14;
  }
/* slick dots style */
.aegovs-slider-style .slick-dots {
        @apply flex items-center justify-center gap-3 mt-4 lg:mt-6 xl:mt-8 2xl:mt-10;
    }
.aegovs-slider-style .slick-dots button{
            @apply h-3 w-3 rounded-full bg-aeblack-400 text-[0px] focus:outline-none focus-visible:ring focus-visible:ring-primary-400 ; 
        }
.aegovs-slider-style .slick-dots .slick-active button{
            @apply bg-primary-600 ring-4 ring-primary-400/30;
        }
/* fix slick slider issue in RTL  */
.slick-slider .slick-track, .slick-slider .slick-list {
    direction: ltr;
}
[dir="rtl"] .slick-slider .slick-slide{
            direction: rtl;
        }