Merge pull request 'fix(css): constrain gallery heading and pricing/contact sections to main container width' (#82) from feature/gallery-and-section-containers into main
Reviewed-on: #82
This commit is contained in:
@@ -153,6 +153,7 @@ $gridItems = [
|
||||
<summary class="floor-header">
|
||||
<span class="floor-title"><?= htmlspecialchars($t($floor['titleKey']), ENT_QUOTES) ?></span>
|
||||
<span class="floor-area"><?= htmlspecialchars($t($floor['areaKey']), ENT_QUOTES) ?></span>
|
||||
<span class="floor-icon" aria-hidden="true">+</span>
|
||||
</summary>
|
||||
<div class="floor-body">
|
||||
<img src="/<?= htmlspecialchars($floorImageMap[$floor['id']] ?? 'bilder/grundrisse/EG.png', ENT_QUOTES) ?>"
|
||||
|
||||
@@ -548,6 +548,12 @@ nav.scrolled {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gallery-section .section-head {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 5rem 1.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.gallery-header h2 {
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-size: clamp(2rem, 3vw, 2.8rem);
|
||||
@@ -636,6 +642,10 @@ nav.scrolled {
|
||||
.gallery-header {
|
||||
padding: 3rem 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.gallery-section .section-head {
|
||||
padding: 3rem 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
@@ -660,26 +670,63 @@ nav.scrolled {
|
||||
color: var(--charcoal);
|
||||
}
|
||||
|
||||
.floor-accordion {
|
||||
border-top: 1px solid var(--warm);
|
||||
.floors-accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
.floor-item {
|
||||
border-bottom: 1px solid var(--warm);
|
||||
border: 1px solid var(--warm);
|
||||
border-radius: 4px;
|
||||
background: var(--white);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.floor-item:hover {
|
||||
border-color: var(--stone);
|
||||
}
|
||||
|
||||
.floor-item.open {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 4px 20px rgb(28 26 23 / 6%);
|
||||
}
|
||||
|
||||
.floor-item.open::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.floor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 0;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
list-style: none;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.floor-header:hover .floor-title {
|
||||
color: var(--accent);
|
||||
.floor-header::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.floor-header::marker {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.floor-header:hover {
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.floor-title {
|
||||
@@ -689,41 +736,60 @@ nav.scrolled {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.floor-size {
|
||||
.floor-header:hover .floor-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.floor-area {
|
||||
margin-left: auto;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--stone);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.floor-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--warm);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1.5px solid var(--warm);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
color: var(--stone);
|
||||
background: var(--white);
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
border-color 0.3s;
|
||||
transform 0.3s ease,
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
background 0.25s ease;
|
||||
}
|
||||
|
||||
.floor-header:hover .floor-icon {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.floor-item.open .floor-icon {
|
||||
transform: rotate(45deg);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.floor-body {
|
||||
display: none;
|
||||
padding: 0 0 1.5rem;
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--warm);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.floor-rooms-grid {
|
||||
@@ -789,6 +855,8 @@ nav.scrolled {
|
||||
.pricing-section {
|
||||
background: var(--dark);
|
||||
padding: 6rem 3rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pricing-inner {
|
||||
@@ -1044,6 +1112,8 @@ nav.scrolled {
|
||||
.contact-section {
|
||||
background: var(--cream);
|
||||
padding: 6rem 3rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-inner {
|
||||
@@ -1664,3 +1734,113 @@ nav:not(.scrolled) .locale-switcher__trigger:focus-visible {
|
||||
outline: 2px solid #b91c1c;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* LEGAL PAGES (Impressum, Datenschutz) */
|
||||
.legal-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 6rem 3rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.legal-page .section-eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.legal-page h1 {
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-size: clamp(2rem, 3.5vw, 3rem);
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
color: var(--charcoal);
|
||||
}
|
||||
|
||||
.legal-page h2 {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--charcoal);
|
||||
margin: 2rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.legal-page h3 {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--stone-strong);
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.legal-page p,
|
||||
.legal-page address,
|
||||
.legal-page li {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.85;
|
||||
color: var(--stone-strong);
|
||||
}
|
||||
|
||||
.legal-page address {
|
||||
font-style: normal;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.legal-page ul {
|
||||
list-style: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.5rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.legal-page ul li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.legal-page a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgb(139 105 20 / 25%);
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s;
|
||||
}
|
||||
|
||||
.legal-page a:hover {
|
||||
color: var(--accent-strong);
|
||||
border-bottom-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.legal-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--warm);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.legal-back {
|
||||
display: inline-block;
|
||||
margin-top: 2.5rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
border-bottom: 1px solid var(--accent);
|
||||
padding-bottom: 2px;
|
||||
transition:
|
||||
color 0.2s,
|
||||
border-color 0.2s;
|
||||
}
|
||||
|
||||
.legal-back:hover {
|
||||
color: var(--accent-strong);
|
||||
border-bottom-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.legal-page {
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user