/* ==========================================================================
TECHWOOD COMPACT — design systém „Řez"
Jediný zdroj pravdy pro barvy, typografii, mezery a časování.
Nic z toho se nenastavuje na jednotlivých prvcích v builderu.
Barvy odpovídají grafickému manuálu (balíček loga v1.0).
========================================================================== */
/* --------------------------------------------------------------------------
0. PÍSMA — hostovaná lokálně
Nic se nenačítá z fonts.googleapis.com. Načtení odtud posílá IP
návštěvníka do USA a je to opakovaný terč stížností podle GDPR;
německé soudy za to už pokutu vyměřily.
Řezy jsou ořezané na latinku a latin-ext (celá česká diakritika),
plus interpunkce, měna a šipky. Devět souborů dohromady váží
160 kB — méně než jedno kolo dotazů na Google.
Ověřeno: „Příliš žluťoučký kůň úpěl ďábelské ódy" se v Zalando
Sans i Expanded vysází bez jediného náhradního znaku.
Licence: Zalando Sans i IBM Plex Mono jsou pod OFL, soubory
licencí leží v fonts/ vedle řezů.
-------------------------------------------------------------------------- */
@font-face{
font-family: "Zalando Sans";
src: url("../fonts/zalando-sans-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "Zalando Sans";
src: url("../fonts/zalando-sans-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "Zalando Sans";
src: url("../fonts/zalando-sans-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "Zalando Sans";
src: url("../fonts/zalando-sans-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "Zalando Sans Expanded";
src: url("../fonts/zalando-sans-expanded-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "Zalando Sans Expanded";
src: url("../fonts/zalando-sans-expanded-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
1. TOKENY — světlý režim (výchozí)
-------------------------------------------------------------------------- */
:root{
/* Značkové barvy — přesně dle manuálu, neměnit */
--tw-green: #385046; /* firemní zelená, Pantone 5535 C */
--tw-ochre: #BC8E49; /* okrová, Pantone 465 C */
--tw-sage: #87AB9C; /* doplňková šalvějová */
--tw-cream: #EEE2D0; /* doplňková krémová */
--tw-grey: #B3B3B3; /* doplňková šedá */
/* Odvozená webová sada */
--core: #1E2B26; /* text — 14,2:1 na ploše */
--core-soft: #385046; /* sekundární text = firemní zeleň, 8,4:1 */
--ink: #1E2B26;
--ink-2: #385046;
--muted: #66756D; /* 4,7:1 */
--line: #DDD5C4;
--line-soft: #E5DECF;
--surface: #FCFBF8;
--surface-2: #F5F1E8;
--surface-3: #EDE7DA;
--accent: #BC8E49; /* jen plocha, linka nebo text nad 32 px */
--accent-ink: #8A6427; /* odkazy a malý text — 5,2:1 */
--accent-wash:#F6EEDF;
--on-accent: #1E2B26; /* text na okrové ploše — 5,0:1 */
--steel: #87AB9C;
--pole-znak: #385046; /* zaškrtnutí a přepínače ve formulářích */
/* Skleněný prstenec a záře na dlaždicích */
--karta-hrana: rgba(255, 255, 255, .16);
--karta-zar-1: rgba(200, 155, 84, .95); /* značková zlatá */
--karta-zar-2: rgba(143, 181, 163, .55); /* šalvěj */
--karta-stin: rgba(30, 43, 38, .45);
/* Hlavička plave nad obsahem — odsazení od horní hrany a výška lišty */
--hlavicka-odsazeni: 15px;
/*
* Obě polohy lišty leží v pásmu 7–15 px od horní hrany. Rozdíl
* je záměrně malý — lišta se má přisunout, ne uskočit.
*/
--hlavicka-odsazeni-pevne: 11px;
--hlavicka-vyska: 64px;
/* Sklo v navigaci */
/*
* Mražené sklo, ne mléčné.
*
* Kdyby se průhlednost dělala jen ubíráním krytí, tmavě zelené
* 13px menu by nad tmavou fotkou hrdiny spadlo pod 4,5:1 a
* přestalo splňovat AA. Krytí je proto nízké (42 %) a čitelnost
* drží dvě jiné věci: velké rozostření a prosvětlení podkladu
* (--sklo-jas). Filtr zesvětlí, co je za lištou, takže text má
* pořád světlé pozadí — a přitom je skrz sklo vidět, co se pod
* ním hýbe. To je přesně to, co dělá mražené sklo.
*/
--sklo-plocha: rgba(252, 251, 248, .42);
--sklo-plocha-pevne: rgba(252, 251, 248, .68); /* po přilepení, nad běžným textem */
--sklo-hrana: rgba(255, 255, 255, .55);
--sklo-lesk: rgba(255, 255, 255, .70);
--sklo-stin: 0 12px 34px rgba(30, 43, 38, .16);
--sklo-rozmaz: 30px;
--sklo-jas: 1.45;
/* Záře kolem okrového tlačítka — firemní zeleň */
--zar: #385046;
--zar-slabe: rgba(56, 80, 70, .30);
--zar-stredni:rgba(56, 80, 70, .48);
--zar-silne: rgba(56, 80, 70, .62);
--good: #385046;
--warn: #8A6427;
--crit: #9C3A29;
/* Písma */
--f-display: "Zalando Sans Expanded", "Zalando Sans", system-ui, "Segoe UI", Arial, sans-serif;
--f-text: "Zalando Sans", system-ui, "Segoe UI", Arial, sans-serif;
--f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
/* Typografická škála */
--t-hero: clamp(40px, 7vw, 92px);
--t-d1: clamp(32px, 4.4vw, 56px);
--t-d2: clamp(24px, 3vw, 36px);
--t-d3: 21px;
--t-lede: 20px;
--t-body: 17px;
--t-small: 14px;
--t-mono: 12px;
/* Mezery — základ 8 px */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
--sec-gap: var(--s9);
/* Pohyb */
--d-instant: 120ms;
--d-quick: 240ms;
--d-base: 400ms;
--d-slow: 700ms;
--d-story: 1000ms;
--stagger: 70ms;
--ease-cut: cubic-bezier(.22, 1, .36, 1);
--ease-press: cubic-bezier(.65, 0, .35, 1);
--ease-lift: cubic-bezier(.34, 1.26, .64, 1);
--ease-exit: cubic-bezier(.55, 0, 1, .45);
}
@media (min-width: 960px){
:root{
--sec-gap: 160px;
--hlavicka-vyska: 80px;
}
}
/* --------------------------------------------------------------------------
2. TOKENY — tmavý režim
Tři stavy: systémové nastavení bez volby, explicitní světlá, explicitní tmavá.
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--core: #0D1310;
--core-soft: #2B3B34;
--ink: #EDF0EC;
--ink-2: #C3CDC6;
--muted: #8B978F;
--line: #2C3A33;
--line-soft: #1F2A24;
--surface: #121A16;
--surface-2: #1B2620;
--surface-3: #232F29;
--accent: #DCAC6B;
--accent-ink: #E2B478;
--accent-wash:#26200F;
--on-accent: #12190F;
--pole-znak: #DCAC6B;
--sklo-plocha: rgba(18, 26, 22, .42);
--sklo-plocha-pevne: rgba(18, 26, 22, .68);
--sklo-hrana: rgba(255, 255, 255, .14);
--sklo-lesk: rgba(255, 255, 255, .22);
--sklo-stin: 0 12px 34px rgba(0, 0, 0, .45);
--sklo-jas: .55; /* v tmavém režimu se podklad ztmavuje, ne prosvětluje */
/*
* Na tmavém podkladu je firemní zeleň skoro neviditelná.
* Záře si proto bere šalvějový odstín ze stejné rodiny —
* je to pořád zelená značky, jen o dva tóny výš.
*/
--zar: #87AB9C;
--zar-slabe: rgba(135, 171, 156, .26);
--zar-stredni:rgba(135, 171, 156, .42);
--zar-silne: rgba(135, 171, 156, .58);
--good: #7FB89A;
--warn: #DCAC6B;
--crit: #E0806D;
}
}
:root[data-theme="dark"]{
--core: #0D1310;
--core-soft: #2B3B34;
--ink: #EDF0EC;
--ink-2: #C3CDC6;
--muted: #8B978F;
--line: #2C3A33;
--line-soft: #1F2A24;
--surface: #121A16;
--surface-2: #1B2620;
--surface-3: #232F29;
--accent: #DCAC6B;
--accent-ink: #E2B478;
--accent-wash:#26200F;
--on-accent: #12190F;
--pole-znak: #DCAC6B;
--sklo-plocha: rgba(18, 26, 22, .42);
--sklo-plocha-pevne: rgba(18, 26, 22, .68);
--sklo-hrana: rgba(255, 255, 255, .14);
--sklo-lesk: rgba(255, 255, 255, .22);
--sklo-stin: 0 12px 34px rgba(0, 0, 0, .45);
--sklo-jas: .55;
--zar: #87AB9C;
--zar-slabe: rgba(135, 171, 156, .26);
--zar-stredni:rgba(135, 171, 156, .42);
--zar-silne: rgba(135, 171, 156, .58);
--good: #7FB89A;
--warn: #DCAC6B;
--crit: #E0806D;
}
/* --------------------------------------------------------------------------
3. ZÁKLAD
-------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust: 100%; }
body{
background: var(--surface);
color: var(--ink);
font-family: var(--f-text);
font-size: var(--t-body);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
/* Kompakt se řeže, ne odlévá — ostré rohy všude kromě vzorků dekorů. */
*,
*::before,
*::after,
.uk-button,
.uk-card,
.uk-input,
.uk-select,
.uk-textarea,
.uk-tile,
.uk-panel,
.uk-alert,
.uk-badge,
.uk-label{
border-radius: 0;
}
.tw-swatch img,
.tw-swatch{ border-radius: 2px; }
/* Typografie */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge{
font-family: var(--f-display);
font-weight: 600;
color: var(--ink);
text-wrap: balance;
}
h1, .uk-h1{ font-size: var(--t-d1); line-height: 1.0; letter-spacing: -.022em; }
h2, .uk-h2{ font-size: var(--t-d2); line-height: 1.08; letter-spacing: -.018em; }
h3, .uk-h3{ font-size: var(--t-d3); line-height: 1.25; letter-spacing: -.008em; }
h4, .uk-h4{ font-size: 17px; line-height: 1.35; }
p{ text-wrap: pretty; }
.uk-text-lead{
font-family: var(--f-text);
font-size: var(--t-lede);
line-height: 1.55;
color: var(--ink-2);
}
.uk-text-small,
.uk-text-meta{ font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
/* Čtecí sloupec — text nikdy přes celou šířku monitoru */
.tw-measure,
.uk-text-lead{ max-width: 62ch; }
.tw-measure p{ max-width: 66ch; }
/* Datový a technický rejstřík */
.tw-mono,
.tw-caption{
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.tw-caption{ display: block; margin-top: var(--s2); }
/* Odkazy — okrová nikdy sama, vždy i podtržení */
a{ color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.uk-link, .uk-link-toggle{ color: var(--accent-ink); }
.uk-text-primary{ color: var(--accent-ink) !important; }
/* Tabulková čísla všude, kde se srovnávají hodnoty */
table, .uk-table, .tw-num{ font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
4. HRANA — nosný prvek systému
Třídu zapisuj v builderu do pole Advanced → General → Class.
-------------------------------------------------------------------------- */
.tw-edge{
position: relative;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-left: 4px solid var(--core-soft);
padding: var(--s5);
}
:root[data-theme="dark"] .tw-edge{ border-left-color: var(--accent); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tw-edge{ border-left-color: var(--accent); }
}
/* Hrana najíždí při hoveru */
.tw-edge-hover{ position: relative; overflow: hidden; transition: transform var(--d-quick) var(--ease-cut); }
.tw-edge-hover::after{
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: var(--accent);
transition: width var(--d-base) var(--ease-cut);
}
/* Zvednutí karty */
.tw-lift{ transition: transform var(--d-quick) var(--ease-cut); }
/* Podtržení najíždí zleva */
.tw-underline{ position: relative; }
.tw-underline::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--d-base) var(--ease-cut);
}
@media (hover: hover){
.tw-edge-hover:hover::after{ width: 4px; }
.tw-lift:hover{ transform: translateY(-4px); }
.tw-underline:hover::after{ transform: scaleX(1); transform-origin: left; }
}
/* --------------------------------------------------------------------------
5. TLAČÍTKA
Okrová plocha + téměř černá zeleň = 5,0:1.
Bílá ani firemní zeleň na okrové NEPROJDOU (2,96:1 a 2,95:1).
-------------------------------------------------------------------------- */
.uk-button{
font-family: var(--f-display);
font-weight: 600;
font-size: 14px;
letter-spacing: .01em;
text-transform: none;
min-height: 48px;
padding: 0 24px;
line-height: 48px;
transition: background-color var(--d-quick) var(--ease-cut),
color var(--d-quick) var(--ease-cut),
transform var(--d-instant) var(--ease-lift);
}
.uk-button-primary{
background: var(--accent);
color: var(--on-accent);
border: 1px solid var(--accent);
}
.uk-button-primary:hover,
.uk-button-primary:focus{
background: var(--accent-ink);
color: #fff;
border-color: var(--accent-ink);
}
.uk-button-secondary,
.uk-button-default{
background: transparent;
color: var(--ink);
border: 1px solid var(--core-soft);
}
.uk-button-secondary:hover,
.uk-button-default:hover{
background: var(--core-soft);
color: var(--surface);
border-color: var(--core-soft);
}
.uk-button:active{ transform: scale(.985); }
/* --------------------------------------------------------------------------
6. FORMULÁŘE
-------------------------------------------------------------------------- */
.uk-input, .uk-select, .uk-textarea{
font-family: var(--f-text);
font-size: 16px; /* pod 16px iOS při fokusu stránku přiblíží */
min-height: 48px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus{
border-color: var(--accent-ink);
background: var(--surface);
}
.uk-form-label{
font-family: var(--f-display);
font-weight: 600;
font-size: var(--t-small);
color: var(--ink);
}
[aria-invalid="true"]{ border: 2px solid var(--accent-ink) !important; }
/* WordPress vyhledávání a další neUIkitová tlačítka */
.wp-block-search__button,
.search-form input[type="submit"],
input[type="submit"]:not(.uk-button){
background: var(--core-soft);
color: var(--surface);
border: 1px solid var(--core-soft);
font-family: var(--f-display);
font-weight: 600;
min-height: 48px;
padding: 0 20px;
}
/* --------------------------------------------------------------------------
7. FOKUS — viditelný vždy
-------------------------------------------------------------------------- */
:focus-visible{
outline: 2px solid var(--accent-ink);
outline-offset: 2px;
}
:root[data-theme="dark"] :focus-visible{ outline-color: var(--accent); }
/* Přeskočit na obsah */
.tw-skip{
position: absolute;
left: -9999px;
z-index: 1000;
padding: 12px 20px;
background: var(--core);
color: var(--surface);
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .12em;
text-transform: uppercase;
}
.tw-skip:focus{ left: var(--s4); top: var(--s4); }
/* --------------------------------------------------------------------------
8. RYTMUS SEKCÍ
-------------------------------------------------------------------------- */
.tw-section{ padding-top: var(--sec-gap); padding-bottom: var(--sec-gap); }
.tw-section-tight{ padding-top: var(--s8); padding-bottom: var(--s8); }
.tw-rule{ border: 0; border-top: 1px solid var(--line); margin: 0; }
/* Tmavý pás ve firemní zeleni.
Okrová má na zeleni jen 2,95:1 — text je proto krémový (6,8:1).
Okrová tu smí být jen jako linka nebo plocha, nikdy jako text. */
.tw-dark{
background: var(--tw-green);
color: var(--tw-cream);
}
.tw-dark h1, .tw-dark h2, .tw-dark h3, .tw-dark h4{ color: #fff; }
.tw-dark a{ color: var(--tw-cream); text-decoration-color: var(--accent); }
.tw-dark .uk-text-meta, .tw-dark .tw-caption{ color: #A8B8AF; }
.tw-dark .uk-button-primary{
background: var(--tw-cream);
color: var(--tw-green);
border-color: var(--tw-cream);
}
.tw-dark .uk-button-default{ color: var(--tw-cream); border-color: rgba(238,226,208,.5); }
.tw-dark .uk-button-default:hover{ background: var(--tw-cream); color: var(--tw-green); }
.tw-dark .tw-rule{ border-top-color: rgba(238,226,208,.22); }
/* --------------------------------------------------------------------------
9. POHYB — sladění YOOtheme scrollspy s naším systémem
-------------------------------------------------------------------------- */
[uk-scrollspy-class],
[data-uk-scrollspy-class]{
transition-duration: var(--d-slow) !important;
transition-timing-function: var(--ease-cut) !important;
}
.uk-animation-fade,
.uk-animation-slide-bottom-small,
.uk-animation-slide-top-small,
.uk-animation-slide-left-small,
.uk-animation-slide-right-small{
animation-duration: var(--d-slow);
animation-timing-function: var(--ease-cut);
}
/* --------------------------------------------------------------------------
10. OMEZENÝ POHYB
Není to vypnutí webu, je to druhá verze systému. YOOtheme to sám
neřeší úplně, proto vypínáme i uk-animation a scrollspy.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
[uk-scrollspy],
[data-uk-scrollspy],
[uk-scrollspy-class],
[data-uk-scrollspy-class]{
opacity: 1 !important;
transform: none !important;
}
[uk-parallax],
[data-uk-parallax]{ transform: none !important; }
}
/* ==========================================================================
11. HOMEPAGE — sekce
Zatím bez fotografií. Hrana v hero je čistě CSS: doslova řez deskou
podle hřbetu ikony v logu (krém, spára, okrová, krém, zelené jádro).
========================================================================== */
/* --- Hero --------------------------------------------------------------- */
/*
* Fotka sahá až k horní hraně obrazovky a lišta na ní leží.
* Horní odsazení proto počítá s výškou lišty — obsah hrdiny se
* pod ni nesmí dostat ani na nízkém okně, kde by ho jinak
* zarovnání ke spodní hraně vytlačilo nahoru.
*/
.tw-hero{
position: relative;
background: var(--tw-green);
color: #fff;
overflow: hidden;
min-height: 78vh;
display: flex;
align-items: flex-end;
padding: calc(var(--hlavicka-vyska) + var(--hlavicka-odsazeni) + var(--s5)) 0 var(--s9);
}
@media (min-width: 960px){ .tw-hero{ min-height: 92vh; } }
.tw-hero::before{ /* vinětace, aby text držel kontrast */
content: "";
position: absolute; inset: 0;
background: radial-gradient(120% 90% at 30% 40%, transparent 30%, rgba(13,19,16,.55) 100%);
z-index: 1;
}
/*
* Obal desky.
*
* Deska je otočená o 4° a přetéká přes okraje, takže její levý konec
* klesá o víc než sto pixelů. Na nižším okně dosedne přesně na nadpis
* a okrová verzálka nad ním se ztratí v krémovém pruhu. Kontrast se
* tam nedá zachránit závojem — musel by být prakticky neprůhledný.
*
* Deska proto pod zhruba polovinou výšky hera plynule mizí. Nahoře
* drží celý motiv řezu, dolů, kde začíná text, nedosáhne vůbec.
*/
.tw-board-obal{
position: absolute; inset: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 68%);
mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 68%);
}
.tw-board{
position: absolute;
left: -12%; right: -12%;
top: 34%;
height: 132px;
transform: rotate(-4deg);
z-index: 0;
background: linear-gradient(to bottom,
#EEE2D0 0px, #EEE2D0 15px, /* dekorová plocha */
#16211C 15px, #16211C 19px, /* spára */
#BC8E49 19px, #BC8E49 28px, /* okrová kontura */
#EDE6D6 28px, #EDE6D6 33px, /* krémová kontura */
#46614F 33px, #3A4F44 62px, /* jádro, světlejší nahoře */
#2B3C34 62px, #223029 96px,
#1A2620 96px, #16211C 132px);
box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
}
.tw-board::after{ /* odlesk na dekorové ploše */
content: "";
position: absolute;
left: 0; right: 0; top: 0; height: 15px;
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 48%, transparent 74%);
}
/*
* Závoj pod textem. Deska sem už nedosáhne, takže nemusí být silný —
* jen srazí zeleň o kus dolů, aby krémový perex a bílý nadpis seděly
* na klidné ploše a nesplývaly s přechodem pozadí.
*/
.tw-hero::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 62%;
background: linear-gradient(to top,
rgba(13,19,16,.62) 0%,
rgba(13,19,16,.34) 45%,
rgba(13,19,16,0) 100%);
z-index: 1;
pointer-events: none;
}
.tw-hero > .uk-container{ position: relative; z-index: 2; }
.tw-hero-inner{ position: relative; z-index: 2; width: 100%; }
.tw-hero h1{
font-family: var(--f-display);
font-weight: 700;
font-size: var(--t-hero);
line-height: .94;
letter-spacing: -.028em;
color: #fff;
margin: var(--s3) 0 0;
max-width: 14ch;
}
.tw-hero .tw-eyebrow{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tw-ochre);
}
.tw-hero-perex{
font-size: 18px;
line-height: 1.5;
color: var(--tw-cream);
max-width: 44ch;
margin: var(--s5) 0 var(--s6);
}
.tw-hero-spec{
position: absolute;
right: 0; bottom: 0;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(238,226,208,.65);
z-index: 2;
}
@media (max-width: 959px){ .tw-hero-spec{ display: none; } }
/* --- Tři světy ---------------------------------------------------------- */
.tw-svet{
display: block;
position: relative;
padding: var(--s7) var(--s5) var(--s6);
min-height: 380px;
background: var(--surface-2);
border-left: 4px solid var(--tw-green);
text-decoration: none;
color: var(--ink);
transition: background var(--d-base) var(--ease-cut), transform var(--d-quick) var(--ease-cut);
}
.tw-svet h3{ margin: 0 0 var(--s4); }
/*
* Vzhled seznamu ve světech řeší až blok „Tři světy“ níž.
* Dřív tu byla druhá, konkurenční sada pravidel — odrážka z ní
* se schovala pod text, protože pozdější blok přepsal odsazení.
*/
.tw-svet .tw-vice{
font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent-ink);
}
@media (hover: hover){
.tw-svet:hover{ background: var(--surface-3); transform: translateY(-4px); }
}
/* --- Čísla -------------------------------------------------------------- */
.tw-cislo{
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(38px, 5vw, 60px);
line-height: 1;
letter-spacing: -.02em;
color: var(--tw-green);
font-variant-numeric: tabular-nums;
}
.tw-dark .tw-cislo{ color: var(--tw-ochre); }
.tw-cislo-popis{ font-size: 15px; color: var(--ink-2); margin-top: var(--s2); max-width: 30ch; }
.tw-dark .tw-cislo-popis{ color: var(--tw-cream); }
/* --- Pás dekorů --------------------------------------------------------- */
.tw-pas{ display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4); }
.tw-pas::-webkit-scrollbar{ height: 6px; }
.tw-pas::-webkit-scrollbar-thumb{ background: var(--line); }
.tw-dekor{ flex: 0 0 168px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.tw-dekor .tw-vzorek{
aspect-ratio: 1;
border-radius: 2px;
border: 1px solid var(--line-soft);
background-size: cover;
background-position: center;
transition: transform var(--d-quick) var(--ease-cut);
}
.tw-dekor:hover .tw-vzorek{ transform: scale(1.03); }
@media (prefers-reduced-motion: reduce){
.tw-dekor .tw-vzorek{ transition: none; }
.tw-dekor:hover .tw-vzorek{ transform: none; }
}
.tw-dekor b{ display: block; font-family: var(--f-display); font-weight: 600; font-size: 14px; margin-top: 10px; }
.tw-dekor span{ display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
/* --- Mřížka realizací --------------------------------------------------- */
.tw-realizace{ display: block; text-decoration: none; color: inherit; }
.tw-realizace .tw-nahled{
aspect-ratio: 3/2;
background: var(--surface-3);
border: 1px solid var(--line-soft);
position: relative;
overflow: hidden;
}
.tw-realizace .tw-nahled::after{
content: attr(data-stitek);
position: absolute; left: 0; bottom: 0;
padding: 6px 10px;
background: var(--tw-green); color: var(--tw-cream);
font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.tw-realizace .tw-caption{ margin-top: var(--s3); }
@media (hover: hover){ .tw-realizace:hover .tw-nahled{ border-color: var(--accent); } }
/* --- Osa procesu -------------------------------------------------------- */
.tw-osa{ display: grid; gap: var(--s5); counter-reset: krok; }
@media (min-width: 960px){ .tw-osa{ grid-template-columns: repeat(5, 1fr); gap: var(--s4); } }
.tw-krok{ position: relative; padding-top: var(--s5); border-top: 1px solid var(--line); }
.tw-krok::before{
counter-increment: krok; content: counter(krok, decimal-leading-zero);
position: absolute; top: -1px; left: 0;
border-top: 3px solid var(--accent); padding-top: var(--s3);
font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--accent-ink);
}
.tw-krok h4{ margin: var(--s5) 0 var(--s2); }
.tw-krok p{ font-size: 14.5px; color: var(--ink-2); margin: 0; }
.tw-krok .tw-cas{ display: block; margin-top: var(--s3); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* --- Citace ------------------------------------------------------------- */
.tw-citace blockquote{
margin: 0; padding: 0;
font-family: var(--f-text);
font-size: 20px; line-height: 1.5;
color: var(--ink);
border-left: 4px solid var(--accent);
padding-left: var(--s5);
}
.tw-citace footer{ margin-top: var(--s4); padding-left: calc(var(--s5) + 4px); font-size: 14px; color: var(--muted); }
.tw-citace footer b{ display: block; font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 15px; }
/* --- Seznam ke stažení -------------------------------------------------- */
.tw-soubory{ list-style: none; padding: 0; margin: 0; }
.tw-soubory li{ border-top: 1px solid rgba(238,226,208,.22); }
.tw-soubory a{
display: flex; justify-content: space-between; gap: var(--s4);
padding: var(--s4) 0; color: var(--tw-cream); text-decoration: none;
transition: color var(--d-quick) var(--ease-cut);
}
.tw-soubory a span{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: rgba(238,226,208,.6); }
@media (hover: hover){ .tw-soubory a:hover{ color: #fff; } }
/* --- Rozdělené závěrečné CTA -------------------------------------------- */
.tw-cta-split{ display: grid; gap: 0; }
@media (min-width: 960px){ .tw-cta-split{ grid-template-columns: 1fr 1fr; } }
.tw-cta-split > div{ padding: var(--s8) var(--s6); }
@media (min-width: 960px){
.tw-cta-split > div + div{ border-left: 1px solid rgba(238,226,208,.22); }
}
@media (max-width: 959px){
.tw-cta-split > div + div{ border-top: 1px solid rgba(238,226,208,.22); }
}
/* ==========================================================================
12. VYPUŠTĚNÍ SEKCÍ PŘES CELOU ŠÍŘKU
Obsah stránky sedí v .uk-container. Hero a tmavé pásy z něj musí ven.
overflow-x: clip místo hidden — nerozbíjí position: sticky.
========================================================================== */
html{ overflow-x: clip; }
.tw-hero,
.tw-dark,
.tw-fullbleed{
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Vnitřek full-bleed sekce si drží kontejner.
YOOtheme dává kontejnerům nulový padding a odsazení řeší nadřazený
obal, ze kterého jsme právě vystoupili — proto ho doplňujeme zpět. */
.tw-hero > .uk-container,
.tw-dark > .uk-container,
.tw-fullbleed > .uk-container{
margin-left: auto;
margin-right: auto;
padding-left: var(--s5);
padding-right: var(--s5);
box-sizing: border-box;
}
@media (min-width: 640px){
.tw-hero > .uk-container,
.tw-dark > .uk-container,
.tw-fullbleed > .uk-container{ padding-left: var(--s6); padding-right: var(--s6); }
}
@media (min-width: 1200px){
.tw-hero > .uk-container,
.tw-dark > .uk-container,
.tw-fullbleed > .uk-container{ padding-left: var(--s7); padding-right: var(--s7); }
}
/* Hero přisadí k hlavičce — bez mezery nahoře */
.home .tm-main.uk-section{ padding-top: 0; }
.home .tw-hero{ margin-top: 0; }
.home .uk-article > .uk-margin-medium:first-child{ margin-top: 0; }
/* Na úvodní stránce nadpis „Domů" nepatří — H1 nese hero.
Skrýt úplně, ne jen vizuálně: dvě H1 na stránce jsou chyba pro SEO. */
.home .uk-article-title{ display: none; }
/* Mezera pod poslední sekcí, aby patička nelepila */
.home .tm-main.uk-section{ padding-bottom: 0; }
/* Tlačítka na hero — stejná logika jako na tmavém pásu */
.tw-hero .uk-button-primary{ background: var(--tw-ochre); color: var(--on-accent); border-color: var(--tw-ochre); }
.tw-hero .uk-button-primary:hover{ background: var(--tw-cream); color: var(--tw-green); border-color: var(--tw-cream); }
.tw-hero .uk-button-default{ color: var(--tw-cream); border-color: rgba(238,226,208,.55); background: transparent; }
.tw-hero .uk-button-default:hover{ background: var(--tw-cream); color: var(--tw-green); border-color: var(--tw-cream); }
.tw-hero .uk-button + .uk-button{ margin-left: var(--s3); }
@media (max-width: 639px){
.tw-hero .uk-button{ display: block; width: 100%; }
.tw-hero .uk-button + .uk-button{ margin-left: 0; margin-top: var(--s3); }
}
/* Dlaždice světů — vyrovnat výšku ve mřížce */
.tw-svet{ height: 100%; display: flex; flex-direction: column; }
.tw-svet .tw-vice{ margin-top: auto; }
/* ==========================================================================
13. FOTOGRAFIE V SEKCÍCH
========================================================================== */
/* Dlaždice světů s fotkou na pozadí.
Fotka je pod zeleným závojem, aby text držel kontrast i na světlém snímku. */
.tw-svet-foto{
background-image:
linear-gradient(to bottom,
rgba(30,43,38,.92) 0%,
rgba(30,43,38,.58) 40%,
rgba(30,43,38,.28) 62%,
rgba(30,43,38,.82) 100%),
var(--foto);
background-size: cover;
background-position: center;
border-left-color: var(--tw-ochre);
}
.tw-svet-foto h3{ color: #fff; }
.tw-svet-foto ul{ color: var(--tw-cream); }
.tw-svet-foto li::before{ background: var(--tw-ochre); }
.tw-svet-foto .tw-vice{ color: var(--tw-cream); }
@media (hover: hover){
.tw-svet-foto:hover{
background-image:
linear-gradient(to bottom,
rgba(30,43,38,.88) 0%,
rgba(30,43,38,.45) 40%,
rgba(30,43,38,.14) 62%,
rgba(30,43,38,.74) 100%),
var(--foto);
}
}
/* Náhledy realizací */
.tw-realizace .tw-nahled{
background-size: cover;
background-position: center;
}
/* Dílna — široký pás s fotkou */
.tw-dilna{
position: relative;
min-height: 420px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
}
.tw-dilna::after{
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top,
rgba(30,43,38,.90) 0%,
rgba(30,43,38,.55) 26%,
rgba(30,43,38,.10) 60%,
rgba(30,43,38,0) 100%);
}
.tw-dilna > *{ position: relative; z-index: 1; }
/* Pás s makrem hrany — signature snímek materiálu */
.tw-hrana-pas{
width: 100vw; max-width: 100vw;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
min-height: 46vh;
background-size: cover; /* varianta s fotkou v pozadí */
background-position: center;
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
}
/*
* Varianta ze stavebnice. Fotka je , ne pozadí — YOOtheme jí tak
* dopočítá srcset a velikosti. Krytí řeší object-fit, ne uk-cover:
* uk-cover potřebuje JavaScript a pás musí držet i bez něj.
*/
.tw-hrana-foto{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.tw-hrana-nizky{ min-height: 32vh; }
.tw-hrana-stredni{ min-height: 46vh; }
.tw-hrana-vysoky{ min-height: 64vh; }
.tw-hrana-pas::before{
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(13,19,16,.78) 0%, rgba(13,19,16,.15) 45%, transparent 70%);
z-index: 1;
}
.tw-hrana-pas > .uk-container{
position: relative; z-index: 1;
padding: var(--s6) var(--s5);
margin-left: auto; margin-right: auto;
box-sizing: border-box;
}
@media (min-width: 1200px){ .tw-hrana-pas > .uk-container{ padding: var(--s7); } }
.tw-hrana-popis{
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(17px, 2vw, 24px);
line-height: 1.35;
color: #fff;
max-width: 34ch;
margin: 0;
}
/* ======================================================================
14 · PRVKY STAVEBNICE
Třídy, které potřebují vlastní prvky v YOOtheme builderu. Vizuál
sdílejí s ručně psanými sekcemi — jen doplňují to, co se v builderu
vysází jinou značkou.
====================================================================== */
/* Osa je v builderu , aby kroky měly pořadí i pro čtečky.
Vlastní číslování si už kreslí .tw-krok::before. */
ol.tw-osa{ list-style: none; margin: 0; padding: 0; }
/* Jeden údaj v mřížce čísel. */
.tw-udaj{ min-width: 0; }
.tw-udaj-popis{
font-size: 15px;
color: var(--ink-2);
margin-top: var(--s2);
max-width: 30ch;
}
.tw-dark .tw-udaj-popis{ color: var(--tw-cream); }
/* Řádek s tlačítky v heru. Odsazení řeší .tw-hero .uk-button + .uk-button. */
.tw-hero-akce{ margin: var(--s6) 0 0; }
/* ======================================================================
15 · PRVKY STAVEBNICE — VZHLED
Všechny sekce stránek se skládají z prvků builderu. Tahle část jim
dává vzhled. Barvy, časy a křivky se berou z tokenů nahoře.
====================================================================== */
/* --- Hero: nástup ------------------------------------------------------- */
/*
* Hero se sesazuje. Deska nejdřív najede zleva, pak se po ní odspodu
* vysází text. Je to jediná animace na stránce, která běží sama od sebe —
* všude jinde se čeká na scroll.
*
* Animace startují ze skrytého stavu, ale končí viditelné a mají
* fill-mode both. Když CSS nedojede, text je vidět tak jako tak;
* JavaScript v tom nefiguruje vůbec.
*/
@keyframes tw-deska-najezd{
from{ transform: translate3d(-6%, 26px, 0) rotate(-5.6deg); opacity: 0; }
to { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 1; }
}
@keyframes tw-nastup{
from{ transform: translate3d(0, 18px, 0); opacity: 0; }
to { transform: none; opacity: 1; }
}
.tw-hero .tw-board{
animation: tw-deska-najezd var(--d-story) var(--ease-cut) both;
}
.tw-hero .tw-eyebrow,
.tw-hero h1,
.tw-hero h2,
.tw-hero .tw-hero-perex,
.tw-hero .tw-hero-akce,
.tw-hero .tw-hero-spec{
animation: tw-nastup var(--d-base) var(--ease-cut) both;
}
.tw-hero .tw-eyebrow { animation-delay: 240ms; }
.tw-hero h1,
.tw-hero h2 { animation-delay: 310ms; }
.tw-hero .tw-hero-perex { animation-delay: 380ms; }
.tw-hero .tw-hero-akce { animation-delay: 450ms; }
.tw-hero .tw-hero-spec { animation-delay: 520ms; }
@media (prefers-reduced-motion: reduce){
.tw-hero .tw-board,
.tw-hero .tw-eyebrow,
.tw-hero h1,
.tw-hero h2,
.tw-hero .tw-hero-perex,
.tw-hero .tw-hero-akce,
.tw-hero .tw-hero-spec{ animation: none; }
}
/*
* Jemné zrno přes celý hero. Plochá zelená plocha na velkém monitoru
* pruhuje — zrno ten přechod rozbije a plocha vypadá jako materiál,
* ne jako výplň. Je to jeden inline SVG, nic se nestahuje.
*/
.tw-hero .tw-board-obal::after{
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
opacity: .16;
mix-blend-mode: overlay;
pointer-events: none;
}
/* --- Tři světy ---------------------------------------------------------- */
.tw-svety{ margin-left: 0; }
.tw-svety > *{ padding-left: 0; }
.tw-svet{
display: block;
position: relative;
overflow: hidden;
min-height: 420px;
background: var(--surface-2);
border-left: 4px solid var(--tw-green);
text-decoration: none;
color: var(--core);
isolation: isolate;
}
.tw-svet-foto{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
transition: transform var(--d-slow) var(--ease-cut);
}
.tw-svet::after{
content: "";
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(to top,
rgba(18,26,22,.92) 0%,
rgba(18,26,22,.72) 42%,
rgba(18,26,22,.34) 100%);
}
.tw-svet-obsah{
position: relative; z-index: 2;
display: flex; flex-direction: column; height: 100%;
padding: var(--s7) var(--s5) var(--s6);
min-height: 420px;
color: #fff;
}
.tw-svet h3{ margin: 0 0 var(--s4); color: #fff; }
.tw-svet-seznam{
list-style: none; margin: 0; padding: 0;
flex: 1;
}
/*
* Odrážka nese tvarový podpis značky — seříznutý jen levý horní roh,
* stejně jako symbol v logu a jako tlačítka. Okrová je tu plocha,
* ne text, takže na tmavém podkladu neporušuje pravidlo kontrastu.
*
* Dřív tu byla linka přes celou dlaždici. Položky jsou krátké, takže
* linka vystřelila do prázdna přes fotku a vypadala jako chyba.
*/
.tw-svet-seznam li{
position: relative;
padding: 7px 0 7px 22px;
font-size: var(--t-small);
color: var(--tw-cream);
}
.tw-svet-seznam li::before{
content: "";
position: absolute;
left: 0;
top: .72em;
width: 9px;
height: 9px;
background: var(--tw-ochre);
border-top-left-radius: 3px;
}
.tw-svet-vyzva{
display: inline-block;
margin-top: var(--s5);
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tw-ochre);
}
.tw-svet-vyzva::after{
content: " →";
transition: opacity var(--d-quick) var(--ease-cut);
}
@media (hover: hover){
.tw-svet:hover .tw-svet-foto{ transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
.tw-svet-foto{ transition: none; }
.tw-svet:hover .tw-svet-foto{ transform: none; }
}
/* --- Karty řešení ------------------------------------------------------- */
.tw-karta{
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.tw-karta-foto{
aspect-ratio: 4/3;
background: var(--surface-3);
background-size: cover;
background-position: center;
border-radius: 2px;
transition: transform var(--d-base) var(--ease-cut);
}
.tw-karta h3{
margin: var(--s4) 0 var(--s2);
font-size: var(--t-d3);
}
.tw-karta p{
margin: 0;
font-size: var(--t-small);
color: var(--ink-2);
}
.tw-karta-vyzva{
display: inline-block;
margin-top: var(--s4);
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-ink);
}
.tw-karta-vyzva::after{ content: " →"; }
@media (hover: hover){
.tw-karta:hover .tw-karta-foto{ transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
.tw-karta-foto{ transition: none; }
.tw-karta:hover .tw-karta-foto{ transform: none; }
}
/* --- Reference ---------------------------------------------------------- */
.tw-citace{ margin: 0; }
.tw-citace blockquote{
margin: 0;
padding: 0 0 0 var(--s5);
border-left: 4px solid var(--tw-ochre);
font-family: var(--f-display);
font-weight: 600;
font-size: var(--t-d3);
line-height: 1.35;
color: var(--core);
}
.tw-citace figcaption{
margin: var(--s4) 0 0;
padding-left: calc(var(--s5) + 4px);
}
.tw-citace figcaption b{
display: block;
font-size: var(--t-small);
font-weight: 600;
}
.tw-citace figcaption span{
display: block;
margin-top: 2px;
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .06em;
color: var(--muted);
}
.tw-dark .tw-citace blockquote{ color: var(--tw-cream); }
.tw-dark .tw-citace figcaption span{ color: rgba(238,226,208,.7); }
/* --- Technický seznam --------------------------------------------------- */
.tw-seznam{ list-style: none; margin: 0; padding: 0; }
.tw-seznam-radek{ border-top: 1px solid var(--line); }
.tw-seznam-radek:last-child{ border-bottom: 1px solid var(--line); }
.tw-seznam-obsah{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
padding: 14px 0;
text-decoration: none;
color: inherit;
}
a.tw-seznam-obsah{ transition: padding-left var(--d-quick) var(--ease-cut); }
.tw-seznam-nazev{ font-size: var(--t-small); }
.tw-seznam-poznamka{
flex: 0 0 auto;
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
@media (hover: hover){
a.tw-seznam-obsah:hover{ padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce){
a.tw-seznam-obsah{ transition: none; }
a.tw-seznam-obsah:hover{ padding-left: 0; }
}
.tw-dark .tw-seznam-radek{ border-color: rgba(238,226,208,.2); }
.tw-dark .tw-seznam-radek:last-child{ border-bottom-color: rgba(238,226,208,.2); }
.tw-dark .tw-seznam-poznamka{ color: rgba(238,226,208,.65); }
.tw-dark a.tw-seznam-obsah:hover .tw-seznam-nazev{ color: var(--tw-ochre); }
/*
* Na mobilu se řádek nesmí přetlačovat: poznámka je flex: 0 0 auto,
* takže by z názvu ukrajovala místo, dokud se nezalomí doprostřed.
* Pod 640 px proto název a hodnota stojí pod sebou.
*/
@media (max-width: 639px){
.tw-seznam-obsah{
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.tw-seznam-poznamka{ flex: 0 1 auto; }
}
/* --- Fotka s popiskem --------------------------------------------------- */
figure.tw-dilna{
position: relative;
margin: 0;
overflow: hidden;
display: block;
min-height: 0;
background: var(--surface-3);
align-items: initial;
}
figure.tw-dilna::after{ content: none; }
.tw-pomer-16-9{ aspect-ratio: 16/9; }
.tw-pomer-3-2 { aspect-ratio: 3/2; }
.tw-pomer-21-9{ aspect-ratio: 21/9; }
.tw-dilna-foto{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
figure.tw-dilna .tw-caption{
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 1;
padding: var(--s6) var(--s5) var(--s4);
background: linear-gradient(to top, rgba(18,26,22,.88), rgba(18,26,22,0));
color: var(--tw-cream);
}
/* --- Závěrečná výzva ---------------------------------------------------- */
.tw-cta h3{ margin: 0 0 var(--s3); }
.tw-cta p{ margin: 0 0 var(--s4); max-width: 42ch; }
.tw-cta-akce{ margin: var(--s5) 0 var(--s3); }
.tw-cta-pod{
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .06em;
color: rgba(238,226,208,.7);
}
.tw-cta-telefon{
margin-top: var(--s6);
padding-top: var(--s5);
border-top: 1px solid rgba(238,226,208,.2);
font-size: var(--t-small);
}
.tw-cta-telefon a{ color: var(--tw-ochre); }
/* --- Přepínač motivu ---------------------------------------------------- */
.tw-prepinac{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: inherit;
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: border-color var(--d-quick) var(--ease-cut),
background var(--d-quick) var(--ease-cut);
}
.tw-prepinac-ikona{ padding: 8px; }
.tw-prepinac-znak{ display: inline-flex; }
.tw-prepinac-znak svg{ display: block; }
/* Ve světlém režimu svítí slunce, v tmavém měsíc. */
/*
* Ikona i popisek ukazují CÍL, ne stav.
*
* Dřív svítilo ve světlém motivu sluníčko a vedle něj stálo
* „Tmavý motiv“ — ikona hlásila, kde jsme, text kam jdeme, a četlo
* se to proti sobě. Teď platí jedno pravidlo pro celý web:
* měsíček patří k tmavému motivu, sluníčko ke světlému.
*
* (Vypínač v liště je jiná věc — tam jsou obě strany vidět naráz
* a stav ukazuje poloha knoflíku. Viz §33.)
*/
.tw-znak-slunce,
.tw-znak-paprsky{ display: none; }
.tw-znak-mesic{ display: block; }
.tw-popis-tmavy{ display: inline; }
.tw-popis-svetly{ display: none; }
:root[data-theme="dark"] .tw-znak-slunce,
:root[data-theme="dark"] .tw-znak-paprsky{ display: block; }
:root[data-theme="dark"] .tw-znak-mesic{ display: none; }
:root[data-theme="dark"] .tw-popis-tmavy{ display: none; }
:root[data-theme="dark"] .tw-popis-svetly{ display: inline; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tw-znak-slunce,
:root:not([data-theme="light"]) .tw-znak-paprsky{ display: block; }
:root:not([data-theme="light"]) .tw-znak-mesic{ display: none; }
:root:not([data-theme="light"]) .tw-popis-tmavy{ display: none; }
:root:not([data-theme="light"]) .tw-popis-svetly{ display: inline; }
}
@media (hover: hover){
.tw-prepinac:hover{ border-color: var(--tw-ochre); }
}
.tw-dark .tw-prepinac{ border-color: rgba(238,226,208,.35); color: var(--tw-cream); }
.tw-dark .tw-prepinac:hover{ border-color: var(--tw-ochre); }
/* --- Zápatí ------------------------------------------------------------- */
/*
* Zápatí stojí na nejtmavší zeleni z manuálu (--core), ne na firemní
* zeleni sekce „secondary“. Dva důvody:
*
* 1. Kontrast. Okrové popisky sloupců měly na #385046 poměr 2,95:1 —
* to je přesně případ, který manuál zakazuje (pravidlo 2). Na --core
* mají 5,3:1 a projdou.
* 2. Zápatí má stránku uzavřít. Tmavší plocha ji ukončí zřetelněji než
* odstín, který se od sekcí nad ní skoro neliší.
*
* Vlastní token, aby se odstín dal doladit z jednoho místa.
*/
:root{ --plocha-zapati: var(--core); }
.uk-section.tw-zapati,
.uk-section.tw-zapati-pata{
background-color: var(--plocha-zapati);
}
/*
* Popisky sloupců drží okrovou. Selektor musí nést i .uk-section,
* jinak ho přebije obecné pravidlo šablony pro světlý text
* v tmavých sekcích — má stejnou váhu a načítá se dřív.
*/
.uk-section.tw-zapati h3{
font-family: var(--f-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tw-ochre);
margin: 0 0 var(--s4);
}
.uk-section.tw-zapati p{ font-size: var(--t-small); color: var(--tw-cream); }
.uk-section.tw-zapati a{ color: var(--tw-cream); text-decoration: none; }
.uk-section.tw-zapati a:hover{ color: var(--tw-ochre); }
/*
* Právní odkazy v patě. Oddělovač je pseudoprvek, ne znak v textu —
* čtečka ho tak nepředčítá a poslední odkaz zůstane bez ocásku.
*/
.tw-zapati-pravni{
margin: var(--s3) 0 0;
font-family: var(--f-text);
font-size: var(--t-mono);
letter-spacing: .06em;
line-height: 2;
}
.uk-section.tw-zapati-pata .tw-zapati-pravni a{
color: rgba(238, 226, 208, .72);
text-decoration: none;
}
.uk-section.tw-zapati-pata .tw-zapati-pravni a:hover{ color: var(--tw-ochre); }
.tw-zapati-pravni a + a::before{
content: "·";
margin: 0 .6em;
color: rgba(238, 226, 208, .38);
}
.tw-zapati .tw-seznam-obsah{ padding: 8px 0; }
.tw-zapati .tw-seznam-nazev{ font-size: var(--t-small); }
/*
* Bez dělicí linky nad copyrightem. Spodní lišta se od zápatí odděluje
* dost už tím, že má vlastní plochu a menší písmo — linka navíc jen
* přidávala další vodorovnou čáru do místa, kde jich je beztak dost.
*/
/*
* Spodní lišta je jedna rovina.
*
* Sloupec od builderu je jinak stoh — každý prvek pod sebou. Tady
* z něj děláme řádek: vlevo copyright se svislítkem a právními
* odkazy, vpravo značka autora a vypínač motivu. Svisle se všechno
* srovnává na střed, včetně tlačítka.
*
* flex-wrap tu je jako pojistka pro úzké obrazovky, ne jako výchozí
* chování — na běžné šířce se to musí vejít na jeden řádek.
*/
.tw-zapati-pata .uk-grid > *{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3) var(--s5);
}
/*
* Značka autora odtlačí sebe i vypínač doprava. Prohlížeč bez :has()
* nechá všechno vlevo vedle sebe — pořád jeden řádek, jen bez odsazení.
*/
.tw-zapati-pata .uk-grid > * > *:has(.tw-zapati-autor){ margin-left: auto; }
/*
* Prvky v řádku nesmí nést svislé okraje od builderu, jinak se
* střed rozjede proti tlačítku.
*
* !important tu není z lenosti. UIkit má v theme.css pravidlo
* * + .uk-margin { margin-top: 20px !important; }
* a to se přebít váhou selektoru nedá — proti !important stojí
* jen !important. Změřeno: podpis autora seděl o 10 px níž než
* copyright a vypínač, protože je v řádku druhý v pořadí, takže
* na něj to pravidlo sedlo (na první prvek ne).
*/
.tw-zapati-pata .uk-grid > * > *{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* Copyright, svislá čárka a právní odkazy — vnitřní skupina.
*/
.tw-zapati-radek{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s4);
margin: 0;
}
.tw-zapati-copy{
font-family: var(--f-text);
font-size: var(--t-mono);
letter-spacing: .06em;
color: rgba(238,226,208,.6);
margin: 0;
}
/*
* Svislý oddělovač. Prázdný prvek s okrajem, ne znak „|“ — čtečka
* by svislítko předčítala a v řádku, který se zalamuje, by zůstávalo
* viset na konci.
*/
.tw-zapati-delic{
width: 1px;
align-self: stretch;
min-height: 1.1em;
background: rgba(238,226,208,.28);
}
/* V řádku už právní odkazy nepotřebují vlastní horní mezeru. */
.uk-section.tw-zapati-pata .tw-zapati-radek .tw-zapati-pravni{
margin: 0;
line-height: 1.6;
}
.tw-zapati-autor{
display: flex;
align-items: center;
gap: var(--s2);
font-family: var(--f-text);
font-size: var(--t-mono);
letter-spacing: .06em;
color: rgba(238,226,208,.6);
margin: 0;
}
/*
* Podpis je odkaz ven, tak ať je jako odkaz vidět. Krémová na tmavé
* drží 6,8:1; podtržení se objeví až při najetí, aby řádek nekřičel.
*/
.uk-section.tw-zapati-pata .tw-zapati-autor a{
color: rgba(238,226,208,.82);
text-decoration: none;
border-bottom: 1px solid rgba(238,226,208,.32);
}
.uk-section.tw-zapati-pata .tw-zapati-autor a:hover{
color: var(--tw-ochre);
border-bottom-color: var(--tw-ochre);
}
/*
* Značka autora. Výška se řídí řádkem, šířka dopočítává poměr —
* bez toho by se SVG bez rozměrů roztáhlo přes půl paty.
*
* Značka je bílá, takže na tmavé patě sedí; mírné ztlumení ji srovná
* s okolním textem, aby nekřičela víc než jméno klienta.
*/
.tw-zapati-autor-znak{
display: block;
width: auto;
height: 20px;
opacity: .72;
transition: opacity var(--d-quick) var(--ease-cut);
}
.uk-section.tw-zapati-pata .tw-zapati-autor a:hover .tw-zapati-autor-znak{ opacity: 1; }
/* Se značkou uvozující slovo nepotřebujeme — obrázek mluví sám. */
.tw-zapati-autor:has(.tw-zapati-autor-znak) .tw-zapati-autor-uvod{
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Odkaz kolem obrázku nemá mít linku pod sebou. */
.uk-section.tw-zapati-pata .tw-zapati-autor a:has(.tw-zapati-autor-znak){
border-bottom: 0;
display: block;
}
/* Vypínač motivu v patě — svisle na střed řádku, bez vlastního odsazení. */
.tw-zapati-pata .tw-prepinac{
display: inline-flex;
align-items: center;
gap: var(--s2);
vertical-align: middle;
}
@media (max-width: 639px){
.tw-zapati-pata .uk-grid > *{ justify-content: flex-start; }
.tw-zapati-pata .uk-grid > * > *:has(.tw-zapati-autor){ margin-left: 0; }
}
/* --- Logo v hlavičce ---------------------------------------------------- */
/*
* Šablona sází logu atribut height, jenže obrázkům se plošně nastavuje
* height:auto a atribut tím padá pod stůl. Výšku proto držíme tady.
* Logo je na výšku, takže se z něj v navigaci stává kompaktní značka.
*/
.uk-logo img{
height: 62px;
width: auto;
max-width: none;
}
@media (max-width: 959px){
.uk-logo img{ height: 50px; }
}
/* Položky navigace se nelámou uprostřed — „Jak to probíhá" patří na řádek. */
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle{ white-space: nowrap; }
/* --- Hero s fotkou materiálu -------------------------------------------- */
/*
* Samotná zelená plocha je na velkém monitoru prázdná — vypadá jako
* nedodělaná, ne jako záměr. Pod hero proto patří skutečný materiál.
*
* Fotka se přebarví do firemní zeleně, takže se pod ni dá dát cokoli
* z knihovny a hero zůstane značkové. Vrstvy odspodu:
* 0 fotka
* 1 zelený závoj a vinětace
* 2 deska
* 3 závoj pod textem
* 4 text
*/
.tw-hero-foto{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
filter: grayscale(1) contrast(1.12);
}
.tw-hero-zavoj{
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(120% 90% at 28% 34%, rgba(56,80,70,.42) 0%, rgba(13,19,16,.86) 100%),
linear-gradient(180deg, var(--tw-green) 0%, #22332C 100%);
mix-blend-mode: multiply;
}
/* Bez fotky zůstává hero plnou zelení a závoj nemá co násobit. */
.tw-hero:not(:has(.tw-hero-foto)) .tw-hero-zavoj{ display: none; }
.tw-hero .tw-board-obal{ z-index: 2; }
.tw-hero::after{ z-index: 3; }
.tw-hero > .uk-container{ z-index: 4; }
/* Hero nesmí být tak vysoké, aby v něm zbýval hektar prázdna. */
.tw-hero{ min-height: 72vh; }
@media (min-width: 960px){
.tw-hero{ min-height: 84vh; }
}
/* --- Tlačítka na tmavém pásu ------------------------------------------- */
/*
* Na tmavé zeleni je hlavní tlačítko okrové s tmavým textem (5,0:1).
* Krémová plocha, kterou tu YOOtheme dával dřív, vypadala jako
* neaktivní prvek a druhé tlačítko splývalo s pozadím úplně.
*
* Vedlejší tlačítko je jen obrys — po najetí se plocha vyplní krémem.
*/
.tw-dark .uk-button-primary{
background: var(--tw-ochre);
color: var(--on-accent);
border-color: var(--tw-ochre);
}
.tw-dark .uk-button-primary:hover,
.tw-dark .uk-button-primary:focus{
background: var(--tw-cream);
color: var(--tw-green);
border-color: var(--tw-cream);
}
.tw-dark .uk-button-default,
.tw-dark .uk-button-secondary{
background: transparent;
color: var(--tw-cream);
border-color: rgba(238,226,208,.55);
}
.tw-dark .uk-button-default:hover,
.tw-dark .uk-button-default:focus,
.tw-dark .uk-button-secondary:hover{
background: var(--tw-cream);
color: var(--tw-green);
border-color: var(--tw-cream);
}
/* Poznámka pod tlačítkem musí být čitelná, ne jen tušená. */
.tw-cta-pod{ color: rgba(238,226,208,.82); }
.tw-dark .uk-text-meta,
.tw-dark .tw-caption{ color: rgba(238,226,208,.75); }
/* ======================================================================
16 · TMAVÝ MOTIV NAD YOOTHEME
Tokeny se v tmavém režimu přepnou, jenže YOOtheme má barvy sekcí,
dlaždic a karet zapečené ve svém zkompilovaném CSS. Bez tohohle
bloku se přepínačem změní jen text a stránka zůstane světlá.
====================================================================== */
/*
* Pravidla se opakují třikrát, protože motiv má tři stavy: podle
* systému, ručně světlý, ručně tmavý. Kdyby byl výběr jen v media
* query, ruční přepnutí by nefungovalo — a naopak.
*/
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) .tm-page,
:root:not([data-theme="light"]) .uk-section-default,
:root:not([data-theme="light"]) .uk-tile-default,
:root:not([data-theme="light"]) .uk-background-default{
background-color: var(--surface);
color: var(--ink);
}
:root:not([data-theme="light"]) .uk-section-muted,
:root:not([data-theme="light"]) .uk-tile-muted,
:root:not([data-theme="light"]) .uk-card-default,
:root:not([data-theme="light"]) .uk-background-muted{
background-color: var(--surface-2);
color: var(--ink);
}
/*
* Hlavička tu dřív dostávala neprůhledné pozadí. Od chvíle, kdy
* plave nad obsahem, je to chyba: v tmavém režimu překryla horní
* pruh fotky a hrdina nesahal k hraně tak jako ve světlém.
* Barvu nese jen skleněná pilulka uvnitř, hlavička sama nikdy.
*/
:root:not([data-theme="light"]) .tm-headerbar{
background-color: var(--surface);
}
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) h4,
:root:not([data-theme="light"]) .uk-heading-small,
:root:not([data-theme="light"]) .uk-heading-medium{ color: var(--ink); }
:root:not([data-theme="light"]) hr,
:root:not([data-theme="light"]) .uk-hr{ border-color: var(--line); }
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .tm-page,
:root[data-theme="dark"] .uk-section-default,
:root[data-theme="dark"] .uk-tile-default,
:root[data-theme="dark"] .uk-background-default{
background-color: var(--surface);
color: var(--ink);
}
:root[data-theme="dark"] .uk-section-muted,
:root[data-theme="dark"] .uk-tile-muted,
:root[data-theme="dark"] .uk-card-default,
:root[data-theme="dark"] .uk-background-muted{
background-color: var(--surface-2);
color: var(--ink);
}
:root[data-theme="dark"] .tm-headerbar{
background-color: var(--surface);
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] .uk-heading-small,
:root[data-theme="dark"] .uk-heading-medium{ color: var(--ink); }
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .uk-hr{ border-color: var(--line); }
/* Přechod ať není skokový, ale ne u obrázků — ty by problikávaly. */
body,
.tm-page,
.uk-section-default,
.uk-section-muted,
.uk-navbar-container{
transition: background-color var(--d-base) var(--ease-cut),
color var(--d-base) var(--ease-cut);
}
@media (prefers-reduced-motion: reduce){
body, .tm-page, .uk-section-default, .uk-section-muted, .uk-navbar-container{ transition: none; }
}
/* Inverzní logo se řídí motivem, ne kontextem UIkitu. */
:root[data-theme="dark"] .uk-logo > img:not(.uk-logo-inverse){ display: none; }
:root[data-theme="dark"] .uk-logo > .uk-logo-inverse{ display: block; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .uk-logo > img:not(.uk-logo-inverse){ display: none; }
:root:not([data-theme="light"]) .uk-logo > .uk-logo-inverse{ display: block; }
}
/* ======================================================================
17 · NAVIGACE
====================================================================== */
/*
* Položky menu byly monospace o velikosti 12 px — na velkém monitoru
* se ztrácely. Beze změny rejstříku (technická verzálka je součást
* jazyka značky) zvětšujeme na 13 px a ubíráme prostrkání.
*/
.uk-navbar-nav > li > a{
font-family: var(--f-mono);
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-2);
padding: 0 16px;
min-height: 72px;
}
@media (min-width: 1200px){
.uk-navbar-nav > li > a{ font-size: 13.5px; padding: 0 20px; }
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a{ color: var(--accent-ink); }
/*
* Zlatá linka pod položkou tu byla od začátku — hrana jako všude
* jinde v systému. Ve skleněné liště se ale bila s pilulkou: dvě
* značky stavu na jednom prvku. Zůstává jen pilulka.
*
* Pravidlo se nemaže, jen vypíná. Kdyby se lišta někdy vrátila
* k plné ploše, je linka na dosah.
*/
.uk-navbar-nav > li > a::after{ content: none; }
/* ----------------------------------------------------------------------
NAVIGACE JAKO SKLO
Lišta plave nad obsahem jako matné sklo: rozostří, co je pod ní,
nese vlastní hranu a nahoře odlesk.
Dvě věci, které se u tohohle efektu obvykle pokazí:
1) Průhlednost. Pod hlavičkou začíná tmavá fotka hrdiny a menu je
tmavě zelené. Při 40% krytí by text na fotce zmizel. Proto 72 %
a silné rozostření — pořád je to sklo, ale čitelné.
2) Prohlížeč bez backdrop-filter. Tam by ze skla zbyl průhledný
pruh. Výchozí stav je proto neprůhledný a průhlednost se
zapíná až uvnitř @supports.
---------------------------------------------------------------------- */
.uk-navbar-container{
position: relative;
border-radius: 999px;
border: 1px solid var(--sklo-hrana);
box-shadow: var(--sklo-stin);
transition: background-color var(--d-base) var(--ease-cut),
box-shadow var(--d-base) var(--ease-cut),
color var(--d-base) var(--ease-cut);
}
/*
* Odlesk podél horní hrany — to, čím sklo vypadá jako sklo.
*
* Je to podkladový přechod, ne překryvná vrstva. Vrstva přes celou
* lištu by se položila i na logo a rozjasnila mu horní půlku.
*/
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container{
background-image: linear-gradient(to bottom, var(--sklo-lesk), transparent 44%);
}
/*
* Tady je jediné !important v celém souboru a stojí za ním měření,
* ne pohodlnost.
*
* Rodičovská šablona nastavuje ploše lišty barvu s !important.
* Vyzkoušeno: selektor o síle 0-4-0 bez !important prohrál, s ním
* vyhrál. Do wp-content/themes/yootheme/ se podle zadání nesahá,
* takže jinou cestu než přebít deklaraci nemáme.
*
* Bez toho zůstane lišta neprůhledná a celé sklo je k ničemu.
*/
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container{
background-color: var(--sklo-plocha) !important;
-webkit-backdrop-filter: blur(var(--sklo-rozmaz)) saturate(170%) brightness(var(--sklo-jas));
backdrop-filter: blur(var(--sklo-rozmaz)) saturate(170%) brightness(var(--sklo-jas));
}
}
/* ----------------------------------------------------------------------
HLAVIČKA PLAVE NAD OBSAHEM
Obě hlavičky (mobilní i desktopová) se vyndají z toku stránky.
Tím se stanou dvě věci naráz, které zákazník chtěl: hero sahá
až k horní hraně obrazovky a menu na něm leží — takže je vidět,
že je průhledné.
Hlavička sama nemá žádnou plochu. Barvu nese jen skleněná
pilulka uvnitř.
Placeholder od UIkitu se skrývá. Drží místo po prvku, který se
při skrolování přilepí — jenže hlavička v toku vůbec není, takže
by tu jen dělal prázdnou díru.
---------------------------------------------------------------------- */
.tm-page{ position: relative; }
/*
* position: fixed, ne absolute.
*
* Napřed to bylo absolute a lišta při skrolování odjela pryč.
* Lepení od UIkitu se totiž počítá z pozice prvku v toku — a prvek
* v toku není. Vlastní lepení je tady jednodušší než ho přemlouvat:
* lišta je připnutá pořád, takže je pořád po ruce a hrdina pod ní
* začíná na nule. Lepení v nastavení šablony je proto vypnuté
* (viz vzhled.php), ať se dvě řešení nepřetahují.
*/
.tm-header,
.tm-header-mobile{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 980;
background: transparent;
}
.tm-header .uk-sticky-placeholder,
.tm-header-mobile .uk-sticky-placeholder{ display: none; }
/*
* Přihlášenému správci drží WordPress nahoře vlastní lištu, taky
* napevno. Bez tohohle by se mu naše lišta schovávala pod ni.
* Návštěvníka se to netýká — třída admin-bar je jen pro přihlášené.
*/
body.admin-bar .tm-header,
body.admin-bar .tm-header-mobile{ top: 32px; }
@media (max-width: 782px){
body.admin-bar .tm-header,
body.admin-bar .tm-header-mobile{ top: 46px; }
}
/* Lišta se odlepí od okrajů, aby to byla plovoucí pilulka. */
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container,
.uk-sticky-fixed .uk-navbar-container{
margin: var(--hlavicka-odsazeni) var(--s3) 0;
transition: margin-top var(--d-base) var(--ease-cut);
}
@media (min-width: 960px){
.tm-header .uk-navbar-container,
.uk-sticky-fixed .uk-navbar-container{
margin: var(--hlavicka-odsazeni) auto 0;
max-width: 1440px;
width: calc(100% - var(--s7));
}
}
/*
* Po odrolování se lišta přisune blíž k hraně: 15 px nahoře,
* 7 px dole. Nahoře má kolem sebe vzduch, protože tam leží na
* fotce a je součástí obrazu. Jakmile člověk odroluje, je z ní
* nástroj — a ten má být z cesty.
*
* Řídí to skrolovací osa, ne posluchač událostí. Žádný scroll
* handler, žádné překreslování při každém pixelu — prohlížeč to
* dělá sám na kompozitoru. Stejná technika, jakou na webu jede
* paralaxa.
*
* Kde skrolovací osy nejsou, zůstane lišta na 15 px. Nic se
* nerozbije, jen se nepřisune.
*/
/*
* Nejdřív to jela skrolovací osa (animation-timeline: scroll()).
* V téhle sestavě se ale neaktivovala — animace běžela, ale osa
* hlásila currentTime null, takže se nikdy neprojevila. Ručně
* postavená ScrollTimeline přitom fungovala. Místo dalšího hádání
* to řídí třída na , kterou přepíná skript.
*
* Posluchač je pasivní a měří jednou za snímek, takže skrolování
* nebrzdí. Bez JavaScriptu zůstane lišta na 15 px — nic se
* nerozbije, jen se nepřisune.
*/
.tw-odrolovano .tm-header .uk-navbar-container,
.tw-odrolovano .tm-header-mobile .uk-navbar-container{
margin-top: var(--hlavicka-odsazeni-pevne);
}
@media (prefers-reduced-motion: reduce){
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container{ transition: none; }
}
/*
* Stránky, které hrdinou nezačínají — detail dekoru, výsledky
* hledání, chybová stránka. Bez odsazení by jim menu leželo
* na prvním nadpisu.
*/
main > *:first-child:not(.tw-hero){
padding-top: calc(var(--hlavicka-vyska) + var(--hlavicka-odsazeni) + var(--s5));
}
/*
* Ve stavu přilepení je sklo o něco hutnější — pod lištou už
* neprobíhá hrdina, ale běžný text, a ten se přes příliš čiré
* sklo špatně čte.
*/
.uk-sticky-fixed .uk-navbar-container{
box-shadow: var(--sklo-stin), 0 1px 0 var(--sklo-hrana) inset;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.tm-header .uk-sticky-fixed .uk-navbar-container,
.tm-header-mobile .uk-sticky-fixed .uk-navbar-container{
background-color: var(--sklo-plocha-pevne) !important;
-webkit-backdrop-filter: blur(calc(var(--sklo-rozmaz) + 6px)) saturate(180%) brightness(var(--sklo-jas));
backdrop-filter: blur(calc(var(--sklo-rozmaz) + 6px)) saturate(180%) brightness(var(--sklo-jas));
}
}
/*
* Položky menu dostávají na najetí vlastní pilulku — bez ní by
* v zaobleném skle plavaly bez ukotvení.
*/
.uk-navbar-nav > li > a{
position: relative;
z-index: 0;
transition: color var(--d-quick) var(--ease-cut);
}
.uk-navbar-nav > li > a::before{
content: "";
position: absolute;
inset: 14px 4px;
z-index: -1; /* pod text, ale nad plochu lišty */
border-radius: 999px;
background: rgba(255, 255, 255, .82);
opacity: 0;
transform: scale(.86);
transition: opacity var(--d-quick) var(--ease-cut),
transform var(--d-base) var(--ease-lift);
pointer-events: none;
}
/* Pilulka nevyskočí, rozevře se ze středu. */
.uk-navbar-nav > li > a:hover::before,
.uk-navbar-nav > li > a:focus-visible::before,
.uk-navbar-nav > li.uk-active > a::before{
opacity: 1;
transform: scale(1);
}
/* Na bílé pilulce musí text ztmavnout, jinak by na ní zmizel. */
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a{ color: var(--core); }
@media (prefers-reduced-motion: reduce){
.uk-navbar-container,
.uk-navbar-nav > li > a,
.uk-navbar-nav > li > a::before{ transition: none; }
}
/*
* Hrana pod aktivní položkou se musí posunout nahoru — v nižší
* pilulce by jinak vyjela ven přes zaoblení.
*/
.uk-navbar-nav > li > a::after{ bottom: 14px; }
/* Přepínač jako poslední položka menu. */
.tw-menu-prepinac{ display: flex; align-items: center; padding-left: 10px; }
.tw-menu-prepinac .tw-prepinac{ padding: 8px; }
@media (max-width: 959px){
.tw-menu-prepinac{ padding: 12px 0 0; }
}
/* ======================================================================
18 · ODHALOVÁNÍ A ZNAČKY ÚDAJŮ
====================================================================== */
/*
* Bez JavaScriptu se nic neschovává. Třídu tw-js přidává až skript,
* takže výchozí stav dokumentu je „všechno vidět".
*/
.tw-js [data-tw-reveal]{
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity var(--d-base) var(--ease-cut),
transform var(--d-base) var(--ease-cut);
}
.tw-js [data-tw-reveal].tw-videt{
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce){
.tw-js [data-tw-reveal]{ opacity: 1; transform: none; transition: none; }
}
/* --- Údaj se značkou ---------------------------------------------------- */
.tw-udaj{
min-width: 0;
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
/*
* Velikost i tah se berou ze stejných tokenů jako značky kroků na
* „Jak to probíhá“. Byly o polovinu menší a působily jako jiná sada.
*/
.tw-udaj-znak{
display: block;
width: var(--krok-znak, 88px);
height: var(--krok-znak, 88px);
margin-bottom: var(--s4);
color: var(--accent-ink);
transition: transform var(--d-base) var(--ease-cut);
}
.tw-udaj-znak svg{ stroke-width: var(--krok-tah, 1.3); }
/* Drobné nadzvednutí při najetí na údaj — stejné gesto jako u karet. */
.tw-udaj:hover .tw-udaj-znak{ transform: translateY(-3px); }
@media (max-width: 959px){
.tw-udaj-znak{
width: var(--krok-znak-uzky, 76px);
height: var(--krok-znak-uzky, 76px);
}
}
.tw-udaj-znak svg{ width: 100%; height: 100%; display: block; }
/*
* Značka se při odhalení vykreslí tahem. 260 je s rezervou delší než
* nejdelší cesta v sadě, takže se všechny dokreslí do konce.
*/
.tw-js .tw-udaj-znak path,
.tw-js .tw-udaj-znak circle,
.tw-js .tw-udaj-znak rect{
stroke-dasharray: 260;
stroke-dashoffset: 260;
}
.tw-js .tw-udaj.tw-videt .tw-udaj-znak path,
.tw-js .tw-udaj.tw-videt .tw-udaj-znak circle,
.tw-js .tw-udaj.tw-videt .tw-udaj-znak rect{
animation: tw-kresli var(--d-slow) var(--ease-cut) both;
}
.tw-js .tw-udaj.tw-videt .tw-udaj-znak > :nth-child(2){ animation-delay: 90ms; }
.tw-js .tw-udaj.tw-videt .tw-udaj-znak > :nth-child(3){ animation-delay: 160ms; }
.tw-js .tw-udaj.tw-videt .tw-udaj-znak > :nth-child(4){ animation-delay: 220ms; }
@keyframes tw-kresli{
from{ stroke-dashoffset: 260; }
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce){
.tw-js .tw-udaj-znak path,
.tw-js .tw-udaj-znak circle,
.tw-js .tw-udaj-znak rect{ stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}
/*
* Čísla byla přes celou šířku sloupce a působila jako plakát, ne jako
* technický údaj. Menší stupeň, značka nad ním a linka nad blokem
* z toho dělají datový řádek.
*/
.tw-cislo{
font-size: clamp(28px, 3vw, 40px);
letter-spacing: -.015em;
}
.tw-dark .tw-udaj{ border-top-color: rgba(238,226,208,.22); }
.tw-dark .tw-udaj-znak{ color: var(--tw-ochre); }
/* ======================================================================
19 · HERO — POMALÝ NÁJEZD FOTKY
====================================================================== */
/*
* Kreslená deska se z úvodní stránky vypnula — přes fotku materiálu
* působila jako nalepený cizí prvek. Pohyb teď nese sama fotka:
* pomalu se odsazuje, takže hero žije, ale nic neposkakuje.
*/
@keyframes tw-hero-najezd{
from{ transform: scale(1.08) translate3d(0, 1.5%, 0); }
to { transform: scale(1) translate3d(0, 0, 0); }
}
.tw-hero-foto{
animation: tw-hero-najezd 2400ms var(--ease-cut) both;
transform-origin: 50% 45%;
}
@media (prefers-reduced-motion: reduce){
.tw-hero-foto{ animation: none; }
}
/* Okrová linka pod nadřazeným řádkem se dokreslí. */
.tw-hero .tw-eyebrow{ position: relative; display: inline-block; padding-bottom: 10px; }
.tw-hero .tw-eyebrow::after{
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px; width: 100%;
background: var(--tw-ochre);
transform: scaleX(0);
transform-origin: left;
animation: tw-linka var(--d-slow) var(--ease-cut) 560ms both;
}
@keyframes tw-linka{ to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){
.tw-hero .tw-eyebrow::after{ animation: none; transform: scaleX(1); }
}
/* ======================================================================
20 · TŘI SVĚTY — ODSAZENÍ
====================================================================== */
/*
* Dlaždice se dotýkaly sebe navzájem i hera nad sebou. Mřížka teď
* má mezeru a celá sekce dýchá.
*/
.tw-svety{ margin-left: calc(-1 * var(--s3)); }
.tw-svety > *{ padding-left: var(--s3); }
.tw-svety-sekce{
padding-top: var(--s7);
padding-bottom: var(--s7);
}
@media (min-width: 960px){
.tw-svety-sekce{ padding-top: var(--s8); padding-bottom: var(--s8); }
}
.tw-svet{ border-left-width: 3px; }
/* Vertikální logo v zápatí. SVG bez pevné výšky by se roztáhlo. */
.tw-zapati-logo img{
width: 180px;
height: auto;
max-width: 100%;
}
/* ======================================================================
21 · DOLADĚNÍ PO KONTROLE
====================================================================== */
/* --- Hero: fotka nesmí zčernat ------------------------------------------ */
/*
* Zelený závoj přes odbarvenou fotku srazil materiál do černé.
* Fotka si teď nechává kus vlastního tónu a závoj jen sjednocuje
* barevnost — struktura desky zůstane čitelná.
*/
.tw-hero-foto{
filter: grayscale(.55) contrast(1.06) brightness(1.12);
}
.tw-hero-zavoj{
background:
radial-gradient(130% 100% at 30% 30%, rgba(56,80,70,.20) 0%, rgba(13,19,16,.62) 100%),
linear-gradient(180deg, rgba(56,80,70,.55) 0%, rgba(28,42,36,.75) 100%);
}
/* --- Tři světy: závoj patří tam, kde je text ---------------------------- */
/*
* Text v dlaždici sedí nahoře, ztmavení bylo dole — fotka pod ním
* byla zbytečně zabitá a nadpis přesto neměl o co se opřít.
* Gradient je teď otočený a slabší.
*/
.tw-svet::after{
background: linear-gradient(to bottom,
rgba(18,26,22,.88) 0%,
rgba(18,26,22,.62) 46%,
rgba(18,26,22,.34) 100%);
}
.tw-svet,
.tw-svet-obsah{ min-height: 360px; }
.tw-svet-obsah{ padding: var(--s6) var(--s5) var(--s6); }
/*
* Seznam ve světech. Tenhle blok je pro něj poslední slovo — dřív
* si tu konkurovaly tři sady pravidel a vyhrávala ta s linkami
* přes celou dlaždici. Odrážku řeší značka, ne linka; podrobnosti
* u bloku „Tři světy“ výš.
*/
.tw-svet-seznam{ flex: 0 1 auto; margin-top: var(--s2); }
.tw-svet-seznam li{
padding: 8px 0 8px 22px;
border-top: 0;
line-height: 1.35;
}
/* Výzva jde hned za seznam, ne na dno prázdné dlaždice. */
.tw-svet-vyzva{ margin-top: var(--s5); }
/* --- Značky u údajů o kus větší ---------------------------------------- */
.tw-udaj-znak{ width: 40px; height: 40px; }
/*
* Výzva v dlaždici byla okrová na fotce — to je podle manuálu pod
* limitem (okrová na světlém 2,96:1). Text je proto krémový a okrová
* zůstává jen na šipce, kde nenese význam.
*/
.tw-svet-vyzva{ color: var(--tw-cream); }
.tw-svet-vyzva::after{ color: var(--tw-ochre); }
/*
* Číslo bylo natvrdo ve firemní zeleni. Na tmavém podkladu se v ní
* ztratí, proto v tmavém režimu přebírá okrovou. Velikost čísla je
* nad 32 px, takže okrová projde i kontrastním pravidlem.
*/
:root[data-theme="dark"] .tw-cislo{ color: var(--accent-ink); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tw-cislo{ color: var(--accent-ink); }
}
/* ======================================================================
22 · OPRAVY PO DRUHÉ KONTROLE
====================================================================== */
/* --- Citace v tmavém režimu --------------------------------------------- */
/*
* Citace měla barvu --core. Ten token ale není „barva textu" — je to
* nejtmavší odstín systému a v tmavém režimu se z něj stává skoro
* černá, takže text na tmavém pozadí zmizel. Správný token pro text
* je --ink, který se s motivem obrací.
*/
.tw-citace blockquote{ color: var(--ink); }
.tw-citace figcaption b{ color: var(--ink); }
.tw-citace figcaption span{ color: var(--muted); }
/* --- Linka pod položkou menu -------------------------------------------- */
/*
* Linka se roztahovala přes celou lištu. Odkaz byl position:static,
* takže se absolutně umístěná linka vztáhla až k obalu navigace.
* Stačí odkazu dát vlastní souřadnicový systém.
*/
.uk-navbar-nav > li > a{ position: relative; }
/* ======================================================================
23 · ZAOBLENÝ LEVÝ HORNÍ ROH
Tvarový podpis značky. Symbol v logu má seříznutý jen jeden roh —
stejné gesto nesou tlačítka a interaktivní plochy.
====================================================================== */
/*
* Dvě míry, protože tlačítko není panel. Kdyby obojí neslo stejné
* hodnoty, velký roh by na tlačítku ukrojil půlku výšky.
*
* Pořadí v border-radius je vlevo nahoře, vpravo nahoře, vpravo
* dole, vlevo dole — velká hodnota je proto vždycky první.
*/
:root{
/* Panely, karty a fotky */
--r-panel: 12px;
--r-panel-roh: 30px;
/* Tlačítka a ovládací prvky */
--r-akce: 8px;
--r-akce-roh: 20px;
/* Starší název, ať se nerozbije, co ho ještě používá. */
--r-roh: var(--r-panel-roh);
}
/* --- Tlačítka ---------------------------------------------------------- */
.uk-button,
.uk-button-primary,
.uk-button-secondary,
.uk-button-default,
input[type="submit"],
button[type="submit"],
.wp-block-search__button,
.tw-poptavka input[type="file"],
.tw-poptavka input[type="file"]::file-selector-button{
border-radius: var(--r-akce-roh) var(--r-akce) var(--r-akce) var(--r-akce);
}
/* --- Panely, karty a fotky --------------------------------------------- */
/*
* Kdo dostane zaoblení, musí umět uříznout, co z něj přetéká —
* fotku, závoj i štítek. Proto s poloměrem rovnou i overflow.
*/
.tw-svet,
.tw-karta-foto,
.tw-realizace .tw-nahled,
.tw-dekor .tw-vzorek,
.tw-dekor-plocha,
figure.tw-dilna,
.tw-swatch,
.uk-card,
.uk-tile{
border-radius: var(--r-panel-roh) var(--r-panel) var(--r-panel) var(--r-panel);
overflow: hidden;
}
/* Obrázek uvnitř zaobleného panelu se ořízne s ním. */
.tw-swatch img,
.tw-dekor-plocha img,
.tw-realizace .tw-nahled img{ border-radius: inherit; }
/*
* Pásy přes celou šířku okna zaoblení nedostávají. Zaoblený roh
* na prvku, který končí až za okrajem obrazovky, vypadá jako chyba
* v rozvržení, ne jako záměr.
*/
.tw-hero,
.tw-hrana-pas,
.tw-zapati,
.tw-zapati-pata{ border-radius: 0; }
/*
* Utilita pro cokoli dalšího, co v Tvůrci potřebuje stejný tvar:
* Pokročilé → Třída CSS → tw-roh
*/
.tw-roh{
border-radius: var(--r-panel-roh) var(--r-panel) var(--r-panel) var(--r-panel);
overflow: hidden;
}
/*
* Zaoblení se musí projevit i tam, kde tlačítko něco překrývá —
* jinak by z pod rohu vykoukl podklad.
*/
.uk-button{ overflow: hidden; }
/* ======================================================================
24. NATIVNÍ ANIMACE SEKCÍ (UIkit scrollspy)
Sekce sestavené ve Tvůrci můžou mít vlastní animaci nájezdu
(Nastavení → Animace). YOOtheme ji řeší přes uk-scrollspy, který si
sám nesahá na prefers-reduced-motion — bez tohoto bloku by uživatel
s vypnutými animacemi dostal pohyb, o který nestojí.
Nesmí se to řešit skrytím: scrollspy nastavuje opacity: 0 inline
a odebírá ji až po spuštění animace. Proto necháváme animaci proběhnout,
jen ji zkrátíme na nulu — obsah tak zůstane viditelný.
====================================================================== */
@media (prefers-reduced-motion: reduce){
[class*="uk-animation-"],
.uk-scrollspy-inview{
animation-duration: 1ms !important;
animation-delay: 0s !important;
transform: none !important;
}
}
/* ======================================================================
25 · NÁJEZDY PŘI SKROLOVÁNÍ A PARALAXA
Jeden systém pro celý web. Prvky se odkrývají, jakmile vstoupí do
plochy zobrazení, s malým odstupem mezi sousedy a s delším průběhem,
aby pohyb působil klidně, ne jako trhnutí.
Tvrdá pravidla, která tenhle blok dodržuje:
— Bez JavaScriptu se nic neskrývá. Skrývání visí na .tw-js, kterou
přidává až skript. Když nedoběhne, stránka je prostě statická.
— prefers-reduced-motion vypíná všechno naráz, dole v jednom bloku.
— Paralaxa jede na CSS časové ose skrolu, žádný posluchač scrollu
a žádná knihovna. Prohlížeč, který ji neumí, ukáže fotku bez pohybu.
====================================================================== */
:root{
/*
* Delší průběh, než mají mikrointerakce. 900 ms je mezi --d-slow
* a --d-story: dost dlouhé, aby byl pohyb čitelný, ne tak dlouhé,
* aby se na obsah čekalo.
*/
--d-reveal: 900ms;
--krok-reveal: 90ms; /* odstup sousedů, násobek kroku 70→90 pro delší průběh */
--posun-reveal: 30px;
--posun-boku: 34px;
--paralaxa: 7%; /* výchylka fotky nahoru i dolů */
--paralaxa-zoom: 1.16; /* předsazení, aby výchylka neodkryla okraj */
}
/* --- Základní nájezd ---------------------------------------------------- */
.tw-js [data-tw-reveal]{
opacity: 0;
transform: translate3d(0, var(--posun-reveal), 0);
transition:
opacity var(--d-reveal) var(--ease-cut),
transform var(--d-reveal) var(--ease-cut),
clip-path var(--d-reveal) var(--ease-cut);
}
.tw-js [data-tw-reveal].tw-videt{
opacity: 1;
transform: none;
}
/* --- Nadpis: text se vysune zpod vlastní účaří -------------------------- */
/*
* Ořez sahá v koncovém stavu za okraj (−24 %), jinak by se ustřihly
* dolní dotažnice u „g“, „j“ a „y“ a diakritika nad velkými písmeny.
*/
.tw-js [data-tw-reveal="nadpis"]{
clip-path: inset(0 0 100% 0);
transform: translate3d(0, 14px, 0);
}
.tw-js [data-tw-reveal="nadpis"].tw-videt{
clip-path: inset(-24% 0 -24% 0);
}
/* --- Fotka: nájezd s dojezdem přiblížení -------------------------------- */
.tw-js [data-tw-reveal="fotka"]{
transform: scale(1.06);
}
.tw-js [data-tw-reveal="fotka"].tw-videt{
transform: scale(1);
}
/* --- Sloupce: nájezd z boku -------------------------------------------- */
.tw-js [data-tw-reveal="zleva"] { transform: translate3d(calc(var(--posun-boku) * -1), 0, 0); }
.tw-js [data-tw-reveal="zprava"]{ transform: translate3d(var(--posun-boku), 0, 0); }
/* --- Paralaxa ----------------------------------------------------------- */
/*
* Fotka se v pásu posouvá proti směru skrolu. Rodič má overflow: hidden,
* takže z předsazeného snímku není nikdy vidět okraj.
*
* Časová osa view() spouští animaci podle toho, kde je prvek v okně,
* ne podle času — proto to nepotřebuje JavaScript a neblokuje to
* hlavní vlákno při skrolování.
*/
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
[data-tw-parallax]{
animation: tw-paralaxa linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes tw-paralaxa{
from{ transform: translate3d(0, calc(var(--paralaxa) * -1), 0) scale(var(--paralaxa-zoom)); }
to { transform: translate3d(0, var(--paralaxa), 0) scale(var(--paralaxa-zoom)); }
}
/* V pásu s hranou smí být výchylka větší, plocha je vysoká. */
.tw-hrana-foto[data-tw-parallax]{ --paralaxa: 9%; --paralaxa-zoom: 1.22; }
}
}
/* --- Ohled na vypnuté animace ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
.tw-js [data-tw-reveal],
.tw-js [data-tw-reveal].tw-videt{
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
[data-tw-parallax]{ animation: none; transform: none; }
}
/* ======================================================================
26 · ZNAČKY DODAVATELŮ
Fundermax, Heritage a Polyrey se u dekorů sázejí jako značka,
ne jako slovo. Kresba je jednobarevná: na světlém firemní zeleň
z manuálu, na tmavém bílá.
Jak je to udělané: soubor v img/znacky/ je čistá alfa maska —
bílá kresba na průhledném podkladu. CSS ji použije jako masku
a barvu dodá pozadím. Díky tomu je odstín jedna hodnota v tokenu,
ne tři různě obarvené obrázky, a přebarvení nezmění geometrii.
Fundermax má v originále bílou výplň rámečku. Ta se při přípravě
masky odečetla, takže rámeček zůstal jako obrys — jinak by
z loga byl na tmavém podkladu bílý obdélník.
====================================================================== */
:root{
--znacka-ink: var(--ink-2); /* firemní zeleň #385046 */
}
:root[data-theme="dark"],
.tw-dark{
--znacka-ink: #fff;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){ --znacka-ink: #fff; }
}
.tw-znacka{
display: inline-block;
vertical-align: middle;
background-color: var(--znacka-ink);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: contain;
mask-size: contain;
}
/*
* Výšku má každá značka vlastní. Kdyby všechny stály na stejné,
* Heritage by bylo nečitelné — má nad nápisem strom, takže při
* stejné výšce vyjde jeho písmo o polovinu menší než u ostatních.
* Sjednocuje se tedy velikost nápisu, ne rámeček kolem něj.
*/
.tw-znacka-fundermax{
width: 66px; height: 13px;
-webkit-mask-image: url("../img/znacky/fundermax.png");
mask-image: url("../img/znacky/fundermax.png");
}
.tw-znacka-heritage{
width: 43px; height: 26px;
-webkit-mask-image: url("../img/znacky/heritage.png");
mask-image: url("../img/znacky/heritage.png");
}
.tw-znacka-polyrey{
width: 62px; height: 15px;
-webkit-mask-image: url("../img/znacky/polyrey.png");
mask-image: url("../img/znacky/polyrey.png");
}
/*
* Prohlížeč bez podpory masky by ukázal jen barevný obdélník.
* Tam značku raději schováme a necháme mluvit název dekoru,
* který je vedle ní stejně vždycky.
*/
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))){
.tw-znacka{ display: none; }
}
/* Značka pod názvem dekoru stojí na řádku, kde býval text výrobce. */
.tw-dekor-znacka{
display: block;
margin-top: 6px;
line-height: 0; /* obrázková značka nemá účaří, kterou by řádek respektoval */
}
/* ======================================================================
27 · DETAIL DEKORU
Jedna šablona pro celý vzorník. Vzorek drží čtverec, protože
se u všech dekorů fotí ve stejném výřezu — jiný poměr by
při přepínání mezi dekory poskakoval.
====================================================================== */
.tw-dekor-plocha{
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--surface-2);
border-top-left-radius: var(--r-roh);
}
.tw-dekor-plocha img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.tw-dekor-bez-fotky{
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--line);
}
.tw-dekor-bez-fotky span{
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
/* Značka a řada stojí nad názvem na jednom řádku. */
.tw-dekor-puvod{
display: flex;
align-items: center;
gap: var(--s4);
margin: 0 0 var(--s3);
min-height: 26px;
}
.tw-dekor-rada{
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-ink);
}
.tw-dark .tw-dekor-rada{ color: var(--accent); }
.tw-dekor-popis{ max-width: 46ch; }
.tw-dekor-akce{ margin: var(--s6) 0 0; }
.tw-dekor-pozn{
margin: var(--s3) 0 0;
font-size: var(--t-small);
color: var(--muted);
max-width: 44ch;
}
.tw-dekor-dalsi{ margin-top: var(--s8); }
/* ======================================================================
28 · OBAL U CELOPLOŠNÝCH FOTEK
YOOtheme podle formátu zdroje občas vykreslí obrázek jako
, jindy jako holý .
Záleží na tom, jestli umí nabídnout modernější formát — u JPG
často ne, u PNG ano.
Naše celoplošné fotky jsou polohované absolutně přes celou plochu
rodiče. Jakmile mezi ně a rodiče vstoupí , stane se
vztažným rámcem ono — a protože je to řádkový prvek bez rozměru,
obrázek se smrskne na nulu. Načte se, ale není ho vidět.
display: contents obal z rozvržení vyjme, takže se obrázek zase
vztahuje k tomu, k čemu má. Na samotný to nemá vliv, takže
varianta bez obalu funguje dál stejně.
====================================================================== */
.tw-hero picture,
.tw-hrana-pas picture,
figure.tw-dilna picture,
.tw-svet picture,
.tw-dekor-plocha picture{
display: contents;
}
/* ======================================================================
29 · ZÁCHRANNÁ SÍŤ NÁJEZDŮ
Nájezdy skrývají obsah do chvíle, než JavaScript přidá .tw-videt.
Dvakrát se stalo, že se ta třída nepřidala — jednou kvůli chybě
ve skriptu, podruhé kvůli pozorovateli, který se neozval — a na
stránce zbyla prázdná místa. To je nepřijatelné selhání: ozdoba
nesmí rozhodovat o tom, jestli je vidět obsah.
Tenhle blok to řeší bez JavaScriptu. Prvek, který do pěti vteřin
nedostal .tw-videt, se odkryje sám — animace o délce 1 ms
s pětivteřinovým odkladem a fill-mode forwards. Když .tw-videt
dorazí včas, selektor přestane platit a pravidlo se neuplatní.
Horší případ je tedy „obsah se ukáže o pět vteřin později a bez
nájezdu“, ne „obsah tam není“.
====================================================================== */
@keyframes tw-zachrana{
to{ opacity: 1; transform: none; clip-path: none; }
}
.tw-js [data-tw-reveal]:not(.tw-videt){
animation: tw-zachrana 1ms linear 5s forwards;
}
@media (prefers-reduced-motion: reduce){
.tw-js [data-tw-reveal]:not(.tw-videt){ animation: none; }
}
/* ==========================================================================
30. POPTÁVKOVÝ FORMULÁŘ
Formulář je nejdražší místo webu — kdo sem došel, chce si nechat
udělat desku. Proto tu nic nesvítí, nic neposkakuje a všechno má
dost místa. Jediná ozdoba je okrová linka u pole, ve kterém člověk
zrovna je.
========================================================================== */
.tw-poptavka-blok{ max-width: 760px; }
.tw-poptavka-perex{
color: var(--muted);
font-size: var(--t-lede);
max-width: 58ch;
margin: 0 0 var(--s6);
}
.tw-poptavka{ margin: 0; }
/* --- Jedno pole ----------------------------------------------------- */
.tw-pole{ margin-bottom: var(--s5); }
.tw-pole .uk-form-label{
display: block;
margin-bottom: var(--s1);
}
.tw-povinne{
color: var(--accent-ink);
margin-left: 2px;
}
.tw-pole-napoveda{
display: block;
font-size: var(--t-small);
color: var(--muted);
margin-bottom: var(--s2);
}
.tw-poptavka .uk-input,
.tw-poptavka .uk-select,
.tw-poptavka .uk-textarea{
width: 100%;
padding: 12px var(--s3);
border-radius: 2px;
transition: border-color var(--d-quick) var(--ease-cut),
box-shadow var(--d-quick) var(--ease-cut);
}
.tw-poptavka .uk-textarea{
min-height: 160px;
padding-top: var(--s3);
line-height: 1.6;
}
.tw-poptavka .uk-input:focus,
.tw-poptavka .uk-select:focus,
.tw-poptavka .uk-textarea:focus{
box-shadow: inset 3px 0 0 0 var(--accent);
}
/* Soubor — nativní pole, jen usazené do rytmu ostatních. */
.tw-poptavka input[type="file"]{
display: block;
width: 100%;
font-family: var(--f-text);
font-size: var(--t-small);
color: var(--ink);
padding: var(--s3);
background: var(--surface-2);
border: 1px dashed var(--line);
border-radius: 2px;
}
/*
* Tlačítko výběru souboru je záměrně neutrální, ne okrové —
* na stránce smí být jen jedna hlavní akce a tou je odeslání.
* Barvy jsou vzaté tak, aby seděly ve světlém i tmavém režimu
* bez zvláštního pravidla pro každý z nich.
*/
.tw-poptavka input[type="file"]::file-selector-button{
font-family: var(--f-display);
font-weight: 600;
font-size: var(--t-small);
color: var(--ink);
background: var(--surface-3);
border: 1px solid var(--line);
border-radius: 2px;
padding: 8px 14px;
margin-right: var(--s3);
cursor: pointer;
}
.tw-poptavka input[type="file"]::file-selector-button:hover{
background: var(--surface);
border-color: var(--accent);
}
/* --- Souhlas -------------------------------------------------------- */
.tw-pole-souhlas{
margin-top: var(--s6);
padding: var(--s4);
background: var(--surface-2);
border-left: 3px solid var(--line);
}
.tw-pole-souhlas label{
display: flex;
gap: var(--s3);
align-items: flex-start;
font-size: var(--t-small);
line-height: 1.55;
color: var(--ink);
cursor: pointer;
}
.tw-pole-souhlas input[type="checkbox"]{
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 1px;
accent-color: var(--pole-znak);
}
.tw-pole-souhlas a{ color: var(--accent-ink); }
/* --- Chyby ----------------------------------------------------------
Chyba se nikdy nesděluje jen barvou. Vždycky je u ní věta.
-------------------------------------------------------------------- */
.tw-pole-hlaska{
margin: var(--s2) 0 0;
font-size: var(--t-small);
color: var(--crit);
}
.tw-pole-chyba .uk-form-label{ color: var(--crit); }
.tw-pole-chyba.tw-pole-souhlas{ border-left-color: var(--crit); }
.tw-poptavka-chyby{
margin-bottom: var(--s6);
padding: var(--s4) var(--s5);
background: var(--surface-2);
border-left: 3px solid var(--crit);
}
.tw-poptavka-chyby p{ margin: 0 0 var(--s2); }
.tw-poptavka-chyby ul{ margin: 0; padding-left: var(--s5); }
.tw-poptavka-chyby li{ margin-bottom: var(--s1); }
.tw-poptavka-chyby a{ color: var(--crit); }
/* --- Past na roboty --------------------------------------------------
Nikoli display:none — část robotů skryté pole podle toho pozná
a přeskočí ho. Odsunutí mimo plochu je nenápadnější.
-------------------------------------------------------------------- */
.tw-past{
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- Odeslání ------------------------------------------------------- */
.tw-poptavka-odeslat{ margin: var(--s6) 0 0; }
.tw-poptavka-odeslat .uk-button{
min-height: 52px;
padding: 0 var(--s6);
}
.tw-poptavka-odeslat .uk-button[disabled]{
opacity: .55;
cursor: not-allowed;
}
.tw-poptavka-pozn{
margin: var(--s3) 0 0;
font-size: var(--t-small);
color: var(--muted);
}
/* --- Tmavý pás ------------------------------------------------------- */
.tw-dark .tw-pole-souhlas,
.tw-dark .tw-poptavka-chyby{ background: rgba(255,255,255,.05); }
.tw-dark .tw-poptavka-perex,
.tw-dark .tw-pole-napoveda,
.tw-dark .tw-poptavka-pozn{ color: var(--tw-cream); }
/* --- Zarovnání řádků -------------------------------------------------
Nápovědy pod popisky mají různý počet řádků. Bez zásahu se dvě
políčka vedle sebe rozjedou o pár pixelů — a formulář vypadá
nedbale, i když je v pořádku.
Buňky řádku se natáhnou na stejnou výšku a ovládací prvek se
v každé z nich odsune ke spodní hraně. Zarovná se tak, ať má
nápověda jeden řádek nebo tři.
-------------------------------------------------------------------- */
.tw-poptavka .uk-grid > div{ display: flex; }
.tw-poptavka .uk-grid > div > .tw-pole{
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.tw-poptavka .uk-grid > div > .tw-pole .uk-input,
.tw-poptavka .uk-grid > div > .tw-pole .uk-select,
.tw-poptavka .uk-grid > div > .tw-pole .uk-textarea{
margin-top: auto;
}
/* --- Úzká obrazovka --------------------------------------------------- */
@media (max-width: 639px){
.tw-pole{ margin-bottom: var(--s4); }
.tw-poptavka-odeslat .uk-button{ width: 100%; }
}
/* ==========================================================================
31. VERTIKÁLNÍ LOGO V OBSAHU
Na kontaktu stojí logo se sloganem jako hlavička dopisu. Existuje
ve dvou souborech — plnobarevný a ten pro tmavý podklad s bílou
slovní značkou. Přepíná mezi nimi CSS podle motivu, ne JavaScript:
na webu bez skriptu se musí ukázat správná varianta hned.
Tři stavy stejně jako u tokenů: systémové nastavení bez volby,
výslovně světlá, výslovně tmavá.
========================================================================== */
.tw-logo-vert img{
width: 200px;
height: auto;
max-width: 100%;
}
.tw-logo-vert-tmave{ display: none; }
:root[data-theme="dark"] .tw-logo-vert-svetle{ display: none; }
:root[data-theme="dark"] .tw-logo-vert-tmave{ display: block; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tw-logo-vert-svetle{ display: none; }
:root:not([data-theme="light"]) .tw-logo-vert-tmave{ display: block; }
}
/* ==========================================================================
32. ZÁŘÍCÍ OKROVÉ TLAČÍTKO
Zeleň kolem zlaté. Fyzika toho efektu má jeden háček, který stojí
za vysvětlení: záře funguje tak, že je světlejší než podklad.
Firemní zeleň #385046 je tmavá — na krémové ploše se proto chová
spíš jako zelený stín než jako neon. Působivá je až na tmavém pásu.
Řeší se to dvěma způsoby: v tmavém režimu si záře bere šalvějový
odstín ze stejné rodiny (viz tokeny) a ve světlém jede na vyšší
krytí, aby zelený lem byl vidět a nebyl jen špinavý stín.
Dva stupně:
.uk-button-primary — jemná záře na najetí, platí všude
.tw-zar — plný neon včetně tepu, pro vybraná tlačítka
(v Tvůrci: Pokročilé → Třída CSS → tw-zar)
========================================================================== */
/*
* Tmavé pásy ve světlém režimu — hrdina, zelené sekce, zápatí.
* Motiv je pořád světlý, takže by se použila tmavá zeleň a na
* tmavém podkladu by nebyla vidět vůbec. Uvnitř tmavého kontextu
* proto přepínáme na šalvějovou, stejně jako v tmavém motivu.
*/
.tw-dark,
.tw-hero,
.uk-section-secondary,
.uk-light{
--zar: #87AB9C;
--zar-slabe: rgba(135, 171, 156, .45);
--zar-stredni:rgba(135, 171, 156, .75);
--zar-silne: rgba(135, 171, 156, 1);
}
/*
* position: relative ANO, z-index NE.
*
* Záře je pseudoprvek se zápornou vrstvou. Jakmile tlačítko dostane
* z-index (nebo isolation), stane se z něj vrstvicí kontext a záporná
* vrstva z něj nemůže ven — maluje se pak NAD okrovou plochu a tlačítko
* vypadá vybledle. Bez vlastního kontextu propadne pod pozadí tlačítka,
* což je přesně, kde má být.
*/
.uk-button-primary{
position: relative;
transition: background-color var(--d-quick) var(--ease-cut),
color var(--d-quick) var(--ease-cut),
box-shadow var(--d-base) var(--ease-cut),
transform var(--d-quick) var(--ease-lift);
}
.uk-button-primary:hover,
.uk-button-primary:focus-visible{
box-shadow:
0 0 6px var(--zar-stredni),
0 0 18px var(--zar-slabe),
0 6px 22px var(--zar-slabe);
}
/* --- Plný neon --------------------------------------------------------- */
/*
* Hlavní tlačítko hrdiny září vždycky. Je to jediná výzva na
* první obrazovce a stojí na tmavé fotce, kde záře opravdu svítí.
* Jinde se rozsvítí až na najetí — kdyby tepala všechna tlačítka
* naráz, přestala by být záře signálem.
*/
/* Žádné isolation — viz poznámka výš. Stačí, že prvek je relativní. */
.tw-zar,
.tw-hero .uk-button-primary:first-of-type{ position: relative; }
/*
* Rozmazaná kopie tlačítka pod tlačítkem. Tohle dělá bloom —
* samotný box-shadow zůstane vždycky jen obrysem.
*/
/*
* Bloom pod tlačítkem. Přesah je záměrně velký — kdyby seděl
* na hraně, schoval by se pod neprůhlednou okrovou plochou
* a ven by prosvítal jen kousek rozostření.
*/
.tw-zar::after,
.tw-hero .uk-button-primary:first-of-type::after{
content: "";
position: absolute;
inset: -12px;
z-index: -1;
border-radius: inherit;
background: var(--zar);
filter: blur(18px);
opacity: .6;
pointer-events: none;
}
/*
* Tep má dvě vrstvy: obrys (box-shadow na tlačítku) a plochu
* (tenhle bloom). Původně tepal jen obrys a na fotce hrdiny to
* nebylo poznat — obrys je pár pixelů, plocha je vidět.
*/
.tw-zar::after,
.tw-hero .uk-button-primary:first-of-type::after{
animation: tw-tep-zar 2.4s var(--ease-cut) infinite;
}
@keyframes tw-tep-zar{
0%, 100%{ opacity: .55; filter: blur(16px); transform: scale(1); }
50% { opacity: 1; filter: blur(30px); transform: scale(1.12); }
}
.tw-zar,
.tw-hero .uk-button-primary:first-of-type{
box-shadow:
0 0 4px var(--zar-slabe),
0 0 14px var(--zar-slabe);
animation: tw-tep 2.4s var(--ease-cut) infinite;
}
/*
* Tep se na najetí vypíná. Běžící animace přebíjí i deklaraci
* v :hover — bez tohohle by silnější záře pod kurzorem nikdy
* neprosvitla.
*/
.tw-zar:hover,
.tw-zar:focus-visible,
.tw-hero .uk-button-primary:first-of-type:hover,
.tw-hero .uk-button-primary:first-of-type:focus-visible{
animation: none;
transform: translateY(-1px);
box-shadow:
0 0 8px var(--zar-silne),
0 0 24px var(--zar-stredni),
0 0 52px var(--zar-slabe);
}
.tw-zar:hover::after,
.tw-zar:focus-visible::after,
.tw-hero .uk-button-primary:first-of-type:hover::after,
.tw-hero .uk-button-primary:first-of-type:focus-visible::after{
animation: none;
opacity: 1;
filter: blur(26px);
transform: scale(1.08);
transition: opacity var(--d-base) var(--ease-cut),
filter var(--d-base) var(--ease-cut);
}
.tw-zar:active,
.tw-hero .uk-button-primary:first-of-type:active{ transform: translateY(0) scale(.985); }
@keyframes tw-tep{
0%, 100%{ box-shadow: 0 0 6px var(--zar-slabe), 0 0 18px var(--zar-slabe); }
50% { box-shadow: 0 0 14px var(--zar-silne), 0 0 42px var(--zar-stredni); }
}
/* ==========================================================================
33. VYPÍNAČ MOTIVU
Slunce vlevo, měsíc vpravo, knoflík mezi nimi. Obě volby jsou
vidět naráz — na rozdíl od překlápěcí ikony, u které člověk nikdy
neví, jestli mu ukazuje současný stav, nebo to, co ho čeká.
Ikony leží NAD knoflíkem (v HTML jsou za ním), takže ta aktivní
sedí uvnitř kolečka a druhá zůstává potmě na dráze.
========================================================================== */
.tw-prepinac.tw-prepinac-vypinac{
padding: 4px;
border: 0;
background: transparent;
gap: 0;
}
@media (hover: hover){
.tw-prepinac.tw-prepinac-vypinac:hover{ border-color: transparent; }
}
.tw-vypinac{
position: relative;
display: inline-flex;
align-items: center;
width: 54px;
height: 28px;
border-radius: 999px;
border: 1px solid var(--sklo-hrana);
background: rgba(255, 255, 255, .30);
transition: background-color var(--d-quick) var(--ease-cut),
border-color var(--d-quick) var(--ease-cut);
}
@media (hover: hover){
.tw-prepinac-vypinac:hover .tw-vypinac{ background: rgba(255, 255, 255, .52); }
}
.tw-vypinac-knoflik{
position: absolute;
/*
* Knoflík je POD ikonami, ne nad nimi.
*
* Předtím ležel navrchu a přikryl přesně tu ikonu, na které stál —
* ve světlém motivu tedy zakryl sluníčko a na vypínači svítil jen
* potemnělý měsíček. Četlo se to obráceně, než jak to je.
* Teď knoflík obarvenou ikonu podloží: kolečko na sluníčku =
* světlý motiv, kolečko na měsíčku = tmavý.
*/
z-index: 0;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 1px 4px rgba(30, 43, 38, .28);
transition: transform var(--d-base) var(--ease-lift),
background-color var(--d-quick) var(--ease-cut);
}
[aria-pressed="true"] .tw-vypinac-knoflik{ transform: translateX(26px); }
.tw-prepinac-vypinac:active .tw-vypinac-knoflik{ width: 26px; }
.tw-vypinac-ikona{
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 26px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--d-quick) var(--ease-cut),
opacity var(--d-quick) var(--ease-cut);
}
.tw-vypinac-ikona svg{ display: block; }
.tw-vypinac-slunce{ left: 1px; }
.tw-vypinac-mesic{ right: 1px; }
/*
* Světlý motiv: knoflík vlevo, sluníčko na něm.
*
* Aktivní ikona sedí na knoflíku (--surface), proto bere --accent-ink:
* ve světlém 8A6427 na FCFBF8 = 5,2:1, v tmavém E2B478 na 121A16.
* Nečinná ikona leží na průsvitné dráze a smí být potlačená.
*/
.tw-vypinac-slunce{ color: var(--accent-ink); opacity: 1; }
.tw-vypinac-mesic{ color: var(--muted); opacity: .55; }
/* Tmavý motiv: knoflík vpravo, měsíček na něm. */
[aria-pressed="true"] .tw-vypinac-slunce{ color: var(--muted); opacity: .55; }
[aria-pressed="true"] .tw-vypinac-mesic{ color: var(--accent-ink); opacity: 1; }
:root[data-theme="dark"] .tw-vypinac{ background: rgba(255, 255, 255, .10); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tw-vypinac{ background: rgba(255, 255, 255, .10); }
}
.tw-prepinac-vypinac:focus-visible{ outline: none; }
.tw-prepinac-vypinac:focus-visible .tw-vypinac{
outline: 2px solid var(--accent-ink);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
.tw-vypinac,
.tw-vypinac-knoflik,
.tw-vypinac-ikona{ transition: none; }
}
/*
* Bez pohybu žádný tep a žádné nadskočení. Záře zůstává — je to
* barva, ne animace, a nikoho neruší.
*/
@media (prefers-reduced-motion: reduce){
.uk-button-primary,
.tw-zar,
.tw-zar::after,
.tw-hero .uk-button-primary:first-of-type,
.tw-hero .uk-button-primary:first-of-type::after{ transition: none; animation: none; }
.tw-zar:hover,
.tw-zar:focus-visible,
.tw-hero .uk-button-primary:first-of-type:hover,
.tw-hero .uk-button-primary:first-of-type:focus-visible{ transform: none; }
}
/* ==========================================================================
34. NÁSTUP VELKÉHO NADPISU
Slova vyjíždějí zpod maskovací hrany, každé o kousek později.
Skript nadpis rozseká na slova a obalí je maskou; kdyby neběžel,
zůstane obyčejný nadpis a nic se neskryje.
Animace, ne přechod, a to schválně.
Přechod potřebuje, aby mu někdo přepnul stav — a kdyby ten
přepínač nedorazil (vypnutý JavaScript, zamrzlý rAF, chyba
ve skriptu), zůstal by nadpis navždy pod maskou. Animace
s fill-mode both doběhne sama, hned po načtení. Nejhorší možný
konec je „nadpis naskočí bez efektu", ne „nadpis tam není".
Maska má svislé odsazení a stejně velké záporné okraje. Bez toho
by ořízla háčky a čárky nahoře a dotažnice dole — u českého
nadpisu s line-height pod jedničkou je to jistota, ne opatrnost.
========================================================================== */
:root{
/*
* Skok po písmenech. Vlna proběhne třikrát a zastaví se —
* hlavní nadpis je nejčtenější prvek stránky a nepřetržitý
* pohyb by z něj dělal blikající ceduli.
*/
--skok-cas: 780ms;
--skok-krok: 38ms; /* posun vlny mezi sousedními písmeny */
--skok-vyska: .22em; /* v em, aby seděl na velikost nadpisu */
--skok-opakovani: 3;
}
.tw-nadpis-clip .tw-mask{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
/*
* Nahoře je místa víc, než potřebuje nájezd.
*
* Maska ořezává, aby slovo mohlo vyjet zespodu. Jenže po nájezdu
* do stejné masky skáče vlna — a bez rezervy nahoře by si písmena
* usekla temena. Vnitřní odsazení se ruší stejně velkým záporným
* okrajem, takže se vnější rozměr nadpisu nemění.
*/
padding: .42em .05em .12em;
margin: -.42em -.05em -.12em;
}
.tw-nadpis-clip .tw-slovo{
display: inline-block;
animation: tw-slovo-vzhuru var(--d-story) var(--ease-cut) both;
animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes tw-slovo-vzhuru{
from{ transform: translateY(112%); }
to { transform: translateY(0); }
}
/* --- Vlna po písmenech, až nájezd dojede -------------------------------- */
.tw-nadpis-clip .tw-pismeno{ display: inline-block; }
/*
* Kdy vlna začne: až poslední slovo dosedne. Nájezd trvá --d-story
* a každé další slovo startuje o 90 ms později, takže konec je
* --d-story + (počet slov − 1) × 90 ms. Pak ještě malá pauza,
* ať se obojí neslije do jednoho pohybu.
*
* Skok je na jiném prvku než nájezd (písmeno uvnitř slova), takže
* se obě transformace nepřebíjejí, ale skládají.
*/
.tw-js .tw-nadpis-clip .tw-pismeno{
animation: tw-pismeno-skok var(--skok-cas) var(--ease-lift) var(--skok-opakovani) both;
animation-delay: calc(
var(--d-story) + (var(--slov, 1) - 1) * 90ms + 140ms
+ var(--j, 0) * var(--skok-krok)
);
}
/*
* Vyskočit, dosednout, drobně se dorazit, zbytek cyklu stát.
* Ta pauza na konci je to, co ze tří opakování dělá tři skoky
* místo jednoho roztřeseného pohybu.
*/
@keyframes tw-pismeno-skok{
0% { transform: translateY(0); }
18% { transform: translateY(calc(var(--skok-vyska) * -1)); }
36% { transform: translateY(0); }
44% { transform: translateY(calc(var(--skok-vyska) * -.26)); }
52%, 100%{ transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.tw-nadpis-clip .tw-slovo{ animation: none; }
.tw-js .tw-nadpis-clip .tw-pismeno{ animation: none; }
}
/* ==========================================================================
35. HAMBURGER A MENU NA TELEFONU
Panel jede přes celou plochu, ne jako úzká zásuvka. Na telefonu
je menu jediná věc, kterou v tu chvíli člověk dělá — půlka
obrazovky s prosvítajícím obsahem za ní ho jen rozptyluje.
Otevírá se dvěma cestami. Se skriptem třídou na , bez něj
přes :target — hamburger je totiž skutečný odkaz na kotvu, ne
tlačítko. Selektory jsou proto vždycky dvojí.
========================================================================== */
/* --- Hamburger ----------------------------------------------------------- */
/*
* Pravá strana mobilní lišty. Vlastní kontejner, protože šablona
* na telefonu žádný nevykresluje — je v něm jen logo vlevo.
* Zarovnání na svislý střed musí být tady: samotný odkaz uvnitř
* navbaru by se přisál k horní hraně.
*/
.tm-header-mobile .uk-navbar-container{ z-index: 2; }
.tm-header-mobile .uk-navbar-right{
display: flex;
align-items: center;
gap: var(--s1);
margin-left: auto;
}
.tw-hamburger{
display: flex;
align-items: center;
justify-content: center;
align-self: center;
/* 44 px je nejmenší cíl, který se dá spolehlivě trefit palcem. */
width: 44px;
height: 44px;
color: var(--ink-2);
}
.tw-hamburger:hover,
.tw-hamburger:focus-visible{ color: var(--ink); }
.tw-hamburger-znak{
position: relative;
display: block;
width: 22px;
height: 14px;
}
.tw-hamburger-znak span{
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform var(--d-quick) var(--ease-cut),
opacity var(--d-instant) var(--ease-cut);
}
.tw-hamburger-znak span:nth-child(1){ top: 0; }
.tw-hamburger-znak span:nth-child(2){ top: 6px; }
.tw-hamburger-znak span:nth-child(3){ top: 12px; }
/* Otevřený stav: z hamburgeru se stane křížek. */
.tw-menu-otevreno .tw-hamburger-znak span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.tw-menu-otevreno .tw-hamburger-znak span:nth-child(2){ opacity: 0; }
.tw-menu-otevreno .tw-hamburger-znak span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
/* --- Panel --------------------------------------------------------------- */
.tw-mobil-menu{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*
* Panel je potomek hlavičky, takže se řadí uvnitř jejího
* vrstvení. Lišta musí zůstat nad ním — jinak zmizí i křížek,
* kterým se panel zavírá, a člověk uvízne.
*/
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--hlavicka-vyska) + var(--s8)) var(--s5) var(--s8);
background: var(--sklo-plocha-pevne);
opacity: 0;
visibility: hidden;
/*
* Prolíná se jen krytí. Viditelnost se přepíná skokem a schválně
* není v transition.
*
* Přechody běží jen tehdy, když prohlížeč stránku vykresluje.
* Kdyby na jednom z nich viselo, jestli je panel vidět, stačilo
* by, aby se vykreslování na chvíli zastavilo, a menu by se
* neotevřelo. Viditelnost proto zapíná třída přímo, bez
* prostředníka.
*/
transition: opacity var(--d-base) var(--ease-cut);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.tw-mobil-menu{
-webkit-backdrop-filter: blur(var(--sklo-rozmaz)) saturate(170%) brightness(var(--sklo-jas));
backdrop-filter: blur(var(--sklo-rozmaz)) saturate(170%) brightness(var(--sklo-jas));
}
}
.tw-menu-otevreno .tw-mobil-menu,
.tw-mobil-menu:target{
opacity: 1;
visibility: visible;
}
/* --- Položky ------------------------------------------------------------- */
.tw-mobil-seznam{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.tw-mobil-seznam li{
margin: 0 0 var(--s2);
opacity: 0;
transform: translateY(12px);
transition: opacity var(--d-base) var(--ease-cut),
transform var(--d-base) var(--ease-cut);
}
/* Položky naskakují po jedné, ať je vidět, že panel přijel. */
.tw-menu-otevreno .tw-mobil-seznam li,
.tw-mobil-menu:target .tw-mobil-seznam li{
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 45ms + 60ms);
}
.tw-mobil-seznam a{
display: block;
padding: var(--s3) var(--s5);
font-family: var(--f-display);
font-weight: 600;
font-size: var(--t-d2);
line-height: 1.2;
color: var(--ink);
text-decoration: none;
border-radius: 999px;
}
.tw-mobil-seznam a:hover,
.tw-mobil-seznam a:focus-visible{ background: rgba(255, 255, 255, .55); }
.tw-mobil-seznam a.tw-aktivni{ color: var(--accent-ink); }
:root[data-theme="dark"] .tw-mobil-seznam a:hover,
:root[data-theme="dark"] .tw-mobil-seznam a:focus-visible{ background: rgba(255, 255, 255, .10); }
/* --- Zámek posunu -------------------------------------------------------- */
/*
* Když je menu přes celou plochu, nemá se pod ním rolovat obsah.
* Zamyká se , ne — na iOS se jinak stránka pod
* překryvem stejně hýbe.
*/
.tw-menu-otevreno{ overflow: hidden; }
/* --- Jen na telefonu ------------------------------------------------------ */
/*
* Nad hranicí mobilní hlavičky panel neexistuje. Kdyby zůstal
* otevřený a někdo okno zvětšil, překryl by celý web.
*/
@media (min-width: 960px){
.tw-mobil-menu{ display: none; }
.tw-hamburger{ display: none; }
}
@media (prefers-reduced-motion: reduce){
.tw-hamburger-znak span,
.tw-mobil-menu,
.tw-mobil-seznam li{ transition: none; }
}
/* ==========================================================================
36. DLAŽDICE SVĚTŮ — SKLENĚNÝ PRSTENEC A ZÁŘE
Po obvodu dlaždice jde tenký skleněný prstenec. Při najetí se
rozsvítí přechodem, který sleduje kurzor: zlatá v místě myši,
šalvěj kolem, jinde nic.
Dvě rozhodnutí, která stojí za vysvětlení:
1) Prstenec sedí UVNITŘ zelené hrany, ne přes ni. Hrana je nosný
prvek značky a nová ozdoba ji nemá přebít. Absolutní inset: 0
se počítá od vnitřní hrany rámečku, takže levá zelená linka
zůstane celá.
2) Kurzor jen upřesňuje, kde přechod začíná. Bez JavaScriptu má
--mx/--my výchozí hodnotu a prstenec se rozsvítí od horního
středu. Efekt tedy funguje i bez skriptu, jen nesleduje myš.
========================================================================== */
.tw-svet::before{
content: "";
position: absolute;
inset: 0;
z-index: 3; /* nad závojem i obsahem — je to jen obrys */
padding: 2px; /* tloušťka prstence */
border-radius: inherit;
pointer-events: none;
/*
* Dva přechody přes sebe: úzký a sytý přesně pod kurzorem,
* široký a tlumený kolem. Jeden samotný přechod vypadal buď
* jako bodová tečka, nebo jako rovnoměrný proužek.
*/
background:
radial-gradient(120px circle at var(--mx, 50%) var(--my, 0%),
var(--karta-zar-1) 0%,
transparent 70%),
radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
var(--karta-zar-2) 0%,
transparent 75%),
linear-gradient(var(--karta-hrana), var(--karta-hrana));
/*
* Dvě masky se od sebe odečtou: zůstane jen rámeček o šířce
* padding. Jinak by přechod přetekl přes celou dlaždici.
*/
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--d-base) var(--ease-cut);
}
/* Klidový stav: sotva znatelná skleněná linka po obvodu. */
.tw-svet{
box-shadow: inset 0 0 0 1px var(--karta-hrana);
transition: background var(--d-base) var(--ease-cut),
transform var(--d-quick) var(--ease-cut),
box-shadow var(--d-base) var(--ease-cut);
}
@media (hover: hover){
.tw-svet:hover::before,
.tw-svet:focus-visible::before{ opacity: 1; }
.tw-svet:hover,
.tw-svet:focus-visible{
transform: translateY(-4px);
box-shadow:
inset 0 0 0 1px var(--karta-hrana),
0 22px 48px -18px var(--karta-stin),
0 0 44px -8px var(--karta-zar-2);
/*
* Dlaždice je odkaz, takže jí prohlížeč při najetí podtrhne
* všechen text uvnitř — nadpis, odrážky i výzvu naráz.
* Vypadá to jako chyba sazby, ne jako aktivní stav.
*/
text-decoration: none;
}
}
/*
* Na dotykových zařízeních není kurzor, který by prstenec vedl.
* Rozsvítí se tedy natrvalo a slabě — dlaždice tak nevypadá
* proti verzi na počítači osiřele.
*/
@media (hover: none){
.tw-svet::before{ opacity: .45; }
}
@media (prefers-reduced-motion: reduce){
.tw-svet,
.tw-svet::before{ transition: none; }
.tw-svet:hover,
.tw-svet:focus-visible{ transform: none; }
}
/* ==========================================================================
37. PÁS DEKORŮ JAKO SLIDER
Posuv řeší slider zabudovaný v UIkitu, ne vlastní knihovna.
Tady jen dorovnáváme rozměry dlaždic a zajišťujeme, aby pás
zůstal použitelný i tehdy, když se skript nespustí.
========================================================================== */
/*
* Bez JavaScriptu se UIkit neinicializuje a ze seznamu by byl
* nepohyblivý pruh useknutý na šířce stránky. Necháme ho tedy
* odrolovatelný. Jakmile skript naběhne (třída tw-js na ),
* převezme řízení UIkit a vlastní přetečení se vypne.
*/
.tw-pas-slider{ overflow-x: auto; }
.tw-js .tw-pas-slider{ overflow: hidden; }
.tw-pas-items{
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0;
}
.tw-pas-item{
flex: 0 0 auto;
width: 168px;
padding-right: var(--s3);
}
/* Dlaždice uvnitř slideru už šířku neurčuje, tu drží položka. */
.tw-pas-item .tw-dekor{
flex: none;
width: 100%;
display: block;
}
/*
* Posuv se zastaví i při zaměření klávesnicí, ne jen myší.
* Kdo se pásem prochází tabulátorem, nesmí mu dlaždice ujet
* pod prstem — pause-on-hover pokrývá jen kurzor.
*/
.tw-pas-slider:focus-within{ --tw-posuv-stop: 1; }
@media (max-width: 639px){
.tw-pas-item{ width: 140px; }
}
/* ==========================================================================
38. REFERENCE — SKLENĚNÉ KARTY VE SLIDERU
Karta je matné sklo: průsvitná plocha, rozostřený podklad, tenká
světlá hrana nahoře a měkký stín pod ní. Aby vypadala jako sklo
i tam, kde za ní není fotka, nese vlastní přechod — samotná
průhlednost by na jednolité ploše nebyla poznat.
========================================================================== */
:root{
--ref-sklo: rgba(255, 255, 255, .55);
--ref-sklo-2: rgba(255, 255, 255, .22);
--ref-hrana: rgba(255, 255, 255, .70);
--ref-stin: 0 18px 40px -20px rgba(30, 43, 38, .35);
--ref-uvozovka: rgba(188, 142, 73, .30);
}
:root[data-theme="dark"]{
--ref-sklo: rgba(255, 255, 255, .07);
--ref-sklo-2: rgba(255, 255, 255, .02);
--ref-hrana: rgba(255, 255, 255, .14);
--ref-stin: 0 18px 40px -20px rgba(0, 0, 0, .6);
--ref-uvozovka: rgba(220, 172, 107, .28);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ref-sklo: rgba(255, 255, 255, .07);
--ref-sklo-2: rgba(255, 255, 255, .02);
--ref-hrana: rgba(255, 255, 255, .14);
--ref-stin: 0 18px 40px -20px rgba(0, 0, 0, .6);
--ref-uvozovka: rgba(220, 172, 107, .28);
}
}
/* Na tmavém pásu jede sklo v tmavé sadě bez ohledu na motiv. */
.tw-dark,
.uk-section-secondary{
--ref-sklo: rgba(255, 255, 255, .09);
--ref-sklo-2: rgba(255, 255, 255, .03);
--ref-hrana: rgba(255, 255, 255, .18);
--ref-uvozovka: rgba(220, 172, 107, .32);
}
/* --- Slider -------------------------------------------------------------- */
.tw-ref-slider{ position: relative; }
/* Bez JavaScriptu zůstane pás odrolovatelný, viz oddíl 37. */
.tw-js .tw-ref-slider{ overflow: hidden; }
.tw-ref-slider{ overflow-x: auto; }
.tw-ref-items{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.tw-ref-items > li{
padding-right: var(--s5);
display: flex; /* karty v řadě mají stejnou výšku */
}
/* --- Karta --------------------------------------------------------------- */
.tw-ref-karta{
position: relative;
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: var(--s7) var(--s5) var(--s5);
background-image:
linear-gradient(150deg, var(--ref-sklo) 0%, var(--ref-sklo-2) 100%);
border: 1px solid var(--ref-hrana);
border-radius: var(--r-panel-roh) var(--r-panel) var(--r-panel) var(--r-panel);
box-shadow: var(--ref-stin);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.tw-ref-karta{
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
}
}
/*
* Uvozovka je ozdoba, ne text — proto pseudoprvek. Ve značce by
* se jinak četla odečítačem obrazovky jako součást citace.
*/
.tw-ref-karta::before{
content: "„";
position: absolute;
top: -6px;
left: var(--s4);
font-family: var(--f-display);
font-weight: 700;
font-size: 84px;
line-height: 1;
color: var(--ref-uvozovka);
pointer-events: none;
}
.tw-ref-karta blockquote{
margin: 0 0 var(--s5);
padding: 0;
border: 0;
flex: 1;
font-family: var(--f-text);
font-size: var(--t-body);
line-height: 1.6;
color: var(--ink);
}
.tw-dark .tw-ref-karta blockquote,
.uk-section-secondary .tw-ref-karta blockquote{ color: var(--tw-cream); }
/* --- Medailonek ---------------------------------------------------------- */
.tw-ref-kdo{
display: flex;
align-items: center;
gap: var(--s3);
padding-top: var(--s4);
border-top: 1px solid var(--ref-hrana);
}
.tw-ref-avatar{
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--ref-hrana);
}
/*
* Monogram místo fotky. Není to náhražka „než se doplní obrázek" —
* je to plnohodnotná varianta pro reference, u kterých fotku
* nemáme a vymýšlet si ji nebudeme.
*/
.tw-ref-monogram{
display: flex;
align-items: center;
justify-content: center;
background: var(--core-soft);
color: var(--tw-cream);
font-family: var(--f-display);
font-weight: 600;
font-size: 15px;
letter-spacing: .04em;
}
.tw-ref-popis{ display: block; min-width: 0; }
.tw-ref-popis b{
display: block;
font-family: var(--f-display);
font-weight: 600;
font-size: var(--t-small);
color: var(--ink);
}
.tw-ref-popis span{
display: block;
margin-top: 2px;
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.tw-dark .tw-ref-popis b,
.uk-section-secondary .tw-ref-popis b{ color: #fff; }
.tw-dark .tw-ref-popis span,
.uk-section-secondary .tw-ref-popis span{ color: rgba(238, 226, 208, .7); }
/* --- Šipky ---------------------------------------------------------------
Dřív seděly absolutně po stranách pásu, kreslila je ikona UIkitu
a zasahovaly do karet. Teď leží v řádku pod pásem a vypadají jako
tlačítka stránkování u novinek — stejný tvar, stejná linka, stejná
velikost. Jedno gesto pro „posuň se dál“ na celém webu.
------------------------------------------------------------------------ */
.tw-ref-nav{
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: var(--s5);
}
.tw-ref-sipka{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: var(--novinky-zaobleni, 14px);
background: transparent;
color: var(--ink-2);
transition: border-color var(--d-quick) var(--ease-cut),
color var(--d-quick) var(--ease-cut);
}
.tw-ref-sipka:hover,
.tw-ref-sipka:focus-visible{
border-color: var(--accent);
color: var(--accent-ink);
}
.tw-ref-sipka svg{ display: block; }
.tw-dark .tw-ref-sipka,
.uk-section-secondary .tw-ref-sipka{
border-color: rgba(238, 226, 208, .24);
color: rgba(238, 226, 208, .82);
}
.tw-dark .tw-ref-sipka:hover,
.uk-section-secondary .tw-ref-sipka:hover{
border-color: var(--tw-ochre);
color: var(--tw-ochre);
}
@media (max-width: 639px){
.tw-ref-karta{ padding: var(--s6) var(--s4) var(--s4); }
.tw-ref-karta::before{ font-size: 64px; }
.tw-ref-items > li{ padding-right: var(--s3); }
}
/* ==========================================================================
39. VZORNÍK S ŘADAMI
Podnavigace řad a mřížka dlaždic. Přepínání dělá uk-filter
z UIkitu — tady je jen vzhled.
========================================================================== */
.tw-vzornik-navigace{
margin: 0 0 var(--s6);
border-bottom: 1px solid var(--line);
}
.tw-vzornik-navigace ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--s5);
}
.tw-vzornik-navigace a{
display: inline-flex;
align-items: baseline;
gap: var(--s2);
padding: 0 0 var(--s3);
font-family: var(--f-mono);
font-size: var(--t-small);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* linka sedne na hranu navigace */
transition: color var(--d-quick) var(--ease-cut),
border-color var(--d-quick) var(--ease-cut);
}
.tw-vzornik-navigace a:hover{ color: var(--ink); }
/*
* Vybraná řada nese okrovou hranu — stejné gesto jako aktivní
* položka v hlavním menu mívala. Barvou se tu nic nesděluje,
* mění se i sytost textu.
*/
.tw-vzornik-navigace .uk-active a{
color: var(--ink);
border-bottom-color: var(--accent);
}
.tw-vzornik-pocet{
font-size: var(--t-mono);
color: var(--muted);
letter-spacing: 0;
}
.tw-vzornik-navigace .uk-active .tw-vzornik-pocet{ color: var(--accent-ink); }
/* --- Mřížka -------------------------------------------------------------- */
.tw-vzornik-mrizka{ list-style: none; }
.tw-vzornik-dlazdice{
display: block;
text-decoration: none;
color: inherit;
}
.tw-vzornik-vzorek{
display: block;
aspect-ratio: 1;
background: var(--surface-3);
background-size: cover;
background-position: center;
border: 1px solid var(--line-soft);
border-radius: var(--r-panel-roh) var(--r-panel) var(--r-panel) var(--r-panel);
transition: transform var(--d-quick) var(--ease-cut),
border-color var(--d-quick) var(--ease-cut);
}
@media (hover: hover){
.tw-vzornik-dlazdice:hover .tw-vzornik-vzorek{
transform: scale(1.03);
border-color: var(--accent);
}
}
@media (prefers-reduced-motion: reduce){
.tw-vzornik-vzorek{ transition: none; }
.tw-vzornik-dlazdice:hover .tw-vzornik-vzorek{ transform: none; }
}
/*
* Popis dlaždice: vlevo název a pod ním cena, vpravo značka
* výrobce. Značka stojí na vlastní straně, aby se dala dlaždice
* přečíst jedním pohledem — název a cena patří k sobě, výrobce
* je druhá informace.
*/
.tw-vzornik-popis{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
margin-top: var(--s3);
}
.tw-vzornik-text{ min-width: 0; }
.tw-vzornik-popis b{
display: block;
font-family: var(--f-display);
font-weight: 600;
font-size: 14px;
line-height: 1.3;
color: var(--ink);
}
.tw-vzornik-cena{
display: block;
margin-top: 3px;
font-family: var(--f-mono);
font-size: var(--t-mono);
letter-spacing: .04em;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/*
* Značka v dlaždici je o třetinu větší než v běžném textu —
* na vzorníku je to údaj, podle kterého se vybírá, ne poznámka
* pod čarou. Zarovnaná doprava a svisle na střed dvojřádku.
*/
.tw-vzornik-znacka{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.tw-vzornik-znacka .tw-znacka-fundermax{ width: 88px; height: 17px; }
.tw-vzornik-znacka .tw-znacka-heritage { width: 57px; height: 35px; }
.tw-vzornik-znacka .tw-znacka-polyrey { width: 83px; height: 20px; }
@media (max-width: 639px){
.tw-vzornik-znacka .tw-znacka-fundermax{ width: 70px; height: 14px; }
.tw-vzornik-znacka .tw-znacka-heritage { width: 46px; height: 28px; }
.tw-vzornik-znacka .tw-znacka-polyrey { width: 66px; height: 16px; }
}
.tw-vzornik-pozn{
margin: var(--s6) 0 0;
font-size: var(--t-small);
color: var(--muted);
max-width: 62ch;
}
@media (max-width: 639px){
.tw-vzornik-navigace ul{ gap: var(--s4); }
.tw-vzornik-navigace a{ font-size: var(--t-mono); }
}
/* ==========================================================================
40. OSA PROCESU — ZNAČKY A PRŮBĚH
Dvě věci naráz, jak bylo zadáno:
a) Průběh při skrolování. Kroky najíždějí po jednom (to už uměl
nájezd přes data-tw-reveal) a mezi nimi se dokresluje dráha,
kterou řídí poloha skrolu — ne časovač. Dokud jste nedoskrolovali,
dráha se nedokreslí.
b) Tichá nepřetržitá smyčka uvnitř značek. Hýbe se vždy jen jedna
část značky, pomalu a v malém rozsahu. Text ani rozvržení se
nehýbou — to by se na dlouhé stránce nedalo číst.
Bez JavaScriptu je dráha vykreslená celá (--postup má výchozí 1)
a všechny kroky jsou plnobarevné. Nic se neschovává.
========================================================================== */
:root{
/* Průběh dráhy. JavaScript hodnotu snižuje, výchozí stav je hotovo. */
--postup: 1;
/* Časy smyček. Záměrně dlouhé — smyčka má být na okraji vnímání. */
--smycka-let: 2600ms;
--smycka-posun: 4200ms;
--smycka-kyv: 3400ms;
--smycka-vreteno: 3800ms;
--smycka-osazeni: 3200ms;
--smycka-klid: 3000ms;
/*
* Číslo kroku a značka. Číslo jde nadpisovým písmem (Zalando Sans
* Expanded), ne monospacem — v ose je to nadpis, ne údaj.
*/
--krok-cislo: clamp(26px, 2.4vw, 36px);
--krok-cislo-uzky: 30px;
--krok-znak: 88px;
--krok-znak-uzky: 76px;
/*
* Síla tahu ve značce. Je ve vnitřních jednotkách plátna 48 × 48,
* takže se zvětšuje spolu se značkou: při 88 px vyjde na obrazovce
* asi 2,4 px. Šablona má v atributu hodnotu 2 jako záchranu pro
* případ, že by se CSS nenačetlo — tady se přebíjí.
*/
--krok-tah: 1.3;
/* Rozsahy pohybu ve vnitřních jednotkách značky (plátno 48 × 48). */
--posun-let: 6px;
--posun-mereni: 22px;
--posun-vreteno: 10px;
--posun-osazeni: 5px;
}
/* --- Dráha průběhu ------------------------------------------------------ */
.tw-osa-obal{ position: relative; }
/*
* Číslo kroku. Základní pravidlo výš ho sází drobným monospacem;
* v ose má být čitelné přes celou šířku sloupce, takže se přebírá
* nadpisové písmo a velikost roste s plochou.
*
* Horní odsazení kroku se musí zvětšit spolu s číslem — číslo leží
* mimo tok (position: absolute) a jinak by se do něj zezdola opřela
* značka. Proto je spočítané, ne odhadnuté: linka + vnitřní mezera
* + výška číslice + odstup.
*/
.tw-osa-obal .tw-krok{
padding-top: calc(3px + var(--s3) + var(--krok-cislo) + var(--s2));
}
.tw-osa-obal .tw-krok::before{
font-family: var(--f-display);
font-weight: 600;
font-size: var(--krok-cislo);
line-height: 1;
letter-spacing: .01em;
text-transform: none;
/*
* Bez tabular-nums, i když by se u číselné řady nabízely.
*
* Zalando Sans Expanded má v tabulkové sadě přeškrtnutou nulu
* a jedničku s patkou — ověřeno vedle sebe v prohlížeči. Ve
* velkém displejovém provedení pak „01“ čte jako „Ø1“. Stejně
* široké číslice tu k ničemu nejsou, pod sebou se nic nesrovnává.
*/
font-variant-numeric: normal;
}
/*
* Na úzké obrazovce jsou kroky pod sebou a každý má vlastní linku
* nahoře. Vodorovná dráha by tam neměla kudy vést, takže se kreslí
* až od místa, kde se osa rozpadá do pěti sloupců.
*/
.tw-osa-drah{ display: none; }
@media (min-width: 960px){
.tw-osa-drah{
display: block;
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--line);
/*
* Nad , protože každý krok má vlastní border-top ve stejné
* výšce. Bez tohohle by šedá linka kroků překryla okrový průběh.
*/
z-index: 1;
}
.tw-osa-postup{
display: block;
height: 3px;
margin-top: -1px;
background: var(--accent);
transform: scaleX(var(--postup));
transform-origin: left center;
}
}
/*
* Krok, ke kterému dráha došla. Přechod je jen dobarvení — dokud
* se nerozsvítí, je číslo v --muted, což je pořád 4,7:1, tedy AA.
* Pojistka v JavaScriptu navíc po čtyřech vteřinách rozsvítí všechno.
*/
.tw-js .tw-osa-obal .tw-krok::before{
border-top-color: var(--line);
color: var(--muted);
transition: border-top-color var(--d-base) var(--ease-cut),
color var(--d-base) var(--ease-cut);
}
.tw-js .tw-osa-obal .tw-krok.tw-dosazeno::before{
border-top-color: var(--accent);
color: var(--accent-ink);
}
/* --- Značka kroku ------------------------------------------------------- */
.tw-krok-znak{
display: block;
width: var(--krok-znak); height: var(--krok-znak);
margin-top: var(--s4);
color: var(--accent-ink);
}
.tw-krok-znak svg{ display: block; width: 100%; height: 100%; stroke-width: var(--krok-tah); }
.tw-js .tw-osa-obal .tw-krok-znak{
color: var(--muted);
transition: color var(--d-base) var(--ease-cut);
}
.tw-js .tw-osa-obal .tw-krok.tw-dosazeno .tw-krok-znak{ color: var(--accent-ink); }
/* Značka nahrazuje horní mezeru nadpisu, jinak by mezi nimi byla díra. */
.tw-krok-znak + h4{ margin-top: var(--s4); }
/* --- Vykreslení tahem při odhalení -------------------------------------- */
/*
* Každý tah nese pathLength="100", takže se všechny dokreslí za
* stejnou dobu bez ohledu na skutečnou délku.
*/
.tw-js .tw-krok-znak path,
.tw-js .tw-krok-znak rect,
.tw-js .tw-krok-znak circle{
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.tw-js .tw-krok.tw-videt .tw-krok-znak path,
.tw-js .tw-krok.tw-videt .tw-krok-znak rect,
.tw-js .tw-krok.tw-videt .tw-krok-znak circle{
animation: tw-kresli-100 var(--d-slow) var(--ease-cut) both;
}
.tw-js .tw-krok.tw-videt .tw-krok-znak svg > :nth-child(2){ animation-delay: 70ms; }
.tw-js .tw-krok.tw-videt .tw-krok-znak svg > :nth-child(3){ animation-delay: 140ms; }
.tw-js .tw-krok.tw-videt .tw-krok-znak svg > :nth-child(4){ animation-delay: 210ms; }
/* Pohyblivá část se dokresluje jako poslední — pak teprve začne jezdit. */
.tw-js .tw-krok.tw-videt .tw-krok-znak .tw-i-hyb > *{ animation-delay: 280ms; }
@keyframes tw-kresli-100{
from{ stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
/* --- Smyčky uvnitř značek ----------------------------------------------- */
/*
* Smyčka běží jen u kroku, který je vidět. Mimo plochu zobrazení
* se pozastaví, ať nedrží procesor kvůli něčemu, co nikdo nevidí.
*
* Transformace se počítají v souřadnicích plátna značky, ne v pixelech
* stránky — proto transform-box: view-box.
*/
.tw-js .tw-krok-znak .tw-i-hyb{
transform-box: view-box;
transform-origin: center;
animation-play-state: paused;
}
.tw-js .tw-krok.tw-videt .tw-krok-znak .tw-i-hyb{ animation-play-state: running; }
/* Šipka vyletí z obálky a zmizí. */
.tw-js .tw-krok-znak .tw-i-let{
animation: tw-i-let var(--smycka-let) var(--ease-cut) infinite;
}
@keyframes tw-i-let{
0% { transform: translateX(calc(var(--posun-let) * -1)); opacity: 0; }
22% { opacity: 1; }
68% { opacity: 1; }
100% { transform: translateX(var(--posun-let)); opacity: 0; }
}
/* Měřicí linka přejede desku a vrátí se. */
.tw-js .tw-krok-znak .tw-i-posun{
animation: tw-i-posun var(--smycka-posun) var(--ease-press) infinite;
}
@keyframes tw-i-posun{
0%, 8% { transform: translateX(0); }
50% { transform: translateX(var(--posun-mereni)); }
92%, 100% { transform: translateX(0); }
}
/* Cenovka se houpe kolem svého oka. Souřadnice jsou z kresby značky. */
.tw-js .tw-krok-znak .tw-i-kyv{
transform-origin: 40.3px 25.7px;
animation: tw-i-kyv var(--smycka-kyv) ease-in-out infinite;
}
@keyframes tw-i-kyv{
0%, 100% { transform: rotate(-3.5deg); }
50% { transform: rotate(3.5deg); }
}
/* Vřeteno jezdí po portálu nad deskou. */
.tw-js .tw-krok-znak .tw-i-vreteno{
animation: tw-i-vreteno var(--smycka-vreteno) ease-in-out infinite;
}
@keyframes tw-i-vreteno{
0%, 10% { transform: translateX(calc(var(--posun-vreteno) * -1)); }
50% { transform: translateX(var(--posun-vreteno)); }
90%, 100% { transform: translateX(calc(var(--posun-vreteno) * -1)); }
}
/* Deska dosedne na skříňku a chvíli tam leží. */
.tw-js .tw-krok-znak .tw-i-osazeni{
animation: tw-i-osazeni var(--smycka-osazeni) var(--ease-cut) infinite;
}
@keyframes tw-i-osazeni{
0%, 12% { transform: translateY(calc(var(--posun-osazeni) * -1)); }
46%, 100% { transform: translateY(0); }
}
/* Kola se lehce houpou, jako by vůz jel. */
.tw-js .tw-krok-znak .tw-i-kolo{
animation: tw-i-kolo var(--smycka-klid) ease-in-out infinite;
}
@keyframes tw-i-kolo{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(1px); }
}
/* Zaškrtnutí jen tiše dýchá. */
.tw-js .tw-krok-znak .tw-i-fajfka{
animation: tw-i-fajfka var(--smycka-klid) ease-in-out infinite;
}
@keyframes tw-i-fajfka{
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* --- Užší obrazovka ----------------------------------------------------- */
@media (max-width: 959px){
.tw-krok-znak{ width: var(--krok-znak-uzky); height: var(--krok-znak-uzky); }
.tw-osa-obal .tw-krok::before{ font-size: var(--krok-cislo-uzky); }
.tw-osa-obal .tw-krok{
padding-top: calc(3px + var(--s3) + var(--krok-cislo-uzky) + var(--s2));
}
}
/* --- Omezený pohyb ------------------------------------------------------ */
/*
* Se zapnutým omezením pohybu se nehýbe nic: dráha je vykreslená
* celá, značky jsou dokreslené a žádná smyčka neběží. Obsah je
* přitom úplně stejný — omezení pohybu nesmí být horší stránka.
*/
@media (prefers-reduced-motion: reduce){
:root{ --postup: 1; }
/*
* Bez !important schválně. Skript se při omezeném pohybu
* na --postup vůbec nesahá, takže tady nemá co přebíjet —
* platí výchozí hodnota 1, tedy dráha vykreslená celá.
*/
.tw-osa-postup{ transform: scaleX(1); }
.tw-js .tw-krok-znak path,
.tw-js .tw-krok-znak rect,
.tw-js .tw-krok-znak circle{
stroke-dasharray: none;
stroke-dashoffset: 0;
animation: none;
}
.tw-js .tw-krok-znak .tw-i-hyb{ animation: none; transform: none; }
.tw-js .tw-osa-obal .tw-krok::before{
border-top-color: var(--accent);
color: var(--accent-ink);
transition: none;
}
.tw-js .tw-osa-obal .tw-krok-znak{ color: var(--accent-ink); transition: none; }
}
/* ==========================================================================
41. ŽIVÉ POZADÍ ZÁVĚREČNÉ VÝZVY
Plocha pod „Mám půdorys / Zatím se rozhlížím“ se velmi pomalu
převaluje ze značkové zeleně do tmavé. Dvě vrstvy přes sebe:
spodní nese samotný přechod, horní jemné světlo, které jde jinou
rychlostí — díky tomu se pohyb nezacyklí do zjevného rytmu.
Hýbe se výhradně transform, ne background-position. Rozdíl je
podstatný: posun podkladu nutí prohlížeč překreslovat celý pás
při každém snímku, kdežto posun vrstvy si odbaví grafická karta.
U plochy přes celou šířku, která je pořád ve výřezu, to není
drobnost.
Sekce se hledá přes :has(). Prohlížeč, který ho neumí, dostane
dnešní jednolitou zeleň — pozadí od šablony zůstává, tohle se
jen vrství nad ním.
Světlejší konec přechodu záměrně nejde nad značkovou zeleň
#385046. Krémový text na ní drží 6,8:1 podle manuálu; kdyby
plocha ještě zesvětlala, kontrast by spadl a s ním čitelnost
celé výzvy.
========================================================================== */
:root{
--vyzva-zelen: var(--tw-green); /* nejsvětlejší místo přechodu */
--vyzva-stred: #2A3B33;
--vyzva-tma: #1A2621;
--vyzva-lesk: rgba(135, 171, 156, .16); /* šalvěj, jen náznak */
/*
* Časy jsou dlouhé a navzájem nesoudělné. „Velmi plynule“ znamená,
* že oko pohyb nemá zachytit — má si jen všimnout, že plocha
* není mrtvá.
*/
--vyzva-cas: 46s;
--vyzva-cas-lesk: 67s;
}
.uk-section:has(.tw-cta){
position: relative;
overflow: hidden;
}
.uk-section:has(.tw-cta)::before,
.uk-section:has(.tw-cta)::after{
content: '';
position: absolute;
/*
* Vrstva je o kus větší než sekce, aby se při posunu neodhalil
* její okraj. Posun je nejvýš 14 %, přesah 30 % je s rezervou.
*/
inset: -30%;
pointer-events: none;
}
.uk-section:has(.tw-cta)::before{
background: linear-gradient(
115deg,
var(--vyzva-zelen) 0%,
var(--vyzva-stred) 28%,
var(--vyzva-tma) 52%,
var(--vyzva-stred) 76%,
var(--vyzva-zelen) 100%
);
animation: tw-vyzva-prelev var(--vyzva-cas) linear infinite;
}
.uk-section:has(.tw-cta)::after{
background:
radial-gradient(38% 52% at 28% 34%, var(--vyzva-lesk), transparent 70%),
radial-gradient(30% 44% at 74% 68%, var(--vyzva-lesk), transparent 72%);
animation: tw-vyzva-lesk var(--vyzva-cas-lesk) linear infinite;
}
/* Obsah nad oběma vrstvami. */
.uk-section:has(.tw-cta) > *{
position: relative;
z-index: 1;
}
/*
* Cesta tam a zpátky, ne skok na začátek. Kdyby snímek na 100 %
* nebyl totožný s nulou, jednou za cyklus by přes plochu přeběhl
* střih.
*/
@keyframes tw-vyzva-prelev{
0% { transform: translate3d(-14%, -7%, 0); }
50% { transform: translate3d( 14%, 7%, 0); }
100% { transform: translate3d(-14%, -7%, 0); }
}
@keyframes tw-vyzva-lesk{
0% { transform: translate3d( 9%, 5%, 0) scale(1.06); }
50% { transform: translate3d(-9%, -5%, 0) scale(1); }
100% { transform: translate3d( 9%, 5%, 0) scale(1.06); }
}
/*
* S omezeným pohybem přechod zůstane, jen stojí. Vypnout ho úplně
* by nebylo o nic přístupnější — statický přechod nikomu nevadí,
* vadí pohyb.
*/
@media (prefers-reduced-motion: reduce){
.uk-section:has(.tw-cta)::before,
.uk-section:has(.tw-cta)::after{ animation: none; transform: none; }
}
/* ==========================================================================
42. GALERIE DÍLNY — SLIDER SE ZVÝRAZNĚNÝM PROSTŘEDKEM
Běžný pás ukáže všechno stejně a oko neví, kam se dívat. Tady je
prostřední snímek plný a o kus vyšší, sousedi ustoupí do pozadí —
pás dostane ohnisko a čte se jako jedna scéna.
Zvýraznění visí na .uk-active, což je třída, kterou aktivnímu
snímku dává sám UIkit (uk-slider s center: true). Nic se nepočítá
v JavaScriptu.
Bez JavaScriptu UIkit nenaběhne a .uk-slider-items zůstane obyčejný
seznam. Aby z toho nebyl sloupec obrázků přes celou stránku, drží
se rozvržení flexem přímo tady a pás se dá odrolovat prstem.
========================================================================== */
:root{
--galerie-sirka: 68%; /* šířka aktivního snímku na širokém displeji */
--galerie-ustup: .86; /* zmenšení sousedů */
--galerie-jas: .72; /* jak moc sousedi ustoupí do pozadí */
--galerie-mezera: var(--s4);
}
/*
* V tmavém motivu se ubírá jasu míň. Snímky z dílny jsou samy o sobě
* tmavé a na tmavém podkladu z nich při 0,72 zbyla černá plocha —
* ustoupit má soused, ne zmizet.
*/
:root[data-theme="dark"]{ --galerie-jas: .88; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){ --galerie-jas: .88; }
}
.tw-galerie{
position: relative;
/* Snímky u kraje se mají odkrajovat, ne mizet za hranou stránky. */
overflow: hidden;
}
.tw-galerie-items{
display: flex;
margin: 0;
padding: 0;
list-style: none;
gap: 0;
/*
* Záchrana pro stav bez JavaScriptu: pás se dá odrolovat.
* S UIkitem se scroll-snap neuplatní, protože si posun řídí sám.
*/
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.tw-js .tw-galerie-items{ overflow-x: visible; }
/*
* Šířka, ne flex-basis.
*
* UIkit má na .uk-slider-items > * pravidlo „flex: 0 0 auto !important“
* a přebije každý zápis přes flex. Změřeno: položky spadly na 16 px,
* což byl jen jejich vnitřní okraj. Šířka se nastavuje zvlášť
* a projde — stejně to dělají i vlastní pomocné třídy UIkitu.
*/
.tw-galerie-item{
width: var(--galerie-sirka);
max-width: var(--galerie-sirka);
padding: 0 calc(var(--galerie-mezera) / 2);
scroll-snap-align: center;
}
@media (max-width: 959px){
:root{ --galerie-sirka: 86%; --galerie-ustup: .92; }
}
@media (max-width: 639px){
:root{ --galerie-sirka: 100%; --galerie-ustup: 1; --galerie-jas: 1; }
}
/* --- Rámec snímku ------------------------------------------------------- */
.tw-galerie-ramec{
position: relative;
margin: 0;
overflow: hidden;
/* Systém zaoblení z §23: velký roh vlevo nahoře. */
border-radius: var(--r-panel-roh) var(--r-panel) var(--r-panel) var(--r-panel);
transition: transform var(--d-slow) var(--ease-cut),
filter var(--d-slow) var(--ease-cut);
}
/*
* Ustupují sousedi, nezvýrazňuje se střed.
*
* Rozdíl je v tom, co se stane, když skript neproběhne. UIkit dává
* .uk-active všem snímkům, které jsou vidět — v našem rozvržení dvěma
* najednou — takže z něj střed nepoznáme. Střední snímek si proto
* hledá initGalerie() a teprve pak na galerii sedí data-tw-stred.
*
* Dokud tam ten atribut není, neustupuje nikdo. Selhání skriptu tedy
* vede k pásu plnobarevných fotek, ne k pásu potemnělých.
*/
.tw-galerie[data-tw-stred] .tw-galerie-item:not(.tw-galerie-stred) .tw-galerie-ramec{
transform: scale(var(--galerie-ustup));
filter: brightness(var(--galerie-jas)) saturate(.72);
}
/*
* Poměr stran drží aspect-ratio na obrázku, ne na rámci. Kdyby ho
* nesl rámec, obrázek bez rozměrů by mu na okamžik před načtením
* rozhodil výšku a celý pás by poskočil.
*/
.tw-galerie-foto{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tw-galerie-16-9 .tw-galerie-ramec{ aspect-ratio: 16 / 9; }
.tw-galerie-3-2 .tw-galerie-ramec{ aspect-ratio: 3 / 2; }
.tw-galerie-1-1 .tw-galerie-ramec{ aspect-ratio: 1 / 1; }
/* --- Popisek ------------------------------------------------------------ */
/*
* Popisek leží na fotce, takže pod ním musí být tmavý spád —
* bílá na náhodné fotce je jinak sázka. Spád jde od 0 % krytí,
* aby se do obrázku nezakousl hranou.
*/
.tw-galerie-popis{
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--s7) var(--s5) var(--s4);
background: linear-gradient(to top,
rgba(13, 19, 16, .82) 0%,
rgba(13, 19, 16, .55) 45%,
rgba(13, 19, 16, 0) 100%);
color: var(--tw-cream);
font-size: var(--t-small);
line-height: 1.45;
transition: opacity var(--d-base) var(--ease-cut),
transform var(--d-base) var(--ease-cut);
}
.tw-galerie[data-tw-stred] .tw-galerie-item:not(.tw-galerie-stred) .tw-galerie-popis{
opacity: 0;
transform: translateY(8px);
}
/*
* Bez JavaScriptu žádná položka .uk-active nedostane, takže by
* popisky zůstaly neviditelné. Tohle je pojistka: dokud na stránce
* není tw-js, jsou vidět všechny.
*/
/* Bez JavaScriptu se nic neschovává ani neztlumuje — viz výš. */
html:not(.tw-js) .tw-galerie-popis{ opacity: 1; transform: none; }
html:not(.tw-js) .tw-galerie-ramec{ transform: none; filter: none; }
.tw-galerie-stitek{
position: absolute;
top: 0; left: 0;
padding: 6px 12px;
background: var(--tw-green);
color: var(--tw-cream);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
border-bottom-right-radius: var(--r-panel);
}
/* --- Šipky a tečky ------------------------------------------------------ */
.tw-galerie-sipka{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
/* Stejné mražené sklo jako lišta — jeden materiál na celém webu. */
background: var(--sklo-plocha);
border: 1px solid var(--sklo-hrana);
-webkit-backdrop-filter: blur(var(--sklo-rozmaz)) saturate(1.4) brightness(var(--sklo-jas));
backdrop-filter: blur(var(--sklo-rozmaz)) saturate(1.4) brightness(var(--sklo-jas));
/*
* --ink, ne --core.
*
* --core se mezi motivy převrací: ve světlém je to tmavý inkoust,
* v tmavém nejtmavší podklad. Šipka v něm byla na tmavém skle
* neviditelná — změřeno rgb(13,19,16) na rgba(18,26,22,.42).
* --ink je vždycky ta barva, kterou se na daném podkladu píše.
*/
color: var(--ink);
transition: background-color var(--d-quick) var(--ease-cut),
color var(--d-quick) var(--ease-cut);
}
.tw-galerie-vlevo{ left: var(--s4); }
.tw-galerie-vpravo{ right: var(--s4); }
@media (hover: hover){
.tw-galerie-sipka:hover{ background: var(--sklo-plocha-pevne); color: var(--accent-ink); }
}
.tw-galerie-sipka:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.tw-galerie-tecky{
margin: var(--s4) 0 0;
display: flex;
justify-content: center;
gap: var(--s2);
list-style: none;
padding: 0;
}
.tw-galerie-tecky > * > *{
width: 8px; height: 8px;
border-radius: 50%;
border: 1px solid var(--line);
background: transparent;
transition: background-color var(--d-quick) var(--ease-cut),
border-color var(--d-quick) var(--ease-cut);
}
.tw-galerie-tecky > .uk-active > *{
background: var(--accent);
border-color: var(--accent);
}
/* --- Omezený pohyb ------------------------------------------------------ */
/*
* Zvýraznění zůstává — nese informaci o tom, kde v pásu jsme —
* jen se na něj neplouží. Automatický posuv vypíná initPasDekoru
* v JavaScriptu, protože atribut autoplay se z CSS zrušit nedá.
*/
@media (prefers-reduced-motion: reduce){
.tw-galerie-ramec,
.tw-galerie-popis,
.tw-galerie-sipka{ transition: none; }
}
/* ==========================================================================
43. DETAIL DEKORU — TABULKA, KALKULAČKA, VÝROBCE
Detail dekoru je jediná stránka, kde návštěvník rozhoduje o penězích.
Proto stojí vedle sebe tři věci a nic víc: vzorek, tabulka parametrů
a cena, kterou si může spočítat na svůj rozměr.
Kalkulačka je nadstavba. Výsledek do ní vypíše server (celá deska),
JavaScript ho jen přepočítává. Který blok polí je vidět, řeší
:has() podle zaškrtnutého přepínače — bez skriptu se tedy dá tvar
přepnout taky. Kde :has() chybí, ukážou se prostě všechna pole;
to je horší vzhled, ne rozbitá stránka.
========================================================================== */
:root{
--kalk-vyska: 44px; /* výška vstupního pole — palec na mobilu */
--dekor-lepivy: 96px; /* odsazení lepivého vzorku od horní hrany */
}
/* --- Vzorek zůstává u textu -------------------------------------------- */
@media (min-width: 960px){
.tw-dekor-lepivy{
position: sticky;
top: var(--dekor-lepivy);
}
}
/* --- Hlavička: značka, řada, kód --------------------------------------- */
.tw-dekor-kod{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .12em;
color: var(--muted);
}
.tw-dekor-cena{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s2) var(--s3);
margin: var(--s4) 0 var(--s5);
}
.tw-dekor-cena b{
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(26px, 3.2vw, 38px);
line-height: 1;
letter-spacing: -.01em;
}
.tw-dekor-cena > span{
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .06em;
color: var(--muted);
}
/*
* Dostupnost nesmí být jen barva — kdo barvy nerozliší, musí si ji
* přečíst. Barva je proto navíc, ne místo textu.
*/
.tw-dekor-stav{
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px 10px;
color: var(--ink-2);
}
.tw-stav-skladem{ border-color: var(--accent); color: var(--accent-ink); }
.tw-stav-nedostupne{ opacity: .7; }
.tw-dark .tw-stav-skladem{ color: var(--accent); }
/* --- Podnadpisy sekcí --------------------------------------------------- */
.tw-dekor-podnadpis{
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(15px, 1.5vw, 18px);
letter-spacing: .01em;
margin: var(--s7) 0 var(--s4);
}
/* --- Tabulka parametrů -------------------------------------------------- */
.tw-dekor-tabulka{
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.tw-dekor-tabulka th,
.tw-dekor-tabulka td{
text-align: left;
vertical-align: top;
padding: 10px 0;
border-bottom: 1px solid var(--line-soft);
}
.tw-dekor-tabulka th{
width: 38%;
font-family: var(--f-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
padding-right: var(--s4);
}
.tw-dekor-tabulka tr:last-child th,
.tw-dekor-tabulka tr:last-child td{ border-bottom: 0; }
@media (max-width: 479px){
.tw-dekor-tabulka th{ width: 44%; }
}
/* --- Kalkulačka --------------------------------------------------------- */
.tw-kalk{
border: 1px solid var(--line);
border-radius: 2px;
background: var(--surface-2);
padding: var(--s5);
}
.tw-kalk-tvar{
border: 0;
margin: 0;
padding: 0;
}
.tw-kalk-tvar legend{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
padding: 0;
margin-bottom: var(--s3);
}
.tw-kalk-tvar label{
display: flex;
align-items: baseline;
gap: var(--s3);
padding: 8px 0;
cursor: pointer;
}
.tw-kalk-tvar input{
flex: 0 0 auto;
accent-color: var(--accent-ink);
width: 16px;
height: 16px;
}
.tw-kalk-tvar label span{ font-size: 15px; }
.tw-kalk-tvar label i{
font-style: normal;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .06em;
color: var(--muted);
margin-left: var(--s2);
}
.tw-kalk-pole{ margin-top: var(--s4); }
.tw-kalk-pole p{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s4);
margin: 0 0 var(--s3);
}
.tw-kalk-pole label{
font-size: 14px;
color: var(--ink-2);
}
.tw-kalk-pole input{
width: 128px;
height: var(--kalk-vyska);
padding: 0 var(--s3);
font-family: var(--f-mono);
font-size: 15px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 2px;
transition: border-color var(--d-quick) var(--ease-cut);
}
.tw-kalk-pole input:focus-visible{
outline: 2px solid var(--accent-ink);
outline-offset: 1px;
border-color: var(--accent-ink);
}
/*
* Skrývání polí podle vybraného tvaru. Jen tam, kde prohlížeč umí
* :has() — jinak se ukáže všechno a kalkulačka pořád funguje.
*/
@supports selector(:has(*)){
.tw-kalk [data-tw-pole="obdelnik"],
.tw-kalk [data-tw-pole="kruh"]{ display: none; }
.tw-kalk:has(input[value="obdelnik"]:checked) [data-tw-pole="obdelnik"],
.tw-kalk:has(input[value="kruh"]:checked) [data-tw-pole="kruh"]{ display: block; }
}
.tw-kalk-vysledek{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s2) var(--s3);
margin: var(--s5) 0 0;
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.tw-kalk-vysledek b{
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1;
}
.tw-kalk-vysledek span{
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--muted);
}
.tw-kalk-pozn,
.tw-dekor-pozn{
font-size: 13px;
line-height: 1.6;
color: var(--muted);
}
.tw-kalk-pozn{ margin: var(--s3) 0 0; }
/* --- Profil výrobce ----------------------------------------------------- */
.tw-vyrobce{
margin-top: var(--s8);
padding-top: var(--s7);
border-top: 1px solid var(--line);
}
/*
* Logo se sází jako maska, ne jako obrázek — jedna kresba tak
* projde světlým i tmavým režimem a vždycky drží kontrast.
*/
.tw-vyrobce-logo{
display: block;
width: 124px;
height: 30px;
background: var(--ink-2);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: contain;
mask-size: contain;
}
.tw-vyrobce-logo.tw-znacka-polyrey{
-webkit-mask-image: url(../img/znacky/polyrey.png);
mask-image: url(../img/znacky/polyrey.png);
}
.tw-vyrobce-logo.tw-znacka-fundermax{
-webkit-mask-image: url(../img/znacky/fundermax.png);
mask-image: url(../img/znacky/fundermax.png);
}
.tw-vyrobce-logo.tw-znacka-heritage{
-webkit-mask-image: url(../img/znacky/heritage.png);
mask-image: url(../img/znacky/heritage.png);
}
/* Každé logo má jiný poměr stran — box se mu přizpůsobí, ne naopak. */
.tw-vyrobce-logo.tw-znacka-fundermax{ width: 132px; height: 26px; }
.tw-vyrobce-logo.tw-znacka-heritage{ width: 86px; height: 52px; }
.tw-vyrobce-logo.tw-znacka-polyrey{ width: 124px; height: 30px; }
.tw-dark .tw-vyrobce-logo{ background: var(--ink); }
/*
* Bez podpory masky by z loga zbyl barevný obdélník. Radši ho
* schováme — jméno výrobce stojí hned pod ním.
*/
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))){
.tw-vyrobce-logo{ display: none; }
}
.tw-vyrobce-zeme{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin: var(--s3) 0 0;
}
.tw-vyrobce-web{ margin: var(--s2) 0 0; font-size: 14px; }
.tw-vyrobce-perex{
max-width: 62ch;
font-size: 16px;
line-height: 1.7;
margin: 0;
}
.tw-vyrobce-fakta{
list-style: none;
margin: var(--s5) 0 0;
padding: 0;
display: grid;
gap: var(--s2);
}
.tw-vyrobce-fakta li{
position: relative;
padding-left: var(--s5);
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
}
.tw-vyrobce-fakta li::before{
content: "";
position: absolute;
left: 0;
top: .6em;
width: 12px;
height: 1px;
background: var(--accent);
}
.tw-vyrobce-rada{ margin-top: var(--s6); }
.tw-vyrobce-rada h3{
font-family: var(--f-display);
font-weight: 600;
font-size: 15px;
margin: 0 0 var(--s2);
}
.tw-vyrobce-rada p{ margin: 0; font-size: 15px; line-height: 1.7; max-width: 62ch; }
.tw-vyrobce-kolekce{
list-style: none;
margin: var(--s5) 0 0;
padding: 0;
display: grid;
gap: var(--s3);
}
.tw-vyrobce-kolekce a{
font-family: var(--f-display);
font-weight: 600;
font-size: 15px;
}
.tw-vyrobce-kolekce span{
display: block;
font-size: 13px;
line-height: 1.6;
color: var(--muted);
margin-top: 2px;
}
/* --- Dokumenty ke stažení ----------------------------------------------- */
.tw-dekor-doky{
margin-top: var(--s8);
padding-top: var(--s7);
border-top: 1px solid var(--line);
}
.tw-doky-seznam{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
}
.tw-doky-seznam li + li{ border-top: 1px solid var(--line-soft); }
.tw-doky-seznam a{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
padding: var(--s4) 0;
color: inherit;
text-decoration: none;
transition: color var(--d-quick) var(--ease-cut);
}
.tw-doky-seznam a:hover .tw-doky-nazev{ color: var(--accent-ink); }
.tw-dark .tw-doky-seznam a:hover .tw-doky-nazev{ color: var(--accent); }
.tw-doky-nazev{
font-family: var(--f-display);
font-weight: 600;
font-size: 15px;
transition: color var(--d-quick) var(--ease-cut);
}
.tw-doky-typ{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
/* --- Omezený pohyb ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
.tw-kalk-pole input,
.tw-doky-seznam a,
.tw-doky-nazev{ transition: none; }
}
/* ==========================================================================
44. OBRÁZEK U PRAVÉ HRANY OKNA
Kresba, která se lepí na pravou hranu okna a text jí uhne. Používá
se dvakrát:
.tw-hero-obraz — pole „Obrázek vpravo" v prvku Hero
.tw-obraz-vpravo — obecná třída; dá se napsat do libovolného
obrázku v YOOthemu, pole Advanced → CSS class
Tři věci, na kterých to jinde padá a tady stojí:
1. Obrázek NEMÁ data-tw-reveal. Nájezdy se v custom.js osazují všem
přímým dětem sloupců mřížky; prvek, který přeteče přes okraj okna,
ale nemusí nikdy dosáhnout 18 % viditelnosti, kterou pozorovatel
čeká — a zůstal by navždy na opacity: 0. Ozdoba se proto z nájezdů
vyjímá natvrdo.
2. pointer-events: none. Kresba přesahuje nad plochu s tlačítky
a neviditelná vrstva přes tlačítko je horší chyba než chybějící
obrázek.
3. Text dostane vpravo odsazení přesně o šířku obrázku, takže se
nepřekrývají. Pod hranicí se obrázek schová a odsazení zmizí.
========================================================================== */
:root{
--obraz-uzky: 26vw;
--obraz-stredni: 38vw;
--obraz-siroky: 50vw;
/* O kolik smí kresba přesahovat za pravou hranu okna. */
--obraz-presah: 4vw;
/* Kolik místa zbude textu vedle ní. */
--obraz-odstup: var(--s7);
/* Strop výšky, aby kresba nepřerostla okno. */
--obraz-vyska: 82vh;
}
/*
* Kresba smí přesahovat za hranu okna, ale nesmí kvůli tomu vzniknout
* vodorovné rolování. Hero si ji proto ořízne.
*/
.tw-hero-s-obrazem{
position: relative;
overflow: hidden;
}
/* --- Společný základ ---------------------------------------------------- */
.tw-hero-obraz,
.tw-obraz-vpravo{
display: none; /* zapíná až medium query níž */
position: absolute;
right: calc(var(--obraz-presah) * -1);
z-index: 1;
justify-content: flex-end;
pointer-events: none;
user-select: none;
}
/*
* Obrázek se drží obou stropů — šířky sloupce i výšky okna — a co je
* z nich přísnější, to vyhraje. Proto width: auto a max-width, ne
* width: 100 %: jinak by se při nízkém okně srazil na výšku a po
* stranách zbylo prázdno.
*/
.tw-hero-obraz img,
.tw-obraz-vpravo img{
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: var(--obraz-vyska);
margin-left: auto;
}
/* Šířky podle volby ve Tvůrci. */
.tw-obraz-uzky{ width: var(--obraz-uzky); }
.tw-obraz-stredni{ width: var(--obraz-stredni); }
.tw-obraz-siroky{ width: var(--obraz-siroky); }
.tw-obraz-vpravo{ width: var(--obraz-stredni); }
/* Kam dosedne. */
.tw-obraz-dole{ bottom: 0; }
.tw-obraz-stred{ top: 50%; transform: translateY(-50%); }
/*
* Ozdoba se nikdy neúčastní nájezdů. Kdyby jí custom.js přesto
* data-tw-reveal osadil, tohle pravidlo ji nechá vidět.
*/
.tw-js .tw-hero-obraz,
.tw-js .tw-obraz-vpravo,
.tw-js .tw-hero-obraz[data-tw-reveal],
.tw-js .tw-obraz-vpravo[data-tw-reveal]{
opacity: 1;
clip-path: none;
}
/* --- Hranice, od které se ukáže ----------------------------------------- */
@media (min-width: 960px){
.tw-obraz-od-l{ display: flex; }
.tw-hero-s-obrazem:has(.tw-obraz-od-l) .tw-hero-inner{
padding-right: calc(var(--obraz-uzky) + var(--obraz-odstup));
}
}
@media (min-width: 1200px){
.tw-obraz-od-xl,
.tw-obraz-vpravo{ display: flex; }
.tw-hero-s-obrazem:has(.tw-obraz-od-xl) .tw-hero-inner,
.tw-hero-s-obrazem:has(.tw-obraz-od-l) .tw-hero-inner{
padding-right: calc(var(--obraz-stredni) + var(--obraz-odstup));
}
}
@media (min-width: 1600px){
.tw-obraz-od-xxl{ display: flex; }
.tw-hero-s-obrazem:has(.tw-obraz-od-xxl) .tw-hero-inner{
padding-right: calc(var(--obraz-stredni) + var(--obraz-odstup));
}
}
/*
* Široká varianta ukusuje z textu víc, ale nikdy tolik, aby se
* nadpis lámal po jednom slově — proto strop na polovině okna.
*/
@media (min-width: 1200px){
.tw-hero-s-obrazem:has(.tw-obraz-siroky) .tw-hero-inner{
padding-right: min(calc(var(--obraz-siroky) + var(--obraz-odstup)), 52vw);
}
.tw-hero-s-obrazem:has(.tw-obraz-uzky) .tw-hero-inner{
padding-right: calc(var(--obraz-uzky) + var(--obraz-odstup));
}
}
/*
* Bez podpory :has() zůstane text přes celou šířku a kresba se
* neukáže vůbec — radši žádná ozdoba než ozdoba přes nadpis.
*/
@supports not selector(:has(*)){
.tw-hero-obraz,
.tw-obraz-vpravo{ display: none !important; }
}
/* --- Obecná třída mimo hero --------------------------------------------- */
/*
* Aby se dala napsat na obrázek kdekoli, musí mít sekce, ve které
* leží, souřadnicový počátek. UIkit ho nenastavuje, tohle ano.
*/
.uk-section:has(.tw-obraz-vpravo){
position: relative;
overflow: hidden;
}
/* --- Omezený pohyb ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
.tw-hero-obraz,
.tw-obraz-vpravo{ transition: none; animation: none; }
}
/* ==========================================================================
45. SEGMENTY NA STRÁNCE PRO KOHO — CELOPLOŠNÝ PÁS S VIDEEM
Každý segment je pás přes celou šířku okna. Vespod běží ztlumená
videosmyčka, nad ní leží statická fotka se zaoblenými rohy a text.
Čtyři věci, na kterých to jinde padá a tady stojí:
1. Video je OZDOBA, ne obsah. Má poster se stejnou fotkou, takže
než se načte — a když se nenačte vůbec — je na pásu vidět tentýž
obraz. preload="none" znamená, že se nestahuje, dokud ho
prohlížeč nepotřebuje.
2. Kdo má zapnuté omezení pohybu, video nedostane vůbec: schová se
a zůstane poster. Neřeší to JavaScript, řeší to media query.
3. Zaoblení fotky není stejné dokola. Levý horní roh má trojnásobný
poloměr — je to podpis, který drží celou stránku pohromadě.
4. Text a fotka najíždějí při skrolování. Nájezd jede přes
data-tw-reveal, který osazuje custom.js, takže se sem nepíše
žádná další logika — jen doladění časů.
========================================================================== */
:root{
--segment-vyska: clamp(560px, 78vh, 860px);
--segment-zaobleni: 14px;
--segment-roh: calc(var(--segment-zaobleni) * 3);
--segment-ztmaveni: .74; /* jak moc se video utlumí */
--segment-rozostr: 2px;
--segment-podklad: #0D1310; /* tma pod videem, než naběhne poster */
}
/* --- Pás ---------------------------------------------------------------- */
.tw-segment{
position: relative;
isolation: isolate;
overflow: hidden;
min-height: var(--segment-vyska);
display: flex;
align-items: center;
padding-block: var(--s8);
/*
* Žádná mezera mezi pásy. Video sahá na horní i dolní hranu sekce,
* takže sousední pásy se dotknou rohy a šachovnice je spojitá —
* jedna svislá mezera by celý vzor rozpadla.
*/
margin-block: 0;
}
/*
* Pás má vlastní tmavé pozadí a kontejner je průhledný.
*
* Původně byly průhledné oba, protože podklad dělalo video přes celou
* plochu. Jakmile se video zúžilo na polovinu, zůstala druhá polovina
* bez čehokoli — a světlý text na světlém motivu se na ní ztratil.
* Tmavá plocha je tedy nutnost, ne dekorace: drží čitelnost tam, kam
* video nesahá, a v šachovnici hraje roli druhého pole.
*/
.tw-segment{
background: var(--segment-podklad);
}
.tw-segment > .uk-container{
background: transparent;
}
/* --- Podklad: video a závoj ---------------------------------------------
Video nekryje celý pás, jen tu polovinu, kde leží fotka. Strany se
po pásech střídají, takže videa vytvoří přes celou stránku šachovnici
a druhá polovina zůstane čistá pro text. Uvnitř své poloviny jde
video až do krajů — nahoru, dolů i k okraji okna.
----------------------------------------------------------------------- */
.tw-segment-obal{
position: absolute;
inset: 0;
z-index: 0;
margin: 0 !important;
pointer-events: none;
}
.tw-segment-podklad{
position: absolute;
inset: 0;
overflow: hidden;
background: var(--segment-podklad); /* než naběhne poster, ať nebliká bílá */
}
.tw-segment-video{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
/*
* Lehké rozostření a odbarvení. Podklad má dělat náladu, ne
* soutěžit s fotkou nad sebou o pozornost.
*/
filter: saturate(.72) blur(var(--segment-rozostr));
transform: scale(1.06); /* schová okraje, které rozostření změkčí */
}
/*
* Která polovina patří videu. Sudé pásy mají fotku vlevo, liché vpravo —
* a video jde vždy pod fotku. Přesah 1 px na dělicí hraně zakrývá
* subpixelovou mezeru, která by při zlomkových šířkách okna prosvítala.
*/
.tw-segment-vlevo .tw-segment-podklad{
right: calc(50% - 1px);
}
.tw-segment-vpravo .tw-segment-podklad{
left: calc(50% - 1px);
}
/*
* Závoj je rovnoměrný. Dřív měl přechod do strany, protože video leželo
* i pod textem; teď pod textem žádné není, takže gradient nemá co
* vyrovnávat a jen by rozmazával hranu šachovnice.
*/
.tw-segment-zavoj{
position: absolute;
inset: 0;
background: rgba(13, 19, 16, var(--segment-ztmaveni));
}
/* --- Obsah nad podkladem ------------------------------------------------
Plnou šířku okna má jenom video. Obsah — fotka i textový blok —
zůstává v běžném kontejneru s normálním odsazením, takže nic
nedosedá na kraj obrazovky.
Pozor na jednu past: kontejner nesmí být position: relative. Video
uvnitř něj leží absolutně na inset: 0 a hledá si nejbližšího
polohovaného předka. Kdyby jím byl kontejner, video by skončilo
na jeho šířce místo na polovině okna — a přesně to šachovnici
rozbíjelo. Polohovaný je proto až samotný segment a nad podklad
se zvedá jenom mřížka.
----------------------------------------------------------------------- */
.tw-segment > .uk-container{
position: static;
}
.tw-segment .tw-segment-mrizka{
position: relative;
z-index: 1;
}
/* --- Fotka: zaoblení s výrazným levým horním rohem ---------------------- */
/*
* Fotka nevyplňuje sloupec celý — kolem ní má být vidět podkladové
* video, jinak by z něj zbyla jen tenká obruba. Zároveň se odsazuje
* k obsahu, tedy dovnitř k dělicí hraně: na pásech s fotkou vlevo
* doprava, na těch s fotkou vpravo doleva. Mezera k okraji okna tak
* vyjde na obou stranách stejná a fotky se přes pásy zarovnají.
*/
.tw-segment-foto img,
img.tw-segment-foto{
display: block;
width: 78%;
max-width: 100%;
height: auto;
border-radius: var(--segment-roh) var(--segment-zaobleni)
var(--segment-zaobleni) var(--segment-zaobleni);
box-shadow: 0 24px 60px rgba(13, 19, 16, .45);
transform: translateZ(0);
transition: transform var(--d-base) var(--ease-cut),
box-shadow var(--d-base) var(--ease-cut);
}
.tw-segment:hover .tw-segment-foto img{
transform: translateY(-4px);
box-shadow: 0 32px 72px rgba(13, 19, 16, .55);
}
/* Posun k dělicí hraně — zrcadlově podle strany pásu. */
.tw-segment-vlevo .tw-segment-foto img,
.tw-segment-vlevo img.tw-segment-foto{
margin-left: auto;
margin-right: 0;
}
.tw-segment-vpravo .tw-segment-foto img,
.tw-segment-vpravo img.tw-segment-foto{
margin-left: 0;
margin-right: auto;
}
/* --- Text --------------------------------------------------------------- */
.tw-segment-nadpis{
font-family: var(--f-display);
font-weight: 600;
letter-spacing: -.01em;
}
.tw-segment-perex{
color: var(--accent);
font-weight: 500;
}
.tw-segment-text{ max-width: 54ch; }
/*
* Popisek příkladu. Slovo „Příklad z praxe" je vlastní štítek,
* ne součást věty — proto vlastní span s linkou pod sebou.
*/
.tw-segment-priklad span{
display: block;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
/* --- Odrážky: animovaná linka a puntík ---------------------------------- */
.tw-segment-body .tw-seznam-radek{
position: relative;
overflow: hidden;
}
/*
* Linka pod řádkem se dokresluje zleva doprava, jakmile řádek najede.
* Bez JavaScriptu i bez nájezdu zůstane linka nakreslená celá —
* výchozí stav je vidět, ne schovaný.
*/
.tw-js .tw-segment-body .tw-seznam-radek::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--d-story) var(--ease-cut);
}
.tw-js [data-tw-reveal].tw-videt .tw-segment-body .tw-seznam-radek::after{
transform: scaleX(1);
}
/* Prodleva po řádcích, ať se linky nedokreslí všechny naráz. */
.tw-js .tw-segment-body .tw-seznam-radek:nth-child(2)::after{ transition-delay: 90ms; }
.tw-js .tw-segment-body .tw-seznam-radek:nth-child(3)::after{ transition-delay: 180ms; }
.tw-js .tw-segment-body .tw-seznam-radek:nth-child(4)::after{ transition-delay: 270ms; }
/* --- Užší okna ---------------------------------------------------------- */
@media (max-width: 959px){
:root{ --segment-vyska: auto; }
.tw-segment{ padding-block: var(--s7); }
/*
* Na úzkém okně se sloupce skládají pod sebe, takže dělení na polovinu
* ztrácí smysl — video se vrací pod celý pás a závoj se o kousek
* přitvrdí, ať text drží kontrast i nad světlejším záběrem.
*/
.tw-segment-vlevo .tw-segment-podklad,
.tw-segment-vpravo .tw-segment-podklad{
left: 0;
right: 0;
}
.tw-segment-zavoj{
background: rgba(13, 19, 16, calc(var(--segment-ztmaveni) + .06));
}
/* Na úzkém okně ať fotka sloupec využije celý a stojí na střed. */
.tw-segment-foto img,
img.tw-segment-foto,
.tw-segment-vlevo .tw-segment-foto img,
.tw-segment-vpravo .tw-segment-foto img{
width: 100%;
margin-inline: auto;
}
}
/* --- Omezený pohyb a úspora dat ----------------------------------------- */
/*
* Video se tu nepřehrává — skript mu při omezeném pohybu vůbec
* nepřidá zdroj, takže prvek zůstane stát na posteru. Poster je
* tatáž fotka, takže pás vypadá stejně, jen se nehýbe a nic se
* nestahuje. Prvek proto neschováváme: kdybychom ho dali pryč,
* zmizel by i podkladový obraz a zbyl by černý pruh.
*/
@media (prefers-reduced-motion: reduce){
.tw-segment-video{ filter: saturate(.72); transform: none; }
.tw-segment-foto img,
.tw-segment:hover .tw-segment-foto img{
transition: none;
transform: none;
}
.tw-js .tw-segment-body .tw-seznam-radek::after{
transition: none;
transform: scaleX(1);
}
}
/* ==========================================================================
46. PÁS S HRANOU — PODKLADOVÉ VIDEO A ZAOSTŘOVÁNÍ POPISKU
Dvě věci navíc oproti §13, kde pás vznikl:
1. Pod fotkou může běžet videosmyčka. Fotka zůstává obsahem a je
vidět od první chvíle; video se přes ni prolne teprve ve chvíli,
kdy mu skript doplní zdroj. Dokud ho nemá, je průhledné — prázdný
prvek video by jinak fotku přikryl černou plochou.
2. Popisek se zaostřuje po řádcích. Rozmazání zapíná až skript
atributem data-tw-ostreni, takže bez JavaScriptu je text rovnou
ostrý. Odjezdem ze záběru se rozmlží zpátky.
========================================================================== */
:root{
--hrana-ostreni: 14px; /* jak moc je řádek rozmazaný, než najede */
--hrana-prodleva: .3s; /* zpoždění druhého řádku za prvním */
--hrana-ztmaveni: .46; /* rovnoměrné ztmavení nad videem */
}
/* --- Podkladové video --------------------------------------------------- */
.tw-hrana-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
/*
* Neprůhledné až po načtení. Skript nasazuje data-tw-nacteno ve chvíli,
* kdy videu přidá zdroj — do té doby by prázdný prvek jenom zaclonil
* fotku pod sebou.
*/
opacity: 0;
transition: opacity 1.2s var(--ease-cut);
}
.tw-hrana-video[data-tw-nacteno]{
opacity: 1;
}
/*
* Pás bez fotky. Video není ozdoba nad obrazem, ale sám obraz —
* čekat s ním na načtení by znamenalo prázdný tmavý pruh. Tmavé
* pozadí pod ním drží pás celistvý, než naběhne první snímek.
*/
.tw-hrana-bez-fotky{
background-color: var(--segment-podklad);
}
.tw-hrana-bez-fotky .tw-hrana-video{
opacity: 1;
}
/*
* Nad videem rovnoměrné ztmavení. Původní gradient zdola zůstává kvůli
* čitelnosti popisku, tohle je plocha navíc přes celý pás.
*/
.tw-hrana-pas:has(.tw-hrana-video)::after{
content: "";
position: absolute;
inset: 0;
background: rgba(13, 19, 16, var(--hrana-ztmaveni));
z-index: 1;
pointer-events: none;
}
/* --- Zaostřování popisku ------------------------------------------------ */
.tw-hrana-radek{
display: block;
}
.tw-hrana-radek + .tw-hrana-radek{
margin-top: .28em;
}
.tw-js .tw-hrana-popis[data-tw-ostreni] .tw-hrana-radek{
filter: blur(var(--hrana-ostreni));
opacity: 0;
transform: translateY(10px);
transition: filter 1s var(--ease-cut),
opacity 1s var(--ease-cut),
transform 1s var(--ease-cut);
will-change: filter, opacity, transform;
}
.tw-js .tw-hrana-popis[data-tw-ostreni].tw-ostro .tw-hrana-radek{
filter: blur(0);
opacity: 1;
transform: none;
}
/* Druhý řádek jde za prvním — v obou směrech, i při rozmlžování zpět. */
.tw-js .tw-hrana-popis[data-tw-ostreni] .tw-hrana-radek:nth-child(2){
transition-delay: var(--hrana-prodleva);
}
/* --- Omezený pohyb ------------------------------------------------------ */
/*
* Skript při zapnutém omezení pohybu data-tw-ostreni vůbec nenasadí,
* takže se sem stránka nedostane. Pravidlo tu přesto stojí pro případ,
* že by se nastavení změnilo až za běhu — text musí zůstat čitelný.
*/
@media (prefers-reduced-motion: reduce){
.tw-js .tw-hrana-popis[data-tw-ostreni] .tw-hrana-radek{
filter: none;
opacity: 1;
transform: none;
transition: none;
}
.tw-hrana-video{ opacity: 0; }
}
/* ==========================================================================
47. MANIFEST POD HERO
Tři věty pozicování a tři kroky vedle nich. Sekce, kterou návštěvník
čte první — musí se dát přeběhnout očima za pár vteřin a přitom
vypadat jako dílna, ne jako leták.
Dvě pohybové myšlenky, obě jedním směrem:
1. Věty se odklápějí zpod hrany. Ne fade, ne posun — řádek je
oříznutý a text z něj vyjede zdola nahoru, jako když se odklopí
vrstva desky. Každá věta se zpožděním za předchozí.
2. Svislá osa u kroků se plní podle toho, jak sekce projíždí obrazem.
Kde prohlížeč umí animation-timeline, je to čistě deklarativní —
žádný scroll listener, žádné dopočítávání v JavaScriptu.
Bez JavaScriptu i bez podpory jsou obě věci ve výchozím stavu hotové:
text je vidět celý, osa je nakreslená celá. Nikdy prázdno.
========================================================================== */
:root{
--manifest-mezera: clamp(40px, 6vw, 96px);
--manifest-prodleva: .13s; /* posun mezi řádky i kroky */
--manifest-najezd: .85s;
}
/* --- Mřížka ------------------------------------------------------------- */
.tw-manifest{
display: grid;
gap: var(--manifest-mezera);
align-items: start;
}
@media (min-width: 960px){
.tw-manifest{
/*
* Asymetricky. Nadpis dostane menší polovinu, tělo větší —
* dvě stejné poloviny by z toho udělaly tabulku a věty by
* ztratily váhu.
*/
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(48px, 7vw, 128px);
}
}
/* --- Nadpis: odklápěné řádky -------------------------------------------- */
.tw-manifest-h{
margin: 0;
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.06;
letter-spacing: -.02em;
text-wrap: balance;
}
.tw-manifest-radek{
display: block;
overflow: hidden; /* hrana, zpod které řádek vyjede */
padding-bottom: .06em; /* aby se neořízly dotahy písmen */
}
.tw-manifest-slovo{
display: block;
}
/*
* Třetí věta je pointa, ne výčet — dostane akcentní barvu, aby oko
* vědělo, kde se má zastavit.
*/
.tw-manifest-radek:last-child .tw-manifest-slovo{
color: var(--accent-ink);
}
/*
* Na tmavém pásu drží nadpis krémovou, ne výchozí barvu textu —
* stejné pravidlo jako u ostatních sekcí v .tw-dark.
*/
.tw-dark .tw-manifest-h{ color: var(--tw-cream); }
.tw-dark .tw-manifest-text{ color: rgba(238, 226, 208, .78); }
.tw-dark .tw-manifest-text-lead{ color: var(--tw-cream); }
.tw-dark .tw-manifest-stitek{ color: rgba(238, 226, 208, .6); }
.tw-dark .tw-manifest-cislo{ color: var(--tw-ochre); }
.tw-dark .tw-manifest-osa{ background: rgba(238, 226, 208, .2); }
.tw-js .tw-manifest[data-tw-manifest] .tw-manifest-slovo{
transform: translateY(105%);
transition: transform var(--manifest-najezd) var(--ease-cut);
transition-delay: calc(var(--poradi) * var(--manifest-prodleva));
}
.tw-js .tw-manifest[data-tw-manifest].tw-videt .tw-manifest-slovo{
transform: translateY(0);
}
/* --- Tělo: osa a kroky --------------------------------------------------- */
.tw-manifest-telo{
display: grid;
grid-template-columns: 2px minmax(0, 1fr);
gap: clamp(20px, 2.5vw, 36px);
}
.tw-manifest-osa{
position: relative;
background: var(--line);
border-radius: 2px;
}
/*
* Výchozí stav je plná osa. Zeslabí ji teprve prohlížeč, který ji umí
* doplňovat — jinak by na starším prohlížeči zůstal prázdný proužek.
*/
.tw-manifest-osa-cara{
position: absolute;
inset: 0;
background: var(--accent);
border-radius: inherit;
transform-origin: top center;
}
@supports (animation-timeline: view()){
.tw-manifest-osa-cara{
transform: scaleY(0);
animation: tw-manifest-osa linear both;
animation-timeline: view();
animation-range: entry 25% cover 60%;
}
}
@keyframes tw-manifest-osa{
from{ transform: scaleY(0); }
to { transform: scaleY(1); }
}
/*
* Číslo si sázíme sami, marker seznamu proto musí pryč — jinak se
* vedle „01“ vykreslí ještě „1.“ z prohlížeče. Samotné list-style
* na nestačí, protože styly šablony ho na