style.css

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

/* ROOT */

:root {
  --ff-primary : 'Public Sans', sans-serif;

  --fw-reg: 300;
  --fw-med: 400;
  --fw-bold: 700;

  --fs-link: 14px;
  --fs-body: 18px;
  --fs-content-text: 16px;
  --fs-snippet-title: 16px;
  --fs-snippet-text: 13px;
  --fs-footer: 11px;

  --fs-h1: 56px;
  --fs-h2 : 40px;
  --fs-h3: 24px;
  --fs-small: 10px;

  --lh-h1: 64px;
  --lh-h2: 64px;
  --lh-h3: 28px;
  --lh-small: 18px;
  --lh-snippet-title: 20px;
  --lh-snippet-text: 18px;
  
  --lh-link: 16px;
  --lh-body: 28px;
  --lh-content-text: 26px;
  --lh-btn: 28px;

  --clr-primary-dark: hsl(233, 26%, 24%);
  --clr-primary-highlight-one: hsl(136, 65%, 51%);
  --clr-primary-highlight-two: hsl(192, 70%, 51%);

  --clr-reg-text: hsl(233, 8%, 62%);
  --clr-light-bg: hsl(220, 16%, 96%);
  --clr-body-bg: hsl(0, 0%, 98%);
  --clr-white: hsl(0, 0%, 100%);

  --clr-att-a : hsl(228, 45%, 44%);

}

/* GENERAL */

body {
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-med);
  background: var(--clr-body-bg);
}

img {
  display:block;
  width:100%;
}

ul li {list-style:none;}

a {text-decoration: none;}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--fs-h1);
  font-weight: var(--fw-reg);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-reg);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-reg);
}

p{color: var(--clr-reg-text);}

.outer_wrapper {}

.inner_wrapper {
  width: 100%;
  max-width: 1200px;
  padding-inline: 20px;
  margin: 0 auto;
}

.flex_ {display:flex;}
.grid_ { display:grid;}

input,
button,
form {
  font-family:inherit;
  font-size:inherit;
}

.btn {
  display:block;
  cursor:pointer;
  font-weight:var(--fw-bold);
  font-size: var(--fs-link);
  line-height: var(--lh-btn);
  width: 150px;
  height: 40px;
  text-align: center;
  border:none;
  border-radius: 50px;
}

.btn_primary {
  color: var(--clr-white);
  background: linear-gradient(135deg, var(--clr-primary-highlight-one) 0%, var(--clr-primary-highlight-two) 100%);
  opacity:1;
  transition: opacity 350ms linear;
}

.btn_primary:hover {opacity: 0.5;}

/* Header */

header{
  box-shadow: 0px 5px 5px -10px var(--clr-primary-dark);
  background: var(--clr-white);
  z-index: 300;
}

.header_inner_wrapper {
  justify-content: space-between;
  place-items: center;
  width: 100%;
  /* position:fixed; */
}

.logo_img {width: 140px;}

/* Nav */

.navbar ul {
  gap: 30px;
  margin-block: 30px;
}

.nav_item_link { 
  font-size: var(--fs-link);
  line-height: var(--lh-link);
  color: var(--clr-reg-text);
  border-bottom: 4px transparent solid;
  padding-block: 30px;
  transition: border 350ms linear, color 350ms linear;
}

.nav_item_link:hover,
.nav_item_link:focus {
  border-bottom: 4px var(--clr-primary-highlight-one) solid;
  color: var(--clr-primary-dark);
}

.nav_buttons {display:none;}

/* HERO */

.inner_wrapper_hero {
  width: 100%;
  max-width: 1440px;
  padding-left: 20px;
  margin: 0 auto;
  grid: 0.5fr 1fr 0.5fr / repeat(2, 1fr);
  grid-template-areas:
  '_ img'
  'content img'
  '- img';     
}

.hero_content {
  grid-area: content;
  flex-direction: column;
  gap: 2em;
}

.hero_content_title {max-width: 17ch;}

.hero_content_text {
  max-width: 43ch;
  font-size: var(--fs-body);
}

.hero_img_bg {
  grid-area: img;
  background: url(./images/bg-intro-desktop.svg) no-repeat;
  background-position: 10px -150px;
  background-size: 120%;
  position: relative;
}

.hero_img_bg img{
  position:absolute;
  z-index: 100;
  object-position:100px -100px;
}

/* FEATURES */

.features {background: var(--clr-light-bg);}

