Refactored class names to be reusable

This commit is contained in:
2026-09-23 08:10:46 -07:00
parent daf87c9671
commit 5681a38087
3 changed files with 357 additions and 460 deletions
+1
View File
@@ -4,6 +4,7 @@
### Project ###
Site*
website-copy.md
style-guide.md
### dotenv ###
.env
+120 -120
View File
@@ -15,24 +15,24 @@
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">
<link rel="stylesheet" href="styles.css?version=reusable-classes">
<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>
<a class="skip-link label-uppercase" href="#main-content">Skip to main content</a>
<header class="website-header">
<div class="site-width-boundary website-header-inner">
<header class="border-bottom-subtle">
<div class="content-boundary grid-centered-content">
<a
class="brand-logo-link website-header-logo-link"
class="image-link image-link-large-centered"
href="#top"
aria-label="Noel Design Atelier, back to top"
>
<img
class="brand-logo-image website-header-logo-image"
class="image-fluid"
src="images/logo.webp"
width="4167"
height="1063"
@@ -41,12 +41,12 @@
>
</a>
<nav class="primary-navigation" aria-label="Primary navigation">
<ul class="primary-navigation-list">
<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="#work">Season</a></li>
<li><a class="primary-navigation-link" href="#contact">Contact</a></li>
<nav class="grid-trailing-content" aria-label="Primary navigation">
<ul class="link-row">
<li><a class="underline-reveal-link label-uppercase" href="#philosophy">Philosophy</a></li>
<li><a class="underline-reveal-link label-uppercase" href="#approach">Approach</a></li>
<li><a class="underline-reveal-link label-uppercase" href="#work">Season</a></li>
<li><a class="underline-reveal-link label-uppercase" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
@@ -54,34 +54,34 @@
<main id="main-content">
<section
class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container"
class="content-boundary grid-twelve-columns grid-overlapping-introduction isolate-blending surface-paper"
aria-labelledby="homepage-hero-title"
>
<p class="section-context-label">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
<p class="eyebrow-label label-uppercase">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
<h1
class="homepage-hero-title image-overlap-heading-dynamic-inversion animate-header"
class="heading-editorial heading-display text-invert-over-image reveal-on-scroll"
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>
<div class="grid-lower-leading-copy">
<span class="decorative-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">
<a class="arrow-link label-uppercase" href="#philosophy">
Step inside <span aria-hidden="true">→</span>
</a>
</div>
<figure class="homepage-hero-image-figure" data-parallax="25">
<figure class="grid-overlapping-trailing-image" data-parallax="25">
<div
class="photography-frame photography-frame-tall"
class="image-frame aspect-ratio-four-to-five"
role="img"
aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
>
@@ -90,16 +90,16 @@
</figure>
</section>
<section class="editorial-section philosophy-section" id="philosophy" aria-labelledby="philosophy-title">
<div class="site-width-boundary">
<section class="spaced-bordered-block" id="philosophy" aria-labelledby="philosophy-title">
<div class="content-boundary">
<header>
<p class="section-context-label">Our Philosophy</p>
<p class="eyebrow-label label-uppercase">Our Philosophy</p>
</header>
<div class="philosophy-content-grid">
<figure class="philosophy-image-figure" data-parallax="15">
<div class="grid-twelve-columns grid-three-part-content">
<figure class="grid-leading-image" data-parallax="15">
<div
class="photography-frame photography-frame-portrait"
class="image-frame aspect-ratio-three-to-four"
role="img"
aria-label="Cedar garland and velvet ribbon following a curved staircase"
>
@@ -107,13 +107,13 @@
</div>
</figure>
<h2 class="editorial-statement-title animate-header" id="philosophy-title">
<h2 class="heading-editorial heading-statement reveal-on-scroll" id="philosophy-title">
The season begins
<span>with the space.</span>
</h2>
<div class="philosophy-supporting-copy">
<p class="philosophy-brand-thesis">
<div class="grid-trailing-copy paragraph-stack">
<p class="text-emphasis label-uppercase">
We begin by noticing what makes a place itself.
</p>
<p>
@@ -126,7 +126,7 @@
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 class="arrow-link label-uppercase" href="#approach">
A closer look <span aria-hidden="true">→</span>
</a>
</div>
@@ -135,25 +135,25 @@
</section>
<section
class="editorial-section approach-section image-overlap-heading-dynamic-inversion-container"
class="spaced-bordered-block clip-overflow isolate-blending surface-paper"
id="approach"
aria-labelledby="approach-title"
>
<div class="site-width-boundary">
<div class="content-boundary">
<header>
<p class="section-context-label">Our Approach</p>
<p class="eyebrow-label label-uppercase">Our Approach</p>
</header>
<h2
class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion animate-header"
class="heading-editorial heading-oversized heading-offset-down text-invert-over-image reveal-on-scroll"
id="approach-title"
>
By hand.
</h2>
<div class="approach-content-grid">
<div class="approach-supporting-copy">
<p class="section-brand-thesis">
<div class="grid-twelve-columns grid-narrow-copy-wide-image">
<div class="grid-leading-copy paragraph-stack">
<p class="text-emphasis label-uppercase">
We bring the season to life by hand.
</p>
<p>
@@ -165,14 +165,14 @@
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">
<a class="arrow-link label-uppercase" href="#work">
Imagine the season <span aria-hidden="true">→</span>
</a>
</div>
<figure class="approach-image-figure" data-parallax="25">
<figure class="grid-wide-inset-image" data-parallax="25">
<div
class="photography-frame photography-frame-landscape"
class="image-frame aspect-ratio-sixteen-to-ten"
role="img"
aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
>
@@ -181,9 +181,9 @@
</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>
<div class="card-grid card-grid-three-columns" aria-label="How we compose a space">
<article class="card card-spacious">
<span class="card-index" aria-hidden="true">I.</span>
<h3>Texture</h3>
<p>
We select cedar, velvet, brass, and glass for the way their textures meet. The
@@ -192,8 +192,8 @@
</p>
</article>
<article class="approach-principle">
<span class="approach-principle-index" aria-hidden="true">II.</span>
<article class="card card-spacious">
<span class="card-index" aria-hidden="true">II.</span>
<h3>Gesture</h3>
<p>
We shape greenery and tie ribbon by hand, working with the natural movement of
@@ -202,8 +202,8 @@
</p>
</article>
<article class="approach-principle">
<span class="approach-principle-index" aria-hidden="true">III.</span>
<article class="card card-spacious">
<span class="card-index" aria-hidden="true">III.</span>
<h3>Atmosphere</h3>
<p>
We compose the installation as part of the whole room, considering where the eye
@@ -215,16 +215,16 @@
</div>
</section>
<section class="editorial-section work-section" id="work" aria-labelledby="work-title">
<div class="site-width-boundary">
<header class="numbered-section-heading-on-dark">
<p class="section-context-label">Seasonal Possibilities</p>
<section class="spaced-bordered-block surface-dark surface-dark-bordered" id="work" aria-labelledby="work-title">
<div class="content-boundary">
<header>
<p class="eyebrow-label label-uppercase">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">
<div class="grid-twelve-columns grid-heading-and-copy">
<h2 class="heading-editorial heading-oversized reveal-on-scroll" id="work-title">Gather.</h2>
<div class="grid-trailing-introduction paragraph-stack">
<p class="text-emphasis label-uppercase text-brass">
We create settings that bring people together.
</p>
<p>
@@ -236,52 +236,52 @@
</div>
</div>
<div class="work-gallery-grid" aria-label="Imagined holiday settings">
<figure class="work-gallery-primary-figure">
<div class="grid-twelve-columns grid-staggered-images" aria-label="Imagined holiday settings">
<figure class="grid-wide-leading-image">
<div
class="photography-frame photography-frame-wide"
class="image-frame aspect-ratio-sixteen-to-nine"
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">
<figcaption class="caption-grid">
<span class="caption-label label-uppercase">On arrival</span>
<span class="caption-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">
<figure class="grid-tall-trailing-image">
<div
class="photography-frame photography-frame-portrait"
class="image-frame aspect-ratio-three-to-four"
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">
<figcaption class="caption-grid">
<span class="caption-label label-uppercase">Around the table</span>
<span class="caption-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">
<figure class="grid-small-inset-image">
<div
class="photography-frame photography-frame-square"
class="image-frame aspect-ratio-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">
<figcaption class="caption-grid">
<span class="caption-label label-uppercase">A closer look</span>
<span class="caption-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>
@@ -291,25 +291,25 @@
</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">
<section class="spaced-bordered-block surface-red-borderless" id="places" aria-labelledby="client-fit-title">
<div class="content-boundary">
<div class="grid-twelve-columns grid-overlapping-halves">
<div class="grid-leading-layer">
<p class="eyebrow-label label-uppercase text-brass">Who we design for</p>
<h2 class="heading-editorial heading-large heading-large-raised reveal-on-scroll" id="client-fit-title">Your kind of welcome.</h2>
<p class="text-light-introduction">
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">
<a class="arrow-link label-uppercase text-paper" href="#contact">
Start a conversation <span aria-hidden="true">→</span>
</a>
</div>
<figure class="client-fit-image-figure" data-parallax="15">
<figure class="grid-trailing-layer" data-parallax="15">
<div
class="photography-frame photography-frame-landscape"
class="image-frame aspect-ratio-sixteen-to-ten"
role="img"
aria-label="An open doorway framed by cedar garland and warm lights"
>
@@ -318,8 +318,8 @@
</figure>
</div>
<div class="client-fit-category-grid" aria-label="Places and people we design for">
<article class="client-fit-category">
<div class="card-grid card-grid-four-columns" aria-label="Places and people we design for">
<article class="card card-compact">
<h3>Luxury hospitality</h3>
<p>
We compose entrances and shared spaces in hotels and destination properties
@@ -328,7 +328,7 @@
</p>
</article>
<article class="client-fit-category">
<article class="card card-compact">
<h3>Automotive and flagship retail</h3>
<p>
In showrooms and flagship stores, we choose materials and arrange seasonal
@@ -337,7 +337,7 @@
</p>
</article>
<article class="client-fit-category">
<article class="card card-compact">
<h3>Private estates</h3>
<p>
At home, the season gathers around familiar rituals. We design compositions for
@@ -346,7 +346,7 @@
</p>
</article>
<article class="client-fit-category">
<article class="card card-compact">
<h3>Select events</h3>
<p>
We arrange greenery and light around the places people meet and gather, giving
@@ -358,51 +358,51 @@
</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>
<section class="spaced-bordered-block surface-paper" id="contact" aria-labelledby="contact-title">
<div class="content-boundary grid-twelve-columns grid-wide-gap">
<div class="grid-leading-heading">
<p class="eyebrow-label label-uppercase">Let’s begin</p>
<h2 class="heading-editorial heading-large reveal-on-scroll" id="contact-title">Tell us your story.</h2>
<p class="text-dark-introduction">
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">
<form class="grid-trailing-form" action="#contact-confirmation" method="get">
<p class="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>
<div class="field-grid">
<div class="field-group">
<label class="label-uppercase" 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>
<div class="field-group">
<label class="label-uppercase" 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>
<div class="field-group">
<label class="label-uppercase" 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>
<div class="field-group">
<label class="label-uppercase" 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">
<button class="button-filled label-uppercase" 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">
<p class="target-notice" 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>
@@ -411,16 +411,16 @@
</section>
</main>
<footer class="website-footer">
<div class="site-width-boundary website-footer-grid">
<div class="website-footer-brand-column">
<footer class="surface-dark surface-dark-padded">
<div class="content-boundary grid-weighted-columns">
<div class="span-full-width-on-tablet">
<a
class="brand-logo-link website-footer-logo-link"
class="image-link image-link-small"
href="#top"
aria-label="Noel Design Atelier, back to top"
>
<img
class="brand-logo-image website-footer-logo-image"
class="image-fluid image-inverted"
src="images/logo.webp"
width="4167"
height="1063"
@@ -429,11 +429,11 @@
decoding="async"
>
</a>
<p>For the welcome you offer and the memories you make.</p>
<p class="text-muted-small">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>
<nav class="link-stack" aria-label="Footer navigation">
<p class="column-label label-uppercase">Explore</p>
<ul>
<li><a href="#work">Season</a></li>
<li><a href="#philosophy">Philosophy</a></li>
@@ -442,15 +442,15 @@
</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">
<div class="space-above-on-mobile">
<p class="column-label label-uppercase">Pacific Northwest</p>
<p class="text-muted-small">We’d love to hear what you have in mind.</p>
<a class="arrow-link label-uppercase text-paper" href="#contact">
Start a conversation <span aria-hidden="true">→</span>
</a>
</div>
<p class="website-footer-copyright">© 2026 Noel Design Atelier</p>
<p class="text-muted-divider">© 2026 Noel Design Atelier</p>
</div>
</footer>
</body>
@@ -460,7 +460,7 @@
gsap.registerPlugin(ScrollTrigger);
gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
gsap.utils.toArray(".animate-header").forEach((header) => {
gsap.utils.toArray(".reveal-on-scroll").forEach((header) => {
gsap.from(header, {
scrollTrigger: {
trigger: header,
@@ -478,7 +478,7 @@
const motion = Number(figure.dataset.parallax);
if (!Number.isFinite(motion) || motion === 0) return;
const frame = figure.querySelector(".photography-frame");
const frame = figure.querySelector(".image-frame");
gsap.fromTo(figure, {
y: () => frame.offsetHeight * motion / 200,
+236 -340
View File
File diff suppressed because it is too large Load Diff