diff --git a/index.html b/index.html index c409fb8..810fa03 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet" > - + @@ -40,10 +40,16 @@
-
+

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 {