.
Specificita: šablona Shop5 styluje obsah selektory typu .ks-main p
(0,1,1). Naše základní pravidla jsou div.kw p (0,1,2) a komponenty
.kw .kw-xxx (0,2,0 a výš), takže vyhrávají bez !important a bez
ohledu na pořadí načtení souborů.
===================================================================== */
/* Písmo Barlow z Google Fonts. Před spuštěním nahrát na FTP a načítat
lokálně (rychlost + GDPR). @import musí zůstat úplně nahoře souboru. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=Barlow+Semi+Condensed:wght@600&display=swap');
/* ---------- 1. Tokeny (barvy, písmo, rytmus) ---------- */
.kw {
--kw-navy: #14405b; /* hlavní barva značky, shodná s e-shopem */
--kw-navy-deep: #0a3047; /* panel prodejny, text na mosazi */
--kw-blue: #217dbb; /* odkazy v textu, shodné s e-shopem */
--kw-brass: #d9a93f; /* mosaz: jen hlavní akce (volat, kroky) */
--kw-brass-dark: #c7952c; /* hover mosazných tlačítek */
--kw-brass-tint: #fbf4e4; /* podklad upozornění */
--kw-steel: #f2f5f8; /* podklad ikon a jemných ploch */
--kw-line: #dce3ea; /* vlasové linky */
--kw-text: #1e1e1e; /* základní text, shodný s e-shopem */
--kw-muted: #4a5661; /* doplňkový text */
--kw-font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--kw-font-head: 'Barlow Semi Condensed', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--kw-gap: clamp(40px, 7vw, 72px); /* mezera mezi bloky */
font-family: var(--kw-font);
color: var(--kw-text);
}
/* ---------- 2. Základ – přebíjí obecné styly obsahu Shop5 ---------- */
div.kw *,
div.kw *::before,
div.kw *::after {
box-sizing: border-box;
}
/* Svislý rytmus mezi bloky stránky */
div.kw > * + * {
margin-top: var(--kw-gap);
}
div.kw h2,
div.kw h3 {
margin: 0;
padding: 0;
border: 0;
font-family: var(--kw-font-head);
font-weight: 600;
line-height: 1.15;
color: var(--kw-navy);
}
div.kw p,
div.kw li,
div.kw dt,
div.kw dd {
margin: 0;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--kw-text);
}
div.kw p {
max-width: 68ch; /* čitelná délka řádku */
}
div.kw ul,
div.kw ol,
div.kw dl {
margin: 0;
padding: 0;
list-style: none;
}
div.kw a {
color: var(--kw-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
div.kw a:hover {
color: var(--kw-navy);
}
/* Viditelný fokus pro klávesnici */
div.kw a:focus-visible,
div.kw summary:focus-visible {
outline: 3px solid var(--kw-brass);
outline-offset: 2px;
border-radius: 4px;
}
/* ---------- 3. Nadpis bloku ---------- */
.kw .kw-h2 {
margin-bottom: 18px;
font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
letter-spacing: .005em;
}
/* Doprovodný text pod nadpisem */
.kw .kw-sub {
margin-bottom: 18px;
color: var(--kw-muted);
}
/* ---------- 4. Úvod: perex, akce, fakta ---------- */
.kw .kw-lead {
max-width: 60ch;
font-size: clamp(1.15rem, 1.02rem + .55vw, 1.35rem);
line-height: 1.5;
}
.kw .kw-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-top: 22px;
}
/* Na mobilu tlačítka přes celou šířku (od 700 px vedle sebe, viz sekce 11) */
.kw .kw-actions .kw-btn {
flex: 1 1 100%;
}
/* Tlačítko – základ je obrysové (sekundární akce) */
.kw .kw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
min-height: 48px;
padding: 0 20px;
border: 2px solid var(--kw-navy);
border-radius: 8px;
background: #fff;
color: var(--kw-navy);
font: 600 1.0625rem/1 var(--kw-font);
text-decoration: none;
transition: background-color .15s, border-color .15s, color .15s;
}
.kw .kw-btn:hover {
background: var(--kw-navy);
color: #fff;
}
/* Hlavní akce (volat) – mosazné tlačítko */
.kw .kw-btn--primary {
border-color: var(--kw-brass);
background: var(--kw-brass);
color: var(--kw-navy-deep);
}
.kw .kw-btn--primary:hover {
border-color: var(--kw-brass-dark);
background: var(--kw-brass-dark);
color: var(--kw-navy-deep);
}
/* Textový odkaz vedle tlačítek (např. do e-shopu) */
.kw .kw-more {
padding: 12px 4px;
font-weight: 600;
text-underline-offset: 4px;
}
/* Rychlá fakta – řádek oddělený linkami */
.kw .kw-facts {
margin-top: 28px;
border-top: 1px solid var(--kw-line);
border-bottom: 1px solid var(--kw-line);
}
.kw .kw-facts li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
font-weight: 600;
color: var(--kw-navy);
}
.kw .kw-facts li + li {
border-top: 1px solid var(--kw-line);
}
/* ---------- 5. Služby: seznam s ikonami (ne kartičky) ---------- */
.kw .kw-list {
display: grid;
grid-template-columns: 1fr;
column-gap: 44px;
border-bottom: 1px solid var(--kw-line);
}
.kw .kw-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: start;
padding: 18px 0;
border-top: 1px solid var(--kw-line);
}
.kw .kw-ico {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--kw-line);
border-radius: 8px;
background: var(--kw-steel);
font-size: 22px;
line-height: 1;
}
.kw .kw-item h3 {
margin: 2px 0 4px;
font-size: 1.2rem;
}
.kw .kw-item p {
font-size: 1rem;
color: var(--kw-muted);
}
/* Varianta: celá položka jako odkaz (
) */
.kw a.kw-item {
color: inherit;
text-decoration: none;
}
.kw a.kw-item:hover h3 {
color: var(--kw-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- 6. Upozornění (např. výjezd k vozu) ---------- */
.kw .kw-callout {
display: grid;
gap: 14px;
padding: 18px 20px;
border-left: 4px solid var(--kw-brass);
border-radius: 0 8px 8px 0;
background: var(--kw-brass-tint);
}
.kw .kw-callout p {
max-width: none;
}
.kw .kw-callout strong {
color: var(--kw-navy-deep);
}
/* ---------- 7. Postup ve krocích (jen pro skutečnou sekvenci) ---------- */
.kw .kw-steps {
display: grid;
gap: 22px;
counter-reset: kw-step;
}
.kw .kw-steps > li {
position: relative;
padding-left: 58px;
counter-increment: kw-step;
}
/* Číslo kroku v mosazném kolečku */
.kw .kw-steps > li::before {
content: counter(kw-step);
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--kw-brass);
color: var(--kw-navy-deep);
font: 600 1.25rem/1 var(--kw-font-head);
}
/* Spojovací linka mezi kroky (na mobilu svislá) */
.kw .kw-steps > li:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
bottom: -16px;
left: 20px;
width: 2px;
background: var(--kw-line);
}
.kw .kw-steps h3 {
margin: 8px 0 6px;
font-size: 1.2rem;
}
.kw .kw-steps p {
font-size: 1rem;
color: var(--kw-muted);
}
/* ---------- 8. Odkazy do e-shopu ---------- */
.kw .kw-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.kw .kw-chip {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 18px;
border: 1px solid var(--kw-line);
border-radius: 999px;
background: #fff;
color: var(--kw-navy);
font-weight: 600;
text-decoration: none;
transition: background-color .15s, border-color .15s;
}
.kw .kw-chip:hover {
border-color: var(--kw-navy);
background: var(--kw-steel);
color: var(--kw-navy);
}
/* ---------- 9. Časté dotazy (, bez JavaScriptu) ---------- */
.kw .kw-faq {
border-top: 1px solid var(--kw-line);
}
.kw .kw-faq details {
border-bottom: 1px solid var(--kw-line);
}
.kw .kw-faq summary {
position: relative;
display: block;
padding: 16px 48px 16px 0;
list-style: none;
cursor: pointer;
font: 600 1.1rem/1.35 var(--kw-font);
color: var(--kw-text);
}
/* Skrýt výchozí trojúhelník prohlížeče */
.kw .kw-faq summary::-webkit-details-marker {
display: none;
}
/* Vlastní ukazatel +/− vpravo */
.kw .kw-faq summary::after {
content: '+';
position: absolute;
top: 50%;
right: 4px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border: 1px solid var(--kw-line);
border-radius: 50%;
color: var(--kw-navy);
font-size: 1.2rem;
line-height: 1;
transform: translateY(-50%);
}
.kw .kw-faq details[open] summary::after {
content: '\2212'; /* znak minus */
border-color: var(--kw-navy);
background: var(--kw-navy);
color: #fff;
}
.kw .kw-faq summary:hover {
color: var(--kw-navy);
}
.kw .kw-faq details p {
padding: 0 0 18px;
color: var(--kw-muted);
}
/* ---------- 10. Prodejna – jediný výrazný prvek stránky ---------- */
.kw .kw-store {
position: relative;
display: grid;
gap: 22px;
margin-top: calc(var(--kw-gap) + 22px); /* místo pro hranu s profilem klíče */
padding: 30px 22px 26px;
border-radius: 0 0 14px 14px;
background: var(--kw-navy-deep);
color: #fff;
}
/* Horní hrana panelu vyřezaná jako profil klíče: nepravidelné zářezy
různé hloubky, vzor se opakuje po 240 px */
.kw .kw-store::before {
content: '';
position: absolute;
top: -21px;
right: 0;
left: 0;
height: 22px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22'%3E%3Cpath fill='%230a3047' d='M0 22V4H10L24 18H28L42 4H52L60 12H64L72 4H84L96 16H100L112 4H122L128 10H132L138 4H150L164 18H168L182 4H192L202 14H206L216 4H240V22Z'/%3E%3C/svg%3E") repeat-x left bottom / 240px 22px;
}
.kw .kw-store h2 {
margin-bottom: 10px;
font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
color: #fff;
}
.kw .kw-store h3 {
margin-bottom: 10px;
font-size: 1.1rem;
color: var(--kw-brass);
}
.kw .kw-store p {
color: rgba(255, 255, 255, .82);
}
.kw .kw-store .kw-addr {
margin-bottom: 8px;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
color: #fff;
}
.kw .kw-store a:not(.kw-btn) {
color: #fff;
}
/* Otevírací doba */
.kw .kw-hours {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 18px;
margin-bottom: 14px;
}
.kw .kw-hours dt {
color: rgba(255, 255, 255, .75);
}
.kw .kw-hours dd {
margin: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #fff;
}
/* Tlačítka na tmavém panelu */
.kw .kw-store .kw-actions {
margin-top: 4px;
}
.kw .kw-store .kw-btn {
border-color: rgba(255, 255, 255, .55);
background: transparent;
color: #fff;
}
.kw .kw-store .kw-btn:hover {
border-color: #fff;
background: #fff;
color: var(--kw-navy-deep);
}
.kw .kw-store .kw-btn--primary {
border-color: var(--kw-brass);
background: var(--kw-brass);
color: var(--kw-navy-deep);
}
.kw .kw-store .kw-btn--primary:hover {
border-color: var(--kw-brass-dark);
background: var(--kw-brass-dark);
color: var(--kw-navy-deep);
}
/* ---------- 11. Tablet a desktop ---------- */
@media (min-width: 700px) {
.kw .kw-actions .kw-btn {
flex: 0 0 auto;
}
.kw .kw-faq details p {
padding-right: 48px;
}
.kw .kw-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.kw .kw-facts li {
padding: 14px 16px;
}
.kw .kw-facts li:first-child {
padding-left: 0;
}
.kw .kw-facts li + li {
border-top: 0;
border-left: 1px solid var(--kw-line);
}
.kw .kw-list {
grid-template-columns: 1fr 1fr;
}
.kw .kw-callout {
grid-template-columns: 1fr auto;
align-items: center;
padding: 20px 24px;
}
}
@media (min-width: 900px) {
/* Kroky vedle sebe, linka vodorovně mezi čísly */
.kw .kw-steps {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.kw .kw-steps > li {
padding-top: 58px;
padding-left: 0;
}
.kw .kw-steps > li:not(:last-child)::after {
top: 20px;
right: -24px;
bottom: auto;
left: 52px;
width: auto;
height: 2px;
}
.kw .kw-store {
grid-template-columns: 1.4fr 1fr;
column-gap: 48px;
padding: 44px 48px 40px;
}
/* Otevírací doba vpravo přes oba řádky, tlačítka pod adresou vlevo */
.kw .kw-store > :nth-child(2) {
grid-column: 2;
grid-row: 1 / span 2;
}
.kw .kw-store .kw-actions {
grid-column: 1;
align-self: end;
}
}
/* ---------- 12. Omezený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
.kw *,
.kw *::before,
.kw *::after {
transition: none !important;
}
}