/* ========================================================= Nashville Sound Panels — design tokens & system ========================================================= */ :root { --bg: #0a0a0a; --bg-elev: #111111; --ink: #f6f1e7; /* warm off-white */ --ink-dim: #a8a195; --ink-faint: #5b554c; --rule: rgba(246, 241, 231, 0.10); --rule-strong: rgba(246, 241, 231, 0.22); --accent: #e8dfcd; /* stone */ --accent-deep: #c8b994; --font-display: "Instrument Serif", "Newsreader", Georgia, serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --gutter: clamp(20px, 4vw, 56px); --maxw: 1480px; } /* Accent variants (toggled by data attr on ) */ html[data-accent="stone"] { --accent: #e8dfcd; --accent-deep: #c8b994; } html[data-accent="brick"] { --accent: #d65a3b; --accent-deep: #a8412a; } html[data-accent="sage"] { --accent: #9fb389; --accent-deep: #6f8458; } html[data-accent="mono"] { --accent: #f6f1e7; --accent-deep: #ffffff; } /* Display font variants */ html[data-display="serif"] { --font-display: "Instrument Serif", "Newsreader", Georgia, serif; } html[data-display="grotesk"] { --font-display: "Space Grotesk", "DM Sans", sans-serif; } html[data-display="newsreader"] { --font-display: "Newsreader", "Instrument Serif", Georgia, serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--accent); color: var(--bg); } /* ========================================================= Reusable type ========================================================= */ .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; } .display { font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; } .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } .section-label { display: flex; align-items: baseline; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } .section-label .num { color: var(--accent); } .section-label .rule { flex: 1; height: 1px; background: var(--rule); } /* ========================================================= Splash / Logo ========================================================= */ .splash { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--gutter); position: relative; } .splash-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } .splash-meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; } .splash-center { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 28px; text-align: center; } .splash-logo { width: clamp(140px, 18vw, 220px); height: auto; } .splash-tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); max-width: 30ch; line-height: 1.25; } .splash-tagline em { font-style: normal; color: var(--accent); } .splash-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } .scroll-cue { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-dim); } .scroll-cue .arrow { display: inline-block; width: 24px; height: 1px; background: currentColor; position: relative; } .scroll-cue .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); } /* subtle waveform across splash bottom */ .wave-rule { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 44px); height: 1px; background: var(--rule); pointer-events: none; } /* ========================================================= Letter / About ========================================================= */ .letter { padding: clamp(80px, 12vh, 160px) var(--gutter) clamp(80px, 12vh, 160px); max-width: var(--maxw); margin: 0 auto; } .letter-head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); align-items: end; margin-bottom: clamp(48px, 8vh, 96px); padding-bottom: 32px; border-bottom: 1px solid var(--rule); } .letter-head h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8.5vw, 132px); line-height: 0.92; letter-spacing: -0.025em; } .letter-head h1 em { color: var(--accent); font-style: italic; } .letter-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .letter-prose { font-family: var(--font-body); font-size: clamp(17px, 1.35vw, 22px); line-height: 1.55; color: var(--ink); } .letter-prose p { margin: 0 0 1.1em 0; text-wrap: pretty; } .letter-prose p:first-child::first-letter { font-family: var(--font-display); font-size: 3.4em; line-height: 0.85; float: left; padding: 0.05em 0.12em 0 0; color: var(--accent); } .letter-prose .sign { margin-top: 2em; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 1.6vw, 26px); color: var(--ink); } .letter-prose .sign small { display: block; font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 6px; } .letter-aside { position: sticky; top: 48px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; } .letter-aside dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; } .letter-aside dt { color: var(--ink-faint); } .letter-aside dd { margin: 0; color: var(--ink-dim); } .letter-aside hr { border: 0; height: 1px; background: var(--rule); margin: 24px 0; } .letter-aside .pull { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--accent); text-transform: none; margin: 0; } /* ========================================================= Stats / By the Numbers ========================================================= */ .stats { padding: clamp(48px, 7vh, 96px) var(--gutter); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: var(--maxw); margin: 0 auto; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .stat { padding: 8px 24px 8px 0; position: relative; } .stat + .stat { border-left: 1px solid var(--rule); padding-left: 28px; } .stat .num { font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; } .stat .num em { font-style: italic; color: var(--accent); } .stat .num .suffix { font-size: 0.42em; color: var(--ink-dim); letter-spacing: 0; font-family: var(--font-mono); text-transform: uppercase; } .stat .label { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } /* ========================================================= Galleries ========================================================= */ .gallery { padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 8vh, 120px); position: relative; } .gallery + .gallery { border-top: 1px solid var(--rule); } .gallery-head { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto clamp(36px, 5vh, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; } .gallery-head .title { font-family: var(--font-display); font-size: clamp(44px, 6.5vw, 96px); line-height: 0.95; letter-spacing: -0.025em; margin: 12px 0 0; } .gallery-head .title em { color: var(--accent); font-style: italic; } .gallery-head .blurb { color: var(--ink-dim); max-width: 42ch; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.55; margin: 0; justify-self: end; text-wrap: pretty; } .gallery-head .blurb .count { display: flex; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); gap: 8px; } /* --- Cinematic layout: horizontal snap scroll --- */ .gallery-strip { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 32px; scrollbar-width: none; } .gallery-strip::-webkit-scrollbar { display: none; } .gallery-strip figure { flex: 0 0 auto; margin: 0; scroll-snap-align: start; width: clamp(280px, 62vw, 880px); display: flex; flex-direction: column; gap: 14px; } .gallery-strip figure:first-child { margin-left: 0; } .gallery-strip figure:last-child { padding-right: var(--gutter); } .gallery-strip .frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-elev); } .gallery-strip .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(1.02) contrast(1.02); } .gallery-strip figure:hover .frame img { transform: scale(1.025); } .gallery-strip figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .gallery-strip figcaption .place { color: var(--ink); letter-spacing: 0.04em; text-transform: none; font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 1.3vw, 20px); } .gallery-strip figcaption .idx { color: var(--ink-faint); } /* progress + nav */ .gallery-controls { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 24px; } .gallery-progress { flex: 1; height: 1px; background: var(--rule); position: relative; overflow: hidden; } .gallery-progress .bar { position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--accent); transition: width .2s ease, left .2s ease; } .gallery-nav { display: flex; gap: 8px; } .gallery-nav button { width: 40px; height: 40px; border: 1px solid var(--rule-strong); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background .2s ease, border-color .2s ease, color .2s ease; } .gallery-nav button:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } .gallery-nav svg { width: 14px; height: 14px; } /* --- Editorial grid layout (toggle) --- */ html[data-layout="grid"] .gallery-strip { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 16px; overflow: visible; scroll-snap-type: none; padding-bottom: 4px; } html[data-layout="grid"] .gallery-strip figure { width: auto; grid-column: span 2; } html[data-layout="grid"] .gallery-strip figure:nth-child(6n+1) { grid-column: span 3; } html[data-layout="grid"] .gallery-strip figure:nth-child(6n+4) { grid-column: span 3; } html[data-layout="grid"] .gallery-strip .frame { aspect-ratio: 4 / 3; } html[data-layout="grid"] .gallery-controls { display: none; } /* --- Stacked layout (toggle) --- */ html[data-layout="stacked"] .gallery-strip { display: grid; grid-template-columns: 1fr; gap: 12px; overflow: visible; scroll-snap-type: none; padding: 0 var(--gutter) 4px; } html[data-layout="stacked"] .gallery-strip figure { width: 100%; } html[data-layout="stacked"] .gallery-strip .frame { aspect-ratio: 21 / 9; } html[data-layout="stacked"] .gallery-controls { display: none; } /* ========================================================= Press / Quotes ========================================================= */ .press { padding: clamp(80px, 12vh, 140px) var(--gutter); max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--rule); } .press-head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); align-items: baseline; margin-bottom: clamp(40px, 6vh, 80px); } .press-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 80px); line-height: 0.95; letter-spacing: -0.02em; margin: 8px 0 0; } .press-head h2 em { color: var(--accent); font-style: italic; } .press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .quote { padding: 32px 32px 32px 0; border-left: 1px solid var(--rule); padding-left: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 240px; } .quote:first-child { border-left: 0; padding-left: 0; } .quote .q { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.25; color: var(--ink); letter-spacing: -0.005em; margin: 0; text-wrap: pretty; } .quote .q::before { content: "“"; color: var(--accent); margin-right: 4px; } .quote .q::after { content: "”"; color: var(--accent); margin-left: 2px; } .quote .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); display: flex; flex-direction: column; gap: 4px; } .quote .who .role { color: var(--ink-faint); } /* ========================================================= Thanks list ========================================================= */ .thanks { padding: clamp(80px, 12vh, 140px) var(--gutter); max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--rule); text-align: center; } .thanks h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 80px); line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .thanks h2 em { color: var(--accent); font-style: italic; } .thanks .eyebrow { margin-bottom: 12px; } .thanks .thanks-coda { margin-left: auto; margin-right: auto; } .thanks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gutter); } .thanks-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .thanks-list li span:first-child { white-space: nowrap; } .thanks-list li .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .thanks-coda { margin-top: clamp(28px, 4vh, 48px); font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; color: var(--ink-dim); text-wrap: pretty; max-width: 50ch; } /* ========================================================= Footer ========================================================= */ .footer { padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(28px, 4vh, 48px); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gutter); align-items: end; max-width: var(--maxw); margin: 0 auto; } .footer-mark { display: flex; align-items: center; gap: 14px; } .footer-mark img { width: 48px; height: 48px; opacity: 0.9; } .footer-mark .name { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.01em; line-height: 1; } .footer-mark .name em { color: var(--accent); font-style: italic; } .footer-mark .name small { display: block; font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; } .footer-contact { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); justify-self: center; text-align: center; } .footer-contact a { color: var(--ink); letter-spacing: 0.04em; text-transform: none; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.4vw, 22px); transition: color .2s ease; } .footer-contact a:hover { color: var(--accent); } .footer-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); justify-self: end; text-align: right; line-height: 1.8; } /* ========================================================= Reveal on scroll — default visible, JS opts out off-screen elements on first load (added .pre-reveal). This way pages never get stuck in opacity:0 even if observer/timing fails. ========================================================= */ [data-reveal].pre-reveal { opacity: 0; transform: translateY(18px); } [data-reveal] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 900px) { .letter-head { grid-template-columns: 1fr; } .letter-body { grid-template-columns: 1fr; } .letter-aside { position: static; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat + .stat { border-left: 0; padding-left: 0; } .stat:nth-child(2) { border-left: 1px solid var(--rule); padding-left: 24px; } .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 8px; } .stat:nth-child(4) { border-left: 1px solid var(--rule); padding-left: 24px; } .gallery-head { grid-template-columns: 1fr; } .gallery-head .blurb { justify-self: start; } .press-grid { grid-template-columns: 1fr; } .quote { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 32px; min-height: 0; } .quote:first-child { border-top: 0; padding-top: 0; } .press-head { grid-template-columns: 1fr; } .thanks { grid-template-columns: 1fr; } .thanks-list { grid-template-columns: 1fr; } .footer { grid-template-columns: 1fr; text-align: left; } .footer-contact { justify-self: start; text-align: left; } .footer-meta { justify-self: start; text-align: left; } .gallery-strip figure { width: 82vw; } }