169 lines
2.7 KiB
SCSS
169 lines
2.7 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 clamp(14px, 1.7vw, 32px);
|
|
font-size: clamp(13px, 0.85vw, 16px);
|
|
font-weight: 400;
|
|
letter-spacing: 0.05em;
|
|
color: $color-white;
|
|
transition: color 0.2s;
|
|
|
|
&:hover {
|
|
color: $color-blue;
|
|
}
|
|
}
|
|
|
|
.gnb__navLink.isActive {
|
|
color: $color-blue;
|
|
}
|
|
|
|
.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: fixed;
|
|
inset: 0;
|
|
z-index: 200;
|
|
background: $color-bg;
|
|
padding: 32px 32px 40px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.35s ease;
|
|
|
|
&.isOpen {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.gnb__mobileNavClose {
|
|
position: absolute;
|
|
top: 28px;
|
|
right: 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gnb__mobileNavCloseLine {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: $color-white;
|
|
|
|
&:nth-child(1) {
|
|
transform: rotate(45deg);
|
|
}
|
|
&:nth-child(2) {
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
.gnb__mobileNavList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 100%;
|
|
gap: clamp(20px, 6vh, 36px);
|
|
}
|
|
|
|
.gnb__mobileNavLink {
|
|
display: block;
|
|
font-family: $font-serif;
|
|
font-style: italic;
|
|
font-size: clamp(28px, 8vw, 36px);
|
|
font-weight: 400;
|
|
letter-spacing: 0.02em;
|
|
color: $color-white;
|
|
}
|
|
|
|
.gnb__mobileNavLink.isActive {
|
|
color: $color-blue;
|
|
}
|