header nav { width: 100%; max-width: 1100px; line-height: 27px; opacity: 1; top: 0; left: 0; right: 0; transition: opacity 0.4s ease; position: absolute; margin-left: auto; margin-right: auto; z-index: 10; text-align: center; background-color: var(--header-background-color); } header nav a { color: #fff; } .navbar { padding: 35px 5%; height: 64px; background: rgba(27, 31, 35, 0); display: flex; align-items: center; justify-content: flex-start; } .navbar .branding { width: 200px; display: flex; align-items: center; list-style: none; } @media only screen and (max-width: 1012px) { .navbar .branding { width: 30%; min-width: 30%; } } .navbar .branding .logo { width: 100%; line-height: 0.9em; color: var(--header-font-color); text-align: left; display: flex; align-items: center; gap: 10px; } .navbar .branding .logo .logo-image { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .navbar .branding .logo a { font-family: lato, sans-serif; text-align: left; font-weight: 900; line-height: 0.9em; font-size: 21px; color: var(--header-font-color); } .super.nav { width: 100%; display: flex; justify-content: space-between; } .super.nav .container { flex-grow: 1; width: min-content; display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; } .super.nav .section { margin: 6px 7px; border-radius: 10px; transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .super.nav .section:hover { background-color: rgba(200, 200, 200, 0.15); } .super.nav .section.twitter:hover { background-color: rgba(200, 200, 200, 0); } .super.nav .section a { font-size: 17px; color: var(--header-font-color); font-weight: 400; display: block; padding: 9px 13px; transition: color 0.4s ease; position: relative; text-decoration: none; cursor: pointer; } @media only screen and (min-width: 1230px) { .super.nav .section button:hover~.panel { visibility: visible; opacity: 1; transform: scale(1.01) translateY(1em); transform-origin: top; } } .navbar .col-2.wrapper { display: flex; flex-direction: column; align-items: center; flex-flow: row-reverse; } .super.nav .col-2 a.profile { display: flex; align-items: center; } .navbar .col-2.wrapper .profile { display: flex; align-items: center; } .navbar .col-2 { display: flex; align-items: center; align-content: center; } .navbar .col-2 a { text-decoration: none; color: #fff; text-align: center; padding: 10px 40px 10px 40px; border-radius: 44px; transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .navbar .col-2 a { position: relative; text-decoration: none; text-align: center; background: radial-gradient(95% 60% at 50% 75%, #005fd6 0, #209bff 100%); border: 1px solid #54a1fd; box-shadow: 0 8px 20px -8px #1187ff, inset 0 1px 8px -4px #fff; color: #fff; font-weight: 500; transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .navbar .col-2 a:after { content: ""; position: absolute; width: 60%; height: 1px; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); top: 1px; right: 10%; } header .image { width: 40px; height: 40px; margin-left: 10px; position: relative; border-radius: 50%; z-index: 3; object-fit: cover; cursor: pointer; } .mobile.utility { display: none; visibility: hidden; justify-content: flex-end; align-items: center; } .mobile.utility .wrapper { position: relative; width: 24px; height: 24px; display: block; cursor: pointer; } .mobile.utility .wrapper #mobile-utility-check { display: flex; flex-direction: column; width: 25px; height: 35px; cursor: pointer; margin-right: 5px; } .mobile.utility span { background: var(--header-font-color); border-radius: 10px; height: 3px; margin: 3px 0; transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } #mobile-utility-check[type="checkbox"] { position: absolute; width: 25px; height: 25px; cursor: pointer; opacity: 0; z-index: 2; } .super.nav #navbar-close { visibility: hidden; display: none; } @media only screen and (max-width: 1230px) { .navbar { padding: 14px 40px; } .mobile.utility { display: block; visibility: visible; } .navbar .branding { width: 100%; min-width: 0; justify-content: space-between; } .super.nav #navbar-close { visibility: visible; display: block; float: right; top: 0; width: auto; right: 0; padding: 18px 40px; left: 100%; } .super.nav #navbar-close svg { width: 25px; height: 25px; } .filter { width: 100vw; height: 100vh; position: absolute; z-index: 4; visibility: hidden; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .filter-show { opacity: 1; visibility: visible; } .super.nav { display: block; box-shadow: rgba(0, 0, 0, 0.04) 0 8px 16px, rgba(0, 0, 0, 0.08) 0 4px 8px; } .super.nav .section { position: relative; width: 100%; display: block; opacity: 1; visibility: visible; } .super.nav .section:hover { background: 0 0; } .super.nav { width: 80%; max-width: 425px; height: 100vh; transform: translateX(100%); top: 0; right: 0; visibility: hidden; position: fixed; border-radius: 20px; overflow: scroll; opacity: 0.6; z-index: 4; background-color: #fff; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); transition-duration: 0.5s; transform-origin: center; transition-property: opacity, transform, visibility; } .super.nav.mobile { opacity: 1; visibility: visible; transform: translateX(0); transform-origin: right; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); transition-duration: 0.5s; transition-property: opacity, transform, visibility; } .super.nav .container { display: block; float: right; width: 100%; padding: 0 15px; } .super.nav .section a { color: #000; width: 100%; text-align: left; padding: 15px 20px 15px 20px; font-size: 2em; } .navbar-mobile-utility { display: flex; } .navbar .col-2 { display: none; } }