/* LiveWell master page styles (index.html and 404.html).
base.css, imported below, holds the shared components and design tokens. */
@import url('base.css');
/* ===== Nav - master variant ===== */
.master-nav .lw-nav-logo img { height: 36px; }
/* ===== Hero ===== */
.master-hero { padding-top: 56px; padding-bottom: 80px; position: relative; overflow: hidden; }
.master-hero-grid {
display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end;
}
@media (min-width: 900px) {
.master-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: end; }
}
.master-hero-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.75rem, 5.6vw + 1rem, 6rem);
line-height: 1.02; letter-spacing: -0.018em;
margin: 0 0 28px; text-wrap: balance;
}
.master-hero-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-hero-lede {
font-family: var(--font-sans); font-size: 20px; line-height: 1.6; color: var(--fg-2);
max-width: 580px; margin: 0 0 36px;
}
.master-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }
.master-hero-foot {
display: flex; flex-wrap: wrap; gap: 36px;
padding-top: 28px; border-top: 1px solid var(--border-soft);
font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
letter-spacing: 0.16em; text-transform: uppercase;
}
.master-hero-foot strong { color: var(--fg-1); font-weight: 400; font-family: var(--font-serif); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; }
.master-hero-image {
position: relative; border-radius: var(--r-sm); overflow: hidden;
aspect-ratio: 4 / 5; background: var(--lw-sage);
}
.master-hero-image img {
width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
filter: saturate(0.94) brightness(0.97);
}
.master-hero-image-tag {
position: absolute; bottom: 24px; left: 24px;
background: color-mix(in oklab, var(--lw-fog) 88%, transparent);
color: var(--lw-whisper); padding: 10px 18px; border-radius: var(--r-pill);
font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
backdrop-filter: blur(8px);
}
/* ===== Stat strip ===== */
.master-stats {
display: grid; grid-template-columns: 1fr;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 900px) { .master-stats { grid-template-columns: repeat(3, 1fr); } }
.master-stat {
padding: 32px 28px;
border-left: 1px solid var(--border-soft);
display: flex; flex-direction: column; gap: 6px;
}
.master-stat:first-child { border-left: 0; }
/* Three stats: one column with rules between them on narrow screens, three across from 900px. */
@media (max-width: 899px) {
.master-stat { border-left: 0; }
.master-stat + .master-stat { border-top: 1px solid var(--border-soft); }
}
.master-stat .n {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.25rem, 2.4vw + 1rem, 3rem);
letter-spacing: -0.02em; line-height: 1; color: var(--fg-1);
}
.master-stat .n em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.7em; }
.master-stat .lbl {
font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3); margin-top: 16px;
}
.master-stat .desc { font-family: var(--font-serif); font-style: italic; font-size: 15.5px; color: var(--fg-2); margin-top: 2px; }
/* ===== About / Vision ===== */
.master-about-grid {
display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center;
}
@media (min-width: 900px) {
.master-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 80px; }
}
.master-about-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2rem, 2.6vw + 1rem, 3.25rem);
line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 28px; text-wrap: balance;
}
.master-about-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-about-body p {
font-family: var(--font-sans); font-size: 17.5px; line-height: 1.7; color: var(--fg-2);
margin: 0 0 22px; max-width: 580px;
}
.master-about-body p:last-child { margin-bottom: 0; }
.master-about-body strong { color: var(--fg-1); font-weight: 400; font-family: var(--font-serif); font-style: italic; }
.master-about-image {
aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--shadow-2);
}
.master-about-image img {
width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
filter: saturate(0.94) brightness(0.98);
transition: transform var(--t-slow) var(--ease-out);
}
.master-about-image:hover img { transform: scale(1.02); }
/* ===== Pillars (Precinct Model) ===== */
.master-pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--r-sm); overflow: hidden; }
@media (min-width: 720px) { .master-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .master-pillars { grid-template-columns: repeat(4, 1fr); } }
.master-pillar {
background: var(--lw-whisper);
padding: 48px 36px 44px;
display: flex; flex-direction: column; gap: 16px;
position: relative;
transition: background var(--t-base) var(--ease-out);
}
.master-pillar:hover { background: var(--lw-light); }
.master-pillar .num {
font-family: var(--font-sans); font-weight: 400; font-size: 12px;
letter-spacing: 0.2em; color: var(--fg-3); text-transform: uppercase;
display: flex; align-items: center; gap: 10px;
}
.master-pillar .num::before { content: ''; width: 14px; height: 1px; background: var(--fg-3); }
.master-pillar .name {
font-family: var(--font-display); font-weight: 300; font-size: 34px;
letter-spacing: -0.012em; color: var(--fg-1); line-height: 1.08;
}
.master-pillar .name em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-pillar .desc {
font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--fg-2);
}
.master-pillar .examples {
margin-top: 6px;
font-family: var(--font-serif); font-style: italic; font-size: 14.5px; color: var(--fg-3);
display: flex; flex-wrap: wrap; gap: 6px;
}
.master-pillar .examples span::after { content: ' ·'; margin-left: 4px; color: color-mix(in oklab, var(--fg-3) 50%, transparent); }
.master-pillar .examples span:last-child::after { content: ''; }
/* ===== Photo interlude (full-width photo band) ===== */
.master-photo-interlude {
position: relative;
height: clamp(380px, 56vh, 580px);
overflow: hidden;
background: var(--lw-fog);
}
.master-photo-interlude > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
filter: saturate(0.92) brightness(0.96);
}
.master-photo-interlude::before {
content: ''; position: absolute; inset: 0;
background: rgba(47, 55, 47, 0.22);
}
.master-photo-interlude::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(47,55,47,0) 30%, rgba(47,55,47,0.7) 100%);
}
.master-photo-interlude-inner {
position: relative; z-index: 1;
height: 100%;
display: flex; align-items: flex-end;
padding-bottom: 56px;
}
.master-photo-interlude-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em;
text-transform: uppercase; color: color-mix(in oklab, white 78%, transparent);
margin-bottom: 14px;
}
.master-photo-interlude-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--lw-whisper);
}
.master-photo-interlude-quote {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2rem, 4.4vw + 1rem, 4.25rem);
line-height: 1.02; letter-spacing: -0.022em;
margin: 0; max-width: 20ch; text-wrap: balance;
color: var(--lw-whisper);
}
.master-photo-interlude-quote em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-photo-interlude-tag {
position: absolute; right: 32px; top: 28px;
background: color-mix(in oklab, var(--lw-whisper) 86%, transparent);
padding: 8px 16px; border-radius: var(--r-pill);
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-1);
backdrop-filter: blur(8px);
}
@media (min-width: 1100px) { .master-photo-interlude-tag { right: 72px; } }
/* ===== Partner section - feature image at top ===== */
.master-partner-feature {
position: relative;
margin-bottom: 56px;
border-radius: var(--r-md);
overflow: hidden;
aspect-ratio: 21 / 10;
background: var(--lw-sage);
box-shadow: var(--shadow-2);
}
.master-partner-feature img {
width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
transition: transform var(--t-slow) var(--ease-out);
}
.master-partner-feature:hover img { transform: scale(1.02); }
.master-partner-feature::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(47,55,47,0.55) 0%, rgba(47,55,47,0.20) 40%, rgba(47,55,47,0) 70%);
}
.master-partner-feature-caption {
position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
z-index: 1; max-width: 380px;
}
.master-partner-feature-caption .eb {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.22em;
text-transform: uppercase; color: color-mix(in oklab, white 78%, transparent);
margin-bottom: 14px;
}
.master-partner-feature-caption .eb::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lw-whisper);
}
.master-partner-feature-caption .ln {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
line-height: 1.1; letter-spacing: -0.012em;
color: var(--lw-whisper); margin: 0; text-wrap: balance;
}
.master-partner-feature-caption .ln em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
@media (max-width: 720px) {
.master-partner-feature { aspect-ratio: 16 / 11; }
.master-partner-feature-caption { left: 20px; right: 20px; max-width: none; }
}
/* ===== Leasing - fog band ===== */
.master-leasing { position: relative; overflow: hidden; }
.master-leasing::before {
content: ''; position: absolute; inset: 0;
-webkit-mask-image: url('../patterns/LiveWell-Pattern-Fog.svg');
mask-image: url('../patterns/LiveWell-Pattern-Fog.svg');
-webkit-mask-size: 55% auto; mask-size: 55% auto;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: right -12% center; mask-position: right -12% center;
background: var(--lw-sage);
opacity: 0.18; pointer-events: none;
}
.master-leasing > * { position: relative; z-index: 1; }
.master-leasing-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; }
@media (min-width: 900px) { .master-leasing-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 96px; } }
.master-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: color-mix(in oklab, white 14%, transparent); border: 1px solid color-mix(in oklab, white 14%, transparent); border-radius: var(--r-sm); overflow: hidden; }
.master-cat {
background: color-mix(in oklab, var(--lw-fog) 92%, white);
padding: 28px 26px;
display: flex; flex-direction: column; gap: 4px;
}
.master-cat .ix {
font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; opacity: 0.55;
}
.master-cat .nm {
font-family: var(--font-display); font-weight: 300; font-size: 24px;
letter-spacing: -0.01em; line-height: 1.2; margin-top: 8px;
}
.master-cat .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-cat .sz {
font-family: var(--font-serif); font-style: italic; font-size: 14.5px;
opacity: 0.7; margin-top: 6px;
}
/* ===== Partner cards ===== */
.master-partners { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .master-partners { grid-template-columns: repeat(3, 1fr); } }
.master-partner {
background: var(--lw-whisper); border-radius: var(--r-sm);
border: 1px solid var(--border-soft);
padding: 40px 34px 36px;
display: flex; flex-direction: column; gap: 18px;
transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.master-partner:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.master-partner .ic {
width: 36px; height: 36px;
border-radius: 50%; background: var(--lw-sage);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; color: var(--fg-1);
letter-spacing: -0.02em;
}
.master-partner .hd {
font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3);
}
.master-partner .nm {
font-family: var(--font-display); font-weight: 300; font-size: 32px;
line-height: 1.1; letter-spacing: -0.012em;
}
.master-partner .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-partner .bd { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65; color: var(--fg-2); }
.master-partner .lk {
margin-top: auto; padding-top: 8px;
font-family: var(--font-sans); font-size: 14px; color: var(--fg-1); text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
}
.master-partner .lk::after { content: '›'; transition: transform var(--t-base) var(--ease-out); }
.master-partner:hover .lk::after { transform: translateX(3px); }
/* ===== News / updates ===== */
.master-news { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 800px) { .master-news { grid-template-columns: repeat(3, 1fr); } }
.master-news-card {
background: transparent; text-decoration: none; color: inherit;
display: flex; flex-direction: column;
border-top: 1px solid var(--lw-fog); padding-top: 20px;
transition: opacity var(--t-base) var(--ease-out);
}
.master-news-card .img {
aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm);
margin-bottom: 18px; background: var(--lw-sage);
}
.master-news-card .img img {
width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
transition: transform var(--t-slow) var(--ease-out);
}
.master-news-card:hover .img img { transform: scale(1.03); }
.master-news-card .meta {
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--fg-3);
display: flex; gap: 12px; margin-bottom: 12px;
}
.master-news-card .meta .cat { color: var(--fg-1); }
.master-news-card .ttl {
font-family: var(--font-display); font-weight: 300; font-size: 26px;
line-height: 1.2; letter-spacing: -0.008em; margin-bottom: 10px; text-wrap: balance;
}
.master-news-card .ex {
font-family: var(--font-serif); font-style: italic; font-size: 15.5px;
line-height: 1.55; color: var(--fg-2); margin-bottom: 16px;
}
.master-news-card .rd {
margin-top: auto;
font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; color: var(--fg-1);
}
.master-news-card .rd::after { content: ' ›'; transition: padding-left var(--t-base) var(--ease-out); }
.master-news-card:hover .rd::after { padding-left: 4px; }
/* ===== Contact ===== */
.master-contact-grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 900px) { .master-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: start; } }
.master-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.master-form .full { grid-column: 1 / -1; }
.master-field { display: flex; flex-direction: column; gap: 8px; }
.master-field label {
font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3);
}
.master-field input, .master-field select, .master-field textarea {
font-family: var(--font-sans); font-size: 16px; padding: 14px 16px;
border: 1px solid var(--border-mid); background: transparent;
border-radius: var(--r-sm); color: var(--fg-1); outline: none;
transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.master-field textarea { resize: vertical; min-height: 120px; }
.master-field input:focus, .master-field select:focus, .master-field textarea:focus {
border-color: var(--lw-fog); background: var(--lw-whisper);
}
.master-contact-side { display: flex; flex-direction: column; gap: 32px; }
.master-contact-block { padding: 24px 28px; background: var(--lw-whisper); border-radius: var(--r-sm); border: 1px solid var(--border-soft); }
.master-contact-block h4 {
font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px;
}
.master-contact-block .v {
font-family: var(--font-display); font-weight: 300; font-size: 22px;
letter-spacing: -0.008em; line-height: 1.3; color: var(--fg-1);
}
.master-contact-block .v em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-contact-block a { color: inherit; text-decoration: none; }
.master-contact-block .sub {
font-family: var(--font-serif); font-style: italic; font-size: 15px;
color: var(--fg-2); margin-top: 6px;
}
/* Contact cards with a headshot: round photo beside the details. */
.master-contact-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; }
.master-contact-person .ph {
width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block;
border: 1px solid var(--border-soft); background: #fff;
}
@media (max-width: 420px) {
.master-contact-person { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; }
.master-contact-person .ph { width: 72px; height: 72px; }
}
/* ===== End-cap (closing tagline band) =====
The mark, heading and sub-line rules follow the brand interlude below. */
.master-endcap {
background: var(--lw-fog); color: var(--lw-whisper);
text-align: center; padding: 96px 0 88px;
position: relative; overflow: hidden;
}
/* ===== Brand interlude (visual breather between heavy sections) ===== */
.master-interlude {
padding: 80px 0;
background: var(--lw-sage);
position: relative; overflow: hidden;
}
.master-interlude::before {
content: ''; position: absolute; inset: 0;
-webkit-mask: url('../patterns/LiveWell-Pattern-Fog.svg') center / 70% auto no-repeat;
mask: url('../patterns/LiveWell-Pattern-Fog.svg') center / 70% auto no-repeat;
background: var(--lw-fog); opacity: 0.06;
pointer-events: none;
}
.master-interlude > .lw-container { position: relative; z-index: 1; }
.master-interlude-mark {
width: 40px; height: 40px; margin: 0 auto 28px;
-webkit-mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
background: var(--lw-fog);
}
.master-interlude-quote {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2rem, 3.4vw + 1rem, 3.75rem);
line-height: 1.1; letter-spacing: -0.018em;
max-width: 920px; margin: 0 auto;
text-align: center; text-wrap: balance; color: var(--fg-1);
}
.master-interlude-quote em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-interlude-sub {
font-family: var(--font-serif); font-style: italic; font-size: 15px;
color: var(--fg-2); margin-top: 22px;
text-align: center;
}
/* End-cap: mark, heading and sub-line (the band itself is styled above). */
.master-endcap-mark {
width: 56px; height: 56px; margin: 0 auto 28px;
-webkit-mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
mask: url('../logos/LiveWell-Icon-Fog.svg') center / contain no-repeat;
background: var(--lw-whisper);
}
.master-endcap-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.25rem, 3.4vw + 1rem, 4rem);
line-height: 1.05; letter-spacing: -0.018em;
max-width: 900px; margin: 0 auto;
}
.master-endcap-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-endcap-sub {
font-family: var(--font-serif); font-style: italic; font-size: 14px;
letter-spacing: 0.22em; text-transform: uppercase;
color: color-mix(in oklab, white 55%, transparent);
margin-top: 26px;
}
/* ===== Precinct cards (two-site pipeline) ===== */
.master-precincts { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .master-precincts { grid-template-columns: 1fr 1fr; gap: 40px; } }
.master-precinct {
background: var(--lw-whisper);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.master-precinct:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.master-precinct .pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lw-light); }
.master-precinct .pic img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(.94) brightness(.98);
transition: transform var(--t-slow) var(--ease-out);
}
.master-precinct:hover .pic img { transform: scale(1.02); }
.master-precinct .pic.is-plan {
background: var(--lw-light);
border-bottom: 1px solid var(--border-soft);
}
.master-precinct .pic.is-plan img {
object-fit: contain; padding: 12px; filter: none;
}
.master-precinct .pic .cap {
position: absolute; right: 16px; bottom: 16px;
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3);
}
.master-precinct .tag {
position: absolute; left: 16px; bottom: 16px;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-1);
background: color-mix(in oklab, var(--lw-whisper) 88%, transparent);
padding: 8px 14px; border-radius: var(--r-pill);
backdrop-filter: blur(8px);
}
.master-precinct .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lw-fog); }
.master-precinct .tag.soon .dot { background: var(--lw-peace); }
.master-precinct .bd { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.master-precinct .nm {
font-family: var(--font-display); font-weight: 300; font-size: 30px;
letter-spacing: -0.012em; line-height: 1.12; color: var(--fg-1);
}
.master-precinct .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.master-precinct .ln {
font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
color: var(--fg-2); margin: 12px 0 24px;
}
.master-precinct .spec { margin: 0 0 24px; }
.master-precinct .spec > div {
display: grid; grid-template-columns: 92px 1fr; gap: 16px;
padding: 12px 0; border-top: 1px solid var(--border-soft);
}
.master-precinct .spec > div:last-child { border-bottom: 1px solid var(--border-soft); }
.master-precinct .spec dt {
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3);
}
.master-precinct .spec dd {
margin: 0; font-family: var(--font-sans); font-size: 14.5px;
line-height: 1.5; color: var(--fg-1);
}
.master-precinct .lk {
margin-top: auto;
font-family: var(--font-sans); font-size: 14px; color: var(--fg-1);
text-decoration: none; border-bottom: 0;
}
.master-precinct .lk .chev { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
.master-precinct:hover .lk .chev { transform: translateX(3px); }
/* ===== Refinements =====
These come later in the file, so they override the rules above. Add new adjustments here. */
/* Narrow screens: minmax(0, 1fr) lets the stat strip, contact form and leasing
categories shrink to fit the screen. The form drops to one column under 600px,
the categories under 360px. This also keeps the form clear of the contact
sidebar between 900px and about 1160px. */
.master-stats { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .master-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.master-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.master-field input, .master-field select, .master-field textarea { width: 100%; min-width: 0; }
@media (max-width: 599px) {
.master-form { grid-template-columns: minmax(0, 1fr); }
}
.master-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359px) {
.master-stat { padding: 24px 16px; }
.master-cats { grid-template-columns: minmax(0, 1fr); }
}
/* End-cap heading: light text on the dark Fog band. tokens/base.css gives every
h1 to h4 the dark heading colour, so the heading needs its own colour here. */
.master-endcap-title { color: var(--lw-whisper); }
/* Photo interlude image (family-bakery.jpg): framed from near the top so both
parents' faces stay clear of the headline, which sits bottom left. */
.master-photo-interlude > img { object-position: center 8%; }
/* Flagstone card under 480px: the "Concept axonometric" caption moves to the top
right so it can't overlap the "In design" tag (bottom left) on narrow cards. */
@media (max-width: 479px) {
.master-precinct .pic .cap { top: 16px; bottom: auto; }
}
/* Very wide screens (1700px and up): the photo interlude is capped at 1600px and
centred, like the other photos, so its 1536px image stays sharp. */
@media (min-width: 1700px) {
.master-photo-interlude { max-width: 1600px; margin: 0 auto; border-radius: var(--r-md); }
}
/* In-page links land just below the sticky nav instead of under it. */
main section[id] { scroll-margin-top: 80px; }
/* Flagstone plan fills its card image box edge to edge, framed 24% from the left
so all four buildings stay in view at every width. */
.master-precinct .pic.is-plan img { object-fit: cover; object-position: 24% center; padding: 0; }
/* Leasing band circle pattern: a subtle texture at 8% opacity behind the
categories (Honey Sage on Fog, brand guidelines p.36). */
.master-leasing::before { opacity: 0.08; }
/* Leasing categories: solid 1px grid lines, so the circle pattern behind them
doesn't show through and make them look patchy. */
.master-cats {
background: color-mix(in oklab, var(--lw-fog) 78%, white);
border-color: color-mix(in oklab, var(--lw-fog) 78%, white);
}
/* Type: one serif, used once (brand guidelines pp.21-23). Libre Baskerville italic
is only for the single accent word in headlines and names (the `em` rules above).
Captions, descriptions, stat notes and small print use IBM Plex Sans. */
.master-hero-foot strong,
.master-stat .desc,
.master-about-body strong,
.master-pillar .examples,
.master-cat .sz,
.master-news-card .ex,
.master-contact-block .sub,
.master-interlude-sub,
.master-endcap-sub,
.lw-footer-brand p { font-family: var(--font-sans); font-style: normal; }
.master-hero-foot strong { font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: 600; }
.master-about-body strong { font-weight: 500; }
.master-stat .desc { font-size: 15px; }
/* News titles are . tokens/base.css sets every h3 in italic; this keeps them upright. */
.master-news-card .ttl { font-style: normal; }
/* Partner track icons: Lucide line icons, inlined SVG; licence in THIRD-PARTY-NOTICES.md. */
.master-partner .ic svg {
width: 18px; height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
/* Netlify Forms spam trap: a field only bots fill in, so it is never shown. */
.lw-hp { display: none !important; }
/* Form button: dimmed only while sending. The "Thanks" state stays at full strength. */
.master-form button[data-state="sending"] { opacity: 0.7; }
.master-form button[disabled] { cursor: default; }
/* SEO heading structure: the small section labels are the h1/h2 headings (they carry
the search terms) and the large display lines are
. tokens/base.css styles h1-h4
and p by element, so these rules keep each one looking exactly as before. */
h1.lw-eyebrow, h2.lw-eyebrow { line-height: var(--leading-body); text-wrap: pretty; }
p.master-endcap-title { text-wrap: balance; }
.master-contact-block h3 {
font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-semibold);
font-style: normal; line-height: var(--leading-heading); letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px;
}
/* ===== News article pages (/news//) =====
One column of reading text, with a wider hero image. Body copy is IBM Plex Sans;
headings use Space Grotesk, with the serif italic kept for the one accent word. */
.article-head { padding: 72px 0 40px; }
.article-wrap { max-width: 760px; }
.article-back {
display: inline-flex; gap: 8px; margin-bottom: 36px;
font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; color: var(--fg-2);
border-bottom: 0;
}
.article-back:hover { color: var(--fg-1); }
.article-meta {
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--fg-3);
display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px;
}
.article-meta .cat { color: var(--fg-1); }
.article-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.4rem, 3.4vw + 1rem, 4.25rem);
line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 24px; text-wrap: balance;
}
.article-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.article-lede {
font-family: var(--font-sans); font-size: 20px; line-height: 1.6; color: var(--fg-2); margin: 0;
}
.article-hero { margin: 0 0 64px; }
.article-hero img {
display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--lw-sage);
}
.article-hero figcaption {
font-family: var(--font-sans); font-size: 13px; color: var(--fg-3); margin-top: 10px;
}
.article-body { padding-bottom: 32px; }
.article-body p, .article-body li {
font-family: var(--font-sans); font-size: 17.5px; line-height: 1.75; color: var(--fg-2);
}
.article-body p { margin: 0 0 1.25em; }
.article-body h2 {
font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 1vw + 1.2rem, 2rem);
line-height: 1.2; letter-spacing: -0.01em; color: var(--fg-1); margin: 48px 0 16px;
}
.article-body ul { margin: 0 0 1.25em; padding-left: 1.2em; }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--fg-1); font-weight: 500; }
.article-body a:not(.lw-btn) {
color: var(--fg-1); text-decoration: underline; text-underline-offset: 4px;
text-decoration-color: color-mix(in oklab, var(--lw-fog) 35%, transparent);
}
.article-body a:not(.lw-btn):hover { text-decoration-color: var(--lw-fog); }
.article-facts {
display: grid; grid-template-columns: 1fr; gap: 0; margin: 40px 0;
background: var(--lw-whisper); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
padding: 8px 28px;
}
.article-facts div {
display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px;
padding: 16px 0; border-bottom: 1px solid var(--border-soft);
}
.article-facts div:last-child { border-bottom: 0; }
.article-facts dt {
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--fg-3); padding-top: 4px;
}
.article-facts dd { margin: 0; font-family: var(--font-sans); font-size: 16px; color: var(--fg-1); }
@media (max-width: 520px) {
.article-facts { padding: 4px 20px; }
.article-facts div { grid-template-columns: 1fr; gap: 4px; }
}
.article-cta {
background: var(--lw-fog); color: var(--lw-whisper); border-radius: var(--r-sm);
padding: 40px; margin: 56px 0 0;
}
.article-cta .k {
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: color-mix(in oklab, white 60%, transparent); margin: 0 0 12px;
}
.article-cta .h {
font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.2;
color: var(--lw-whisper); margin: 0 0 12px;
}
.article-cta .h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.article-cta p.c {
font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
color: color-mix(in oklab, white 80%, transparent); margin: 0 0 24px;
}
.article-cta a:not(.lw-btn) { color: var(--lw-whisper); text-decoration-color: color-mix(in oklab, white 40%, transparent); }
.article-cta a:not(.lw-btn):hover { text-decoration-color: var(--lw-whisper); }
.article-cta .btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 520px) { .article-cta { padding: 28px 22px; } }
.article-more { padding: 72px 0 96px; }
.article-more .master-news { margin-top: 32px; }
.article-more .master-news-card .img { aspect-ratio: 3 / 2; }
@media (min-width: 800px) { .article-more .master-news { grid-template-columns: repeat(2, 1fr); max-width: 860px; } }