From 5fdc9ef3b6a21616b2b802618eb5c898a5656b7a Mon Sep 17 00:00:00 2001 From: Alexander Loren Date: Tue, 8 Sep 2026 10:59:04 -0700 Subject: [PATCH] Refactored the sections --- index.html | 159 ++++++++++++++++++++++++++++++++---------- styles.css | 199 +++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 292 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index 8e1074e..c409fb8 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" > - + @@ -32,7 +32,7 @@ @@ -51,7 +51,7 @@

- Luxury seasonal environments for hotels, automotive brands, private estates, + Luxury seasonal environments for hospitality, automotive brands, private estates, and remarkable places.

@@ -95,12 +95,17 @@
-

- The most extraordinary spaces do not need decoration. They need intention. +

+ We don’t decorate for the holidays. We compose the season.

- We work with architecture—never against it—to create environments that feel - timeless, inviting, and unforgettable. + Noel Design Atelier creates bespoke holiday installations that feel as though + they were always meant to belong. Every garland follows the architecture. Every + ribbon serves a purpose. Every light contributes to atmosphere. +

+

+ The most memorable seasonal environments do not compete with the room. They + complete it. True luxury is not louder. It is more thoughtful.

Our approach @@ -127,8 +132,8 @@ the season.

- Fresh cedar. Antique brass. Hand-tied velvet. Glass catching candlelight. The - result feels elevated because every detail belongs. + Fresh cedar, antique brass, hand-tied velvet, and glass catching candlelight are + chosen and placed with intention.

Explore our work @@ -145,6 +150,35 @@
+ +
+
+ +

Curated

+

+ Every installation is intentionally composed. Nothing feels accidental. Nothing + feels excessive. +

+
+ +
+ +

Crafted

+

+ Natural materials. Artisan techniques. Meticulous execution. Luxury reveals + itself through detail. +

+
+ +
+ +

Remembered

+

+ Decorations come down. The feeling remains. Great seasonal design becomes part + of the space’s story. +

+
+
@@ -159,8 +193,9 @@

Wonder.

- Every installation tells the story of the season—through gathering, wonder, - detail, and the memories guests carry forward. + Every installation tells the story of the season. Noel composes more than visual + beauty: environments that awaken emotion, inspire connection, and leave a lasting + impression.

@@ -173,7 +208,13 @@ > Monumental Christmas tree in a grand room -
Hospitality — Seattle, Washington
+
+ Luxury hospitality + + A monumental focal point designed to stop guests in their tracks through + beauty, not scale alone. + +
@@ -184,7 +225,13 @@ > Candlelit table composed for a seasonal gathering -
Private estate — Medina, Washington
+
+ Private estates + + Warmth and gathering composed around the traditions a family returns to year + after year. + +
@@ -195,35 +242,75 @@ > Velvet ribbon and antique brass detail -
Craft — The details that remain
+
+ Material and detail + + Hand-tied velvet, antique brass, and reflected light; luxury found in what + people almost miss. + +
-
-
-
-

From the journal

-

The art of arrival.

-

- A seasonal entrance is a promise. Long before guests reach the tree, the doorway - establishes warmth, rhythm, and a sense of occasion. -

- - Begin your season - +
+
+
+
+

Who we design for

+

Designed for remarkable places.

+

+ Noel Design Atelier exists where luxury hospitality, timeless craftsmanship, + and seasonal storytelling become one experience. +

+ + Start a conversation + +
+ +
+ +
-
- -
+
+
+

Luxury hospitality

+

+ Hotels, destination properties, and gathering spaces shaped by arrival and + atmosphere. +

+
+ +
+

Automotive and flagship retail

+

+ Branded environments where seasonal design must complement identity and + architecture. +

+
+ +
+

Private estates

+

+ Personal compositions created for family traditions, celebration, and memory. +

+
+ +
+

Select events

+

+ Seasonal settings designed to welcome, gather, and be remembered. +

