Refactored the sections
This commit is contained in:
+113
-26
@@ -15,7 +15,7 @@
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
>
|
||||
<link rel="stylesheet" href="styles.css?version=contact-form-inset">
|
||||
<link rel="stylesheet" href="styles.css?version=editorial-expansion-2">
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
@@ -32,7 +32,7 @@
|
||||
<ul class="primary-navigation-list">
|
||||
<li><a class="primary-navigation-link" href="#work">Work</a></li>
|
||||
<li><a class="primary-navigation-link" href="#philosophy">Philosophy</a></li>
|
||||
<li><a class="primary-navigation-link" href="#journal">Journal</a></li>
|
||||
<li><a class="primary-navigation-link" href="#approach">Approach</a></li>
|
||||
<li><a class="primary-navigation-link" href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -51,7 +51,7 @@
|
||||
<div class="homepage-hero-introduction">
|
||||
<span class="brand-occasion-mark" aria-hidden="true">✦</span>
|
||||
<p>
|
||||
Luxury seasonal environments for hotels, automotive brands, private estates,
|
||||
Luxury seasonal environments for hospitality, automotive brands, private estates,
|
||||
and remarkable places.
|
||||
</p>
|
||||
<a class="editorial-text-link" href="#philosophy">
|
||||
@@ -95,12 +95,17 @@
|
||||
</h2>
|
||||
|
||||
<div class="philosophy-supporting-copy">
|
||||
<p>
|
||||
The most extraordinary spaces do not need decoration. They need intention.
|
||||
<p class="philosophy-brand-thesis">
|
||||
We don’t decorate for the holidays. We compose the season.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
The most memorable seasonal environments do not compete with the room. They
|
||||
complete it. True luxury is not louder. It is more thoughtful.
|
||||
</p>
|
||||
<a class="editorial-text-link" href="#approach">
|
||||
Our approach <span aria-hidden="true">→</span>
|
||||
@@ -127,8 +132,8 @@
|
||||
the season.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<a class="editorial-text-link" href="#work">
|
||||
Explore our work <span aria-hidden="true">→</span>
|
||||
@@ -145,6 +150,35 @@
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="approach-principles-grid" aria-label="Noel Design Atelier brand principles">
|
||||
<article class="approach-principle">
|
||||
<span class="approach-principle-index" aria-hidden="true">I.</span>
|
||||
<h3>Curated</h3>
|
||||
<p>
|
||||
Every installation is intentionally composed. Nothing feels accidental. Nothing
|
||||
feels excessive.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="approach-principle">
|
||||
<span class="approach-principle-index" aria-hidden="true">II.</span>
|
||||
<h3>Crafted</h3>
|
||||
<p>
|
||||
Natural materials. Artisan techniques. Meticulous execution. Luxury reveals
|
||||
itself through detail.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="approach-principle">
|
||||
<span class="approach-principle-index" aria-hidden="true">III.</span>
|
||||
<h3>Remembered</h3>
|
||||
<p>
|
||||
Decorations come down. The feeling remains. Great seasonal design becomes part
|
||||
of the space’s story.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -159,8 +193,9 @@
|
||||
<div class="work-heading-grid">
|
||||
<h2 class="oversized-editorial-title" id="work-title">Wonder.</h2>
|
||||
<p class="work-introduction-copy">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -173,7 +208,13 @@
|
||||
>
|
||||
<span>Monumental Christmas tree in a grand room</span>
|
||||
</div>
|
||||
<figcaption>Hospitality <span>— Seattle, Washington</span></figcaption>
|
||||
<figcaption>
|
||||
<span class="work-project-category">Luxury hospitality</span>
|
||||
<span class="work-project-description">
|
||||
A monumental focal point designed to stop guests in their tracks through
|
||||
beauty, not scale alone.
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="work-gallery-secondary-figure">
|
||||
@@ -184,7 +225,13 @@
|
||||
>
|
||||
<span>Candlelit table composed for a seasonal gathering</span>
|
||||
</div>
|
||||
<figcaption>Private estate <span>— Medina, Washington</span></figcaption>
|
||||
<figcaption>
|
||||
<span class="work-project-category">Private estates</span>
|
||||
<span class="work-project-description">
|
||||
Warmth and gathering composed around the traditions a family returns to year
|
||||
after year.
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="work-gallery-detail-figure">
|
||||
@@ -195,36 +242,76 @@
|
||||
>
|
||||
<span>Velvet ribbon and antique brass detail</span>
|
||||
</div>
|
||||
<figcaption>Craft <span>— The details that remain</span></figcaption>
|
||||
<figcaption>
|
||||
<span class="work-project-category">Material and detail</span>
|
||||
<span class="work-project-description">
|
||||
Hand-tied velvet, antique brass, and reflected light; luxury found in what
|
||||
people almost miss.
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editorial-section journal-section" id="journal" aria-labelledby="journal-title">
|
||||
<div class="site-width-boundary journal-content-grid">
|
||||
<div class="journal-heading-content">
|
||||
<p class="section-context-label section-context-label-red">From the journal</p>
|
||||
<h2 class="journal-title" id="journal-title">The art of arrival.</h2>
|
||||
<p class="journal-summary-copy">
|
||||
A seasonal entrance is a promise. Long before guests reach the tree, the doorway
|
||||
establishes warmth, rhythm, and a sense of occasion.
|
||||
<section class="editorial-section client-fit-section" id="places" aria-labelledby="client-fit-title">
|
||||
<div class="site-width-boundary">
|
||||
<div class="client-fit-content-grid">
|
||||
<div class="client-fit-heading-content">
|
||||
<p class="section-context-label section-context-label-brass">Who we design for</p>
|
||||
<h2 class="client-fit-title" id="client-fit-title">Designed for remarkable places.</h2>
|
||||
<p class="client-fit-positioning-copy">
|
||||
Noel Design Atelier exists where luxury hospitality, timeless craftsmanship,
|
||||
and seasonal storytelling become one experience.
|
||||
</p>
|
||||
<a class="editorial-text-link editorial-text-link-light" href="#contact">
|
||||
Begin your season <span aria-hidden="true">→</span>
|
||||
Start a conversation <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<figure class="journal-image-figure">
|
||||
<figure class="client-fit-image-figure">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-landscape"
|
||||
role="img"
|
||||
aria-label="Detail of a grand doorway framed with fresh cedar and warm lights"
|
||||
aria-label="Grand doorway framed with fresh cedar and warm lights"
|
||||
>
|
||||
<span>Grand doorway framed with fresh cedar and warm light</span>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="client-fit-category-grid" aria-label="Client and environment categories">
|
||||
<article class="client-fit-category">
|
||||
<h3>Luxury hospitality</h3>
|
||||
<p>
|
||||
Hotels, destination properties, and gathering spaces shaped by arrival and
|
||||
atmosphere.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="client-fit-category">
|
||||
<h3>Automotive and flagship retail</h3>
|
||||
<p>
|
||||
Branded environments where seasonal design must complement identity and
|
||||
architecture.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="client-fit-category">
|
||||
<h3>Private estates</h3>
|
||||
<p>
|
||||
Personal compositions created for family traditions, celebration, and memory.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="client-fit-category">
|
||||
<h3>Select events</h3>
|
||||
<p>
|
||||
Seasonal settings designed to welcome, gather, and be remembered.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editorial-section contact-section" id="contact" aria-labelledby="contact-title">
|
||||
@@ -292,7 +379,7 @@
|
||||
<ul>
|
||||
<li><a href="#work">Work</a></li>
|
||||
<li><a href="#philosophy">Philosophy</a></li>
|
||||
<li><a href="#journal">Journal</a></li>
|
||||
<li><a href="#approach">Approach</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
+169
-30
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user