/* Theme Name: TvůjPoradce Theme URI: https://tvujporadce.cz Version: 1.0.0 Text Domain: tvujporadce */ /* =================================================================== */ /* = DESIGN TOKENS = */ /* =================================================================== */ :root { /* Brand (Espresso / default) */ --tp-primary: #4a342c; /* espresso / CTA / toggle ON */ --tp-primary-strong: #3b2a24; /* deeper espresso hover */ --tp-accent: #d9c6b0; /* champagne/beige */ /* Base */ --tp-bg: #F0F0F0; --tp-text: #141414; --tp-muted: #737373; /* Overlays */ --tp-hero-overlay: rgba(0,0,0,.45); --tp-header-bg: #3b2a24; /* navbar background */ --tp-header-text: #fff; /* Footer / form controls */ --tp-field-bg: rgba(255,255,255,.07); --tp-field-border: rgba(255,255,255,.28); --tp-field-focus: #9f8779; --tp-field-ring: rgba(159,135,121,.28); } /* Khaki variant — add class="theme-khaki" to */ .theme-khaki { --tp-primary: #6b7c4f; --tp-primary-strong: #56633e; --tp-accent: #e0d7c7; --tp-header-bg: #2f3a25; --tp-field-focus: #7e905e; --tp-field-ring: rgba(126,144,94,.28); } /* Back-compat token names */ :root { --owl-primary: var(--tp-primary); --owl-primary-strong: var(--tp-primary-strong); --owl-accent: var(--tp-accent); --owl-bg: var(--tp-bg); --owl-text: var(--tp-text); --owl-muted: var(--tp-muted); --owl-hero-overlay: var(--tp-hero-overlay); --owl-header-bg: var(--tp-header-bg); --owl-header-text: var(--tp-header-text); } /* =================================================================== */ /* = GLOBAL = */ /* =================================================================== */ html { scroll-behavior: smooth; } html, body { margin: 0; overflow-x: hidden; } body { font-family: "Montserrat", Arial, sans-serif; color: var(--tp-text); background: var(--tp-bg); line-height: 1.7; } input, textarea, select, button, .iti * { font-family: "Montserrat", Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", Arial, sans-serif; letter-spacing: .2px; margin-top: 0; } a { color: white; text-decoration: none; } a:hover { color: lightgray; } .container { width: min(1140px, 92%); margin-inline: auto; } .section-pad { padding: 30px 0; } .section-title { font-weight: 700; margin-bottom: 1.25rem; } .text-muted-tp { color: var(--tp-muted); } /* Small button utility used in About section */ .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 10px; padding: .65rem 1.1rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; } .btn-brand { background: var(--tp-primary); color: #fff; border-color: var(--tp-primary); } .btn-brand:hover { background: var(--tp-primary-strong); border-color: var(--tp-primary-strong); color: #fff; } /* A11y helper */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* =================================================================== */ /* = NAVBAR = */ /* =================================================================== */ header.menu-bar { position: fixed; /* was: sticky */ top: 0; left: 0; right: 0; z-index: 2000; /* stays above any section overlays */ background: var(--tp-header-bg); color: var(--tp-header-text); padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.35); transition: padding .2s ease, box-shadow .2s ease; } header.menu-bar.scrolled { padding: .35rem 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); } /* WP admin bar offset (unchanged) */ body.admin-bar header.menu-bar { top: 32px; } @media (max-width:782px) { body.admin-bar header.menu-bar { top: 46px; } } /* =================================================================== */ /* = RIGHT-SIDE MENU = */ /* = Desktop: drawer 600px from right | Mobile: fullscreen overlay = */ /* =================================================================== */ .menu-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1200; display: none; pointer-events: none; } .menu-overlay.open { display: block; pointer-events: auto; } .menu-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(1.5px); z-index: 0; } .menu-overlay__inner { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: stretch; margin: 0; padding: 0 !important; } /* Remove Bootstrap container cap so the drawer hugs the viewport edge */ .menu-overlay__inner.container { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .menu-panel { position: relative; height: 100%; width: 100%; /* mobile: fullscreen */ margin-left: auto; transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; } .menu-panel::before { content: ""; position: absolute; inset: 0; background-image: var(--menu-overlay-bg); background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05) brightness(.85); z-index: 0; } .menu-panel::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.68); z-index: 0; } /* desktop drawer width */ @media (min-width: 992px) { .menu-panel { width: 600px; border-left: 1px solid rgba(255,255,255,.2); } } .menu-overlay.visible .menu-panel { transform: translateX(0); } .menu-toggle { display: flex; align-items: center; gap: .5rem; background: transparent; border: 0; color: #fff; cursor: pointer; font-weight: 600; font-size: 1.2rem; } .menu-icon { position: relative; width: 22px; height: 2px; background: currentColor; display: inline-block; } .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; } .menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; } /* Close button INSIDE the drawer; wide “minus” bar so it slides with panel */ .menu-panel { position: relative; } .menu-close { position: absolute; top: 12px; left: 12px; z-index: 2; background: transparent; border: 0; color: #fff; cursor: pointer; width: 48px; height: 36px; padding: 0; line-height: 0; } /* Draw wider minus */ .menu-close::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: #fff; transform: translate(6px, 17px); } .menu-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* (Removed old .menu-close-line — no longer used) */ .menu-nav { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem,4vw,3rem); } .menu-list { list-style: none; margin: 0; padding: 0; text-align: center; width: 100%; } .menu-list > li { margin: .6em 0; } .menu-list a { color: #fff; font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.25; transition: opacity .2s, transform .2s; } .menu-list a:hover { opacity: .9; transform: translateY(-1px); } /* Prevent background scroll when the menu is open (JS toggles .menu-open on ) */ body.menu-open { overflow: hidden; } /* =================================================================== */ /* = HERO = */ /* =================================================================== */ .hero { position: relative; padding: clamp(4rem,7vw,7rem) 0; color: #fff; background: #0b132b; overflow: hidden; } .hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(2.5px) brightness(.8); transform: scale(1.06); } .hero .hero-overlay { position: absolute; inset: 0; background: var(--tp-hero-overlay); } .hero .container { position: relative; z-index: 2; } .hero .btn-primary { background: var(--tp-primary); border-color: var(--tp-primary); border-radius: 10px; padding: .7rem 1.25rem; } .hero .btn-primary:hover { background: var(--tp-primary-strong); border-color: var(--tp-primary-strong); } /* =================================================================== */ /* = ABOUT / KDO JSEM = */ /* =================================================================== */ .about { padding: 30px 0; } .about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.2rem,3vw,2rem); align-items: center; } @media (max-width: 991px) { .about-grid { grid-template-columns: 1fr; } } .about h2 { font-size: clamp(1.9rem,3.2vw,2.6rem); margin-bottom: .7rem; } .about p { color: #3a3a3a; max-width: 60ch; } .about .cta-wrap { margin-top: 1rem; } .about .img-wrap { margin-left: auto; max-width: 420px; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 18px 40px rgba(0,0,0,.18); } .about .img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: translateZ(0); } /* =================================================================== */ /* = GENERIC COMPONENTS = */ /* =================================================================== */ .card { border: 1px solid rgba(0,0,0,.06); box-shadow: 0 4px 18px 3px rgba(0, 0, 0, 0.12), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 6px 6px -3px rgba(0, 0, 0, 0.20); border-radius: 1rem; } .process-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; } @media (max-width: 991px) { .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .process-grid { grid-template-columns: 1fr; } } .process-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 4px 18px 3px rgba(0, 0, 0, 0.12), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 6px 6px -3px rgba(0, 0, 0, 0.20); } .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tp-primary); color: #fff; font-weight: 700; margin-bottom: .75rem; } /* =================================================================== */ /* = FOOTER / CONTACT (ALL STYLES) = */ /* =================================================================== */ /* ----- Background photo with darkening layer ----- */ .contact-footer-overlay { position: relative; color: #f2f2f2; } .contact-footer-overlay::before { content: ""; position: absolute; inset: 0; background-image: var(--footer-bg); background-size: cover; background-position: center; filter: grayscale(1) brightness(.45); z-index: 0; } .contact-footer-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 0; } .contact-footer-overlay > .container { width: min(1225px, 92%); margin-inline: auto; position: relative; z-index: 1; } /* ----- Footer typography & lists (no bullets) ----- */ .contact-footer, .contact-footer * { color: #fff; } .contact-footer { font-size: 1.0625rem; } .contact-footer ul { list-style: none; padding-left: 0; margin-left: 0; } .contact-footer ul li::marker { content: ""; } .contact-footer .person-list li { margin: .25rem 0; } /* ----- Glass card for the form ----- */ .contact-form-transparent { background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 1.1rem; backdrop-filter: blur(3px); box-shadow: 0 10px 30px rgba(0,0,0,.28); } /* ----- Controls (inputs) ----- */ .contact-footer .tp-input { height: 46px; line-height: 46px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.07)); color: #fff; border: 1px solid var(--tp-field-border); border-radius: 12px; padding: 0 .95rem; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .15s, box-shadow .15s, background .15s, transform .06s; } .contact-footer .tp-input::placeholder { color: rgba(255,255,255,.88); } .contact-footer .tp-input:focus { border-color: var(--tp-field-focus); box-shadow: 0 0 0 .2rem var(--tp-field-ring); background: rgba(255,255,255,.12); transform: translateY(-1px); } /* ----- Message field ----- */ .contact-footer textarea.tp-input { height: 86px; min-height: 86px; max-height: 220px; line-height: 1.5; padding: .55rem .95rem; white-space: normal; overflow-y: auto; overflow-x: hidden; resize: vertical; } .contact-footer textarea.tp-input::-webkit-scrollbar { width: 8px; height: 8px; } /* Compact spacing between rows */ .contact-footer .wpcf7-form p { margin: 0 0 .5rem !important; } .contact-footer .mb-3 { margin-bottom: .5rem !important; } /* ----- intl-tel-input (phone) ----- */ .contact-footer .iti { width: 100% !important; position: relative; z-index: 20; } .contact-footer .iti--separate-dial-code .iti__selected-flag { padding: 0 10px; } .contact-footer .iti--separate-dial-code .iti__selected-dial-code { color: rgba(255,255,255,.95); font-weight: 600; } .contact-footer .iti--separate-dial-code input.tp-input { padding-left: 112px !important; } @media (max-width: 480px) { .contact-footer .iti--separate-dial-code input.tp-input { padding-left: 98px !important; } } .contact-footer .iti__dropdown-content { background: #fff; color: #111; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.18); } .contact-footer .iti__country-list { max-height: 240px; background: #fff; color: #111; } .contact-footer .iti__search-input { background: #fff !important; color: #111 !important; border: 1px solid #d1d5db !important; border-radius: 6px; padding: .42rem .6rem; } .contact-footer .iti__country-name, .contact-footer .iti__dial-code { color: #111; } .contact-footer .iti__country-list li[aria-selected="true"], .contact-footer .iti__country-list li:hover { background: #f6f2ee; } /* ----- GDPR acceptance toggle ----- */ .contact-footer .wpcf7-acceptance label { display: flex; align-items: center; gap: .75rem; } .contact-footer .wpcf7-acceptance, .contact-footer .wpcf7-acceptance label, .contact-footer .wpcf7-acceptance label:focus, .contact-footer .wpcf7-acceptance label:focus-within { outline: none !important; box-shadow: none !important; background: transparent !important; } .contact-footer .wpcf7-acceptance input[type="checkbox"] { appearance: none; -webkit-appearance: none; outline: 0; cursor: pointer; width: 48px; height: 26px; border-radius: 999px; background: #9a9a9a; border: 0; position: relative; transition: background .2s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } .contact-footer .wpcf7-acceptance input[type="checkbox"]::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .2s ease; box-shadow: 0 2px 4px rgba(0,0,0,.35); } .contact-footer .wpcf7-acceptance input[type="checkbox"]:checked { background: var(--tp-primary); } .contact-footer .wpcf7-acceptance input[type="checkbox"]:checked::after { transform: translateX(22px); } /* ----- Submit button ----- */ .contact-footer .tp-submit { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: none; margin: .5rem auto 0; background: var(--tp-primary); border: 1px solid var(--tp-primary); color: #fff; font-weight: 700; border-radius: 10px; padding: .7rem 1.1rem; font-size: 1rem; box-shadow: none; transition: transform .06s, background .15s, border-color .15s; } .contact-footer .tp-submit:hover { background: var(--tp-primary-strong); border-color: var(--tp-primary-strong); transform: translateY(-1px); } /* ----- Validation UX ----- */ .contact-footer .wpcf7-form .wpcf7-not-valid-tip { display: none !important; } .contact-footer .wpcf7 .wpcf7-not-valid { border-color: var(--tp-field-border) !important; box-shadow: none !important; } .contact-footer .wpcf7 .wpcf7-response-output { border: 0 !important; background: transparent !important; margin: .9rem auto 0 !important; padding: 0 !important; max-width: 760px; color: #ff6b6b; font-weight: 600; font-size: 1.05rem; line-height: 1.5; text-align: center; } .contact-footer .wpcf7 form.sent .wpcf7-response-output { color: #d8fff0; } /* Wrap long e-mails on desktop too */ footer a[href^="mailto:"], footer .contact-email { overflow-wrap: anywhere; word-break: break-word; white-space: normal; display: inline-block; max-width: 100%; } /* =================================================================== */ /* = SCROLL/ANIM UTILS = */ /* =================================================================== */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .6s; } .reveal.is-visible { opacity: 1; transform: none; } /* Anchor offset for sticky header anchors */ #home, #about, #process, #services, #references, #contact { scroll-margin-top: 90px; } /* Mobile: show the overlay ABOVE the fixed header, and hide the header while open */ @media (max-width: 991px) { /* put overlay above header (header is z-index: 2000) */ .menu-overlay { z-index: 3000; } /* visually remove the header only while the menu is open */ body.menu-open header.menu-bar { opacity: 0; pointer-events: none; } } /* (optional) if you want the WP admin bar hidden while menu is open too */ @media (max-width: 991px) { body.menu-open #wpadminbar { opacity: 0; pointer-events: none; } } @media (min-width: 992px) { .menu-overlay { top: var(--header-offset, 45px); /* push down */ height: calc(100vh - var(--header-offset, 45px)); /* keep full remaining height */ } /* the rest already uses 100% of the overlay element */ .menu-overlay::after { inset: 0; } .menu-overlay__inner { height: 100%; } .menu-panel { height: 100%; } /* already set, just reaffirming */ } /* Push page content below the fixed header (all standard pages) */ main.site-main { padding-top: 15px; } /* (Front page uses #home in header.php) */ main#home { padding-top: var(--header-offset, 25px); } /* ========================= PAGES (page.php) ========================= */ /* Narrower reading width than homepage sections */ .site-main.page-template > .container { width: min(1140px, 92%); } /* Header spacing & title accent */ .page-header { margin: 0 0 1.25rem; } .page-title { font-weight: 800; line-height: 1.2; font-size: clamp(1.9rem, 3.5vw, 2.6rem); color: var(--tp-primary-strong); margin: 0; position: relative; display: inline-block; /* shrink to text width */ width: fit-content; /* modern browsers */ width: -moz-fit-content; /* FF fallback */ } .page-title::after { content: ""; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--tp-primary); } /* Optional short intro pulled from excerpt */ .page-lead { margin: .9rem 0 0; color: #3a3a3a; font-size: clamp(1.05rem, 1.6vw, 1.15rem); max-width: 68ch; } /* Back link style from your existing markup */ .back-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--tp-muted); font-weight: 600; text-decoration: none; } .back-link:hover { color: var(--tp-primary-strong); transform: translateX(-2px); } .back-link__chev { width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: .1rem; } /* Typography system for page content */ .typography { color: var(--tp-text); } .typography > * + * { margin-top: 1rem; } /* vertical rhythm */ .typography p { color: #3a3a3a; max-width: 1150px; } .typography h2 { margin-top: 2.25rem; margin-bottom: .5rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.25; } .typography h3 { margin-top: 1.75rem; margin-bottom: .4rem; font-size: clamp(1.25rem, 2vw, 1.5rem); } .typography h4 { margin-top: 1.4rem; font-size: 1.1rem; } .typography a { color: var(--tp-primary); text-decoration: underline; } .typography a:hover { color: var(--tp-primary-strong); } /* Lists */ .typography ul, .typography ol { padding-left: 1.25rem; } .typography li { margin: .35rem 0; } /* Blockquote */ .typography blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #fff; border-left: 4px solid var(--tp-accent); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.04); color: #333; } /* Images & figures */ .typography img { max-width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.06); } .typography figure { margin: 1.25rem 0; } .typography figcaption { margin-top: .5rem; color: var(--tp-muted); font-size: .95rem; text-align: center; } /* Tables */ .typography .wp-block-table { overflow-x: auto; } .typography table { width: 100%; border-collapse: collapse; } .typography th, .typography td { padding: .65rem .8rem; border-bottom: 1px solid #eee; text-align: left; } .typography thead th { background: #f6f2ee; } .typography tbody tr:nth-child(odd) { background: #fbf9f6; } /* Code snippets */ .typography pre, .typography code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } .typography pre { background: #f6f2ee; padding: 1rem; border-radius: 10px; overflow: auto; } /* Horizontal rule */ .typography hr { border: 0; height: 1px; background: #e7e0d8; margin: 2rem 0; } /* -------- Simple lightbox -------- */ .tp-lightbox { position: fixed; inset: 0; display: none; z-index: 4000; background: rgba(0,0,0,.86); align-items: center; justify-content: center; padding: 2rem; } .tp-lightbox.open { display: flex; } .tp-lightbox img { max-width: min(92vw, 1400px); max-height: 90vh; border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.5); } .tp-lightbox__close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; } body.lb-open { overflow: hidden; } /* Let JS own the scroll animation everywhere */ :root, html, body { scroll-behavior: auto !important; } /* Safety for direct hash jumps if JS doesn’t fire */ [id] { scroll-margin-top: calc(var(--sticky-offset, 84px) + 12px); }