/* ============================================================ Reality Plugin – Frontend Styles Design je napojen na globální proměnné Elementoru, takže barvy a písma se shodují s nastavením webu (Site Settings → Design System → Global Colors / Global Fonts). Použité proměnné (s fallbacky pro případ bez Elementoru): --e-global-color-primary → ceny, hlavní akcenty, tlačítka --e-global-color-secondary → nadpisy karet --e-global-color-text → běžný text --e-global-color-accent → odkazy --e-global-typography-secondary-* → nadpisy (jako H2) --e-global-typography-text-* → běžný text --e-global-typography-accent-* → tlačítka ============================================================ */ /* Společné proměnné – definované na "body" (ne na :root/html). Elementor přidává globální barvy/písma jako CSS proměnné na třídu u (např. .elementor-kit-XXX), nikoli na . Custom properties se dědí jen shora dolů, takže definice na :root by k této hodnotě na neměla přístup (opačný směr dědičnosti). "body" navíc zůstává předkem úplně všeho na stránce, takže to funguje i pro libovolně rozdělené/oddělené komponenty. */ body { --r-primary: var(--e-global-color-primary, #1a6fb1); --r-secondary: var(--e-global-color-secondary, #212529); --r-text: var(--e-global-color-text, #495057); --r-accent: var(--e-global-color-accent, #1a6fb1); --r-heading-font: var(--e-global-typography-secondary-font-family, inherit), sans-serif; --r-heading-weight: var(--e-global-typography-secondary-font-weight, 700); --r-body-font: var(--e-global-typography-text-font-family, inherit), sans-serif; --r-accent-font: var(--e-global-typography-accent-font-family, inherit), sans-serif; --r-accent-weight: var(--e-global-typography-accent-font-weight, 600); } /* ---- Cena ------------------------------------------------- */ .reality-price { font-size: 1.5em; font-weight: var(--r-heading-weight); font-family: var(--r-heading-font); color: var(--r-primary); } .reality-price-neg { font-size: 0.65em; font-weight: 400; color: var(--r-text); } .reality-price-note { font-style: italic; color: var(--r-text); opacity: 0.8; } /* ---- Galerie ---------------------------------------------- */ .reality-gallery { display: grid; gap: 8px; } .reality-gallery--cols-1 { grid-template-columns: 1fr; } .reality-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); } .reality-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); } .reality-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 640px) { .reality-gallery--cols-3, .reality-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .reality-gallery { grid-template-columns: 1fr; } } .reality-gallery__item { overflow: hidden; border-radius: 4px; } .reality-gallery__item img, .reality-gallery__item a img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s ease; } .reality-gallery__item a:hover img { transform: scale(1.04); } /* ---- Galerie: carousel ------------------------------------ */ .reality-carousel { position: relative; display: flex; align-items: center; gap: 8px; } .reality-carousel__viewport { overflow: hidden; flex: 1 1 auto; border-radius: 4px; } .reality-carousel__track { display: flex; flex-wrap: nowrap; gap: 0; transition: transform 0.4s ease; will-change: transform; } .reality-carousel__slide { flex: 0 0 33.333%; max-width: 33.333%; box-sizing: border-box; padding: 0 4px; } .reality-carousel__slide img, .reality-carousel__slide a img { width: 100%; height: 240px; object-fit: cover; display: block; border-radius: 4px; transition: transform 0.3s ease; } .reality-carousel__slide a:hover img { transform: scale(1.03); } .reality-carousel__nav { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--r-primary, #1a6fb1); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter 0.2s, opacity 0.2s; z-index: 2; } .reality-carousel__nav:hover { filter: brightness(0.9); } .reality-carousel__nav:disabled { opacity: 0.35; cursor: default; } .reality-carousel__dots { position: absolute; bottom: -22px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; } .reality-carousel__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.2); cursor: pointer; transition: background 0.2s, transform 0.2s; } .reality-carousel__dot.is-active { background: var(--r-primary, #1a6fb1); transform: scale(1.25); } .reality-carousel:has(.reality-carousel__dots) { margin-bottom: 28px; } @media (max-width: 640px) { .reality-carousel__slide img, .reality-carousel__slide a img { height: 200px; } .reality-carousel__nav { width: 34px; height: 34px; font-size: 18px; } } /* ---- Hlavní foto / jednotlivá fotka ----------------------- */ .reality-main-photo, .reality-photo { width: 100%; height: auto; display: block; border-radius: 6px; } /* ---- Mapa ------------------------------------------------- */ .reality-map-wrapper { border-radius: 6px; overflow: hidden; } /* ---- Odkaz na mapu ---------------------------------------- */ .reality-map-link { display: inline-flex; align-items: center; gap: 6px; color: var(--r-accent); text-decoration: none; font-weight: 500; font-family: var(--r-body-font); } .reality-map-link::before { content: "📍"; } .reality-map-link:hover { text-decoration: underline; } /* ---- Video ------------------------------------------------ */ .reality-video-wrapper { border-radius: 6px; overflow: hidden; } /* ---- Makléř karta ----------------------------------------- */ .reality-broker-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; font-family: var(--r-body-font); } .reality-broker-card__photo { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .reality-broker-card__info { display: flex; flex-direction: column; gap: 6px; } .reality-broker-card__name { font-size: 1.05em; font-weight: var(--r-heading-weight); font-family: var(--r-heading-font); color: var(--r-secondary); } .reality-broker-card__phone, .reality-broker-card__email { font-size: 0.9em; color: var(--r-accent); text-decoration: none; } .reality-broker-card__phone:hover, .reality-broker-card__email:hover { text-decoration: underline; } .reality-broker__email, .reality-broker__phone { color: var(--r-accent); text-decoration: none; } /* ---- Odznaky --------------------------------------------- */ .reality-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.8em; font-weight: 600; font-family: var(--r-accent-font); letter-spacing: 0.02em; text-transform: uppercase; } .reality-badge--reserved { background: #fff3cd; color: #856404; border: 1px solid #ffc107; } .reality-badge--exclusive { background: var(--r-secondary); color: #fff; } .reality-badge--top { background: #f5b301; color: #fff; } /* ---- Energetická náročnost ------------------------------- */ .reality-energy-badge { display: inline-block; padding: 3px 10px; border-radius: 3px; font-weight: 700; font-size: 0.85em; color: #fff; } .reality-energy--a { background: #1a8a1a; } .reality-energy--b { background: #5cb85c; } .reality-energy--c { background: #a8d429; color: #333; } .reality-energy--d { background: #ffc107; color: #333; } .reality-energy--e { background: #fd7e14; } .reality-energy--f { background: #e95500; } .reality-energy--g { background: #c0392b; } /* ---- Vlastnosti (features) -------------------------------- */ .reality-features { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--r-body-font); } .reality-features li { background: color-mix(in srgb, var(--r-primary) 10%, transparent); color: var(--r-primary); border: 1px solid color-mix(in srgb, var(--r-primary) 30%, transparent); border-radius: 20px; padding: 4px 12px; font-size: 0.875em; font-weight: 500; } .reality-features-inline { color: var(--r-text); font-size: 0.9em; } /* ---- Vybavení (utilities) --------------------------------- */ .reality-utilities { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; font-family: var(--r-body-font); } .reality-utilities li { font-size: 0.9em; color: var(--r-text); padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .reality-utilities li strong { color: var(--r-secondary); } /* ---- Pobočka --------------------------------------------- */ .reality-branch { font-size: 0.9em; color: var(--r-text); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--r-body-font); } .reality-branch__name { font-weight: var(--r-heading-weight); color: var(--r-secondary); } .reality-branch a { color: var(--r-accent); text-decoration: none; } /* ---- Kontaktní formulář ----------------------------------- */ .reality-contact-form { background: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 24px; font-family: var(--r-body-font); } .reality-contact-form__to { margin-top: 0; color: var(--r-text); } .reality-contact-form__success { font-size: 1.1em; color: #0a5c2a; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px; padding: 14px 20px; } .reality-form { display: flex; flex-direction: column; gap: 14px; } .reality-form__group { display: flex; flex-direction: column; gap: 5px; } .reality-form__group label { font-size: 0.875em; font-weight: 600; color: var(--r-secondary); } .reality-form__group input, .reality-form__group textarea { width: 100%; padding: 9px 12px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 5px; font-size: 0.95em; font-family: inherit; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; background: #fff; } .reality-form__group input:focus, .reality-form__group textarea:focus { outline: none; border-color: var(--r-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-primary) 18%, transparent); } .reality-form__group textarea { resize: vertical; min-height: 100px; } .reality-form__btn { align-self: flex-start; background: var(--r-accent); color: #fff; border: none; border-radius: 6px; padding: 11px 24px; font-size: 1em; font-weight: var(--r-accent-weight); font-family: var(--r-accent-font); cursor: pointer; transition: filter 0.2s; } .reality-form__btn:hover { filter: brightness(0.92); } /* ============================================================ Reality Filtr ============================================================ */ .reality-filter-wrap { margin: 0 0 32px; font-family: var(--r-body-font); } /* ---- Formulář ---- */ .rf-form { background: transparent; /*border: 1px solid rgba(0, 0, 0, 0.1);*/ border-radius: 0; padding: 20px 22px; margin-bottom: 20px; } .rf-form__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .rf-form__row--advanced { margin-top: 16px; } .rf-form__field { display: flex; flex-direction: column; gap: 5px; min-width: 160px; flex: 1 1 160px; } .rf-form__field label { font-size: 24px; font-weight: 700; color: var(--r-primary); text-transform: uppercase; letter-spacing: 0.04em; } .rf-form__field select, .rf-form__field input[type="text"], .rf-form__field input[type="number"] { padding: 8px 10px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0; font-size: 0.9em; font-family: inherit; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; box-sizing: border-box; } .rf-form__field select:focus, .rf-form__field input:focus { outline: none; border-color: var(--r-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-primary) 18%, transparent); } .rf-form__field--range .rf-range { display: flex; align-items: center; gap: 6px; } .rf-form__field--range .rf-range span { color: var(--r-text); flex-shrink: 0; opacity: 0.6; } .rf-form__field--range input { flex: 1; min-width: 0; } .rf-form__field--checkboxes .rf-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; } .rf-form__field--checkboxes label { font-size: 0.88em; font-weight: 400; display: flex; align-items: center; gap: 5px; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--r-text); } .rf-form__actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .rf-btn { padding: 9px 20px; border: none; border-radius: 0; font-size: 0.9em; font-weight: var(--r-accent-weight); font-family: var(--r-accent-font); cursor: pointer; transition: filter 0.2s, background 0.2s; } .rf-btn--search { background: var(--r-accent); color: #fff; } .rf-btn--search:hover { filter: brightness(0.92); } .rf-btn--reset { background: rgba(0, 0, 0, 0.08); color: var(--r-secondary); } .rf-btn--reset:hover { background: rgba(0, 0, 0, 0.14); } /* Rozšířené filtry */ .rf-advanced { margin-top: 14px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0; overflow: hidden; } .rf-advanced__toggle { padding: 10px 14px; font-weight: 600; font-size: 0.88em; cursor: pointer; background: color-mix(in srgb, var(--r-primary) 7%, transparent); color: var(--r-primary); list-style: none; user-select: none; } .rf-advanced__toggle::-webkit-details-marker { display: none; } .rf-advanced .rf-form__row { padding: 14px; background: #fff; } /* ---- Výsledky header ---- */ .rf-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; min-height: 24px; } .rf-count { font-size: 0.9em; color: var(--r-text); opacity: 0.75; font-weight: 500; } .rf-loading { font-size: 0.9em; color: var(--r-primary); } /* ---- Grid výsledků ---- */ .rf-grid { display: grid; gap: 18px; } .rf-grid--cols-1 { grid-template-columns: 1fr; } .rf-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .rf-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .rf-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .rf-grid--cols-3, .rf-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rf-grid { grid-template-columns: 1fr; } .rf-form__field { min-width: 100%; } } /* ---- Karta výsledku ---- */ .rf-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; font-family: var(--r-body-font); } .rf-card:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .rf-card__link { display: block; text-decoration: none; color: inherit; } .rf-card__photo { position: relative; height: 200px; background: rgba(0, 0, 0, 0.04); overflow: hidden; } .rf-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .rf-card:hover .rf-card__photo img { transform: scale(1.04); } .rf-card__no-photo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3em; color: rgba(0, 0, 0, 0.2); } .rf-card__badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; } .rf-badge { display: inline-block; padding: 3px 8px; border-radius: 0; font-size: 0.72em; font-weight: 700; font-family: var(--r-accent-font); text-transform: uppercase; letter-spacing: 0.04em; } .rf-badge--reserved { background: #fff3cd; color: #856404; } .rf-badge--exclusive { display: none; } .rf-badge--type { background: var(--r-primary); color: #fff; } .rf-card__body { padding: 14px 16px; } .rf-card__title { font-size: 0.95em; font-weight: var(--r-heading-weight); font-family: var(--r-heading-font); color: var(--r-secondary); margin: 0 0 6px; line-height: 1.3; } .rf-card__price { font-size: 1.05em; font-weight: 700; color: var(--r-primary); margin-bottom: 6px; } /* Parametry + lokalita na jednom řádku, stejná velikost jako cena, tmavý text */ .rf-card__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.05em; color: var(--r-text); } .rf-card__meta, .rf-card__location { font-size: inherit; color: var(--r-text); } /* ---- Stránkování ---- */ .rf-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 24px; } .rf-pager__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0; text-decoration: none; color: var(--r-text); font-size: 0.9em; transition: background 0.2s, color 0.2s; } .rf-pager__btn:hover, .rf-pager__btn--active { background: var(--r-primary); border-color: var(--r-primary); color: #fff; } /* ---- Prázdný výsledek ---- */ .rf-no-results { text-align: center; padding: 40px 20px; color: var(--r-text); opacity: 0.7; font-size: 1em; }