/* =========================================================
CAPTIVATING CABINETS — real brand fonts + palette
Black handwritten "Captivating" + copper "CABINETS"
on cream, with editorial Mara/CarmoWood structural moves.
========================================================= */
@font-face {
font-family: 'Instrument Sans';
src: url('InstrumentSans.woff2') format('woff2-variations'),
url('InstrumentSans.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('GeistMono.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
:root {
--cream: #f4ede0; /* warm cream, like the original site */
--cream-2: #ebe2d0;
--cream-3: #d9caa8;
--ink: #0d0c0a; /* near-black */
--ink-soft: #4a443c;
--copper: #bc6d3a; /* the brand accent */
--copper-d: #99562a;
--dark: #1a1714; /* deep stage for contrast sections */
--dark-2: #2a241e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--ink); overflow-x: hidden; scroll-behavior: smooth; }
body {
font-family: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.mono {
font-family: 'Geist Mono', 'SF Mono', Menlo, monospace;
font-weight: 300;
}
/* ========== CORNER UI — uses actual logo ========== */
.corner-logo {
position: fixed;
top: 22px;
left: 28px;
z-index: 100;
width: 130px;
}
.corner-logo img {
width: 100%;
height: auto;
display: block;
}
.corner-index {
position: fixed;
top: 32px;
right: 32px;
font-family: 'Geist Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--ink);
z-index: 100;
cursor: pointer;
padding: 6px 0;
}
.corner-lang {
position: fixed;
bottom: 28px;
right: 32px;
font-family: 'Geist Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--ink);
z-index: 100;
opacity: 0.6;
}
/* ========== HERO — script "Captivating" + copper "CABINETS" ========== */
.hero-stage {
position: relative;
height: 100vh;
background: var(--cream);
}
.hero-mark {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 24px;
text-align: center;
}
.hero-mark .script {
font-family: 'Allura', 'Pinyon Script', 'Brush Script MT', cursive;
font-weight: 400;
font-size: clamp(80px, 16vw, 280px);
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--ink);
user-select: none;
display: block;
}
.hero-mark .marque {
font-family: 'Instrument Sans', sans-serif;
font-weight: 600;
font-size: clamp(16px, 2.4vw, 32px);
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--copper);
margin-top: 12px;
display: block;
}
.hero-mark .scroll-cue {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.32em;
color: var(--ink);
opacity: 0.5;
}
/* ========== TRUST STRIP ========== */
.trust-strip {
max-width: 1080px;
margin: 0 auto;
padding: 56px 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
border-top: 1px solid rgba(13,12,10,0.15);
border-bottom: 1px solid rgba(13,12,10,0.15);
}
.trust-item { text-align: center; }
.trust-item .stat {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.0;
color: var(--ink);
margin-bottom: 4px;
}
.trust-item .label {
font-family: 'Geist Mono', monospace;
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
line-height: 1.5;
}
/* ========== WORD BAND ========== */
.word-band {
padding: 14vh 24px 12vh;
text-align: center;
}
.word-band .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--copper);
display: block;
margin-bottom: 28px;
}
.word-band .megaword {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(60px, 11vw, 180px);
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--ink);
display: block;
}
.word-band.dark { background: var(--dark); }
.word-band.dark .megaword { color: var(--cream); }
.word-band.dark .label { color: var(--cream-3); }
/* ========== FULL-BLEED PHOTO ========== */
.photo-bleed {
width: 100%;
height: 80vh;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.photo-bleed.tall { height: 100vh; }
.photo-bleed.short { height: 60vh; }
.photo-bleed::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.45) 100%);
pointer-events: none;
}
.photo-bleed .caption {
position: absolute;
bottom: 40px;
left: 40px;
z-index: 2;
color: var(--cream);
max-width: 540px;
}
.photo-bleed .caption .small {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
display: block;
margin-bottom: 16px;
color: var(--copper);
}
.photo-bleed .caption .big {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.0;
letter-spacing: -0.005em;
display: block;
color: var(--cream);
}
/* ========== MODULE — narrow cream card on cream stage ========== */
.module {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
position: relative;
}
.module-figure {
background: var(--cream-2);
padding: 40px 40px 56px;
position: relative;
margin-bottom: 80px;
border: 1px solid rgba(13,12,10,0.08);
}
.module-figure .img-wrap {
background: var(--cream-3);
aspect-ratio: 4/3;
overflow: hidden;
margin-bottom: 32px;
}
.module-figure .img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.module-figure .head-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 24px;
align-items: start;
margin-bottom: 24px;
}
.module-figure .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--copper);
padding-top: 16px;
line-height: 1.5;
}
.module-figure h2 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(40px, 5.4vw, 76px);
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--ink);
}
.module-figure .body {
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft);
margin-left: 134px;
max-width: 480px;
}
/* ========== GALLERY STRIP ========== */
.gallery-strip {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
margin-bottom: 80px;
}
.gallery-strip-label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 28px;
display: block;
}
.gallery-strip-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 8px;
}
.gallery-strip-grid .tile {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: var(--cream-3);
}
.gallery-strip-grid .tile.tall { grid-row: span 2; aspect-ratio: 4/5; }
@media (max-width: 800px) {
.gallery-strip-grid { grid-template-columns: 1fr 1fr; }
.gallery-strip-grid .tile.tall { grid-row: auto; aspect-ratio: 4/3; }
}
/* ========== PROCESS STEPS — on cream ========== */
.process-stage {
background: var(--cream-2);
padding: 96px 24px;
}
.process-stage .stage-head {
max-width: 920px;
margin: 0 auto 56px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: end;
}
.process-stage .stage-head .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
padding-bottom: 16px;
}
.process-stage .stage-head h2 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 6.5vw, 100px);
line-height: 0.98;
letter-spacing: -0.01em;
color: var(--ink);
}
.process-stage .steps {
max-width: 920px;
margin: 0 auto;
}
.process-stage .step {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 32px 0;
border-top: 1px solid rgba(13,12,10,0.18);
color: var(--ink);
}
.process-stage .step:last-child { border-bottom: 1px solid rgba(13,12,10,0.18); }
.process-stage .step .num {
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--copper);
padding-top: 6px;
}
.process-stage .step h3 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 600;
font-size: 22px;
letter-spacing: -0.005em;
margin-bottom: 8px;
line-height: 1.2;
}
.process-stage .step p {
font-size: 14px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 580px;
}
/* ========== BRAND GRID ========== */
.brands-stage {
background: var(--dark);
padding: 96px 24px;
color: var(--cream);
}
.brands-stage .stage-head {
max-width: 920px;
margin: 0 auto 64px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: end;
}
.brands-stage .stage-head .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
padding-bottom: 16px;
}
.brands-stage .stage-head h2 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 6.5vw, 100px);
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--cream);
}
.brands-stage .grid {
max-width: 920px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid rgba(244,237,224,0.15);
}
.brands-stage .brand-row {
padding: 26px 24px;
border-bottom: 1px solid rgba(244,237,224,0.15);
display: grid;
grid-template-columns: 36px 1fr 18px;
gap: 18px;
align-items: start;
color: var(--cream);
transition: padding 0.25s, background 0.25s;
}
.brands-stage .brand-row:nth-child(odd) { border-right: 1px solid rgba(244,237,224,0.15); }
.brands-stage .brand-row:hover { padding-left: 32px; background: rgba(188,109,58,0.08); }
.brands-stage .brand-row .num {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper);
padding-top: 6px;
}
.brands-stage .brand-row h3 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
margin-bottom: 6px;
color: var(--cream);
}
.brands-stage .brand-row .series {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(244,237,224,0.65);
line-height: 1.7;
}
.brands-stage .brand-row .arrow {
font-size: 14px;
align-self: center;
text-align: right;
color: var(--copper);
}
@media (max-width: 720px) {
.brands-stage .stage-head { grid-template-columns: 1fr; gap: 12px; }
.brands-stage .grid { grid-template-columns: 1fr; }
.brands-stage .brand-row:nth-child(odd) { border-right: none; }
}
/* ========== TWO PATHS ========== */
.path-stage {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.path-card {
background: var(--cream-2);
padding: 48px 36px 56px;
display: flex;
flex-direction: column;
min-height: 420px;
border: 1px solid rgba(13,12,10,0.08);
transition: background 0.25s;
}
.path-card:hover { background: var(--cream-3); }
.path-card .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 20px;
}
.path-card h3 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.0;
letter-spacing: -0.005em;
margin-bottom: 28px;
color: var(--ink);
}
.path-card ul {
list-style: none;
margin-bottom: auto;
padding: 0;
}
.path-card ul li {
font-size: 14px;
line-height: 1.65;
color: var(--ink-soft);
padding: 12px 0;
border-top: 1px solid rgba(13,12,10,0.12);
}
.path-card ul li:first-child { border-top: 1px solid rgba(13,12,10,0.18); }
.path-card .cta {
margin-top: 32px;
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper);
border-bottom: 1px solid var(--copper);
padding-bottom: 4px;
align-self: flex-start;
}
@media (max-width: 720px) { .path-stage { grid-template-columns: 1fr; } }
/* ========== TESTIMONIALS ========== */
.testimonials-stage {
background: var(--cream);
padding: 96px 24px;
}
.testimonials-stage .stage-head {
max-width: 920px;
margin: 0 auto 64px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: end;
}
.testimonials-stage .stage-head .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
padding-bottom: 16px;
}
.testimonials-stage .stage-head h2 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 6.5vw, 100px);
line-height: 1.0;
letter-spacing: -0.005em;
color: var(--ink);
}
.testimonials-stage .grid {
max-width: 920px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.testimonial {
border-top: 1px solid rgba(13,12,10,0.2);
padding-top: 28px;
}
.testimonial .stars {
font-size: 12px;
letter-spacing: 0.3em;
color: var(--copper);
margin-bottom: 16px;
}
.testimonial .quote {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-style: italic;
font-size: 17px;
line-height: 1.45;
color: var(--ink);
margin-bottom: 20px;
}
.testimonial .quote::before { content: '\201C'; }
.testimonial .quote::after { content: '\201D'; }
.testimonial .who {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper);
}
@media (max-width: 720px) {
.testimonials-stage .stage-head { grid-template-columns: 1fr; gap: 12px; }
.testimonials-stage .grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ========== CONTACT STRIP ========== */
.contact-strip {
background: var(--cream-2);
padding: 80px 24px;
text-align: center;
color: var(--ink);
}
.contact-strip .small {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 20px;
display: block;
}
.contact-strip .num {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 7vw, 110px);
line-height: 1;
color: var(--ink);
display: block;
margin-bottom: 24px;
}
.contact-strip .row {
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
/* ========== INDEX ========== */
.index-cream {
background: var(--cream-2);
padding: 80px 0 96px;
}
.index-list {
max-width: 920px;
margin: 0 auto;
padding: 0 32px;
}
.index-list .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 28px;
display: block;
}
.index-list .row {
display: grid;
grid-template-columns: 50px 1fr 32px;
align-items: baseline;
border-top: 1px solid rgba(13,12,10,0.25);
padding: 22px 0;
color: var(--ink);
transition: padding 0.35s ease;
}
.index-list .row:last-child { border-bottom: 1px solid rgba(13,12,10,0.25); }
.index-list .row:hover { padding-left: 12px; }
.index-list .num {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--copper);
text-transform: uppercase;
}
.index-list .title {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(32px, 4vw, 52px);
letter-spacing: -0.005em;
}
.index-list .arrow { text-align: right; font-size: 16px; color: var(--copper); }
/* ========== COLOPHON / FOOTER ========== */
.colophon {
background: var(--dark);
padding: 120px 24px 48px;
color: var(--cream);
}
.colophon-grid {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 48px;
}
.colophon h4 {
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--copper);
margin-bottom: 18px;
font-weight: 400;
}
.colophon ul { list-style: none; }
.colophon ul li {
font-size: 13px;
letter-spacing: 0.01em;
margin-bottom: 10px;
}
.colophon ul li a { color: var(--cream); transition: color 0.2s; }
.colophon ul li a:hover { color: var(--copper); }
.colophon .word-script {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 6vw, 96px);
line-height: 1.0;
color: var(--cream);
display: block;
}
.colophon .word-marque {
font-family: 'Instrument Sans', sans-serif;
font-weight: 600;
font-size: clamp(11px, 1.4vw, 17px);
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--copper);
margin-top: 4px;
display: block;
}
.colophon .baseline {
max-width: 1080px;
margin: 80px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(244,237,224,0.18);
display: flex;
justify-content: space-between;
font-family: 'Geist Mono', monospace;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: rgba(244,237,224,0.5);
}
@media (max-width: 720px) {
.colophon-grid { grid-template-columns: 1fr; gap: 40px; }
.colophon .baseline { flex-direction: column; gap: 12px; }
}
/* ========== PAGE HERO (inner pages) ========== */
.page-hero {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 24px;
text-align: center;
background: var(--cream);
}
.page-hero .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.32em;
color: var(--copper);
margin-bottom: 28px;
}
.page-hero h1 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(64px, 10vw, 200px);
line-height: 0.95;
letter-spacing: -0.005em;
color: var(--ink);
}
/* ========== CONTACT PAGE ========== */
.contact-block {
max-width: 600px;
margin: 0 auto;
padding: 80px 32px;
background: var(--cream-2);
}
.contact-block .label {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 24px;
display: block;
}
.contact-block h2 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 6vw, 80px);
line-height: 1.0;
letter-spacing: -0.005em;
margin-bottom: 40px;
color: var(--ink);
}
.contact-block .lines {
display: grid;
gap: 12px;
margin-bottom: 56px;
font-family: 'Geist Mono', monospace;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
}
.contact-block .lines a {
display: inline-block;
border-bottom: 1px solid var(--copper);
padding-bottom: 2px;
}
.contact-form { display: grid; gap: 28px; }
.contact-form label {
display: block;
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 6px;
}
.contact-form input, .contact-form textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(13,12,10,0.4);
padding: 8px 0 12px;
font-family: 'Instrument Sans', sans-serif;
font-size: 15px;
color: var(--ink);
outline: none;
transition: border-color 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--copper); }
.contact-form textarea { min-height: 96px; resize: vertical; }
.contact-form .send {
background: var(--ink);
border: none;
color: var(--cream);
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
padding: 18px 36px;
border-radius: 0;
cursor: pointer;
align-self: flex-start;
justify-self: start;
transition: background 0.25s;
}
.contact-form .send:hover { background: var(--copper); }
/* ========== BRAND CARDS GRID (cabinet-brands.html) ========== */
.brand-cards-section {
max-width: 920px;
margin: 0 auto;
padding: 0 24px;
}
.brand-cards-grid { display: grid; grid-template-columns: 1fr; }
.brand-card {
background: var(--cream-2);
padding: 56px 40px 64px;
display: grid;
grid-template-columns: 80px 1fr 80px;
gap: 24px;
align-items: end;
border-bottom: 1px solid rgba(13,12,10,0.15);
transition: background 0.3s;
}
.brand-card:last-child { border-bottom: none; }
.brand-card:hover { background: var(--cream-3); }
.brand-card .num {
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
align-self: start;
padding-top: 16px;
}
.brand-card h3 {
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: clamp(48px, 6vw, 80px);
line-height: 0.95;
letter-spacing: -0.005em;
margin-bottom: 12px;
color: var(--ink);
}
.brand-card p {
font-size: 14px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 480px;
}
.brand-card .arrow { font-size: 22px; align-self: center; text-align: right; color: var(--copper); }
@media (max-width: 720px) {
.brand-card { grid-template-columns: 1fr; gap: 16px; padding: 36px 24px 40px; }
.brand-card .arrow { text-align: left; }
}
/* ========== RESPONSIVE TWEAKS ========== */
@media (max-width: 720px) {
.corner-logo { width: 100px; }
.trust-strip { grid-template-columns: 1fr 1fr; gap: 16px; padding: 40px 24px; }
.module-figure { padding: 24px 24px 40px; }
.module-figure .head-row { grid-template-columns: 1fr; gap: 8px; }
.module-figure .label { padding-top: 0; }
.module-figure .body { margin-left: 0; margin-top: 20px; }
}
/* ============================================================
USER REQUEST: spell-out headlines in BOLD INSTRUMENT SANS,
keep elegant Allura ONLY for the actual "Captivating"
brand wordmark. Add huge subtle script-curve backgrounds.
============================================================ */
.hero-mark .script,
.colophon .word-script {
font-family: 'Allura', 'Pinyon Script', 'Brush Script MT', cursive !important;
font-weight: 400 !important;
}
/* Force every other display headline to be Instrument Sans Bold */
.word-band .megaword,
.module-figure h2,
.module-figure .head-row .label + h2,
.process-stage .stage-head h2,
.brands-stage .stage-head h2,
.testimonials-stage .stage-head h2,
.path-card h3,
.brand-card h3,
.contact-strip .num,
.contact-strip a.num,
.index-list .title,
.contact-block h2,
.page-hero h1,
.trust-item .stat,
.photo-bleed .caption .big {
font-family: 'Instrument Sans', 'Helvetica Neue', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
line-height: 1.0 !important;
}
/* Slightly smaller because sans-serif reads bigger than Allura at the same px */
.word-band .megaword { font-size: clamp(40px, 7vw, 96px) !important; line-height: 0.95 !important; }
.module-figure h2 { font-size: clamp(28px, 3.6vw, 52px) !important; }
.process-stage .stage-head h2,
.brands-stage .stage-head h2,
.testimonials-stage .stage-head h2 { font-size: clamp(32px, 4.4vw, 64px) !important; }
.path-card h3 { font-size: clamp(24px, 3vw, 40px) !important; }
.brand-card h3 { font-size: clamp(28px, 3.6vw, 52px) !important; }
.contact-strip .num { font-size: clamp(28px, 4vw, 56px) !important; letter-spacing: -0.01em !important; }
.index-list .title { font-size: clamp(22px, 2.6vw, 36px) !important; }
.contact-block h2 { font-size: clamp(28px, 3.8vw, 52px) !important; }
.page-hero h1 { font-size: clamp(40px, 6.4vw, 110px) !important; line-height: 0.9 !important; letter-spacing: -0.035em !important; }
.trust-item .stat { font-size: clamp(34px, 4vw, 56px) !important; }
.photo-bleed .caption .big { font-size: clamp(28px, 3.4vw, 48px) !important; }
/* The hero "Captivating" stays huge in Allura */
.hero-mark .script { font-family: 'Allura', cursive !important; font-size: clamp(80px, 16vw, 280px) !important; }
/* ============================================================
BACKGROUND SCRIPT-CURVE FLOURISHES — huge, subtle, partial
Uses the actual logo PNG scaled WAY up, low opacity, positioned
to show only curves at the edges.
============================================================ */
.hero-stage,
.brands-stage,
.testimonials-stage,
.process-stage,
.contact-strip {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero-stage::before,
.brands-stage::before,
.testimonials-stage::before,
.process-stage::before,
.contact-strip::before {
content: '';
position: absolute;
z-index: 0;
background-image: url('cc-logo.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}
/* Hero — big "Captivating" curve sweeping across the bottom */
.hero-stage::before {
width: 220%;
height: 90%;
bottom: -20%;
right: -60%;
opacity: 0.04;
filter: brightness(0); /* full black so opacity gives a subtle wash */
}
/* Brands stage (dark) — bright copper-tinted flourish in upper-left */
.brands-stage::before {
width: 180%;
height: 100%;
top: -10%;
left: -50%;
opacity: 0.06;
filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(-10deg);
}
/* Testimonials — partial logo on right, very subtle */
.testimonials-stage::before {
width: 160%;
height: 110%;
top: -10%;
right: -90%;
opacity: 0.05;
filter: brightness(0);
}
/* Process — subtle wash sweeping bottom-left */
.process-stage::before {
width: 200%;
height: 100%;
bottom: -30%;
left: -80%;
opacity: 0.05;
filter: brightness(0);
}
/* Contact strip — subtle script swoosh */
.contact-strip::before {
width: 160%;
height: 100%;
top: 10%;
left: -40%;
opacity: 0.04;
filter: brightness(0);
}
/* Make sure foreground content stays above the flourish */
.hero-mark, .brands-stage > *, .testimonials-stage > *, .process-stage > *, .contact-strip > * {
position: relative;
z-index: 1;
}
/* ============================================================
FINAL — use actual LOGO IMAGE as hero (not Allura text).
Allura is GONE from the visible interface.
============================================================ */
/* Hero is now the real logo image, centered, large */
.hero-mark .hero-logo {
width: clamp(280px, 45vw, 720px);
height: auto;
display: block;
margin: 0 auto;
user-select: none;
}
.hero-mark .script,
.hero-mark .marque {
display: none !important;
}
/* Remove Allura from EVERY visible element except the subtle background flourish */
.colophon .word-script {
font-family: 'Instrument Sans', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
text-transform: lowercase !important;
}
/* Also remove from any leftover `.word-mini` that was using Allura */
.colophon .word-mini {
font-family: 'Instrument Sans', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
text-transform: lowercase !important;
font-size: clamp(40px, 5vw, 72px) !important;
line-height: 0.95 !important;
}
/* Make the background script-curve flourishes a touch more visible — they're the only place the script style remains */
.hero-stage::before { opacity: 0.07 !important; }
.brands-stage::before { opacity: 0.08 !important; }
.testimonials-stage::before { opacity: 0.07 !important; }
.process-stage::before { opacity: 0.07 !important; }
.contact-strip::before { opacity: 0.06 !important; }
/* ============================================================
RICH SUBTLE BACKGROUNDS — kitchen photography behind sections
============================================================ */
/* Hero — soft kitchen photo behind logo, very subtle */
.hero-stage::after {
content: '';
position: absolute;
inset: 0;
background-image: url('ai-bg-soft-kitchen.jpg'),
radial-gradient(ellipse at center, transparent 10%, var(--cream) 75%);
background-size: cover, 100% 100%;
background-position: center, center;
background-blend-mode: multiply, normal;
opacity: 0.18;
z-index: 0;
pointer-events: none;
}
.hero-mark { z-index: 2; }
/* Section backgrounds — give .module a faint photo wash */
.module {
position: relative;
}
.module::before {
content: '';
position: absolute;
inset: -40px -10vw;
background-image: url('ai-bg-marble.jpg');
background-size: cover;
background-position: center;
opacity: 0.12;
z-index: -1;
pointer-events: none;
filter: grayscale(0.3) brightness(1.1);
}
/* Word-band on cream — add a kitchen detail wash on the sides */
.word-band {
position: relative;
overflow: hidden;
}
.word-band::before {
content: '';
position: absolute;
inset: 0;
background-image: url('ai-bg-wood-grain.jpg');
background-size: cover;
background-position: center;
opacity: 0.10;
z-index: 0;
pointer-events: none;
}
.word-band > * { position: relative; z-index: 2; }
/* Make all the background images blend richly into the cream */
.hero-stage::after,
.module::before,
.word-band::before {
background-blend-mode: multiply;
}
/* Trust strip — keep clean but add a tiny grain */
.trust-strip {
position: relative;
background: linear-gradient(180deg, transparent, rgba(188,109,58,0.03), transparent);
}
/* Path stage — give it a subtle background */
.path-stage {
position: relative;
}
.path-stage::before {
content: '';
position: absolute;
inset: -40px -10vw;
background-image: url('ai-bg-soft-kitchen.jpg');
background-size: cover;
background-position: center 30%;
opacity: 0.12;
z-index: -1;
pointer-events: none;
}
/* Gallery strip — lift onto a quiet stage */
.gallery-strip {
position: relative;
padding: 40px 24px;
}
.gallery-strip::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--cream), var(--cream-2), var(--cream));
z-index: -1;
}
/* ============================================================
DESIGN-CRIT FIXES — applying 2024-2026 design principles
1. Transparent logo with multiply blend (no white box)
2. Full-bleed soft-focus hero background
3. Animated scroll line affordance
4. Paper-grain noise overlay
5. Marble texture wash on modules
============================================================ */
/* Hero — soft kitchen photography full-bleed, with vignette */
.hero-stage {
background: var(--cream) !important;
overflow: hidden;
}
.hero-stage > .hero-mark {
z-index: 5;
}
.hero-stage::before {
content: '';
position: absolute;
inset: 0;
background-image: url('ai-bg-soft-kitchen.jpg');
background-size: cover;
background-position: center 60%;
opacity: 0.55;
filter: blur(12px) saturate(0.85) brightness(1.05);
z-index: 1;
pointer-events: none;
}
.hero-stage::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(244,237,224,0.35) 0%, rgba(244,237,224,0.85) 70%, var(--cream) 100%),
linear-gradient(180deg, rgba(244,237,224,0.6) 0%, transparent 30%, transparent 70%, rgba(244,237,224,0.85) 100%);
z-index: 2;
pointer-events: none;
}
/* Logo — multiply blend so any leftover white pixels disappear into cream */
.hero-mark .hero-logo {
width: clamp(280px, 42vw, 640px) !important;
height: auto !important;
display: block;
margin: 0 auto;
user-select: none;
mix-blend-mode: multiply;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
position: relative;
z-index: 5;
}
/* Hero tagline — small editorial line below logo */
.hero-mark .hero-tagline {
display: block;
margin-top: 28px;
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.55;
position: relative;
z-index: 5;
}
/* Animated scroll line affordance — Brian Lovin / Linear style */
.hero-mark .scroll-cue {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 5;
opacity: 0;
animation: fadeIn 1.2s ease 1.2s forwards;
}
.hero-mark .scroll-cue .scroll-text {
font-family: 'Geist Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.32em;
color: var(--ink);
opacity: 0.5;
}
.hero-mark .scroll-cue .scroll-line {
display: block;
width: 1px;
height: 36px;
background: var(--ink);
opacity: 0.3;
position: relative;
overflow: hidden;
}
.hero-mark .scroll-cue .scroll-line::after {
content: '';
position: absolute;
top: -36px;
left: 0;
width: 1px;
height: 36px;
background: var(--copper);
animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown {
0% { top: -36px; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 36px; opacity: 0; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* Marble close-up wash on modules — adds material depth */
.module::before {
background-image: url('ai-bg-marble.jpg') !important;
opacity: 0.06 !important;
filter: grayscale(0.4) brightness(1.2) !important;
}
/* Subtle paper grain noise across the whole page */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.04;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* Word-band — replace wood-grain with subtle marble */
.word-band::before {
background-image: url('ai-bg-marble.jpg') !important;
opacity: 0.05 !important;
filter: grayscale(0.5);
}
/* Path stage — use the soft kitchen */
.path-stage::before {
background-image: url('ai-bg-soft-kitchen.jpg') !important;
opacity: 0.10 !important;
filter: blur(2px);
}
/* Process stage — use the drawer overhead shot */
.process-stage::before {
background-image: url('ai-bg-drawer.jpg') !important;
opacity: 0.07 !important;
filter: brightness(0.6);
}
/* Testimonials — use the ceiling shot */
.testimonials-stage::before {
background-image: url('ai-bg-ceiling.jpg') !important;
opacity: 0.08 !important;
filter: grayscale(0.3) brightness(1.1);
}
/* Brands stage (dark) — use marble close-up tinted dark */
.brands-stage::before {
background-image: url('ai-bg-marble.jpg') !important;
opacity: 0.10 !important;
filter: brightness(0.4) saturate(0.5);
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
background-size: cover !important;
background-position: center !important;
}
/* Contact strip — use soft kitchen */
.contact-strip::before {
background-image: url('ai-bg-soft-kitchen.jpg') !important;
opacity: 0.08 !important;
filter: blur(1px);
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
background-size: cover !important;
background-position: center !important;
}
/* Index cream — give it a subtle marble */
.index-cream {
position: relative;
overflow: hidden;
}
.index-cream::before {
content: '';
position: absolute;
inset: 0;
background-image: url('ai-bg-marble.jpg');
background-size: cover;
opacity: 0.04;
filter: grayscale(1) brightness(1.4);
pointer-events: none;
z-index: 0;
}
.index-cream > * { position: relative; z-index: 1; }
/* Colophon dark — give it depth */
.colophon {
position: relative;
overflow: hidden;
}
.colophon::before {
content: '';
position: absolute;
inset: 0;
background-image: url('ai-bg-marble.jpg');
background-size: cover;
opacity: 0.06;
filter: brightness(0.3) saturate(0.6);
pointer-events: none;
z-index: 0;
}
.colophon > * { position: relative; z-index: 1; }
/* ============================================================
FINAL ADJUSTMENTS — let the bg image breathe through
============================================================ */
/* Make the soft-kitchen actually visible */
.hero-stage::before {
opacity: 0.45 !important;
filter: blur(8px) saturate(0.8) brightness(1.0) !important;
}
/* Less aggressive scrim — let the photo show through */
.hero-stage::after {
background:
radial-gradient(ellipse at center, rgba(244,237,224,0.15) 0%, rgba(244,237,224,0.5) 80%, rgba(244,237,224,0.7) 100%) !important;
}
/* Fix vertical centering — explicit min-height, ensure flex centering wins */
.hero-stage {
min-height: 100vh !important;
height: 100vh !important;
max-height: 100vh !important;
display: flex !important;
}
.hero-mark {
position: absolute !important;
inset: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
/* Logo a touch smaller, more elegant */
.hero-mark .hero-logo {
width: clamp(240px, 36vw, 540px) !important;
}
/* ============================================================
FINAL OVERRIDE — full hero ::before redefinition
============================================================ */
.hero-stage::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
background-image: url('ai-bg-soft-kitchen.jpg') !important;
background-size: cover !important;
background-position: center 60% !important;
background-repeat: no-repeat !important;
opacity: 0.55 !important;
filter: blur(10px) saturate(0.85) brightness(1.05) !important;
z-index: 1 !important;
pointer-events: none !important;
transform: none !important;
}
.hero-stage::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(ellipse at center, rgba(244,237,224,0.05) 0%, rgba(244,237,224,0.55) 90%) !important;
z-index: 2 !important;
pointer-events: none !important;
}
.hero-mark { z-index: 5 !important; }
/* Make body grain a touch more visible for that paper feel */
body::after {
opacity: 0.06 !important;
}
/* ============================================================
HERO CROSSFADE + KEN BURNS — Apple/Aesop/Mara pattern
4 slides crossfade every 7s with slow zoom, total loop 28s
============================================================ */
.hero-stage {
background: var(--cream) !important;
overflow: hidden !important;
position: relative;
}
.hero-slides {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
filter: blur(14px) saturate(0.8) brightness(1.05);
animation: heroFade 28s infinite, heroZoom 28s infinite;
will-change: opacity, transform;
}
.hero-slide:nth-child(1) { animation-delay: 0s, 0s; }
.hero-slide:nth-child(2) { animation-delay: 7s, 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s, 14s; }
.hero-slide:nth-child(4) { animation-delay: 21s, 21s; }
@keyframes heroFade {
0% { opacity: 0; }
3% { opacity: 0.55; }
25% { opacity: 0.55; }
28% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes heroZoom {
0% { transform: scale(1.0); }
28% { transform: scale(1.08); }
100% { transform: scale(1.08); }
}
/* Cream scrim layer over slides — keeps text readable */
.hero-scrim {
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(ellipse at center, rgba(244,237,224,0.05) 0%, rgba(244,237,224,0.55) 90%),
linear-gradient(180deg, rgba(244,237,224,0.3) 0%, transparent 30%, transparent 70%, rgba(244,237,224,0.4) 100%);
pointer-events: none;
}
/* Disable old ::before and ::after backgrounds since we now use real elements */
.hero-stage::before { content: none !important; display: none !important; }
.hero-stage::after { content: none !important; display: none !important; }
/* Hero mark on top of everything */
.hero-mark {
z-index: 5 !important;
}
/* Logo — entrance animation + isolation to kill any halo */
.hero-mark .hero-logo {
width: clamp(240px, 36vw, 540px) !important;
isolation: isolate;
mix-blend-mode: darken;
opacity: 0;
animation: logoIn 1.4s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
}
@keyframes logoIn {
from { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(4px); }
to { opacity: 1; transform: scale(1.0) translateY(0); filter: blur(0); }
}
.hero-mark .hero-tagline {
opacity: 0;
animation: taglineIn 1.4s ease 1.0s forwards;
}
@keyframes taglineIn {
from { opacity: 0; letter-spacing: 0.6em; }
to { opacity: 0.55; letter-spacing: 0.32em; }
}
.hero-mark .scroll-cue {
opacity: 0;
animation: scrollCueIn 1.0s ease 1.6s forwards;
}
@keyframes scrollCueIn { to { opacity: 1; } }
/* ============================================================
FIX CROSSFADE TIMING — ensure slides overlap, no gaps
28s cycle / 4 slides = 7s each
Slides have 2s fade-in + 5s hold + 2s fade-out = 9s visible
That gives 2s overlap between consecutive slides
============================================================ */
@keyframes heroFade {
0% { opacity: 0; }
7% { opacity: 0.6; } /* fade in (0-1.96s) */
25% { opacity: 0.6; } /* hold (1.96-7s) */
32% { opacity: 0; } /* fade out (7-8.96s) */
100% { opacity: 0; } /* stays hidden until next loop */
}
@keyframes heroZoom {
0% { transform: scale(1.0); }
32% { transform: scale(1.10); }
100% { transform: scale(1.10); }
}
/* Force the slides to be visible - belt and suspenders */
.hero-slide {
opacity: 0;
animation: heroFade 28s infinite ease-in-out, heroZoom 28s infinite ease-out !important;
}
.hero-slide:nth-child(1) { animation-delay: 0s, 0s !important; }
.hero-slide:nth-child(2) { animation-delay: 7s, 7s !important; }
.hero-slide:nth-child(3) { animation-delay: 14s, 14s !important; }
.hero-slide:nth-child(4) { animation-delay: 21s, 21s !important; }
/* ============================================================
LUXURY HOVER PATTERN — Aesop/Linear/Mara
On hover over any brand row or step:
- That item stays sharp & bright
- Sibling items dim and blur subtly
- Section background image fades in to match the hovered item
============================================================ */
/* Stage background image layer (added via JS) */
.brands-stage,
.process-stage {
position: relative;
overflow: hidden;
}
.brands-stage .stage-bg,
.process-stage .stage-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), background-image 0.5s ease;
filter: brightness(0.4) saturate(0.85) contrast(1.05);
z-index: 0;
pointer-events: none;
transform: scale(1.05);
will-change: opacity, background-image;
}
.brands-stage.hover-active .stage-bg,
.process-stage.hover-active .stage-bg {
opacity: 0.55;
}
/* Make sure stage content sits above the bg */
.brands-stage > .stage-head,
.brands-stage > .grid,
.process-stage > .stage-head,
.process-stage > .steps {
position: relative;
z-index: 2;
}
/* Brand grid hover behavior — dim & blur others, brighten hovered */
.brands-stage .grid {
transition: opacity 0.3s;
}
.brands-stage .grid:hover .brand-row {
opacity: 0.28;
filter: blur(1.4px);
transition: opacity 0.4s ease, filter 0.4s ease, padding 0.4s ease, background 0.4s ease;
}
.brands-stage .grid:hover .brand-row:hover {
opacity: 1 !important;
filter: blur(0) !important;
background: rgba(244,237,224,0.06) !important;
}
.brands-stage .grid:hover .brand-row:hover h3 {
color: var(--copper) !important;
transition: color 0.35s ease;
}
/* Process steps hover behavior */
.process-stage .steps:hover .step {
opacity: 0.32;
filter: blur(1.4px);
transition: opacity 0.4s ease, filter 0.4s ease;
}
.process-stage .steps:hover .step:hover {
opacity: 1 !important;
filter: blur(0) !important;
}
.process-stage .steps:hover .step:hover h3 {
color: var(--copper) !important;
transition: color 0.35s ease;
}
/* When hover-active, dim the section heading slightly so attention goes to the rows */
.brands-stage.hover-active .stage-head,
.process-stage.hover-active .stage-head {
opacity: 0.6;
transition: opacity 0.4s ease;
}
/* ============================================================
READABILITY FIX FOR HOVER STATE
When bg image is showing, darken it heavily and switch text to cream
============================================================ */
/* Process stage was cream — now flips to dark+image when hover active */
.process-stage.hover-active .stage-bg {
filter: brightness(0.28) saturate(0.7) contrast(1.05) !important;
opacity: 0.92 !important;
}
.process-stage.hover-active .stage-head h2 {
color: var(--cream) !important;
transition: color 0.4s ease;
}
.process-stage.hover-active .stage-head .label {
color: var(--copper) !important;
opacity: 1 !important;
transition: color 0.4s ease, opacity 0.4s ease;
}
.process-stage.hover-active .step h3 {
color: rgba(244,237,224,0.45) !important;
transition: color 0.4s ease;
}
.process-stage.hover-active .step p {
color: rgba(244,237,224,0.35) !important;
transition: color 0.4s ease;
}
.process-stage.hover-active .step .num {
color: rgba(188,109,58,0.7) !important;
transition: color 0.4s ease;
}
.process-stage.hover-active .step {
border-color: rgba(244,237,224,0.18) !important;
}
/* Hovered step inside hover-active stage = bright cream */
.process-stage.hover-active .step:hover h3 {
color: var(--cream) !important;
}
.process-stage.hover-active .step:hover p {
color: rgba(244,237,224,0.88) !important;
}
.process-stage.hover-active .step:hover .num {
color: var(--copper) !important;
}
/* Reduce blur amount — too much blur creates visual mud */
.process-stage .steps:hover .step {
filter: blur(0.6px) !important;
}
.brands-stage .grid:hover .brand-row {
filter: blur(0.6px) !important;
}
/* Brands stage was already dark — but needs darker image when hovered for text contrast */
.brands-stage.hover-active .stage-bg {
filter: brightness(0.22) saturate(0.7) contrast(1.05) !important;
opacity: 0.92 !important;
}
.brands-stage.hover-active .stage-head h2 {
color: var(--cream) !important;
opacity: 1 !important;
}
.brands-stage.hover-active .brand-row h3 {
color: rgba(244,237,224,0.45);
transition: color 0.4s ease;
}
.brands-stage.hover-active .brand-row .series {
color: rgba(244,237,224,0.3);
}
.brands-stage.hover-active .brand-row:hover h3 {
color: var(--cream) !important;
}
.brands-stage.hover-active .brand-row:hover .series {
color: rgba(244,237,224,0.85) !important;
}
.brands-stage.hover-active .brand-row:hover .num {
color: var(--copper) !important;
}
/* Add a soft vignette over the bg so center text is readable */
.process-stage .stage-bg::after,
.brands-stage .stage-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.35) 100%);
pointer-events: none;
}
/* ============================================================
TESTIMONIAL HOVER — subtle bg around each individual card
Image only fades in around its own card on hover, not full section
============================================================ */
.testimonial {
position: relative;
padding: 28px 24px 28px;
margin: 0 -24px 0; /* slightly extend hover zone */
transition: padding 0.4s ease, background 0.4s ease;
isolation: isolate;
}
/* Each testimonial gets its own bg layer via ::before */
.testimonial::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--card-bg);
background-size: cover;
background-position: center;
opacity: 0;
filter: brightness(0.55) saturate(0.85);
z-index: -1;
transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
border-radius: 0;
pointer-events: none;
}
/* Soft vignette mask — bg only shows around the card edges, not behind text */
.testimonial::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(244,237,224,0.85) 0%, rgba(244,237,224,0.65) 50%, rgba(244,237,224,0.3) 100%);
opacity: 0;
z-index: -1;
transition: opacity 0.5s ease;
pointer-events: none;
}
.testimonial[data-bg]:hover::before {
opacity: 0.6;
}
.testimonial[data-bg]:hover::after {
opacity: 1;
}
/* On hover the card visibly lifts a bit */
.testimonial[data-bg]:hover {
padding-left: 32px;
padding-right: 32px;
}
/* Set the CSS variable for each card */
.testimonial[data-bg] { --card-bg: none; }
/* ============================================================
NIGHTFALL — scroll-driven tonal shift from light to dark
Uses modern CSS scroll-driven animations with JS fallback
============================================================ */
.nightfall {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 998;
background: linear-gradient(
180deg,
rgba(13, 12, 10, var(--nightfall-top, 0)) 0%,
rgba(13, 12, 10, var(--nightfall-bottom, 0)) 100%
);
mix-blend-mode: multiply;
transition: --nightfall-top 0.1s linear, --nightfall-bottom 0.1s linear;
}
@property --nightfall-top {
syntax: '';
inherits: true;
initial-value: 0;
}
@property --nightfall-bottom {
syntax: '';
inherits: true;
initial-value: 0;
}
/* Modern: CSS scroll-driven animation */
@supports (animation-timeline: scroll()) {
.nightfall {
animation: nightfall-shift linear both;
animation-timeline: scroll(root);
}
@keyframes nightfall-shift {
0% { --nightfall-top: 0; --nightfall-bottom: 0; }
25% { --nightfall-top: 0.02; --nightfall-bottom: 0.10; }
50% { --nightfall-top: 0.08; --nightfall-bottom: 0.30; }
75% { --nightfall-top: 0.20; --nightfall-bottom: 0.55; }
100% { --nightfall-top: 0.45; --nightfall-bottom: 0.78; }
}
}
/* Also subtly darken the body background tone */
@supports (animation-timeline: scroll()) {
html {
animation: page-nightfall linear both;
animation-timeline: scroll(root);
}
@keyframes page-nightfall {
0% { background-color: #f4ede0; } /* dawn cream */
50% { background-color: #d4c5a8; } /* warm taupe */
100% { background-color: #2a241e; } /* dusk dark */
}
}
/* ============================================================
STRONGER NIGHTFALL — dim all content as you scroll
Add brightness/saturation filter ramp on body
============================================================ */
@supports (animation-timeline: scroll()) {
body {
animation: body-dim linear both;
animation-timeline: scroll(root);
}
@keyframes body-dim {
0% { filter: brightness(1.0) saturate(1.0); }
35% { filter: brightness(0.95) saturate(0.95); }
65% { filter: brightness(0.7) saturate(0.85); }
100% { filter: brightness(0.45) saturate(0.7); }
}
}
/* Make the overlay heavier and warmer for a deeper dusk feel */
@supports (animation-timeline: scroll()) {
.nightfall {
animation: nightfall-shift linear both;
animation-timeline: scroll(root);
}
@keyframes nightfall-shift {
0% { --nightfall-top: 0; --nightfall-bottom: 0; }
25% { --nightfall-top: 0.05; --nightfall-bottom: 0.20; }
50% { --nightfall-top: 0.18; --nightfall-bottom: 0.50; }
75% { --nightfall-top: 0.40; --nightfall-bottom: 0.78; }
100% { --nightfall-top: 0.65; --nightfall-bottom: 0.90; }
}
}
/* Make sure the nightfall sits above content */
.nightfall {
z-index: 9999 !important;
}
/* ============================================================
REVERT global dimming — use per-element view() timeline
Each testimonial image dims on its own as it scrolls past
============================================================ */
/* Cancel the body-wide brightness ramp */
@supports (animation-timeline: scroll()) {
body {
animation: none !important;
filter: none !important;
}
html {
animation: none !important;
background-color: var(--cream) !important;
}
}
/* Soften the .nightfall overlay way down — just a hint of warm evening */
.nightfall {
z-index: 998 !important;
}
@supports (animation-timeline: scroll()) {
.nightfall {
animation: nightfall-soft linear both;
animation-timeline: scroll(root);
}
@keyframes nightfall-soft {
0% { --nightfall-top: 0; --nightfall-bottom: 0; }
100% { --nightfall-top: 0.10; --nightfall-bottom: 0.20; }
}
}
/* ============================================================
PER-TESTIMONIAL VIEW-DRIVEN DARKENING
As each testimonial passes through the viewport, its image
starts bright (entry) and darkens (exit). View-timeline.
============================================================ */
.testimonial[data-bg] {
/* baseline: image bg at low opacity always visible (not just hover) */
position: relative;
isolation: isolate;
}
.testimonial[data-bg]::before {
content: '';
position: absolute;
inset: -8px -16px;
background-image: var(--card-bg);
background-size: cover;
background-position: center;
opacity: 0.55;
z-index: -1;
filter: brightness(1.05) saturate(0.95);
transition: opacity 0.4s ease;
}
/* Soft cream vignette mask so text stays readable over the image */
.testimonial[data-bg]::after {
content: '';
position: absolute;
inset: -8px -16px;
background: radial-gradient(ellipse at center, rgba(244,237,224,0.6) 0%, rgba(244,237,224,0.35) 60%, rgba(244,237,224,0.15) 100%);
z-index: -1;
pointer-events: none;
}
/* The actual room-darkens-as-you-pan effect */
@supports (animation-timeline: view()) {
.testimonial[data-bg]::before {
animation: room-dim linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes room-dim {
0% { filter: brightness(1.15) saturate(1.1); } /* enters bright — full daylight */
35% { filter: brightness(1.0) saturate(1.0); } /* normal */
65% { filter: brightness(0.7) saturate(0.85); } /* dimming */
100% { filter: brightness(0.35) saturate(0.7); } /* exits dark — evening */
}
}
/* Hover boost — image becomes more visible on hover */
.testimonial[data-bg]:hover::before {
opacity: 0.85;
}
.testimonial[data-bg]:hover::after {
opacity: 0.55;
background: radial-gradient(ellipse at center, rgba(244,237,224,0.35) 0%, rgba(244,237,224,0.15) 70%, rgba(244,237,224,0.05) 100%);
}
/* Same per-element lighting effect on full-bleed photo sections */
@supports (animation-timeline: view()) {
.photo-bleed {
animation: room-dim linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
/* ============================================================
GALLERY STRIP — 3-tile composition (tall + 2 stacked)
============================================================ */
.gallery-strip-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
grid-template-rows: 1fr 1fr !important;
gap: 8px !important;
max-width: 1080px;
margin: 0 auto;
}
.gallery-strip-grid .tile {
aspect-ratio: auto !important;
min-height: 240px;
}
.gallery-strip-grid .tile.tall {
grid-row: span 2 !important;
aspect-ratio: auto !important;
min-height: 100%;
}
@media (max-width: 720px) {
.gallery-strip-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.gallery-strip-grid .tile.tall { grid-row: auto !important; }
.gallery-strip-grid .tile { aspect-ratio: 4/3 !important; min-height: 0 !important; }
}
/* ============================================================
HOVER ZOOM — Ken Burns effect on every image element
Smooth scale-up on hover for premium tactile feel
============================================================ */
/* Gallery strip tiles — zoom the bg image on hover */
.gallery-strip-grid .tile {
overflow: hidden;
position: relative;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
background-position: center;
cursor: pointer;
}
.gallery-strip-grid .tile {
transition: background-size 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
background-size: 105% !important;
}
.gallery-strip-grid .tile:hover {
background-size: 122% !important;
}
/* Module figure images — zoom on hover of the figure card */
.module-figure { overflow: hidden; }
.module-figure .img-wrap {
overflow: hidden;
}
.module-figure .img-wrap img {
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
transform-origin: center;
}
.module-figure:hover .img-wrap img {
transform: scale(1.08);
filter: brightness(1.05) saturate(1.05);
}
/* Testimonial bg image — zoom up on card hover */
.testimonial[data-bg]::before {
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, filter 0.6s ease !important;
transform-origin: center;
}
.testimonial[data-bg]:hover::before {
transform: scale(1.10);
opacity: 0.92 !important;
}
/* Brand row hover — the stage-bg also zooms */
.brands-stage .stage-bg,
.process-stage .stage-bg {
transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), background-image 0.5s ease !important;
}
.brands-stage.hover-active .stage-bg,
.process-stage.hover-active .stage-bg {
transform: scale(1.10) !important;
}
/* Photo-bleed full-bleed sections — slow zoom on hover */
.photo-bleed {
transition: background-size 1.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
background-size: cover !important;
}
.photo-bleed:hover {
background-size: 110% !important;
}
/* Hero slides ALREADY have Ken Burns zoom on the auto-cycle, leave them */
/* Brand row item — slightly highlight on hover (bg image already zooms via stage-bg) */
.brands-stage .brand-row {
position: relative;
overflow: hidden;
}
.brands-stage .brand-row::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(188,109,58,0.04), transparent);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.brands-stage .brand-row:hover::after {
opacity: 1;
}
/* Process step — also gets the same shimmer */
.process-stage .step {
position: relative;
overflow: hidden;
}
.process-stage .step::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(188,109,58,0.04), transparent);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.process-stage .step:hover::after {
opacity: 1;
}
/* ============================================================
TESTIMONIAL — quote-first; portrait reveals on hover
Sequence:
0.0s hover begins, empty circle outline draws in
1.0s customer photo fades into the circle
2.5s the OTHER testimonial cards blur, focusing this one
============================================================ */
/* Editorial layout — quote takes the full card; circle sits in reserved gutter */
.testimonial[data-bg] {
position: relative;
padding: 32px 28px 32px 28px;
margin: 0;
isolation: isolate;
min-height: 200px;
transition: filter 0.6s cubic-bezier(0.22,1,0.36,1) 0s,
opacity 0.6s cubic-bezier(0.22,1,0.36,1) 0s;
}
/* Reserve space on the left so the circle reveal does NOT shift layout */
.testimonial[data-bg]:hover {
padding-left: 156px;
}
/* CIRCLE OUTLINE (::before) — drawn in first, no image inside */
.testimonial[data-bg]::before {
content: '';
position: absolute;
left: 24px;
top: 32px;
width: 110px;
height: 110px;
background: transparent;
background-image: none !important;
border-radius: 50%;
border: 1px solid rgba(13,12,10,0.32);
opacity: 0;
transform: scale(0.82);
inset: auto !important;
filter: none !important;
z-index: 2;
pointer-events: none;
transition: opacity 0.55s ease 0s,
transform 0.65s cubic-bezier(0.22,1,0.36,1) 0s,
border-color 0.4s ease 0s;
}
/* PORTRAIT (::after) — sits inside circle, fades in 1 second AFTER the outline */
.testimonial[data-bg]::after {
content: '';
position: absolute;
left: 24px;
top: 32px;
width: 110px;
height: 110px;
background-image: var(--card-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
opacity: 0;
transform: scale(0.78);
filter: brightness(1.0) saturate(1.0);
inset: auto !important;
-webkit-mask-image: none;
mask-image: none;
z-index: 3;
pointer-events: none;
box-shadow: 0 8px 24px rgba(13,12,10,0);
transition: opacity 0.7s ease 1s,
transform 0.8s cubic-bezier(0.22,1,0.36,1) 1s,
box-shadow 0.6s ease 1s;
}
/* HOVER — circle outline appears immediately, portrait blooms 1s later */
.testimonial[data-bg]:hover::before {
opacity: 1;
transform: scale(1);
border-color: rgba(13,12,10,0.45);
}
.testimonial[data-bg]:hover::after {
opacity: 1;
transform: scale(1);
box-shadow: 0 12px 32px rgba(13,12,10,0.16);
}
/* Quote sits above (no halo background — circle does the work) */
.testimonial .stars,
.testimonial .quote,
.testimonial .who {
position: relative;
z-index: 1;
}
/* SIBLINGS BLUR — the moment one card is hovered, others soften ~2.5s later
so the active card becomes the focal point of the section */
.testimonials-stage .grid:has(.testimonial[data-bg]:hover) .testimonial:not(:hover) {
filter: blur(2.5px) saturate(0.85);
opacity: 0.42;
transition: filter 1.4s cubic-bezier(0.22,1,0.36,1) 2.5s,
opacity 1.4s cubic-bezier(0.22,1,0.36,1) 2.5s;
}
/* Mobile — circle stacks above the quote on hover */
@media (max-width: 720px) {
.testimonial[data-bg]:hover {
padding-left: 28px;
padding-top: 156px;
}
.testimonial[data-bg]::before,
.testimonial[data-bg]::after {
left: 24px;
top: 24px;
width: 96px;
height: 96px;
}
}
/* ============================================================
TYPEWRITER ANIMATION — body text types out live with typos
============================================================ */
.typewriter {
position: relative;
white-space: pre-wrap;
min-height: 1.5em;
}
.typewriter.is-typing::after {
content: '|';
display: inline-block;
margin-left: 2px;
font-weight: 300;
color: var(--copper);
animation: caret-blink 0.85s steps(2) infinite;
transform: translateY(0.05em);
}
@keyframes caret-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Subtle highlight when actively typing — a copper underline at the end */
.typewriter.is-typing {
border-right: none;
}
/* When done typing, leave a subtle "saved" feel — fade to settled state */
.typewriter.typed-done {
animation: typed-settle 1s ease both;
}
@keyframes typed-settle {
0% { opacity: 0.92; }
100% { opacity: 1; }
}
/* ============================================================
WALNUT PROGRESSION — 4 daylight stages crossfade
night -> dawn -> golden hour -> full day, 32s loop
Each slide visible 8s with 2s crossfade overlap to next
============================================================ */
.photo-bleed.walnut-progression {
background-image: none !important;
position: relative;
overflow: hidden;
}
.walnut-progression .walnut-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
z-index: 0;
animation: walnut-progression 32s infinite cubic-bezier(0.4,0,0.6,1);
will-change: opacity;
}
.walnut-progression .walnut-slide:nth-child(1) { animation-delay: 0s; }
.walnut-progression .walnut-slide:nth-child(2) { animation-delay: 8s; }
.walnut-progression .walnut-slide:nth-child(3) { animation-delay: 16s; }
.walnut-progression .walnut-slide:nth-child(4) { animation-delay: 24s; }
@keyframes walnut-progression {
0% { opacity: 0; }
6% { opacity: 1; }
25% { opacity: 1; }
31% { opacity: 0; }
100% { opacity: 0; }
}
/* Caption sits above the slides */
.walnut-progression .caption {
z-index: 3;
}
.walnut-progression::after {
z-index: 2;
}
/* ============================================================
WALNUT ROOM — single image, scroll-driven brightness ramp
Image stays identical (pixel-perfect composition), only its
exposure progresses from night → dawn → morning → full day
as the user scrolls THROUGH the section. One-way, no loop.
============================================================ */
.photo-bleed.walnut-room {
background: none !important;
background-image: none !important;
position: relative;
overflow: hidden;
}
.walnut-room .walnut-room-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
/* default state if scroll-timeline unsupported: bright daylight */
filter: brightness(1.05) saturate(1.05) contrast(1.0);
will-change: filter;
}
/* Scroll-driven progression — tied to the section's view position
As the section enters the viewport from the bottom, image is dark.
As it travels through, image brightens.
Once it has fully passed top, image is at full daylight.
Stays at full brightness (animation-fill: both keeps the final state) */
@supports (animation-timeline: view()) {
.walnut-room .walnut-room-img {
animation: walnut-sunrise linear both;
animation-timeline: view();
animation-range: entry 0% cover 80%;
}
@keyframes walnut-sunrise {
/* Section just entered from bottom — deep night */
0% {
filter: brightness(0.18) saturate(0.45) contrast(1.15) hue-rotate(-8deg);
}
/* Pre-dawn twilight */
25% {
filter: brightness(0.38) saturate(0.65) contrast(1.10) hue-rotate(-4deg);
}
/* Dawn — first warmth */
50% {
filter: brightness(0.65) saturate(0.85) contrast(1.05) hue-rotate(-2deg);
}
/* Golden morning */
75% {
filter: brightness(0.92) saturate(1.0) contrast(1.0);
}
/* Full midday — section is fully in view, lights of nature ON */
100% {
filter: brightness(1.15) saturate(1.08) contrast(1.0);
}
}
}
/* Caption sits above the image with its own layer */
.walnut-room .caption {
position: absolute;
z-index: 3;
bottom: 40px;
left: 40px;
color: var(--cream);
max-width: 540px;
}
.walnut-room::after {
/* Soft bottom gradient so caption stays readable as the image brightens */
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(0,0,0,0.35) 100%);
pointer-events: none;
}
/* ============================================================
FINAL OVERRIDE — walnut hero photo at full brightness, no animation
The room shows as a real premium product photo.
============================================================ */
@supports (animation-timeline: view()) {
.walnut-room .walnut-room-img {
animation: none !important;
filter: brightness(1.0) saturate(1.05) contrast(1.02) !important;
transition: none !important;
}
}
.walnut-room .walnut-room-img {
filter: brightness(1.0) saturate(1.05) contrast(1.02) !important;
transition: none !important;
}
.walnut-room { cursor: default !important; }
/* HERO WORDMARK — radial vignette behind the script logo so it pops over any photo */
.hero-stage::before {
background: radial-gradient(ellipse at 50% 50%,
rgba(13,12,10,0.55) 0%,
rgba(13,12,10,0.35) 35%,
rgba(13,12,10,0.10) 65%,
transparent 85%) !important;
opacity: 1 !important;
z-index: 1 !important;
}
/* Tighten word-bands — was 14vh+12vh = ~26vh, now half that */
.word-band {
padding: 7vh 24px 6vh !important;
}
/* ============================================================
FINAL OVERRIDE — testimonial staged-reveal hover
Wins over earlier !important rules at lines ~2141, 2146
============================================================ */
/* No outline-circle pseudo */
.testimonial[data-bg]::before {
content: none !important;
display: none !important;
}
/* PORTRAIT CIRCLE — floats in TOP-RIGHT corner of the card.
Absolutely positioned so it NEVER pushes the testimonial text.
Hidden by default, fades in on hover, slowly grows over 8s. */
.testimonial[data-bg]::after {
content: '' !important;
position: absolute !important;
right: 20px !important;
top: 20px !important;
left: auto !important;
bottom: auto !important;
width: 88px !important;
height: 88px !important;
border-radius: 50% !important;
background: var(--card-bg) center / cover no-repeat !important;
background-color: rgba(232,225,211,0.30) !important;
border: 1px solid rgba(13,12,10,0.18) !important;
opacity: 0 !important;
transform: scale(0.85) !important;
transform-origin: top right !important;
filter: brightness(1) saturate(1) !important;
inset: auto !important;
-webkit-mask-image: none !important;
mask-image: none !important;
z-index: 3 !important;
pointer-events: none !important;
box-shadow: 0 8px 24px rgba(13,12,10,0);
transition: opacity 0.45s ease,
transform 0.5s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s ease,
background-color 0.4s ease !important;
animation: none !important;
}
/* HOVER — portrait fades in then slowly grows from 88px → ~140px
over 8 seconds, anchored to the top-right corner so it expands
DOWN-LEFT toward the quote without the text moving. */
.testimonial[data-bg]:hover::after,
.testimonial[data-bg].is-hovered::after {
opacity: 1 !important;
transform: scale(1.6) !important;
background-color: rgba(232,225,211,0) !important;
box-shadow: 0 14px 36px rgba(13,12,10,0.22) !important;
border-color: rgba(13,12,10,0.32) !important;
transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1) 0s,
background-color 0.7s ease 0.6s,
transform 8s linear 0s,
box-shadow 1s ease 0.5s,
border-color 0.6s ease 0.3s !important;
}
/* Layout: padding NEVER changes on hover — text stays put.
The circle floats as an absolute overlay, doesn't push content. */
.testimonial[data-bg] {
padding: 32px 28px !important;
transition: filter 0.6s cubic-bezier(0.22,1,0.36,1),
opacity 0.6s cubic-bezier(0.22,1,0.36,1) !important;
}
/* Siblings blur 2.5s after hover settles — both :has() and JS-class paths */
.testimonials-stage .grid:has(.testimonial[data-bg]:hover) .testimonial:not(:hover),
.testimonials-stage.has-hover .grid .testimonial:not(.is-hovered) {
filter: blur(2.5px) saturate(0.85) !important;
opacity: 0.42 !important;
transition: filter 1.4s cubic-bezier(0.22,1,0.36,1) 2.5s,
opacity 1.4s cubic-bezier(0.22,1,0.36,1) 2.5s !important;
}
@media (max-width: 720px) {
.testimonial[data-bg]:hover {
padding-left: 28px !important;
padding-top: 156px !important;
}
.testimonial[data-bg]::before,
.testimonial[data-bg]::after {
left: 24px !important;
top: 24px !important;
width: 96px !important;
height: 96px !important;
}
}
/* ============================================================
FINISH-MORPH HERO — same room, materials change on scroll
Each layer is a stack: the SAME source photo + a color tint
overlay tuned to a brand finish (cabinet/counter/light story).
The sink, windows, island layout, walls all stay identical
because every layer renders the same source image underneath.
============================================================ */
/* (removed: whole-page fixed finish-morph stage and body-black background) */
/* Caption: pin to bottom-left, add finish-name ticker */
.walnut-room.finish-morph .caption {
position: absolute !important;
left: 48px;
bottom: 48px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 18px;
color: #f7f2e6;
text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.walnut-room.finish-morph .caption .caption-label {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: lowercase;
opacity: 0.85;
}
.walnut-room.finish-morph .caption .big {
font-family: 'Instrument Sans', sans-serif;
font-size: clamp(40px, 5vw, 78px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.02em;
}
.walnut-room.finish-morph .caption .finish-name {
margin-top: 12px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: lowercase;
color: #d6b985; /* copper, from brand palette */
border-left: 2px solid #d6b985;
padding-left: 14px;
transition: color 0.4s ease;
}
/* ============================================================
AMBIENT-BACKDROP HOVER — site-wide
On hover of any image element, a larger, blurred copy of
the same image fades in BEHIND the image as a soft halo, and
the foreground image slowly grows the longer the hover holds.
The element gets `--ambient-bg: url(...)` set via JS at boot.
============================================================ */
/* Targets that opt in to the ambient effect */
.module-figure .img-wrap,
.gallery-strip .tile,
.brands-stage .brand-row,
.process-stage .step,
.ambient-img {
position: relative;
isolation: isolate;
overflow: visible !important;
}
/* The blurred halo behind */
.module-figure .img-wrap::after,
.gallery-strip .tile::after,
.brands-stage .brand-row::after,
.process-stage .step::after,
.ambient-img::after {
content: '';
position: absolute;
inset: -8%;
background-image: var(--ambient-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(36px) saturate(1.18) brightness(1.05);
opacity: 0;
transform: scale(1.2);
transform-origin: center;
z-index: -1;
pointer-events: none;
border-radius: inherit;
transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
transform 1.4s cubic-bezier(0.22,1,0.36,1);
will-change: opacity, transform;
}
/* On hover: halo fades in immediately, then slowly inflates over 8s */
.module-figure .img-wrap:hover::after,
.gallery-strip .tile:hover::after,
.brands-stage .brand-row:hover::after,
.process-stage .step:hover::after,
.ambient-img:hover::after {
opacity: 0.62;
transform: scale(1.55);
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1) 0s,
transform 8s linear 0s;
}
/* Foreground image grows slowly the longer you hover */
.module-figure .img-wrap > img,
.gallery-strip .tile,
.brands-stage .brand-row,
.process-stage .step {
transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
filter 0.7s ease;
}
.module-figure .img-wrap:hover > img {
transform: scale(1.06);
transition: transform 8s linear 0s;
}
.gallery-strip .tile:hover {
transform: scale(1.05);
transition: transform 8s linear 0s;
}
/* Existing brand-row / step hover-bg systems already trigger their own
highlight behavior — the ambient halo just adds atmosphere. Keep their
text legible by making sure the halo sits BEHIND the row content. */
.brands-stage .brand-row > *,
.process-stage .step > * {
position: relative;
z-index: 1;
}
/* Re-enable overflow-hidden on tiles so the image inside doesn't leak,
while the ::after halo escapes via inset:-8% + blur */
.gallery-strip .tile {
overflow: hidden !important;
}
.gallery-strip .tile::after {
inset: -25%;
filter: blur(48px) saturate(1.2) brightness(1.08);
}
/* ============================================================
PATH-CARD TOOLTIPS — bubble explainer per bullet on hover
Best-practice tooltip per Steve Schoger / Refactoring UI:
- 280px max-width for readability
- 350ms appear delay so quick mouseover doesn't trigger
- Smooth fade + tiny slide up
- Arrow pointing back to source
- Dark surface, cream text — matches palette
============================================================ */
.path-card li[data-tip] {
position: relative;
cursor: help;
transition: color 0.25s ease, padding-left 0.4s cubic-bezier(0.22,1,0.36,1);
}
.path-card li[data-tip]:hover {
color: var(--ink, #0d0c0a);
padding-left: 12px;
}
/* The bubble itself */
.path-card li[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 14px);
transform: translateX(-50%) translateY(8px) scale(0.96);
width: max-content;
max-width: 280px;
padding: 14px 18px;
background: #1a1815;
color: #f7f2e6;
font-family: 'Instrument Sans', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(13,12,10,0.28),
0 2px 6px rgba(13,12,10,0.18);
white-space: normal;
text-align: left;
pointer-events: none;
opacity: 0;
visibility: hidden;
z-index: 50;
transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1) 0.35s,
transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.35s,
visibility 0s linear 0.7s;
}
/* Arrow pointing down at the bullet */
.path-card li[data-tip]::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%) translateY(8px) rotate(45deg);
width: 10px;
height: 10px;
background: #1a1815;
border-radius: 2px;
pointer-events: none;
opacity: 0;
visibility: hidden;
z-index: 51;
transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1) 0.35s,
transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.35s,
visibility 0s linear 0.7s;
}
.path-card li[data-tip]:hover::after,
.path-card li[data-tip]:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
transition-delay: 0.35s, 0.35s, 0s;
}
.path-card li[data-tip]:hover::before {
transform: translateX(-50%) translateY(0) rotate(45deg);
}
/* Edge guards: don't let bubble flow off screen on the outermost bullets.
First/last cards' bullets nudge their tooltip toward center. */
.path-stage .path-card:first-child li[data-tip]::after,
.path-stage .path-card:first-child li[data-tip]::before {
left: 0;
transform-origin: 0 100%;
transform: translateX(0) translateY(8px) scale(0.96);
}
.path-stage .path-card:first-child li[data-tip]:hover::after,
.path-stage .path-card:first-child li[data-tip]:hover::before {
transform: translateX(0) translateY(0) scale(1);
}
.path-stage .path-card:first-child li[data-tip]:hover::before {
transform: translateX(20px) translateY(0) rotate(45deg);
}
/* ============================================================
DWELL-BLUR — after 10s on the same target, blur the rest of
the page so the active item becomes the focal point.
Refokus/Locomotive principle: the longer the user dwells,
the more the world fades around them. Reversible on mouse-out.
============================================================ */
body.dwell-blur > *:not(.dwell-focus-region) {
filter: blur(4px) saturate(0.85);
opacity: 0.55;
transition: filter 1.4s cubic-bezier(0.22,1,0.36,1),
opacity 1.4s cubic-bezier(0.22,1,0.36,1);
}
body > * {
transition: filter 0.6s cubic-bezier(0.22,1,0.36,1),
opacity 0.6s cubic-bezier(0.22,1,0.36,1);
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
.path-card li[data-tip]::after,
.path-card li[data-tip]::before {
transition: opacity 0.15s ease, visibility 0s linear !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
}
body.dwell-blur > *:not(.dwell-focus-region) {
filter: none !important;
opacity: 1 !important;
}
}