, který je sourozencem sticky hlavičky – ořez na / by sticky hlavičku rozbil. */ main { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } ::selection { background: #2f5d62; color: #fff; } /* Sekce na sebe navazují bez mezer – odsazení si řídí samy. Brání i problikávání podkladu mezi barevnými pruhy. */ body .wp-site-blocks > * + * { margin-block-start: 0; } .wp-block-post-content > .alignfull { margin-top: 0; margin-bottom: 0; } b, strong { font-weight: 600; } /* ---------------------------------- */ /* Hlavička */ /* ---------------------------------- */ .frolich-header { position: sticky; top: 0; background: rgba(250, 247, 242, 0.92); border-bottom: 1px solid rgba(34, 51, 59, 0.08); z-index: 100; } /* Matný (frosted) efekt řešíme přes pseudo-prvek. Kdyby byl backdrop-filter přímo na hlavičce, stala by se "containing blockem" pro position:fixed a uvěznila by mobilní rozbalovací menu uvnitř hlavičky (zobrazila se jen první položka „Úvod"). */ .frolich-header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; } /* Hamburger se zobrazí už na tabletech a v užších oknech, ne až pod 600 px (výchozí WordPress breakpoint), kde se vodorovné menu jinak mačká a zalamuje. Overlay po otevření funguje na všech šířkách – přepínáme jen tlačítko a inline menu. */ @media (max-width: 959.98px) { .frolich-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .frolich-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } } .frolich-header .wp-block-site-title a, .frolich-header .wp-block-site-tagline { text-decoration: none; } .frolich-header .wp-block-site-title { line-height: 1.1; } /* CTA položka v menu jako tlačítko */ .frolich-nav-cta a { background: #2f5d62; color: #fff !important; border-radius: 999px; padding: 0.55em 1.3em !important; transition: background 0.2s ease; } .frolich-nav-cta a:hover { background: #23474b; } /* V mobilním overlay menu ať má CTA rozumnou šířku */ .wp-block-navigation__responsive-container.is-menu-open .frolich-nav-cta a { display: inline-block; margin-top: 0.5rem; } /* Obrysová varianta tlačítka */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1.5px solid currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: #2f5d62; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(47, 93, 98, 0.08); } /* ---------------------------------- */ /* Karty a sekce */ /* ---------------------------------- */ .frolich-card { background: #fff; border: 1px solid rgba(34, 51, 59, 0.08); border-radius: 18px; box-shadow: 0 1px 2px rgba(34, 51, 59, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease; height: 100%; } .frolich-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(34, 51, 59, 0.18); } .frolich-card h3 { margin-top: 0; } /* Drobný lísteček před nadpisem karty */ .frolich-card h3::before { content: ""; display: inline-block; width: 0.65em; height: 0.65em; margin-right: 0.5em; border-radius: 999px 0 999px 999px; background: #a9c0ab; transform: rotate(-8deg); } .frolich-card-service h3::before { background: #c0764f; } /* Štítky pod tlačítky v hero sekci */ .frolich-chip { display: inline-flex; align-items: center; background: #fff; border: 1px solid rgba(34, 51, 59, 0.1); border-radius: 999px; padding: 0.35em 1em; font-size: 0.875rem; box-shadow: 0 1px 2px rgba(34, 51, 59, 0.05); } .frolich-chip::before { content: "✓"; color: #2f5d62; font-weight: 600; margin-right: 0.5em; } /* ---------------------------------- */ /* Portrét s obloukem */ /* ---------------------------------- */ .frolich-arch img { border-radius: 999px 999px 28px 28px; box-shadow: 16px 16px 0 0 #a9c0ab; display: block; } .frolich-arch { margin-right: 16px; } .frolich-photo-soft img { border-radius: 24px; box-shadow: 0 18px 40px -18px rgba(34, 51, 59, 0.35); } /* ---------------------------------- */ /* Citát */ /* ---------------------------------- */ .frolich-quote { position: relative; } /* Velká uvozovka je čistě dekorativní – řešená přes CSS, takže text v editoru zůstává jednoduchý a editovatelný. */ .frolich-quote::before { content: "„"; display: block; font-family: "Lora", Georgia, serif; font-size: 5rem; line-height: 0.5; color: #c0764f; text-align: center; margin-bottom: 0.75rem; } .frolich-quote-text { font-family: "Lora", Georgia, serif; font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); line-height: 1.45; color: #22333b; } .frolich-quote-cite { font-family: "Inter", sans-serif; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: #2f5d62; margin-top: 1.25rem !important; } /* ---------------------------------- */ /* Číslované kroky (Jak to probíhá) */ /* ---------------------------------- */ .frolich-step { counter-increment: frolich-steps; } .frolich-steps { counter-reset: frolich-steps; } .frolich-step h3::before { content: counter(frolich-steps); display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; margin: 0 auto 0.75rem; border-radius: 999px; background: #2f5d62; color: #fff; font-family: "Lora", Georgia, serif; font-size: 0.9em; transform: none; } .frolich-step h3 { display: flex; flex-direction: column; align-items: center; } /* ---------------------------------- */ /* Mapa a kontakt */ /* ---------------------------------- */ .frolich-map iframe { width: 100%; height: 400px; border: 0; border-radius: 18px; box-shadow: 0 10px 30px -15px rgba(34, 51, 59, 0.25); display: block; } /* Karta s kontaktními údaji vlevo */ .frolich-contact-info { background: var(--wp--preset--color--sand); border-radius: 18px; } .frolich-contact-list { list-style: none; padding-left: 0 !important; margin: 0; } .frolich-contact-list li { padding: 0.65rem 0; border-bottom: 1px solid rgba(34, 51, 59, 0.08); } .frolich-contact-list li:last-child { border-bottom: 0; } /* ---------------------------------- */ /* Formulář (Contact Form 7) */ /* ---------------------------------- */ .wpcf7 label { font-weight: 500; font-size: 0.95rem; display: block; margin-bottom: 1rem; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { box-sizing: border-box; width: 100%; margin-top: 0.35rem; padding: 0.75em 1em; border: 1px solid rgba(34, 51, 59, 0.18); border-radius: 12px; background: #fff; font: inherit; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: #2f5d62; box-shadow: 0 0 0 3px rgba(47, 93, 98, 0.15); } .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin-left: 0; } .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label { font-weight: 400; font-size: 0.875rem; } .wpcf7 input[type="submit"] { background: #2f5d62; color: #fff; border: 0; border-radius: 999px; padding: 0.8rem 1.7rem; font: inherit; font-weight: 500; cursor: pointer; transition: background 0.2s ease; } .wpcf7 input[type="submit"]:hover { background: #23474b; } .wpcf7 .wpcf7-not-valid-tip { color: #b3543d; font-size: 0.85rem; margin-top: 0.25rem; } .wpcf7 .wpcf7-response-output { border-radius: 12px; padding: 0.75rem 1rem; margin: 1rem 0 0; } /* ---------------------------------- */ /* Patička */ /* ---------------------------------- */ .frolich-footer a { color: #d7e2da; } .frolich-footer a:hover { color: #fff; } .frolich-footer .wp-block-navigation a { color: #d7e2da; } /* ---------------------------------- */ /* Blog */ /* ---------------------------------- */ /* Karta článku v přehledu – obrázek nahoře, text dole. */ .frolich-post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .frolich-post-card .wp-block-post-featured-image { margin: 0; } .frolich-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; } .frolich-post-card .wp-block-post-title { margin: 0; line-height: 1.3; } .frolich-post-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--contrast); } .frolich-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); } .frolich-post-card .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 0.6rem; font-weight: 500; text-decoration: none; } /* Datum / rubrika nad nadpisem. */ .frolich-post-meta, .frolich-post-meta a { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--primary); text-decoration: none; } .frolich-post-meta a:hover { color: var(--wp--preset--color--terracotta); } /* Stránkování. */ .wp-block-query-pagination { gap: 0.5rem; font-weight: 500; } .wp-block-query-pagination a, .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers { text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 999px; } .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--primary); color: #fff; } /* Tělo článku – pohodlné čtení. */ .single .wp-block-post-content { font-size: 1.08rem; } .single .wp-block-post-content > * { margin-top: 1.5rem; } .single .wp-block-post-content h2 { margin-top: 2.5rem; } .single .wp-block-post-content blockquote { border-left: 3px solid var(--wp--preset--color--sage); margin-left: 0; padding-left: 1.25rem; font-style: italic; color: var(--wp--preset--color--primary-dark); } .single .wp-block-post-content img { border-radius: 14px; } /* ---------------------------------- */ /* Jemné animace při scrollu */ /* ---------------------------------- */ @media (prefers-reduced-motion: no-preference) { .frolich-card, .frolich-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease; } .frolich-card.is-visible, .frolich-reveal.is-visible { opacity: 1; transform: translateY(0); } .frolich-card.is-visible:hover { transform: translateY(-4px); } /* Bez JavaScriptu zůstane vše viditelné */ .no-js .frolich-card, .no-js .frolich-reveal { opacity: 1; transform: none; } } /* ---------------------------------- */ /* Responzivní doladění */ /* ---------------------------------- */ @media (max-width: 781px) { .frolich-arch { max-width: 420px; margin-left: auto; margin-right: auto; } .frolich-hero-text { text-align: center; } .frolich-hero-text .wp-block-buttons, .frolich-hero-chips { justify-content: center; } }