fix(ui): 10 regression fixes from new design pass
- Nav: always visible glass background (no more transparent-on-top) - Logo: remove text span, kill link underline completely - Masonry: fix HTML class drift (gallery-grid -> masonry-grid) - Gallery captions: rename to grid-item-label (hover-only) - Honeypot: rename to hp-field (was rendered visible!) - Hero: stronger gradient + text-shadow on h1/tag/meta - LAGE features: cards with pin icon, no more bulleted list - Map: full-viewport-width break-out from .lage-section - Contact form: border-radius, focus glow, custom select arrow, working .form-submit button style - Light text: unified --text-muted-on-dark token (replaces 4 magic white-XX% variants + --stone on .fact-label) - A11y test: update honeypot class assertion
This commit is contained in:
Hermes
@@ -50,12 +50,22 @@ a:focus-visible {
|
||||
--cream: #f5f0e8;
|
||||
--warm: #e8dfd0;
|
||||
--stone: #7a7062;
|
||||
--stone-strong: #5a5043;
|
||||
--dark: #1c1a17;
|
||||
--charcoal: #2e2b26;
|
||||
--accent: #8b6914;
|
||||
--accent-light: #c49a2a;
|
||||
--accent-strong: #5a450d;
|
||||
--white: #fdfcfa;
|
||||
|
||||
/* Text variants — keep light text consistent across dark backgrounds */
|
||||
--text-muted: #6e6557;
|
||||
--text-muted-on-dark: rgb(245 240 232 / 82%);
|
||||
--text-faint-on-dark: rgb(245 240 232 / 65%);
|
||||
|
||||
/* Nav: always visible, glass effect on top of hero */
|
||||
--nav-bg: rgb(253 252 250 / 92%);
|
||||
--nav-border: rgb(232 223 208 / 70%);
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -77,7 +87,7 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
/* NAV — always visible, glass effect over hero */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -87,38 +97,54 @@ nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 3rem;
|
||||
background: transparent;
|
||||
padding: 0.95rem 3rem;
|
||||
background: var(--nav-bg);
|
||||
backdrop-filter: saturate(180%) blur(14px);
|
||||
backdrop-filter: saturate(180%) blur(14px);
|
||||
border-bottom: 1px solid var(--nav-border);
|
||||
transition:
|
||||
background 0.4s,
|
||||
padding 0.4s;
|
||||
padding 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
box-shadow: 0 1px 12px rgb(28 26 23 / 4%);
|
||||
}
|
||||
|
||||
nav.scrolled {
|
||||
background: var(--white);
|
||||
backdrop-filter: none;
|
||||
padding: 0.85rem 3rem;
|
||||
border-bottom: 1px solid var(--warm);
|
||||
box-shadow: 0 1px 8px rgb(0 0 0 / 6%);
|
||||
padding: 0.65rem 3rem;
|
||||
box-shadow: 0 2px 16px rgb(28 26 23 / 8%);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
.nav-logo a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--dark);
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--white);
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
nav.scrolled .nav-logo {
|
||||
color: var(--dark);
|
||||
.nav-logo a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Hide logo text everywhere — logo icon is the only brand mark */
|
||||
.logo-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
@@ -127,16 +153,11 @@ nav.scrolled .nav-logo {
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: rgb(255 255 255 / 85%);
|
||||
color: var(--stone-strong);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
nav.scrolled .nav-links a {
|
||||
color: var(--stone);
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
nav.scrolled .nav-links a:hover {
|
||||
.nav-links a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -157,12 +178,14 @@ nav.scrolled .nav-links a:hover {
|
||||
background 0.3s,
|
||||
transform 0.2s,
|
||||
box-shadow 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-cta:hover {
|
||||
background: var(--accent-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgb(139 105 20 / 50%);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* HAMBURGER */
|
||||
@@ -178,6 +201,7 @@ nav.scrolled .nav-links a:hover {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.nav-hamburger span,
|
||||
@@ -186,12 +210,11 @@ nav.scrolled .nav-links a:hover {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: var(--white);
|
||||
background: var(--dark);
|
||||
border-radius: 1px;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
opacity 0.3s ease,
|
||||
background 0.4s;
|
||||
opacity 0.3s ease;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@@ -210,12 +233,6 @@ nav.scrolled .nav-links a:hover {
|
||||
transform: translate(-50%, calc(-50% + 7px));
|
||||
}
|
||||
|
||||
nav.scrolled .nav-hamburger span,
|
||||
nav.scrolled .nav-hamburger span::before,
|
||||
nav.scrolled .nav-hamburger span::after {
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
.nav-hamburger.active span {
|
||||
background: transparent;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -275,12 +292,15 @@ nav.scrolled .nav-hamburger span::after {
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgb(28 26 23 / 85%) 0%,
|
||||
rgb(28 26 23 / 30%) 50%,
|
||||
rgb(28 26 23 / 10%) 100%
|
||||
rgb(20 18 15 / 92%) 0%,
|
||||
rgb(20 18 15 / 60%) 30%,
|
||||
rgb(20 18 15 / 35%) 60%,
|
||||
rgb(20 18 15 / 20%) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -310,6 +330,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-light);
|
||||
margin-bottom: 1.25rem;
|
||||
text-shadow: 0 1px 8px rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
.hero-tag::before {
|
||||
@@ -327,6 +348,9 @@ nav.scrolled .nav-hamburger span::after {
|
||||
color: var(--white);
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow:
|
||||
0 2px 24px rgb(0 0 0 / 50%),
|
||||
0 1px 3px rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
.hero h1 em {
|
||||
@@ -339,8 +363,9 @@ nav.scrolled .nav-hamburger span::after {
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.82rem;
|
||||
color: rgb(255 255 255 / 88%);
|
||||
color: var(--text-muted-on-dark);
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
.hero-meta strong {
|
||||
@@ -422,7 +447,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--stone);
|
||||
color: var(--text-muted-on-dark);
|
||||
}
|
||||
|
||||
/* INTRO */
|
||||
@@ -577,7 +602,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 90%);
|
||||
color: var(--text-muted-on-dark);
|
||||
border-radius: 0 0 3px 3px;
|
||||
transform: translateY(6px);
|
||||
opacity: 0;
|
||||
@@ -813,7 +838,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
color: var(--text-muted-on-dark);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -822,7 +847,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
color: var(--text-muted-on-dark);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -839,12 +864,12 @@ nav.scrolled .nav-hamburger span::after {
|
||||
.price-card .price-unit {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: rgb(255 255 255 / 75%);
|
||||
color: var(--text-muted-on-dark);
|
||||
}
|
||||
|
||||
.price-card.highlight .price-label,
|
||||
.price-card.highlight .price-unit {
|
||||
color: rgb(255 255 255 / 85%);
|
||||
color: var(--text-muted-on-dark);
|
||||
}
|
||||
|
||||
.pricing-section .rent-notes {
|
||||
@@ -858,7 +883,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
color: var(--text-muted-on-dark);
|
||||
}
|
||||
|
||||
.pricing-section .rent-notes dd {
|
||||
@@ -890,7 +915,7 @@ nav.scrolled .nav-hamburger span::after {
|
||||
|
||||
/* LAGE */
|
||||
.lage-section {
|
||||
padding: 6rem 3rem;
|
||||
padding: 6rem 3rem 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -905,58 +930,81 @@ nav.scrolled .nav-hamburger span::after {
|
||||
|
||||
.lage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--warm);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.lage-item {
|
||||
.lage-features {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.lage-features > li {
|
||||
background: var(--white);
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
align-items: flex-start;
|
||||
transition: background 0.3s;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--warm);
|
||||
border-radius: 2px;
|
||||
transition:
|
||||
background 0.3s,
|
||||
transform 0.3s,
|
||||
box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.lage-item:hover {
|
||||
.lage-features > li::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--accent);
|
||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/></svg>")
|
||||
center/contain no-repeat;
|
||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/></svg>")
|
||||
center/contain no-repeat;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lage-features > li:hover {
|
||||
background: var(--cream);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgb(28 26 23 / 8%);
|
||||
}
|
||||
|
||||
.lage-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
background: var(--cream);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent);
|
||||
.lage-feature-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.lage-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.lage-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--stone);
|
||||
.lage-feature-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.lage-map-wrapper {
|
||||
margin-top: 3rem;
|
||||
border: 1px solid var(--warm);
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
width: 100vw;
|
||||
margin: 0 -50vw;
|
||||
border-top: 1px solid var(--warm);
|
||||
border-bottom: 1px solid var(--warm);
|
||||
background: var(--white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lage-map-wrapper iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
height: 480px;
|
||||
border: 0;
|
||||
filter: grayscale(30%) contrast(1.05);
|
||||
transition: filter 0.4s ease;
|
||||
}
|
||||
@@ -965,10 +1013,34 @@ nav.scrolled .nav-hamburger span::after {
|
||||
filter: grayscale(0%) contrast(1);
|
||||
}
|
||||
|
||||
.lage-address {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 3rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lage-address strong {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.lage-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.lage-map-wrapper iframe {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.lage-address {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* CONTACT */
|
||||
@@ -1035,44 +1107,76 @@ nav.scrolled .nav-hamburger span::after {
|
||||
font-size: 0.88rem;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--warm);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 2px;
|
||||
padding: 0.85rem 1rem;
|
||||
color: var(--dark);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.form-field input:hover,
|
||||
.form-field textarea:hover,
|
||||
.form-field select:hover {
|
||||
border-color: var(--stone);
|
||||
}
|
||||
|
||||
.form-field input:focus,
|
||||
.form-field textarea:focus,
|
||||
.form-field select:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgb(139 105 20 / 12%);
|
||||
}
|
||||
|
||||
.form-field select {
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a7062' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
padding-right: 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-field.full {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
.btn-submit,
|
||||
.form-submit {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
background: var(--accent);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
padding: 1.1rem;
|
||||
padding: 1.15rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
box-shadow: 0 2px 12px rgb(139 105 20 / 25%);
|
||||
transition:
|
||||
background 0.3s,
|
||||
transform 0.2s;
|
||||
transform 0.2s,
|
||||
box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
.btn-submit:hover,
|
||||
.form-submit:hover {
|
||||
background: var(--accent-light);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 20px rgb(139 105 20 / 40%);
|
||||
}
|
||||
|
||||
.btn-submit:active,
|
||||
.form-submit:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.form-errors {
|
||||
@@ -1124,6 +1228,25 @@ nav.scrolled .nav-hamburger span::after {
|
||||
color: var(--stone);
|
||||
}
|
||||
|
||||
.contact-direct {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.contact-direct a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.contact-direct a:hover {
|
||||
color: var(--accent-light);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
@@ -1400,7 +1523,7 @@ footer {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgb(255 255 255 / 90%);
|
||||
color: var(--text-muted-on-dark);
|
||||
background: transparent;
|
||||
transition:
|
||||
background 0.2s,
|
||||
|
||||
Reference in New Issue
Block a user