-
Creative Development Company
BODA.Lab
Creative Development
Company
BODA.Lab
-
diff --git a/src/js/main.js b/src/js/main.js
index c901b89..218489a 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -39,7 +39,7 @@ $(function () {
});
// 현재 섹션에 따라 GNB 활성화
- const $navLinks = $(".gnb__navLink");
+ const $navLinks = $(".gnb__navLink, .gnb__mobileNavLink");
const sections = $("section[id]").toArray();
// 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지)
const lightSections = ["history", "contact"];
@@ -76,27 +76,28 @@ $(function () {
updateActiveNav();
// 섹션 이동 링크 클릭 시 Lenis로 부드럽게 스크롤
- $(".gnb__navLink, .gnb__mobileNavLink, .gnb__logo, .scrollDown").on("click", function (e) {
+ $(".gnb__navLink, .gnb__mobileNavLink, .scrollDown").on("click", function (e) {
e.preventDefault();
lenis.scrollTo($(this).attr("href"));
});
- // 햄버거 메뉴
- $hamburger.on("click", function () {
- const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
- $hamburger.attr("aria-expanded", isOpen);
- $mobileNav.toggleClass("isOpen", isOpen);
+ // 로고 클릭: 모바일에선 메뉴 토글, 데스크탑에선 intro로 스크롤
+ $(".gnb__logo").on("click", function (e) {
+ e.preventDefault();
+ if (window.matchMedia("(max-width: 768px)").matches) {
+ $mobileNav.toggleClass("isOpen");
+ } else {
+ lenis.scrollTo($(this).attr("href"));
+ }
});
// 모바일 메뉴 링크 클릭 시 닫기
$(".gnb__mobileNavLink").on("click", function () {
- $hamburger.removeClass("isOpen").attr("aria-expanded", false);
$mobileNav.removeClass("isOpen");
});
// 모바일 메뉴 닫기 버튼
$mobileNavClose.on("click", function () {
- $hamburger.removeClass("isOpen").attr("aria-expanded", false);
$mobileNav.removeClass("isOpen");
});
diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss
index 673d84c..c31c3fd 100644
--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@@ -63,6 +63,18 @@
font-weight: 100;
line-height: 1.2;
color: #ffffff;
+
+ &.divide {
+ display: none;
+
+ &.mobile {
+ display: none;
+ }
+
+ &.pc {
+ display: block;
+ }
+ }
}
.about__expertiseList {
@@ -288,24 +300,41 @@
padding: calc(#{$gnb-height-mo} + 40px) 20px 80px;
}
- // Figma 모바일: 헤드(타이틀+데스크+쿼트)→expertise 리스트 간격 160(PC base clamp는 그대로 둠)
.about__inner {
gap: 160px;
}
- // Figma 모바일: title→desc 간격 30(PC는 60, 기존 base 57px는 손대지 않음)
.about__head .sectionTitle {
margin-bottom: 30px;
}
- // Figma 모바일: desc→quote 간격 120(PC base 70px는 그대로 둠)
.about__desc {
margin-bottom: 120px;
}
- // Figma 모바일도 인용부호+텍스트가 PC와 동일하게 가로 배치 — 세로 스택 오버라이드 제거하고 좌우 인셋(30px)만 추가
.about__quote {
- padding: 0 30px;
+ position: relative;
+ display: block;
+ padding: 0 0 0 30px;
+ }
+
+ .about__quoteMark {
+ margin-top: -0.34em;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .about__quoteText {
+ .divide {
+ &.mobile {
+ display: block;
+ }
+
+ &.pc {
+ display: none;
+ }
+ }
}
.about__expertiseList {
diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss
index 70b9d36..891faf1 100644
--- a/src/scss/page/_contact.scss
+++ b/src/scss/page/_contact.scss
@@ -334,7 +334,7 @@
.privacyModal__head {
display: flex;
- align-items: flex-start;
+ align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 24px;
diff --git a/src/scss/page/_gnb.scss b/src/scss/page/_gnb.scss
index 4046063..11e56e1 100644
--- a/src/scss/page/_gnb.scss
+++ b/src/scss/page/_gnb.scss
@@ -53,6 +53,10 @@
}
}
+.gnb__mobileNav {
+ display: none;
+}
+
.gnb__inner {
display: flex;
align-items: center;
@@ -136,75 +140,90 @@
transform: translateY(-6px) rotate(-45deg);
}
-.gnb__mobileNav {
- display: none;
- position: fixed;
- inset: 0;
- z-index: 200;
- background: #0d0d0d;
- 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: #ffffff;
-
- &: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-size: clamp(28px, 8vw, 36px);
- font-weight: 400;
- letter-spacing: 0.02em;
- color: #ffffff;
-}
-
-.gnb__mobileNavLink.isActive {
- color: #7796ff;
-}
-
@include mo {
.gnb {
top: 0;
}
+ .gnb__inner {
+ padding: 0 20px;
+ height: 80px;
+ }
+
+ .gnb__nav {
+ display: none;
+ }
+
+ .gnb__hamburger {
+ display: none;
+ }
+
+ .gnb__mobileNav {
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 200;
+ background: #0d0d0d;
+ 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: #ffffff;
+
+ &: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-size: clamp(28px, 8vw, 36px);
+ font-weight: 400;
+ letter-spacing: 0.02em;
+ color: #ffffff;
+ }
+
+ .gnb__mobileNavLink.isActive {
+ color: #7796ff;
+ }
// Figma 모바일 전용 정사각 로고 마크(40x40)로 교체 — PC 워드마크는 숨김
.gnb__logoImg--desktop {
diff --git a/src/scss/page/_intro.scss b/src/scss/page/_intro.scss
index 60fc4c4..21b1b4d 100644
--- a/src/scss/page/_intro.scss
+++ b/src/scss/page/_intro.scss
@@ -41,22 +41,3 @@
color: #ffffff;
line-height: 0.8;
}
-
-@include mo {
- .gnb__inner {
- padding: 0 20px;
- height: 60px;
- }
-
- .gnb__nav {
- display: none;
- }
-
- .gnb__hamburger {
- display: flex;
- }
-
- .gnb__mobileNav {
- display: block;
- }
-}