VISION
diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss
index 098b61d..d92bbf1 100644
--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@@ -136,8 +136,18 @@
.history__yearGroup {
border-top: 1px solid #000;
- &:last-child {
- border-bottom: 1px solid #000;
+ &.isOpen {
+ .history__yearToggle {
+ .icon::after {
+ opacity: 0;
+ }
+ }
+ }
+
+ &:has(.history__list:empty) {
+ .icon {
+ display: none;
+ }
}
}
@@ -192,10 +202,6 @@
}
}
-.history__yearGroup.isOpen .history__yearToggle .icon::after {
- opacity: 0;
-}
-
.history__year {
font-size: clamp(24px, 2vw, 32px);
font-weight: 500;
@@ -204,7 +210,6 @@
}
.history__list {
- margin-top: -14px;
display: flex;
flex-direction: column;
gap: 16px;
@@ -222,6 +227,14 @@
justify-content: space-between;
gap: 24px;
+ &:first-child {
+ margin-top: -14px;
+ }
+
+ &:last-child {
+ margin-bottom: 30px;
+ }
+
.main {
display: flex;
flex-direction: column;
diff --git a/src/scss/page/_vision.scss b/src/scss/page/_vision.scss
index 5f6134b..63da1cb 100644
--- a/src/scss/page/_vision.scss
+++ b/src/scss/page/_vision.scss
@@ -2,14 +2,29 @@
// Vision
.vision {
+ position: relative;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
background: #0d0d0d;
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
+ overflow: hidden;
+}
+
+.vision__bg {
+ position: absolute;
+ inset: 0;
+ background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
+ pointer-events: none;
}
.vision__inner {
+ position: relative;
+ z-index: 1;
display: flex;
flex-direction: column;
- gap: clamp(60px, 8vw, 140px);
+ gap: clamp(80px, 6.25vw, 120px);
}
.vision__head {
@@ -24,31 +39,31 @@
.vision__desc {
max-width: 560px;
- font-size: clamp(13px, 1.1vw, 16px);
+ font-size: clamp(13px, 0.73vw, 14px);
font-weight: 300;
line-height: 1.8;
color: #ffffff;
- opacity: 0.9;
}
.vision__quote {
display: flex;
align-items: flex-start;
- gap: 12px;
+ gap: 0;
align-self: flex-end;
- max-width: 640px;
+ max-width: 740px;
.mark {
- font-size: clamp(40px, 4.2vw, 80px);
- font-weight: 700;
+ font-size: clamp(60px, 7.6vw, 146px);
+ font-weight: 600;
line-height: 1;
+ margin-top: -0.34em;
color: #ffffff;
}
.text {
- font-size: clamp(18px, 1.9vw, 32px);
- font-weight: 300;
- line-height: 1.4;
+ font-size: clamp(22px, 2.4vw, 46px);
+ font-weight: 100;
+ line-height: 1.2;
color: #ffffff;
}
}
@@ -67,7 +82,7 @@
gap: 12px;
.keyword {
- font-size: clamp(28px, 3.1vw, 60px);
+ font-size: clamp(28px, 3.33vw, 64px);
font-weight: 800;
letter-spacing: 0.01em;
color: #ffffff;
@@ -75,9 +90,9 @@
}
.desc {
- font-size: clamp(12px, 0.8vw, 14px);
+ font-size: clamp(12px, 0.73vw, 14px);
font-weight: 300;
- color: rgba(255, 255, 255, 0.75);
+ color: #ffffff;
}
}