Seasonal environment design / Pacific Northwest
-
+
Composing
the season.
diff --git a/styles.css b/styles.css
index 35e5cd6..5eb3f20 100644
--- a/styles.css
+++ b/styles.css
@@ -216,7 +216,7 @@ ul {
font-family: var(--font-family-editorial);
font-size: clamp(4.2rem, 9.8vw, 9.6rem);
font-weight: 400;
- letter-spacing: -0.055em;
+ letter-spacing: 0.04em;
line-height: 0.88;
text-transform: uppercase;
}
@@ -225,6 +225,26 @@ ul {
display: block;
}
+.image-overlap-heading-dynamic-inversion-container {
+ isolation: isolate;
+}
+
+.homepage-hero-section.image-overlap-heading-dynamic-inversion-container {
+ background-color: var(--color-weathered-paper);
+}
+
+.image-overlap-heading-dynamic-inversion {
+ color: var(--color-noel-black);
+}
+
+@supports (mix-blend-mode: difference) {
+ .image-overlap-heading-dynamic-inversion {
+ color: var(--color-weathered-paper);
+ filter: grayscale(1);
+ mix-blend-mode: difference;
+ }
+}
+
.homepage-hero-introduction {
align-self: end;
grid-column: 1 / 5;
@@ -374,7 +394,7 @@ ul {
font-family: var(--font-family-editorial);
font-size: clamp(2.4rem, 4vw, 4.5rem);
font-weight: 400;
- letter-spacing: -0.045em;
+ letter-spacing: 0.035em;
line-height: 1.03;
text-transform: uppercase;
}
@@ -417,7 +437,7 @@ ul {
font-family: var(--font-family-editorial);
font-size: clamp(5rem, 13.2vw, 12.5rem);
font-weight: 400;
- letter-spacing: -0.065em;
+ letter-spacing: 0.04em;
line-height: 0.78;
text-transform: uppercase;
}
@@ -504,6 +524,7 @@ ul {
.work-heading-grid .oversized-editorial-title {
grid-column: 1 / 9;
+ font-size: clamp(5rem, 12.4vw, 11.15rem);
}
.work-introduction-copy {
@@ -568,13 +589,17 @@ ul {
}
.client-fit-content-grid {
+ position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
gap: clamp(3rem, 7vw, 7rem);
+ isolation: isolate;
}
.client-fit-heading-content {
+ position: relative;
+ z-index: 2;
grid-column: 1 / 6;
}
@@ -588,11 +613,16 @@ ul {
font-family: var(--font-family-editorial);
font-size: clamp(3.2rem, 6.5vw, 7rem);
font-weight: 400;
- letter-spacing: -0.055em;
+ letter-spacing: 0.035em;
line-height: 0.94;
text-transform: uppercase;
}
+.client-fit-title {
+ position: relative;
+ z-index: 3;
+}
+
.client-fit-positioning-copy {
max-width: 29rem;
margin-top: 2rem;
@@ -604,6 +634,8 @@ ul {
}
.client-fit-image-figure {
+ position: relative;
+ z-index: 1;
grid-column: 6 / 13;
}
@@ -860,6 +892,7 @@ ul {
.work-heading-grid .oversized-editorial-title {
grid-column: 1 / 8;
+ font-size: clamp(5rem, 10.6vw, 6.85rem);
}
.work-introduction-copy {
@@ -896,6 +929,14 @@ ul {
}
@media (max-width: 48rem) {
+ .homepage-hero-title {
+ letter-spacing: 0.03em;
+ }
+
+ .oversized-editorial-title {
+ letter-spacing: 0.03em;
+ }
+
.website-header-inner {
flex-direction: column;
align-items: flex-start;
@@ -921,7 +962,7 @@ ul {
.homepage-hero-title {
margin-top: 3.25rem;
- font-size: clamp(3.8rem, 17vw, 7.5rem);
+ font-size: clamp(3.7rem, 16vw, 7.1rem);
line-height: 0.92;
}
@@ -961,10 +1002,14 @@ ul {
}
.oversized-editorial-title {
- font-size: clamp(4.35rem, 18vw, 8.5rem);
+ font-size: clamp(4rem, 15.5vw, 7.3rem);
line-height: 0.88;
}
+ .work-heading-grid .oversized-editorial-title {
+ font-size: clamp(4rem, 15.5vw, 7.3rem);
+ }
+
.approach-content-grid {
margin-top: 2.5rem;
}
@@ -1072,8 +1117,8 @@ ul {
}
.homepage-hero-title {
- font-size: clamp(3.35rem, 17vw, 5.25rem);
- letter-spacing: -0.065em;
+ font-size: clamp(3.05rem, 15.25vw, 4.8rem);
+ letter-spacing: 0.02em;
}
.homepage-hero-title span:last-child {
@@ -1086,15 +1131,22 @@ ul {
.editorial-statement-title {
font-size: clamp(2.15rem, 10.5vw, 3.3rem);
+ letter-spacing: 0.025em;
}
.oversized-editorial-title {
- font-size: clamp(3.7rem, 18vw, 5.5rem);
+ font-size: clamp(3.15rem, 15.5vw, 5rem);
+ letter-spacing: 0.02em;
+ }
+
+ .work-heading-grid .oversized-editorial-title {
+ font-size: clamp(3.15rem, 15.5vw, 5rem);
}
.client-fit-title,
.contact-title {
font-size: clamp(2.75rem, 13vw, 4.1rem);
+ letter-spacing: 0.025em;
}
.work-gallery-grid figcaption {