(šablona docs/osoba-blok.html), žádné třídy nevybírá. Foto libovolného
formátu — ořez řeší object-fit. Rámeček s rastrem od 13. 8. (přání
klienta; do té doby bez rámečku — rozhodnutí 7. 8. tím ruší).
Úvod stránky: . Texty bez em dash. --- */
/* .ss-uvod = obecný úvodní odstavec stránky (kanonické jméno);
.ss-osoba-uvod ponechán jako alias pro už nasazený obsah.
Zarovnán VLEVO s H1 stránky (ne centrovaný box) a širší než obsahový
sloupec pod ním (rozhodnutí z vizuální kontroly 7. 8.). */
.ss-uvod,.ss-osoba-uvod{max-width:1040px;margin:0 0 56px;font-size:18px;line-height:1.6;color:var(--ss-text);}
.ss-osoba{display:grid;grid-template-columns:2fr 3fr;gap:44px;align-items:center;max-width:920px;margin:0 auto 64px;}
.ss-osoba:nth-of-type(even){grid-template-columns:3fr 2fr;}
.ss-osoba:nth-of-type(even) .ss-osoba-foto{order:2;}
/* rám se sešitovým rastrem (stejné parametry jako produktové foto
.p-detail .p-image-wrapper: border 2px růžová .5, rastr 40px @ .16,
papírový podklad). Rastr je BACKGROUND samotného imgu a prosvítá
v paddingu — žádný obalový element, editor dál vkládá jen ![]()
.
Nuance: vnitřní rohy fotky jsou hranaté (obsahový box imgu nejde
zaoblit) — u 14px rámu vizuálně zanedbatelné; kdyby vadilo, řešit
obalovým prvkem jako na detailu produktu. */
.ss-osoba-foto{
width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
padding:14px;border:2px solid rgba(217,125,147,.5);
border-radius:var(--ss-radius-karta);
background-color:var(--ss-papir);
background-image:linear-gradient(to right,rgba(217,125,147,.16) 1.5px,transparent 1.5px),
linear-gradient(to bottom,rgba(217,125,147,.16) 1.5px,transparent 1.5px);
background-size:40px 40px;
}
.ss-osoba-text h2{font-size:26px;font-weight:600;color:var(--ss-inkoust);margin:0 0 14px;padding:0;border:0;}
.ss-osoba-text p{font-size:17px;line-height:1.65;color:var(--ss-text);margin:0 0 12px;}
@media(max-width:700px){
.ss-osoba,.ss-osoba:nth-of-type(even){grid-template-columns:1fr;gap:20px;margin-bottom:48px;}
.ss-osoba:nth-of-type(even) .ss-osoba-foto{order:0;}
.ss-osoba-foto{aspect-ratio:3/2;}
}
/* --- SLOUPCOVÁ POLITIKA OBSAHOVÝCH STRÁNEK (vizuální pass 7. 8.,
STRUKTURÁLNÍ od v18): všechny obsahové stránky (Shoptet body class
.type-page) + výpis novinek drží JEDEN centrovaný sloupec šířky HP
systému (1120 + 2×24). Uvnitř: h1/úvod/texty vlevo na společné hraně,
výrazné bloky centrované ve sloupci. Do v17 to byla RUČNÍ enumerace
body.id-XXX — každou novou stránku bylo nutné zapsat (a šlo na to
zapomenout). .type-page platí automaticky pro KAŽDOU současnou
i budoucí stránku; page-specifické odchylky kotvit na slugovou třídu
.in- (Shoptet ji emituje, přežije re-vytvoření stránky). --- */
.type-posts-listing .content-inner,
.type-page .content-inner{max-width:var(--ss-sirka-stranka);margin-left:auto;margin-right:auto;}
/* obsah stránek může v markupu nést šablonový .container s PEVNOU šířkou
(1418 na desktopu — regrese v16 na Menu, oprava v17; od v18 pojistka
pro VŠECHNY obsahové stránky). width:auto ho podřídí stropu; .row bez
záporných okrajů, protože .container přišel o padding. */
.type-page .content-inner .container{width:auto;max-width:100%;padding-left:0;padding-right:0;}
.type-page .content-inner .row{margin-left:0;margin-right:0;}
/* čitelná délka řádku (10. 8., podnět: Obchodní podmínky běžely na plných
1168 ≈ 120+ znaků): HOLÉ odstavce a seznamy obsahových stránek drží
max ~75 znaků. Jen elementy bez tříd — vzory mají vlastní stropy
(.ss-uvod 1040 ap.) a gridové sloupce jsou užší než 900.
VÝJIMKA .in-menu (11. 8.): Menu má vlastní layout (kolofon, fotky
v odstavcích) — strop mu posouval závěrečný blok doleva. */
body.type-page:not(.in-menu) .content-inner p:not([class]),
body.type-page:not(.in-menu) .content-inner ul:not([class]),
body.type-page:not(.in-menu) .content-inner ol:not([class]){max-width:900px;}
/* výpisy kategorií (Shop, Rezervace) mají jinou kostru — bez .content-inner,
obsah žije v main.content (sjednoceno 9. 8.; float:none ruší šablonový
float). Strop je o 2×20px větší: main.content má VLASTNÍ boční padding
uvnitř — bez kompenzace byl obsah o 40px užší než na ostatních stránkách
(„bump" při přechodu Menu↔Shop, oprava 9. 8.). */
.type-category main.content{max-width:calc(var(--ss-sirka-stranka) + 40px);margin-left:auto;margin-right:auto;float:none;}
/* Klub: běžný text max ~75 znaků na řádek, karty plná šířka sloupce */
.in-klub-stare-skoly .content-inner p{max-width:900px;}
.in-klub-stare-skoly .ss-karta-obsah p{max-width:none;}
.in-klub-stare-skoly .ss-karty-dvojice{margin:40px 0 48px;padding:0;}
/* --- stránka KLUB STARÉ ŠKOLY (/klub-stare-skoly/, odkaz z menu
„Podpořte nás") — skládá se z existujících vzorů (.ss-uvod,
.ss-titulek-plakat, .ss-karty-dvojice, .ss-pilulka). Nové jen:
CTA sekce s odkazem na Darujme.cz a kontaktní řádek. --- */
.ss-cta{text-align:center;margin:56px auto;}
.ss-cta p:not(.ss-stitek){max-width:640px;margin:0 auto 20px;color:var(--ss-text);line-height:1.6;}
.ss-cta .ss-stitek{margin-bottom:12px;}
.ss-cta-pozn{font-size:14px;color:#7a6a70;margin:14px 0 0;}
/* --- 404 (.in-404): hravá typografická chyba — plakátový titulek,
bez šablonové šedé ikony (celý .loader-overlay), pilulkové tlačítko.
POZOR: background:var(...) v SHORTHANDU se tiše ztrácí (zjištěno
empiricky) — pro tlačítka používat background-color. --- */
.in-404 .content-inner{max-width:640px;margin:0 auto;text-align:center;padding-bottom:48px;}
.in-404 h1{font-family:var(--ss-pismo);font-size:32px !important;font-weight:700 !important;letter-spacing:-0.3px !important;line-height:1.1 !important;color:var(--ss-ruzova-tmava) !important;border-bottom:0 !important;padding-bottom:0 !important;margin:24px 0 12px !important;}
.in-404 h2{font-size:18px !important;font-weight:400 !important;color:var(--ss-text) !important;margin:0 0 8px !important;border:0 !important;}
.in-404 .loader-overlay{display:none !important;}
.in-404 .content-inner p{color:var(--ss-text);margin:0 0 28px;}
/* selektor posílen o body + .btn — šablonové pravidlo pozadí (v CDN
stylesheetu, nečitelné přes cssRules) přebíjelo slabší variantu
i s !important (zjištěno po nasazení v14) */
body.in-404 a.btn.btn-default{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:2px 36px 0;border-radius:var(--ss-radius-pill);background-color:var(--ss-inkoust) !important;color:var(--ss-papir) !important;font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:0 !important;text-decoration:none;transition:background-color .15s;}
body.in-404 a.btn.btn-default:hover{background-color:var(--ss-vinova) !important;}
/* --- Instagram pruh (šablonový widget .grid4, na všech stránkách nad
patičkou): nadpis-odkaz přestylován do štítkové řeči sekcí (verzálky,
prostrkání, vínová; hover růžová) + vzduch 72/32. !important nutné —
šablona odkazu vnucuje vlastní velikost. --- */
.grid4 h3{margin:72px 0 32px !important;text-align:center;}
.grid4 h3 .text{font-size:14px !important;font-weight:600 !important;letter-spacing:3px !important;text-transform:uppercase !important;color:var(--ss-vinova) !important;text-decoration:none;transition:color .15s;}
.grid4 h3 .text:hover{color:var(--ss-ruzova-tmava) !important;}
/* --- stránka KONTAKT (id 29) — čistě typografická (bez karet, rozhodnutí
9. 8.): štítkové sekce, tabulka otevírací doby, adresa s inline odkazem
na mapu, rezervační blok VLEVO s pilulkou na /rezervace/. --- */
.ss-kontakt-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:920px;margin:0 0 8px;}
.ss-kontakt-mrizka .ss-stitek{margin:0 0 14px;}
.ss-oteviracka{width:100%;max-width:360px;border-collapse:collapse;font-size:17px;color:var(--ss-inkoust);}
.ss-oteviracka td{padding:10px 0;border-bottom:1.5px solid rgba(217,125,147,.35);}
.ss-oteviracka tr:last-child td{border-bottom:0;}
.ss-oteviracka td:last-child{text-align:right;font-weight:600;}
.ss-oteviracka-sobota td{color:var(--ss-vinova);font-weight:700;}
.ss-adresa{font-size:17px;line-height:1.8;color:var(--ss-text);margin:0;}
.ss-adresa strong{font-size:19px;color:var(--ss-inkoust);}
.ss-rezervace-blok{max-width:640px;margin:88px 0;} /* rytmus stránky */
.ss-rezervace-blok .ss-stitek{margin:0 0 14px;}
.ss-rezervace-blok p:not(.ss-stitek){color:var(--ss-text);line-height:1.65;margin:0 0 24px;}
/* kontakty: štítky rolí se lámou (šířkový strop), jména osob drží na
společné lince díky subgrid (sdílený řádek štítků; starší prohlížeče
bez subgrid degradují na nezarovnaná jména — kosmetické) */
.ss-kontakty{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:24px;max-width:920px;margin:56px 0;}
.ss-kontakty > div{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;}
.ss-kontakty > div p{margin:0 0 4px;color:var(--ss-text);line-height:1.6;}
.ss-kontakty .ss-stitek{margin:0 0 10px;max-width:290px;}
@media(max-width:700px){
.ss-kontakt-mrizka{grid-template-columns:1fr;gap:36px;}
.ss-kontakty{grid-template-columns:1fr;gap:36px;}
}
/* max-width S margin:auto — jinak textový strop stránky (900px vlevo)
posune střed řádku mimo osu CTA pilulky nad ním */
.ss-podpora-kontakt{text-align:center;color:var(--ss-text);max-width:640px;margin:0 auto 48px;}
/* --- stránka MENU (akordeonový lístek) ---
Kompletní, soběstačná komponenta (struktura i vzhled) — nahrazuje
původní .in-menu pravidla ze starého HTML kódu, která se při go-live mažou. */
.in-menu article h1,.type-page h1,.type-posts-listing h1,.type-post h1{font-size:var(--ss-text-xl);font-weight:400;color:var(--ss-inkoust);padding-bottom:16px;border-bottom:1px solid var(--ss-seda);margin-bottom:40px;}
.in-menu details{border:1.5px solid rgba(217,125,147,.6) !important;border-radius:12px !important;background:var(--ss-papir) !important;margin-bottom:12px !important;overflow:hidden;transition:border-color .15s;}
.in-menu details:hover,.in-menu details[open]{border-color:var(--ss-ruzova-tmava) !important;}
.in-menu summary{position:relative;display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;font-weight:600 !important;font-size:var(--ss-text-base) !important;color:var(--ss-inkoust) !important;padding:16px 20px !important;background:transparent !important;}
.in-menu summary::-webkit-details-marker{display:none;}
.in-menu summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--ss-ruzova-tmava);border-bottom:2px solid var(--ss-ruzova-tmava);transform:rotate(45deg);transition:transform .3s ease;}
.in-menu details[open] summary::after{transform:rotate(-135deg);}
.in-menu .menu-content{
border-top:1.5px solid rgba(217,125,147,.35) !important;
background:
linear-gradient(to right, rgba(217,125,147,.10) 1.5px, transparent 1.5px),
linear-gradient(to bottom, rgba(217,125,147,.10) 1.5px, transparent 1.5px),
#fff !important;
background-size:36px 36px, 36px 36px, auto !important;
padding:20px 24px !important;
}
.in-menu .menu-content p{margin:4px 0;display:flex;justify-content:space-between;gap:16px;font-size:16px;color:var(--ss-inkoust);}
.in-menu .menu-content small{display:block;color:#7a6a70;margin-top:10px;line-height:1.4;}
.mobile.in-menu,.mobile.in-menu .in-menu,.mobile.in-menu .col-sm-6{background:var(--ss-kremova);padding:0;}
/* ============ 4 · VZORY (opt-in) ============ */
.ss-stitek{
font-family:var(--ss-pismo);font-size:var(--ss-text-xs);font-weight:600;
letter-spacing:3px;text-transform:uppercase;color:var(--ss-vinova);
}
/* kolofon — poznámková/kreditová věta (např. „Kávu připravujeme…").
Správné použití: . Selektor :has() níže je most
pro stávající neoznačený obsah na stránce Menu. */
.ss-kolofon, .in-menu > .container > p:has(strong):not(:has(img)){
font-size:22px !important;line-height:1.4;text-align:center;
color:var(--ss-vinova) !important;margin:56px 0 16px !important;
}
.ss-kolofon strong, .in-menu > .container > p:has(strong):not(:has(img)) strong{font-weight:500 !important;color:inherit;}
.in-menu > .container > p:has(img){margin-top:40px !important;}
.in-menu > .container p img{border-radius:12px;}
/* PLAKÁTOVÝ TITULEK — JEDINÁ definice registru (viz styleguide).
Platí pro pattern třídu i všechna místa použití — změna zde = změna všude. */
.ss-titulek-plakat, .welcome h2, .in-menu article h2, .ss-pribeh h2{
font-family:var(--ss-pismo);
font-size:32px !important;font-weight:700 !important;
letter-spacing:-0.3px !important;line-height:1.1 !important;
color:var(--ss-ruzova-tmava) !important;
text-transform:none !important;
margin:0 0 14px !important;
}
.in-menu article h2{text-align:center;margin:32px 0 20px !important;}
.ss-sesit-karta,.ss-sesit-karta--inverz{position:relative;border:2px solid var(--ss-ruzova-tmava);border-radius:var(--ss-radius-karta);overflow:hidden;}
.ss-sesit-karta{background:var(--ss-papir);}
.ss-sesit-karta--inverz{background:var(--ss-ruzova);}
.ss-sesit-karta::before,.ss-sesit-karta--inverz::before{
content:"";display:block;position:absolute;inset:0;pointer-events:none;
border-radius:calc(var(--ss-radius-karta) - 2px);background-size:40px 40px;z-index:0;
}
.ss-sesit-karta::before{
background-image:linear-gradient(to right,rgba(217,125,147,.35) 1.5px,transparent 1.5px),
linear-gradient(to bottom,rgba(217,125,147,.35) 1.5px,transparent 1.5px);
}
.ss-sesit-karta--inverz::before{
background-image:linear-gradient(to right,rgba(252,251,241,.55) 1.5px,transparent 1.5px),
linear-gradient(to bottom,rgba(252,251,241,.55) 1.5px,transparent 1.5px);
}
.ss-sesit-karta > *,.ss-sesit-karta--inverz > *{position:relative;z-index:1;}
/* (duplikát kolofonu s visícím selektorem odstraněn 7. 8. 2026 —
kanonická definice .ss-kolofon je výše ve vrstvě 4) */
/* na růžovém podkladu musí titulek do vínové; !important nutné, protože
kanonické plakátové pravidlo barvu zamyká !important (výjimka registru) */
.ss-sesit-karta--inverz .ss-titulek-plakat{color:var(--ss-vinova) !important;}
/* --- HP: příběhový pruh „O nás" (obsah v Titulní straně) ---
Obsah je v editoru vložen se style="display:none" — zobrazí ho až tento
(bránou řízený) stylesheet. Po go-live lze inline atribut smazat. */
.ss-pribeh{display:block !important;max-width:var(--ss-sirka-obsah);margin:0 auto var(--ss-mezera-9);padding:0 24px;}
.ss-pribeh-radek{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px;}
.ss-pribeh-radek:nth-child(even) .ss-pribeh-text{order:2;}
.ss-pribeh-radek:nth-child(even) .ss-pribeh-foto{order:1;}
.ss-pribeh p{font-size:var(--ss-text-base);line-height:1.65;color:var(--ss-text);margin:0;}
.ss-pribeh-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--ss-radius-karta);display:block;}
@media(max-width:800px){
/* mobil: první sloupec příběhu seděl nalepený na bannerový grid */
.ss-pribeh{margin-top:44px;}
.ss-pribeh-radek{grid-template-columns:1fr;gap:20px;margin-bottom:48px;}
.ss-pribeh-radek:nth-child(even) .ss-pribeh-text{order:0;}
.ss-pribeh-radek:nth-child(even) .ss-pribeh-foto{order:0;}
}
/* --- pilulkový odkaz (obecné CTA v obsahu; šablonová tlačítka mají vrstvu 3) --- */
.ss-pilulka{
display:inline-flex;align-items:center;justify-content:center;
height:48px;padding:2px 36px 0; /* 2px top = korekce hlubokého descenderu Camptonu */
border-radius:var(--ss-radius-pill);
background:var(--ss-inkoust);color:var(--ss-kremova);
font-family:var(--ss-pismo);font-size:14px;font-weight:600;
letter-spacing:2px;text-transform:uppercase;text-decoration:none;line-height:1;
transition:background .15s,color .15s;
}
.ss-pilulka:hover{background:var(--ss-vinova);color:#fff;}
.ss-sesit-karta--inverz .ss-pilulka{background:var(--ss-vinova);}
.ss-sesit-karta--inverz .ss-pilulka:hover{background:var(--ss-inkoust);}
/* --- HP zóna „Více od nás" (za příběhem; obsah v Titulní straně, display:none
+ reveal níže; pořadí sekcí řeší flex order — viz vrstva 3, BEZ skriptů) --- */
.ss-vice-oddelovac{max-width:var(--ss-sirka-obsah);width:100%;margin:0 auto var(--ss-mezera-6);padding:0 24px;text-align:left;}
.ss-vice-oddelovac .ss-stitek{display:inline-block;padding:0 20px 0 0;background:var(--ss-kremova);position:relative;z-index:1;margin:0;}
.ss-vice-oddelovac::after{content:"";display:block;border-top:1px solid #d8c5cc;margin-top:-9px;}
.ss-karty-dvojice{max-width:var(--ss-sirka-obsah);width:100%;margin:0 auto var(--ss-mezera-6);padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.ss-karty-dvojice > *{display:flex;flex-direction:column;}
.ss-karta-obsah{padding:32px 36px 36px;display:flex;flex-direction:column;align-items:flex-start;flex:1;}
.ss-karta-obsah .ss-stitek{margin:0 0 12px;}
.ss-karta-obsah p:not(.ss-stitek){font-size:var(--ss-text-base);line-height:1.6;color:var(--ss-text);margin:0 0 var(--ss-mezera-3);}
.ss-karta-obsah .ss-pilulka{margin-top:auto;}
.ss-karta-foto{width:100%;aspect-ratio:3/1;object-fit:cover;object-position:50% 30%;display:block;}
@media(max-width:800px){.ss-karty-dvojice{grid-template-columns:1fr;gap:20px;}}
.ss-novinky-stitek{max-width:var(--ss-sirka-obsah);width:100%;margin:0 auto;padding:0 24px;}
.ss-novinky-stitek .ss-stitek{margin:0 0 8px;}
.ss-novinky-pata{max-width:var(--ss-sirka-obsah);width:100%;margin:0 auto var(--ss-mezera-4);padding:24px 24px 0;text-align:left;}
/* kolofon podpory — jemnější sourozenec .ss-kolofon (ten má 22px !important,
proto samostatná třída místo modifikátoru) */
.ss-podpora{text-align:center;font-size:var(--ss-text-base);color:var(--ss-vinova);margin:0 auto var(--ss-mezera-9);padding-top:36px;}
.ss-podpora img{height:36px;vertical-align:middle;margin-left:14px;display:inline-block;}
/* reveal bloků zóny (v Titulní straně vloženy se style="display:none" —
inline styl přebije jen !important; stejný vzorec jako .ss-pribeh) */
.ss-vice-oddelovac,.ss-karty-dvojice,.ss-novinky-stitek,.ss-novinky-pata{display:block !important;}
.ss-karty-dvojice{display:grid !important;}
p.ss-podpora{display:block !important;}
/* reveal položky NOVINKY v menu — pro zákazníky ji do go-live skrývá řádek
v Záhlaví (ungated