/* ========================================================================= Masáže Karlák — vlastní téma nad Bootstrapem 5.3 Paleta: šalvějová zeleň + krémová. Světlý, svěží, klidný dojem. Pořadí načítání: bootstrap.min.css → style.css (přepisy zde vyhrávají) ========================================================================= */ /* ------------------------------------------------------------------------- 1. Barevné tokeny a přemapování Bootstrap proměnných ------------------------------------------------------------------------- */ :root { --k-sage: #7A9A7E; /* primární — tlačítka, aktivní stavy */ --k-sage-dark: #4F6B54; /* hover, nadpisy, text na světlém pozadí */ --k-sage-light: #DCE7DD; /* jemné výplně, prstence u fotek */ --k-cream: #FBF8F2; /* podklad stránky */ --k-sand: #EFE7DA; /* střídavé sekce, karty */ --k-sand-deep: #E3D7C4; /* okraje na pískové ploše */ --k-wood: #B08968; /* akcenty, ikony, oddělovače */ --k-wood-dark: #8A6748; /* text v barvě akcentu (kontrast 4,6:1 na krému) */ --k-ink: #2C332D; /* základní text — kontrast 12,8:1 na krému */ --k-ink-soft: #5A625B; /* sekundární text — kontrast 5,9:1 na krému */ --k-radius: 1rem; --k-radius-sm: .625rem; --k-shadow: 0 .25rem 1.5rem rgba(44, 51, 45, .07); --k-shadow-lift: 0 .75rem 2rem rgba(44, 51, 45, .12); /* Písmo: systémový stack, nic se nestahuje zvenčí (web funguje offline). Napojení webfontu později: sem přidat rodinu před fallback a do vložit @font-face nebo lokálně stažený soubor. */ --k-font-head: Georgia, "Times New Roman", "Droid Serif", serif; --k-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Přemapování Bootstrapu, aby komponenty dědily téma */ --bs-primary: #7A9A7E; --bs-primary-rgb: 122, 154, 126; --bs-body-bg: #FBF8F2; --bs-body-color: #2C332D; --bs-body-font-family: var(--k-font-body); --bs-border-color: #E3D7C4; --bs-link-color: #4F6B54; --bs-link-color-rgb: 79, 107, 84; --bs-link-hover-color: #2C332D; --bs-link-hover-color-rgb: 44, 51, 45; --bs-border-radius: var(--k-radius-sm); --bs-border-radius-lg: var(--k-radius); } /* ------------------------------------------------------------------------- 2. Základní typografie a rytmus ------------------------------------------------------------------------- */ body { font-family: var(--k-font-body); color: var(--k-ink); background-color: var(--k-cream); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .k-serif { font-family: var(--k-font-head); color: var(--k-sage-dark); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; } h1 { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem); } h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); } p { max-width: 68ch; } .k-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--k-ink-soft); line-height: 1.75; } /* Nadpis sekce s krátkým popiskem nad ním */ .k-eyebrow { display: inline-block; font-family: var(--k-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--k-wood-dark); margin-bottom: .75rem; } /* ------------------------------------------------------------------------- 3. Rozvržení sekcí ------------------------------------------------------------------------- */ .k-section { padding: clamp(3rem, 2rem + 4vw, 5rem) 0; } .k-section--tight{ padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) 0; } .k-section--sand { background-color: var(--k-sand); } .k-section--soft { background-color: var(--k-sage-light); } /* Organický předěl mezi sekcemi — čistě dekorativní */ .k-wave { display: block; width: 100%; height: clamp(2rem, 4vw, 3.5rem); color: var(--k-sand); /* barvu vlny řídí currentColor v SVG */ } /* ------------------------------------------------------------------------- 4. Skip-link a viditelný focus (klíčové pro ovládání klávesnicí) ------------------------------------------------------------------------- */ .k-skiplink { position: absolute; left: 1rem; top: -100%; z-index: 1100; padding: .75rem 1.25rem; background: var(--k-sage-dark); color: #fff; border-radius: 0 0 var(--k-radius-sm) var(--k-radius-sm); font-weight: 600; text-decoration: none; transition: top .15s ease-in-out; } .k-skiplink:focus { top: 0; color: #fff; } :focus-visible { outline: 3px solid var(--k-sage-dark); outline-offset: 2px; border-radius: 3px; } /* Na tmavém podkladu potřebuje focus světlý obrys, aby byl vidět */ .k-on-dark :focus-visible, .k-footer :focus-visible { outline-color: #FBF8F2; } /* ------------------------------------------------------------------------- 5. Hlavička a navigace ------------------------------------------------------------------------- */ .k-header { background-color: rgba(251, 248, 242, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--k-sand-deep); } .k-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .k-brand__mark { width: 2.75rem; height: 2.75rem; flex: none; } .k-brand__name { font-family: var(--k-font-head); font-size: 1.375rem; color: var(--k-sage-dark); line-height: 1.1; } .k-brand__claim { display: block; font-family: var(--k-font-body); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--k-wood-dark); } .k-nav .nav-link { color: var(--k-ink); font-weight: 500; padding: .5rem .875rem; border-radius: var(--k-radius-sm); } .k-nav .nav-link:hover, .k-nav .nav-link:focus-visible { color: var(--k-sage-dark); background-color: var(--k-sage-light); } .k-nav .nav-link[aria-current="page"] { color: var(--k-sage-dark); font-weight: 600; background-color: var(--k-sage-light); } /* Lišta nástrojů přístupnosti */ .k-a11ybar { background-color: var(--k-sage-dark); color: #fff; font-size: .875rem; } .k-a11ybar a { color: #fff; text-decoration: none; } .k-a11ybar a:hover { text-decoration: underline; } .k-a11y-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; border-radius: 999px; padding: .125rem .75rem; font-size: .8125rem; line-height: 1.6; } .k-a11y-toggle:hover { background: rgba(255, 255, 255, .16); } .k-a11y-toggle[aria-pressed="true"] { background: #fff; color: var(--k-sage-dark); font-weight: 600; } /* ------------------------------------------------------------------------- 6. Tlačítka ------------------------------------------------------------------------- */ .btn { border-radius: 999px; font-weight: 600; padding: .6875rem 1.75rem; } .btn-k { background-color: var(--k-sage-dark); /* tmavší odstín kvůli kontrastu s bílým textem */ border-color: var(--k-sage-dark); color: #fff; } .btn-k:hover, .btn-k:focus-visible { background-color: #3F5744; border-color: #3F5744; color: #fff; } .btn-k-outline { background-color: transparent; border: 2px solid var(--k-sage-dark); color: var(--k-sage-dark); } .btn-k-outline:hover, .btn-k-outline:focus-visible { background-color: var(--k-sage-dark); color: #fff; } .btn-k-light { background-color: #fff; border-color: #fff; color: var(--k-sage-dark); } .btn-k-light:hover, .btn-k-light:focus-visible { background-color: var(--k-sand); color: var(--k-sage-dark); } /* ------------------------------------------------------------------------- 7. Hero ------------------------------------------------------------------------- */ .k-hero { background: linear-gradient(160deg, var(--k-sage-light) 0%, var(--k-cream) 62%); padding: clamp(3rem, 2rem + 5vw, 6rem) 0; overflow: hidden; } .k-hero__img { width: 100%; height: auto; border-radius: var(--k-radius); box-shadow: var(--k-shadow-lift); } .k-hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; } .k-badge { display: inline-flex; align-items: center; gap: .375rem; background-color: #fff; border: 1px solid var(--k-sand-deep); color: var(--k-ink); border-radius: 999px; padding: .375rem .875rem; font-size: .875rem; font-weight: 500; } /* ------------------------------------------------------------------------- 8. Karty ------------------------------------------------------------------------- */ .k-card { background-color: #fff; border: 1px solid var(--k-sand-deep); border-radius: var(--k-radius); box-shadow: var(--k-shadow); transition: transform .2s ease, box-shadow .2s ease; } .k-card:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-lift); } .k-card__body { padding: 1.75rem; } .k-icon { width: 3rem; height: 3rem; color: var(--k-wood-dark); margin-bottom: 1rem; } /* Karta maséra */ .k-maser__photo { width: clamp(8rem, 22vw, 11rem); height: clamp(8rem, 22vw, 11rem); max-width: 100%; border-radius: 50%; object-fit: cover; border: .375rem solid var(--k-sage-light); background-color: var(--k-sand); } /* Větší varianta pro detail maséra, kde portrét nese celý levý sloupec */ .k-maser__photo--velky { width: clamp(10rem, 26vw, 15rem); height: clamp(10rem, 26vw, 15rem); } .k-maser__role { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--k-wood-dark); } .k-quote { border-left: 3px solid var(--k-sage); padding-left: 1.25rem; font-style: italic; color: var(--k-ink); } .k-fact { display: flex; gap: .625rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px dashed var(--k-sand-deep); } .k-fact:last-child { border-bottom: 0; } .k-fact__label { font-weight: 600; color: var(--k-sage-dark); flex: none; min-width: 10.5rem; } @media (max-width: 575.98px) { .k-fact { flex-direction: column; gap: 0; } .k-fact__label { min-width: 0; } } /* ------------------------------------------------------------------------- 9. Seznamy indikací a kontraindikací Rozlišené nejen barvou, ale i ikonou a popiskem (kvůli barvosleposti). ------------------------------------------------------------------------- */ .k-list { list-style: none; padding-left: 0; margin-bottom: 0; } .k-list li { position: relative; padding: .5rem 0 .5rem 2rem; border-bottom: 1px solid var(--k-sand-deep); } .k-list li:last-child { border-bottom: 0; } .k-list li::before { position: absolute; left: 0; top: .5rem; width: 1.375rem; height: 1.375rem; display: grid; place-items: center; border-radius: 50%; font-size: .8125rem; font-weight: 700; } .k-list--yes li::before { content: "✓"; background-color: var(--k-sage-light); color: var(--k-sage-dark); } .k-list--no li::before { content: "!"; background-color: #F3E2D5; color: var(--k-wood-dark); } /* ------------------------------------------------------------------------- 10. Ceník ------------------------------------------------------------------------- */ .k-price-table { --bs-table-bg: transparent; margin-bottom: 0; } .k-price-table thead th { font-family: var(--k-font-body); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink-soft); font-weight: 600; border-bottom: 2px solid var(--k-sand-deep); } .k-price-table tbody th { font-weight: 500; } .k-price-table th, .k-price-table td { vertical-align: middle; border-color: var(--k-sand-deep); } .k-price-table caption { caption-side: bottom; color: var(--k-ink-soft); font-size: .875rem; } .k-price-table tbody tr:hover { background-color: rgba(220, 231, 221, .45); } /* Zástupná cena — po dodání skutečného ceníku hledej .js-cena-placeholder */ .js-cena-placeholder { color: var(--k-ink-soft); font-variant-numeric: tabular-nums; } .k-price-note { background-color: var(--k-sand); border-left: 4px solid var(--k-wood); border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0; padding: 1rem 1.25rem; } /* Accordion přebarvený do tématu */ .accordion { --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-border-color: var(--k-sand-deep); } .accordion-item { border-radius: var(--k-radius-sm) !important; overflow: hidden; margin-bottom: .75rem; } .accordion-button { font-family: var(--k-font-head); font-size: 1.125rem; color: var(--k-sage-dark); background-color: #fff; } .accordion-button:not(.collapsed) { background-color: var(--k-sage-light); color: var(--k-sage-dark); box-shadow: none; } /* ------------------------------------------------------------------------- 11. Poukazy a e-shop (zatím jen vizuál) ------------------------------------------------------------------------- */ .k-voucher { background: linear-gradient(140deg, #fff 0%, var(--k-sand) 100%); border: 1px solid var(--k-sand-deep); border-radius: var(--k-radius); padding: 2rem 1.75rem; height: 100%; position: relative; overflow: hidden; } .k-voucher__amount { font-family: var(--k-font-head); font-size: 2.5rem; color: var(--k-sage-dark); line-height: 1; } .k-ribbon { position: absolute; top: 1rem; right: 1rem; background-color: var(--k-wood-dark); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 999px; } /* Označení funkcí, které teprve vzniknou */ .k-soon { display: inline-flex; align-self: flex-start; align-items: center; gap: .375rem; background-color: var(--k-sand-deep); color: var(--k-ink); border-radius: 999px; padding: .25rem .75rem; font-size: .8125rem; font-weight: 600; } /* ------------------------------------------------------------------------- 12. Kontakt a místo pro mapu ------------------------------------------------------------------------- */ .k-map-placeholder { aspect-ratio: 16 / 9; background-color: var(--k-sage-light); border: 2px dashed var(--k-sage); border-radius: var(--k-radius); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--k-sage-dark); } .k-transport { display: flex; gap: 1rem; align-items: flex-start; padding: 1.125rem 0; border-bottom: 1px solid var(--k-sand-deep); } .k-transport:last-child { border-bottom: 0; } .k-transport__mark { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9375rem; color: #fff; } .k-transport__mark--b { background-color: #E2001A; } /* metro B */ .k-transport__mark--c { background-color: #D40; } /* metro C */ .k-transport__mark--t { background-color: var(--k-sage-dark); } .k-transport__mark--p { background-color: var(--k-wood-dark); } /* ------------------------------------------------------------------------- 13. Patička ------------------------------------------------------------------------- */ .k-footer { background-color: var(--k-sage-dark); color: #EDF2EE; padding: 3.5rem 0 2rem; } .k-footer h2, .k-footer h3 { color: #fff; font-size: 1.125rem; } .k-footer a:not(.btn) { color: #EDF2EE; text-decoration: none; } .k-footer a:not(.btn):hover { color: #fff; text-decoration: underline; } .k-footer .btn-k-light { color: var(--k-sage-dark); } .k-footer .btn-k-light:hover, .k-footer .btn-k-light:focus-visible { color: var(--k-sage-dark); } .k-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .875rem; color: #D5E0D7; } /* ------------------------------------------------------------------------- 14. Režimy přístupnosti (přepínače v hlavičce, stav v localStorage) ------------------------------------------------------------------------- */ /* Zvětšené písmo — vše je v rem/clamp, takže stačí zvětšit kořen */ html.k-bigtext { font-size: 125%; } html.k-bigtext body { line-height: 1.8; } /* Vysoký kontrast — potlačí jemné odstíny ve prospěch ostrého čtení */ html.k-contrast { --k-cream: #FFFFFF; --k-sand: #F2F2F2; --k-sand-deep: #767676; --k-sage-light: #EAEAEA; --k-sage: #14532D; --k-sage-dark: #0B3B1E; --k-wood: #5A3E28; --k-wood-dark: #4A3220; --k-ink: #000000; --k-ink-soft: #23272A; --bs-body-bg: #FFFFFF; --bs-body-color: #000000; } html.k-contrast body { background-color: #fff; color: #000; } html.k-contrast .k-hero, html.k-contrast .k-voucher { background: #fff; } html.k-contrast .k-card, html.k-contrast .k-voucher, html.k-contrast .k-badge { border-width: 2px; border-color: #000; box-shadow: none; } html.k-contrast .k-header { background-color: #fff; border-bottom-width: 2px; border-bottom-color: #000; } html.k-contrast a { text-decoration: underline; } html.k-contrast .btn { border-width: 2px; } html.k-contrast .k-wave { display: none; } html.k-contrast :focus-visible { outline: 4px solid #000; outline-offset: 3px; } /* ------------------------------------------------------------------------- 15. Pohyb ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .k-card:hover { transform: none; } } /* ------------------------------------------------------------------------- 16. Tisk ------------------------------------------------------------------------- */ @media print { .k-a11ybar, .k-header, .k-footer, .btn, .k-wave { display: none !important; } body { background: #fff; font-size: 11pt; } }