.features_inner_wrapper {
  margin-block: 100px;
  grid: 0.8fr 1fr / 1fr; 
}

.features_content {
  grid-area: 1 / 1 / 2 / 3;
  flex-direction: column;
  gap: 2em;
}

.features_content p {max-width: 60ch;}

.features_list {
  grid-area : 2 / 1 / 3 / 2;
  grid: 1fr / repeat(4, 1fr);
  gap: 1em;
}

.features_list_item {
  flex-direction: column;
  gap: 1.5em;
}

.feature_list_item_img img {
  width: 4em;
  margin-bottom: 30px;
}

.features_list_item p {
  font-size: var(--fs-content-text);
  line-height: var(--lh-content-text);
}

/* Blog snippet */

.blog_snippet {
  grid: 100px 1fr / 1fr; 
  gap: 1em;
  margin-block: 60px;
}

.blog_snippet_title {padding-block: 10px;}

.blog_snippet_list {
  grid-area : 2 / 1 / 3 / 2;
  grid: 1fr / repeat(4, 1fr);
  gap: 1em;
}

.blog_snippet_item {
  background: var(--clr-white);
  border-radius: 5px;
  overflow: hidden;
  grid:
  "img" 200px
  "small" auto
  "title" auto
  "content" auto / 1fr;
  gap: 1em;
  
}

.blog_snippet_item img {
  object-fit: cover;
  grid-area: img;
  height: 200px;
  max-width: max-content;
}

.blog_snippet_item small {
  grid-area:small;
  padding-inline: 30px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--clr-reg-text);
}

.blog_snippet_item a {
  grid-area: title;
  padding-inline: 30px;
  font-size:var(--fs-snippet-title);
  line-height: var(--lh-snippet-title);
  color: var(--clr-primary-dark);
  transition: color 250ms ease;
}

.blog_snippet_item a:hover,
.blog_snippet_item a:focus {
  color: var(--clr-primary-highlight-one);
}

.blog_snippet_item p{
  grid-area: content;
  padding-inline: 30px;
  padding-bottom: 20px;
  font-size: var(--fs-snippet-text);
  line-height: var(--lh-snippet-text);
  color: var(--clr-reg-text);
}

/* FOOTER */

.footer{
  background: var(--clr-primary-dark);
  padding-block: 50px;
}

.footer_inner_wrapper {
  grid : 
  "logo links_a links_b footer_button"
  "socials links_a links_b footer_copy"
  "att att att att";
}

.footer_logo {grid-area: logo;}

.footer_logo .logo-brand_name {
  fill:var(--clr-white);
  cursor: pointer;
  transition: fill 500ms ease-in;
}

.footer_logo .logo-brand_name:hover {
  fill : var(--clr-primary-highlight-two);
}

.footer_social {
  grid-area: socials;
  gap: 0.8em; 
  align-self:end;
}

.footer_social_item_link svg path{transition: fill 350ms ease;}

.footer_social_item_link:hover svg path{
  fill: var(--clr-primary-highlight-one);  
}

.footer_nav_a {
  grid-area: links_a;
  flex-direction: column;
}

.footer_nav_b {
  grid-area:links_b ;
  flex-direction: column;
}

.footer_nav_item_link {
  font-size: var(--fs-link);
  line-height: var(--lh-link);
  color: var(--clr-white);
  transition: color 250ms ease;
}

.footer_nav_item_link:hover,
.footer_nav_item_link:focus {
  color: var(--clr-primary-highlight-one);
}

.btn_footer {
  grid-area: footer_button;
  justify-self: end;
}

.footer_copyright {
  grid-area: footer_copy;
  place-self: end;
  font-size: var(--fs-link);
  line-height: var(--lh-link);
}

.attribution {
  grid-area: att;
  place-self:center;
  font-size: var(--fs-footer);
  margin-top: 30px;
}

.attribution a {color :var(--clr-att-a);}


/* ================= */
/* Media Queries */

@media(min-width: 1441px) {

  .inner_wrapper_hero  {width: 1200px;}

  .hero_img_bg {
    grid-area: img;
    background: url(./images/bg-intro-desktop.svg) no-repeat;
    background-position: 10px -150px;
    background-size: 120%;
    position: relative;
  }
  
  .hero_img_bg img{
    position:absolute;
    z-index: 100;
    object-position:0px -100px;
  }
  
}

