/* ========================================================================= Fyzio Body Prof.I.K — stylopis Komponenty sahají jen na sémantické tokeny (--brand, --accent, --tint…), nikdy přímo na paletu. Téma stránky se přepíná atributem data-theme na . ========================================================================= */ /* ------------------------------------------------------------ 1. Tokeny */ :root { /* Paleta značky */ --teal: #3f7e70; --teal-deep: #2b5d51; --teal-soft: #57a493; --mint: #d6e5df; --pink: #eca3af; --slate: #3c424d; --paper: #f0f1ec; --white: #ffffff; --ink: #1f2322; --ink-soft: #4d5451; /* Sémantické tokeny — jimi se stylují komponenty */ --bg: var(--paper); --surface: var(--white); --text: var(--ink); --muted: var(--ink-soft); --brand: var(--teal); --brand-deep: var(--teal-deep); --on-brand: var(--white); --accent: var(--pink); --on-accent: var(--ink); --tint: var(--mint); --panel: var(--teal-soft); --footer: var(--teal-soft); /* Barvy lekcí v rozvrhu */ --l-mustard: #d7c47e; --l-pink: #f0a3aa; --l-rose: #dbcac6; --l-green: #b3d5a9; --l-coral: #f2aeb6; --l-lavender: #ded2ef; --l-blue: #a8c1dd; --l-tan: #cfb7a2; --l-busy: #ddd8d1; /* Písmo */ --font-body: "Montserrat", system-ui, sans-serif; --font-head: "Poppins", system-ui, sans-serif; /* Fluidní typografické stupně */ --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem); --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem); --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem); --step-3: clamp(1.8rem, 1.4rem + 1.8vw, 2.9rem); --step-4: clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem); /* Rytmus */ --wrap: 90rem; --gutter: clamp(1rem, 4vw, 2.5rem); --section-y: clamp(3rem, 6vw, 5.5rem); --radius: 0.5rem; --shadow: 0 0.35rem 1.2rem rgb(20 40 35 / 0.12); --header-h: 5.5rem; } /* Body služby: panel s kartami je růžový */ [data-theme="body"] { --panel: var(--pink); } /* ------------------------------------------------------------ 2. Základ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; overflow-x: clip; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } a:hover { color: var(--brand); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } .icon { width: 1.5em; height: 1.5em; fill: currentColor; flex: none; } /* ------------------------------------------------------------ 3. Typografie */ h1, h2, h3, h4 { margin: 0; line-height: 1.15; } p, ul, ol { margin: 0; } .h-page, .h-section { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; } .h-page { font-size: var(--step-4); } .h-section { font-size: var(--step-2); color: var(--ink); } .h-sub { font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); color: var(--brand-deep); } .eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step-1); font-weight: 400; } .lead { font-size: var(--step-1); } strong { font-weight: 600; } .prose h2 { font-family: var(--font-head); font-size: var(--step-1); font-weight: 700; margin-top: 2rem; color: var(--brand-deep); } .prose h3 { font-size: 1rem; font-weight: 600; } .prose h3 + p { margin-top: 0.25rem; } /* ------------------------------------------------------------ 4. Layout */ .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; } .wrap--narrow { --wrap: 48rem; } .section { padding-block: var(--section-y); position: relative; } .section--tight-top { padding-top: 0; } .section--white { background: var(--surface); } .stack > * + * { margin-top: 1.1rem; } .center { text-align: center; } .split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split--top { align-items: start; } @media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } } .rounded { border-radius: var(--radius); } /* ------------------------------------------------------------ 5. Tlačítka */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.3rem; border: 0; border-radius: 0.4rem; background: var(--brand); color: var(--on-brand); font: inherit; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; } .btn:hover { color: var(--on-brand); background: var(--brand-deep); transform: translateY(-1px); } .btn--primary { background: var(--brand); } .btn--dark { background: var(--brand-deep); box-shadow: var(--shadow); } .btn--dark:hover { background: var(--brand); } .btn--slate { background: var(--slate); box-shadow: var(--shadow); } .btn--slate:hover { background: var(--ink); } .btn--pink { background: var(--accent); color: var(--on-accent); } .btn--pink:hover { background: #e28e9c; color: var(--on-accent); } .btn--light { background: var(--white); color: var(--ink); } .btn--light:hover { background: var(--paper); color: var(--ink); } .btn--sm { font-size: 0.8rem; font-weight: 500; padding: 0.75rem 1.5rem; } .btn--xs { font-size: 0.8rem; padding: 0.45rem 0.9rem; } .btn--lg { font-size: var(--step-1); padding: 0.75rem 1.4rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; } .btn-row.center { justify-content: center; } .more { color: var(--brand); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; font-weight: 500; } /* ------------------------------------------------------------ 6. Hlavička */ .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--brand); color: var(--on-brand); border-radius: var(--radius); } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 0.08); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); padding-inline: clamp(1rem, 4vw, 5.3rem); } .logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--ink); } .logo:hover { color: var(--ink); } .logo__mark { width: 3rem; height: 3rem; } .logo__text { width: auto; height: 2.6rem; } .nav-toggle { margin-left: auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--ink); cursor: pointer; } .nav-toggle svg { width: 1.6rem; height: 1.6rem; } .nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav__list { list-style: none; padding: 0; margin: 0; } .nav__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); text-decoration: none; cursor: pointer; } .nav__link[aria-current="page"], .nav__link.is-active, .nav__sublink[aria-current="page"] { color: var(--brand); } .nav__caret { width: 0.8rem; height: 0.8rem; fill: currentColor; transform: rotate(90deg); transition: transform 0.2s; } [aria-expanded="true"] > .nav__caret { transform: rotate(-90deg); } .nav__sub { list-style: none; margin: 0; padding: 0; } .nav__sublink { display: block; padding: 0.5rem 1rem; text-decoration: none; } .nav__cta { display: flex; gap: 1rem; flex-wrap: wrap; } /* Mobilní menu */ @media (max-width: 61.99rem) { .nav { position: absolute; inset: 100% 0 auto 0; display: none; padding: 1rem var(--gutter) 1.5rem; background: var(--bg); box-shadow: 0 0.8rem 1rem rgb(0 0 0 / 0.08); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav[data-open="true"] { display: block; } .nav__list > li { border-bottom: 1px solid rgb(0 0 0 / 0.08); } .nav__link { width: 100%; padding: 0.85rem 0; font-size: 1.1rem; } .nav__sub { display: none; padding-bottom: 0.5rem; } [data-subnav][data-open="true"] .nav__sub { display: block; } .nav__cta { margin-top: 1.25rem; } .nav__cta .btn { flex: 1 1 12rem; } } /* Desktop menu */ @media (min-width: 62rem) { .nav-toggle { display: none; } .nav { display: flex; align-items: center; flex: 1; gap: 2rem; } .nav__list { display: flex; gap: clamp(1rem, 1.6vw, 1.5rem); margin-inline: auto; } .nav__item--sub { position: relative; } .nav__sub { position: absolute; top: 100%; left: -1rem; min-width: 13rem; padding: 0.5rem 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); visibility: hidden; opacity: 0; transform: translateY(0.4rem); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; } .nav__item--sub:hover .nav__sub, .nav__item--sub:focus-within .nav__sub, [data-subnav][data-open="true"] .nav__sub { visibility: visible; opacity: 1; transform: none; } .nav__cta { gap: clamp(0.75rem, 2.5vw, 3rem); flex-wrap: nowrap; } } @media (min-width: 62rem) and (max-width: 74.99rem) { .nav__cta .btn { padding-inline: 0.9rem; } .logo__text { display: none; } } /* ------------------------------------------------------------ 7. Hero */ /* Fotka kryje úvod i dlaždice, takže obraz sahá bez mezery až k pruhu s aktualitami. */ .home-top { position: relative; isolation: isolate; } .home-top__bg, .page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .home-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(35 45 55 / 0.55), rgb(35 45 55 / 0.15) 70%), linear-gradient(0deg, rgb(35 45 55 / 0.5), transparent 50%); } .home-hero { min-height: clamp(18rem, 44vh, 26rem); display: flex; align-items: center; color: var(--white); padding-block: 2rem; } .home-hero__inner { padding-inline: clamp(0rem, 1.5vw, 1rem); } .home-hero__eyebrow { font-family: var(--font-head); font-weight: 600; font-size: var(--step-2); text-transform: uppercase; line-height: 1.2; } .home-hero__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(2.6rem, 1.5rem + 4.5vw, 5.2rem); line-height: 1.05; letter-spacing: -0.01em; } /* Podstránky služeb: fotka vpravo, zleva přechod do světlého pozadí */ .page-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(22rem, 45vw, 32rem); padding-block: 3rem 5rem; } .page-hero__bg { left: auto; width: min(100%, 72%); } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--white) 28%, rgb(255 255 255 / 0.75) 45%, rgb(255 255 255 / 0.1) 75%, transparent); } .page-hero__inner { padding-inline: clamp(0rem, 1.5vw, 1rem); } .page-hero__title { font-family: var(--font-head); font-weight: 800; font-size: var(--step-4); color: var(--brand-deep); line-height: 1; } .page-hero__sub { font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.5rem; } @media (max-width: 47.99rem) { .page-hero__bg { width: 100%; } .page-hero::after { background: linear-gradient(90deg, rgb(255 255 255 / 0.95) 30%, rgb(255 255 255 / 0.6)); } } /* Plný barevný pruh s nadpisem (O nás) */ .band-hero { background: var(--brand); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .band-hero__title { font-family: var(--font-head); font-weight: 800; font-size: var(--step-4); color: var(--white); line-height: 1.05; } .band-hero__sub { font-size: var(--step-2); color: var(--ink); margin-top: 0.4rem; } /* ------------------------------------------------------------ 8. Dlaždice a aktuality */ .tiles { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; --wrap: 94rem; } @media (min-width: 48rem) { .tiles { grid-template-columns: repeat(4, 1fr); } } .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: clamp(7rem, 12vw, 10rem); padding: 1rem; background: var(--brand); color: var(--white); font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color 0.2s; } .tile .icon { width: 2rem; height: 2rem; } .tile:hover { background: var(--brand-deep); color: var(--white); } .tile--accent { background: var(--accent); color: var(--ink); } .tile--accent:hover { background: #e28e9c; color: var(--ink); } .news { background: var(--tint); padding-block: 2rem; } .news__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .news__body { flex: 1; text-align: center; } .news__title { font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); } .news__list { list-style: none; padding: 0; } .news__item p { font-size: var(--step-1); margin-bottom: 0.9rem; } [data-slider-ready] .news__item:not([data-active]) { display: none; } .news__arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--brand-deep); cursor: pointer; } .news__arrow[hidden] { display: none; } .news__arrow--prev .icon { transform: scaleX(-1); } /* ------------------------------------------------------------ 9. Služby */ /* Rozbalovací karty služeb na úvodní stránce */ .service-cards { list-style: none; padding: 0; margin-top: 2.5rem; display: grid; gap: 1.25rem clamp(1.5rem, 5vw, 5rem); align-items: start; } @media (min-width: 40rem) { .service-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .service-cards { grid-template-columns: repeat(3, 1fr); row-gap: 3rem; } } .service-card { background: var(--surface); border: 1px solid var(--brand); border-radius: 0.4rem; box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 0.1); transition: box-shadow 0.2s; } .service-card:hover { box-shadow: var(--shadow); } .service-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.9rem; padding: 0.6rem 1.25rem; color: var(--brand); font-family: var(--font-head); font-weight: 800; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); text-transform: uppercase; line-height: 1.15; cursor: pointer; list-style: none; } .service-card__head::-webkit-details-marker { display: none; } .service-card__head .icon { width: 2rem; height: 2rem; } .service-card__body { padding: 0 1.25rem 1.25rem; font-size: var(--step--1); color: var(--muted); line-height: 1.85; } .service-card__body > * + * { margin-top: 0.8rem; } .service-card__body strong { color: var(--ink); font-weight: 500; } .service-card__body ul { padding-left: 1rem; list-style: disc; color: var(--ink); } .service-card__note { color: var(--ink); } .service-card__links { display: grid; gap: 0.6rem; justify-items: start; margin-top: 1.2rem; } .service-card__links:empty { display: none; } /* Barevný panel s fotokartami služeb */ .cards-panel { position: relative; z-index: 1; margin-top: -2rem; margin-right: clamp(0rem, 15vw, 18rem); padding: clamp(2rem, 5vw, 5rem) var(--gutter) clamp(2rem, 5vw, 4.5rem); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; } @media (max-width: 47.99rem) { .cards-panel { margin-right: 0; border-radius: 0; } } .cards-panel__grid { list-style: none; padding: 0; margin-inline: auto; max-width: 78rem; display: grid; gap: 2.5rem clamp(1.5rem, 4vw, 4.3rem); } @media (min-width: 36rem) { .cards-panel__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .cards-panel__grid { grid-template-columns: repeat(3, 1fr); } } .photo-card { display: block; text-decoration: none; color: var(--ink); } .photo-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 0.2); transition: transform 0.25s; } .photo-card:hover img { transform: scale(1.02); } .photo-card__label { display: block; margin-top: 1rem; font-size: var(--step-1); letter-spacing: 0.02em; } .photo-card:hover { color: var(--ink); } /* Sekce jedné služby: fotka + text */ .service { display: grid; background: var(--bg); scroll-margin-top: var(--header-h); } .service__media picture { height: 100%; } .service__media img { width: 100%; height: 100%; max-height: 36rem; object-fit: cover; } .service__body { display: flex; align-items: center; padding: clamp(2.5rem, 6vw, 6rem) var(--gutter); } .service__text { max-width: 41rem; } .service__title { font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); color: var(--brand-deep); line-height: 1.1; } .service__subtitle { font-family: var(--font-head); font-weight: 800; font-size: var(--step-2); color: var(--brand); } .service ul { padding-left: 1.2rem; } .service--flip .service__body { background: var(--tint); } .service--flip .service__title { color: var(--ink); } @media (min-width: 62rem) { .service { grid-template-columns: 1fr 1fr; } .service__media img { max-height: none; } .service__body { padding-inline: clamp(3rem, 8vw, 9rem) var(--gutter); } .service--flip .service__media { order: 2; background: var(--surface); padding: 0 10% 0 10%; } .service--flip .service__media img { height: auto; } .service--flip .service__body { padding-inline: clamp(2rem, 10vw, 12.5rem) clamp(2rem, 5vw, 3rem); } } .accordions { display: grid; gap: 1.25rem; margin-top: 1.75rem; } .accordion { background: #f4f4f2; border: 1px solid #dcdcd8; } .service--flip .accordion { background: #f4f4f4; } .accordion[open] { background: var(--surface); } .accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); color: var(--brand-deep); cursor: pointer; list-style: none; } .accordion summary::-webkit-details-marker { display: none; } .accordion__icon { width: 1.1rem; height: 1.1rem; fill: #c3c5c2; transition: transform 0.2s; } .accordion[open] .accordion__icon { transform: rotate(45deg); } .accordion__body { padding: 0 1.25rem 1.25rem; font-size: var(--step--1); } .accordion__body ul { padding-left: 1.1rem; } /* ------------------------------------------------------------ 10. Rozvrh */ .rozvrh { --slot: 1.4rem; --rows: 3rem repeat(14, var(--slot)) 2.4rem repeat(20, var(--slot)); margin-top: 2.5rem; display: grid; grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr)); background: #faf9f7; border-radius: 1rem; box-shadow: 0 0.2rem 1rem rgb(0 0 0 / 0.05); overflow: hidden; } .rozvrh__osa, .rozvrh__den { display: grid; grid-template-rows: var(--rows); } .rozvrh__osa { border-right: 1px solid #e6e3de; } .rozvrh__osa span { font-size: 0.7rem; color: #a6a39e; text-align: center; transform: translateY(-0.5em); grid-column: 1; } .rozvrh__den { position: relative; border-right: 1px solid #ebe8e3; } .rozvrh__den:last-child { border-right: 0; } .rozvrh__nazev { grid-row: 1; display: grid; place-items: center; background: var(--surface); border-bottom: 1px solid #e6e3de; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #8c8983; } .rozvrh__pauza { grid-row: 16; background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(0 0 0 / 0.04) 6px 7px); border-block: 1px dashed #dcd8d2; } .lekce { grid-column: 1; margin: 2px 4px; padding: 0.35rem 0.5rem; border-radius: 0.4rem; font-size: 0.72rem; line-height: 1.3; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem; color: rgb(0 0 0 / 0.6); } .lekce strong { font-size: 0.8rem; color: rgb(0 0 0 / 0.78); font-weight: 600; } /* Název lekce vede na rezervaci nebo web lektora – barvu si bere z bloku. */ .lekce strong a { color: inherit; text-decoration: underline; text-decoration-color: rgb(0 0 0 / 0.25); text-underline-offset: 0.15em; } .lekce strong a:hover, .lekce strong a:focus-visible { text-decoration-color: currentColor; } .lekce--mustard { background: var(--l-mustard); } .lekce--pink { background: var(--l-pink); } .lekce--rose { background: var(--l-rose); } .lekce--green { background: var(--l-green); } .lekce--coral { background: var(--l-coral); } .lekce--lavender { background: var(--l-lavender); } .lekce--blue { background: var(--l-blue); } .lekce--tan { background: var(--l-tan); } .lekce--obsazeno { background: var(--l-busy); font-style: italic; } .rozvrh__cta { margin-top: 1.5rem; text-align: center; } /* Na úzké obrazovce se rozvrh skládá do seznamu po dnech */ @media (max-width: 55.99rem) { .rozvrh { display: block; background: none; box-shadow: none; border-radius: 0; overflow: visible; } .rozvrh__osa, .rozvrh__pauza { display: none; } .rozvrh__den { display: flex; flex-direction: column; gap: 0.4rem; border: 0; margin-bottom: 1rem; padding: 0.75rem; background: #faf9f7; border-radius: var(--radius); } .rozvrh__nazev { background: none; border: 0; place-items: start; padding-bottom: 0.25rem; color: var(--ink); } .lekce { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; } .lekce strong { flex: 1 1 100%; font-size: 0.95rem; } } .rules { margin-top: clamp(3rem, 6vw, 5rem); } .rules__title { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); color: var(--brand); } .rules h3 { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); color: var(--brand); } .rules ul { padding-left: 1.2rem; font-size: var(--step--1); color: var(--muted); } .rules li + li { margin-top: 0.4rem; } .rules strong { color: var(--ink); font-weight: 500; } .rules > h3 + ul { margin-top: 0.6rem; } .partner { margin-top: clamp(3rem, 6vw, 5rem); font-size: var(--step-1); } .partner a { color: var(--brand); text-decoration: none; } /* ------------------------------------------------------------ 11. O nás, tým, recenze */ .icon-list { list-style: none; padding: 0 0 0 clamp(0rem, 4vw, 4rem); display: grid; gap: 0.9rem; } .icon-list li { display: flex; gap: 1rem; align-items: flex-start; color: var(--brand); font-size: var(--step-1); line-height: 1.3; } .icon-list .icon { width: 1.9rem; height: 1.9rem; color: var(--brand-deep); } .team { list-style: none; padding: 0; margin-top: 2.5rem; display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; } @media (min-width: 40rem) { .team { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .team { grid-template-columns: repeat(3, 1fr); } } .team-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.75rem 1.25rem 2rem; } .team-card__photo { margin-inline: auto; width: 100%; max-height: 16rem; object-fit: contain; } .team-card__name { font-weight: 400; font-size: var(--step-1); margin: 1.5rem 0 0.75rem; } .team-card p { font-size: var(--step--1); color: var(--muted); line-height: 1.85; } .gallery { margin: 2.5rem auto 0; max-width: 44rem; } .gallery img { width: 100%; box-shadow: var(--shadow); } .reviews { display: grid; gap: clamp(1.5rem, 5vw, 5rem); margin-block: 2.5rem 3rem; align-items: start; } @media (min-width: 62rem) { .reviews { grid-template-columns: 1fr 1fr; } } .review { margin: 0; padding: 2rem 2rem 2.5rem; background: var(--bg); border: 2px solid var(--brand-deep); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--step--1); color: var(--muted); } .review--tint { background: var(--tint); } .review footer { margin-top: 2.5rem; color: var(--ink); font-size: var(--step-0); } /* ------------------------------------------------------------ 12. Ceník */ .pricing-page { overflow: hidden; } .pricing-page .wrap { position: relative; } .deco-ring { position: absolute; border-radius: 50%; border: clamp(3rem, 8vw, 8rem) solid var(--tint); pointer-events: none; } .deco-ring--left { width: clamp(20rem, 45vw, 42rem); aspect-ratio: 1; left: clamp(-26rem, -22vw, -8rem); top: 2rem; } .deco-ring--right { width: clamp(20rem, 45vw, 42rem); aspect-ratio: 1; right: clamp(-24rem, -20vw, -8rem); bottom: -8rem; } .pricing { list-style: none; padding: 0; margin-top: clamp(2rem, 5vw, 4rem); display: grid; gap: 3rem clamp(2rem, 5vw, 5rem); } @media (min-width: 40rem) { .pricing { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .pricing { grid-template-columns: repeat(3, 1fr); } } .price-item__icon { width: 2.8rem; height: 2.8rem; color: var(--brand); margin-bottom: 1.5rem; } .price-item__title { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.6rem; } .price-item ul { padding-left: 1rem; list-style: disc; color: var(--muted); } .price-item li + li { margin-top: 0.3rem; } .price-item__note { margin-top: 1.3rem; text-transform: uppercase; } .pricing-page .btn-row { margin-top: 4rem; } /* ------------------------------------------------------------ 13. Blog */ .blog-head .eyebrow { font-size: var(--step--1); letter-spacing: 0.15em; } .blog-head__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 4.5vw, 5.2rem); color: var(--brand); line-height: 1.1; margin-top: 1rem; } .blog-head__sub { font-size: var(--step-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 300; } .posts { list-style: none; padding: 0; margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 4rem clamp(1.5rem, 5vw, 5rem); align-items: start; } @media (min-width: 40rem) { .posts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .posts { grid-template-columns: repeat(3, 1fr); } } .post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .post-card__body { padding: 1.5rem 1.25rem 0; } .post-card__title { font-family: var(--font-head); font-weight: 500; font-size: var(--step-1); line-height: 1.3; margin-bottom: 0.9rem; } .post-card__title a { text-decoration: none; } .post-card p { font-size: var(--step--1); color: #7a7f7c; line-height: 1.9; margin-bottom: 1.2rem; } /* Stránka Aktuality */ .banner img { width: 100%; height: clamp(10rem, 22vw, 18rem); object-fit: cover; } .news-page { padding-top: 1.5rem; } .news-page__title { font-family: var(--font-head); font-weight: 800; font-size: var(--step-4); color: var(--brand); text-align: center; line-height: 1.1; } .news-cards { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 58rem; display: grid; gap: 3rem clamp(1.5rem, 4vw, 3.2rem); align-items: start; } @media (min-width: 48rem) { .news-cards { grid-template-columns: 1fr 1fr; } } .news-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.5rem clamp(1rem, 3vw, 2.5rem) 1rem; background: var(--surface); border-radius: var(--radius); box-shadow: 0 0.2rem 0.9rem rgb(0 0 0 / 0.14); text-align: center; } .news-card__img { width: 100%; border-radius: var(--radius); margin-bottom: 0.8rem; } .news-card picture { width: 100%; } .news-card__title { font-weight: 400; font-size: var(--step-2); color: var(--brand); line-height: 1.15; } .news-card__strong { color: var(--ink); font-size: var(--step--1); } .news-card__text { font-size: var(--step--1); color: var(--muted); line-height: 1.85; } .news-card__text > * + * { margin-top: 0.9rem; } .news-card__text strong { color: var(--ink); font-weight: 500; } .news-card__cta { margin-top: auto; padding-top: 1rem; } .news-card__link { color: var(--brand); text-decoration: none; } .news-card__link:hover { text-decoration: underline; } .news__title a { text-decoration: none; } /* Článek blogu */ .article-head { position: relative; z-index: 1; --wrap: 60rem; padding-bottom: 2rem; } .article-head__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } @media (min-width: 48rem) { .article-head__img { aspect-ratio: 16 / 5; } } .article-head__band { display: grid; place-items: center; min-height: clamp(8rem, 18vw, 12rem); padding: 2rem clamp(1rem, 5vw, 4rem); background: var(--brand); box-shadow: 0 1.5rem 2rem rgb(0 0 0 / 0.12); border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 1.25rem; } .article-head__title { font-family: var(--font-head); font-weight: 500; font-size: var(--step-3); color: var(--white); text-align: center; line-height: 1.25; } .article-body-wrap { position: relative; overflow: hidden; background: var(--bg); padding-bottom: clamp(4rem, 8vw, 7rem); } .article-body-wrap::before { content: ""; position: absolute; inset: 0 0 auto; height: 6rem; background: var(--bg); } .deco-ring--article { width: clamp(24rem, 55vw, 50rem); aspect-ratio: 1; right: clamp(-18rem, -12vw, -6rem); top: 30%; } .article-body { position: relative; width: min(100% - var(--gutter) * 2, 48rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.2rem) 2rem; background: var(--surface); } .article__content { font-size: var(--step--1); line-height: 1.95; color: var(--muted); } .article__content > * + * { margin-top: 0.5rem; } .article__content h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); color: #1e6b5d; line-height: 1.2; margin-top: 1.4rem; } .article__content h2:first-child { margin-top: 0; } .article__content ul, .article__content ol { padding-left: 1.2rem; } .article__content strong { color: var(--ink); font-weight: 500; } .article__content a { color: var(--brand); } .article__intro { font-style: italic; } .article-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .article-nav a { font-family: var(--font-head); font-weight: 600; color: #1e6b5d; text-decoration: none; font-size: var(--step--1); } .article-nav a:hover { text-decoration: underline; } .article-nav__next { margin-left: auto; text-align: right; } .latest { background: var(--accent); padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter); } .latest__box { width: min(100%, 48rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); box-shadow: 0 1.5rem 2.5rem rgb(0 0 0 / 0.12); } .latest__title { font-family: var(--font-head); font-weight: 500; font-size: var(--step-3); color: #1e6b5d; margin-bottom: 1.5rem; } .latest__grid { list-style: none; padding: 0; display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 40rem) { .latest__grid { grid-template-columns: repeat(3, 1fr); } } .latest-card { box-shadow: 0 0.8rem 1.4rem rgb(0 0 0 / 0.1); } .latest-card > a { display: block; } .latest-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .latest-card__body { padding: 1rem; } .latest-card__title { font-family: var(--font-head); font-weight: 800; font-size: 1rem; line-height: 1.3; color: #1e6b5d; margin-bottom: 0.6rem; } .latest-card__title a { text-decoration: none; } .latest-card p { font-size: 0.75rem; color: #8a8f8c; line-height: 1.8; } /* ------------------------------------------------------------ 14. Formulář a mapa */ .form-title { color: var(--brand); } .form { display: grid; gap: 1.3rem; } .form__row { display: grid; gap: 1.3rem; } @media (min-width: 36rem) { .form__row { grid-template-columns: 1fr 1fr; } } .field { position: relative; } .field label { position: absolute; left: 1rem; top: 0.95rem; font-size: 0.95rem; color: var(--ink-soft); pointer-events: none; transition: opacity 0.15s; } .field input, .field select, .field textarea { width: 100%; padding: 1.1rem 1rem 0.6rem; border: 2px solid transparent; border-radius: 0.4rem; background: var(--tint); font: inherit; font-size: 0.95rem; color: var(--ink); } .field textarea { resize: vertical; min-height: 9rem; padding-top: 2.2rem; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; } .field select { color: transparent; } .field select:valid, .field select:focus { color: var(--ink); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); } /* Popisek zmizí, jakmile pole obsahuje text (u selectu jakmile je něco vybráno) */ .field:has(input:not(:placeholder-shown)) label, .field:has(select:valid) label { opacity: 0; } .field:has(textarea:focus) label, .field:has(textarea:not(:placeholder-shown)) label { font-size: 0.8rem; } .field__error { font-size: 0.8rem; color: #b3261e; min-height: 0; } .field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: #b3261e; } .consent { border: 0; padding: 0; margin: 0; } .consent legend { padding: 0; margin-bottom: 0.9rem; } .consent label { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-0); } .consent input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); } .form__submit { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; } .form__status { font-size: var(--step--1); } .form__status[data-state="ok"] { color: var(--brand-deep); } .form__status[data-state="error"] { color: #b3261e; } .map { position: relative; display: grid; place-items: center; overflow: hidden; background: #cfe3d3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 40h160M0 120h160M40 0v160M120 0v160' stroke='%23b9d4bf' stroke-width='3'/%3E%3Cpath d='M0 150L150 0' stroke='%23e7c86b' stroke-width='3'/%3E%3C/svg%3E"); border-radius: var(--radius); } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map--large { min-height: clamp(18rem, 40vw, 30rem); } .map--small { width: min(100%, 15.5rem); aspect-ratio: 7 / 8; margin-top: 1rem; background-color: var(--white); box-shadow: 0 0.1rem 0.3rem rgb(0 0 0 / 0.2); border-radius: 0.25rem; } .map__consent { display: grid; justify-items: center; gap: 0.5rem; padding: 0.8rem 1.2rem; margin: 0.5rem; background: rgb(60 60 60 / 0.72); color: var(--white); font-size: 0.85rem; text-align: center; } .map--small .map__consent { font-size: 0.7rem; padding: 0.6rem; } .contact-points { list-style: none; padding: 0; display: grid; gap: 3rem 2rem; text-align: center; } @media (min-width: 48rem) { .contact-points { grid-template-columns: repeat(3, 1fr); } } .contact-points li { display: grid; justify-items: center; gap: 0.6rem; } .contact-points .icon { width: 4.5rem; height: 4.5rem; color: var(--brand); margin-bottom: 1rem; } .contact-points__main { color: var(--brand); text-decoration: none; font-size: var(--step-1); } /* ------------------------------------------------------------ 15. Patička */ .site-footer { background: var(--footer); color: var(--ink); padding-block: clamp(3rem, 5vw, 4rem) 2rem; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--white); } .site-footer__grid { display: grid; gap: 2.5rem; --wrap: 75rem; } @media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } } .site-footer__title { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); text-transform: uppercase; margin-bottom: 1.2rem; } .site-footer__lead { font-size: var(--step-1); line-height: 1.45; } .site-footer__hours { margin-top: 1.8rem; line-height: 1.6; } .site-footer__links { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .site-footer__phone { font-size: var(--step-2); } .site-footer p + p { margin-top: 0.6rem; } .site-footer__bottom { --wrap: 75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); } .site-footer__credit { font-size: var(--step--1); } .site-footer__credit a { text-decoration: underline; text-underline-offset: 0.2em; } .social { display: flex; gap: 1.25rem; } .social a { color: var(--white); } .social a:hover { color: var(--ink); } .social .icon { width: 1.6rem; height: 1.6rem; } /* ------------------------------------------------------------ 16. Drobnosti */ ::selection { background: var(--tint); color: var(--ink); } @media print { .site-header, .site-footer, .tiles, .map { display: none; } }