/* ==========================================================================
Tresor Club — style.css
Barvy, typografie a rozestupy odpovídají prototypu 1:1.
========================================================================== */
/* --- 1. Fonty -----------------------------------------------------------
Lokální kopie místo Google Fonts CDN — kvůli GDPR se tak neodesílá
IP adresa návštěvníka Googlu. Jen řezy latin a latin-ext, které web
potřebuje; cyrilici, řečtinu ani vietnamštinu nestahujeme.
Cesty jsou relativní ke style.css, takže fungují i z podsložky /en/.
------------------------------------------------------------------------- */
/* Náhradní písmo dorovnané na míru.
Barlow Condensed je úzké; systémový Arial je na nadpisu o 48 % širší
(naměřeno v DOM: 636 px proti 943 px). Když se pak písmo vymění, nadpis
se přeskládá a je to vidět. `size-adjust` náhradu zúží a přepsané svislé
metriky srovnají řádek — výměna změní tvar písmen, ale text nepřeskočí.
Hodnota je vyladěná na **verzálky**, protože všechny nadpisy na webu jsou
verzálkami a právě u nich je skok nejvíc vidět. Jedno číslo nemůže sedět
na verzálky i na malá písmena zároveň: při 68,4 % vyjdou nadpisy přesně,
běžný text zůstane asi o 13 % užší. Pořád je to výrazně blíž než holý
Arial, který je u textu o 35 % širší.
V rodinách níž stojí hned za Barlow Condensed, tedy před systémovými písmy. */
@font-face {
font-family: 'Barlow Condensed fallback';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 68.4%;
ascent-override: 100%;
descent-override: 20%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/barlow-condensed-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/barlow-condensed-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/barlow-condensed-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/barlow-condensed-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- 2. Proměnné ---------------------------------------------------------- */
:root {
/* Vínová a hnědá jsou barvy zadané vedením (19. 8. 2026). Vínová dělá
stránku, hnědá ji rámuje shora i zdola — navigace a patička. Proti
dřívější skoro černé #0a0a0b je vínová 6,7× světlejší, což byl důvod
změny: web působil moc tmavě. */
--bg: #3A1B1A; /* vínová — od 25. 8. 2026 teplejší, míň do fialova */
--bg-alt: #321614;
--surface: #472124;
--surface-2: #51262A;
--border: #5B2B2F;
/* Rozložená vínová pro průsvitné přechody. Bez ní by se do gradientů
musela psát barva natvrdo a při příští změně palety by tam zůstala —
přesně to se stalo se závoji hero, kde svítila stará skoro černá. */
--bg-rgb: 58, 27, 26;
/* Zvýrazněné čáry. Dřív firemní červená #A11806 — ta má ale na vínové
kontrast jen 1,9 : 1 a čáry by na ní zmizely. Roli přebírá zlatá
(7,4 : 1). Používá se jen tam, kde má čára upoutat: čárka u adresy
v úvodu a rám kolem plakátu programu. Ostatní čáry zůstávají tlumené,
jinak by se z toho stal proužkovaný web a nic by nevyniklo. */
--rule-hi: #ddae74;
--border-2: #663035;
--border-3: #803C41;
/* Písmo není bílé. Od 25. 8. 2026 okrová — vedení bílou nechtělo.
Žebřík se posouvá jako celek; nejtišší tón je zesvětlený proti
odvozené hodnotě, jinak měl na panelu formuláře 4,12 : 1. */
--text: #E4D6BE;
--text-2: #CEBC9C;
--text-3: #AF9B77;
--muted: #AA9776;
--dim: #A98987;
--faint: #856664;
/* Oficiální zlatá značky. Světlejší a tmavší varianta z ní vycházejí —
drží stejný odstup v odstínu, sytosti i světlosti jako dřív, takže
zůstal zachovaný vztah mezi základní barvou a jejím zvýrazněním.
Pozadí a rámeček zlatých panelů jsou skoro černé; těm se otočil jen
odstín, světlost musela zůstat, jinak by z nich byly šedé plochy. */
--gold: #ddae74;
--gold-lt: #f3d3a8;
--gold-dk: #d49e54;
--gold-bg: #29100F;
--gold-bd: #5B2A2E;
--rr-pink: #ff1493;
/* Světlejší růžová pro drobný text na tmavém podkladu. Základní #ff1493
má na hnědé hlavičce jen 3,7 : 1, tahle 5,7 : 1. Na plochách (pozadí
štítků) se dál používá základní. */
--rr-pink-lt: #FF7BC0;
--rr-cyan: #00d5e6;
/* Tmavší vínová do rohů karet a přechodů. Dřív tam byla #101013 z původní
skoro černé palety — proti vínové se ukazovala jako studená šedá skvrna. */
--bg-dk: #280E0E;
--f-head: 'Barlow Condensed', 'Barlow Condensed fallback', 'Arial Narrow', Impact, sans-serif;
--f-body: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
--f-mono: 'Barlow Condensed', 'Barlow Condensed fallback', 'Arial Narrow', system-ui, sans-serif; /* dřív JetBrains Mono, teď stejné písmo jako zbytek webu */
--wrap: 1280px;
--radius: 0; /* hrany. Zaoblení web neměl mít, drží se ostrého tvaru loga. */
--ease: cubic-bezier(.33, 1, .68, 1);
--ease-out: cubic-bezier(.22, .61, .36, 1);
}
/* --- 3. Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Formulářová pole písmo nedědí, prohlížeč jim dá vlastní systémové.
Bez tohohle spadne skryté pole pastičky na roboty na Arial. */
input, select, textarea, button { font-family: inherit; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--f-body);
font-size: 16px;
line-height: 1.68;
-webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
/* Obrázky mají v HTML uvedené rozměry, aby prohlížeč věděl, kolik místa jim
nechat, a stránka pod nimi při načítání neposkakovala. Bez tohohle řádku
by se ale ty rozměry braly doslova: šířku by omezilo max-width, výška by
zůstala původní a obrázek by se roztáhl. S height: auto se dopočítá ze
skutečného poměru stran.
Pravidla níž, která výšku určují sama (.logo img, .case img a další),
mají vyšší specificitu a platí dál. */
img { height: auto; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--gold); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--gold-lt); }
::placeholder { color: var(--dim); }
::selection { background: var(--gold); color: var(--bg); }
/* --- 4. Opakované prvky -------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; }
.section { padding: 76px 32px; }
.section--tight { padding: 58px 32px; }
/* Hlavička končí velkým odsazením zdola (až 250 px), aby tlačítka nesedla
na spodní hranu fotky. Plných 76 px shora u další sekce se k tomu
přičetlo a mezi hero a prvním nadpisem zela díra. */
.section--po-hero { padding-top: 32px; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--border); }
.section--line { border-top: 1px solid var(--border); }
/* zlatý blok nad nadpisem sekce */
/* Zvětšeno z 11 na 14 px. Odsazení a záporný okraj rostou s ním, aby
text uvnitř zlatého štítku zůstal stejně daleko od hran a levá hrana
štítku pořád lícovala s nadpisem pod ním. */
.eyebrow {
font-family: var(--f-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
background: var(--gold);
color: var(--bg);
align-self: flex-start;
padding: 4px 9px;
margin-left: -9px;
}
/* Popisky měly --dim, na tmavém pozadí kontrast 3,7 : 1 — pod hranicí
4,5 : 1, kterou norma žádá pro malý text. Bílá dává 19,8 : 1.
Tučnější řez drží tvar písmen i při 11 px a velkém prostrkání. */
.label {
font-family: var(--f-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
/* Dřív #fff natvrdo. Při přebarvení písma na okrovou by tenhle prvek
zůstal bílý, zatímco zbytek webu zežloutl. */
color: var(--text);
}
/* Štítek u programu jako jediný červený — váže se k rámu kolem plakátu, aby
ta sekce držela pohromadě. Text je bílý: na červené má kontrast 7,9 : 1,
zatímco tmavý text jako na zlatém štítku by měl 2,5 : 1 a nešel by přečíst.
Odsazení i záporný okraj rostou s písmem, aby levá hrana textu pořád
lícovala s nadpisem pod ním. */
.eyebrow--hi {
background: var(--rule-hi);
/* Ne bílá: --rule-hi je zlatá a bílá na ní má 1,8 : 1. Tmavá barva
stránky dává 7,4 : 1 — stejně jako u obyčejného .eyebrow. */
color: var(--bg);
font-size: 17px;
padding: 6px 12px;
margin-left: -12px;
}
h1, h2 {
font-family: var(--f-head); text-transform: uppercase;
letter-spacing: .02em;
line-height: .94;
font-weight: 600;
}
h2 { font-size: 62px; }
.h2--sm { font-size: 54px; line-height: .96; }
/* Dlouhý nadpis. Vypadá jako ostatní nadpisy — verzálky, stejný řez — jen
je menší, protože věta má 141 znaků a ve 62 px by z ní byl blok přes půl
obrazovky. Řádkování je o chlup volnější než u krátkých nadpisů; při
čtyřech řádcích verzálek by se .94 slévalo. */
/* Řádkování 1,35, ne původních 1,02: verzálky měří 30 px a mezi dvěma řádky
zbývalo jen 5 px. Tohle dá 16 px. Třída je jen na tomhle jednom nadpisu,
jinam to nezasáhne. */
.h2--text { font-size: 34px; line-height: 1.35; text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.65; color: var(--text-3); text-wrap: pretty; }
/* běžný odstavec v obsahu podstránek — o stupeň menší než .lead */
.prose { font-size: 17px; line-height: 1.65; color: var(--text-3); text-wrap: pretty; }
.stack { display: flex; flex-direction: column; }
/* Blok na střed stránky. Štítek má normálně záporný levý okraj, aby jeho
text lícoval s nadpisem pod ním — na střed by ho ten okraj posunul o 9 px
doleva, proto se ruší. */
.stack--stred { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.stack--stred .eyebrow { align-self: center; margin-left: 0; }
/* přeskočení navigace — vidět až po zaostření tabulátorem */
.skip {
position: absolute; z-index: 100;
left: 12px; top: 12px;
padding: 12px 18px;
background: var(--gold); color: var(--bg);
font-family: var(--f-mono); font-size: 12px;
letter-spacing: .14em; text-transform: uppercase;
transform: translateY(-200%);
transition: transform .2s ease;
}
.skip:focus { transform: none; color: var(--bg); }
/* cíle kotev z navigace — bez odsazení by sekce skončila pod lepivou hlavičkou */
#program, #prostory, #faq { scroll-margin-top: 90px; }
/* zlaté štítky — dopravní spojení u mapy, parametry sálů na podstránkách */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
font-family: var(--f-mono); font-size: 12px;
color: var(--gold);
border: 1px solid var(--gold-bd); background: var(--gold-bg);
padding: 7px 11px;
}
/* Tlačítka */
.btn {
display: inline-block;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 16px 28px;
border-radius: var(--radius);
backface-visibility: hidden;
transform: scale(1);
transition: transform .4s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn--gold { background: var(--gold); color: var(--bg); font-weight: 500; }
.btn--gold:hover { background: var(--gold-lt); color: var(--bg); transform: scale(1.05); }
/* Zlatý okraj i v klidu, ne až při najetí. Dřív tu byla tlumená --border-3
a tlačítko vedle zlatého vypadalo jako vypnuté. Najetí proto rozlišuje
světlejší zlatá — kdyby zůstala stejná, hover by nebyl poznat. */
.btn--ghost { border: 1px solid var(--gold); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold-lt); color: var(--gold-lt); transform: scale(1.05); }
.btn--sm { font-size: 11px; letter-spacing: .12em; padding: 13px 16px; white-space: nowrap; }
/* --- 5. Hlavička --------------------------------------------------------- */
.header {
position: sticky;
top: 0;
z-index: 50;
/* Hnědá od vedení (#33231B). Barva je tady natvrdo, protože hlavička
leží přes hero fotku a potřebuje průhlednost — proměnná by musela být
rozložená na složky, což se kvůli jednomu místu nevyplatí. */
/* Pozadí ani rozmazání tu nejsou — nese je vrstva ::before níž, aby se
daly dole vytratit. Ostrá čára pod hlavičkou odešla s nimi. */
}
/* Podklad navigace: hnědá a rozmazání, které se dole vytrácejí do ztracena.
Stejný nápad jako spodní hrana hero — místo řezu plynulý přechod.
Proč vlastní vrstva a ne rovnou .header: maska se vztahuje na všechno,
co prvek vykreslí. Kdyby seděla na hlavičce, vytrácel by se s pozadím
i obsah a logo s odkazy by dole vybledly.
Vrstva přesahuje 36 px pod hlavičku a plná zůstává do calc(100%% - 36px),
tedy přesně po spodní hranu lišty. Celý přechod se odehraje až pod ní,
takže text vždycky stojí na rovnoměrném podkladu — a platí to při každé
výšce lišty. Procenta tu nestačila: na mobilu je hlavička o 13 px vyšší
a přechod začínal jen 7 px pod obsahem.
Rozmazání samo o sobě přechod neumí; vytrácí ho ta maska. */
.header::before {
content: '';
position: absolute;
inset: 0 0 -36px 0;
z-index: 0;
pointer-events: none;
/* opacity se u téhle vrstvy animuje při přepínání podob hlavičky —
will-change ji drží na vlastní vrstvě, takže rozmazání pod ní
nepřestane platit uprostřed přechodu */
will-change: opacity;
background: linear-gradient(to bottom,
rgba(51, 35, 27, .66) 0%,
rgba(51, 35, 27, .66) calc(100% - 36px),
rgba(51, 35, 27, 0) 100%);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 36px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 36px), transparent 100%);
transition: opacity .35s ease;
}
/* Přechod platí jen nahoře na stránce, kde hlavička leží na hero fotce.
Jakmile se začne rolovat, vrátí se rovná lišta s hranou — pod obsahem
by se text sekcí do vytrácejícího okraje zamotával.
Proč druhá vrstva a ne přepnutí masky: masku animovat nejde, přepnutí
by seklo. Takhle se obě vrstvy prolnou krytím. Leží nad sebou jen po
dobu přechodu, takže dvojí rozmazání trvá tři desetiny vteřiny. */
.header::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
will-change: opacity;
opacity: 0;
/* Tmavší než stránka a skoro krycí. Hnědá v barvě navigace tu nestačila:
má proti vínové stránce světlost 1,00 : 1, takže lišta neměla čím se
odlišit a při rolování splývala. Na ostrém webu tenhle problém nebyl —
tam je stránka i lišta skoro černá a lišta se pozná podle toho, že
ztmavuje fotky, které pod ní projedou. Tady to dělá tahle tmavší hnědá
spolu s viditelnou spodní hranou. */
background: rgba(36, 24, 18, .94);
border-bottom: 1px solid rgba(78, 54, 40, .85);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: opacity .35s ease;
}
.header.is-scrolled::before { opacity: 0; }
.header.is-scrolled::after { opacity: 1; }
.header__bar {
position: relative;
/* Nad podkladové vrstvy ::before a ::after. Dřív byly ty vrstvy pod
obsahem přes z-index: -1, jenže rozmazání (backdrop-filter) se na
záporném z-indexu u některých sestav vůbec nezačne skládat — objevilo
se až po prvním překreslení, tedy třeba po najetí myší na logo.
Takhle mají vrstvy z-index 0 a obsah 1, a kreslí se pořád. */
z-index: 1;
max-width: var(--wrap);
margin: 0 auto;
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* logo se světelným přejezdem */
.logo {
position: relative;
flex: 0 0 auto;
display: block;
margin-right: 8px;
overflow: hidden;
transition: transform .45s cubic-bezier(.2, .7, .3, 1), filter .45s ease;
}
.logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(221, 174, 116, .45)); }
.logo img { height: 46px; width: auto; object-fit: contain; }
.logo__shine {
position: absolute;
inset: 0 auto 0 0;
width: 52%;
background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 26%,
rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 74%, rgba(255,255,255,0) 100%);
filter: blur(2px);
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
animation: logo-shine 7s cubic-bezier(.4, 0, .5, 1) infinite;
}
/* desktop navigace */
.nav { display: flex; align-items: center; flex: 1 1 auto; justify-content: center; flex-wrap: nowrap; }
.nav__link {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--f-head); font-weight: 600;
font-size: 16px;
line-height: 1;
letter-spacing: .07em;
text-transform: uppercase;
padding: 12px 6px 9px;
white-space: nowrap;
color: var(--muted);
transform-origin: 50% 50%;
backface-visibility: hidden;
transform: scale(1);
transition: transform .4s var(--ease), color .3s ease;
}
.nav__link:hover { color: var(--gold-lt); transform: scale(1.07); }
/* aktivní stránku značí jen světlejší barva — bez podtržení */
.nav__link.is-active { color: var(--text); }
.nav__link--roller { padding: 8px 6px 7px; }
.nav__badge {
height: 26px; width: 26px;
object-fit: contain;
flex: none;
filter: drop-shadow(0 0 7px rgba(255, 20, 147, .5));
}
.header__side { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.social { display: flex; align-items: center; gap: 2px; }
.social a {
height: 34px;
display: flex; align-items: center; justify-content: center;
color: var(--muted);
transition: transform .35s var(--ease-out), color .35s ease;
}
.social a:hover { transform: translateY(-2px); color: var(--gold); }
.social svg { opacity: .85; }
/* Instagram Roller Rinku odlisujeme klubovou ruzovou — jinak jsou
v rade dve shodne ikony Instagramu a nejdou rozeznat. Plati pro
desktopovou i mobilni hlavicku. */
.social a.is-rr, .header__mobile-side a.is-rr { color: var(--rr-pink); }
.social a.is-rr:hover, .header__mobile-side a.is-rr:hover {
color: var(--rr-pink); filter: brightness(1.25);
}
/* Bez ztlumení a ve světlejší růžové — 10px text v základní růžové měl
na hnědé hlavičce 3,7 : 1, se ztlumením na 72 % dokonce 2,49 : 1. */
.social__rr { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--rr-pink-lt); }
/* telefon a e-mail v hlavičce — dva řádky vedle sítí */
.contacts { display: flex; flex-direction: column; gap: 2px; }
.contacts a {
display: flex; align-items: center; gap: 7px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .04em;
color: var(--text);
white-space: nowrap;
}
.contacts a:hover { color: var(--gold); }
.contacts svg { flex: 0 0 15px; margin: 0 1px; }
/* přepínač jazyků — dvě samostatná tlačítka */
.lang { display: flex; align-items: center; gap: 2px; margin-left: 2px; }
.lang__sep { width: 1px; height: 14px; background: var(--border-2); }
.lang a {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 12px 5px;
white-space: nowrap;
color: var(--muted);
opacity: .55;
backface-visibility: hidden;
transform: scale(1);
transition: transform .4s var(--ease), color .3s ease, opacity .3s ease;
}
.lang a:hover { color: var(--gold); opacity: 1; transform: scale(1.05); }
.lang a.is-active { color: var(--gold); opacity: 1; }
.lang svg { flex: none; border-radius: 0; }
/* hamburger */
.burger {
display: none;
flex: 0 0 auto;
width: 44px; height: 44px;
flex-direction: column; justify-content: center; gap: 5px;
padding: 0 10px;
}
.burger span { display: block; height: 2px; background: var(--text); }
/* mobilní menu */
/* Překryv, ne součást toku — jinak by otevřené menu odsunulo celou stránku dolů.
Pozicuje se vůči .header, který je sticky, takže drží pod lištou. */
.mobile-nav {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
max-height: 80vh;
overflow-y: auto;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg);
box-shadow: 0 22px 40px -18px rgba(6, 6, 8, .85);
padding: 12px 18px 22px;
flex-direction: column;
gap: 2px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__link {
font-family: var(--f-head); font-weight: 600;
font-size: 22px;
line-height: 1;
letter-spacing: .07em;
text-transform: uppercase;
padding: 16px 14px;
min-height: 44px;
display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--border);
border-radius: 0;
color: var(--muted);
backface-visibility: hidden;
transform: scale(1);
transition: transform .4s var(--ease), background .28s ease, color .28s ease;
}
/* Stejné chování jako u .nav__link — zlatá a přiblížení. Jen 1,02×: položka jde
přes celou šířku menu, takže procentní zvětšení roste s šířkou. Při 1,03× by
na tabletu zbývaly po stranách 3 px do okraje menu. */
.mobile-nav__link:hover { background: var(--surface); color: var(--gold-lt); transform: scale(1.02); }
.mobile-nav__link.is-active { color: var(--text); }
.mobile-nav__dot { width: 5px; height: 5px; border-radius: 0; background: var(--gold); opacity: 0; flex: none; transition: opacity .28s ease; }
.mobile-nav__link.is-active .mobile-nav__dot { opacity: 1; }
.mobile-nav__link img { height: 26px; width: 26px; object-fit: contain; flex: none; filter: drop-shadow(0 0 7px rgba(255, 20, 147, .5)); }
.mobile-nav .btn {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
font-size: 21px;
letter-spacing: .06em;
padding: 17px 20px 14px;
margin-top: 14px;
text-align: center;
}
.mobile-nav .lang { justify-content: center; margin-top: 6px; }
/* mobilní pravá strana — na desktopu obojí schované, zapne se až v sekci 19 */
.header__mobile-side, .header__mobile-contacts { display: none; }
/* --- 6. Hero ------------------------------------------------------------- */
.hero {
position: relative;
/* Na užších obrazovkách se výška řídí obsahem, ne oknem. Obsah hlavičky
je tam vysoký (nadpis, osm štítků, dvě tlačítka) a plná výška okna by
ho jen roztáhla. Spodní hranice je proto jen pojistka, aby fotka
nebyla proužek. Plnou obrazovku dostane hero až na počítači, viz
pravidlo o kus níž. */
min-height: 46vh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
/* Na počítači vyplní hlavička celou obrazovku, aby pod ní nevykukoval
začátek další sekce — dřív z ní bylo vidět 247 px.
Odečítá se výška navigace, která nad hero stojí ve svém vlastním místě
(je `sticky`, ne `fixed`). Na desktopu měří ustálených 90 px; pod 1050 px
se přepne na burger a měří 103 px, proto tam tohle pravidlo neplatí.
`svh` kvůli telefonům, kde `vh` počítá i s lištou prohlížeče — na počítači
jsou obě hodnoty stejné, řádek s `vh` je jen pro starší prohlížeče.
Obsah je zarovnaný dolů, takže volné místo přibývá nahoře — tam, kde je
fotka, a ne mezi textem. */
@media (min-width: 1050px) {
/* Odečítá se 87 px, i když navigace měří 88,9 — o ty dva pixely je hero
radši vyšší. Při přesné hodnotě zbyla pod ním 1,1px štěrbina, kterou
prosvítala další sekce; přesah nikdo nepozná, štěrbinu ano. */
.hero { min-height: calc(100vh - 87px); }
.hero { min-height: calc(100svh - 87px); }
}
.hero__img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* Od 25. 8. 2026 jsou v hero fotky prázdného sálu z původního webu — zlatě
a modře nasvícený parket. Hodnoty .75 a .90 zůstaly beze změny z předchozích
jasných snímků a na těchhle tmavších fungují ještě líp: pod nadpisem
nedosáhne kontrastu 3 : 1 jen 5,6 % plochy proti dřívějším 29,7 %.
Je tu tedy rezerva — zesvětlení na 1,0 by dalo 6,8 %, pořád čtvrtinu
dřívějška. Nad 1,25 nechodit: bílé plátno na pódiu začne přepalovat.
Měří se PODÍL plochy pod prahem, ne průměr; text se láme tam, kde je
fotka nejsvětlejší, a průměr to schová. */
.hero__img--a { filter: saturate(1.04) brightness(.75) contrast(1.06); animation: hero-a 16s ease-in-out infinite; }
.hero__img--b { filter: saturate(1.04) brightness(.90) contrast(1.06); opacity: 0; animation: hero-b 16s ease-in-out infinite; }
/* Závoj i text leží nad fotkami, jinak by se do nich text ztratil.
Závoj musí být z barvy stránky, ne z tmavé nastavené natvrdo — dole je
skoro krycí a navazuje na sekci pod hero. Když tam byla stará skoro
černá, byl na rozhraní vidět ostrý šev proti vínové. */
.hero__veil {
position: absolute;
/* Dva pixely pod spodní hranu. Hero měří 544,094 px — na zlomkové
souřadnici prohlížeč poslední řádek jen přimíchá, a protože fotka je
kvůli přiblížení o 5 px vyšší než hero a ořezává se na téže hranici,
zůstala v tom řádku prosvítat. Vypadalo to jako tenká světlá skulinka
mezi hero a sekcí pod ním. Přesah nikam neuteče, .hero má overflow:
hidden. Pozor při dalších úpravách: dokud fotky mají zoom, musí být
závoj vždycky o kousek větší než hero. */
inset: 0 0 -2px 0;
z-index: 4;
/* Dole musí být závoj ÚPLNĚ krycí, ne z 94 %. Přes ta zbylá čtyři procenta
prosvítaly jasné body fotky (konfety, reflektory) a proti plné vínové
sekci pod hero vznikl viditelný šev. Prvních pár procent je proto čistá
barva stránky, teprve nad nimi začne prolínání. */
/* Od 25. 8. 2026 zmírněno na 60 % původní sytosti — přechod byl podle
zadavatele moc silný. Dno zůstává KRYCÍ, na to se sahat nesmí (šev).
Ztrátu čitelnosti dohnalo ztlumení fotek na .85 a hlavně ořez stropu:
nadpis má teď 4,58 a 4,47 : 1, tedy víc než dřívějších 4,22. */
background: linear-gradient(to top,
rgba(var(--bg-rgb),1) 0%, rgba(var(--bg-rgb),1) 4%,
rgba(var(--bg-rgb),.52) 12%, rgba(var(--bg-rgb),.37) 30%,
rgba(var(--bg-rgb),.08) 62%, rgba(var(--bg-rgb),.17));
}
.hero__veil--corner {
background: radial-gradient(120% 85% at 8% 92%, rgba(var(--bg-rgb),.43) 0%, rgba(var(--bg-rgb),.19) 45%, transparent 72%);
}
.hero__inner {
position: relative;
z-index: 5;
max-width: var(--wrap);
margin: 0 auto;
/* Obsah je v hero zarovnaný dolů, takže ho zvedá odsazení zdola, ne
shora. Obě hodnoty se ale musí vázat na VÝŠKU okna, ne být pevné:
na notebooku s nízkým oknem (naměřeno 1496 × 661) zbývalo tlačítkům
ke spodní hraně jen 41 px a při o kousek nižším okně spadla pod ni.
Na velkém monitoru narazí obě na horní mez, takže tam je vzhled
nezměněný — 110 px shora a 250 px zdola jako dosud. */
padding: clamp(72px, 12vh, 110px) 32px clamp(56px, 28vh, 250px);
width: 100%;
display: flex; flex-direction: column; gap: 26px;
text-shadow: 0 2px 26px rgba(6, 6, 8, .6);
}
.hero__place { display: flex; align-items: center; gap: 14px; }
.hero__rule { width: 38px; height: 1px; background: var(--rule-hi); flex: none; }
.hero__addr {
font-family: var(--f-mono);
/* Stejná velikost i prostrkání jako štítky formátů pod nadpisem — obojí
jsou drobné popisky v hero a různá velikost mezi nimi působila náhodně. */
font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
color: var(--gold);
text-shadow: 0 1px 12px rgba(6, 6, 8, .85);
padding: 3px 6px; margin: -3px -6px;
background-image: linear-gradient(var(--gold), var(--gold));
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size .45s var(--ease-out), color .3s ease, text-shadow .3s ease;
}
.hero__addr:hover { background-size: 100% 100%; color: var(--bg); text-shadow: none; }
.hero h1 {
/* min() ze šířky a výšky: na širokém, ale nízkém okně rozhoduje výška,
jinak by třířádkový nadpis sám sežral většinu hero a vytlačil
tlačítka pod okraj. Na běžném monitoru je menší ta šířková hodnota,
takže se nic nemění. */
font-size: clamp(56px, min(7.4vw, 13vh), 118px);
/* Nadpisy mají na webu řádkování .94, což je pro tři řádky přes sebe
moc těsné — naměřeno, že se sousední řádky překrývaly o 22 a 17 px.
Zvětšuje se jen tady, ne globálně: ostatní nadpisy jsou jednořádkové
a tam těsné řádkování drží tvar. */
line-height: 1.06;
text-shadow: 0 3px 40px rgba(6,6,8,.72), 0 1px 4px rgba(6,6,8,.5);
}
.hero h1 span { color: var(--gold); }
/* Název klubu o kousek větší než zbytek nadpisu. Zvětšuje se tady, ne
přes font-size celého h1 — claim je z něj počítaný v em, takže by
vyrostl s ním. Vybírá se přímý potomek, aby to nechytlo vnitřní span
s „v centru Prahy“ uvnitř claimu. */
.hero h1 > span:not(.hero__claim) { font-size: 1.14em; }
/* Druhý a třetí řádek nadpisu menším písmem — název klubu tak vede a zbytek
ho doplňuje. Obal musí barvu vrátit zpět: pravidlo o řádek výš barví
všechny spany zlatě a platilo by i na něj. Vnitřní span s „v centru Prahy“
si zlatou nechává. */
.hero h1 .hero__claim {
/* Vlastní blok, ne inline. Jako inline si řádky braly výšku z velkého
nadpisu (79 px), i když samy měly 52px písmo — odtud ty mezery.
Jako blok si výšku počítají ze svého písma. */
display: block;
font-size: .62em;
/* Otisk verzálek měří 58 px, takže mezera mezi řádky = řádkování minus 58.
Bylo 1,28 → 26 px, jenže nad claimem je 31 px — rozdíl pouhých 5 px
a dvojice se nečetla jako celek. 1,1 dá 15 px, tedy polovinu odstupu
od názvu, a řádky drží pohromadě. Níž už ne: „v centru Prahy“ sice
nemá horní diakritiku, ale Č v „MULTIFUNKČNÍ“ ano. */
line-height: 1.1;
color: var(--text);
}
.chips { display: flex; flex-wrap: wrap; gap: 16px 30px; max-width: 900px; }
.chip {
display: flex; align-items: center; gap: 12px;
font-family: var(--f-mono);
font-size: 18px; line-height: 1; letter-spacing: .18em; text-transform: uppercase;
color: var(--text);
padding-right: 6px;
text-shadow: 0 1px 14px rgba(6, 6, 8, .9);
transition: color .5s ease;
}
.chip:hover { color: var(--gold); }
.chip__dot {
width: 9px; height: 9px; border-radius: 0;
background: var(--gold); flex: none;
transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .8s ease;
}
.chip__t {
padding: 4px 7px; margin: -4px -7px;
background-image: linear-gradient(var(--gold), var(--gold));
background-repeat: no-repeat;
background-position: right center;
background-size: 0% 100%;
transition: background-size .75s cubic-bezier(.4,0,.2,1), background-position 0s, color .4s ease, text-shadow .4s ease;
}
/* zvýrazněný chip — třídu přepíná script.js */
.chip.is-on .chip__dot { transform: scale(.6); opacity: .35; }
.chip.is-on .chip__t { background-position: left center; background-size: 100% 100%; color: var(--bg); text-shadow: none; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
/* --- 7. (volné) ---------------------------------------------------------
Pás statistik pod formáty akcí sem patřil do 19. 8. 2026, kdy ho vedení
zrušilo — spolu s ním odešly i údaje o ploše. Číslo sekce zůstává volné —
přečíslovat celý soubor by rozešlo odkazy v CLAUDE.md, kde se mluví
o blocích 22, 23 a 33. */
/* --- 8. Klienti (marquee) ------------------------------------------------ */
.clients {
padding: 26px 32px 30px;
display: flex; flex-direction: column; gap: 14px;
border-bottom: 1px solid var(--border);
}
.clients__title {
max-width: var(--wrap); margin: 0 auto; width: 100%;
text-align: center;
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
font-size: 22px; line-height: 1; letter-spacing: .06em;
color: var(--text);
}
/* Pás nejde od kraje obrazovky ke kraji — drží se obsahové šířky jako
zbytek stránky a po stranách ho uzavírají svislé linky. Loga se u nich
ořežou natvrdo; dřív se místo toho prolínala do ztracena přes masku, ale
bez okraje pás plaval a nebylo poznat, kde končí. */
.clients__mask {
position: relative;
max-width: var(--wrap); margin: 0 auto; width: 100%;
overflow: hidden;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.clients__track {
display: flex; width: max-content;
touch-action: pan-y; user-select: none;
will-change: transform;
}
/* Loga jsou barevná — a proto musí stát na světlé podložce. Pět z jedenácti
je tmavých na průhledném pozadí a na našem #0a0a0b by je nikdo neviděl.
Naměřený kontrast bez podložky: Hell Events 1,0 : 1, Komerční banka
a Bonton Film 1,3 : 1, Český rozhlas 1,6 : 1, Česká pojišťovna 2,2 : 1.
Dřív to řešil filtr grayscale + brightness(2.4), který tmavé tvary vytáhl
do světla — za cenu toho, že loga barevná nebyla. Podložka je stejná jako
u partnerů v závěrečné výzvě, takže se to po webu neopakuje dvěma způsoby.
Se zrušením filtru ztratily smysl i odstíny --flat a --strong; --big
a --chip nepoužívalo žádné logo. Třídy zmizely i ze script.js. */
.clients__cell {
flex: none; height: 64px;
display: flex; align-items: center; justify-content: center;
margin-right: 16px;
padding: 10px 16px;
background: var(--text);
transition: transform .3s var(--ease);
}
.clients__cell:hover { transform: translateY(-3px); }
.clients__cell img {
max-width: 120px; max-height: 100%; width: auto;
object-fit: contain;
}
/* --- 9. Formáty akcí ---------------------------------------------------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.case {
position: relative; display: block;
aspect-ratio: 4 / 3;
border-radius: 0; overflow: hidden;
background: var(--surface-2);
color: var(--text);
}
.case:hover { box-shadow: 0 0 0 1px #3a3428; color: var(--text); }
/* Kino zatím nemá vlastní stránku. Dlaždice zůstává, ale nikam nevede —
bez tohohle by se tvářila jako odkaz a nešlo by na ni kliknout. */
.case--soon { cursor: default; }
.case--soon:hover { box-shadow: none; }
.case--soon:hover img { transform: none; filter: brightness(.62) saturate(.95); }
.case img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(.62) saturate(.95);
transition: transform .7s var(--ease-out), filter .5s ease;
}
.case:hover img { transform: scale(1.07); filter: brightness(.78) saturate(1.05); }
/* Panel s popisem a parametry. V klidu z něj kouká jen název, jako dřív;
po najetí vyjede zespoda celý. Posun je o výšku panelu zmenšenou o pruh,
ve kterém název sedí — proto calc, ne pevná hodnota: panel je u každé
dlaždice jinak vysoký podle toho, kolik má parametrů. */
.case__body {
/* Tyhle tři hodnoty popisují pruh, ve kterém v klidu sedí název. Odsazení
panelu se z nich počítá, takže se nemůžou rozejít — dřív tu stálo pevných
62 px a když se v užších pásmech zmenšil název i odsazení, pruh spadl na
51 px a zbylých 11 px ukusovalo z popisu. Kdo mění velikost názvu, mění
jen proměnnou; posun se srovná sám.
Počítá se s jednořádkovým názvem (`line-height: 1`). Kdyby se některý
zalomil na dva řádky, půlka by zůstala pod hranou — dnes se nezalomí
ani ten nejdelší. */
--pad: 20px; /* odsazení shora */
--nazev: 30px; /* velikost písma názvu, řádek je stejně vysoký */
--mezera: 14px; /* mezera pod názvem */
/* −2 px, ať mezi hranou a popisem zůstane vlas a nevykoukne při zaokrouhlení */
--klid: calc(100% - var(--pad) - var(--nazev) - var(--mezera) + 2px);
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: var(--pad) 22px;
background: linear-gradient(to top, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .88) 55%, rgba(var(--bg-rgb), 0) 100%);
transform: translateY(var(--klid));
transition: transform .55s var(--ease-out);
}
/* Vyjede jen tam, kde je co odkrýt. Classic Cinema má v panelu jen název,
bez tohohle by po najetí vyjela prázdná plocha.
Odkrývání jen tam, kde je myš. Na dotyku se ''najetí'' vyvolá prvním
ťuknutím, takže by první ťuknutí panel odkrylo a teprve druhé otevřelo
stránku — člověk by měl pocit, že dlaždice nefunguje. Bez myši zůstává
dlaždice jako dřív: název a ťuknutí vede rovnou na podstránku, kde je
totéž napsané v úplnosti. */
@media (hover: hover) {
.case:hover .case__body:has(.case__desc) { transform: translateY(0); }
}
.case:focus-visible .case__body:has(.case__desc) { transform: translateY(0); }
.case__t {
display: block; margin-bottom: var(--mezera);
font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: var(--nazev); line-height: 1; letter-spacing: .03em;
text-shadow: 0 2px 20px rgba(6, 6, 8, .8);
}
.case__desc { color: var(--text-2); font-size: 15px; line-height: 1.45; margin-bottom: 12px; }
.case__list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.case__list span {
font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--border-2);
padding: 4px 8px;
}
/* --- 9b. Střídané formáty akcí v heru ------------------------------
Vrácená práce z 24. 8. 2026 — původně střídala formáty akcí přímo
v nadpisu hero, teď stojí pod nadpisem sekce s dlaždicemi.
Slova bere script.js z názvů dlaždic pod tím, ne z vlastního seznamu:
kdyby se dlaždice měnily, rotace by se s nimi nesměla rozejít.
------------------------------------------------------------------------- */
.rot {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
/* Menší než u jednoho slova — vedle sebe jsou čtyři. */
font-size: clamp(19px, 2.5vw, 32px);
line-height: 1.05; letter-spacing: .02em;
color: var(--gold);
/* Bez pevné výšky by sekce poskakovala pokaždé, když se vymění slovo. */
min-height: 1.05em;
/* Po odebrání tlačítek (25. 8. 2026) sedělo příliš těsně pod nadpisem.
Váže se na výšku okna, aby to na nízkém notebooku nezabíralo moc. */
margin-top: clamp(12px, 2.2vh, 26px);
/* V heru je obsah zarovnaný vlevo, ne na střed jako v sekci,
odkud se to sem 25. 8. 2026 přesunulo. */
display: flex; flex-wrap: wrap; justify-content: flex-start;
gap: 6px clamp(14px, 2vw, 30px);
}
/* Slot dostane pevnou šířku podle širšího ze svých dvou slov — dopočítá ji
script.js. Bez toho by řada při každé výměně poskakovala do stran.
Zarovnání vlevo, ne na střed: obě slova slotu pak začínají na stejném
místě, takže při výměně nepoposkočí do strany. */
.rot-slot { display: inline-block; text-align: left; white-space: nowrap; }
/* Tečka mezi sloty. Poslední ji nemá. */
.rot-slot + .rot-slot::before {
content: '·'; color: var(--border-3);
margin-right: clamp(14px, 2vw, 30px); margin-left: calc(-1 * clamp(14px, 2vw, 30px) / 2);
}
/* Okénko jednoho písmene. Svislé odsazení a záporný okraj proti němu dávají
prostor přetahům písma (háčky, čárky), aby je overflow neuřízl. */
.rot-p {
display: inline-block;
overflow: hidden;
margin: -.14em 0;
padding: .14em 0;
}
.rot-p > i {
display: inline-block;
font-style: normal;
will-change: transform, opacity;
}
/* Mezeru mezi slovy nelze nechat na overflow: hidden — sbalila by se.
Dostane proto pevnou šířku podle písma. */
.rot-mezera { display: inline-block; width: .3em; }
/* --- 10. Proč Tresor ----------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why__card {
position: relative; overflow: hidden;
background: linear-gradient(160deg, var(--surface-2) 0%, var(--bg-dk) 62%);
border: 1px solid var(--border-2);
border-radius: 0;
/* Provzdušněno 25. 8. 2026 — karty byly nalepené na sobě.
Odsazení 12 → 18, vnitřní mezera 6 → 10, výška 96 → 124. */
padding: 18px;
display: flex; flex-direction: column; gap: 10px;
min-height: 124px;
backface-visibility: hidden;
transition: transform .32s cubic-bezier(.2,.7,.3,1), border-color .32s, box-shadow .32s;
}
/* Nadzvednutí i mírné přiblížení. Jen 1,02× — karta je proti tlačítku velká,
takže se posune o podobný počet pixelů jako tlačítko při 1,05×. Víc by se
nejširší karta (478 px na dvousloupcovém rozvržení) dotkla sousedky.
Selektor je záměrně přes rodiče: script.js přidává kartám třídu .reveal
a .reveal.is-in { transform: none } je v souboru níž se stejnou specificitou,
takže by prosté .why__card:hover přebilo a najetí myší by nedělalo nic. */
.why .why__card:hover {
transform: translateY(-6px) scale(1.02);
border-color: var(--gold);
box-shadow: 0 18px 40px -22px rgba(221, 174, 116,.55);
}
.why__n {
position: absolute; top: -18px; right: -3px;
font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 52px; line-height: 1;
color: var(--gold); opacity: .07; pointer-events: none;
}
.why__head { display: flex; align-items: center; gap: 8px; }
.why__ic {
width: 24px; height: 24px; border-radius: 0;
background: rgba(221, 174, 116,.12);
border: 1px solid rgba(221, 174, 116,.22);
display: flex; align-items: center; justify-content: center; flex: none;
}
.why__t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 18px; line-height: 1; letter-spacing: .03em; color: var(--text); text-wrap: pretty; }
/* Popisek měl 11,5 px a --muted, což dávalo na světlejším konci přechodu
karty jen 4,45 : 1 — těsně pod normou. Větší písmo a o stupeň světlejší
tón to zvedne, aniž by karta zhrubla. */
.why__d { font-size: 13px; line-height: 1.45; color: var(--text-3); text-wrap: pretty; margin-top: auto; }
/* --- 11. Program -------------------------------------------------------- */
/* Program má dvě patra: nahoře plakáty vedle sebe, pod nimi akce, které
běží pravidelně a k jednomu měsíci nepatří. */
.program { display: grid; gap: 40px; }
/* Dva plakáty vedle sebe ve **stejně velkých rámech**.
Plakáty chodí v různých formátech — srpen 4:5, září 9:16. Stejné rozměry
jdou udělat jenom dvěma způsoby: ořezem, nebo dorovnáním volným okrajem.
Program ořezat nelze, přišly by řádky, takže se dorovnává.
Tvar rámu 2:3 je kompromis mezi oběma formáty: prázdno vyjde na 17 %
u srpna a 16 % u září. Kdyby se rám řídil jedním z plakátů, druhý by měl
prázdných 30 % a vypadalo by to jako chyba. Okraj je v barvě podkladu
a rámeček je u obou stejný, takže to působí jako pasparta.
Rám má poměr plakátů, které v něm zrovna visí (9:16), takže je vyplní
beze zbytku. Kdyby příští měsíc přišel plakát jiného tvaru, `contain` ho
nikdy neořízne — jen kolem něj zbude proužek pozadí. Pak stačí přepsat
aspect-ratio níž. */
.program__postery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.program__poster {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 9 / 16;
background: var(--surface); border: 1px solid var(--rule-hi);
border-radius: 0; overflow: hidden;
}
.program__poster img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
}
/* Ladies Night a Roller Rink vedle sebe — přes celou šířku by karty byly
zbytečně rozvleklé. */
.program__akce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.event {
border-left: 2px solid var(--gold);
background: linear-gradient(140deg, var(--surface-2), var(--bg-dk));
border-top: 1px solid var(--border-2);
border-right: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-2);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 10px;
}
.event__head { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; }
.event__t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: .03em; color: var(--text); }
.event__when { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.event__link {
display: flex; align-items: center; gap: 8px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
color: var(--gold);
/* nezalomitelný text tady přetékal stránku — sloupec programu je úzký */
white-space: normal;
}
.event__link img { height: 58px; width: auto; object-fit: contain; mix-blend-mode: screen; flex: none; margin: -8px 4px -8px -20px; }
/* Logo Roller Rink není partnerský wordmark na bílém podkladu, ale vlastní
neon s čistou průhledností — prolnutí by ho jen vybledlo. Je čtvercové,
proto větší výška a jiné odsazení než u širokého loga vedle Ladies Night;
záporné okraje drží oba řádky programu stejně vysoké. */
/* Drobný text, proto světlejší růžová. Základní --rr-pink má na 11 px
jen 4,27 : 1 — pod normou; na plochách štítků se dál používá základní. */
.event__link--rr { color: var(--rr-pink-lt); }
.event__link--rr img {
height: 70px;
mix-blend-mode: normal;
/* horní okraj je zápornější než dolní: logo má uvnitř čtverce víc
prázdna nahoře, takže ho to opticky vycentruje a spodek se neopře
o první linku programu */
margin: -22px 2px -12px -8px;
filter: drop-shadow(0 0 12px rgba(255, 20, 147, .38));
}
.event__cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 22px; }
.event__row {
display: grid; grid-template-columns: 64px 1fr; gap: 8px;
align-items: baseline;
padding: 5px 0;
border-top: 1px solid var(--border);
}
.event__h { font-family: var(--f-mono); font-size: 14px; letter-spacing: .03em; color: var(--text); }
.event__h--gold { color: var(--gold); }
.event__l { font-size: 12.5px; line-height: 1.35; color: var(--muted); text-wrap: pretty; }
/* Pruh s vstupenkami. Zvýrazněné je všechno — nadpis, popisek i text —
protože to má být první, co v programu padne do oka. Tlačítko na konci
je plná zlatá: uvnitř odkazu, který zabírá celý pruh, je to jediný
prvek, který jasně říká „tady se kliká“. Není to uvnitř , jen
span, jinak by z toho bylo neplatné HTML. */
/* Vstupenky jsou jedno velké tlačítko — klikací je celý pruh. Při najetí
se vymění celý jeho obsah: nadpis i popisek pod ním vyjedou nahoru
a zezdola přijede jejich kopie. */
/* Tlačítko je zlaté natrvalo. Jediné, co se při najetí děje, je výměna
textu — barvy se nikam nepřebarvují. */
.tickets {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 34px 24px;
background: var(--gold);
border: 1px solid var(--gold);
}
/* Okno, ve kterém se obsah posouvá. `overflow: hidden` ho ořízne, jakmile
opustí rámeček. Svislé odsazení je kvůli písmu: Barlow Condensed má při
46 px otisk vysoký 55 px, zatímco řádek je jen 46 px — bez něj by okno
ukrojilo horní hranu verzálek. Šest pixelů přesah pokryje i na mobilu,
kde je nadpis 36 px. */
.tickets__swap {
position: relative;
display: block;
overflow: hidden;
padding: 6px 0;
}
.tickets__obsah {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
/* Druhá kopie čeká pod oknem. `inset: 0` ji drží přesně na místě první,
takže při výměně nikam neuskočí. */
.tickets__obsah + .tickets__obsah {
position: absolute;
inset: 6px 0;
transform: translateY(calc(100% + 6px));
opacity: 0;
}
.tickets:hover .tickets__obsah,
.tickets:focus-visible .tickets__obsah { transform: translateY(calc(-100% - 6px)); opacity: 0; }
.tickets:hover .tickets__obsah + .tickets__obsah,
.tickets:focus-visible .tickets__obsah + .tickets__obsah { transform: translateY(0); opacity: 1; }
/* Ikona stojí vedle nadpisu na jednom řádku. Kreslená tahem jako ostatní
ikony na webu, barvu bere z `currentColor`, takže stačí měnit barvu obalu.
34 px odpovídá výšce verzálek u nadpisu 46 px, takže ikona s písmem lícuje. */
.tickets__radek { display: flex; align-items: center; gap: 14px; }
.tickets__ico { flex: none; color: var(--bg); }
.tickets__t {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
font-size: 46px; line-height: 1; letter-spacing: .03em;
color: var(--bg);
}
/* goout.net je jen popisek pod nadpisem — kam tlačítko vede. */
.tickets__cta {
font-family: var(--f-mono); font-size: 13px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--bg);
}
/* Na mobilu se 46px nadpis nevejde vedle okrajů, zbytek pruhu zůstává. */
@media (max-width: 619px) {
.tickets { padding: 26px 18px; }
.tickets__t { font-size: 36px; }
/* menší nadpis chce i menší ikonu, ať dvojice drží proporci */
.tickets__radek { gap: 11px; }
.tickets__ico { width: 27px; height: 27px; }
}
/* --- 12. Prostory ------------------------------------------------------- */
.spaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.space {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border);
border-radius: 0; overflow: hidden;
transition: border-color .4s ease;
}
.space:hover { border-color: #3a3428; }
.space__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.space__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .7s var(--ease-out), filter .5s ease;
}
.space:hover .space__media img { transform: scale(1.07); filter: brightness(1.06); }
.space__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.space__t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .03em; }
.space__specs { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.space__row { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); padding: 10px 0; }
.space__row dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0; }
.space__row dd { font-size: 15px; color: var(--text); text-align: right; margin: 0; }
.space__link { margin-top: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
/* --- 13. Galerie ------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Na podstránkách je z položky odkaz na plnou fotku. Odkaz je ve výchozím
stavu řádkový a poměr stran ani výšku by neuplatnil — proto `display`. */
.gallery__item { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; background: var(--surface-2); }
a.gallery__item { cursor: zoom-in; }
a.gallery__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.06); }
.link-underline {
font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
border-bottom: 1px solid var(--gold-bd); padding-bottom: 6px;
transition: border-color .3s ease, color .3s ease;
}
.link-underline:hover { border-color: var(--gold); }
/* --- 14. Video --------------------------------------------------------- */
.video {
position: relative; display: block;
aspect-ratio: 16 / 9;
border-radius: 0; overflow: hidden;
background: var(--surface-2); color: var(--text);
}
.video img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(.62) saturate(.95);
transition: transform .7s var(--ease-out);
}
.video:hover img { transform: scale(1.04); }
.video__play {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 88px; height: 88px; border-radius: 0;
border: 1px solid rgba(228, 214, 190, .55);
background: rgba(10, 10, 11, .42);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
transition: background .3s ease, border-color .3s ease;
}
.video:hover .video__play { background: var(--gold); border-color: var(--gold); }
.video__cap {
position: absolute; left: 26px; bottom: 24px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--text); text-shadow: 0 1px 14px rgba(6, 6, 8, .9);
}
/* --- 15. Reference ----------------------------------------------------- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial {
background: var(--surface); border: 1px solid var(--border);
border-radius: 0;
padding: 30px 28px 26px;
display: flex; flex-direction: column; gap: 20px;
}
.testimonial__stars { letter-spacing: .22em; font-size: 14px; color: var(--gold); }
.testimonial blockquote { font-size: 18px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.testimonial figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testimonial__ini {
width: 44px; height: 44px; border-radius: 0;
border: 1px solid var(--gold-bd); background: var(--gold-bg); color: var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; flex: none;
}
.testimonial__who { display: flex; flex-direction: column; gap: 3px; }
.testimonial__name { font-size: 15px; color: var(--text); }
.testimonial__role { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
/* --- 16. FAQ ----------------------------------------------------------- */
/* odsazení kotvy má #faq společné s ostatními cíli navigace, viz sekce 3 */
/* Šest dotazů pod sebou natahovalo stránku zbytečně do výšky. Teď stojí
ve dvou sloupcích po třech.
Každý sloupec má **vlastní obal**, a to schválně. Když byly položky přímo
v mřížce (`grid-auto-flow: column`), ležela otázka vlevo a vpravo v témž
řádku — a jakmile se jedna rozbalila, řádek se zvedl i pod tou druhou,
takže to vypadalo, že se otevírají dvě naráz. Řádky mřížky nejdou udělat
nezávislé, takže se sloupce musely oddělit doopravdy. Rozbalení teď
zůstane ve svém sloupci.
Rozdělení 3 + 3 je v HTML. Kdyby dotazů přibylo, patří rozdělit znovu. */
.faq__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 48px;
align-items: start;
}
.faq__sloupec { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--border); }
/* Spodní čáru dostane poslední položka v každém sloupci, ne jen ta úplně
poslední — jinak by levý sloupec zůstal dole otevřený. */
.faq__sloupec > .faq__item:last-child { border-bottom: 1px solid var(--border); }
/* Nadpis kolem tlačítka je kvůli struktuře stránky, ne kvůli vzhledu —
proto přebírá písmo okolí a nesmí přidat tučnost ani větší stupeň. */
.faq__h { font: inherit; }
.faq__q {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
width: 100%;
padding: 22px 2px;
text-align: left;
color: var(--text-2);
transition: color .3s ease;
}
.faq__q:hover, .faq__item.is-open .faq__q { color: var(--text); }
.faq__q span { font-size: 18px; line-height: 1.4; text-wrap: pretty; }
.faq__icon {
flex: none; width: 22px; height: 22px; position: relative;
transform: rotate(0deg);
transition: transform .45s var(--ease-out);
}
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--gold); }
.faq__icon::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq__icon::after { left: 10px; top: 0; width: 2px; height: 22px; opacity: 1; transition: opacity .35s ease; }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { font-size: 16px; line-height: 1.75; color: var(--muted); padding: 0 60px 24px 2px; text-wrap: pretty; }
/* --- 17. Mapa ---------------------------------------------------------- */
.map { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: stretch; }
.map__text { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.map__frame {
min-height: 460px;
border: 1px solid var(--border); border-radius: 0;
overflow: hidden; background: var(--surface);
}
.map__frame iframe { width: 100%; height: 100%; min-height: 460px; border: 0; }
/* Co se ukáže místo mapy, dokud návštěvník nepřijme cookies. Mapa od
Googlu si ukládá cookies třetích stran, takže se nesmí načíst dřív. */
.mapa-zastup {
height: 100%; min-height: 460px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px; padding: 32px 28px; text-align: center;
}
.mapa-zastup p {
margin: 0; max-width: 340px;
font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.mapa-zastup__odkaz {
font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
transition: color .3s ease;
}
.mapa-zastup__odkaz:hover { color: var(--gold); }
/* --- 18. Patička ------------------------------------------------------- */
/* Patička dřív žádné pozadí neměla a brala ho ze stránky. Teď je hnědá,
aby spolu s navigací rámovala vínovou stránku shora i zdola.
Barva je stejná jako u odrolované navigace (#241812) — hnědá z hlavičky
#33231B by se od vínové stránky odlišila jen odstínem (1,01 : 1), tahle
tmavší dává 1,16 : 1 a patička je poznat i bez čáry nad ní. */
.footer { background: #241812; border-top: 1px solid #4A3428; }
.footer__grid {
max-width: var(--wrap); margin: 0 auto;
padding: 64px 32px 40px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px;
}
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col--brand { gap: 18px; }
.footer__col--brand img { height: 52px; width: auto; object-fit: contain; align-self: flex-start; }
/* Jméno firmy stojí nad adresou, ke které patří, a má se číst jako její
první řádek. Sloupec drží prvky 18px od sebe, což je tady o 6px moc:
záporný okraj rozestup úplně zruší a zbyde jen řádkový proklad — přesně
tolik, kolik je mezi „Vinohradská 25“ a „120 00 Praha 2“. Změřeno 6,6px
v obou případech. */
.footer__firma { font-size: 16px; line-height: 1.6; color: var(--muted); margin-bottom: -18px; }
.footer__addr { font-size: 16px; line-height: 1.6; color: var(--muted); }
/* Fakturační údaje. Menší než adresa — potřebuje je málokdo, ale kdo je
hledá, musí je přečíst bez lupy, proto ne --faint. */
.footer__fakturace { font-size: 15px; line-height: 1.6; color: var(--muted); }
/* Značkový sloupec je o 31 px vyšší než ostatní — logo, firma, adresa
a fakturační údaje. IBAN proto visel o 36 px níž než poslední řádek
zbylých sloupců a patička měla roztřepený spodek. space-between rozprostře
odkazy po celé výšce řádku mřížky: popisky zůstanou nahoře v jedné lince
s logem a spodní řádky se srovnají na 4 px.
Rozestup odkazů tím vzroste ze 40,6 na 48,6 px — to je ta cena.
Značkového sloupce se pravidlo netýká, ten výšku řádku určuje.
Na telefonu je každý sloupec vlastní řádek mřížky, takže se nic nezmění. */
.footer__col:not(.footer__col--brand) { justify-content: space-between; }
.footer__col a { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.footer__col a svg { flex: none; opacity: .85; }
.footer__bottom {
max-width: var(--wrap); margin: 0 auto;
padding: 0 32px 48px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
/* Ne --faint: patička má vlastní hnědé pozadí a na něm má --faint jen
2,64 : 1. --muted dává 5,24 : 1. */
color: var(--muted);
}
/* --- 19. Animace ------------------------------------------------------- */
@keyframes logo-shine {
0%, 64% { transform: translateX(-150%) skewX(-14deg); opacity: 0; }
70% { opacity: 0; }
78%, 88% { opacity: .55; }
97% { opacity: 0; }
100% { transform: translateX(250%) skewX(-14deg); opacity: 0; }
}
/* Prolnutí dvou fotek a k tomu pomalé přiblížení. Šest procent za šestnáct
vteřin je na hranici postřehnutelnosti — obraz „dýchá", ale nikdo pohyb
nezachytí. Zvětšení se vrací na začátek vždycky v okamžiku, kdy je vrstva
úplně průhledná; kdyby se přetáčelo za viditelnosti, byl by skok vidět.
Zvětšení nedělá díry: fotka má object-fit: cover, takže se jen víc ořízne.
Při zapnutém „omezit pohyb" animace neběží — hlídá to pravidlo v bloku 19. */
@keyframes hero-a {
0% { opacity: 1; transform: scale(1); }
42% { opacity: 1; transform: scale(1.05); }
50% { opacity: 0; transform: scale(1.06); }
62%, 92% { opacity: 0; transform: scale(1); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes hero-b {
0%, 42% { opacity: 0; transform: scale(1); }
50% { opacity: 1; transform: scale(1); }
92% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0; transform: scale(1.06); }
}
/* postupné odhalení při scrollu — třídy přepíná script.js */
.reveal {
opacity: 0;
transform: translateY(30px);
filter: blur(5px);
transition: opacity .6s cubic-bezier(.16,.84,.34,1),
transform .72s cubic-bezier(.16,.84,.34,1),
filter .6s ease;
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }
/* --- 20. Hlavička — zúžení pod 1200 px ---------------------------------
Plná lišta (navigace, sítě, kontakty, tlačítko, jazyky) potřebuje okno
1200 px. Pod tím jako první padnou textové kontakty — jsou nejširší
a telefon i mail zůstávají v patičce. Navigace tím drží až do 1050 px.
------------------------------------------------------------------------- */
@media (max-width: 1199px) {
/* užší odsazení lišty dá navigaci víc místa, než spadne do burgeru */
.header__bar { padding: 16px 24px; }
.header__side .contacts { display: none; }
}
/* --- 21. Hlavička — burger menu (< 1050 px) ----------------------------
Stejná hranice jako u rozvržení obsahu, aby se web nepřepínal dvakrát.
------------------------------------------------------------------------- */
@media (max-width: 1049px) {
.header__bar { padding: 12px 18px; }
.logo img { height: 38px; }
.burger { display: flex; }
.nav, .header__side { display: none; }
.header__mobile-side { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.header__mobile-side a { width: 32px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.header__mobile-side a:hover { color: var(--gold); transform: translateY(-2px); }
.header__mobile-contacts { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.header__mobile-contacts a {
display: flex; align-items: center; gap: 6px;
min-height: 26px; padding: 0 2px;
font-family: var(--f-mono); font-size: 10px; letter-spacing: .02em;
color: var(--text); white-space: nowrap;
}
.header__mobile-contacts svg { flex: 0 0 14px; margin: 0 1px; }
}
/* --- 22. Tablet a mobil (< 1050 px) ------------------------------------ */
@media (max-width: 1049px) {
.section { padding: 48px 20px; }
.section--tight { padding: 40px 20px; }
.clients { padding: 22px 20px 26px; }
h2 { font-size: 40px; }
.h2--sm { font-size: 36px; }
/* Pod 1050 px je sloupec pořád 600 px široký, ale písmo menší — na 21 px
vycházelo přes 80 znaků na řádek. 23 px to srazí pod 75. */
.h2--text { font-size: 26px; }
.hero__inner { padding: 84px 20px 140px; }
/* Barlow Condensed je proti Bebas o petinu sirsi, pri puvodnich 11vw
se nadpis na mobilu lamal uprostred fraze. Zmenseni o ~9 % vraci
zamyslene tri radky. */
.hero h1 { font-size: clamp(34px, 9.8vw, 64px); }
/* Štítky pod nadpisem zůstávají na 15 px — zvětšení je jen pro počítač,
kde je na ně v hero místo. Pod 1050 px by osm štítků narostlo o řádek. */
.chip { font-size: 15px; }
/* Klíč zůstává na užších obrazovkách o kousek výš než na počítači.
Řádky nadpisu jsou tam u sebe těsněji, takže o stejné snížení by
spodek klíče narazil do čárky nad Í na druhém řádku. */
/* Na telefonu se klíč zmenší spolu s nadpisem — je jen kolem 20 px široký,
takže se do levého okraje vejde. Odsazení textu s ním počítá. */
.why { grid-template-columns: 1fr 1fr; }
.cases { grid-template-columns: 1fr 1fr; }
.spaces { grid-template-columns: 1fr 1fr; }
.testimonials { grid-template-columns: 1fr; }
.program { gap: 24px; }
/* karty akcí vedle sebe se sem už nevejdou, jdou pod sebe */
.program__akce { grid-template-columns: 1fr; }
.event__head { gap: 10px; }
.event__t { font-size: 24px; }
.event__link { font-size: 9.5px; }
.event__link img { height: 40px; margin: -6px 2px -6px -14px; }
.event__link--rr img { height: 54px; margin: -13px 2px -13px -6px; }
.event__cols { grid-template-columns: 1fr; }
.map { grid-template-columns: 1fr; gap: 32px; }
.map__frame, .map__frame iframe, .mapa-zastup { min-height: 320px; }
.footer__grid { padding: 56px 20px 32px; }
.footer__bottom { padding: 0 20px 40px; }
.faq__a p { padding-right: 20px; }
/* dva sloupce dotazů se sem už nevejdou — jdou pod sebe. Spodní čára
prvního sloupce je pak zároveň předělem k druhému. */
.faq__list { grid-template-columns: 1fr; }
}
/* --- 22b. Formáty akcí na tabletu a úzkém okně -------------------------
Mřížka spadne na dva sloupce, takže dlaždice je o třetinu nižší než na
širokém okně — ale panel v ní má pořád stejný obsah. Naměřeno na 660 px:
dlaždice 303 × 227, panel potřeboval 242 a na nejhorší dlaždici 278,
tedy přetekl o 15 až 51 px. Text se proto zmenší a dlaždice dostane
trochu víc výšky; obojí dohromady dá přes 70 px, což stačí i na tu
nejhorší.
------------------------------------------------------------------------- */
@media (min-width: 620px) and (max-width: 1049px) {
.case { aspect-ratio: 4 / 3.3; }
.case__body { --pad: 16px; --nazev: 25px; --mezera: 10px; padding: var(--pad) 18px; }
.case__desc { font-size: 14px; line-height: 1.4; margin-bottom: 10px; }
.case__list { gap: 5px 6px; }
.case__list span { font-size: 11px; padding: 3px 7px; }
}
/* --- 23. Malý mobil ---------------------------------------------------- */
@media (max-width: 619px) {
.gallery { grid-template-columns: 1fr 1fr; }
.program { gap: 28px; }
/* na telefonu je plakát vedle plakátu nečitelný — pod sebe a na plnou šířku */
.program__postery { grid-template-columns: 1fr; gap: 14px; }
/* Formáty akcí ve dvou sloupcích — osm dlaždic pod sebou je na telefonu
zbytečně dlouhé. Popisek se musí zmenšit, jinak přeteče přes dlaždici. */
.cases { grid-template-columns: 1fr 1fr; gap: 12px; }
.case__body { --pad: 12px; --nazev: 19px; --mezera: 10px; padding: var(--pad); }
/* Panel se tady neodkrývá vůbec. Dlaždice má na půl šířky jen 136 px,
kdežto panel potřebuje 305 — nezachránilo by to ani zmenšení písma,
chybí 169 px. Zůstane tedy název jako dřív a ťuknutí vede na
podstránku, kde je totéž napsané v úplnosti.
Na dotyku se panel neodkrýval nikdy (pravidlo je pod hover: hover),
tohle řeší jen úzké okno na počítači a průchod klávesnicí. */
.case:hover .case__body:has(.case__desc),
.case:focus-visible .case__body:has(.case__desc) {
transform: translateY(var(--klid));
}
/* Prostory ve dvou sloupcích jako karty Proč Tresor — jinak by čtyři sály
na telefonu zabraly přes 2400 px a uživatel by se uscrolloval.
Do poloviční šířky se ale musí vejít i vnitřek karty: */
.spaces { grid-template-columns: 1fr 1fr; gap: 12px; }
.space__body { padding: 14px 14px 16px; gap: 12px; }
.space__t { font-size: 24px; }
/* popisek a hodnota pod sebe — vedle sebe se „Kapacita 600“ nevejde */
.space__row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0; }
.space__row dd { text-align: left; font-size: 14px; }
.space__link { font-size: 10px; letter-spacing: .1em; }
/* Nadpis karty seděl vedle ikony v nezalomitelném řádku flexu, takže se
na úzkém telefonu nevešel a karta ho ořízla — má overflow: hidden.
Naměřeno při 320 px: na text zbývalo 62 px, ale slovo „PROFESIONÁLNÍ“
měří 105 px. Zmenšit písmo nestačí, muselo by mít 10 px. Ikona proto
jde nad text a ten dostane celou šířku karty.
min-width: 0 je tam proto, že položka flexu se sama od sebe nesmrští
pod šířku svého nejdelšího slova. */
.why__card { padding: 14px; }
.why__head { flex-direction: column; align-items: flex-start; gap: 8px; }
/* O bod menší: „PROFESIONÁLNÍ“ má při 18 px 105 px a do karty se vejde
103 px. Sedmnáct dá 4 px rezervy — i pro angličtinu a delší nadpisy. */
.why__t { min-width: 0; font-size: 17px; }
/* na 360px displejích se řádek hlavičky nevešel — stáhneme kontakty a ikony */
.header__mobile-contacts a { font-size: 9px; gap: 4px; }
/* Tři ikony sítí vedle dvou čísel a e-mailu se na 360–384px displeji
nevejdou — obsah přetekl přes okraj a vznikl vodorovný posuvník.
Šetříme na mezerách a odsazení, ne na velikosti dotykové plochy. */
.header__bar { gap: 6px; padding: 12px 10px; }
.header__mobile-side { gap: 0; }
.header__mobile-side a { width: 21px; }
}
/* Nejužší telefony: lišta potřebuje 353 px, takže se pod 360 px nevejde.
Ikony sítí z hlavičky zmizí — v patičce zůstávají a telefon s e-mailem
jsou důležitější. */
@media (max-width: 359px) {
.header__mobile-side { display: none; }
}
/* --- 24. Omezený pohyb ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.reveal { opacity: 1; transform: none; filter: none; }
}
/* --- 25. Podstránky — hlavička stránky ---------------------------------
Nižší hero než na domovské stránce: 34 vh, na mobilu 26 vh.
Fotka je jen podklad, význam nese nadpis — proto alt="".
------------------------------------------------------------------------- */
.page-hero {
position: relative;
min-height: 34vh;
display: flex;
align-items: flex-end;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.page-hero__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(.42) saturate(.8);
}
.page-hero__veil {
position: absolute; inset: 0;
background: linear-gradient(to top, var(--bg) 2%, rgba(var(--bg-rgb), .4));
}
.page-hero__inner {
position: relative;
max-width: var(--wrap); margin: 0 auto; width: 100%;
/* Odsazení nahoře se projeví jen tam, kde obsah hlavičku vyplní až k
hornímu okraji — jinde ho pohltí zarovnání dolů. Bez něj se nadpis
lepí rovnou pod navigaci.
Dole je ho víc: obsah je zarovnaný ke spodní hraně, takže větší spodní
odsazení ho posune nahoru a zmenší prázdný pruh nad nadpisem. Výška
hlavičky ani měřítko fotky se tím nemění — jen se text srovná blíž
ke středu. */
padding: 30px 32px 74px;
display: flex; flex-direction: column; gap: 18px;
}
.page-hero__kicker {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--muted);
}
/* Hlavička, ve které je jen nadpis (a případně štítek nad ním). Pevných
34 vh je navržených pro nadpis s odstavcem — u samotného titulku zůstane
nad ním přes 200 px prázdné fotky, protože obsah je zarovnaný dolů.
Tady výšku určí obsah plus odsazení: pruh fotky zůstane, ale poloprázdný
nebude. */
.page-hero--slim { min-height: 0; }
/* Dvě fotky vedle sebe místo jedné přes celou šířku. Používá to nápojový
lístek: snímky drinků jsou na výšku a v jednom širokém pruhu by se z nich
vešel jen proužek. Na polovině šířky je vidět dvakrát tolik.
Fotky se nezmenšují — obě mají object-fit: cover jako předtím, jen menší
rám. */
.page-hero--duo .page-hero__img { width: 50%; right: auto; }
.page-hero--duo .page-hero__img--b { left: 50%; }
.page-hero--slim .page-hero__inner { padding-top: 88px; }
.page-hero h1 { font-size: clamp(44px, 5.4vw, 84px); }
.page-hero .lead { color: var(--text-2); }
/* --- 26. Podstránky — poptávkový formulář ------------------------------ */
/* dvousloupcové rozvržení podstránek — obsah vlevo, doplněk vpravo.
Pod 1050 px jde pod sebe (viz sekce 29). */
.split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 56px;
align-items: start;
}
.form { display: flex; flex-direction: column; gap: 18px; }
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
/* Rámeček měl --border-2, proti pozadí kontrast 1,26 : 1 — pole splývala
s podkladem a nebylo poznat, kam se klikne. Norma chce u obrysu
ovládacího prvku 3 : 1, --dim dává 3,68 : 1. */
.field input, .field select, .field textarea {
background: var(--surface);
border: 1px solid var(--dim);
border-radius: 0;
color: var(--text);
font: 400 17px var(--f-body);
padding: 14px 16px;
min-height: 44px; /* dotykový cíl na mobilu */
outline: none; /* vlastní prstenec je níž u :focus-visible */
transition: border-color .3s ease;
}
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
/* při ovládání klávesnicí nesmí být vidět jen změna rámečku o 1 px */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* prohlížeč označí chybné pole až po pokusu o odeslání */
.form.is-checked .field input:invalid,
.form.is-checked .field textarea:invalid { border-color: var(--gold-dk); }
.form__submit { align-self: flex-start; font-size: 13px; padding: 18px 32px; }
/* během odesílání je tlačítko zamčené, ať poptávka neodejde dvakrát */
.form__submit:disabled { opacity: .55; cursor: default; }
/* Hvězdička u povinných polí. Zlatá, aby byla vidět, ale nekřičela.
V HTML má aria-hidden — odečítač povinnost pozná z atributu required
a „hvězdička“ uprostřed popisku by ho jen mátla. */
.label__req { color: var(--gold); }
/* Vysvětlivka nad poli. Samotná hvězdička je zvyk, ne pravidlo — WCAG 3.3.2
chce, aby bylo řečeno, co znamená. */
.form__req { font-size: 13px; color: var(--text-3); margin-bottom: 2px; }
.form__note { font-size: 13px; color: var(--dim); }
/* hláška, když se poptávku nepodaří odeslat — schválně jinak než zlatý panel
s poděkováním, aby se to nedalo splést */
.form__error {
border-left: 3px solid var(--gold-dk);
background: var(--surface-2);
padding: 14px 18px;
font-size: 15px; line-height: 1.55;
color: var(--text-2);
}
.form__error[hidden] { display: none; }
/* past na roboty — pro čtečky i myš neviditelná, ale pro robota vyplnitelná */
.form__hp {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.form__done {
border: 1px solid var(--gold);
background: var(--gold-bg);
padding: 40px;
display: flex; flex-direction: column; gap: 14px;
}
.form__done[hidden] { display: none; }
.form__done-t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 44px; line-height: 1; letter-spacing: .02em; color: var(--gold); }
.form__done p { font-size: 17px; line-height: 1.6; color: var(--text-3); }
.form__again { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; align-self: flex-start; }
.contact__aside { display: flex; flex-direction: column; gap: 28px; }
.contact__block { display: flex; flex-direction: column; gap: 10px; }
.contact__phone { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 40px; line-height: 1.1; letter-spacing: .02em; }
.contact__mail { font-size: 19px; }
.contact__mail.is-sm { font-size: 17px; }
.contact__addr { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.contact__note { font-size: 15px; color: var(--dim); }
/* Poptávka na podstránce dlaždice. Formulář tu stojí v levém sloupci pod
štítky, kde dřív zůstávalo prázdno — na Koncertech 742 px ze 1048.
Rámeček je tu proto, aby bylo poznat, kde končí popis prostoru a začíná
poptávka; bez něj obojí splývalo do jednoho sloupce textu. */
/* Panel je třetí dítě .split, ne součást levého sloupce. Na telefonu tím
přirozeně spadne až za fotky — poslední, co člověk před patičkou vidí,
má být výzva k akci, ne galerie. Zpátky pod štítky ho na širokém okně
vrátí mřížka níž. */
.poptavka {
border: 1px solid var(--border-2);
background: var(--surface);
padding: 28px;
display: flex; flex-direction: column; gap: 16px;
}
.poptavka__t {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
font-size: 30px; line-height: 1.05; letter-spacing: .02em; color: var(--gold);
}
.poptavka__lead { font-size: 15px; line-height: 1.55; color: var(--text-3); margin-top: -8px; }
.poptavka .form { gap: 16px; }
.poptavka .form__done { padding: 24px; }
/* Poznámka pod tlačítkem sedí uvnitř panelu, tedy na --surface, ne na pozadí
stránky. --dim tam má jen 4,19 : 1 — na kontaktní stránce, kde panel není,
má na pozadí 4,72 a projde. O stupeň světlejší --text-3 dá 6,04. */
.poptavka .form__note { color: var(--text-3); }
/* Na širokém okně má panel stát pod štítky, ne pod fotkami. Galerie se proto
roztáhne přes oba řádky druhého sloupce a panel se sám umístí do druhého
řádku prvního — v HTML je až za galerií, ale mřížce to nevadí.
Řádková mezera je menší než sloupcová: 56 px mezi štítky a formulářem
vypadalo jako předěl mezi dvěma sekcemi. */
@media (min-width: 1050px) {
.split--poptavka {
grid-template-columns: 1fr 1fr;
/* `auto 1fr`, ne dvakrát auto. Galerie sahá přes oba řádky a mřížka by
si její výšku mezi ně rozpustila — mezi štítky a formulářem pak zela
díra 167 px místo 28. Když je druhý řádek pružný (1fr), výška
přesahujícího prvku se do prvního řádku nerozpouští a ten zůstane
přesně tak vysoký, jak jsou štítky. */
grid-template-rows: auto 1fr;
row-gap: 28px;
}
.split--poptavka > .gallery--duo { grid-column: 2; grid-row: 1 / 3; }
}
/* --- 27. Podstránky — sály a informační pruh --------------------------- */
/* align-items: start, ne center — text má začínat na horní hraně fotky.
Při centrování byl u vysokých fotek podsazený a nadpis "plaval" v prázdnu. */
.hall { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
/* obrácené pořadí — text vlevo, fotka vpravo */
.hall--flip { grid-template-columns: 1fr 1.15fr; }
.hall__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; background: var(--surface-2); }
.hall__media img { width: 100%; height: 100%; object-fit: cover; }
/* víc fotek k jednomu sálu — jedna velká nahoře, dvě menší pod ní.
Vnější poměr 4:3 zůstává, aby blok lícoval se sousedním textem. */
/* víc fotek k jednomu sálu: první přes celou šířku, zbytek ve dvou sloupcích.
Pevný poměr 4:3 tady neplatí — výšku určí fotky samy, jinak by se ořízly. */
.hall__media--multi {
aspect-ratio: auto;
overflow: visible;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
background: none;
}
/* každá fotka je odkaz na plnou velikost — bez JS se otevře rovnou,
s JS ji odchytí překryv stejně jako v galerii */
.hall__media--multi > a {
display: block; overflow: hidden;
aspect-ratio: 3 / 2;
border-radius: 0;
cursor: zoom-in;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hall__media--multi > a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
/* při dvou fotkách nemá smysl první roztahovat — druhá by zůstala sama
v řádku a vedle ní prázdné místo */
.hall__media--multi > a:first-child:nth-last-child(2) { grid-column: auto; aspect-ratio: 3 / 2; }
/* První fotka zabírá celý řádek, zbytek se skládá po dvou. Když je fotek
dohromady sudý počet, zbyde jich na dvojice lichý počet a poslední by
stála sama vedle prázdného místa. V tom případě roztáhneme i ji — řádek
je pak plný a galerie končí stejně, jako začala.
Výjimka jsou právě dvě fotky: tam se podle pravidla o řádek výš neroztahuje
ani první, obě stojí vedle sebe a roztažení té druhé by rozvržení rozbilo. */
.hall__media--multi > a:last-child:nth-child(even):not(:nth-child(2)) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.hall__media--multi > a:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .95); }
/* ---- sál s velkou galerií -------------------------------------------------
Dva sály na stránce mají úplně jiný objem fotek: Klub II. dvě, hlavní sál
osmnáct. Vedle sebe fungují jen ty dvě — u osmnácti měřil sloupec fotek
2349 px, popis 217 px, a text plaval uprostřed dvou metrů prázdna.
Od páté fotky se proto rozvržení překlopí: popis nahoru přes celou šířku,
fotky pod něj do tří sloupců. Rozhoduje `:has()` podle skutečného počtu
fotek, aby se na to při přidávání nedalo zapomenout. Kdyby prohlížeč
`:has()` neuměl, zůstane rozvržení vedle sebe — tedy to, co bylo dosud.
--------------------------------------------------------------------------- */
.hall:has(.hall__media--multi > a:nth-child(5)) {
grid-template-columns: 1fr;
gap: 30px;
align-items: start;
}
/* popis vždy nahoře, i u obrácené varianty; užší sloupec kvůli délce řádku */
.hall:has(.hall__media--multi > a:nth-child(5)) .hall__body {
order: -1;
max-width: 720px;
}
.hall:has(.hall__media--multi > a:nth-child(5)) .hall__media--multi {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Pravidla o roztahování první a poslední fotky platí pro dva sloupce.
Ve třech by dělala díry, tady se proto ruší a mřížka je jednotná. */
.hall:has(.hall__media--multi > a:nth-child(5)) .hall__media--multi > a:first-child,
.hall:has(.hall__media--multi > a:nth-child(5)) .hall__media--multi > a:last-child {
grid-column: auto;
aspect-ratio: 3 / 2;
}
/* Sbalená galerie: vidět jsou první tři řady, zbytek čeká na tlačítko.
Od třinácti fotek výš — pod tím se skrývá sotva řádek a nemá to smysl.
Skrývá rovnou CSS, ne třída přidaná skriptem. Skript běží až na konci
stránky a to je pozdě: prohlížeč do té doby obrázky vyžádá a `loading="lazy"`
je nezachrání. Takhle se skryté fotky nestáhnou vůbec, dokud si o ně
člověk neřekne.
Podmínka `html.js` je pojistka pro vypnutý JavaScript — bez něj by se
skryté fotky neměly jak vrátit, takže se galerie ani neschová. Třídu
přidává mrňavá vložka v hlavičce stránky, ještě před vykreslením. */
html.js .hall:not(.hall--rozbaleno) .hall__media--multi:has(> a:nth-child(13)) > a:nth-child(n+10) {
display: none;
}
.hall__vic {
justify-self: start;
font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold-bd);
padding: 13px 22px;
transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.hall__vic:hover, .hall__vic:focus-visible { border-color: var(--gold); background: var(--surface); }
/* Posuvný pás místo mřížky fotek. U hlavního sálu bylo osmnáct fotek —
i sbalené zabíraly půl stránky a k popisu sálu jich tolik netřeba.
Teď je z nich jedno okno, ve kterém se posouvá do stran; tečky pod ním
doplní script.js. Na rozdíl od podstránek dlaždic je pás pásem v každé
šířce, ne jen na telefonu — proto se nezavírá do media dotazu. */
.hall__media--pas {
aspect-ratio: auto; /* výšku drží fotky uvnitř, ne buňka */
overflow: visible; /* jinak by se ořízly tečky pod pásem */
background: none;
display: flex; flex-direction: column; gap: 12px;
}
/* Obálka kolem pásu. Šipky nejdou dát dovnitř — pás se posouvá a odjely by
s fotkami; potřebují pozicovaného rodiče, který obepíná právě jen pás,
ne tečky pod ním. */
.pas-okno { position: relative; }
/* Šipky pro posun. Průsvitná vínová podle --bg-rgb, ne barva natvrdo —
fotky pod nimi jsou různě světlé a tmavý podklad drží ikonu čitelnou
na všech. V klidu jen naznačené zlatým okrajem na 45 %, po najetí plné. */
.pas-sipka {
position: absolute; top: 50%; margin-top: -19px;
width: 38px; height: 38px; padding: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text);
background: rgba(var(--bg-rgb), .72);
border: 1px solid rgba(221, 174, 116, .45);
border-radius: 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.pas-sipka--prev { left: 12px; }
.pas-sipka--next { right: 12px; }
.pas-sipka:hover { background: rgba(var(--bg-rgb), .92); border-color: var(--gold); color: var(--gold); }
.pas-sipka:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Na dotyku se posouvá prstem — šipky by jen ubíraly z fotky. */
@media (hover: none) { .pas-sipka { display: none; } }
.hall__media--pas .pas {
display: flex; gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hall__media--pas .pas::-webkit-scrollbar { display: none; }
.hall__media--pas .pas > a {
flex: 0 0 100%;
scroll-snap-align: center;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface-2);
cursor: zoom-in;
}
.hall__media--pas .pas > a img { width: 100%; height: 100%; object-fit: cover; }
.hall__media--pas .pas > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* tečky se tu kreslí vždycky, ne jen na telefonu jako u dlaždic */
.hall__media--pas .karusel-ovl { display: flex; margin-top: 0; }
.hall__body { display: flex; flex-direction: column; gap: 18px; }
.hall__t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 46px; line-height: .98; letter-spacing: .02em; }
/* min(300px, 100%) místo holých 300px: na displejích užších než zhruba 340 px
už na sloupec 300 px není místo a mřížka by přetekla ven ze stránky.
Takhle se smí sloupec zúžit pod svoje minimum, když je okno menší.
Nad 340 px se nemění nic. */
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; align-items: start; }
.info--lg { gap: 56px; }
.info__t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 32px; line-height: 1.1; letter-spacing: .03em; color: var(--gold); }
.info__d { font-size: 16px; line-height: 1.65; color: var(--text-3); text-wrap: pretty; }
/* --- 28. Podstránky — Roller Rink (neonová identita) -------------------
Neon platí jen uvnitř .rr, zbytek webu zůstává zlatý. Barvy pouze
--rr-pink a --rr-cyan z :root a jejich průhledné odstíny — stejně jako
to už dělá zlatá u .why__ic nebo .video__play.
------------------------------------------------------------------------- */
.rr .page-hero__kicker { color: var(--rr-cyan); }
/* Štítky sekcí jsou stejný prvek jako zlatý .eyebrow jinde na webu, jen
v neonové růžové. Text musí zůstat tmavý — bílá má na téhle růžové jen
3,6 : 1. Nestačí ale vzít --bg: od chvíle, co je stránka vínová místo
skoro černé, klesl kontrast z 5,4 : 1 na 4,09 : 1. Proto vlastní téměř
černá, která dává 5,6 : 1 (víc už z téhle růžové nejde dostat — i čistá
černá končí na 5,77 : 1). Selektor je pod .rr, takže se to netýká štítků
v patičce, ta je mimo. */
.rr .eyebrow { background: var(--rr-pink); color: #12080A; }
.rr .page-hero h1 { text-shadow: 0 0 26px rgba(255, 20, 147, .45), 0 0 70px rgba(0, 213, 230, .22); }
/* Fotka bruslařů je pro široký pruh moc „na výšku“ — ořez na střed by z ní
nechal jen trupy. Proto má Roller Rink vlastní soubor, kde je scéna
zmenšená a po stranách doplněná rozostřeným okolím: postavy jsou celé
a výška pruhu zůstává stejná jako na ostatních podstránkách.
Světlejší nastavení než jinde: tmavý klub potřebuje víc jasu než nasvícené
sály, na které je základní hodnota. */
.rr .page-hero__img { filter: brightness(.58) saturate(.95); }
/* Světlejší fotka by ukrojila z čitelnosti nadpisu, který na ní leží.
Závoj proto dole přitvrdíme a nahoře naopak povolíme — text je u spodní
hrany, prostor se má ukázat nad ním. */
.rr .page-hero__veil {
background: linear-gradient(to top,
var(--bg) 3%,
rgba(var(--bg-rgb), .74) 30%,
rgba(var(--bg-rgb), .16) 100%);
}
/* logo stojí vedle nadpisu, ne nad ním — využije prázdné místo vpravo
a hero kvůli němu nepřeroste předepsaných 34 vh */
.rr-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
.rr-logo {
height: 168px; width: auto; flex: none;
/* odsazené od pravého okraje a nadzvednuté nad účaří textu */
margin: 0 72px 28px 0;
filter: drop-shadow(0 0 18px rgba(255, 20, 147, .45));
}
/* Hlavička: čtvercové logo je při 46 px opticky drobné, ale vyšší logo by
zvedlo celou lištu a ta by mezi stránkami poskakovala. Záporný okraj drží
lištu na stejných 78 px jako všude jinde. */
/* Od srpna 2026 tu visí totéž logo Tresor Club, jen v neonových barvách
místo zlaté — má stejný tvar i poměr stran jako na ostatních stránkách.
Drží proto i stejnou velikost a žádné odsazení navíc nepotřebuje; kdyby
bylo větší, lišta by mezi stránkami poskakovala.
Předchozí logo bylo čtvercové a muselo se stahovat záporným okrajem. */
.logo--rr img { height: 46px; }
/* štítky v neonu místo zlaté */
.rr .tag {
color: var(--rr-cyan);
border-color: rgba(0, 213, 230, .34);
background: rgba(0, 213, 230, .07);
}
.rr-card {
border: 1px solid rgba(255, 20, 147, .35);
background: rgba(255, 20, 147, .06);
padding: 24px;
margin-top: 8px;
display: flex; flex-direction: column; gap: 10px;
}
.rr-card__t {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .03em;
color: var(--rr-pink);
text-shadow: 0 0 18px rgba(255, 20, 147, .5);
}
.rr-card p { font-size: 16px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }
/* ceník */
.rr-list { border: 1px solid var(--border); background: var(--surface); }
.rr-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
padding: 16px 22px;
border-bottom: 1px solid var(--border);
}
.rr-row:last-child { border-bottom: 0; }
.rr-row__l { font-size: 16px; color: var(--text-2); text-wrap: pretty; }
.rr-row__v {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 24px; letter-spacing: .03em;
color: var(--rr-pink); white-space: nowrap;
}
/* otevírací doba — plakát z Instagramu místo vypsaného seznamu */
.rr-plakat { margin: 0; }
.rr-plakat img {
width: 100%;
/* Plakát je čtverec a v postranním sloupci by jinak přerostl zbytek
obsahu. Nad 520 px se přestane roztahovat a zůstane u levého okraje. */
max-width: 520px;
border: 1px solid var(--border);
}
/* Časy jsou na plakátu jen namalované. Tenhle seznam je nese jako text pro
čtečky obrazovky a vyhledávače, ale na stránce se nezobrazuje.
Nepoužívá display: none — to by ho čtečka přeskočila taky. Místo toho ho
zmenší na jediný bod a ořízne. */
.vp-jen-pro-cteni {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.rr-hours { border: 1px solid var(--border); background: var(--surface); padding: 6px 0; }
.rr-hour {
display: flex; justify-content: space-between; gap: 12px;
padding: 9px 22px;
font-family: var(--f-mono); font-size: 13px; color: var(--text-2);
}
.rr-hour__t { color: var(--rr-cyan); }
.rr-note { font-size: 14px; line-height: 1.5; color: var(--dim); }
/* --- 29. Podstránky — galerie a lightbox ------------------------------- */
/* zděná mřížka přes CSS sloupce — fotky si drží vlastní poměr stran */
.masonry { column-count: 3; column-gap: 12px; }
.masonry__item {
display: block;
margin-bottom: 12px;
break-inside: avoid;
border-radius: 0;
overflow: hidden;
background: var(--surface-2);
}
.masonry__item img { width: 100%; display: block; transition: transform .6s var(--ease-out); }
.masonry__item:hover img { transform: scale(1.04); }
.lightbox {
position: fixed; inset: 0; z-index: 100;
background: rgba(6, 6, 8, .94);
display: flex; align-items: center; justify-content: center;
padding: 72px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__btn {
position: absolute;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
color: var(--text);
border: 1px solid var(--border-3);
border-radius: 0;
background: rgba(10, 10, 11, .6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform .4s var(--ease), border-color .3s ease, color .3s ease;
}
.lightbox__btn:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.05); }
.lightbox__btn--close { top: 20px; right: 20px; }
.lightbox__btn--prev { left: 16px; top: 50%; margin-top: -24px; }
.lightbox__btn--next { right: 16px; top: 50%; margin-top: -24px; }
.lightbox__count {
position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em;
color: var(--muted); white-space: nowrap;
}
/* stránka pod otevřeným lightboxem se nesmí posouvat */
body.is-locked { overflow: hidden; }
/* --- 30. Podstránky — nápojový lístek ---------------------------------- */
/* Na téhle stránce je pod hlavičkou rovnou lístek, žádný úvodní text.
Plné odsazení sekce by mezi nadpisem a plakátem nechalo prázdné pásmo. */
.section--menu { padding-top: 26px; }
/* Lístek je široký dokument. V kontejneru se zmenší, proto je z celého
plakátu odkaz, který ho otevře v plné velikosti. */
.menu-sheet {
position: relative;
display: block; width: 100%; padding: 0;
border: 1px solid var(--gold-bd);
background: var(--bg);
cursor: zoom-in;
transition: border-color .3s ease;
}
.menu-sheet:hover, .menu-sheet:focus-visible { border-color: var(--gold); }
.menu-sheet img { width: 100%; height: auto; }
.menu-sheet__hint { position: absolute; right: 14px; bottom: 14px; }
/* náhled lístku je odkaz na plný obrázek. Na širokém okně ho JavaScript
odchytí a otevře v překryvu, na telefonu se nechá projít — nativní
prohlížeč obrázku umí štípnutí prsty, což se na hustý plakát hodí víc. */
/* zvětšený lístek: původní velikost, překryv se posouvá */
.lightbox--sheet { align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 76px 24px 40px; }
.lightbox--sheet .lightbox__img { max-width: none; max-height: none; width: auto; height: auto; }
/* zavírátko musí zůstat na místě i při odrolování */
.lightbox--sheet .lightbox__btn--close { position: fixed; }
/* --- 31. Podstránky — firemní akce ------------------------------------- */
/* dvojice fotek vedle textu — jen jiný počet sloupců a poměr stran
než má galerie na domovské stránce */
.gallery--duo { grid-template-columns: 1fr 1fr; }
.gallery--duo .gallery__item { aspect-ratio: 3 / 2; }
/* Tečky a počítadlo pod pásem fotek — doplňuje je script.js.
Vzhled je tady v základu, protože pás se používá na dvou místech s různou
podmínkou: na dlaždicových podstránkách jen pod 620 px (sekce 34), v sálech
na Prostorách v každé šířce (sekce 27). Dřív byl vzhled schovaný v tom
mobilním bloku a na Prostorách zůstaly tečky nenastylované — průhledné
čtverečky 12 px. Skrytí zůstává tady, zapíná se na obou místech zvlášť. */
.karusel-ovl { display: none; align-items: center; gap: 12px; margin-top: 12px; }
.karusel-tecky { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; }
.karusel-tecka {
position: relative;
width: 8px; height: 8px; padding: 0;
background: var(--dim); border: 0; border-radius: 0;
transition: background .25s ease, transform .25s ease;
}
/* samotná tečka je na prst moc malá, proto neviditelné rozšíření kolem */
.karusel-tecka::before { content: ''; position: absolute; inset: -12px; }
.karusel-tecka[aria-current="true"] { background: var(--gold); transform: scale(1.35); }
.karusel-tecka:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.karusel-pocet {
font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
color: var(--dim); white-space: nowrap;
}
/* --- 32. Podstránky — textové stránky ----------------------------------
Společné rozvržení pro oba návštěvní řády a ochranu osobních údajů.
Body jsou skutečný /- , odrážku kreslí ::before.
------------------------------------------------------------------------- */
.doc { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.doc__intro {
border-left: 2px solid var(--gold);
padding: 2px 0 2px 20px;
font-size: 16px; line-height: 1.62;
color: var(--text); text-wrap: pretty;
}
.doc__sec { display: flex; flex-direction: column; gap: 18px; }
.doc__head {
display: flex; align-items: baseline; gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.doc__n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--gold); flex: none; }
.doc__t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .03em; color: var(--text); }
.doc__list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.doc__item {
display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
font-size: 16px; line-height: 1.62; color: var(--muted); text-wrap: pretty;
}
.doc__item::before {
content: '';
margin-top: 7px; width: 6px; height: 6px;
border-radius: 0; background: var(--gold);
justify-self: center;
}
.doc__box {
background: linear-gradient(160deg, var(--gold-bg), var(--bg-dk));
border: 1px solid rgba(221, 174, 116, .28);
border-radius: 0;
padding: 26px 24px;
display: flex; flex-direction: column; gap: 16px;
}
.doc__box--tight { gap: 8px; }
.doc__box-t { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: .04em; color: var(--gold); }
.doc__mail { font-family: var(--f-mono); font-size: 15px; letter-spacing: .04em; color: var(--text); align-self: flex-start; }
.doc__mail:hover { color: var(--gold); }
.doc__tels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.doc__tel {
display: flex; flex-direction: column; gap: 4px;
background: rgba(255, 255, 255, .02);
border: 1px solid var(--border-2); border-radius: 0;
padding: 12px 14px;
}
.doc__tel-n { font-family: var(--f-mono); font-size: 18px; letter-spacing: .06em; color: var(--text); }
.doc__tel-l { font-size: 11.5px; line-height: 1.35; color: var(--dim); text-wrap: pretty; }
.doc__end { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 22px; letter-spacing: .06em; color: var(--dim); }
/* upozornění, že závazné je české znění — jen na anglických verzích řádů */
.doc__binding { font-size: 13px; line-height: 1.5; color: var(--dim); margin-top: -28px; }
/* --- 33. Podstránky — tablet a mobil (< 1050 px) ----------------------- */
@media (max-width: 1049px) {
.page-hero { min-height: 26vh; }
/* Na telefonu jsou dva sloupce příliš úzké — zůstane jen první fotka
přes celou šířku. */
.page-hero--duo .page-hero__img { width: 100%; }
.page-hero--duo .page-hero__img--b { display: none; }
.page-hero__inner { padding: 24px 20px 24px; }
/* min-height se tady nastavuje znovu, takže ho pro slim variantu musíme
znovu vypnout — jinak by pravidlo z media dotazu přebilo to výše */
.page-hero--slim { min-height: 0; }
.page-hero--slim .page-hero__inner { padding-top: 52px; }
.page-hero h1 { font-size: clamp(34px, 9.5vw, 54px); }
/* pod 1050 px se dva sloupce mačkají — stejně jako .map jdeme pod sebe */
.split { grid-template-columns: 1fr; gap: 32px; }
.contact__phone { font-size: 30px; }
/* dotykové cíle vedle formuláře taky aspoň 44 px */
.contact__phone, .contact__mail { display: flex; align-items: center; min-height: 44px; }
.form__done { padding: 28px 22px; }
.form__done-t { font-size: 36px; }
.hall, .hall--flip { grid-template-columns: 1fr; gap: 32px; }
/* na užším okně se tři sloupce fotek nevejdou */
.hall:has(.hall__media--multi > a:nth-child(5)) .hall__media--multi {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* dva sloupce: sbalení má končit celým řádkem, tedy po osmé fotce */
html.js .hall:not(.hall--rozbaleno) .hall__media--multi:has(> a:nth-child(13)) > a:nth-child(n+9) {
display: none;
}
/* v jednom sloupci musí být nejdřív název sálu a popis, teprve pak fotky —
jinak návštěvník scrolluje řadou fotek a neví, čeho se týkají */
.hall__body { order: -1; }
.hall__t { font-size: 34px; }
.info--lg { gap: 32px; }
/* vedle nadpisu na mobilu místo není; neon tam nese hlavička, kicker,
štítky a ceny */
.rr-logo { display: none; }
.logo--rr img { height: 38px; }
.masonry { column-count: 2; }
.lightbox { padding: 76px 12px 56px; }
.lightbox__btn--prev { left: 8px; }
.lightbox__btn--next { right: 8px; }
}
/* --- 34. Podstránky — malý mobil (< 620 px) ---------------------------- */
@media (max-width: 619px) {
.form__row { grid-template-columns: 1fr; }
.masonry { column-count: 1; }
/* Fotky na telefonu: jedno okno, posouvá se do stran ------------------
Jeden sloupec pod sebou byl neúnosný — devět fotek měřilo 3 366 px,
sedmdesát procent celé stránky. O dvacet pixelů širší okno má přitom
dva sloupce a jen 970 px; ten skok je tři a půl násobek. Pás z toho
udělá jedno okno vysoké kolem 220 px.
Posouvání dělá prohlížeč (scroll-snap), ne skript. Bez JavaScriptu tedy
pás pořád funguje prstem, jen se nepřetáčí sám a nemá tečky. */
.gallery--duo {
display: flex;
grid-template-columns: none;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
/* posuvník pryč — pod fotkami jsou tečky, ty stačí */
scrollbar-width: none;
-ms-overflow-style: none;
}
.gallery--duo::-webkit-scrollbar { display: none; }
.gallery--duo .gallery__item {
flex: 0 0 100%;
scroll-snap-align: center;
aspect-ratio: 3 / 2;
}
/* na dotyku se nic nezvětšuje, prst není myš */
.gallery--duo .gallery__item:hover img { transform: none; }
/* Tečky vkládá skript za galerii, takže jsou v mřížce jejím sourozencem
a padne mezi ně mezera celé sekce (32 px). Pod fotky ale patří těsně,
proto se ta mezera zase odečte. */
/* Na dlaždicových podstránkách je pás pásem jen tady, a tečky jsou v mřížce
sourozencem fotek — padne mezi ně mezera celé sekce (32 px). Pod fotky
ale patří těsně, proto se ta mezera zase odečte. */
.split--poptavka > .karusel-ovl { display: flex; margin-top: -20px; }
.doc__tels { grid-template-columns: 1fr 1fr; }
/* nápověda v rohu se na úzkém displeji do plakátu nevejde */
.menu-sheet__hint { display: none; }
/* Na telefonu je otevírací doba to první, co člověk hledá — kdy je
otevřeno rozhoduje dřív než co to stojí. Na širší obrazovce stojí
všechny tři sloupce vedle sebe, tam přesouvat není co.
Mění se jen pořadí vykreslení; v HTML zůstává blok třetí, takže
odečítač obrazovky ho čte tam, kde ho čte i vyhledávač. */
.rr-info > :nth-child(3) { order: -1; }
}
/* --- 35. Loga partnerů v závěrečné výzvě --------------------------------
Obě loga jsou tmavá a na našem pozadí by zmizela: Kudy z nudy má jedinou
barvu #003C78 (kontrast 1,8 : 1), Pink Bubble šedý text. Proto stojí na
světlé podložce, kde má Kudy z nudy 9,3 : 1. Podložka bere --text
z :root, ne čistou bílou, aby seděla ke zbytku palety — a právě proto
musí být obě loga průhledná. Předloha Pink Bubble přišla s bílým
pozadím; bílá se při převodu odstranila, jinak by na teplé podložce
svítil světlejší obdélník s ostrou hranou.
------------------------------------------------------------------------- */
.cta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
}
/* Loga dostala popisek, takže z bloku je sloupeček.
flex: none drží obal v řadě s textem výzvy, ne aby se roztáhl.
max-width je k tomu nutná pojistka: bez ní si blok drží šířku svého obsahu
a řada log by se nikdy nezalomila — na 375px lezla 11 px za pravý okraj
a stránka dostala vodorovný posuv. */
.partneri { flex: none; max-width: 100%; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* Stejná váha jako nadpis „Naši klienti“ — obojí uvozuje řadu cizích log,
tak ať to čtenář pozná na první pohled jako stejný typ sekce. */
.partneri__title {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
font-size: 22px; line-height: 1; letter-spacing: .06em;
color: var(--text);
}
/* align-items: stretch srovná podložkám výšku, i když je jedno logo široký
nápis a druhé skoro čtverec. Na úzké obrazovce se řada zalomí. */
.partneri__loga { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.partner {
flex: none;
display: flex;
align-items: center;
justify-content: center;
background: var(--text);
border-radius: 0;
padding: 15px 20px;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Loga se nesrovnávají na stejnou výšku, ale na stejnou optickou váhu.
Kudy z nudy je nápis 4,5 : 1 — tomu určuje velikost šířka. Pink Bubble je
znak 1,24 : 1 — tomu výška. Kdyby dostal stejných 42 px na výšku jako
nápis vedle, byl by z něj nečitelný čtvereček o straně 52 px. */
.partner img { display: block; width: auto; height: auto; }
.partner--siroke img { width: 190px; }
.partner--vysoke img { height: 68px; }
.partner:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .95);
}
/* Na telefonu se obě loga zmenší tak, aby zůstala vedle sebe i na 360px
širokém displeji. Pod 340px se řada zalomí a podložky se poskládají pod
sebe — nepěkné, ale pořád lepší než přetečení. */
@media (max-width: 619px) {
.partner { padding: 12px 14px; }
.partner--siroke img { width: 150px; }
.partner--vysoke img { height: 54px; }
}
/* --- 36. Taneční škola ---------------------------------------------------
NEPOUŽITO od 14. 8. 2026 — taneční škola se z webu ruší. Pravidla tu
zůstávají pro případ, že se rozhodnutí otočí; stránky leží v
_deploy/zruseno-2026-08-14/.
Na domovské stránce jde jen o rozcestník, ne o samostatnou sekci s obsahem.
Proto malé kulaté portréty v jedné řadě — čtyři lektoři zaberou jeden řádek
místo čtyř dlaždic. Fotky mají různý poměr stran, ořez řeší object-fit.
------------------------------------------------------------------------- */
/* linka odděluje rozcestník od programu nad ním — sedí uvnitř téže sekce,
takže nenaruší střídání světlých a tmavých pruhů na stránce */
.dance { border-top: 1px solid var(--border); padding-top: 30px; }
.dance__head {
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
margin-bottom: 26px;
}
.dance__list {
list-style: none;
/* bez vynulování si
nese výchozí odsazení prohlížeče 40 px zleva
a celý seznam by byl posunutý mimo osu zbytku stránky */
margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: 14px 38px;
}
.teacher {
display: flex; align-items: center; gap: 14px;
padding: 6px 10px 6px 6px;
border-radius: var(--radius);
transition: background .25s var(--ease), transform .25s var(--ease);
}
.teacher img {
width: 80px; height: 80px;
border-radius: 0;
object-fit: cover;
/* těžiště fotek je nad středem — u portrétu na výšku by střed uřízl hlavu */
object-position: 50% 22%;
border: 1px solid var(--border-3);
}
.teacher span {
font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
font-size: 22px; line-height: 1;
letter-spacing: .03em;
color: var(--text);
}
.teacher:hover { background: var(--surface-2); transform: translateY(-2px); }
.teacher:hover img { border-color: var(--gold); }
.teacher:hover span { color: var(--gold-lt); }
/* Na telefonu se čtyři lektoři vejdou jen pod sebe a blok naroste na 437 px.
Dva sloupce s menším portrétem ho stáhnou zhruba na polovinu.
Pravidlo je schválně tady, a ne v sekci 23 k ostatním mobilním úpravám:
základní zápis .dance__list je v souboru níž, takže by ho dřívější
media query nepřebila — media query sama specificitu nezvyšuje. */
@media (max-width: 619px) {
.dance__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.teacher { gap: 10px; padding: 6px; }
.teacher img { width: 46px; height: 46px; }
.teacher span { font-size: 17px; }
}
/* Přehled lektorů má lichý počet karet. Pevné čtyři sloupce by nechaly
poslední kartu samotnou v řádku a vedle ní tři prázdná místa, proto tady
necháme mřížku, ať si počet sloupců dopočítá sama podle šířky.
Platí až od 620 px — pod tím zůstávají dva sloupce jako u ostatních
mřížek, jednosloupcové rozvržení by na telefonu bylo zbytečně dlouhé. */
@media (min-width: 620px) {
.spaces--auto { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
}
/* --- 37. Nápojový lístek — sdělení ve dvou jazycích ----------------------
Na obou jazykových verzích stránky stojí české i anglické znění pod sebou.
Sdělení o věkové hranici má číst i host, který přijde na druhou verzi.
------------------------------------------------------------------------- */
.doc__box--dual { max-width: 700px; margin: 0 auto; gap: 24px; }
.doc__box--dual > section { display: flex; flex-direction: column; gap: 14px; }
.doc__box--dual > section + section { border-top: 1px solid var(--gold-bd); padding-top: 24px; }
/* --- 38. Prostory — text o klubu ----------------------------------------
Textu je hodně. Na širokém okně běží ve dvou sloupcích: blok se tím
zkrátí na polovinu a řádky zůstanou čitelně krátké. Pod 900 px se
sloupce slijí do jednoho, jinak by byly každý sotva pár slov široké.
------------------------------------------------------------------------- */
.about__cols { column-count: 2; column-gap: 48px; }
.about__cols .prose { margin-bottom: 18px; break-inside: avoid; }
.about__cols .prose:last-child { margin-bottom: 0; }
@media (max-width: 899px) {
.about__cols { column-count: 1; }
}
/* Text o klubu v hlavičce stránky. Řádky se drží krátké a odstavce mají
mezeru — přes fotku se čte hůř než na plné ploše, delší řádek by to
ještě zhoršil. */
.hero-text { display: flex; flex-direction: column; gap: 14px; max-width: 600px; }
/* --- 39. Lišta souhlasu s cookies --------------------------------------
Vykresluje ji script.js, a jen když je vyplněné GTM_ID. Bez měření
není k čemu dávat souhlas a lišta by byla jen otravná. */
.consent {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
background: rgba(12, 12, 14, .97);
border-top: 1px solid var(--gold-bd);
padding: 18px 20px;
transform: translateY(100%);
transition: transform .4s var(--ease);
}
.consent.is-in { transform: none; }
.consent:focus { outline: none; }
.consent__inner {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.consent__text { flex: 1 1 420px; min-width: 0; }
.consent__t {
font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.consent__text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* Obě tlačítka záměrně stejně výrazná. Schované nebo vybledlé odmítnutí
je proti pravidlům a úřady za něj pokutují. */
.consent__btns { display: flex; gap: 10px; flex: none; }
.consent__reopen {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; color: inherit;
text-decoration: underline; text-underline-offset: 3px;
transition: color .3s ease;
}
.consent__reopen:hover { color: var(--gold); }
@media (max-width: 619px) {
.consent { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.consent__inner { gap: 14px; }
.consent__btns { width: 100%; }
.consent__btns .btn { flex: 1 1 0; text-align: center; padding-left: 12px; padding-right: 12px; }
}