@media (max-width: 900px) {

    /* HERO */

  .inner_wrapper_hero {
    padding: 0px;
    margin: 0 auto;
    grid: 1fr 0.5fr / 1fr;
    grid-template-areas:
    'img'
    'content'
  }

  .hero_content {
    place-items: center;
    text-align: center;
    padding-bottom: 40px;
  }

  .hero_img_bg {
    grid-area: img;
    background: url(./images/bg-intro-mobile.svg) no-repeat;
    background-position: 100% 0%;
    background-size: 100%;
    position: static;
  }

  .hero_img_bg img{
    position:static;
    z-index: 100;
    object-fit:contain;
    object-position: center -100px;
    width: 100%;
  }
  
  /* FEATURES */

  .features_inner_wrapper {
    grid: 1fr / 1fr;
    row-gap: 3em;
   }

  .features_list {
    grid: repeat(2, 1fr) / repeat(2, 1fr);
    text-align: center;
    place-items: center;
  }

  .features_list_item p {max-width: 38ch;}
  
  .feature_list_item_img {place-self:center;}
  
  /* BLOG SNIPPET */

  .blog_snippet_title {text-align:center;}

  .blog_snippet_list {
    grid-area : 2 / 1 / 3 / 2;
    grid: repeat(2, 1fr) / repeat(2,1fr);
    gap: 1em;
    place-items:center;
  }

  .blog_snippet_item img {
    height: 200px;
    width: 100%;
  }

  .blog_snippet_item a {
    width: 35ch;
    max-width: 100%;
  }

  .blog_snippet_item p{ max-width: 42ch; }

}

@media (max-width: 700px ) {

  :root {

  --fs-link: 14px;
  --fs-body: 15px;
  --fs-content-text: 15px;
  --fs-mobile-nav-link: 18px;

  --fs-h1: 40px;
  --fs-h2 : 32px;
  --fs-h3: 20px;

  --lh-h1: 47px;
  --lh-h2: 37.6px;
  
  --lh-link: 16px;
  --lh-body: 25px;
  --lh-content-text: 25px;
  --lh-mobile-nav-lnk: 22px;

  }

  /* nav */

  body {position:unset;}

  body.nav_open {position:fixed;}

  .header_inner_wrapper {
    padding-block: 30px;
    position:relative;
  }

  .nav_buttons{
    display:inline-flex;
    position:sticky;
    z-index: 300;
    height: 2em;
    place-items:center;
  }

  .nav_buttons img {width: 2em;}

  .navbar {
    position:absolute;
    top: 100%;
    left: 0%;
    text-align: center;
    width: 100%;
    height: 100vh;
    background : linear-gradient(hsla(233, 26%, 24%, 0.7) 60%, hsla(0, 0%, 90%, 0.5));
    opacity: 0;
    transform-origin: top;
    transform: translateY(-1000px);
    transition: transform 400ms ease-out;
  }

  .active .navbar {
    transform: translateY(0px);
    opacity : 1;
  }
  
  .mobile_nav_items {
    background: var(--clr-white);
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    border-radius: 5px;
    padding-block: 2em;
  }

  .nav_item_link {
    font-size: var(--fs-mobile-nav-link);
    line-height: var(--lh-mobile-nav-lnk);
    color: var(--clr-primary-dark);
    padding-block: unset;
  }

  .btn_nav,
  .nav_buttons .nav_close_icon {display:none;}

  .active .nav_buttons .nav_open_icon{display:none;}

  .active .nav_buttons .nav_close_icon {display:block;}

/* FEATURES */

  .features_inner_wrapper {gap: 3em;}

  .features_content {
    grid-area: 1 / 1 / 2 / 2;
    place-items: center;
    text-align: center;
  }

  .features_content_title {max-width: 15ch;}

  .features_content p {max-width: 40ch;}

  .features_list {grid: 1fr / 1fr;}

  /* BLOG SNIPPET */ 

  .blog_snippet_list {grid: repeat(4, 1fr) / 1fr;}

  /* FOOTER */

  .footer_inner_wrapper {
    grid : 
    "logo"
    "socials"
    "links_a"
    "links_b"
    "footer_button"
    "footer_copy"
    "att";
    place-content: center;
    text-align: center;
    gap: 2em;
  }

  .footer_social {
    grid-area: socials;
    place-self:center;
    gap: 1.2em;
  }

  .footer_nav_a,
  .footer_nav_b {gap: 1em;}

  .btn_footer {place-self: center;}

  .footer_copyright {place-self: center;}
}