greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): 10 regression fixes from new design pass

Browse Source 
- 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
2026-06-04 18:03:50 +00:00
parent 7dd8023222
commit 9a14803d26
4 changed files with 222 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/views/home/index.php
View File

@@ -31,6 +31,7 @@ $gridItems = [
?> ?>
<header class="hero" id="hero"> <header class="hero" id="hero">
<img src="/bilder/Außenansicht-2.webp" alt="" class="hero-bg" id="heroBg" loading="eager" decoding="async" fetchpriority="high"> <img src="/bilder/Außenansicht-2.webp" alt="" class="hero-bg" id="heroBg" loading="eager" decoding="async" fetchpriority="high">
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-content" id="heroContent"> <div class="hero-content" id="heroContent">
<span class="hero-tag"><?= htmlspecialchars($t('hero.tag'), ENT_QUOTES) ?></span> <span class="hero-tag"><?= htmlspecialchars($t('hero.tag'), ENT_QUOTES) ?></span>
<h1 class="hero-h1"> <h1 class="hero-h1">
@@ -86,13 +87,13 @@ $gridItems = [
<span class="section-eyebrow"><?= htmlspecialchars($t('gallery.eyebrow'), ENT_QUOTES) ?></span> <span class="section-eyebrow"><?= htmlspecialchars($t('gallery.eyebrow'), ENT_QUOTES) ?></span>
<h2><?= htmlspecialchars($t('gallery.h2'), ENT_QUOTES) ?></h2> <h2><?= htmlspecialchars($t('gallery.h2'), ENT_QUOTES) ?></h2>
</div> </div>
<div class="gallery-grid"> <div class="masonry-grid">
<?php foreach ($gridItems as $item): ?> <?php foreach ($gridItems as $item): ?>
<button type="button" class="grid-item <?= htmlspecialchars($item['class'], ENT_QUOTES) ?>" <button type="button" class="grid-item"
data-img="<?= htmlspecialchars($item['img'], ENT_QUOTES) ?>" data-img="<?= htmlspecialchars($item['img'], ENT_QUOTES) ?>"
aria-label="<?= htmlspecialchars($t($item['key']) . $t('gallery.zoom'), ENT_QUOTES) ?>"> aria-label="<?= htmlspecialchars($t($item['key']) . $t('gallery.zoom'), ENT_QUOTES) ?>">
<img src="/<?= htmlspecialchars($item['img'], ENT_QUOTES) ?>" alt="<?= htmlspecialchars($t($item['alt']), ENT_QUOTES) ?>" loading="lazy" decoding="async"> <img src="/<?= htmlspecialchars($item['img'], ENT_QUOTES) ?>" alt="<?= htmlspecialchars($t($item['alt']), ENT_QUOTES) ?>" loading="lazy" decoding="async">
<span class="grid-caption"><?= htmlspecialchars($t($item['key']), ENT_QUOTES) ?></span> <span class="grid-item-label"><?= htmlspecialchars($t($item['key']), ENT_QUOTES) ?></span>
</button> </button>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
@@ -232,17 +233,17 @@ $gridItems = [
<span class="lage-feature-desc"><?= htmlspecialchars($t('loc.center_desc'), ENT_QUOTES) ?></span> <span class="lage-feature-desc"><?= htmlspecialchars($t('loc.center_desc'), ENT_QUOTES) ?></span>
</li> </li>
</ul> </ul>
</div>
<div class="lage-map-wrapper"> <div class="lage-map-wrapper">
<iframe <iframe
title="<?= htmlspecialchars($t('loc.map_title'), ENT_QUOTES) ?>" title="<?= htmlspecialchars($t('loc.map_title'), ENT_QUOTES) ?>"
src="https://www.openstreetmap.org/export/embed.html?bbox=10.7535%2C50.5095%2C10.7705%2C50.5185&amp;layer=mapnik&amp;marker=50.5140%2C10.7620" src="https://www.openstreetmap.org/export/embed.html?bbox=10.7535%2C50.5095%2C10.7705%2C50.5185&amp;layer=mapnik&amp;marker=50.5140%2C10.7620"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p class="lage-address"> <p class="lage-address">
<strong><?= htmlspecialchars($t('loc.address'), ENT_QUOTES) ?>:</strong><br> <strong><?= htmlspecialchars($t('loc.address'), ENT_QUOTES) ?>:</strong><br>
<?= /* address HTML is XSS-safe — composed of trusted translations */ $t('loc.address_val') ?> <?= /* address HTML is XSS-safe — composed of trusted translations */ $t('loc.address_val') ?>
</p> </p>
</div>
</div> </div>
</section> </section>
@@ -273,7 +274,7 @@ $gridItems = [
<form class="contact-form" method="post" action="/#kontakt" novalidate> <form class="contact-form" method="post" action="/#kontakt" novalidate>
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token'] ?? '', ENT_QUOTES) ?>"> <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token'] ?? '', ENT_QUOTES) ?>">
<input type="hidden" name="form_time" value="<?= htmlspecialchars((string) time(), ENT_QUOTES) ?>"> <input type="hidden" name="form_time" value="<?= htmlspecialchars((string) time(), ENT_QUOTES) ?>">
<div class="form-hp" aria-hidden="true"> <div class="hp-field" aria-hidden="true">
<label for="website-hp"><?= htmlspecialchars($t('contact.hp_label'), ENT_QUOTES) ?></label> <label for="website-hp"><?= htmlspecialchars($t('contact.hp_label'), ENT_QUOTES) ?></label>
<input type="text" id="website-hp" name="website" tabindex="-1" autocomplete="off"> <input type="text" id="website-hp" name="website" tabindex="-1" autocomplete="off">
</div> </div>

5
app/views/layouts/main.php
View File

@@ -87,11 +87,10 @@ $navItems = [
<body> <body>
<a class="skip-link" href="#main"><?= htmlspecialchars($t('nav.skip'), ENT_QUOTES) ?></a> <a class="skip-link" href="#main"><?= htmlspecialchars($t('nav.skip'), ENT_QUOTES) ?></a>
<nav id="navbar" class="scrolled" aria-label="<?= htmlspecialchars($t('nav.main'), ENT_QUOTES) ?>"> <nav id="navbar" aria-label="<?= htmlspecialchars($t('nav.main'), ENT_QUOTES) ?>">
<div class="nav-logo"> <div class="nav-logo">
<a href="<?= htmlspecialchars($homeUrl) ?>"> <a href="<?= htmlspecialchars($homeUrl) ?>" aria-label="<?= htmlspecialchars($siteName, ENT_QUOTES) ?>">
<span class="logo-icon" aria-hidden="true">🏠</span> <span class="logo-icon" aria-hidden="true">🏠</span>
<span class="logo-text"><?= htmlspecialchars($siteName) ?></span>
</a> </a>
</div> </div>

285
public/css/haus-schleusingen.css
View File

@@ -50,12 +50,22 @@ a:focus-visible {
--cream: #f5f0e8; --cream: #f5f0e8;
--warm: #e8dfd0; --warm: #e8dfd0;
--stone: #7a7062; --stone: #7a7062;
--stone-strong: #5a5043;
--dark: #1c1a17; --dark: #1c1a17;
--charcoal: #2e2b26; --charcoal: #2e2b26;
--accent: #8b6914; --accent: #8b6914;
--accent-light: #c49a2a; --accent-light: #c49a2a;
--accent-strong: #5a450d; --accent-strong: #5a450d;
--white: #fdfcfa; --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; overflow-x: hidden;
} }
/* NAV */ /* NAV — always visible, glass effect over hero */
nav { nav {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -87,38 +97,54 @@ nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 3rem; padding: 0.95rem 3rem;
background: transparent; background: var(--nav-bg);
backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--nav-border);
transition: transition:
background 0.4s, padding 0.3s ease,
padding 0.4s; box-shadow 0.3s ease;
box-shadow: 0 1px 12px rgb(28 26 23 / 4%);
} }
nav.scrolled { nav.scrolled {
background: var(--white); padding: 0.65rem 3rem;
backdrop-filter: none; box-shadow: 0 2px 16px rgb(28 26 23 / 8%);
padding: 0.85rem 3rem;
border-bottom: 1px solid var(--warm);
box-shadow: 0 1px 8px rgb(0 0 0 / 6%);
} }
.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-family: "Cormorant Garamond", serif;
font-size: 1.15rem; font-size: 1.15rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: var(--white);
transition: color 0.4s;
} }
nav.scrolled .nav-logo { .nav-logo a:hover {
color: var(--dark); 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 { .nav-links {
display: flex; display: flex;
gap: 2.5rem; gap: 2.5rem;
list-style: none; list-style: none;
margin: 0;
padding: 0;
} }
.nav-links a { .nav-links a {
@@ -127,16 +153,11 @@ nav.scrolled .nav-logo {
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgb(255 255 255 / 85%); color: var(--stone-strong);
transition: color 0.3s; transition: color 0.3s;
} }
nav.scrolled .nav-links a { .nav-links a:hover {
color: var(--stone);
}
.nav-links a:hover,
nav.scrolled .nav-links a:hover {
color: var(--accent); color: var(--accent);
} }
@@ -157,12 +178,14 @@ nav.scrolled .nav-links a:hover {
background 0.3s, background 0.3s,
transform 0.2s, transform 0.2s,
box-shadow 0.3s; box-shadow 0.3s;
text-decoration: none;
} }
.nav-cta:hover { .nav-cta:hover {
background: var(--accent-light); background: var(--accent-light);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 20px rgb(139 105 20 / 50%); box-shadow: 0 4px 20px rgb(139 105 20 / 50%);
color: var(--white);
} }
/* HAMBURGER */ /* HAMBURGER */
@@ -178,6 +201,7 @@ nav.scrolled .nav-links a:hover {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
color: var(--dark);
} }
.nav-hamburger span, .nav-hamburger span,
@@ -186,12 +210,11 @@ nav.scrolled .nav-links a:hover {
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
background: var(--white); background: var(--dark);
border-radius: 1px; border-radius: 1px;
transition: transition:
transform 0.3s ease, transform 0.3s ease,
opacity 0.3s ease, opacity 0.3s ease;
background 0.4s;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@@ -210,12 +233,6 @@ nav.scrolled .nav-links a:hover {
transform: translate(-50%, calc(-50% + 7px)); 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 { .nav-hamburger.active span {
background: transparent; background: transparent;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@@ -275,12 +292,15 @@ nav.scrolled .nav-hamburger span::after {
.hero-overlay { .hero-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 1;
background: linear-gradient( background: linear-gradient(
to top, to top,
rgb(28 26 23 / 85%) 0%, rgb(20 18 15 / 92%) 0%,
rgb(28 26 23 / 30%) 50%, rgb(20 18 15 / 60%) 30%,
rgb(28 26 23 / 10%) 100% rgb(20 18 15 / 35%) 60%,
rgb(20 18 15 / 20%) 100%
); );
pointer-events: none;
} }
.hero-content { .hero-content {
@@ -310,6 +330,7 @@ nav.scrolled .nav-hamburger span::after {
text-transform: uppercase; text-transform: uppercase;
color: var(--accent-light); color: var(--accent-light);
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
text-shadow: 0 1px 8px rgb(0 0 0 / 40%);
} }
.hero-tag::before { .hero-tag::before {
@@ -327,6 +348,9 @@ nav.scrolled .nav-hamburger span::after {
color: var(--white); color: var(--white);
letter-spacing: -0.01em; letter-spacing: -0.01em;
margin-bottom: 1.5rem; 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 { .hero h1 em {
@@ -339,8 +363,9 @@ nav.scrolled .nav-hamburger span::after {
gap: 2.5rem; gap: 2.5rem;
align-items: center; align-items: center;
font-size: 0.82rem; font-size: 0.82rem;
color: rgb(255 255 255 / 88%); color: var(--text-muted-on-dark);
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
} }
.hero-meta strong { .hero-meta strong {
@@ -422,7 +447,7 @@ nav.scrolled .nav-hamburger span::after {
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--stone); color: var(--text-muted-on-dark);
} }
/* INTRO */ /* INTRO */
@@ -577,7 +602,7 @@ nav.scrolled .nav-hamburger span::after {
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: rgb(255 255 255 / 90%); color: var(--text-muted-on-dark);
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
transform: translateY(6px); transform: translateY(6px);
opacity: 0; opacity: 0;
@@ -813,7 +838,7 @@ nav.scrolled .nav-hamburger span::after {
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.15em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
color: rgb(255 255 255 / 70%); color: var(--text-muted-on-dark);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -822,7 +847,7 @@ nav.scrolled .nav-hamburger span::after {
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.15em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
color: rgb(255 255 255 / 70%); color: var(--text-muted-on-dark);
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
@@ -839,12 +864,12 @@ nav.scrolled .nav-hamburger span::after {
.price-card .price-unit { .price-card .price-unit {
display: block; display: block;
font-size: 0.78rem; 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-label,
.price-card.highlight .price-unit { .price-card.highlight .price-unit {
color: rgb(255 255 255 / 85%); color: var(--text-muted-on-dark);
} }
.pricing-section .rent-notes { .pricing-section .rent-notes {
@@ -858,7 +883,7 @@ nav.scrolled .nav-hamburger span::after {
font-size: 0.78rem; font-size: 0.78rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: rgb(255 255 255 / 70%); color: var(--text-muted-on-dark);
} }
.pricing-section .rent-notes dd { .pricing-section .rent-notes dd {
@@ -890,7 +915,7 @@ nav.scrolled .nav-hamburger span::after {
/* LAGE */ /* LAGE */
.lage-section { .lage-section {
padding: 6rem 3rem; padding: 6rem 3rem 0;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
@@ -905,58 +930,81 @@ nav.scrolled .nav-hamburger span::after {
.lage-grid { .lage-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1px; gap: 1.5rem;
background: var(--warm); margin-bottom: 4rem;
} }
.lage-item { .lage-features {
list-style: none;
margin: 0;
padding: 0;
display: contents;
}
.lage-features > li {
background: var(--white); background: var(--white);
padding: 2rem; padding: 2rem;
display: flex; display: flex;
gap: 1.25rem; flex-direction: column;
align-items: flex-start; gap: 0.5rem;
transition: background 0.3s; 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); background: var(--cream);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgb(28 26 23 / 8%);
} }
.lage-icon { .lage-feature-title {
width: 40px; font-size: 1rem;
height: 40px; font-weight: 600;
flex-shrink: 0; color: var(--dark);
background: var(--cream); letter-spacing: 0.01em;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--accent);
} }
.lage-title { .lage-feature-desc {
font-size: 0.9rem; font-size: 0.88rem;
font-weight: 500; color: var(--text-muted);
margin-bottom: 4px;
}
.lage-desc {
font-size: 0.82rem;
color: var(--stone);
line-height: 1.6; line-height: 1.6;
} }
.lage-map-wrapper { .lage-map-wrapper {
margin-top: 3rem; position: relative;
border: 1px solid var(--warm); 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; overflow: hidden;
} }
.lage-map-wrapper iframe { .lage-map-wrapper iframe {
display: block; display: block;
width: 100%; width: 100%;
height: 450px; height: 480px;
border: 0;
filter: grayscale(30%) contrast(1.05); filter: grayscale(30%) contrast(1.05);
transition: filter 0.4s ease; transition: filter 0.4s ease;
} }
@@ -965,10 +1013,34 @@ nav.scrolled .nav-hamburger span::after {
filter: grayscale(0%) contrast(1); 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) { @media (width <= 900px) {
.lage-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.lage-map-wrapper iframe { .lage-map-wrapper iframe {
height: 320px; height: 320px;
} }
.lage-address {
padding: 1.25rem 1.5rem;
}
} }
/* CONTACT */ /* CONTACT */
@@ -1035,44 +1107,76 @@ nav.scrolled .nav-hamburger span::after {
font-size: 0.88rem; font-size: 0.88rem;
background: var(--white); background: var(--white);
border: 1px solid var(--warm); border: 1px solid var(--warm);
padding: 0.75rem 1rem; border-radius: 2px;
padding: 0.85rem 1rem;
color: var(--dark); color: var(--dark);
outline: none; outline: none;
transition: border-color 0.2s; transition:
border-color 0.2s,
box-shadow 0.2s;
resize: none; resize: none;
} }
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
border-color: var(--stone);
}
.form-field input:focus, .form-field input:focus,
.form-field textarea:focus, .form-field textarea:focus,
.form-field select:focus { .form-field select:focus {
border-color: var(--accent); 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 { .form-field.full {
grid-column: span 2; grid-column: span 2;
} }
.btn-submit { .btn-submit,
.form-submit {
font-family: "DM Sans", sans-serif; font-family: "DM Sans", sans-serif;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 500; font-weight: 600;
letter-spacing: 0.15em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--white);
border: none; border: none;
border-radius: 2px;
width: 100%; width: 100%;
padding: 1.1rem; padding: 1.15rem;
cursor: pointer; cursor: pointer;
margin-top: 0.5rem; margin-top: 0.5rem;
box-shadow: 0 2px 12px rgb(139 105 20 / 25%);
transition: transition:
background 0.3s, 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); background: var(--accent-light);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 20px rgb(139 105 20 / 40%);
}
.btn-submit:active,
.form-submit:active {
transform: translateY(0);
} }
.form-errors { .form-errors {
@@ -1124,6 +1228,25 @@ nav.scrolled .nav-hamburger span::after {
color: var(--stone); 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 { .contact-details {
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 2rem;
@@ -1400,7 +1523,7 @@ footer {
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: rgb(255 255 255 / 90%); color: var(--text-muted-on-dark);
background: transparent; background: transparent;
transition: transition:
background 0.2s, background 0.2s,

2
tests/Views/HomeViewA11yTest.php
View File

@@ -138,7 +138,7 @@ final class HomeViewA11yTest extends TestCase
{ {
$html = $this->renderHomeView(formErrors: [], formFieldErrors: [], formSuccess: false); $html = $this->renderHomeView(formErrors: [], formFieldErrors: [], formSuccess: false);
self::assertStringContainsString('class="form-hp"', $html); self::assertStringContainsString('class="hp-field"', $html);
self::assertStringContainsString('aria-hidden="true"', $html); self::assertStringContainsString('aria-hidden="true"', $html);
self::assertStringContainsString('tabindex="-1"', $html); self::assertStringContainsString('tabindex="-1"', $html);
self::assertStringContainsString('autocomplete="off"', $html); self::assertStringContainsString('autocomplete="off"', $html);