/* ========================================================================= DS-SYSTEM — sitewide design-manual override Loaded AFTER main.css (dep: main-css, priority 20). Restyles the legacy component classes (.btn, .property, filters, forms, containers) to the new v3 design manual using the shared tokens. Values mirror the v3 homepage (front-page.php) design source. !important is used on key visual props to win over deeply-nested main.css selectors (e.g. .nehnutelnosti-archive … .property …). The ds / hv3 / fv3 prototype classes carry their own inline CSS and are intentionally NOT affected here. ========================================================================= */ /* Gambetta (accent serif) is loaded via in header-v3.php . */ /* ===== TOKENS ===== */ :root { --p-50:#EAF3FD; --p-100:#D7E8FC; --p-200:#AECFF6; --p-300:#7BAFE8; --p-400:#3D90F0; --p-500:#1079EC; --p-600:#0C61C0; --p-700:#0A4E9B; --p:#1079EC; --ink:#0e0e0e; --ink-2:#1B1B1B; --body:#2b3340; --gray:#828282; --label:#A3A3A3; --bg:#F6FAFE; --surface:#fff; --line:#E6EEF9; --land-1:#cfe3fb; --land-2:#eaf3fd; --land-3:#dcecd2; --land-4:#bcd79f; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --pill:999px; --sh-sm:0 2px 10px rgba(14,30,60,.06); --sh-md:0 12px 32px rgba(14,30,60,.10); --sh-lg:0 24px 60px rgba(14,30,60,.14); /* exkluzívne — polnočná modrá (naviazaná na --p-500) */ --x-bg:#0C1B2E; --x-top:#123054; --x-bot:#0A1726; --x-surface:#142C4A; --x-hover:#183860; --x-line:#1F3B5E; --x-grad:radial-gradient(1100px 460px at 10% -25%, rgba(16,121,236,.38), transparent 60%), linear-gradient(180deg, var(--x-top) 0%, var(--x-bot) 100%); } /* ===== LAYOUT ===== */ .container { max-width:1312px; } /* ========================================================================= BUTTONS — pill + gradient primary, matches .ds-btn ========================================================================= */ .btn:not(.wp-block-button) { /* no display override — must not unhide .district-map-toggle (display:none) */ border-radius:var(--pill) !important; padding:13px 26px !important; font-weight:600 !important; letter-spacing:.02em; line-height:1.2; border:none; transition:background-position .3s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease; } /* primary (blue) + default */ .btn:not(.wp-block-button).blue, .btn:not(.wp-block-button):not(.white):not(.black) { background-image:linear-gradient(135deg,var(--p-400),var(--p-600) 55%,var(--p-700)) !important; background-color:var(--p-500) !important; background-size:200% 100%; background-position:0 0; color:#F3F7FF !important; } .btn:not(.wp-block-button).blue:hover, .btn:not(.wp-block-button):not(.white):not(.black):hover { background-position:100% 0 !important; color:#F3F7FF !important; } /* ink (black) */ .btn:not(.wp-block-button).black { background-image:linear-gradient(120deg,#3a3a3a,#1b1b1b 50%,#000) !important; background-color:var(--ink) !important; color:#fff !important; } .btn:not(.wp-block-button).black:hover { filter:brightness(1.15); background-image:linear-gradient(120deg,#3a3a3a,#1b1b1b 50%,#000) !important; color:#fff !important; } /* white → outline */ .btn:not(.wp-block-button).white { background:#fff !important; color:var(--p-600) !important; box-shadow:inset 0 0 0 1.5px var(--p-200) !important; } .btn:not(.wp-block-button).white:hover { background:var(--p-50) !important; color:var(--p-700) !important; box-shadow:inset 0 0 0 1.5px var(--p-500) !important; } /* load-more span-button keeps its layout, gains the pill look via rules above */ /* ========================================================================= PROPERTY CARD — matches .ds-card-b ========================================================================= */ .property { border-radius:var(--r-lg) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-sm) !important; background:var(--surface) !important; transition:box-shadow .22s ease, border-color .22s ease !important; } .property:hover { border-color:var(--p-200) !important; box-shadow:var(--sh-md) !important; } .property .image-wrap { border-radius:var(--r-md) !important; } .property .image-wrap img, .property .image-wrap .image-fallback { border-radius:var(--r-md) !important; } /* tame the aggressive zoom */ .property:hover .image-wrap img { transform:scale(1.05) !important; } /* badges over the photo (1/1, KOMASÁCIA) → translucent pill */ .property .checkbox-image-wrapper .image-tag { background:rgba(255,255,255,.9) !important; backdrop-filter:blur(6px); color:var(--p-700) !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.03em; padding:5px 11px !important; border-radius:var(--pill) !important; box-shadow:var(--sh-sm); } .property .image-tags .image-tag { background:var(--p-500) !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; padding:5px 11px !important; border-radius:var(--pill) !important; } /* body */ .property .property-data .price { color:var(--ink) !important; font-weight:700 !important; letter-spacing:-0.01em; } .property .property-data .title { color:var(--ink-2) !important; font-weight:600 !important; } .property .property-data .property-tags { border-top:1px solid var(--line) !important; } .property .property-data .property-tags .tag { background:var(--p-50) !important; color:var(--p-700) !important; font-size:13px !important; font-weight:600; padding:5px 11px !important; border-radius:var(--pill) !important; } /* keep sale price accent readable */ .property .property-data .price .sale-price { color:#cb1717 !important; } .property .property-data .price .regular-price { color:var(--gray) !important; } /* ========================================================================= FILTER PANEL + CONTROLS — matches .ds-input / panel ========================================================================= */ .main-filter, .panel-shadow { box-shadow:var(--sh-sm) !important; } .main-filter { background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; position:relative; /* positioning context for select2 dropdownParent */ } .main-filter input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.select2-search__field), .main-filter select { background:var(--bg) !important; border:1.5px solid var(--line) !important; border-radius:var(--r-sm) !important; color:var(--ink) !important; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } .main-filter input:not(.select2-search__field)::placeholder { color:var(--label) !important; } .main-filter input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.select2-search__field):focus, .main-filter select:focus, .main-filter input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.select2-search__field):focus-visible, .main-filter select:focus-within { outline:none !important; border-color:var(--p-500) !important; background:#fff !important; box-shadow:0 0 0 3px var(--p-50) !important; } /* submit → primary pill */ .main-filter input[type="submit"] { background-image:linear-gradient(135deg,var(--p-400),var(--p-600) 55%,var(--p-700)) !important; background-color:var(--p-500) !important; color:#F3F7FF !important; border:none !important; border-radius:var(--pill) !important; font-weight:600 !important; padding-block:14px !important; cursor:pointer; } .main-filter input[type="submit"]:hover { filter:brightness(1.06); } .main-filter .reset { color:var(--p-600) !important; font-weight:600; } /* ===== select2 (type / lokalita) — box matches inputs, dropdown per design manual ===== */ .main-filter .select2-container--default .select2-selection--single, .main-filter .select2-container--default .select2-selection--multiple { background:var(--bg) !important; border:1.5px solid var(--line) !important; border-radius:var(--r-sm) !important; min-height:46px; display:flex; align-items:center; } .main-filter .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:normal; color:var(--ink) !important; font-weight:500; padding-left:14px; } .main-filter .select2-container--default .select2-selection__placeholder { color:var(--label) !important; } .main-filter .select2-container--default .select2-selection--single .select2-selection__arrow { height:44px; } .select2-container--default .select2-selection__clear { color:var(--gray); font-weight:700; margin-right:6px; } .select2-container--default .select2-selection__clear:hover { color:#cb1717; } .main-filter .select2-container--default.select2-container--focus .select2-selection--single, .main-filter .select2-container--default.select2-container--focus .select2-selection--multiple, .main-filter .select2-container--default.select2-container--open .select2-selection--single { border-color:var(--p-500) !important; box-shadow:0 0 0 3px var(--p-50) !important; } /* multiple render (type / lokalita): chips + search field match the design, so the box reads like the other inputs (bg var(--bg), no gray default chips) */ .main-filter .select2-container--default .select2-selection--multiple { padding:5px 8px !important; } .main-filter .select2-container--default .select2-selection--multiple .select2-selection__rendered { display:flex !important; flex-wrap:wrap; align-items:center; gap:6px; padding:0 !important; margin:0; width:100%; } .main-filter .select2-container--default .select2-selection--multiple .select2-selection__choice { display:inline-flex; align-items:center; gap:6px; background:var(--p-500) !important; border:none !important; border-radius:var(--pill) !important; color:#fff !important; font-size:13px !important; line-height:1.2; margin:0 !important; padding:4px 11px !important; } .main-filter .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color:#fff !important; font-size:14px; line-height:1; margin-right:0 !important; order:2; opacity:.85; } .main-filter .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { opacity:1; background:transparent !important; color:#fff !important; } .main-filter .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { font-size:14px !important; line-height:1.3; margin:0 !important; color:var(--ink) !important; background:transparent !important; } .main-filter .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder { color:var(--label) !important; } /* pull the results closer to the field (main.css sets margin-top:15px) */ .main-filter .select2-dropdown.select2-dropdown--below { margin-top:-6px; } /* dropdown panel */ .select2-container--default .select2-dropdown { border:1.5px solid var(--p-200) !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh-md); overflow:hidden; } .select2-container--default .select2-results > .select2-results__options { padding:6px; } .select2-container--default .select2-results__option { padding:9px 12px; border-radius:8px; font-size:14px; color:var(--ink-2); line-height:1.3; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--p-50) !important; color:var(--p-700) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background:var(--p-50); color:var(--p-700); font-weight:600; } /* optgroup header (e.g. "Bratislava - kraj") */ .select2-container--default .select2-results__group { padding:10px 12px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--label); } /* search field inside the dropdown */ .main-filter .select2-container--default .select2-search--dropdown .select2-search__field, .select2-container--default .select2-search--dropdown .select2-search__field { border:none !important; outline:none !important; box-shadow:none !important; background:var(--bg) !important; border-radius:var(--r-sm) !important; padding:8px 10px !important; } /* sort select → custom native JS/CSS dropdown (.ds-select), native