/* ═══════════════════════════════════════════════════════════════════════════
HCA MORAVIA — designový systém pro tištěné a PDF materiály
Verze 1.0 · 2026-08-11
Použití:
Dokumentace: MASTER-HCA-DESIGN.md
Tuto šablonu needituj — vzhled má být stejný na všech materiálech.
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
--navy:#123b6d; /* hlavní barva značky */
--navy-d:#0f3158;
--navy-l:#1b4c86;
--deep:#0f172a; /* nejtmavší plocha — obálky */
--gold:#b9852d; /* akcent, ceny, linky — nikdy velká plocha */
--gold-l:#d2a14a;
--ivory:#f7f5ef; /* papír */
--paper-2:#efece2; /* jemné odsazené plochy na papíru */
--ink:#22252b; /* běžný text na papíru */
--ink-2:#4a5361; /* sekundární text */
--ink-3:#8a8578; /* popisky, poznámky */
--line:#e5dfce; /* linky na papíru */
--line-dark:rgba(247,245,239,.15);
--sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{font-family:var(--sans);background:#2a3345;color:var(--ink);
display:flex;flex-direction:column;align-items:center;gap:22px;padding:22px 0}
/* ─────────────────────────────────────────────────── formáty stran ───────── */
/* .page = A4 na výšku, světlý papír → ponuka, one-pager, pozvánka
.page.navy = A4 na výšku, modrá plocha → obálky, oddělovače
.page.list = A4 hlavičkový papír → dopisy, potvrzení
.slide = 16:9 prezentace → deck */
.page{width:794px;height:1123px;background:var(--ivory);position:relative;
overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 14px 44px rgba(0,0,0,.42)}
.page.navy{background:var(--navy);color:var(--ivory)}
.slide{width:1280px;height:720px;background:var(--ivory);position:relative;
overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 14px 44px rgba(0,0,0,.42)}
.slide.navy{background:var(--navy);color:var(--ivory)}
.pad{padding:0 46px 26px;display:flex;flex-direction:column;height:100%}
.slide .pad{padding:0 64px 40px}
/* ─────────────────────────────────────────── hlavička a patička strany ───── */
.head{background:var(--navy);margin:0 -46px;padding:17px 46px 15px;
border-bottom:3px solid var(--gold);flex:none;
display:flex;justify-content:space-between;align-items:center}
.slide .head{margin:0 -64px;padding:18px 64px 16px}
.head img{height:40px}
.head .tg{text-align:right;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
color:rgba(247,245,239,.72);line-height:1.75}
.head .tg b{color:var(--gold-l);font-weight:700}
.page.navy .head,.slide.navy .head{background:none;border-bottom:1px solid var(--line-dark);
margin:0;padding:34px 0 14px}
.foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);flex:none;
display:flex;justify-content:space-between;align-items:center;
font-size:9.5px;color:var(--ink-3)}
.foot b{color:var(--gold);font-weight:600}
.pagenum{color:var(--gold);font-weight:700;letter-spacing:.11em}
.page.navy .foot,.slide.navy .foot{border-top-color:var(--line-dark);color:rgba(247,245,239,.6)}
/* ─────────────────────────────────────────────────────────── typografie ──── */
.kick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
color:var(--gold);display:flex;align-items:center;gap:10px;margin-top:26px}
.kick::before{content:"";width:22px;height:2px;background:var(--gold);flex:none}
h1{font-size:30px;font-weight:800;letter-spacing:-.7px;line-height:1.18;
margin-top:9px;color:var(--navy)}
h1 span{color:var(--gold)}
.slide h1{font-size:42px;letter-spacing:-1.2px;margin-top:12px}
.page.navy h1,.slide.navy h1{color:var(--ivory)}
.page.navy h1 span,.slide.navy h1 span{color:var(--gold-l)}
h2{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--navy)}
.lead{font-size:13.5px;color:var(--ink-2);line-height:1.75;margin-top:8px;max-width:640px}
.slide .lead{font-size:16px;max-width:820px}
.page.navy .lead,.slide.navy .lead{color:rgba(247,245,239,.75)}
p{font-size:13px;line-height:1.75;color:var(--ink-2);margin-top:10px}
.rule{height:2px;background:var(--gold);width:60px;margin:12px 0 26px}
/* ────────────────────────────────────────────────────── hlavička položky ─── */
/* název + cena nad zlatou linkou — používej u semináře, služby, balíčku */
.title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
padding-bottom:14px;border-bottom:2px solid var(--gold);margin-top:22px}
.title .nm{font-size:34px;font-weight:800;color:var(--navy);line-height:1.18;letter-spacing:-.9px}
.title .alt{font-size:11px;color:var(--ink-3);margin-top:6px}
.title .meta{text-align:right;white-space:nowrap;flex:none}
.title .price{font-size:25px;font-weight:800;color:var(--gold)}
.title .sub{font-size:10.5px;color:var(--ink-3);margin-top:4px}
.badge{display:inline-block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
font-weight:800;color:var(--navy);border:1px solid rgba(18,59,109,.3);
border-radius:20px;padding:3px 10px;margin-bottom:9px}
.badge.muted{color:var(--ink-3);border-color:var(--line)}
/* ──────────────────────────────────────────────────── hmotné komponenty ──── */
/* metarow — tři velké údaje vedle sebe (rozsah / cena / návaznost) */
.metarow{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;
border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.metarow > div{padding:18px 22px;border-right:1px solid var(--line)}
.metarow > div:last-child{border-right:none}
.metarow .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);font-weight:700}
.metarow .v{font-size:22px;font-weight:800;color:var(--navy);margin-top:6px;line-height:1.15}
.metarow .v.gold{color:var(--gold)}
.metarow .s{font-size:10.5px;color:var(--ink-3);margin-top:4px}
/* label nad blokem */
.lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
font-weight:800;margin-top:30px;margin-bottom:10px}
/* modrý blok s odrážkami — hlavní nositel „hmoty" na světlé straně */
ul.gains{list-style:none;background:var(--navy);border-radius:14px;padding:24px 30px 22px}
ul.gains li{font-size:14px;line-height:1.75;color:rgba(247,245,239,.95);
padding-left:20px;position:relative;margin-bottom:12px}
ul.gains li:last-child{margin-bottom:0}
ul.gains li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
border-radius:50%;background:var(--gold-l)}
/* číslované karty — osnova, kroky, moduly */
.modgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.modcard{border:1px solid var(--line);background:#fff;border-radius:11px;padding:15px 17px;
display:flex;gap:13px;align-items:flex-start}
.modcard .n{font-size:21px;font-weight:900;color:var(--gold);line-height:1;flex:none;min-width:26px}
.modcard .t{font-size:12.5px;line-height:1.6;color:#2f3540}
/* proužek faktů — místo, kapacita, termín, platba */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.facts > div{border-top:2px solid var(--gold);padding-top:11px}
.facts .k{font-size:9px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);font-weight:700}
.facts .v{font-size:13px;font-weight:800;color:var(--navy);margin-top:5px;line-height:1.35}
.facts .s{font-size:10px;color:var(--ink-3);margin-top:5px;line-height:1.5}
/* výsledek / hlavní sdělení */
.out{font-size:15px;line-height:1.75;color:var(--navy);font-weight:600;
border-left:4px solid var(--gold);padding-left:18px;margin-top:26px}
/* velký citát klienta */
.pull{background:var(--navy);border-radius:14px;padding:26px 30px;
display:flex;gap:20px;align-items:flex-start}
.pull img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.pull .q{font-size:15px;line-height:1.7;color:var(--ivory);font-style:italic}
.pull .a{font-size:12px;color:var(--gold-l);font-weight:800;margin-top:12px}
.pull .r{font-size:10.5px;color:rgba(247,245,239,.62);margin-top:2px}
/* malý citát do řady */
.quote{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
padding:15px 17px;display:flex;gap:12px;align-items:flex-start}
.quote img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.quote .q{font-size:12px;line-height:1.7;font-style:italic;color:#3b4250}
.quote .a{font-size:10.5px;color:var(--navy);font-weight:800;margin-top:8px}
.quote .r{font-size:9.5px;color:var(--ink-3)}
/* rámečky 2×2 nebo 3×1 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.box h4{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:6px}
.box p{font-size:11.5px;line-height:1.65;color:var(--ink-2);margin:0}
.page.navy .box,.slide.navy .box{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.page.navy .box h4,.slide.navy .box h4{color:var(--gold-l)}
.page.navy .box p,.slide.navy .box p{color:rgba(247,245,239,.75)}
/* číslované kroky pod sebou */
.step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.step .no{font-size:20px;font-weight:900;color:var(--gold);width:36px;flex:none;line-height:1.1}
.step h4{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:4px}
.step p{font-size:12px;color:var(--ink-2);line-height:1.7;margin:0}
/* sekce s ikonou */
.sechead{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.sechead .ic{width:26px;height:26px;border-radius:7px;background:rgba(18,59,109,.09);
display:flex;align-items:center;justify-content:center;flex:none}
.sechead .ic img{width:15px}
.sechead h3{font-size:12.5px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--navy)}
.page.navy .sechead .ic,.slide.navy .sechead .ic{background:rgba(210,161,74,.16)}
.page.navy .sechead h3,.slide.navy .sechead h3{color:var(--gold-l)}
/* tabulka — ceník, program, seznam */
table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
td,th{padding:9px;vertical-align:middle;border-bottom:1px solid var(--line);text-align:left}
th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3);font-weight:700;border-bottom-width:2px}
tr:nth-child(even) td{background:rgba(18,59,109,.045)}
td.nm{font-weight:600}
td.nm small{display:block;font-size:10px;color:var(--ink-3);font-weight:400;margin-top:2px}
td.d{color:var(--ink-3);width:100px;white-space:nowrap}
td.pr{color:var(--gold);font-weight:800;text-align:right;width:120px;white-space:nowrap}
td.pr i{font-style:normal;font-size:9.5px;color:var(--ink-3);display:block;font-weight:500}
.page.navy td,.slide.navy td{border-bottom-color:var(--line-dark);color:var(--ivory)}
.page.navy tr:nth-child(even) td,.slide.navy tr:nth-child(even) td{background:rgba(255,255,255,.035)}
/* fotopás — vyplní zbytek strany */
.photo{width:100%;border-radius:12px;object-fit:cover;height:180px}
.photo.grow{flex:1;min-height:0;height:auto}
/* logo wall — reference klientů */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
padding-top:16px;border-top:1px solid var(--line)}
.logos img{width:100%;height:42px;object-fit:contain;background:#fff;
border:1px solid var(--line);border-radius:7px;padding:7px 10px}
/* poznámky pod čarou */
ul.notes{list-style:none;padding-top:12px;border-top:1px solid var(--line);margin-top:14px}
ul.notes li{font-size:9.5px;color:var(--ink-3);line-height:1.6;
padding-left:12px;position:relative;margin-bottom:3px}
ul.notes li::before{content:"—";position:absolute;left:0;color:var(--gold)}
/* rozpustí zbytkové místo do mezer místo díry dole */
.flow{flex:1;display:flex;flex-direction:column;justify-content:space-between}
/* ──────────────────────────────────────────────────────────────── obálka ─── */
.cover{background:var(--deep);justify-content:flex-end;color:var(--ivory)}
.cover .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30}
.cover .veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,23,42,.82) 0%,rgba(18,59,109,.58) 26%,
rgba(18,59,109,.86) 62%,rgba(15,23,42,.97) 100%)}
.cover .inner{position:relative;padding:0 56px 54px;display:flex;
flex-direction:column;height:100%}
.cover .top{padding-top:52px}
.cover .top img{height:66px}
.cover h1{font-size:44px;line-height:1.1;margin-top:16px;letter-spacing:-1.4px;color:var(--ivory)}
.cover h1 span{color:var(--gold-l)}
.cover .sub{font-size:14px;color:rgba(247,245,239,.75);margin-top:14px;
line-height:1.6;max-width:520px}
.cover .yr{font-size:11px;letter-spacing:.32em;text-transform:uppercase;
color:var(--gold-l);font-weight:800;margin-top:6px}
.cover .mid{margin-top:auto}
.cover .bar{margin-top:26px;padding-top:16px;border-top:1px solid var(--line-dark);
display:flex;justify-content:space-between;font-size:10.5px;
color:rgba(247,245,239,.7)}
.cover .bar b{color:var(--gold-l)}
.accent{height:4px;position:absolute;bottom:0;left:0;right:0;
background:linear-gradient(90deg,var(--gold) 0%,var(--gold-l) 45%,transparent 100%)}
/* ────────────────────────────────────────────────── hlavičkový papír ─────── */
.page.list .pad{padding:0 62px 30px}
.page.list .head{margin:0 -62px;padding:22px 62px 20px}
.page.list .head img{height:46px}
.letter{margin-top:44px;flex:1}
.letter .addr{font-size:12px;line-height:1.7;color:var(--ink-2)}
.letter .date{font-size:12px;color:var(--ink-3);margin-top:26px;text-align:right}
.letter .subj{font-size:15px;font-weight:800;color:var(--navy);margin-top:26px}
.letter p{font-size:13px;line-height:1.85;color:var(--ink);margin-top:14px}
.letter .sign{margin-top:38px;font-size:13px;line-height:1.7}
.letter .sign b{color:var(--navy)}
.letterfoot{border-top:2px solid var(--gold);padding-top:12px;
display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-3)}
/* ─────────────────────────────────────────────────────────────── závěr ───── */
.cta{display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}
.cta h1{font-size:34px;margin-bottom:14px}
.cta .lead{margin:0 auto}
.cta .big{font-size:26px;font-weight:800;color:var(--gold);margin-top:18px}
.cta .row{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.7}
.cta .fine{font-size:9.5px;color:var(--ink-3);margin-top:26px;line-height:1.7}
/* ─────────────────────────────────────────────────────────────── tisk ────── */
@media print{
body{background:#fff;gap:0;padding:0}
.page,.slide{box-shadow:none;page-break-after:always}
.page:last-child,.slide:last-child{page-break-after:auto}
@page{size:A4;margin:0}
}
/* Prezentace: přidej do stránky s .slide → */