507 lines
21 KiB
HTML
507 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#F4EDE3">
|
||
<meta
|
||
name="description"
|
||
content="Holiday installations shaped by the character of your space and the people who gather there. Enter the world of Noel Design Atelier in the Pacific Northwest."
|
||
>
|
||
<title>Noel Design Atelier — Composing the Season</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link
|
||
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=section-theses">
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
|
||
</head>
|
||
|
||
<body id="top">
|
||
<a class="skip-to-main-content-link" href="#main-content">Skip to main content</a>
|
||
|
||
<header class="website-header">
|
||
<div class="site-width-boundary website-header-inner">
|
||
<a
|
||
class="brand-logo-link website-header-logo-link"
|
||
href="#top"
|
||
aria-label="Noel Design Atelier, back to top"
|
||
>
|
||
<img
|
||
class="brand-logo-image website-header-logo-image"
|
||
src="images/logo.webp"
|
||
width="4167"
|
||
height="1063"
|
||
alt=""
|
||
decoding="async"
|
||
>
|
||
</a>
|
||
|
||
<nav class="primary-navigation" aria-label="Primary navigation">
|
||
<ul class="primary-navigation-list">
|
||
<li><a class="primary-navigation-link" href="#work">Season</a></li>
|
||
<li><a class="primary-navigation-link" href="#philosophy">Philosophy</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>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<section
|
||
class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container"
|
||
aria-labelledby="homepage-hero-title"
|
||
>
|
||
<p class="section-context-label">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
|
||
|
||
<h1
|
||
class="homepage-hero-title image-overlap-heading-dynamic-inversion animate-header"
|
||
id="homepage-hero-title"
|
||
>
|
||
<span>Composing</span>
|
||
<span>the season.</span>
|
||
</h1>
|
||
|
||
<div class="homepage-hero-introduction">
|
||
<span class="brand-occasion-mark" aria-hidden="true">✦</span>
|
||
<p>
|
||
We create holiday installations that welcome you into the season. From the first
|
||
glimpse of greenery to the glow beyond a doorway, each space offers a reason to
|
||
pause and stay a little longer.
|
||
</p>
|
||
<a class="editorial-text-link" href="#philosophy">
|
||
Step inside <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<figure class="homepage-hero-image-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-tall"
|
||
role="img"
|
||
aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
|
||
>
|
||
<img src="images/composing.webp" alt="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns" decoding="async">
|
||
</div>
|
||
</figure>
|
||
</section>
|
||
|
||
<section class="editorial-section philosophy-section" id="philosophy" aria-labelledby="philosophy-title">
|
||
<div class="site-width-boundary">
|
||
<header class="numbered-section-heading">
|
||
<span class="numbered-section-index" aria-hidden="true">01</span>
|
||
<span class="numbered-section-rule" aria-hidden="true"></span>
|
||
<p>Philosophy</p>
|
||
</header>
|
||
|
||
<div class="philosophy-content-grid">
|
||
<figure class="philosophy-image-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-portrait"
|
||
role="img"
|
||
aria-label="Cedar garland and velvet ribbon following a curved staircase"
|
||
>
|
||
<img src="images/space.webp" alt="Cedar garland and velvet ribbon following a curved staircase" decoding="async">
|
||
</div>
|
||
</figure>
|
||
|
||
<h2 class="editorial-statement-title animate-header" id="philosophy-title">
|
||
The season begins
|
||
<span>with the space.</span>
|
||
</h2>
|
||
|
||
<div class="philosophy-supporting-copy">
|
||
<p class="philosophy-brand-thesis">
|
||
We begin by noticing what makes a place itself.
|
||
</p>
|
||
<p>
|
||
A sweeping staircase invites a different gesture from an intimate room. We study
|
||
those proportions and compose installations to suit them, following an
|
||
architectural curve or giving a quiet corner a seasonal focal point.
|
||
</p>
|
||
<p>
|
||
As greenery and light find their place, familiar surroundings take on the warmth
|
||
of the holidays. We design for that sense of recognition: a room that feels
|
||
quietly new yet deeply familiar, like returning to somewhere you love.
|
||
</p>
|
||
<a class="editorial-text-link" href="#approach">
|
||
A closer look <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="editorial-section approach-section image-overlap-heading-dynamic-inversion-container"
|
||
id="approach"
|
||
aria-labelledby="approach-title"
|
||
>
|
||
<div class="site-width-boundary">
|
||
<header class="numbered-section-heading">
|
||
<span class="numbered-section-index" aria-hidden="true">02</span>
|
||
<span class="numbered-section-rule" aria-hidden="true"></span>
|
||
<p>Approach</p>
|
||
</header>
|
||
|
||
<h2
|
||
class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion animate-header"
|
||
id="approach-title"
|
||
>
|
||
By hand.
|
||
</h2>
|
||
|
||
<div class="approach-content-grid">
|
||
<div class="approach-supporting-copy">
|
||
<p class="section-brand-thesis">
|
||
We bring the season to life by hand.
|
||
</p>
|
||
<p>
|
||
That sense of belonging guides our hands as well as our designs. We build each
|
||
arrangement around the lines of the space, shaping its outline to echo a curve
|
||
or frame an opening.
|
||
</p>
|
||
<p>
|
||
As we work, we adjust the balance and spacing of the details, bringing them into
|
||
a composition that feels at home in the room.
|
||
</p>
|
||
<a class="editorial-text-link" href="#work">
|
||
Imagine the season <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<figure class="approach-image-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-landscape"
|
||
role="img"
|
||
aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
|
||
>
|
||
<img src="images/by-hand.webp" alt="Hands arranging ribbon, cedar, and brass ornaments on a worktable" decoding="async">
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="approach-principles-grid" aria-label="How we compose a space">
|
||
<article class="approach-principle">
|
||
<span class="approach-principle-index" aria-hidden="true">I.</span>
|
||
<h3>Texture</h3>
|
||
<p>
|
||
We select cedar, velvet, brass, and glass for the way their textures meet. The
|
||
contrast between soft foliage and a smooth ornament gives an installation depth,
|
||
inviting a closer look.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="approach-principle">
|
||
<span class="approach-principle-index" aria-hidden="true">II.</span>
|
||
<h3>Gesture</h3>
|
||
<p>
|
||
We shape greenery and tie ribbon by hand, working with the natural movement of
|
||
each material. A branch’s curve or a ribbon’s fall helps us find an arrangement
|
||
that feels relaxed and full of life.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="approach-principle">
|
||
<span class="approach-principle-index" aria-hidden="true">III.</span>
|
||
<h3>Atmosphere</h3>
|
||
<p>
|
||
We compose the installation as part of the whole room, considering where the eye
|
||
is drawn and where it can rest. Light and detail work together to make the space
|
||
feel warm and welcoming.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editorial-section work-section" id="work" aria-labelledby="work-title">
|
||
<div class="site-width-boundary">
|
||
<header class="numbered-section-heading numbered-section-heading-on-dark">
|
||
<span class="numbered-section-index" aria-hidden="true">03</span>
|
||
<span class="numbered-section-rule" aria-hidden="true"></span>
|
||
<p>Seasonal possibilities</p>
|
||
</header>
|
||
|
||
<div class="work-heading-grid">
|
||
<h2 class="oversized-editorial-title animate-header" id="work-title">Gather.</h2>
|
||
<div class="work-introduction-copy">
|
||
<p class="section-brand-thesis section-brand-thesis-on-dark">
|
||
We create settings that bring people together.
|
||
</p>
|
||
<p>
|
||
Imagine arriving out of the cold to a room lit for the holidays. There is something
|
||
to catch your eye, somewhere to draw closer, and a reason to linger. We compose our
|
||
installations with these moments in mind, from the first welcome to the
|
||
conversations that follow.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="work-gallery-grid" aria-label="Imagined holiday settings">
|
||
<figure class="work-gallery-primary-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-wide"
|
||
role="img"
|
||
aria-label="A tall evergreen tree lit with warm lights in a grand room"
|
||
>
|
||
<img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
|
||
</div>
|
||
<figcaption>
|
||
<span class="work-project-category">On arrival</span>
|
||
<span class="work-project-description">
|
||
A tree glowing at the end of a room offers a first glimpse of the celebration
|
||
within, inviting a guest to slow their step as they enter.
|
||
</span>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="work-gallery-secondary-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-portrait"
|
||
role="img"
|
||
aria-label="A holiday table set with greenery and candles for a small gathering"
|
||
>
|
||
<img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
|
||
</div>
|
||
<figcaption>
|
||
<span class="work-project-category">Around the table</span>
|
||
<span class="work-project-description">
|
||
A table framed by greenery leaves room for familiar faces and a conversation
|
||
that carries on long after the last plate is cleared.
|
||
</span>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="work-gallery-detail-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-square"
|
||
role="img"
|
||
aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
|
||
>
|
||
<img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
|
||
</div>
|
||
<figcaption>
|
||
<span class="work-project-category">A closer look</span>
|
||
<span class="work-project-description">
|
||
In a fold of velvet or the patina of brass, there is another small discovery.
|
||
Such details reward a second glance as the evening unfolds.
|
||
</span>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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 animate-header" id="client-fit-title">Your kind of welcome.</h2>
|
||
<p class="client-fit-positioning-copy">
|
||
Whether you are welcoming guests for a night or bringing family home for the
|
||
season, your space holds its own rituals. We design our compositions around the
|
||
way you welcome people, giving your gatherings a setting that feels like yours.
|
||
</p>
|
||
<a class="editorial-text-link editorial-text-link-light" href="#contact">
|
||
Start a conversation <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<figure class="client-fit-image-figure" data-parallax="10">
|
||
<div
|
||
class="photography-frame photography-frame-landscape"
|
||
role="img"
|
||
aria-label="An open doorway framed by cedar garland and warm lights"
|
||
>
|
||
<img src="images/welcome.webp" alt="An open doorway framed by cedar garland and warm lights" decoding="async">
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="client-fit-category-grid" aria-label="Places and people we design for">
|
||
<article class="client-fit-category">
|
||
<h3>Luxury hospitality</h3>
|
||
<p>
|
||
We compose entrances and shared spaces in hotels and destination properties
|
||
around that first moment of arrival. Greenery and light offer a warm welcome,
|
||
inviting guests to settle into the season.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="client-fit-category">
|
||
<h3>Automotive and flagship retail</h3>
|
||
<p>
|
||
In showrooms and flagship stores, we choose materials and arrange seasonal
|
||
details to reflect the character of the space. The holiday welcome becomes a
|
||
natural extension of your world.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="client-fit-category">
|
||
<h3>Private estates</h3>
|
||
<p>
|
||
At home, the season gathers around familiar rituals. We design compositions for
|
||
the rooms where those traditions unfold, bringing holiday warmth to the places
|
||
your family knows by heart.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="client-fit-category">
|
||
<h3>Select events</h3>
|
||
<p>
|
||
We arrange greenery and light around the places people meet and gather, giving
|
||
each occasion its own seasonal atmosphere. From the first greeting, the setting
|
||
invites people to feel part of it.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editorial-section contact-section" id="contact" aria-labelledby="contact-title">
|
||
<div class="site-width-boundary contact-content-grid">
|
||
<div class="contact-heading-content">
|
||
<p class="section-context-label">Let’s begin</p>
|
||
<h2 class="contact-title animate-header" id="contact-title">Tell us your story.</h2>
|
||
<p>
|
||
Perhaps you have a place in mind, a tradition you want to carry forward, or simply
|
||
a feeling you would love to create. Tell us a little about it. We would be glad to
|
||
explore what the season could become with you.
|
||
</p>
|
||
</div>
|
||
|
||
<form class="project-inquiry-form" action="#contact-confirmation" method="get">
|
||
<p class="contact-form-disclosure" id="contact-form-disclosure">
|
||
This form is a preview. Anything you enter stays in this page and is not sent to
|
||
the atelier or saved by this website.
|
||
</p>
|
||
|
||
<div class="project-inquiry-field-grid">
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-name">Your name</label>
|
||
<input id="inquiry-name" type="text" autocomplete="name" required>
|
||
</div>
|
||
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-email">Email</label>
|
||
<input id="inquiry-email" type="email" autocomplete="email" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-organization">Your home, property, or organization</label>
|
||
<input id="inquiry-organization" type="text" autocomplete="organization" required>
|
||
</div>
|
||
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-project-brief">What do you have in mind?</label>
|
||
<textarea id="inquiry-project-brief" rows="5" required></textarea>
|
||
</div>
|
||
|
||
<button class="project-inquiry-submit-button" type="submit" aria-describedby="contact-form-disclosure">
|
||
Preview your inquiry <span aria-hidden="true">→</span>
|
||
</button>
|
||
|
||
<p class="contact-form-confirmation" id="contact-confirmation" tabindex="-1">
|
||
This is where a confirmation would appear. Your message has not been sent to the
|
||
atelier or saved by this website.
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="website-footer">
|
||
<div class="site-width-boundary website-footer-grid">
|
||
<div class="website-footer-brand-column">
|
||
<a
|
||
class="brand-logo-link website-footer-logo-link"
|
||
href="#top"
|
||
aria-label="Noel Design Atelier, back to top"
|
||
>
|
||
<img
|
||
class="brand-logo-image website-footer-logo-image"
|
||
src="images/logo.webp"
|
||
width="4167"
|
||
height="1063"
|
||
alt=""
|
||
loading="lazy"
|
||
decoding="async"
|
||
>
|
||
</a>
|
||
<p>For the welcome you offer and the memories you make.</p>
|
||
</div>
|
||
|
||
<nav class="website-footer-navigation" aria-label="Footer navigation">
|
||
<p class="website-footer-column-title">Explore</p>
|
||
<ul>
|
||
<li><a href="#work">Season</a></li>
|
||
<li><a href="#philosophy">Philosophy</a></li>
|
||
<li><a href="#approach">Approach</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="website-footer-contact-column">
|
||
<p class="website-footer-column-title">Pacific Northwest</p>
|
||
<p>We’d love to hear what you have in mind.</p>
|
||
<a class="editorial-text-link editorial-text-link-light" href="#contact">
|
||
Start a conversation <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="website-footer-copyright">© 2026 Noel Design Atelier</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", (event) => {
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
|
||
gsap.utils.toArray(".animate-header").forEach((header) => {
|
||
gsap.from(header, {
|
||
scrollTrigger: {
|
||
trigger: header,
|
||
start: "top 80%",
|
||
toggleActions: "play none none none",
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 1,
|
||
ease: "power2.out",
|
||
});
|
||
});
|
||
|
||
gsap.utils.toArray("figure[data-parallax]").forEach((figure) => {
|
||
const motion = Number(figure.dataset.parallax);
|
||
if (!Number.isFinite(motion) || motion === 0) return;
|
||
|
||
const frame = figure.querySelector(".photography-frame");
|
||
|
||
gsap.fromTo(figure, {
|
||
y: () => frame.offsetHeight * motion / 200,
|
||
}, {
|
||
y: () => -frame.offsetHeight * motion / 200,
|
||
ease: "none",
|
||
scrollTrigger: {
|
||
trigger: figure,
|
||
start: "clamp(top bottom)",
|
||
end: "clamp(bottom top)",
|
||
scrub: true,
|
||
invalidateOnRefresh: true,
|
||
},
|
||
});
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</html>
|