. */
div.ModuleseIntranet .mod-lead p,
div.ModuleseIntranet .mod-lead li {
color: inherit;
}
div.ModuleseIntranet .mod-lead p:last-child {
margin-bottom: 0;
}
.mod-actions {
margin: 0;
}
.mod-btn {
display: inline-block;
margin: 0 10px 10px 0;
padding: 13px 24px;
border: 1px solid transparent;
border-radius: var(--m-radius);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
div.ModuleseIntranet a.mod-btn--primary {
background: var(--m-brand);
border-color: var(--m-brand);
color: #FFFFFF;
}
div.ModuleseIntranet a.mod-btn--primary:hover,
div.ModuleseIntranet a.mod-btn--primary:focus {
background: #2980b9;
border-color: #2980b9;
color: #FFFFFF;
text-decoration: none;
}
div.ModuleseIntranet a.mod-btn--ghost {
background: transparent;
border-color: #4A5B68;
color: #FFFFFF;
}
div.ModuleseIntranet a.mod-btn--ghost:hover,
div.ModuleseIntranet a.mod-btn--ghost:focus {
background: rgba(255, 255, 255, 0.08);
border-color: #7E8E9A;
color: #FFFFFF;
text-decoration: none;
}
/* Metaradek - jazykove vlajky a odkaz na wiki. Drive to byl sedivy pruh
pres celou sirku hned pod nadpisem (moduly-intranet-all.php:16-20),
coz je na tak okrajovou informaci prilis silne misto. */
.mod-masthead-meta {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
font-size: 13px;
}
.mod-masthead-meta > .container {
display: flex;
flex-wrap: wrap;
gap: 6px 28px;
align-items: center;
padding-top: 12px;
padding-bottom: 12px;
}
.mod-langs {
display: flex;
align-items: center;
gap: 8px;
color: #8A9BA8;
}
.mod-langs img {
display: inline-block;
vertical-align: middle;
}
div.ModuleseIntranet a.mod-wiki {
color: #C7D2DB;
text-decoration: none;
}
div.ModuleseIntranet a.mod-wiki:hover {
color: #FFFFFF;
text-decoration: underline;
}
/* === Snimek produktu ============================================== */
/* Drive col-md-4 vedle textu, tedy nejpresvedcivejsi prvek stranky
v ctvrtinove velikosti. Ted pres celou sirku hned pod hlavickou. */
.mod-showcase {
padding: 44px 0;
background: var(--m-mist);
border-bottom: 1px solid var(--m-line);
text-align: center;
}
.mod-shot {
margin: 0 auto;
max-width: 1040px;
}
.mod-shot + .mod-shot {
margin-top: 32px;
}
.mod-shot img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid var(--m-line);
border-radius: var(--m-radius);
background: #FFFFFF;
}
.mod-intro {
max-width: var(--m-measure);
margin: 32px auto 0 auto;
font-size: 17px;
line-height: 1.65;
text-align: left;
}
/* === Sekce ======================================================== */
.mod-section {
padding: 52px 0;
}
.mod-section + .mod-section {
border-top: 1px solid var(--m-line);
}
/* Nadpis sekce drzi levou hranu s obsahem pod sebou. Nad mrizkou
dlazdic je to hrana kontejneru, nad ctecim sloupcem (FAQ) hrana
toho sloupce - jinak nadpis "utece" o 190 px doleva. */
.mod-section-head {
margin: 0 0 28px 0;
}
.mod-section-head--narrow {
max-width: var(--m-measure);
margin-left: auto;
margin-right: auto;
}
.mod-section-head h2 {
margin: 0;
font-size: 28px;
line-height: 1.2;
}
/* === Obsah z databaze: kratke bloky (www_text_all_json) =========== */
/* HTML pise redaktor do DB, sablona ho jen vysype. Vsechno nize proto
styluje cizi znacky zvenci. Puvodne to sedelo v col-md-6, takze je
text psany v a karty jsou pod sebou - v plne sirce se z toho
dela mrizka. */
.mod-rich > .row,
.mod-rich .row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-left: 0;
margin-right: 0;
}
/* Bootstrap 3 dela clearfix pres .row:before/.row:after (content:" ").
V grid kontejneru se z pseudoelementu stavaji plnohodnotne polozky
mrizky - prvni karta pak zacina az v druhem sloupci a posledni
bunka zustava prazdna. Plati pro .mod-rich i .mod-prose. */
.mod-rich .row::before,
.mod-rich .row::after,
.mod-prose .row::before,
.mod-prose .row::after {
display: none;
}
.mod-rich .row > * {
float: none;
width: auto;
padding-left: 0;
padding-right: 0;
margin-bottom: 0 !important;
}
.mod-rich .panel {
height: 100%;
margin: 0;
background: #FFFFFF;
border: 1px solid var(--m-line);
border-radius: var(--m-radius);
box-shadow: none;
transition: border-color 0.15s ease;
}
.mod-rich .panel:hover {
border-color: #BFCDD8;
}
.mod-rich .panel-body {
padding: 20px;
}
.mod-rich .panel-body > i.fa {
display: block;
margin: 0 0 12px 0 !important;
font-size: 22px;
color: var(--m-brand);
}
.mod-rich .panel-body > strong {
display: block;
margin-bottom: 8px;
font-size: 17px;
line-height: 1.3;
font-weight: 600;
color: var(--m-ink);
overflow-wrap: anywhere;
}
/* Redaktor sazi popisky do , protoze puvodni sloupec byl uzky.
Bootstrap z toho dela 65 %, coz je v plne sirce necitelne. */
.mod-rich small,
.mod-prose small {
font-size: 0.95em;
}
.mod-rich .text-muted,
.mod-prose .text-muted {
color: var(--m-muted);
}
.mod-rich .text-primary,
.mod-prose .text-primary {
color: var(--m-brand-tx);
}
.mod-rich p:last-child,
.mod-prose p:last-child {
margin-bottom: 0;
}
/* Nadpis
je v DB bezny. Bootstrap ze
uvnitr nadpisu dela sedivy text o 35 % mensi - nadpis pak vypada
jako poznamka. */
.mod-rich h2 small,
.mod-rich h3 small,
.mod-rich h4 small,
.mod-prose h2 small,
.mod-prose h3 small,
.mod-prose h4 small {
font-size: 100%;
font-weight: inherit;
color: inherit;
}
.mod-rich h3 {
margin: 40px 0 18px 0;
font-size: 22px;
line-height: 1.25;
}
.mod-rich h3:first-child {
margin-top: 0;
}
/* Dlouhy odrazkovy vypis vyhod. V jednom sloupci to bylo pres dve
obrazovky, v mrizce se to precte najednou. */
.mod-rich ul.list-unstyled {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 4px 32px;
margin: 0;
padding: 0;
}
.mod-rich ul.list-unstyled > li {
margin-bottom: 18px !important;
padding-left: 26px;
position: relative;
}
.mod-rich ul.list-unstyled > li > i.fa {
position: absolute;
left: 0;
top: 5px;
margin: 0 !important;
}
.mod-rich ul.list-unstyled > li > strong {
display: block;
margin-bottom: 4px;
font-size: 15px;
color: var(--m-ink);
}
.mod-rich .well {
height: 100%;
margin: 0;
padding: 14px 16px;
background: var(--m-mist);
border: 1px solid var(--m-line);
border-left: 3px solid var(--m-brand);
border-radius: var(--m-radius);
box-shadow: none;
font-size: 14px;
}
.mod-rich .alert-info {
background: var(--m-brand-tt);
border: 1px solid #C6E0F2;
border-radius: var(--m-radius);
color: var(--m-slate);
}
/* === Obsah z databaze: dlouhy text (WebTextAI, www_text_deep_json) ==
Ctecí sloupec. .ModuleTextDeep nemel doted zadne CSS vubec, sazel se
13px pismem pres celou sirku kontejneru. */
.mod-prose {
max-width: var(--m-measure);
margin: 0 auto;
font-size: 16px;
line-height: 1.7;
}
.mod-prose h2 {
margin: 48px 0 16px 0;
font-size: 28px;
line-height: 1.2;
}
.mod-prose h3 {
margin: 36px 0 12px 0;
font-size: 20px;
line-height: 1.3;
}
.mod-prose h4 {
margin: 28px 0 10px 0;
font-size: 17px;
}
.mod-prose > *:first-child,
.mod-prose h2:first-child {
margin-top: 0;
}
.mod-prose p,
.mod-prose ul,
.mod-prose ol {
margin: 0 0 18px 0;
}
.mod-prose li {
margin-bottom: 8px;
}
.mod-prose strong {
color: var(--m-ink);
}
/* Tabulky z DB maji az sest sloupcu a v ctecim sloupci se nevejdou.
Vlastni obal jim pridat nelze (HTML je z databaze), scrolluje proto
samotna tabulka. css/page_srovnani.css:67-91 resi totez prevodem na
karty, to ale vyzaduje data-label atributy primo ve znackach. */
.mod-prose table {
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 24px 0;
overflow-x: auto;
border-collapse: collapse;
font-size: 15px;
}
.mod-prose table th,
.mod-prose table td {
padding: 10px 14px;
border: 1px solid var(--m-line);
text-align: left;
vertical-align: top;
}
.mod-prose table th {
background: var(--m-mist);
font-weight: 600;
color: var(--m-ink);
}
.mod-prose table tbody tr:nth-child(even) td {
background: #FAFCFD;
}
/* Cisla, casy a ceny. Tabulkove cislice drzi sloupce zarovnane. */
.mod-prose table td {
font-variant-numeric: tabular-nums;
}
.mod-prose .row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
margin: 0 0 24px 0;
}
.mod-prose .row > * {
float: none;
width: auto;
padding: 0;
}
.mod-prose .panel,
.mod-prose .well {
margin: 0;
height: 100%;
background: var(--m-mist);
border: 1px solid var(--m-line);
border-radius: var(--m-radius);
box-shadow: none;
}
.mod-prose .panel-body {
padding: 18px;
}
.mod-prose blockquote {
margin: 24px 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--m-brand);
font-size: 17px;
color: var(--m-ink);
}
/* === FAQ ========================================================== */
/* Bootstrapovy .panel-group bez jakekoliv zpetne vazby - slo poznat
jen podle toho, ze se neco rozbalilo. */
.mod-faq {
max-width: var(--m-measure);
margin: 0 auto;
}
.mod-faq .panel {
margin: 0;
background: transparent;
border: 0;
border-top: 1px solid var(--m-line);
border-radius: 0;
box-shadow: none;
}
.mod-faq .panel:last-child {
border-bottom: 1px solid var(--m-line);
}
.mod-faq .panel-heading {
padding: 0;
background: transparent;
border: 0;
}
.mod-faq .panel-title {
margin: 0;
font-size: 17px;
line-height: 1.4;
}
div.ModuleseIntranet .mod-faq .panel-title > a {
display: block;
position: relative;
padding: 18px 44px 18px 0;
color: var(--m-ink);
font-weight: 600;
text-decoration: none;
}
div.ModuleseIntranet .mod-faq .panel-title > a:hover {
color: var(--m-brand-tx);
}
.mod-faq .panel-title > a::after {
content: "\f107"; /* fa-angle-down, Font Awesome 4.7 je v bundlu */
font-family: FontAwesome;
position: absolute;
right: 8px;
top: 50%;
margin-top: -12px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 18px;
font-weight: normal;
color: var(--m-muted);
transition: transform 0.15s ease;
}
/* Bootstrap 3 prepisuje aria-expanded na spousteci kotve sam. */
.mod-faq .panel-title > a[aria-expanded="true"]::after {
transform: rotate(180deg);
color: var(--m-brand);
}
.mod-faq .panel-body {
padding: 0 44px 22px 0;
border: 0 !important;
}
/* === Zaverecna vyzva ============================================== */
.mod-cta {
padding: 44px 0;
background: var(--m-ink);
text-align: center;
}
div.ModuleseIntranet .mod-cta p {
max-width: 34em;
margin: 0 auto 22px auto;
font-size: 20px;
line-height: 1.4;
color: #FFFFFF;
}
.mod-cta .mod-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 4px;
}
/* === Souvisejici moduly =========================================== */
/* Zamerne vlastni trida misto .service z css/blocks.css:174-198 - ta
je sdilena s /modules-intranet, homepage a cenikem. */
.mod-related {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
div.ModuleseIntranet a.mod-tile {
display: block;
height: 100%;
padding: 20px;
background: #FFFFFF;
border: 1px solid var(--m-line);
border-radius: var(--m-radius);
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
div.ModuleseIntranet a.mod-tile:hover,
div.ModuleseIntranet a.mod-tile:focus {
background: var(--m-mist);
border-color: #BFCDD8;
text-decoration: none;
}
.mod-tile i.fa {
display: block;
margin-bottom: 12px;
font-size: 24px;
color: var(--m-brand);
}
.mod-tile h3 {
margin: 0 0 6px 0;
font-size: 16px;
line-height: 1.3;
color: var(--m-ink);
}
.mod-tile p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--m-muted);
}
/* === Breakpointy ================================================== */
/* Mobile-first min-width, stejne jako css/page_srovnani.css a novejsi
casti css/custom.css. */
@media (min-width: 768px) {
.mod-masthead-inner {
padding-top: 72px;
padding-bottom: 52px;
}
.mod-title {
font-size: 46px;
}
.mod-tagline {
font-size: 24px;
}
.mod-showcase {
padding: 56px 0;
}
.mod-section {
padding: 64px 0;
}
}
@media (min-width: 992px) {
/* Od 992px je .header.header-sticky position:fixed
(css/headers/header-default.css:449-455) a zadne odsazeni nema -
css/style.css:39-45 pada jen na tridu .header-fixed-space, kterou
index.php:457 nikdy nevypisuje. Ostatni stranky si to resi samy: cerveny
pruh .breadcrumbs-v1 ma padding: 100px 0 20px (css/blocks.css:10-15).
Masthead by jinak zacinal pod hlavickou a prisel o prvni radek.
Odsazeni je tady bezpecne na , protoze se cely tento soubor nacita
jen na detailu modulu.
Vyska hlavicky je merena, ne odhadnuta: 992-1199px se menu lame do dvou
radku (116px), od 1200px se vejde na jeden (76px) - tam .header .container
roste na 1195px, viz css/custom.css:36-40. Stejne ve vsech sedmi jazycich. */
body.header-fixed {
padding-top: 116px;
}
.mod-title {
font-size: 56px;
}
.mod-masthead-copy {
/* Vodoznak ikony zabira pravou tretinu, text se s nim nesmi
prekryvat. Omezuje se text, ne .container - ten musi zustat
zarovnany s obsahem nize. */
max-width: 74%;
}
}
@media (min-width: 1200px) {
/* Menu se vejde na jeden radek, hlavicka je o 40px nizsi. */
body.header-fixed {
padding-top: 76px;
}
}
/* Vodoznak je na uzkych displejich jen sum a na pozadi textu skodi. */
@media (max-width: 767px) {
/* Snimek ma 1238px a na telefonu se vejde na ~330px - z rozhrani aplikace
zbyde slitek, ve kterem se neprecte jediny popisek. V te velikosti uz nic
nesdeluje, jen stoji 100-350 kB na pripojeni, ktere si to muze dovolit
nejmene. Samotne display:none nestaci, obrazek by se stahl stejne - proto
ma