/* ============================================================
Fine Linen Creation — Comp 01: Stone and Silence
Shared stylesheet
============================================================ */
/* Font loading moved to a in each page's instead of an
@import here — @import inside a stylesheet is discovered only after
the browser has fetched and parsed this whole file, forcing a serial
HTML → CSS → font-CSS → font-files chain. A lets the browser
discover and start fetching fonts in parallel with everything else. */
/* ── Tokens ── */
:root {
--mist: #ECECEA;
--pebble: #D7D6D2;
--white: #FFFFFF;
--ink: #1F1D1A;
--stone: #5F5A53; /* darkened from #7A746B — original failed WCAG AA (3.18:1 on --pebble); this passes 4.70:1 */
--faint: #B5AFA5;
--brass: #76684F; /* darkened from #9C8A6B — original failed WCAG AA (2.84:1 on --mist); this passes 4.60:1 */
--lateral-lg: 80px;
--lateral-md: 48px;
--lateral-sm: 24px;
--max-w: 1440px;
--measure: 720px;
}
/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
background: var(--mist);
color: var(--ink);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ── Focus states ──
Nothing in this file styled :focus at all, meaning keyboard/screen-reader
users got whatever the browser's default outline happens to be — not
necessarily visible against this palette, and not on-brand. Only applies
to :focus-visible (keyboard/programmatic focus), not mouse clicks, so it
doesn't add a ring to every button a mouse user clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 3px;
}
/* ── Skip to content ──
Without this, a keyboard user has to tab through the entire nav on every
single page before reaching anything else. Visually hidden until focused. */
.skip-link {
position: absolute;
top: -100px;
left: 24px;
z-index: 1000;
background: var(--ink);
color: var(--mist);
padding: 12px 20px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: top 200ms ease;
}
.skip-link:focus {
top: 16px;
}
/* ── Type helpers ── */
.serif {
font-family: 'Fraunces', serif;
font-optical-sizing: auto;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-weight: 400;
}
/* display tokens */
.display-xl { font-size: clamp(56px, 7vw, 96px); line-height: 1.05; letter-spacing: -0.01em; }
.display-lg { font-size: clamp(44px, 5.5vw, 72px); line-height: 1.08; letter-spacing: -0.01em; }
.display-md { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.12; }
.heading-h1 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.15; }
.heading-h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.20; }
.heading-h3 { font-size: clamp(22px, 2vw, 24px); line-height: 1.30; }
.eyebrow { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
.body-lg { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.60; }
.body-md { font-size: clamp(15px, 1.2vw, 16px); line-height: 1.65; }
.body-sm { font-size: clamp(13px, 1vw, 14px); line-height: 1.60; }
.caption { font-size: clamp(11px, 0.85vw, 12px); line-height: 1.50; letter-spacing: 0.04em; }
/* ── Layout ── */
.container {
max-width: var(--max-w);
margin: 0 auto;
padding-left: var(--lateral-lg);
padding-right: var(--lateral-lg);
}
@media (max-width: 1280px) {
.container { padding-left: var(--lateral-md); padding-right: var(--lateral-md); }
}
@media (max-width: 768px) {
.container { padding-left: var(--lateral-sm); padding-right: var(--lateral-sm); }
}
/* ── Navigation ── */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: 72px;
display: flex;
align-items: center;
padding: 0 var(--lateral-lg);
transition: background 300ms ease-out;
}
.site-nav.scrolled { background: var(--mist); }
@media (max-width: 1280px) { .site-nav { padding: 0 var(--lateral-md); } }
@media (max-width: 768px) { .site-nav { padding: 0 var(--lateral-sm); } }
.nav-wordmark {
font-family: 'Fraunces', serif;
font-optical-sizing: auto;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-weight: 400;
font-size: 18px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
flex-shrink: 0;
}
.nav-wordmark.light { color: var(--mist); }
.site-nav.scrolled .nav-wordmark { color: var(--ink); }
.nav-links {
margin-left: auto;
display: flex;
align-items: center;
gap: 0;
list-style: none;
}
.nav-links li { display: flex; align-items: center; }
.nav-links .dot {
color: var(--faint);
font-size: 11px;
padding: 0 24px;
user-select: none;
}
.nav-links a {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone);
text-decoration: none;
transition: color 400ms ease-out;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); }
.nav-links.light a { color: rgba(234,226,212,0.7); }
.nav-links.light .dot { color: rgba(234,226,212,0.35); }
.site-nav.scrolled .nav-links a { color: var(--stone); }
.site-nav.scrolled .nav-links .dot { color: var(--faint); }
.site-nav.scrolled .nav-links a:hover { color: var(--ink); }
@media (max-width: 900px) {
.nav-links { display: none; }
}
.nav-cta {
margin-left: 32px;
flex-shrink: 0;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
border: 1px solid var(--ink);
padding: 8px 16px;
transition: color 300ms ease-out, border-color 300ms ease-out, background 300ms ease-out;
}
.nav-cta:hover { background: var(--ink); color: var(--mist); }
.nav-cta.light { color: var(--mist); border-color: rgba(236,236,234,0.5); }
.nav-cta.light:hover { background: rgba(236,236,234,0.15); color: var(--mist); border-color: var(--mist); }
.site-nav.scrolled .nav-cta { color: var(--ink); border-color: var(--ink); background: transparent; }
.site-nav.scrolled .nav-cta:hover { background: var(--ink); color: var(--mist); }
@media (max-width: 900px) { .nav-cta { margin-left: auto; } }
/* Below 900px, .nav-links is hidden, so it's just the wordmark + CTA sharing
the bar. At full size (18px / 0.3em letter-spacing) the wordmark alone is
~282px wide, which doesn't leave room for the CTA on phone-width screens —
it was getting pushed off the right edge entirely. Scale both down together
below 480px so they comfortably fit side by side. */
@media (max-width: 480px) {
.nav-wordmark { font-size: 13px; letter-spacing: 0.18em; }
.nav-cta { padding: 7px 12px; font-size: 10px; letter-spacing: 0.14em; }
}
/* ── Mobile nav ──
Below 900px .nav-links is hidden with nothing replacing it — Events,
Portfolio, A Party Place, and Rentals were only reachable via the footer
or in-page links, not from the nav itself. This adds a hamburger toggle
and a dropdown panel with the same links, shown only below 900px. */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-left: 20px;
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 20px;
height: 1px;
background: var(--ink);
transition: transform 250ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
.nav-toggle { display: flex; }
}
.mobile-nav {
position: fixed;
top: 72px;
left: 0;
right: 0;
z-index: 99;
background: var(--mist);
border-bottom: 1px solid var(--faint);
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease;
}
.mobile-nav.is-open {
max-height: 320px;
}
.mobile-nav ul {
list-style: none;
padding: 8px var(--lateral-sm) 24px;
}
.mobile-nav li {
border-bottom: 1px solid var(--pebble);
}
.mobile-nav li:last-child {
border-bottom: none;
}
.mobile-nav a {
display: block;
padding: 16px 4px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
}
.mobile-nav a.active {
color: var(--brass);
}
@media (min-width: 901px) {
.mobile-nav { display: none; }
}
/* ── CTA ── */
.cta-primary {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
transition: color 400ms ease-out, border-color 400ms ease-out;
cursor: pointer;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.cta-primary:hover { color: var(--stone); border-bottom-color: var(--stone); }
.cta-secondary {
display: inline-block;
font-size: clamp(15px, 1.2vw, 16px);
line-height: 1.65;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--faint);
transition: border-color 300ms ease-out;
}
.cta-secondary:hover { border-bottom-color: var(--ink); }
/* ── Image ── */
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
figure { position: relative; }
figure figcaption {
margin-top: 16px;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--stone);
}
/* ── Photo placeholder ── */
.photo {
background-color: var(--pebble);
overflow: hidden;
position: relative;
}
.photo img { transition: opacity 300ms ease-out; }
.photo:hover img { opacity: 0.85; }
.photo-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone);
pointer-events: none;
}
/* ── Sections ── */
.section {
padding: 80px 0;
}
.section--tight {
padding: 60px 0;
}
@media (max-width: 768px) {
.section { padding: 56px 0; }
.section--tight { padding: 40px 0; }
}
.section-pebble { background: var(--pebble); }
/* ── Footer ── */
.site-footer {
background: var(--pebble);
padding: 140px 0 64px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-bottom: 80px;
}
@media (max-width: 768px) {
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
.footer-col-title {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 20px;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 14px;
line-height: 1.6;
color: var(--stone);
text-decoration: none;
transition: color 400ms ease-out;
}
.footer-links a:hover { color: var(--ink); }
.footer-links a.italic { font-style: italic; font-family: 'Fraunces', serif; font-optical-sizing: auto; font-variation-settings: "opsz" 144, "SOFT" 50; }
.footer-bottom {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid var(--faint);
}
.footer-wordmark {
font-family: 'Fraunces', serif;
font-optical-sizing: auto;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--stone);
text-decoration: none;
}
.footer-copy {
font-size: 12px;
line-height: 1.5;
color: var(--faint);
}