a . Bez týchto pravidiel by
* dlhý riadok roztiahol celú stránku do šírky namiesto toho, aby sa posúval
* sám v sebe.
*/
code {
padding: .1em .35em;
border-radius: 4px;
background: #f2f3f7;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .9em;
color: #2d2e79;
}
pre {
max-width: 100%;
padding: 16px 18px;
border-radius: 10px;
background: #23241f;
color: #f8f8f2;
overflow-x: auto;
}
pre code { padding: 0; background: none; color: inherit; }
/* --------------------------------------------------------------------------
Vlajka kategórie v hlavnom menu
Výška je viazaná na riadok textu, nie na pevné pixely — názov „Služby
Nemecko" a vlajka tak sedia na jednej linke aj v rozbalenom menu na mobile.
-------------------------------------------------------------------------- */
.navbar-nav .nav-flag {
width: auto;
height: 0.9em;
margin-right: 8px;
border-radius: 2px;
vertical-align: -1px;
}
/* --------------------------------------------------------------------------
Ceny na dlaždici služby
Dlaždica ukazuje obe ceny — živnostník aj firma — a typ patrí k sume, nie
nad ňu. Zvyšok dlaždice je téma, tu je len to, čo v nej pre dva riadky
chýbalo.
-------------------------------------------------------------------------- */
.price-act h4 + h4 {
margin-top: 6px;
}
.price-act h4 small {
margin-left: 6px;
font-size: 13px;
font-weight: 400;
color: var(--shop-muted);
}
.price-act h4 em {
font-size: 18px;
font-style: normal;
color: var(--shop-muted);
}
/* --------------------------------------------------------------------------
Súhlas so spracovaním údajov na svetlom pozadí
Zaškrtávacie políčko je na celom webe jedno: .custome-chackbx z témy.
Tá ho kreslí pre tmavomodrý panel — biele okienko, biely text. Na svetlej
kontaktnej stránke by biele okienko na bielom nebolo vidieť, preto tu
dostáva tmavomodrý rám a text. Zaškrtnuté vyzerá rovnako na oboch
pozadiach: zlaté okienko s tmavomodrou fajkou.
-------------------------------------------------------------------------- */
.contact-profile .custome-chackbx .styled-checkbox + label,
.contact-profile .custome-chackbx .styled-checkbox + label a {
color: var(--shop-navy);
}
.contact-profile .custome-chackbx .styled-checkbox + label:before {
border: 1px solid var(--shop-navy);
}
.contact-profile .custome-chackbx .styled-checkbox:focus-visible + label:before {
outline: 3px solid rgba(45, 46, 121, .25);
outline-offset: 2px;
}
/* ==========================================================================
Katalóg služieb
Výpis kategórie je prvý krok nákupu, nie iná stránka — má preto tie isté
karty a farby ako košík. Hlavička ostáva rovnaká ako na kontaktnej stránke
a pod ňou sú rovno kategórie.
========================================================================== */
/* Banner bez fotky. Téma necháva .service-banner-wrp spodok otvorený, lebo
počíta s obrázkom, ktorý doň zapadá zospodu. Bez fotky sa obsah lepil na
dolný okraj sivého bloku. */
.service-banner-wrp.shop-herobox {
padding: 40px 60px;
}
@media (max-width: 767px) {
.service-banner-wrp.shop-herobox {
padding: 32px 24px;
}
}
/* --------------------------------------------------------------------------
Kategórie pod nadpisom
Vlajka je tá istá ako v hlavnom menu a v pätičke — kategória vyzerá na
celom webe rovnako.
-------------------------------------------------------------------------- */
.shop-cattabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 4px 0 0;
}
.shop-cattab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: 1px solid var(--shop-line);
border-radius: 30px;
background: var(--shop-card);
color: var(--shop-navy);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.shop-cattab:hover {
border-color: var(--shop-navy);
color: var(--shop-navy);
}
/* Zlatá znamená stav — tu „toto práve pozeráte". */
.shop-cattab.is-on {
background: var(--shop-gold);
border-color: var(--shop-gold);
color: var(--shop-navy);
}
.shop-cattab__flag {
width: 18px;
height: auto;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
Lišta nad výpisom — počet a hľadanie
-------------------------------------------------------------------------- */
/* Lišta nad výpisom nie je karta — je to riadok. Rám okolo počtu a poľa
pridával tretiu plochu medzi banner a dlaždice, kde nič nie je. */
.shop-catbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 24px;
}
.shop-catbar__count {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--shop-navy);
}
.shop-catsearch {
flex: 0 1 280px;
}
.shop-catsearch .shop-input {
padding: 9px 16px;
border-radius: 30px;
}
@media (max-width: 767px) {
.shop-catbar {
flex-direction: column;
align-items: stretch;
}
.shop-catsearch {
flex: auto;
}
}
/* --------------------------------------------------------------------------
Dlaždice služieb
-------------------------------------------------------------------------- */
/* Tri v rade ako .col-md-4 v téme. Automatické delenie podľa šírky sa na
veľkých obrazovkách rozpadlo na štyri úzke stĺpce a názvy služieb sa lámali
na tri riadky. */
.shop-svcgrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 991px) {
.shop-svcgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
/* `minmax(0, 1fr)`, nie `1fr`: `1fr` má spodnú hranicu na min-content,
takže jeden dlhý nemecký názov („Umsatzsteuererklärung") roztiahol
dlaždicu — a s ňou celú stránku — širšie než telefón. */
.shop-svcgrid {
grid-template-columns: minmax(0, 1fr);
}
.shop-svc {
padding: 24px;
overflow-wrap: anywhere;
}
}
/* Tvar aj výplň má dlaždica z témy: 32px zaoblenie a #F6F7F9, rovnako ako
.price-list-box, .hero-servbox či bloky na úvodnej stránke. Bez rámu —
na svetlej sekcii ju vykresľuje plocha, nie linka. */
.shop-svc {
display: flex;
flex-direction: column;
gap: 12px;
padding: 32px;
border-radius: var(--shop-radius);
background: var(--shop-bg);
text-decoration: none;
transition: background-color .2s ease, transform .2s ease;
}
.shop-svc[hidden] {
display: none;
}
.shop-svc:hover {
background: #EEF0F5;
transform: translateY(-2px);
}
.shop-svc:focus-visible {
outline: 3px solid rgba(45, 46, 121, .35);
outline-offset: 2px;
}
.shop-svc__icon {
width: 40px;
height: 40px;
margin: 0;
}
.shop-svc__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.shop-svc__title {
margin: 0;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: var(--shop-navy);
}
/* Popis sa skracuje až tu, nie v šablóne. Tri riadky sú tri riadky bez
ohľadu na šírku karty — orezanie na počet znakov končilo raz v polovici
riadku, raz uprostred slova. */
.shop-svc__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--shop-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Ceny nad sebou a odkaz pod nimi vpravo. Vedľa seba sa dve sumy a „Zistite
viac" na šírku karty nezmestili a lámali sa v polovici slova. */
.shop-svc__foot {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 16px;
/* Na sivej ploche by --shop-line splynula. */
border-top: 1px solid #E1E4EC;
}
/* Obe ceny naraz — živnostník aj firma. Typ je vľavo, suma vpravo, takže
sa čítajú ako dva riadky cenníka, nie ako dve ceny za sebou. */
.shop-svc__prices {
display: grid;
gap: 4px;
margin: 0;
min-width: 0;
}
.shop-svc__prices > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.shop-svc__prices dt {
font-size: 12px;
font-weight: 500;
color: var(--shop-muted);
}
.shop-svc__prices dd {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--shop-navy);
white-space: nowrap;
}
.shop-svc__prices dd small {
font-size: 12px;
font-weight: 500;
color: var(--shop-muted);
}
/* Bez sumy sa dohaduje podľa rozsahu — text nesmie kričať ako cena. */
.shop-svc__prices dd em {
font-size: 13px;
font-weight: 500;
font-style: normal;
color: var(--shop-muted);
}
.shop-svc__more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
font-size: 13px;
font-weight: 600;
color: var(--shop-navy);
white-space: nowrap;
}
.shop-svc__more svg {
transition: transform .2s ease;
}
.shop-svc:hover .shop-svc__more svg {
transform: translateX(3px);
}
.shop-svcempty {
margin: 0;
padding: 40px 24px;
border-radius: var(--shop-radius);
background: var(--shop-bg);
text-align: center;
color: var(--shop-muted);
}
@media (prefers-reduced-motion: reduce) {
.shop-svc,
.shop-svc__more svg {
transition: none;
}
.shop-svc:hover {
transform: none;
}
}
/* --------------------------------------------------------------------------
Odkazy v odrážkach banneru
Odrážka „Rozsah našich služieb zahŕňa" je pilulka s tmavomodrým textom.
Odkaz v nej si bral svetlomodrú farbu odkazov z témy a text bol na bielej
pilulke svetlejší než v zozname vedľa — farbu si preto berie z odrážky.
-------------------------------------------------------------------------- */
.service-banner-data ul li a {
color: inherit;
}
.service-banner-data ul li a:hover {
color: var(--shop-gold-dark);
}
/* --------------------------------------------------------------------------
Stránka sa nenašla
Stojí na .shop-empty, len s číslom navrchu a radom akcií pod textom.
Číslo je ozdoba, nie nadpis — má veľkosť, ktorú nadpis mať nesmie, a pre
čítačku obrazovky je skryté.
-------------------------------------------------------------------------- */
.shop-404__code {
margin: 0 0 4px;
font-size: 72px;
font-weight: 700;
line-height: 1;
color: var(--shop-gold);
}
/* Rad akcií pod prázdnym stavom. Nie .shop-404__: to isté používa aj
poďakovanie za správu, a trieda s číslom chyby by tam bola lož. */
.shop-empty__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 28px;
}
/* --------------------------------------------------------------------------
Dialóg
Jediné vyskakovacie okno obchodu — potvrdenie akcie (confirm.js) aj výber
balíčka pri „Objednať znova" (order-again.js). Prehliadač