139 lines
2.2 KiB
SCSS
139 lines
2.2 KiB
SCSS
@use "../base/variable" as *;
|
|
@use "../base/mixin" as *;
|
|
|
|
// GNB
|
|
.gnb {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: $gnb-height;
|
|
z-index: 100;
|
|
transition: background 0.4s;
|
|
|
|
&.isScrolled {
|
|
background: rgba($color-bg, 0.92);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
}
|
|
|
|
.gnb__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
padding: 0 48px;
|
|
}
|
|
|
|
.gnb__logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.gnb__logoImg {
|
|
width: 90px;
|
|
height: auto;
|
|
object-fit: unset;
|
|
}
|
|
|
|
.gnb__nav {
|
|
// nav block — layout only
|
|
}
|
|
|
|
.gnb__navList {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.gnb__navItem {
|
|
// list item — no extra styles needed
|
|
}
|
|
|
|
.gnb__navLink {
|
|
display: block;
|
|
padding: 24px 32px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.05em;
|
|
color: $color-white;
|
|
transition: color 0.2s;
|
|
|
|
&:hover {
|
|
color: $color-cyan;
|
|
}
|
|
}
|
|
|
|
.gnb__navLink.isActive {
|
|
color: $color-cyan;
|
|
}
|
|
|
|
.gnb__hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.gnb__hamburgerLine {
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: $color-white;
|
|
transition:
|
|
transform 0.3s,
|
|
opacity 0.3s;
|
|
}
|
|
|
|
.gnb__hamburger.isOpen .gnb__hamburgerLine:nth-child(1) {
|
|
transform: translateY(6px) rotate(45deg);
|
|
}
|
|
.gnb__hamburger.isOpen .gnb__hamburgerLine:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
.gnb__hamburger.isOpen .gnb__hamburgerLine:nth-child(3) {
|
|
transform: translateY(-6px) rotate(-45deg);
|
|
}
|
|
|
|
.gnb__mobileNav {
|
|
display: none;
|
|
position: absolute;
|
|
top: $gnb-height-mo;
|
|
left: 0;
|
|
width: 100%;
|
|
background: rgba($color-bg, 0.97);
|
|
backdrop-filter: blur(16px);
|
|
padding: 16px 0 24px;
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
transition:
|
|
transform 0.35s ease,
|
|
opacity 0.35s ease;
|
|
pointer-events: none;
|
|
|
|
&.isOpen {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.gnb__mobileNavList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gnb__mobileNavLink {
|
|
display: block;
|
|
padding: 14px 24px;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.05em;
|
|
color: $color-white;
|
|
}
|