/* ==========================================================================
CLUB MAESTRO — stylesheet
--------------------------------------------------------------------------
Structure (search for the ALL-CAPS headers below to jump around):
1. Variables & reset
2. Base / typography
3. Utilities (container, buttons, reveal-on-scroll animation)
4. Header & navigation (incl. mobile hamburger menu)
5. Hero
6. About / stats
7. Services (cards)
8. Meniji (wedding menu pricing tiers)
9. Quick facts (FAQ accordion)
10. Gallery (filters + coverflow carousel)
11. Lightbox
12. Utisci (Google review testimonials)
13. Kontakt (inquiry form)
Responsive strategy: mobile overrides live in a media query directly
below the component they belong to (not collected at the bottom), so
each section is self-contained. Breakpoints used throughout:
480px – small phones
720px – phones / small tablets (portrait)
860px – tablets
960px – nav switches to hamburger below this
1100px – small laptops
========================================================================== */
/* --------------------------------------------------------------------------
1. Variables & reset
-------------------------------------------------------------------------- */
:root {
--color-black: #14120f;
--color-white: #faf8f4;
--color-gold: #b8925a;
--color-gold-dark: #9a7943;
--font-display: "Playfair Display", serif;
--font-body: "Montserrat", sans-serif;
--radius: 8px;
/* Theme tokens — these are the ones that actually flip between the
light and dark site themes (toggled via [data-theme] on ,
see script.js §1b). --color-black/--color-white above stay FIXED:
they're used for things that must always be dark or always be
white regardless of theme (hero overlay, header bar, contact
section, lightbox — see the "Deliberately fixed" comments next to
each). Never swap those for the tokens below. */
--surface: var(--color-white);
--surface-alt: #f1ebe1;
--ink: var(--color-black);
--ink-rgb: 20, 18, 15;
color-scheme: light;
}
:root[data-theme="dark"] {
--surface: #1b1815;
--surface-alt: #211d18;
--ink: var(--color-white);
--ink-rgb: 250, 248, 244;
color-scheme: dark;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
/* --------------------------------------------------------------------------
2. Base / typography
-------------------------------------------------------------------------- */
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--surface);
line-height: 1.6;
transition:
background-color 0.25s ease,
color 0.25s ease;
}
img {
display: block;
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
/* --------------------------------------------------------------------------
3. Utilities
-------------------------------------------------------------------------- */
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.center {
text-align: center;
}
/* Buttons */
.btn {
display: inline-block;
padding: 16px 32px;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--radius);
border: 1px solid transparent;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.btn-primary {
background: var(--color-gold);
color: var(--color-black);
}
.btn-primary:hover {
background: var(--color-gold-dark);
}
.btn-outline {
border-color: var(--color-white);
color: var(--color-white);
}
.btn-outline:hover {
background: var(--color-white);
color: var(--color-black);
}
.btn-small {
padding: 10px 20px;
font-size: 0.85rem;
}
/* Shared section heading (eyebrow + title + short gold rule) */
.section-heading {
text-align: center;
margin-bottom: 64px;
}
.section-heading .section-title {
margin-bottom: 20px;
}
.section-heading .section-rule {
width: 48px;
height: 2px;
background: var(--color-gold);
border: none;
margin: 0 auto;
}
.eyebrow {
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 20px;
}
.eyebrow-dark {
color: var(--color-gold-dark);
}
.section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.4rem);
margin: 16px 0 56px;
}
/* Generic scroll-reveal animation. Elements start hidden/offset and get
`.is-visible` added by an IntersectionObserver in script.js. */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --------------------------------------------------------------------------
4. Header & navigation
-------------------------------------------------------------------------- */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
padding: 28px 0;
/* Deliberately fixed dark (not theme-aware): this bar sits over the hero
photo in both light and dark site themes. */
background: rgba(20, 18, 15, 0.55);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: block;
}
.logo img {
height: 40px;
width: auto;
/* Client-supplied logo is dark; invert so it reads on the dark nav bar. */
filter: invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}
.main-nav {
display: flex;
align-items: center;
gap: 36px;
}
.main-nav a {
color: var(--color-white);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
/* CTA duplicated inside the mobile drawer; hidden on desktop where the
standalone .desktop-cta button is used instead. */
.main-nav .nav-cta {
display: none;
}
/* Close button only exists for the mobile drawer (see media query below). */
.nav-close {
display: none;
}
/* Light/dark theme toggle — sun/moon icon swapped via [data-theme] on
, set by script.js §1b. */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: none;
color: var(--color-white);
cursor: pointer;
}
.theme-toggle svg {
width: 20px;
height: 20px;
}
.icon-moon {
display: none;
}
:root[data-theme="dark"] .icon-sun {
display: none;
}
:root[data-theme="dark"] .icon-moon {
display: block;
}
.header-actions {
display: flex;
align-items: center;
}
.desktop-cta {
margin-left: 20px;
}
/* Hamburger button — hidden on desktop, shown ≤960px (see media query). */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
border: none;
background: none;
cursor: pointer;
padding: 0;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--color-white);
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
/* Animate the three bars into an X when the menu is open. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Header — mobile / tablet (≤960px): nav becomes a slide-in drawer */
@media (max-width: 960px) {
.main-nav {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(320px, 80vw);
background: var(--color-black);
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 28px;
padding: 32px;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 20;
}
.main-nav.is-open {
transform: translateX(0);
}
.main-nav .nav-cta {
display: inline-block;
}
.desktop-cta {
display: none;
}
/* Close (X) button pinned to the top of the drawer itself, since the
drawer (z-index 20) sits above the header's own hamburger button
(z-index 10) once open and would otherwise cover it. */
.nav-close {
display: block;
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border: none;
background: none;
color: var(--color-white);
font-size: 2rem;
line-height: 1;
cursor: pointer;
}
.nav-toggle {
display: flex;
}
}
/* Below 800px .desktop-cta is already hidden, so the theme toggle sits
right next to the hamburger — give it a bit more breathing room. */
@media (max-width: 800px) {
.theme-toggle {
margin-right: 16px;
}
}
/* --------------------------------------------------------------------------
5. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
/* Deliberately fixed dark (not theme-aware): a photo overlay, not a page
surface — must darken the image the same way in both site themes. */
background: linear-gradient(
180deg,
rgba(20, 18, 15, 0.72) 0%,
rgba(20, 18, 15, 0.68) 35%,
rgba(20, 18, 15, 0.85) 100%
);
}
.hero-content {
position: relative;
z-index: 1;
width: 100%;
padding-left: 500px;
padding-right: 24px;
padding-bottom: 80px;
}
.hero-inner {
color: var(--color-white);
max-width: 640px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 5vw, 3.8rem);
line-height: 1.15;
margin-bottom: 24px;
}
.hero-lead {
font-size: 1.2rem;
color: rgba(250, 248, 244, 0.9);
max-width: 560px;
margin-bottom: 36px;
}
/* Hero — large laptop (≤1500px): the fixed 500px offset starts crowding
the frame, so just nudge the text left. Photo composition still leaves
enough room here that the text size itself doesn't need to change. */
@media (max-width: 1500px) {
.hero-content {
padding-left: 150px;
}
.hero-inner {
max-width: 460px;
}
.hero h1 {
font-size: 2.8rem;
margin-bottom: 20px;
}
.hero-lead {
margin-bottom: 28px;
}
}
/* Hero — small laptop (≤1100px): reduce the fixed left offset further */
@media (max-width: 1100px) {
.hero-content {
padding-left: 64px;
}
}
/* Hero — ~1024px: at this width the text block itself starts overlapping
the couple in the photo, not just crowding the edge — shrink it down
instead of (or in addition to) repositioning. */
@media (max-width: 1024px) {
.hero-inner {
max-width: 420px;
}
.hero h1 {
font-size: 2.4rem;
margin-bottom: 16px;
}
.hero-lead {
font-size: 1rem;
margin-bottom: 24px;
}
}
/* Hero — tablet (≤860px): still using the full-height desktop layout (the
720px rewrite below hasn't kicked in yet), but the cover-cropped photo at
this width puts the couple further into frame — shrink the text block
again so it clears them. */
@media (max-width: 860px) {
.hero-inner {
max-width: 340px;
}
.hero h1 {
font-size: 1.5rem;
margin-bottom: 14px;
}
.hero-lead {
font-size: 0.8rem;
margin-bottom: 20px;
}
.hero .btn-primary {
font-size: 0.85rem;
text-align: center;
}
}
/* Hero — phones (≤720px): a full-viewport-height hero would crop the photo
down to a sliver at portrait ratios, so cap the height instead, and pull
the text size/spacing down so it doesn't collide with the fixed header. */
@media (max-width: 720px) {
.hero {
min-height: 125vw;
height: auto;
}
.hero-content {
padding-left: 24px;
padding-top: 190px;
padding-bottom: 60px;
}
.hero h1 {
font-size: 1.8rem;
margin-bottom: 16px;
}
.hero-lead {
font-size: 1rem;
margin-bottom: 24px;
}
.eyebrow {
margin-bottom: 12px;
}
}
/* --------------------------------------------------------------------------
6. About / stats
-------------------------------------------------------------------------- */
.about {
padding: 120px 0;
}
.about-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.about-text h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.25;
margin: 16px 0 24px;
}
.about-text p {
color: rgba(var(--ink-rgb), 0.75);
margin-bottom: 16px;
max-width: 480px;
}
.about-text p:last-child {
margin-bottom: 0;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.stat {
padding: 28px 24px;
border: 1px solid rgba(var(--ink-rgb), 0.12);
border-radius: var(--radius);
text-align: center;
}
/* Numbers are counted up from 0 by script.js when the stat scrolls into view. */
.stat-number {
display: block;
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 600;
color: var(--color-gold-dark);
margin-bottom: 8px;
}
.stat-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(var(--ink-rgb), 0.6);
}
/* About — tablet (≤860px): stack text above stats */
@media (max-width: 860px) {
.about {
padding: 80px 0;
}
.about-inner {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* About — small phones (≤480px): keep the 2x2 stat grid but tighten it up */
@media (max-width: 480px) {
.stats-grid {
gap: 16px;
}
}
/* --------------------------------------------------------------------------
7. Services (cards)
-------------------------------------------------------------------------- */
.services {
padding: 100px 0 120px;
background: var(--surface-alt);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* Each card is a full link to #kontakt, so the whole card is clickable. */
.service-card {
display: block;
background: var(--surface);
border-radius: var(--radius);
padding: 20px 20px 28px;
box-shadow:
0 2px 10px rgba(var(--ink-rgb), 0.06),
0 1px 2px rgba(var(--ink-rgb), 0.08);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow:
0 24px 40px rgba(var(--ink-rgb), 0.16),
0 4px 10px rgba(var(--ink-rgb), 0.08);
}
.service-media {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.service-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.service-card:hover .service-media img {
transform: scale(1.06);
}
.service-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.3rem;
margin: 20px 0 10px;
transition: color 0.25s ease;
}
.service-card:hover h3 {
color: var(--color-gold-dark);
}
.service-card p {
color: rgba(var(--ink-rgb), 0.7);
font-size: 0.95rem;
}
/* Services — tablet (≤860px): single column */
@media (max-width: 860px) {
.services {
padding-bottom: 80px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* --------------------------------------------------------------------------
8. Meniji (wedding menu pricing tiers)
-------------------------------------------------------------------------- */
.menus {
padding: 120px 0;
}
.menus-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
align-items: stretch;
}
.menu-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid rgba(var(--ink-rgb), 0.12);
border-radius: var(--radius);
padding: 40px 32px;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.menu-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 40px rgba(var(--ink-rgb), 0.14);
border-color: var(--color-gold);
}
/* The featured card is already lifted by -16px at rest; hovering any card
(including this one) should push it up further, not reset its offset. */
.menu-card-featured:hover {
transform: translateY(-24px);
box-shadow: 0 28px 48px rgba(var(--ink-rgb), 0.4);
}
/* The middle tier is nudged up and gets a gold border to read as the
recommended option, same pattern as most SaaS pricing tables. */
.menu-card-featured {
background: var(--color-black);
color: var(--color-white);
border-color: var(--color-gold);
transform: translateY(-16px);
}
.menu-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--color-gold);
color: var(--color-black);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 16px;
border-radius: var(--radius);
}
.menu-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.4rem;
margin-bottom: 12px;
}
.menu-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.menu-card-featured .menu-price {
border-bottom-color: rgba(250, 248, 244, 0.15);
}
.menu-price-amount {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 600;
color: var(--color-gold-dark);
}
.menu-card-featured .menu-price-amount {
color: var(--color-gold);
}
.menu-price-unit {
font-size: 0.8rem;
color: rgba(var(--ink-rgb), 0.55);
}
.menu-card-featured .menu-price-unit {
color: rgba(250, 248, 244, 0.6);
}
.menu-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 32px;
flex: 1;
}
.menu-items li {
font-size: 0.92rem;
padding-left: 22px;
position: relative;
color: rgba(var(--ink-rgb), 0.75);
}
.menu-card-featured .menu-items li {
color: rgba(250, 248, 244, 0.85);
}
/* Simple checkmark drawn with a rotated border instead of an icon font. */
.menu-items li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 6px;
height: 10px;
border-right: 2px solid var(--color-gold);
border-bottom: 2px solid var(--color-gold);
transform: rotate(45deg);
}
.menu-card .btn {
width: 100%;
text-align: center;
}
.btn-outline-dark {
border-color: rgba(var(--ink-rgb), 0.3);
color: var(--ink);
}
.btn-outline-dark:hover {
background: var(--ink);
color: var(--surface);
}
.menus-note {
text-align: center;
font-size: 0.85rem;
color: rgba(var(--ink-rgb), 0.5);
margin-top: 40px;
}
/* Meniji — tablet (≤960px): stack cards, drop the featured-card lift so
nothing looks misaligned in a single column */
@media (max-width: 960px) {
.menus {
padding: 80px 0;
}
.menus-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.menu-card-featured {
transform: none;
}
}
/* --------------------------------------------------------------------------
9. Quick facts (FAQ accordion)
-------------------------------------------------------------------------- */
.quick-facts {
padding: 72px 0;
border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}
.facts-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.fact-item {
border: 1px solid rgba(var(--ink-rgb), 0.12);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.fact-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: none;
background: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
}
.fact-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(var(--ink-rgb), 0.18);
display: flex;
align-items: center;
justify-content: center;
color: rgba(var(--ink-rgb), 0.55);
}
.fact-icon svg {
width: 20px;
height: 20px;
}
.fact-text {
flex: 1;
display: flex;
flex-direction: column;
}
.fact-label {
font-size: 0.85rem;
color: rgba(var(--ink-rgb), 0.55);
}
.fact-value {
font-size: 0.98rem;
font-weight: 600;
color: var(--color-gold-dark);
}
.fact-chevron {
flex-shrink: 0;
width: 20px;
height: 20px;
color: rgba(var(--ink-rgb), 0.45);
transition: transform 0.25s ease;
}
.fact-trigger[aria-expanded="true"] .fact-chevron {
transform: rotate(180deg);
}
/* Accordion open/close uses a 0fr → 1fr grid-row trick so the answer can
animate its height without knowing the content's height up front. */
.fact-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.fact-answer p {
overflow: hidden;
padding: 0 20px 0 78px;
color: rgba(var(--ink-rgb), 0.7);
font-size: 0.92rem;
line-height: 1.6;
}
.fact-item.is-open .fact-answer {
grid-template-rows: 1fr;
}
.fact-item.is-open .fact-answer p {
padding-bottom: 20px;
}
/* Quick facts — phones (≤720px): single column, answer text starts at the
left edge instead of being indented under the (now smaller) icon column. */
@media (max-width: 720px) {
.facts-list {
grid-template-columns: 1fr;
}
.fact-answer p {
padding-left: 20px;
}
}
/* --------------------------------------------------------------------------
10. Gallery (filters + coverflow carousel)
-------------------------------------------------------------------------- */
.gallery {
padding: 120px 0;
}
/* -- Filter pills -- */
.gallery-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 56px;
}
.filter-pill {
padding: 10px 22px;
border: 1px solid rgba(var(--ink-rgb), 0.15);
/* Fully-rounded pills are an explicit exception to the site's normal
max-8px corner-radius rule, agreed with the client for this control. */
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.filter-pill:hover {
border-color: var(--color-gold);
}
.filter-pill.is-active {
background: var(--color-black);
color: var(--color-white);
border-color: var(--color-black);
}
/* -- Coverflow carousel --
Slide position/scale/opacity are set inline by script.js (renderCarousel),
based on each slide's offset from the centered index. The CSS below just
defines the base look and the transition so those inline style changes
animate smoothly. */
.carousel {
position: relative;
/* Clips slides that sit far off-center so they never cause page-wide
horizontal scroll on narrow viewports (real bug we hit — see js). */
overflow: hidden;
}
.carousel-track {
position: relative;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-item {
position: absolute;
width: 322px;
aspect-ratio: 3 / 4;
border: none;
padding: 0;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
background: none;
box-shadow: 0 24px 48px rgba(var(--ink-rgb), 0.2);
transition:
transform 0.5s ease,
opacity 0.5s ease,
box-shadow 0.5s ease;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* The hover caption effect (see .gallery-caption below) isn't needed on the
already-labelled carousel slides — keep captions permanently visible. */
.carousel-item .gallery-caption {
opacity: 1;
}
.carousel-nav {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 32px;
}
.carousel-arrow {
width: 48px;
height: 48px;
/* Circular icon buttons — same explicit exception as the filter pills. */
border-radius: 50%;
border: 1px solid rgba(var(--ink-rgb), 0.2);
background: var(--surface);
color: var(--ink);
font-size: 1.2rem;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.carousel-arrow:hover {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-white);
}
/* Caption overlay shared by carousel slides (kept visible) and any other
.gallery-caption usage (hover-to-reveal). */
.gallery-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 32px 16px 14px;
/* Deliberately fixed dark (not theme-aware): a photo overlay, same as
the hero gradient above. */
background: linear-gradient(
180deg,
rgba(20, 18, 15, 0) 0%,
rgba(20, 18, 15, 0.75) 100%
);
color: var(--color-white);
font-size: 0.85rem;
font-weight: 500;
text-align: left;
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.gallery-item:hover .gallery-caption {
opacity: 1;
transform: translateY(0);
}
/* Gallery — tablet (≤860px): tighter section padding */
@media (max-width: 860px) {
.gallery {
padding: 80px 0;
}
}
/* Gallery — phones (≤720px): smaller carousel so slides don't overflow */
@media (max-width: 720px) {
.carousel-track {
height: 390px;
}
.carousel-item {
width: 253px;
}
}
/* --------------------------------------------------------------------------
11. Lightbox
-------------------------------------------------------------------------- */
.lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 100;
/* Deliberately fixed dark (not theme-aware): a full-screen photo
backdrop, same in both site themes. */
background: rgba(20, 18, 15, 0.92);
align-items: center;
justify-content: center;
padding: 40px;
}
.lightbox.is-open {
display: flex;
}
.lightbox img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius);
}
.lightbox-close {
position: absolute;
top: 24px;
right: 32px;
background: none;
border: none;
color: var(--color-white);
font-size: 2.4rem;
line-height: 1;
cursor: pointer;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(250, 248, 244, 0.12);
border: none;
color: var(--color-white);
width: 52px;
height: 52px;
border-radius: var(--radius);
font-size: 2rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s ease;
}
.lightbox-nav:hover {
background: rgba(250, 248, 244, 0.24);
}
.lightbox-prev {
left: 24px;
}
.lightbox-next {
right: 24px;
}
/* Lightbox — phones (≤720px): smaller nav buttons */
@media (max-width: 720px) {
.lightbox-nav {
width: 44px;
height: 44px;
font-size: 1.6rem;
}
}
/* --------------------------------------------------------------------------
12. Utisci (Google review testimonials)
-------------------------------------------------------------------------- */
.testimonials {
padding: 120px 0;
background: var(--surface-alt);
}
.rating-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 56px;
}
.rating-score {
font-family: var(--font-display);
font-weight: 600;
font-size: 2.8rem;
color: var(--color-gold-dark);
}
.rating-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.rating-stars {
color: var(--color-gold);
letter-spacing: 2px;
font-size: 1.1rem;
}
.rating-count {
font-size: 0.85rem;
color: rgba(var(--ink-rgb), 0.6);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: var(--surface);
border-radius: var(--radius);
padding: 32px;
box-shadow: 0 2px 10px rgba(var(--ink-rgb), 0.06);
}
.testimonial-card p {
font-family: var(--font-body);
font-style: italic;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
color: var(--ink);
}
.testimonial-card footer {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-gold-dark);
}
/* Utisci — tablet (≤960px): two columns */
@media (max-width: 960px) {
.testimonials-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Utisci — phones (≤720px): single column, tighter padding */
@media (max-width: 720px) {
.testimonials {
padding: 80px 0;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.rating-summary {
flex-direction: column;
gap: 8px;
text-align: center;
}
}
/* --------------------------------------------------------------------------
13. Kontakt (inquiry form)
-------------------------------------------------------------------------- */
.contact {
padding: 120px 0;
background: var(--color-black);
color: var(--color-white);
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
}
.contact-info h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.25;
margin: 16px 0 20px;
}
.contact-lead {
color: rgba(250, 248, 244, 0.75);
max-width: 420px;
margin-bottom: 40px;
}
.contact-details {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-details li {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 16px;
border-top: 1px solid rgba(250, 248, 244, 0.15);
}
.contact-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(250, 248, 244, 0.5);
}
.contact-value {
font-size: 1.05rem;
font-weight: 500;
}
a.contact-value:hover {
color: var(--color-gold);
}
.contact-map {
position: relative;
display: block;
margin-top: 32px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(250, 248, 244, 0.15);
cursor: pointer;
}
.contact-map iframe {
display: block;
width: 100%;
height: 220px;
border: 0;
/* Grayscale-to-color on hover keeps the map from fighting the section's
dark, editorial tone while still reading as an interactive map. */
filter: grayscale(1) contrast(1.1) brightness(0.9);
transition: filter 0.3s ease;
/* The link (this element's parent ) should catch every click so it
always opens Google Maps in a new tab — an iframe would otherwise
swallow clicks for its own pan/zoom controls instead. */
pointer-events: none;
}
.contact-map:hover iframe {
filter: grayscale(0);
}
/* -- Form -- */
.contact-form-wrap {
position: relative;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
transition:
filter 0.3s ease,
opacity 0.3s ease;
}
/* Blurred (not removed) behind the success banner, so the layout doesn't
jump and there's still a visual trace of what was just submitted. */
.contact-form.is-sent {
filter: blur(6px);
opacity: 0.4;
pointer-events: none;
}
.form-success {
display: none;
position: absolute;
inset: 0;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
padding: 32px;
}
.form-success.is-visible {
display: flex;
}
.form-success-icon {
width: 48px;
height: 48px;
color: var(--color-gold);
}
.form-success h3 {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--color-white);
}
.form-success p {
color: rgba(250, 248, 244, 0.75);
max-width: 32ch;
}
.form-success .btn {
margin-top: 8px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.85rem;
color: rgba(250, 248, 244, 0.7);
}
.form-field input,
.form-field select,
.form-field textarea {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-white);
background: rgba(250, 248, 244, 0.06);
border: 1px solid rgba(250, 248, 244, 0.2);
border-radius: var(--radius);
padding: 12px 14px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-gold);
}
.form-field textarea {
resize: vertical;
font-family: var(--font-body);
}
/* Select options render with the browser's native (light) styling — force
a dark background so the dropdown stays readable against this section's
dark theme regardless of platform default. */
.form-field select option {
background: var(--color-black);
color: var(--color-white);
}
.contact-form .btn {
align-self: flex-start;
}
.form-field.has-error input,
.form-field.has-error select {
border-color: #d16b5c;
}
.form-status {
font-size: 0.9rem;
color: var(--color-gold);
min-height: 1.2em;
}
.form-status.is-error {
color: #d16b5c;
}
/* Kontakt — tablet (≤860px): stack info above the form */
@media (max-width: 860px) {
.contact {
padding: 80px 0;
}
.contact-inner {
grid-template-columns: 1fr;
gap: 48px;
}
}
/* Kontakt — phones (≤600px): single-column form fields */
@media (max-width: 600px) {
.form-row {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* --------------------------------------------------------------------------
14. Footer
-------------------------------------------------------------------------- */
.site-footer {
/* Deliberately fixed dark (not theme-aware): matches the header/hero
bars, which stay black regardless of the light/dark site theme. */
background: var(--color-black);
color: rgba(250, 248, 244, 0.7);
}
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 48px;
padding: 72px 0 48px;
}
.footer-logo {
display: inline-block;
}
.footer-logo img {
height: 34px;
width: auto;
filter: invert(1);
}
.footer-tagline {
margin-top: 16px;
font-size: 0.9rem;
line-height: 1.6;
max-width: 32ch;
}
.footer-social {
display: flex;
gap: 12px;
margin-top: 24px;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%; /* circular icon buttons — same documented exception
to the 8px-max rule used for the carousel arrows
and quick-facts icons. */
border: 1px solid rgba(250, 248, 244, 0.25);
color: var(--color-white);
transition:
border-color 0.2s ease,
color 0.2s ease;
}
.footer-social a:hover {
border-color: var(--color-gold);
color: var(--color-gold);
}
.footer-social svg {
width: 17px;
height: 17px;
}
.footer-nav,
.footer-contact {
display: flex;
flex-direction: column;
gap: 14px;
font-size: 0.9rem;
}
.footer-nav a,
.footer-contact a,
.footer-contact span {
color: inherit;
}
.footer-nav a:hover,
.footer-contact a:hover {
color: var(--color-gold);
}
.footer-heading {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 4px;
}
.footer-bottom {
border-top: 1px solid rgba(250, 248, 244, 0.12);
}
.footer-bottom p {
padding: 20px 0;
font-size: 0.8rem;
text-align: center;
}
/* Footer — tablet (≤860px): two columns, brand spans full width */
@media (max-width: 860px) {
.footer-inner {
grid-template-columns: 1fr 1fr;
padding: 56px 0 32px;
}
.footer-brand {
grid-column: 1 / -1;
}
}
/* Footer — phones (≤600px): single column, stacked */
@media (max-width: 600px) {
.footer-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-brand {
grid-column: auto;
}
}