/* =========================================================================
Malířské práce Litoměřice — Michal Varchol
Stylesheet — vanilla CSS, no build step.
Fonts (Fraunces, Inter) are expected to be loaded via tags in the
HTML (Google Fonts or self-hosted). This file only references the
family names through --font-heading / --font-body and falls back to
Georgia / system sans if they are not loaded, so the page never blocks
on a CSS @import.
Table of contents:
1. Design tokens
2. Reset & base
3. Utilities (skip-link, visually-hidden, container, section-marker, etc.)
4. Buttons
5. Header & navigation
6. Hero
7. Photo placeholders (masking-tape motif)
8. Section shell + per-section variants
9. O mně
10. Služby
11. Galerie + lightbox
12. Kontakt + form
13. Footer
14. Responsive breakpoints
15. Reduced motion
========================================================================= */
/* -------------------------------------------------------------------------
1. Design tokens
------------------------------------------------------------------------- */
:root{
--bg:#FAF6EF;
--bg-alt:#F1E9DB;
--fg:#24272B;
--muted:#5C5F63;
--primary:#2E3237;
--primary-dark:#17191C;
--accent:#8B5E3C;
--accent-2:#C39A66;
--accent-fg:#FDF9F2;
--line:#E4D7C3;
--font-heading:'Fraunces', Georgia, serif;
--font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--container:1180px;
--gutter:24px;
--header-height:76px;
--radius-sm:4px;
--radius-md:10px;
--radius-pill:999px;
--space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px;
--space-md:24px; --space-lg:40px; --space-xl:64px; --space-2xl:96px; --space-3xl:128px;
/* derived, not part of the fixed palette */
--error-text:#B23B1F;
--shadow-card: 0 10px 30px -12px rgba(36,39,43,.28);
--shadow-sm: 0 2px 10px -4px rgba(36,39,43,.2);
}
/* -------------------------------------------------------------------------
2. Reset & base
------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
*{ margin:0; }
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
main section[id]{ scroll-margin-top:var(--header-height); }
body{
font-family:var(--font-body);
font-size:1rem;
line-height:1.6;
color:var(--fg);
background:var(--bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img, picture, svg{ max-width:100%; display:block; }
ul, ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{
font:inherit;
color:inherit;
background:none;
border:none;
}
button{ cursor:pointer; }
h1, h2, h3, h4{
font-family:var(--font-heading);
font-weight:600;
line-height:1.15;
color:var(--fg);
}
h1{ font-weight:700; }
p{ line-height:1.6; }
/* Visible focus for every interactive element, never suppressed without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
outline:2px solid var(--primary);
outline-offset:3px;
border-radius:var(--radius-sm);
}
/* -------------------------------------------------------------------------
3. Utilities
------------------------------------------------------------------------- */
.container{
width:100%;
max-width:var(--container);
margin-inline:auto;
padding-inline:var(--gutter);
}
.visually-hidden{
position:absolute;
width:1px; height:1px;
padding:0; margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.skip-link{
position:absolute;
left:-9999px;
top:0;
background:var(--fg);
color:var(--bg);
padding:10px 18px;
z-index:100;
border-radius:0 0 var(--radius-sm) 0;
font-weight:600;
}
.skip-link:focus{
left:0;
}
.placeholder-note{
font-style:italic;
color:var(--muted);
border-bottom:1px dashed var(--accent);
padding-bottom:1px;
}
.section-intro{
max-width:640px;
margin-bottom:var(--space-lg);
color:var(--muted);
font-size:1.05rem;
}
/* Paint-swatch strip — signature motif #1, used as a section marker above H2 */
.section-marker{
display:flex;
align-items:center;
gap:6px;
margin-bottom:var(--space-sm);
}
.section-marker__chip{
width:20px;
height:8px;
border-radius:2px;
display:inline-block;
}
.section-marker__chip:nth-child(2){ transform:translateY(2px); }
.section-marker__chip:nth-child(3){ transform:translateY(-1px); }
.section-marker__chip--1{ background:var(--primary); }
.section-marker__chip--2{ background:var(--accent); }
.section-marker__chip--3{ background:var(--accent-2); }
h2{
font-size:clamp(1.8rem, 3.5vw, 2.6rem);
font-weight:600;
margin-bottom:var(--space-md);
}
h3{
font-size:1.15rem;
font-weight:600;
}
/* -------------------------------------------------------------------------
4. Buttons
------------------------------------------------------------------------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px 30px;
border-radius:var(--radius-pill);
font-weight:600;
font-size:0.98rem;
line-height:1;
white-space:nowrap;
border:1.5px solid transparent;
transition:transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{
opacity:.65;
cursor:not-allowed;
transform:none;
}
.btn--primary{
background:var(--primary);
color:var(--accent-fg);
box-shadow:var(--shadow-sm);
}
.btn--primary:hover{
background:var(--primary-dark);
}
.btn--secondary{
background:transparent;
color:var(--fg);
border-color:var(--fg);
padding:10px 24px;
}
.btn--secondary:hover{
background:var(--fg);
color:var(--bg);
}
/* -------------------------------------------------------------------------
5. Header & navigation
------------------------------------------------------------------------- */
.site-header{
position:sticky;
top:0;
z-index:50;
background:var(--bg);
border-bottom:1px solid var(--line);
height:var(--header-height);
}
.site-header__inner{
height:100%;
max-width:var(--container);
margin-inline:auto;
padding-inline:var(--gutter);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-md);
}
.wordmark{
display:flex;
flex-direction:column;
line-height:1.05;
font-family:var(--font-heading);
color:var(--fg);
}
.wordmark__line1{
font-size:1.05rem;
font-weight:700;
letter-spacing:.01em;
}
.wordmark__line2{
font-size:.72rem;
font-weight:500;
font-family:var(--font-body);
text-transform:uppercase;
letter-spacing:.14em;
color:var(--muted);
margin-top:2px;
}
.wordmark--footer{
color:var(--accent-fg);
}
.wordmark--footer .wordmark__line2{
color:rgba(253,249,242,.68);
}
/* Hamburger toggle — visible on mobile only (see breakpoints) */
.nav-toggle{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
width:40px;
height:40px;
border-radius:var(--radius-sm);
flex-shrink:0;
}
.nav-toggle__bar{
display:block;
width:22px;
height:2px;
background:var(--fg);
border-radius:2px;
transition:transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){
opacity:0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
.primary-nav__list{
display:flex;
align-items:center;
gap:var(--space-lg);
}
.primary-nav__link{
position:relative;
font-size:.95rem;
font-weight:500;
color:var(--fg);
padding:6px 2px;
transition:color 150ms ease;
}
.primary-nav__link::after{
content:"";
position:absolute;
left:0; right:100%;
bottom:0;
height:2px;
background:var(--accent);
transition:right 200ms ease;
}
.primary-nav__link:hover{ color:var(--primary-dark); }
.primary-nav__link:hover::after,
.primary-nav__link.is-active::after{
right:0;
}
.primary-nav__link.is-active{
color:var(--primary-dark);
font-weight:600;
}
.primary-nav__cta-group{
display:flex;
align-items:center;
gap:var(--space-2xs);
margin-left:var(--space-sm);
}
.primary-nav__cta{
padding:13px 26px;
font-size:1rem;
}
.primary-nav__cta--secondary{
padding:10px 22px;
font-size:.92rem;
}
/* -------------------------------------------------------------------------
6. Hero
------------------------------------------------------------------------- */
.hero{
position:relative;
min-height:78vh;
display:flex;
align-items:flex-end;
overflow:hidden;
}
.hero__media{
position:absolute;
inset:0;
}
.hero__media .photo-placeholder--hero{
width:100%;
height:100%;
}
/* Icon+caption sit near the top instead of dead-center: the real h1/
subtitle/buttons are anchored to the bottom of this same box (see
.hero) and can grow tall on narrow viewports, so a centered caption
would collide with them. Scoped to the empty state only — the filled
variant holds a real photo that must reach the very top of the hero
band flush against the header, with no reserved gap above it. */
.hero__media .photo-placeholder--hero:not(.photo-placeholder--filled){
justify-content:flex-start;
padding-top:calc(var(--header-height) + var(--space-2xs));
}
/* Warm bronze-black replaces the old neutral anthracite tint so the existing
wood tones and spotlight highlights in the photo read as golden dusk
rather than being grayed down — the darkening needed for text contrast
comes from the alpha ramp, the hue shift is what adds the "gold" cast. */
.hero__scrim{
position:absolute;
inset:0;
/* Lighter on mobile/tablet — the darker warm value below is restored
for desktop only (>=1025px), where the taller hero has more room
and the client feedback about a too-dark photo was mobile-first. */
background:linear-gradient(180deg, rgba(58,38,14,.06), rgba(32,20,8,.44));
}
/* Soft gold bloom over the wall-lamp highlights (upper-left of the photo),
blended so it amplifies the light already in the shot instead of tinting
the whole frame flat. Sits under .hero__scrim so the bottom text-legibility
darkening still wins near the headline. */
.hero__glow{
position:absolute;
inset:0;
background:radial-gradient(60% 55% at 20% 8%, rgba(230,184,90,.55), transparent 70%);
mix-blend-mode:soft-light;
pointer-events:none;
}
.hero__content{
position:relative;
z-index:1;
max-width:680px;
margin-left:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
padding:var(--space-2xl) 0 var(--space-2xl);
}
/* Gold paint-swatch marker, hero-only variant of .section-marker used
elsewhere on the page — same chip shape, warmer metallic hues, so the
"premium" cue reads as this site's existing motif rather than a bolted-on
luxury cliché. */
.hero__marker{
display:flex;
align-items:center;
gap:6px;
margin-bottom:var(--space-sm);
animation:hero-meteor .95s both;
}
.hero__marker-chip{
width:22px;
height:8px;
border-radius:2px;
display:inline-block;
}
.hero__marker-chip:nth-child(2){ transform:translateY(2px); }
.hero__marker-chip:nth-child(3){ transform:translateY(-1px); }
.hero__marker-chip--1{ background:#8A6A2A; }
.hero__marker-chip--2{ background:#D9B45B; }
.hero__marker-chip--3{ background:#F0D48A; }
.hero__title{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(2.4rem, 5.5vw, 4.2rem);
line-height:1.08;
color:var(--accent-fg);
animation:hero-meteor .95s both;
}
.hero__subtitle{
margin-top:var(--space-sm);
font-size:clamp(1.05rem, 1.6vw, 1.25rem);
color:rgba(253,249,242,.92);
max-width:52ch;
animation:hero-meteor .95s .12s both;
}
.hero__actions{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:var(--space-sm) var(--space-md);
margin-top:var(--space-lg);
animation:hero-meteor .95s .24s both;
}
/* Diagonal streak-in with a motion-blur trail and a slight overshoot on
impact before settling — each keyframe sets its own timing-function so
the flight (fast, eased-in) reads differently from the landing (soft
settle) rather than one blended curve across the whole animation. */
@keyframes hero-meteor{
0%{
opacity:0;
transform:translate3d(260px, -190px, 0) rotate(-14deg) scale(.8);
filter:blur(8px);
animation-timing-function:cubic-bezier(.36,.66,.15,1);
}
65%{
opacity:1;
filter:blur(0);
}
78%{
transform:translate3d(-10px, 6px, 0) rotate(1.5deg) scale(1.02);
filter:blur(0);
animation-timing-function:ease-out;
}
100%{
opacity:1;
transform:translate3d(0, 0, 0) rotate(0deg) scale(1);
filter:blur(0);
}
}
.hero__actions .btn--secondary{
border-color:rgba(253,249,242,.75);
color:var(--accent-fg);
margin-top:10px; /* deliberate offset so the pair isn't mechanically centered */
}
.hero__actions .btn--secondary:hover{
background:rgba(253,249,242,.14);
color:var(--accent-fg);
}
/* Thin gold ring on the hero's primary CTA only — a premium touch on the
button the client actually looks at, not a global button restyle. */
.hero__actions .btn--primary{
box-shadow:var(--shadow-sm), 0 0 0 1px rgba(217,180,91,.55);
}
.hero__actions .btn--primary:hover{
box-shadow:var(--shadow-sm), 0 0 0 1px rgba(240,212,138,.8), 0 6px 20px -6px rgba(154,116,42,.55);
}
.hero__stats{
position:relative;
z-index:2;
margin-top:-36px;
margin-inline:var(--gutter);
width:fit-content;
max-width:calc(100% - var(--gutter) * 2);
background:var(--bg);
box-shadow:var(--shadow-card);
border-radius:var(--radius-md);
padding:var(--space-md) var(--space-lg);
}
.stat-strip{
display:flex;
flex-wrap:wrap;
gap:var(--space-xl);
}
.stat-strip__item{
display:flex;
flex-direction:column;
gap:2px;
}
.stat-strip__num{
font-family:var(--font-heading);
font-weight:700;
font-size:1.6rem;
color:var(--primary-dark);
}
/* Hero stats card only — gold numerals to match the hero's premium accent,
the rest of the card (label, background) stays on the neutral palette. */
.hero__stats .stat-strip__num{
color:#A9812F;
}
.stat-strip__label{
font-size:.85rem;
color:var(--muted);
}
/* -------------------------------------------------------------------------
7. Photo placeholders — masking-tape motif #2
------------------------------------------------------------------------- */
.photo-placeholder{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:var(--space-2xs);
background:var(--bg-alt);
border:1px dashed var(--line);
border-radius:var(--radius-sm);
overflow:hidden;
text-align:center;
padding:var(--space-md);
}
.photo-placeholder__icon{
width:48px;
height:48px;
color:var(--muted);
}
.photo-placeholder__icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
}
.photo-placeholder__caption{
font-size:.82rem;
color:var(--muted);
max-width:28ch;
}
.photo-placeholder--hero{
aspect-ratio:21/9;
border-radius:0;
}
.photo-placeholder--portrait{
aspect-ratio:4/5;
}
.photo-placeholder--gallery{
aspect-ratio:3/4;
}
.photo-placeholder--leseni{
aspect-ratio:3/2;
}
/* Filled variant — holds a real ![]()
instead of the empty-state icon+caption.
Reuses the same aspect-ratio/tape rules above, just swaps the dashed
"waiting for a photo" look for a solid frame around the actual photo. */
.photo-placeholder--filled{
padding:0;
border-style:solid;
border-color:var(--line);
background:var(--bg-alt);
}
.photo-placeholder--filled img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.photo-placeholder--hero.photo-placeholder--filled{
border:0;
}
.hero__media .photo-placeholder--filled img{
object-position:50% 50%;
}
/* Masking-tape corners */
.photo-placeholder__tape{
position:absolute;
width:46px;
height:18px;
top:-6px;
background:rgba(247,242,234,.9);
box-shadow:0 2px 4px rgba(36,39,43,.18);
z-index:1;
}
.photo-placeholder__tape--left{
left:14px;
transform:rotate(-6deg);
}
.photo-placeholder__tape--right{
right:14px;
transform:rotate(4deg);
}
/* The hero placeholder is full-bleed, no tape corners needed on it */
.photo-placeholder--hero .photo-placeholder__tape{
display:none;
}
/* -------------------------------------------------------------------------
8. Section shell
------------------------------------------------------------------------- */
.section{
padding:var(--space-2xl) 0;
}
.section--alt{
background:var(--bg-alt);
}
.section--o-nas{
padding-top:var(--space-3xl);
}
.section--sluzby{
padding-block:var(--space-xl);
}
.section--galerie{
padding-block:var(--space-2xl);
}
.section--kontakt{
padding-top:var(--space-2xl);
padding-bottom:var(--space-xl);
}
.section--leseni{
padding-block:var(--space-xl);
}
/* -------------------------------------------------------------------------
9. O mně
------------------------------------------------------------------------- */
.o-nas__grid{
display:grid;
grid-template-columns:1.3fr 1fr;
align-items:start;
gap:var(--space-xl);
}
.o-nas__text p + p{
margin-top:var(--space-sm);
}
.o-nas__text{
color:var(--fg);
}
.value-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--space-md);
margin-top:var(--space-xl);
}
.value-grid__item{
display:flex;
flex-direction:column;
gap:var(--space-2xs);
}
.value-grid__icon{
width:36px;
height:36px;
color:var(--primary);
}
.value-grid__icon svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
}
.value-grid__item h3{
font-size:1.02rem;
}
.value-grid__item p{
font-size:.92rem;
color:var(--muted);
}
/* Featured item gets its own typographic weight instead of a repeated card
pattern — hierarchy through scale, not a 4th identical box. */
.value-grid__item--featured .value-grid__icon{
width:44px;
height:44px;
}
.value-grid__item--featured h3{
font-size:1.4rem;
}
.value-grid__item--featured p{
font-size:.98rem;
color:var(--fg);
}
/* -------------------------------------------------------------------------
10. Služby
------------------------------------------------------------------------- */
.services-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-md);
margin-top:var(--space-xl);
}
.services-grid__item{
background:var(--bg);
border:1px solid var(--line);
border-radius:var(--radius-md);
padding:var(--space-lg) var(--space-md);
}
.services-grid__item h3{
margin-bottom:var(--space-2xs);
}
.services-grid__item p{
color:var(--muted);
font-size:.95rem;
}
.services-grid__item--lead{
grid-column:span 2;
grid-row:span 1;
background:var(--primary);
border-color:var(--primary);
}
.services-grid__item--lead h3,
.services-grid__item--lead p{
color:var(--accent-fg);
}
.services-grid__item--lead p{
color:rgba(253,249,242,.86);
}
/* -------------------------------------------------------------------------
10b. Reference
------------------------------------------------------------------------- */
.section--reference{
padding-block:var(--space-xl);
}
.reference-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-md);
margin-top:var(--space-xl);
}
.reference-grid__item{
display:flex;
flex-direction:column;
gap:var(--space-sm);
background:var(--bg-alt);
border:1px solid var(--line);
border-radius:var(--radius-md);
padding:var(--space-lg) var(--space-md);
}
.reference-grid__stars{
color:var(--accent);
font-size:1rem;
letter-spacing:2px;
}
.reference-grid__quote p{
color:var(--fg);
font-size:.95rem;
}
.reference-grid__meta{
display:flex;
flex-direction:column;
gap:2px;
margin-top:auto;
}
.reference-grid__name{
font-style:normal;
font-weight:600;
font-size:.92rem;
}
.reference-grid__date{
font-size:.8rem;
color:var(--muted);
}
/* Featured item carries the longest quote and sets the tone for the row —
scaled up instead of repeating the same card three identical times. */
.reference-grid__item--featured{
grid-column:span 2;
background:var(--bg);
border-color:var(--primary);
}
.reference-grid__item--featured .reference-grid__quote p{
font-family:var(--font-heading);
font-size:1.15rem;
line-height:1.4;
}
.reference-cta{
margin-top:var(--space-lg);
}
/* -------------------------------------------------------------------------
11. Galerie — kategorie, modal + lightbox
------------------------------------------------------------------------- */
.gallery-categories{
display:grid;
grid-template-columns:1fr;
gap:var(--space-lg) var(--space-md);
/* Peeking photos are rotated and can grow past their box on hover — a
little inline breathing room plus a hard clip keeps them from ever
pushing the page into horizontal scroll on narrow viewports. */
padding-inline:10px;
overflow-x:hidden;
}
.gallery-card{
position:relative;
display:flex;
flex-direction:column;
text-align:left;
transition:transform 220ms ease;
}
.gallery-card:hover,
.gallery-card:focus-visible{
transform:translateY(-4px);
}
/* Positioning context scoped to just the photo's own box — not the whole
card, which also includes the label text below it. */
.gallery-card__photo{
position:relative;
display:block;
}
.gallery-card__stack{
position:absolute;
inset:0;
pointer-events:none;
}
/* Photos tucked behind the main shot, peeking out at the edges — revealed
further on hover/focus so the stack reads as interactive, not just decor. */
.gallery-card__peek{
position:absolute;
display:block;
width:48%;
aspect-ratio:3/4;
border:6px solid var(--bg);
border-radius:var(--radius-sm);
box-shadow:var(--shadow-sm);
overflow:hidden;
background:var(--bg-alt);
transition:transform 220ms ease;
}
.gallery-card__peek img{
width:100%;
height:100%;
object-fit:cover;
}
.gallery-card__peek--1{
right:1%;
bottom:8%;
transform:rotate(7deg);
}
.gallery-card__peek--2{
left:1%;
bottom:2%;
transform:rotate(-9deg);
}
.gallery-card__peek--3{
right:16%;
bottom:1%;
transform:rotate(3deg);
}
.gallery-card:hover .gallery-card__peek--1,
.gallery-card:focus-visible .gallery-card__peek--1{
transform:rotate(9deg) translate(4%, 3%);
}
.gallery-card:hover .gallery-card__peek--2,
.gallery-card:focus-visible .gallery-card__peek--2{
transform:rotate(-12deg) translate(-4%, 4%);
}
.gallery-card:hover .gallery-card__peek--3,
.gallery-card:focus-visible .gallery-card__peek--3{
transform:rotate(5deg) translate(3%, 4%);
}
.gallery-card__main{
position:relative;
z-index:1;
display:block;
aspect-ratio:3/4;
border-radius:var(--radius-sm);
border:1px solid var(--line);
background:var(--bg-alt);
overflow:hidden;
box-shadow:var(--shadow-card);
}
.gallery-card__main img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform 260ms ease;
}
.gallery-card:hover .gallery-card__main img,
.gallery-card:focus-visible .gallery-card__main img{
transform:scale(1.04);
}
.gallery-card__tape{
position:absolute;
width:46px;
height:18px;
top:-6px;
background:rgba(247,242,234,.9);
box-shadow:0 2px 4px rgba(36,39,43,.18);
z-index:2;
}
.gallery-card__tape--left{ left:14px; transform:rotate(-6deg); }
.gallery-card__tape--right{ right:14px; transform:rotate(4deg); }
.gallery-card__label{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:2px;
margin-top:var(--space-sm);
}
.gallery-card__title{
font-family:var(--font-heading);
font-weight:600;
font-size:1.1rem;
color:var(--fg);
}
.gallery-card__desc{
font-size:.88rem;
color:var(--muted);
}
.gallery-card__count{
margin-top:2px;
font-size:.78rem;
font-weight:500;
color:var(--accent);
}
/* Featured card (Dřevěné fasády) gets a taller stack and a slightly larger
title instead of repeating the same card five identical times. */
.gallery-card--featured .gallery-card__main{
aspect-ratio:4/5;
}
.gallery-card--featured .gallery-card__title{
font-size:1.3rem;
}
/* ---- Category modal — opens on card click, shows the full photo set ---- */
.category-modal[hidden]{
display:none;
}
.category-modal{
position:fixed;
inset:0;
z-index:200;
display:flex;
align-items:center;
justify-content:center;
padding:var(--space-md);
}
.category-modal__backdrop{
position:absolute;
inset:0;
background:rgba(36,39,43,.85);
}
.category-modal__panel{
position:relative;
z-index:1;
width:100%;
max-width:1040px;
max-height:88vh;
overflow-y:auto;
background:var(--bg);
border-radius:var(--radius-md);
padding:var(--space-lg);
box-shadow:var(--shadow-card);
}
.category-modal__close{
position:sticky;
float:right;
top:0;
margin-left:var(--space-sm);
width:36px;
height:36px;
border-radius:50%;
background:var(--fg);
color:var(--bg);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
box-shadow:var(--shadow-sm);
z-index:2;
}
.category-modal__header{
margin-bottom:var(--space-md);
padding-right:var(--space-xl);
}
.category-modal__title{
font-size:clamp(1.4rem, 2.6vw, 1.8rem);
margin-bottom:4px;
}
.category-modal__desc{
color:var(--muted);
font-size:.95rem;
}
.category-modal__grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:var(--space-2xs);
}
.category-modal__item{
position:relative;
aspect-ratio:3/4;
border-radius:var(--radius-sm);
overflow:hidden;
background:var(--bg-alt);
border:1px solid var(--line);
transition:transform 180ms ease, box-shadow 180ms ease;
}
.category-modal__item:hover,
.category-modal__item:focus-visible{
transform:translateY(-3px);
box-shadow:var(--shadow-sm);
}
.category-modal__item img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* ---- Single-photo lightbox — opened from the category modal, with prev/next ---- */
.lightbox[hidden]{
display:none;
}
.lightbox{
position:fixed;
inset:0;
z-index:300;
display:flex;
align-items:center;
justify-content:center;
padding:var(--space-md);
}
.lightbox__backdrop{
position:absolute;
inset:0;
background:rgba(36,39,43,.9);
}
.lightbox__panel{
position:relative;
z-index:1;
max-width:min(92vw, 900px);
width:100%;
background:var(--bg);
border-radius:var(--radius-md);
padding:var(--space-md);
box-shadow:var(--shadow-card);
}
.lightbox__close{
position:absolute;
top:-14px;
right:-14px;
width:36px;
height:36px;
border-radius:50%;
background:var(--fg);
color:var(--bg);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
box-shadow:var(--shadow-sm);
z-index:2;
}
.lightbox__nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border-radius:50%;
background:var(--bg);
color:var(--fg);
display:flex;
align-items:center;
justify-content:center;
font-size:1.6rem;
line-height:1;
box-shadow:var(--shadow-sm);
z-index:2;
}
.lightbox__nav:hover{
background:var(--primary);
color:var(--accent-fg);
}
.lightbox__nav--prev{ left:-6px; }
.lightbox__nav--next{ right:-6px; }
.lightbox__body{
display:flex;
flex-direction:column;
align-items:center;
}
.lightbox__body img{
display:block;
width:auto;
max-width:100%;
height:auto;
max-height:78vh;
margin:0 auto;
border-radius:var(--radius-sm);
}
.lightbox__counter{
margin-top:var(--space-sm);
text-align:center;
font-size:.85rem;
color:var(--muted);
}
/* -------------------------------------------------------------------------
11b. Půjčovna lešení
------------------------------------------------------------------------- */
.leseni-grid{
display:grid;
grid-template-columns:1fr;
align-items:center;
gap:var(--space-lg);
}
.leseni-text p + p{
margin-top:var(--space-sm);
}
.leseni-list{
display:flex;
flex-direction:column;
gap:var(--space-2xs);
margin-top:var(--space-md);
}
.leseni-list li{
position:relative;
padding-left:var(--space-md);
color:var(--fg);
}
.leseni-list li::before{
content:"";
position:absolute;
left:0;
top:.6em;
width:8px;
height:8px;
border-radius:2px;
background:var(--accent-2);
}
.leseni-price{
margin-top:var(--space-sm);
font-size:.92rem;
color:var(--muted);
}
.leseni-actions{
display:flex;
flex-wrap:wrap;
gap:var(--space-xs);
margin-top:var(--space-lg);
}
/* -------------------------------------------------------------------------
12. Kontakt + form
------------------------------------------------------------------------- */
.kontakt-grid{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:var(--space-xl);
align-items:start;
}
.kontakt-info{
display:flex;
flex-direction:column;
gap:var(--space-lg);
}
.kontakt-list{
display:flex;
flex-direction:column;
gap:var(--space-sm);
}
.kontakt-list__label{
display:block;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
margin-bottom:2px;
}
.kontakt-list__value{
display:block;
font-size:1.05rem;
font-weight:500;
}
.kontakt-actions{
display:flex;
flex-wrap:wrap;
gap:var(--space-xs);
}
.map-embed{
min-height:220px;
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--line);
}
.map-embed iframe{
width:100%;
height:100%;
min-height:220px;
border:0;
display:block;
}
.kontakt-form{
background:var(--bg);
border:1px solid var(--line);
border-radius:var(--radius-md);
padding:var(--space-lg);
}
.form__honeypot{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.form__field{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:var(--space-sm);
}
.form__field label{
font-size:.9rem;
font-weight:500;
}
.form__field input,
.form__field textarea{
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:11px 14px;
background:#fff;
font:inherit;
color:var(--fg);
transition:border-color 150ms ease, box-shadow 150ms ease;
}
.form__field input:focus-visible,
.form__field textarea:focus-visible{
outline:2px solid var(--primary);
outline-offset:1px;
border-color:var(--primary);
}
.form__field textarea{
resize:vertical;
min-height:120px;
}
.form__hint{
font-size:.8rem;
color:var(--muted);
}
.form__consent{
display:flex;
align-items:flex-start;
gap:8px;
margin:var(--space-md) 0;
font-size:.86rem;
color:var(--muted);
}
.form__consent input[type="checkbox"]{
margin-top:3px;
width:16px;
height:16px;
accent-color:var(--primary);
flex-shrink:0;
}
.form__submit{
width:100%;
}
@media (min-width:520px){
.form__submit{ width:auto; }
}
.form__status{
margin-top:var(--space-sm);
font-size:.9rem;
min-height:1.2em;
}
.form__status.is-success{
color:var(--primary-dark);
}
.form__status.is-error{
color:var(--error-text);
}
/* -------------------------------------------------------------------------
13. Footer
------------------------------------------------------------------------- */
.site-footer{
background:var(--primary-dark);
color:rgba(253,249,242,.82);
padding:var(--space-2xl) 0 var(--space-lg);
}
.site-footer__grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:var(--space-xl);
padding-bottom:var(--space-lg);
}
.site-footer__brand{
display:flex;
flex-direction:column;
gap:var(--space-2xs);
}
.site-footer__legal{
font-size:.82rem;
color:rgba(253,249,242,.6);
margin-top:var(--space-sm);
}
.site-footer__links h4,
.site-footer__contact h4{
color:#fff;
font-weight:700;
}
.site-footer__links{
display:flex;
flex-direction:column;
gap:var(--space-2xs);
}
.site-footer__links a{
color:rgba(253,249,242,.82);
font-size:.92rem;
transition:color 150ms ease;
}
.site-footer__links a:hover{
color:var(--accent-fg);
}
.site-footer__contact{
display:flex;
flex-direction:column;
gap:var(--space-2xs);
font-size:.92rem;
}
.site-footer__contact a{
color:rgba(253,249,242,.82);
transition:color 150ms ease;
}
.site-footer__contact a:hover{
color:var(--accent-fg);
}
.site-footer__bottom{
border-top:1px solid rgba(253,249,242,.16);
padding-top:var(--space-md);
font-size:.8rem;
color:rgba(253,249,242,.6);
display:flex;
flex-wrap:wrap;
gap:var(--space-xs) var(--space-md);
justify-content:space-between;
}
.site-footer__credit{
font-size:.72rem;
}
.site-footer__credit a{
color:rgba(253,249,242,.6);
text-decoration:underline;
text-underline-offset:2px;
transition:color 150ms ease;
}
.site-footer__credit a:hover{
color:var(--accent-fg);
}
/* -------------------------------------------------------------------------
14. Responsive breakpoints (mobile-first)
------------------------------------------------------------------------- */
/* --- Mobile base: nav is off-canvas, multi-col grids collapse --- */
.nav-toggle{
display:flex;
}
/* Hero content is bottom-anchored inside a fixed-height (78vh) box; the
desktop padding (--space-2xl top+bottom) leaves too little room on
narrow/short mobile screens and pushes the headline up into the photo
placeholder's icon+caption. Trim it so the headline has room to breathe. */
.hero__content{
padding:var(--space-lg) 0 calc(var(--space-lg) + 16px);
}
#primaryNav.primary-nav{
position:fixed;
top:var(--header-height);
left:0;
right:0;
bottom:0;
z-index:45;
background:var(--bg);
border-top:1px solid var(--line);
padding:var(--space-lg) var(--gutter);
transform:translateX(100%);
transition:transform 240ms ease;
overflow-y:auto;
}
#primaryNav.primary-nav.is-open{
transform:translateX(0);
}
.primary-nav__list{
flex-direction:column;
align-items:flex-start;
gap:var(--space-md);
}
.primary-nav__link{
font-size:1.1rem;
}
.primary-nav__cta-group{
margin-left:0;
margin-top:var(--space-sm);
width:100%;
}
.primary-nav__cta{
flex:1;
text-align:center;
}
.o-nas__grid{ grid-template-columns:1fr; }
.kontakt-grid{ grid-template-columns:1fr; }
.value-grid{ grid-template-columns:repeat(2, 1fr); }
.value-grid__item--featured h3{ font-size:1.25rem; }
.services-grid{ grid-template-columns:repeat(2, 1fr); }
.services-grid__item--lead{ grid-column:span 2; }
.reference-grid{ grid-template-columns:1fr; }
.reference-grid__item--featured{ grid-column:span 1; }
.site-footer__grid{ grid-template-columns:1fr; gap:var(--space-lg); }
/* aspect-ratio on .photo-placeholder--hero has no visible effect here — the
more specific .hero__media .photo-placeholder--hero rule below always
forces width/height:100%. What actually needs to change on short mobile
viewports is where the icon+caption sit, since the real h1/subtitle are
anchored to the bottom of the same box and can grow tall enough to
collide with a vertically centered caption (see .hero__media override). */
/* --- Tablet and up (>= 800px): grids regain their full rhythm --- */
@media (min-width:800px){
.value-grid{ grid-template-columns:repeat(4, 1fr); }
.value-grid__item--featured h3{ font-size:1.4rem; }
.services-grid{ grid-template-columns:repeat(3, 1fr); }
.reference-grid{ grid-template-columns:repeat(3, 1fr); }
.reference-grid__item--featured{ grid-column:span 2; }
.gallery-categories{ grid-template-columns:repeat(2, 1fr); }
.gallery-card--featured{ grid-column:span 2; }
/* Spanning two columns turns the featured card into a wide band — a
portrait 4/5 box would run absurdly tall, so it switches to a
landscape crop only once it's actually wide enough to need one. */
.gallery-card--featured .gallery-card__main{ aspect-ratio:16/9; }
.gallery-card--featured .gallery-card__peek{ aspect-ratio:4/3; }
.category-modal__grid{ grid-template-columns:repeat(3, 1fr); }
.site-footer__grid{ grid-template-columns:1.2fr 1fr 1fr; }
.leseni-grid{ grid-template-columns:1fr 1fr; }
}
/* --- Desktop nav (>= 900px): off-canvas becomes a static inline nav --- */
@media (min-width:900px){
.nav-toggle{
display:none;
}
#primaryNav.primary-nav{
position:static;
transform:none;
background:none;
border-top:0;
padding:0;
overflow:visible;
z-index:auto;
transition:none;
/* flex:1 — nav vyplní zbylou šířku vedle wordmarku; justify-content
posouvá odkazy + CTA skupinu jako celek k pravému okraji, místo aby
se odkazy rozprostíraly přes celou šířku. */
display:flex;
align-items:center;
justify-content:flex-end;
flex:1;
}
.primary-nav__list{
flex-direction:row;
align-items:center;
/* Pevný gap místo space-between drží odkazy rovnoměrně, ale blízko
u sebe, ať se nerozprostírají přes celou šířku headeru. Menší gap než
na velkém desktopu — se 6 odkazy (po přidání "Lešení") by --space-lg
na 900–1024px přetékalo mimo viewport, viz zúžení zpět na --space-lg
až v breakpointu 1025px níže. */
gap:var(--space-md);
}
.primary-nav__link{
font-size:.95rem;
}
.primary-nav__cta-group{
margin-top:0;
margin-left:var(--space-lg);
width:auto;
}
}
/* --- Desktop layout (>= 1025px): asymmetric two-column sections, tall hero --- */
@media (min-width:1025px){
.hero{ min-height:88vh; }
.hero__scrim{
background:linear-gradient(180deg, rgba(58,38,14,.10), rgba(32,20,8,.62));
}
.photo-placeholder--hero{
aspect-ratio:21/9;
}
.primary-nav__list{
gap:var(--space-lg);
}
.primary-nav__cta-group{
margin-left:var(--space-xl);
}
.o-nas__grid{ grid-template-columns:1.3fr 1fr; }
.kontakt-grid{ grid-template-columns:0.9fr 1.1fr; }
/* Featured card spans 2 of 3 columns on row 1, the second card fills
the row alongside it, and the remaining three cards auto-flow into a
clean second row — no template-areas needed for exactly 5 items. */
.gallery-categories{ grid-template-columns:repeat(3, 1fr); }
.category-modal__grid{ grid-template-columns:repeat(4, 1fr); }
}
/* -------------------------------------------------------------------------
15. Reduced motion
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}