+
+
@@ -292,7 +379,7 @@ diff --git a/styles.css b/styles.css index 8be7de5..35e5cd6 100644 --- a/styles.css +++ b/styles.css @@ -370,7 +370,7 @@ ul { } .editorial-statement-title { - grid-column: 5 / 10; + grid-column: 5 / 9; font-family: var(--font-family-editorial); font-size: clamp(2.4rem, 4vw, 4.5rem); font-weight: 400; @@ -386,11 +386,22 @@ ul { } .philosophy-supporting-copy { - grid-column: 10 / 13; + grid-column: 9 / 13; + max-width: 32rem; color: var(--color-softened-black); font-size: 0.95rem; } +.philosophy-brand-thesis { + color: var(--color-noel-red); + font-family: var(--font-family-editorial); + font-size: 0.74rem; + font-weight: 600; + letter-spacing: 0.12em; + line-height: 1.65; + text-transform: uppercase; +} + .philosophy-supporting-copy p + p, .approach-supporting-copy p + p { margin-top: 1.5rem; @@ -431,6 +442,49 @@ ul { margin-top: -1.5rem; } +.approach-principles-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: clamp(4.5rem, 8vw, 8rem); + border-top: 1px solid var(--color-antique-brass); + border-bottom: 1px solid var(--color-antique-brass); +} + +.approach-principle { + min-width: 0; + padding: clamp(2rem, 4vw, 3.5rem); +} + +.approach-principle + .approach-principle { + border-left: 1px solid var(--color-antique-brass); +} + +.approach-principle-index { + display: block; + margin-bottom: clamp(2.5rem, 5vw, 4.5rem); + color: var(--color-antique-brass); + font-size: 0.67rem; + font-weight: 600; + letter-spacing: 0.12em; +} + +.approach-principle h3, +.client-fit-category h3 { + font-family: var(--font-family-editorial); + font-size: clamp(0.9rem, 1.2vw, 1.1rem); + font-weight: 400; + letter-spacing: 0.12em; + line-height: 1.35; + text-transform: uppercase; +} + +.approach-principle p { + max-width: 28rem; + margin-top: 1.25rem; + color: var(--color-softened-black); + font-size: 0.9rem; +} + .work-section { border-top-color: rgba(244, 237, 227, 0.18); background: var(--color-noel-black); @@ -449,11 +503,12 @@ ul { } .work-heading-grid .oversized-editorial-title { - grid-column: 1 / 10; + grid-column: 1 / 9; } .work-introduction-copy { - grid-column: 10 / 13; + grid-column: 9 / 13; + max-width: 28rem; padding-bottom: 0.6rem; color: rgba(244, 237, 227, 0.74); font-size: 0.92rem; @@ -482,45 +537,52 @@ ul { } .work-gallery-grid figcaption { - display: flex; - justify-content: space-between; - gap: 1rem; - padding-top: 1rem; + display: grid; + grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); + gap: clamp(1rem, 2vw, 2.5rem); + align-items: start; + padding-top: 1.25rem; border-top: 1px solid rgba(244, 237, 227, 0.34); - font-size: 0.69rem; +} + +.work-project-category { + color: var(--color-antique-brass); + font-size: 0.67rem; font-weight: 600; letter-spacing: 0.12em; - line-height: 1.4; + line-height: 1.45; text-transform: uppercase; } -.work-gallery-grid figcaption span { - color: var(--color-antique-brass); - text-align: right; +.work-project-description { + max-width: 34rem; + color: rgba(244, 237, 227, 0.7); + font-size: 0.82rem; + line-height: 1.55; } -.journal-section { +.client-fit-section { border-top: 0; background: var(--color-noel-red); color: var(--color-weathered-paper); } -.journal-content-grid { +.client-fit-content-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: clamp(3rem, 7vw, 7rem); } -.journal-heading-content { +.client-fit-heading-content { grid-column: 1 / 6; } -.section-context-label-red { +.section-context-label-brass { color: var(--color-antique-brass); } -.journal-title, +.client-fit-title, .contact-title { margin-top: 2rem; font-family: var(--font-family-editorial); @@ -531,7 +593,7 @@ ul { text-transform: uppercase; } -.journal-summary-copy { +.client-fit-positioning-copy { max-width: 29rem; margin-top: 2rem; color: rgba(244, 237, 227, 0.82); @@ -541,10 +603,38 @@ ul { color: var(--color-weathered-paper); } -.journal-image-figure { +.client-fit-image-figure { grid-column: 6 / 13; } +.client-fit-category-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-top: clamp(4rem, 7vw, 7rem); + border-top: 1px solid rgba(244, 237, 227, 0.34); + border-bottom: 1px solid rgba(244, 237, 227, 0.34); +} + +.client-fit-category { + min-width: 0; + padding: clamp(1.75rem, 3vw, 3rem); +} + +.client-fit-category + .client-fit-category { + border-left: 1px solid rgba(244, 237, 227, 0.34); +} + +.client-fit-category h3 { + color: var(--color-antique-brass); +} + +.client-fit-category p { + max-width: 24rem; + margin-top: 1.25rem; + color: rgba(244, 237, 227, 0.76); + font-size: 0.86rem; +} + .contact-section { background: var(--color-weathered-paper); } @@ -755,7 +845,8 @@ ul { } .philosophy-supporting-copy { - grid-column: 6 / 11; + grid-column: 6 / 13; + max-width: 32rem; margin-top: 1rem; } @@ -768,21 +859,33 @@ ul { } .work-heading-grid .oversized-editorial-title { - grid-column: 1 / 9; + grid-column: 1 / 8; } .work-introduction-copy { - grid-column: 9 / 13; + grid-column: 8 / 13; } - .journal-heading-content { + .client-fit-heading-content { grid-column: 1 / 7; } - .journal-image-figure { + .client-fit-image-figure { grid-column: 7 / 13; } + .client-fit-category-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .client-fit-category:nth-child(3) { + border-left: 0; + } + + .client-fit-category:nth-child(n + 3) { + border-top: 1px solid rgba(244, 237, 227, 0.34); + } + .contact-heading-content { grid-column: 1 / 6; } @@ -837,7 +940,7 @@ ul { .approach-content-grid, .work-heading-grid, .work-gallery-grid, - .journal-content-grid, + .client-fit-content-grid, .contact-content-grid { display: block; } @@ -897,7 +1000,7 @@ ul { max-width: 22rem; } - .journal-image-figure { + .client-fit-image-figure { margin-top: 3.5rem; } @@ -918,6 +1021,42 @@ ul { } } +@media (max-width: 40rem) { + .approach-principles-grid { + grid-template-columns: minmax(0, 1fr); + margin-top: 4rem; + } + + .approach-principle { + padding: 2.25rem 0; + } + + .approach-principle + .approach-principle { + border-top: 1px solid var(--color-antique-brass); + border-left: 0; + } + + .approach-principle-index { + margin-bottom: 2rem; + } + + .client-fit-category-grid { + grid-template-columns: minmax(0, 1fr); + margin-top: 4rem; + } + + .client-fit-category { + padding: 2rem 0; + border-left: 0; + } + + .client-fit-category + .client-fit-category, + .client-fit-category:nth-child(3) { + border-top: 1px solid rgba(244, 237, 227, 0.34); + border-left: 0; + } +} + @media (max-width: 32rem) { :root { --site-horizontal-padding: 1.25rem; @@ -953,7 +1092,7 @@ ul { font-size: clamp(3.7rem, 18vw, 5.5rem); } - .journal-title, + .client-fit-title, .contact-title { font-size: clamp(2.75rem, 13vw, 4.1rem); } @@ -962,9 +1101,9 @@ ul { display: block; } - .work-gallery-grid figcaption span { + .work-project-description { display: block; - margin-top: 0.35rem; + margin-top: 0.75rem; text-align: left; }