Initial commit
This commit is contained in:
+103
@@ -0,0 +1,103 @@
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/macos,linux,windows,visualstudiocode,dotenv
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,linux,windows,visualstudiocode,dotenv
|
||||
|
||||
### Project ###
|
||||
Site*
|
||||
|
||||
### dotenv ###
|
||||
.env
|
||||
|
||||
### Linux ###
|
||||
*~
|
||||
|
||||
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||
.fuse_hidden*
|
||||
|
||||
# KDE directory preferences
|
||||
.directory
|
||||
|
||||
# Linux trash folder which might appear on any partition or disk
|
||||
.Trash-*
|
||||
|
||||
# .nfs files are created when an open file is removed but is still being accessed
|
||||
.nfs*
|
||||
|
||||
### macOS ###
|
||||
# General
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Icon must end with two \r
|
||||
Icon
|
||||
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
|
||||
# Files that might appear in the root of a volume
|
||||
.DocumentRevisions-V100
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
.VolumeIcon.icns
|
||||
.com.apple.timemachine.donotpresent
|
||||
|
||||
# Directories potentially created on remote AFP share
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
### macOS Patch ###
|
||||
# iCloud generated files
|
||||
*.icloud
|
||||
|
||||
### VisualStudioCode ###
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
### VisualStudioCode Patch ###
|
||||
# Ignore all local history of files
|
||||
.history
|
||||
.ionide
|
||||
|
||||
### Windows ###
|
||||
# Windows thumbnail cache files
|
||||
Thumbs.db
|
||||
Thumbs.db:encryptable
|
||||
ehthumbs.db
|
||||
ehthumbs_vista.db
|
||||
|
||||
# Dump file
|
||||
*.stackdump
|
||||
|
||||
# Folder config file
|
||||
[Dd]esktop.ini
|
||||
|
||||
# Recycle Bin used on file shares
|
||||
$RECYCLE.BIN/
|
||||
|
||||
# Windows Installer files
|
||||
*.cab
|
||||
*.msi
|
||||
*.msix
|
||||
*.msm
|
||||
*.msp
|
||||
|
||||
# Windows shortcuts
|
||||
*.lnk
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,visualstudiocode,dotenv
|
||||
+312
@@ -0,0 +1,312 @@
|
||||
<!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="Noel Design Atelier creates bespoke seasonal environments composed for exceptional architecture."
|
||||
>
|
||||
<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">
|
||||
</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-wordmark-link" href="#top" aria-label="Noel Design Atelier, back to top">
|
||||
<span class="brand-wordmark-primary-line">Noel</span>
|
||||
<span class="brand-wordmark-secondary-line">Design Atelier</span>
|
||||
</a>
|
||||
|
||||
<nav class="primary-navigation" aria-label="Primary navigation">
|
||||
<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="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="site-width-boundary homepage-hero-section" aria-labelledby="homepage-hero-title">
|
||||
<p class="section-context-label">Seasonal environment design <span aria-hidden="true">/</span> Pacific Northwest</p>
|
||||
|
||||
<h1 class="homepage-hero-title" 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>
|
||||
Luxury seasonal environments for hotels, automotive brands, private estates,
|
||||
and remarkable places.
|
||||
</p>
|
||||
<a class="editorial-text-link" href="#philosophy">
|
||||
Discover our world <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<figure class="homepage-hero-image-figure">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-tall"
|
||||
role="img"
|
||||
aria-label="Grand hotel entrance dressed with architectural garlands, Christmas trees, and candlelit lanterns"
|
||||
>
|
||||
<span>Grand hotel entrance with architectural garlands and candlelight</span>
|
||||
</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">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-portrait"
|
||||
role="img"
|
||||
aria-label="A sweeping architectural staircase wrapped in cedar garland and velvet ribbon"
|
||||
>
|
||||
<span>Architectural staircase with cedar garland and velvet ribbon</span>
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<h2 class="editorial-statement-title" id="philosophy-title">
|
||||
Architecture is the canvas.
|
||||
<span>The season is the masterpiece.</span>
|
||||
</h2>
|
||||
|
||||
<div class="philosophy-supporting-copy">
|
||||
<p>
|
||||
The most extraordinary spaces do not need decoration. They need intention.
|
||||
</p>
|
||||
<p>
|
||||
We work with architecture—never against it—to create environments that feel
|
||||
timeless, inviting, and unforgettable.
|
||||
</p>
|
||||
<a class="editorial-text-link" href="#approach">
|
||||
Our approach <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editorial-section approach-section" 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" id="approach-title">Tradition.</h2>
|
||||
|
||||
<div class="approach-content-grid">
|
||||
<div class="approach-supporting-copy">
|
||||
<p>
|
||||
Every element is rooted in craftsmanship, heritage, and the natural beauty of
|
||||
the season.
|
||||
</p>
|
||||
<p>
|
||||
Fresh cedar. Antique brass. Hand-tied velvet. Glass catching candlelight. The
|
||||
result feels elevated because every detail belongs.
|
||||
</p>
|
||||
<a class="editorial-text-link" href="#work">
|
||||
Explore our work <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<figure class="approach-image-figure">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-landscape"
|
||||
role="img"
|
||||
aria-label="Artisan arranging ribbon, cedar, brass ornaments, and seasonal materials on a worktable"
|
||||
>
|
||||
<span>Artisan worktable with ribbon, cedar, and brass ornaments</span>
|
||||
</div>
|
||||
</figure>
|
||||
</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>Selected work</p>
|
||||
</header>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="work-gallery-grid" aria-label="Selected project image placeholders">
|
||||
<figure class="work-gallery-primary-figure">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-wide"
|
||||
role="img"
|
||||
aria-label="A monumental Christmas tree in a grand room illuminated with warm lights"
|
||||
>
|
||||
<span>Monumental Christmas tree in a grand room</span>
|
||||
</div>
|
||||
<figcaption>Hospitality <span>— Seattle, Washington</span></figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="work-gallery-secondary-figure">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-portrait"
|
||||
role="img"
|
||||
aria-label="A candlelit holiday table arranged for an intimate seasonal gathering"
|
||||
>
|
||||
<span>Candlelit table composed for a seasonal gathering</span>
|
||||
</div>
|
||||
<figcaption>Private estate <span>— Medina, Washington</span></figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="work-gallery-detail-figure">
|
||||
<div
|
||||
class="photography-placeholder photography-placeholder-square"
|
||||
role="img"
|
||||
aria-label="Close detail of hand-tied velvet ribbon and an antique brass ornament"
|
||||
>
|
||||
<span>Velvet ribbon and antique brass detail</span>
|
||||
</div>
|
||||
<figcaption>Craft <span>— The details that remain</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.
|
||||
</p>
|
||||
<a class="editorial-text-link editorial-text-link-light" href="#contact">
|
||||
Begin your season <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<figure class="journal-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"
|
||||
>
|
||||
<span>Grand doorway framed with fresh cedar and warm light</span>
|
||||
</div>
|
||||
</figure>
|
||||
</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">Inquire</p>
|
||||
<h2 class="contact-title" id="contact-title">Let’s compose your season.</h2>
|
||||
<p>
|
||||
Tell us about the property, the people who will experience it, and the feeling
|
||||
you want them to remember.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="project-inquiry-form" action="#contact-confirmation" method="get">
|
||||
<p class="contact-form-disclosure" id="contact-form-disclosure">
|
||||
Concept preview only. No information entered here is transmitted or stored.
|
||||
</p>
|
||||
|
||||
<div class="project-inquiry-field-grid">
|
||||
<div class="project-inquiry-field-group">
|
||||
<label for="inquiry-name">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">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">Project brief</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 inquiry <span aria-hidden="true">→</span>
|
||||
</button>
|
||||
|
||||
<p class="contact-form-confirmation" id="contact-confirmation" tabindex="-1">
|
||||
Your concept inquiry is ready. A live site would securely deliver it to the atelier.
|
||||
</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-wordmark-link brand-wordmark-link-light" href="#top" aria-label="Noel Design Atelier, back to top">
|
||||
<span class="brand-wordmark-primary-line">Noel</span>
|
||||
<span class="brand-wordmark-secondary-line">Design Atelier</span>
|
||||
</a>
|
||||
<p>Seasonal environments composed with intention.</p>
|
||||
</div>
|
||||
|
||||
<nav class="website-footer-navigation" aria-label="Footer navigation">
|
||||
<p class="website-footer-column-title">Navigation</p>
|
||||
<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="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="website-footer-contact-column">
|
||||
<p class="website-footer-column-title">Pacific Northwest</p>
|
||||
<p>For remarkable places and the people who gather there.</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>
|
||||
</html>
|
||||
+986
@@ -0,0 +1,986 @@
|
||||
:root {
|
||||
--color-antique-brass: #b0987b;
|
||||
--color-noel-black: #0e0e0e;
|
||||
--color-weathered-paper: #f4ede3;
|
||||
--color-noel-red: #7a0f18;
|
||||
--color-photography-placeholder: #ff2d95;
|
||||
--color-softened-black: #292724;
|
||||
--color-subtle-rule: rgba(14, 14, 14, 0.24);
|
||||
--font-family-editorial: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
|
||||
--font-family-supporting: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
|
||||
--site-content-width: 92rem;
|
||||
--site-horizontal-padding: clamp(1.25rem, 4vw, 4rem);
|
||||
--section-vertical-spacing: clamp(5.5rem, 10vw, 10rem);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 2rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 20rem;
|
||||
overflow-x: hidden;
|
||||
background: var(--color-weathered-paper);
|
||||
color: var(--color-noel-black);
|
||||
font-family: var(--font-family-supporting);
|
||||
font-size: 1rem;
|
||||
font-synthesis: none;
|
||||
line-height: 1.55;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
p,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-noel-red);
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 0.1875rem solid var(--color-noel-red);
|
||||
outline-offset: 0.3rem;
|
||||
}
|
||||
|
||||
.skip-to-main-content-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.7rem 1rem;
|
||||
transform: translateY(-200%);
|
||||
background: var(--color-noel-black);
|
||||
color: var(--color-weathered-paper);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.skip-to-main-content-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.site-width-boundary {
|
||||
width: 100%;
|
||||
max-width: var(--site-content-width);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--site-horizontal-padding);
|
||||
}
|
||||
|
||||
.website-header {
|
||||
border-bottom: 1px solid var(--color-subtle-rule);
|
||||
}
|
||||
|
||||
.website-header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 7.5rem;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.brand-wordmark-link {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
color: var(--color-noel-black);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.brand-wordmark-primary-line {
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(1.5rem, 2.4vw, 2.05rem);
|
||||
letter-spacing: 0.31em;
|
||||
}
|
||||
|
||||
.brand-wordmark-secondary-line {
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 0.12rem;
|
||||
font-size: 0.55rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.34em;
|
||||
}
|
||||
|
||||
.primary-navigation-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: clamp(1.25rem, 3vw, 3.25rem);
|
||||
}
|
||||
|
||||
.primary-navigation-link {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-block: 0.6rem;
|
||||
font-size: 0.71rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.primary-navigation-link::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0.32rem;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
background: currentColor;
|
||||
content: "";
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.primary-navigation-link:hover::after,
|
||||
.primary-navigation-link:focus-visible::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.homepage-hero-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-template-rows: auto auto 1fr;
|
||||
column-gap: clamp(1rem, 2vw, 2rem);
|
||||
min-height: min(57rem, calc(100vh - 7.5rem));
|
||||
min-height: min(57rem, calc(100svh - 7.5rem));
|
||||
padding-top: clamp(2rem, 5vw, 5rem);
|
||||
padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
|
||||
}
|
||||
|
||||
.section-context-label {
|
||||
font-size: 0.69rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-context-label span {
|
||||
margin-inline: 0.55rem;
|
||||
color: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.homepage-hero-section > .section-context-label {
|
||||
grid-column: 1 / 7;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.homepage-hero-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
grid-column: 1 / 11;
|
||||
grid-row: 2;
|
||||
margin-top: clamp(2.8rem, 7vw, 6rem);
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(4.2rem, 9.8vw, 9.6rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.88;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.homepage-hero-title span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.homepage-hero-introduction {
|
||||
align-self: end;
|
||||
grid-column: 1 / 5;
|
||||
grid-row: 3;
|
||||
max-width: 22rem;
|
||||
padding-top: clamp(3rem, 8vw, 8rem);
|
||||
}
|
||||
|
||||
.brand-occasion-mark {
|
||||
display: inline-block;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--color-antique-brass);
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.homepage-hero-introduction p {
|
||||
max-width: 19rem;
|
||||
font-size: 0.84rem;
|
||||
letter-spacing: 0.14em;
|
||||
line-height: 1.85;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.editorial-text-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2.25rem;
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 0.45rem;
|
||||
border-bottom: 1px solid currentColor;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.editorial-text-link span {
|
||||
font-size: 1.1rem;
|
||||
line-height: 0.7;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.editorial-text-link:hover span,
|
||||
.editorial-text-link:focus-visible span {
|
||||
transform: translateX(0.35rem);
|
||||
}
|
||||
|
||||
.homepage-hero-image-figure {
|
||||
align-self: end;
|
||||
grid-column: 8 / 13;
|
||||
grid-row: 2 / 4;
|
||||
min-width: 0;
|
||||
margin-top: clamp(7rem, 11vw, 11rem);
|
||||
}
|
||||
|
||||
.photography-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 12rem;
|
||||
padding: clamp(1.5rem, 4vw, 3rem);
|
||||
border: 1px solid rgba(14, 14, 14, 0.5);
|
||||
background: var(--color-photography-placeholder);
|
||||
color: var(--color-noel-black);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photography-placeholder span {
|
||||
max-width: 22rem;
|
||||
font-size: clamp(0.66rem, 1vw, 0.78rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.16em;
|
||||
line-height: 1.6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.photography-placeholder-tall {
|
||||
aspect-ratio: 4 / 5;
|
||||
}
|
||||
|
||||
.photography-placeholder-portrait {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.photography-placeholder-landscape {
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.photography-placeholder-wide {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.photography-placeholder-square {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.editorial-section {
|
||||
padding-block: var(--section-vertical-spacing);
|
||||
border-top: 1px solid var(--color-subtle-rule);
|
||||
scroll-margin-top: 1rem;
|
||||
}
|
||||
|
||||
.numbered-section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: clamp(3rem, 6vw, 6rem);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.numbered-section-index {
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.numbered-section-rule {
|
||||
width: 2.5rem;
|
||||
height: 1px;
|
||||
background: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.numbered-section-heading p {
|
||||
margin-left: auto;
|
||||
color: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.philosophy-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
gap: clamp(2rem, 3vw, 3.5rem);
|
||||
}
|
||||
|
||||
.philosophy-image-figure {
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
|
||||
.editorial-statement-title {
|
||||
grid-column: 5 / 10;
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(2.4rem, 4vw, 4.5rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.03;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.editorial-statement-title span {
|
||||
display: block;
|
||||
margin-top: 0.25em;
|
||||
color: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy {
|
||||
grid-column: 10 / 13;
|
||||
color: var(--color-softened-black);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy p + p,
|
||||
.approach-supporting-copy p + p {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.approach-section {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.oversized-editorial-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(5rem, 13.2vw, 12.5rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.065em;
|
||||
line-height: 0.78;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.approach-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: end;
|
||||
gap: clamp(2rem, 4vw, 4.5rem);
|
||||
margin-top: clamp(1rem, 2vw, 2rem);
|
||||
}
|
||||
|
||||
.approach-supporting-copy {
|
||||
grid-column: 1 / 4;
|
||||
padding-top: clamp(3rem, 7vw, 7rem);
|
||||
color: var(--color-softened-black);
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.approach-image-figure {
|
||||
grid-column: 4 / 12;
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.work-section {
|
||||
border-top-color: rgba(244, 237, 227, 0.18);
|
||||
background: var(--color-noel-black);
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.numbered-section-heading-on-dark .numbered-section-rule {
|
||||
background: rgba(244, 237, 227, 0.45);
|
||||
}
|
||||
|
||||
.work-heading-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: end;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.work-heading-grid .oversized-editorial-title {
|
||||
grid-column: 1 / 10;
|
||||
}
|
||||
|
||||
.work-introduction-copy {
|
||||
grid-column: 10 / 13;
|
||||
padding-bottom: 0.6rem;
|
||||
color: rgba(244, 237, 227, 0.74);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.work-gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: clamp(2rem, 3vw, 3.5rem);
|
||||
margin-top: clamp(4rem, 8vw, 8rem);
|
||||
}
|
||||
|
||||
.work-gallery-primary-figure {
|
||||
grid-column: 1 / 9;
|
||||
}
|
||||
|
||||
.work-gallery-secondary-figure {
|
||||
grid-column: 9 / 13;
|
||||
margin-top: clamp(5rem, 12vw, 12rem);
|
||||
}
|
||||
|
||||
.work-gallery-detail-figure {
|
||||
grid-column: 3 / 7;
|
||||
margin-top: clamp(1rem, 4vw, 4rem);
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(244, 237, 227, 0.34);
|
||||
font-size: 0.69rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption span {
|
||||
color: var(--color-antique-brass);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.journal-section {
|
||||
border-top: 0;
|
||||
background: var(--color-noel-red);
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.journal-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
gap: clamp(3rem, 7vw, 7rem);
|
||||
}
|
||||
|
||||
.journal-heading-content {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
|
||||
.section-context-label-red {
|
||||
color: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.journal-title,
|
||||
.contact-title {
|
||||
margin-top: 2rem;
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(3.2rem, 6.5vw, 7rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.94;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.journal-summary-copy {
|
||||
max-width: 29rem;
|
||||
margin-top: 2rem;
|
||||
color: rgba(244, 237, 227, 0.82);
|
||||
}
|
||||
|
||||
.editorial-text-link-light {
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.journal-image-figure {
|
||||
grid-column: 6 / 13;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
background: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.contact-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: clamp(3rem, 8vw, 9rem);
|
||||
}
|
||||
|
||||
.contact-heading-content {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
|
||||
.contact-heading-content > p:last-child {
|
||||
max-width: 27rem;
|
||||
margin-top: 2rem;
|
||||
color: var(--color-softened-black);
|
||||
}
|
||||
|
||||
.project-inquiry-form {
|
||||
grid-column: 7 / 13;
|
||||
}
|
||||
|
||||
.contact-form-disclosure {
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--color-antique-brass);
|
||||
color: var(--color-softened-black);
|
||||
font-size: 0.77rem;
|
||||
}
|
||||
|
||||
.project-inquiry-field-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.project-inquiry-field-group {
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.project-inquiry-field-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.65rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.project-inquiry-field-group input,
|
||||
.project-inquiry-field-group textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.8rem 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(14, 14, 14, 0.58);
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.project-inquiry-field-group textarea {
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.project-inquiry-field-group input:focus,
|
||||
.project-inquiry-field-group textarea:focus {
|
||||
border-bottom-color: var(--color-noel-red);
|
||||
box-shadow: 0 1px 0 var(--color-noel-red);
|
||||
}
|
||||
|
||||
.project-inquiry-submit-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 1.15rem 1.25rem;
|
||||
border: 1px solid var(--color-noel-black);
|
||||
background: var(--color-noel-black);
|
||||
color: var(--color-weathered-paper);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
transition: background-color 180ms ease, color 180ms ease;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.project-inquiry-submit-button:hover,
|
||||
.project-inquiry-submit-button:focus-visible {
|
||||
background: var(--color-antique-brass);
|
||||
color: var(--color-noel-black);
|
||||
}
|
||||
|
||||
.project-inquiry-submit-button span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.contact-form-confirmation {
|
||||
display: none;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border-left: 0.25rem solid var(--color-noel-red);
|
||||
background: rgba(176, 152, 123, 0.18);
|
||||
}
|
||||
|
||||
.contact-form-confirmation:target {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.website-footer {
|
||||
padding-block: clamp(4rem, 8vw, 7rem) 2rem;
|
||||
background: var(--color-noel-black);
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.website-footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
gap: clamp(2.5rem, 7vw, 8rem);
|
||||
}
|
||||
|
||||
.brand-wordmark-link-light {
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.website-footer-brand-column > p,
|
||||
.website-footer-contact-column > p:not(.website-footer-column-title) {
|
||||
max-width: 19rem;
|
||||
margin-top: 1.75rem;
|
||||
color: rgba(244, 237, 227, 0.62);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.website-footer-column-title {
|
||||
margin-bottom: 1.4rem;
|
||||
color: var(--color-antique-brass);
|
||||
font-size: 0.66rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.website-footer-navigation a {
|
||||
display: inline-block;
|
||||
padding-block: 0.25rem;
|
||||
color: rgba(244, 237, 227, 0.76);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.website-footer-navigation a:hover,
|
||||
.website-footer-navigation a:focus-visible {
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.website-footer-copyright {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(244, 237, 227, 0.16);
|
||||
color: rgba(244, 237, 227, 0.48);
|
||||
font-size: 0.67rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 64rem) {
|
||||
.homepage-hero-section {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.homepage-hero-title {
|
||||
grid-column: 1 / 13;
|
||||
font-size: clamp(4rem, 11.5vw, 7rem);
|
||||
}
|
||||
|
||||
.homepage-hero-introduction {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
|
||||
.homepage-hero-image-figure {
|
||||
grid-column: 7 / 13;
|
||||
}
|
||||
|
||||
.philosophy-content-grid {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.philosophy-image-figure {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
|
||||
.editorial-statement-title {
|
||||
grid-column: 6 / 13;
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy {
|
||||
grid-column: 6 / 11;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.approach-supporting-copy {
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
|
||||
.approach-image-figure {
|
||||
grid-column: 5 / 13;
|
||||
}
|
||||
|
||||
.work-heading-grid .oversized-editorial-title {
|
||||
grid-column: 1 / 9;
|
||||
}
|
||||
|
||||
.work-introduction-copy {
|
||||
grid-column: 9 / 13;
|
||||
}
|
||||
|
||||
.journal-heading-content {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
.journal-image-figure {
|
||||
grid-column: 7 / 13;
|
||||
}
|
||||
|
||||
.contact-heading-content {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
|
||||
.project-inquiry-form {
|
||||
grid-column: 6 / 13;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.website-header-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-height: auto;
|
||||
padding-block: 1.75rem 1.2rem;
|
||||
gap: 1.35rem;
|
||||
}
|
||||
|
||||
.primary-navigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.primary-navigation-list {
|
||||
justify-content: flex-start;
|
||||
gap: 0.4rem 1.6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.homepage-hero-section {
|
||||
display: block;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.homepage-hero-title {
|
||||
margin-top: 3.25rem;
|
||||
font-size: clamp(3.8rem, 17vw, 7.5rem);
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
.homepage-hero-introduction {
|
||||
max-width: 24rem;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.homepage-hero-image-figure {
|
||||
max-width: 31rem;
|
||||
margin-top: 3.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.philosophy-content-grid,
|
||||
.approach-content-grid,
|
||||
.work-heading-grid,
|
||||
.work-gallery-grid,
|
||||
.journal-content-grid,
|
||||
.contact-content-grid {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.philosophy-image-figure {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.editorial-statement-title {
|
||||
max-width: 37rem;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy {
|
||||
max-width: 27rem;
|
||||
margin-top: 2.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.oversized-editorial-title {
|
||||
font-size: clamp(4.35rem, 18vw, 8.5rem);
|
||||
line-height: 0.88;
|
||||
}
|
||||
|
||||
.approach-content-grid {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.approach-supporting-copy {
|
||||
max-width: 28rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.approach-image-figure {
|
||||
margin-top: 3.5rem;
|
||||
margin-left: clamp(0rem, 8vw, 5rem);
|
||||
}
|
||||
|
||||
.work-introduction-copy {
|
||||
max-width: 28rem;
|
||||
margin-top: 2.5rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.work-gallery-primary-figure,
|
||||
.work-gallery-secondary-figure,
|
||||
.work-gallery-detail-figure {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.work-gallery-secondary-figure {
|
||||
max-width: 27rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.work-gallery-detail-figure {
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
||||
.journal-image-figure {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.contact-heading-content {
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
.project-inquiry-form {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.website-footer-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.website-footer-brand-column {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 32rem) {
|
||||
:root {
|
||||
--site-horizontal-padding: 1.25rem;
|
||||
}
|
||||
|
||||
.primary-navigation-list {
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
.primary-navigation-link {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.homepage-hero-title {
|
||||
font-size: clamp(3.35rem, 17vw, 5.25rem);
|
||||
letter-spacing: -0.065em;
|
||||
}
|
||||
|
||||
.homepage-hero-title span:last-child {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
.numbered-section-heading p {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.editorial-statement-title {
|
||||
font-size: clamp(2.15rem, 10.5vw, 3.3rem);
|
||||
}
|
||||
|
||||
.oversized-editorial-title {
|
||||
font-size: clamp(3.7rem, 18vw, 5.5rem);
|
||||
}
|
||||
|
||||
.journal-title,
|
||||
.contact-title {
|
||||
font-size: clamp(2.75rem, 13vw, 4.1rem);
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption span {
|
||||
display: block;
|
||||
margin-top: 0.35rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-inquiry-field-grid,
|
||||
.website-footer-grid {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.website-footer-navigation,
|
||||
.website-footer-contact-column {
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user