@import '_colors'; @import 'custom_fonts'; *, *:before, *:after { -webkit-tap-highlight-color: transparent; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; } a { color: inherit; text-decoration: none; } html, body { font-family: open-sans; &.non-scrollable { overflow: hidden; } } mark { background-color: transparent; } .temp-intro, .temp-intro-home, #footer { background-color: $dark_brown; display: flex; justify-content: space-between; padding: 15px 0; color: $dark_gray; font-size: $other_size; .temp-name { margin-left: 125px; @media screen and (max-width: 1024px) { margin-left: 20px; } mark { color: white; font-weight: bold; letter-spacing: 0.8px; } } .temp-social { display: flex; margin-right: 125px; @media screen and (max-width: 1024px) { margin-right: 20px; } li { list-style: none; align-self: center; padding: 0 10px; font-size: 12px; } } small { font-size: $other_size; @media screen and (max-width: 1024px) { display: block; text-align: center; padding: 5px 0; } &:first-child { margin-left: 125px; @media screen and (max-width: 1024px) { margin: 0; } } &:last-child { margin-right: 125px; @media screen and (max-width: 1024px) { margin: 0; } } mark { color: $light_gray; } } } #footer { @media screen and (max-width: 1024px) { display: block } } #page-header { height: $header_height; position: sticky; display: flex; top: 0; left: 0; background-color: white; z-index: 3; transition: height 500ms linear; @media screen and (max-width: 1024px) { height: $header_height_scroll; } &.minimize { height: $header_height_scroll; padding: 10px 0; } .inner-header { width: 90%; display: flex; justify-content: space-between; margin: 0 auto; align-self: center; @media screen and (max-width: 1024px) { width: 100%; justify-content: none; } } .temp-brand { display: flex; align-self: center; width: auto; justify-content: center; cursor: pointer; @media screen and (max-width: 1024px) { justify-content: unset; width: calc(100% -55px); } figure { margin-right: 15px; width: 60px; height: 60px; img { width: 100%; height: 100%; } } h1 { font-size: 20px; align-self: center; letter-spacing: -0.65px; font-family: 'Archivo Black', sans-serif; @media screen and (max-width: 1024px) { font-size: 15px; } mark { color: $blue; } } } #desktop-navigation-menu { width: 55%; align-self: center; font-size: $paragraph_size; @media screen and (max-width: 1024px) { display: none; } ul { display: flex; justify-content: space-between; li { list-style: none; color: $dark_gray; &.active { color: $blue; } } } } #mobile-hamburger-menu { display: none; position: relative; height: 25px; @media screen and (max-width: 1024px) { width: 45px; } &.active { .icon-line { transform: rotate(45deg) translate(2px, 10px); &:after { transform: rotate(-95deg) translate(20px, 2px); } &:before { opacity: 0; } } } @media screen and (max-width: 1024px) { display: block; align-self: center; } .icon-line { display: inline-block; width: 35px; height: 5px; background-color: black; position: absolute; transition: transform 500ms ease; &:before, &:after { content: ''; display: inline-block; width: 35px; height: 5px; position: absolute; } &:before { top: 200%; background-color: $blue; transition: opacity 500ms ease; } &:after { top: 400%; background-color: black; transition: transform 500ms ease; } } } } #mobile-nav-menu { display: none; @media screen and (max-width: 1024px) { display: block; height: 0; overflow: hidden; position: sticky; top: 10vh; z-index: 5; background-color: white; transition: height 500ms ease; &.show { height: 90vh; ul { margin-top: 50px; } li { opacity: 1; } } ul { li { list-style: none; font-size: $heading_size; text-align: center; padding: 10px 0; opacity: 0; transition: opacity 500ms ease; } } } } .temp-contact-info { background-color: $white_shade; border-top: 1px solid $light_gray; color: $brown; ul { display: flex; width: 80%; margin: 0 auto; @media screen and (max-width: 1024px) { width: 100%; } .owl-item { img { width: 10%; } } li { list-style: none; border-left: 2px solid $light_gray; font-size: $other_size; display: flex; justify-content: center; width: 35%; padding: 20px 0; @media screen and (max-width: 1024px) { width: 40%; .contact-content { display: none; } img { width: 35%; } &.active { width: 100%; img { width: 10%; } .contact-content { display: block; } } } &:last-child { border-right: 2px solid $light_gray; } img { width: 10%; align-self: center; @media screen and (max-width: 1024px) { width: 30%; } } .contact-content { margin-left: 20px; color: $dark_gray; span { display: block; &:last-child { color: $blue; } } a { display: block; color: $blue; } } } } }