/* Theme Name: Karpatská brána Author: Whosred.sk Author URI: https://whosred.sk/ Description: Vlastná responzívna WordPress téma pre developerský projekt Karpatská brána. Version: 0.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: karpatska-brana */ /* ========================================================================== CSS Structure -------------------------------------------------------------------------- style.css holds base tokens, utilities, global components, page sections, plugin overrides and current template styles. assets/css/responsive.css holds every responsive rule and is loaded after this file, so responsive overrides stay last in the cascade. The "Legacy / Cleanup Audit Zone" section below stays active for now, but marks the first area to review before deleting older CSS. ========================================================================== */ /* ========================================================================== 1. Fonts ========================================================================== */ /* --- Channe Regular --- */ @font-face { font-family: 'Channe'; src: url('/wp-content/themes/karpatska-brana/assets/fonts/Channe.otf') format('opentype'), url('/wp-content/themes/karpatska-brana/assets/fonts/Channe.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================================== GENERAL ========================================================================== */ :root { --kbrana-green: #13483D; --kbrana-accent: #DDAC8B; --kbrana-cream: #F4E4D4; --kbrana-cream-light: #FFF5EB; --kbrana-cream-card: #F3DFCC; --kbrana-grey: #E9E9E9; --kbrana-offwhite: rgba(245, 245, 245, 0.96); --kbrana-black: #272727; --kbrana-true-black: #000000; --kbrana-white: #FFFFFF; scroll-behavior: smooth; --fluid-1: clamp(1px, calc(1 / 1728 * 100vw), 2px); --fluid-2: clamp(1px, calc(2 / 1728 * 100vw), 3px); --fluid-4: clamp(3px, calc(4 / 1728 * 100vw), 7px); --fluid-6: clamp(4px, calc(6 / 1728 * 100vw), 10px); --fluid-8: clamp(6px, calc(8 / 1728 * 100vw), 14px); --fluid-10: clamp(7px, calc(10 / 1728 * 100vw), 17px); --fluid-12: clamp(11px, calc(12 / 1728 * 100vw), 17px); --fluid-14: clamp(12px, calc(14 / 1728 * 100vw), 19px); --fluid-16: clamp(14px, calc(16 / 1728 * 100vw), 22px); --fluid-18: clamp(15px, calc(18 / 1728 * 100vw), 25px); --fluid-19: clamp(15px, calc(19 / 1728 * 100vw), 26px); --fluid-20: clamp(16px, calc(20 / 1728 * 100vw), 28px); --fluid-24: clamp(20px, calc(24 / 1728 * 100vw), 33px); --fluid-30: clamp(24px, calc(30 / 1728 * 100vw), 42px); --fluid-32: clamp(25px, calc(32 / 1728 * 100vw), 44px); --fluid-34: clamp(26px, calc(34 / 1728 * 100vw), 46px); --fluid-36: clamp(27px, calc(36 / 1728 * 100vw), 50px); --fluid-40: clamp(30px, calc(40 / 1728 * 100vw), 56px); --fluid-44: clamp(33px, calc(44 / 1728 * 100vw), 61px); --fluid-48: clamp(36px, calc(48 / 1728 * 100vw), 67px); --fluid-56: clamp(42px, calc(56 / 1728 * 100vw), 78px); --fluid-60: clamp(45px, calc(60 / 1728 * 100vw), 83px); --fluid-64: clamp(48px, calc(64 / 1728 * 100vw), 89px); --fluid-72: clamp(50px, calc(72 / 1728 * 100vw), 100px); --fluid-80: clamp(60px, calc(80 / 1728 * 100vw), 111px); --fluid-84: clamp(63px, calc(84 / 1728 * 100vw), 117px); --fluid-88: clamp(66px, calc(88 / 1728 * 100vw), 122px); --fluid-96: clamp(70px, calc(96 / 1728 * 100vw), 133px); --fluid-104: clamp(78px, calc(104 / 1728 * 100vw), 144px); --fluid-112: clamp(84px, calc(112 / 1728 * 100vw), 156px); --fluid-120: clamp(90px, calc(120 / 1728 * 100vw), 167px); --fluid-160: clamp(120px, calc(160 / 1728 * 100vw), 220px); --fluid-176: clamp(132px, calc(176 / 1728 * 100vw), 244px); --fluid-180: clamp(160px, calc(180 / 1728 * 100vw), 260px); --fluid-240: clamp(180px, calc(240 / 1728 * 100vw), 333px); --fluid-280: clamp(200px, calc(280 / 1728 * 100vw), 380px); --kb-design-width: 1728; --container: calc(100vw - (var(--fluid-40) * 2)); --kb-container: var(--container); --kb-gutter: var(--fluid-32); --radius: 16px; --gap: 24px; --col: minmax(220px, 1fr); --kb-serif: "Channe", Georgia, "Times New Roman", serif; --kb-sans: "Darker Grotesque", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .kb-container { width: var(--container); margin-inline: auto; } /* Spacing utilities */ .pad0 { padding: 0; } .padall12 { padding: var(--fluid-12); } .padall20 { padding: var(--fluid-20); } .padall24 { padding: var(--fluid-24); } .padall40 { padding: var(--fluid-40); } .padall64 { padding: var(--fluid-64); } .padall96 { padding: var(--fluid-96); } .pad16 { padding: var(--fluid-16); } .pad36 { padding: var(--fluid-36); } .pad48 { padding: var(--fluid-48); } .padtop0 { padding-top: 0; } .padtop4 { padding-top: var(--fluid-4); } .padtop8 { padding-top: var(--fluid-8); } .padtop12 { padding-top: var(--fluid-12); } .padtop16 { padding-top: var(--fluid-16); } .padtop20 { padding-top: var(--fluid-20); } .padtop24 { padding-top: var(--fluid-24); } .padtop32 { padding-top: var(--fluid-32); } .padtop36 { padding-top: var(--fluid-36); } .padtop40 { padding-top: var(--fluid-40); } .padtop48 { padding-top: var(--fluid-48); } .padtop56 { padding-top: var(--fluid-56); } .padtop64 { padding-top: var(--fluid-64); } .padtop72 { padding-top: var(--fluid-72); } .padtop80 { padding-top: var(--fluid-80); } .padtop88 { padding-top: var(--fluid-88); } .padtop96 { padding-top: var(--fluid-96); } .padtop104 { padding-top: var(--fluid-104); } .padtop112 { padding-top: var(--fluid-112); } .padtop120 { padding-top: var(--fluid-120); } .padtop160 { padding-top: var(--fluid-160); } .padbot0 { padding-bottom: 0; } .padbot4 { padding-bottom: var(--fluid-4); } .padbot8 { padding-bottom: var(--fluid-8); } .padbot12 { padding-bottom: var(--fluid-12); } .padbot16 { padding-bottom: var(--fluid-16); } .padbot20 { padding-bottom: var(--fluid-20); } .padbot24 { padding-bottom: var(--fluid-24); } .padbot32 { padding-bottom: var(--fluid-32); } .padbot36 { padding-bottom: var(--fluid-36); } .padbot40 { padding-bottom: var(--fluid-40); } .padbot48 { padding-bottom: var(--fluid-48); } .padbot56 { padding-bottom: var(--fluid-56); } .padbot64 { padding-bottom: var(--fluid-64); } .padbot72 { padding-bottom: var(--fluid-72); } .padbot80 { padding-bottom: var(--fluid-80); } .padbot88 { padding-bottom: var(--fluid-88); } .padbot96 { padding-bottom: var(--fluid-96); } .padbot104 { padding-bottom: var(--fluid-104); } .padbot112 { padding-bottom: var(--fluid-112); } .padbot120 { padding-bottom: var(--fluid-120); } .padbot160 { padding-bottom: var(--fluid-160); } .martop0 { margin-top: 0; } .martop4 { margin-top: var(--fluid-4); } .martop8 { margin-top: var(--fluid-8); } .martop12 { margin-top: var(--fluid-12); } .martop16 { margin-top: var(--fluid-16); } .martop20 { margin-top: var(--fluid-20); } .martop24 { margin-top: var(--fluid-24); } .martop32 { margin-top: var(--fluid-32); } .martop40 { margin-top: var(--fluid-40); } .martop48 { margin-top: var(--fluid-48); } .martop56 { margin-top: var(--fluid-56); } .martop64 { margin-top: var(--fluid-64); } .martop72 { margin-top: var(--fluid-72); } .martop80 { margin-top: var(--fluid-80); } .martop88 { margin-top: var(--fluid-88); } .martop96 { margin-top: var(--fluid-96); } .martop104 { margin-top: var(--fluid-104); } .martop112 { margin-top: var(--fluid-112); } .martop120 { margin-top: var(--fluid-120); } .martop200 { margin-top: var(--fluid-120); } .martop-auto { margin-top: auto; } .marbot0 { margin-bottom: 0; } .marbot4 { margin-bottom: var(--fluid-4); } .marbot8 { margin-bottom: var(--fluid-8); } .marbot12 { margin-bottom: var(--fluid-12); } .marbot16 { margin-bottom: var(--fluid-16); } .marbot20 { margin-bottom: var(--fluid-20); } .marbot24 { margin-bottom: var(--fluid-24); } .marbot32 { margin-bottom: var(--fluid-32); } .marbot40 { margin-bottom: var(--fluid-40); } .marbot48 { margin-bottom: var(--fluid-48); } .marbot56 { margin-bottom: var(--fluid-56); } .marbot64 { margin-bottom: var(--fluid-64); } .marbot72 { margin-bottom: var(--fluid-72); } .marbot80 { margin-bottom: var(--fluid-80); } .marbot88 { margin-bottom: var(--fluid-88); } .marbot96 { margin-bottom: var(--fluid-96); } .marbot104 { margin-bottom: var(--fluid-104); } .marbot112 { margin-bottom: var(--fluid-112); } .marbot120 { margin-bottom: var(--fluid-120); } .padleft12 { padding-left: var(--fluid-12); } .padleft16 { padding-left: var(--fluid-16); } .padleft24 { padding-left: var(--fluid-24); } .padleft32 { padding-left: var(--fluid-32); } .padleft36 { padding-left: var(--fluid-36); } .padleft65 { padding-left: var(--fluid-64); } .padleft80 { padding-left: var(--fluid-80); } .padleft120 { padding-left: var(--fluid-120); } .padright12 { padding-right: var(--fluid-12); } .padright32 { padding-right: var(--fluid-32); } .padright36 { padding-right: var(--fluid-36); } .padright48 { padding-right: var(--fluid-48); } .padright96 { padding-right: var(--fluid-96); } .padright120 { padding-right: var(--fluid-120); } .padleft105 { padding-left: var(--fluid-104); } .padright0, .kb-container .row.padright0 { padding-right: 0; } .padleft0, .kb-container .row.padleft0 { padding-left: 0; } .padx0 { padding-left: 0; padding-right: 0; } .padx12 { padding-left: var(--fluid-12); padding-right: var(--fluid-12); } .padx20 { padding-left: var(--fluid-20); padding-right: var(--fluid-20); } .padx24 { padding-left: var(--fluid-24); padding-right: var(--fluid-24); } .padx35 { padding-left: var(--fluid-36); padding-right: var(--fluid-36); } .padx56 { padding-left: var(--fluid-56); padding-right: var(--fluid-56); } .padx80 { padding-left: var(--fluid-80); padding-right: var(--fluid-80); } .padx104 { padding-left: var(--fluid-104); padding-right: var(--fluid-104); } .padx112 { padding-left: var(--fluid-112); padding-right: var(--fluid-112); } .g8, .gy8 { --bs-gutter-y: var(--fluid-8); } .g8, .gx8 { --bs-gutter-x: var(--fluid-8); } .g12, .gy12 { --bs-gutter-y: var(--fluid-12); } .g12, .gx12 { --bs-gutter-x: var(--fluid-12); } .g16, .gx16 { --bs-gutter-x: var(--fluid-16); } .g32, .gy32 { --bs-gutter-y: var(--fluid-32); } .g32, .gx32 { --bs-gutter-x: var(--fluid-32); } .g48, .gx48 { --bs-gutter-x: var(--fluid-48); } .g64, .gx64 { --bs-gutter-x: var(--fluid-64); } .br5 { border-radius: 5px; } .br10 { border-radius: var(--fluid-10); } .br20 { border-radius: var(--fluid-20); } .br64 { border-radius: var(--fluid-64); } .font-serif { font-family: var(--kb-serif); word-spacing: -0.15em; } .font-sans { font-family: var(--kb-sans); } .text-12 { font-size: var(--fluid-12); line-height: 1; } .text-xxs { font-size: var(--fluid-14); line-height: 1; font-weight: 500; } .text-xs { font-size: var(--fluid-19); line-height: 1; font-weight: 500; } .text-sm { font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .text-md { font-size: var(--fluid-24); line-height: 1; font-weight: 500; } .text-lg { font-size: var(--fluid-30); line-height: 1; } .text-perex { font-size: var(--fluid-60); line-height: 1; font-weight: 500; } .text-xl { font-size: var(--fluid-84); line-height: 1; } .text-hero { font-size: var(--fluid-176); line-height: .86; } .kb-btn, a.kb-btn { min-width: 270px; display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--fluid-12) * 0.85) var(--fluid-64) calc(var(--fluid-12) * 1.15); border: 2px solid transparent; border-radius: 999px; font-family: var(--kb-sans); font-size: var(--fluid-20); line-height: 1; font-weight: 400; text-decoration: none; letter-spacing: 0; cursor: pointer; transition: all .3s ease; text-align: center; } .kb-btn-green { background: var(--kbrana-green); border-color: var(--kbrana-green); color: var(--kbrana-white); } .kb-btn-green:hover { background: var(--kbrana-accent); border-color: var(--kbrana-accent); color: var(--kbrana-green); } .kb-btn-white { background: var(--kbrana-white); border-color: var(--kbrana-white); color: var(--kbrana-black); } .kb-btn-white:hover { background: var(--kbrana-accent); border-color: var(--kbrana-accent); color: var(--kbrana-green); } .kb-btn-accent { background: var(--kbrana-accent); border-color: var(--kbrana-accent); color: var(--kbrana-black); } .kb-btn-accent:hover { background: var(--kbrana-green); border-color: var(--kbrana-green); color: var(--kbrana-white); } .kb-btn-hover-white:hover { background: var(--kbrana-white); border-color: var(--kbrana-white); color: var(--kbrana-green); } .kb-btn-surface { background: var(--kbrana-cream); border-color: var(--kbrana-cream); color: var(--kbrana-black); } .kb-btn-surface:hover { background: var(--kbrana-accent); border-color: var(--kbrana-accent); color: var(--kbrana-black); } .kb-btn-grey { background: var(--kbrana-grey); border-color: var(--kbrana-grey); color: var(--kbrana-black); } .kb-btn-grey:hover { background: var(--kbrana-accent); border-color: var(--kbrana-accent); color: var(--kbrana-black); } .kb-btn-border, a.kb-btn-border { background: transparent; border-color: var(--kbrana-black); color: var(--kbrana-black); } .kb-btn-border:hover, a.kb-btn-border:hover { background: var(--kbrana-green); border-color: var(--kbrana-green); color: var(--kbrana-white); } .kb-btn-disabled, .kb-btn-disabled:hover { background: var(--kbrana-cream-card); border-color: var(--kbrana-cream-card); color: var(--kbrana-black); cursor: default; } /* ========================================================================== 4. Layout, components, and other styles ========================================================================== */ html { font-size: clamp(16px,1.2vw,24px); /* 16px */ } body { font-family: "Darker Grotesque", sans-serif; font-weight: 400; color: var(--kbrana-black); font-size: clamp(16px,1.2vw,24px); /* 16px */ } h1, h2, h3, h4, h5, h6 { font-family: "Darker Grotesque", sans-serif; } p { font-family: "Darker Grotesque", sans-serif; } a { transition: all .3s ease; } sub, sup { font-size: .5em; } .headline2 { font-size: var(--fluid-120); line-height: 1; font-weight: 400; font-family: var(--kb-serif); word-spacing: -0.26em; } .headline3 { font-size: var(--fluid-72); line-height: 1; font-weight: 400; font-family: var(--kb-serif); word-spacing: -0.26em; } .headline4 { font-size: var(--fluid-56); line-height: 1; font-weight: 400; font-family: var(--kb-serif); word-spacing: -0.26em; } /* ========================================================================== 5. Forms ========================================================================== */ .hp-contact-form .forminator-ui.forminator-custom-form .forminator-row.forminator-row-last { margin-top: 0; margin-bottom: 0 !important; } /* Keep the submit spacing identical in the homepage and flat-detail forms. Forminator adds row spacing of its own, so make the consent row the anchor and apply one deliberate gap before the submit row. */ #kbrana-form.hp-contact-form .forminator-row:has(.forminator-field-consent) { margin-bottom: 0 !important; } #kbrana-form.hp-contact-form .forminator-row.forminator-row-last { margin-top: var(--fluid-24) !important; margin-bottom: 0 !important; } #kbrana-form.hp-contact-form .forminator-row.forminator-row-last .forminator-button-submit { margin-top: 0 !important; } #forminator-module-463 { margin: 0; } .forminator-loading *, #forminator-loading * { color: white !important; font-family: "Darker Grotesque",sans-serif; font-size: 16px; font-weight: 300; } .forminator-success { padding: 30px 0 0px 0 !important; } .forminator-success p { text-align: left; } .forminator-success h4 { font-size: 20px; text-align: left; color: white; font-weight: 300; border: 1px solid var(--kbrana-accent); padding: 10px; margin-left: -10px; } #captcha-1 { display: none; } .forminator-field-consent a { color: var(--kbrana-white) !important; text-decoration: none !important; transition: all .3s ease; } .forminator-field-consent a:hover { text-decoration: underline !important; } #kbrana-form .forminator-button-submit { background-color: var(--kbrana-green) !important; color: var(--kbrana-white) !important; text-align: center; text-decoration: none; bottom: 0; max-width: fit-content; margin-top: 0 !important; margin-bottom: 0 !important; padding: calc(var(--fluid-12) * 0.85) var(--fluid-64) calc(var(--fluid-12) * 1.15) !important; border: 2px solid var(--kbrana-green) !important; border-radius: 999px; font-family: var(--kb-sans) !important; font-size: var(--fluid-24) !important; line-height: 1 !important; font-weight: 500 !important; transition: all .3s ease !important; box-shadow: unset !important; } #kbrana-form .forminator-button-submit:hover, .kbrana-form .forminator-design--material .forminator-button-submit:focus { background-color: var(--kbrana-white) !important; border-color: var(--kbrana-white) !important; color: var(--kbrana-green) !important; } #kbrana-form .forminator-checkbox.forminator-consent .forminator-checkbox-box { border-width: 2px; border-radius: 0; background-color: var(--kbrana-white) !important; color: var(--kbrana-accent) !important; width: 14px; height: 14px; -webkit-box-flex: 0; -ms-flex: 0 0 14px; flex: 0 0 14px; } .forminator-design--material .forminator-consent input:checked + .forminator-checkbox-box { border-color: var(--kbrana-white) !important; } .forminator-design--material .forminator-response-message.forminator-success { text-align: center; box-shadow: unset !important; background: none; color: #fff !important; } .forminator-design--material .forminator-response-message p { font-size: 18px !important; color: #fff !important; } .after-form-submission { padding: 5px 25px; background-color: var(--kbrana-black); border: 3px solid var(--kbrana-black); color: #F2EEE2 !important; text-align: center; text-decoration: none; border-radius: 50px; font-size: 16px; font-weight: 300; line-height: 31px; letter-spacing: 0.25px; bottom: 0; transition: all 0.3s ease !important; max-width: fit-content; display: inline-block; margin-top: 45px; cursor: pointer; } .after-form-submission:hover { background-color: var(--kbrana-white) !important; color: var(--kbrana-black) !important; border: 3px solid var(--kbrana-black); } .forminator-loading, .forminator-loading p, .forminator-loading span, .forminator-loading h3, .forminator-loading h4, .forminator-loading h5 { background-color: transparent !important; border: unset !important; box-shadow: unset !important; font-family: "Darker Grotesque", sans-serif !important; font-size: var(--fluid-16) !important; font-weight: 500 !important; color: white !important; } .forminator-loading:before { color: #fff !important; top: 20px !important; } .text-field .forminator-input--wrap { background-color: var(--kbrana-cream-card); } .text-field label { margin-left: 16px !important; font-size: 1em !important; font-weight: 400 !important; font-family: "Darker Grotesque","sans-serif" !important; line-height: 1.5em !important; color: var(--kbrana-cream-card) !important; position: relative; z-index: 99; } .forminator-ui.forminator-custom-form[data-design=material] .forminator-input--wrap:after { display: none !important; } .forminator-ui.forminator-custom-form[data-design=material] .forminator-floating--input { -webkit-transform: translateY(calc(1.5em + 16px)) !important; transform: translateY(calc(1.5em + 16px)) !important; } .forminator-ui.forminator-custom-form[data-design=material] .forminator-is_active .forminator-floating--input, .forminator-ui.forminator-custom-form[data-design=material] .forminator-is_filled .forminator-floating--input { -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } .forminator-design--material .forminator-error-message { background: white; padding: 0 8px; width: fit-content; } .forminator-field .forminator-consent__label p { font-size: 0.75em !important; line-height: 1.2em !important; } .forminator-checkbox__label { font-size: 1em !important; margin-left: var(--fluid-12) !important; margin-top: var(--fluid-2) !important; } .forminator-checkbox-box:before { content: "" !important; background: var(--kbrana-green) !important; display: block !important; height: 10px !important; width: 10px !important; border-radius: 10px !important; } .forminator-checkbox__label p { color: var(--kbrana-white); font-size: 12px !important; font-weight: 400 !important; font-family: "Darker Grotesque","sans-serif" !important; } .forminator-field-consent { margin-bottom: 4px !important; } .mobile-navbar { display: none; } .navbar { width: 100%; } .navbar > .kb-container { justify-content: space-between; } .header-nav-col { justify-content: flex-end; gap: 0; margin-left: auto; } .relative { position: relative; } .hero-section { padding: 0; height: 100vh; display: flex; justify-content: space-between; align-items: end; position: relative; flex-direction: column; } .page-hero-section { height: 85vh; } iframe { aspect-ratio: 16/9; } .video-container { margin: 2rem; max-height: 300px; } img { display: block; max-width: 100%; } main { display: grid; place-items: center; min-height: 100vh; } .image-before { position: absolute; width: var(--position); background: #fff; } li.menu-item { transition: .3s ease-in; } a.read-more { transition: .2s ease-in; } a.read-more:hover { background-color: var(--kbrana-white); color: var(--kbrana-black) !important; border: 3px solid var(--kbrana-black); } a.socials { transition: .2s ease-in; } a.socials:hover { text-decoration: underline; } .bg-kbrana-offwhite { background: var(--kbrana-offwhite); } .bg-kbrana-dark { background: var(--kbrana-green) !important; } .bg-kbrana-white { background: var(--kbrana-white); } .bg-kbrana-accent { background: var(--kbrana-accent); } .bg-kbrana-cream { background: var(--kbrana-cream); } .bg-kbrana-grey { background: var(--kbrana-grey); } .bg-kbrana-cream-card { background: var(--kbrana-cream-card); } .text-kbrana-offwhite { color: var(--kbrana-offwhite) !important; } .text-kbrana-white { color: var(--kbrana-white) !important; } .text-kbrana-accent { color: var(--kbrana-accent) !important; } .text-kbrana-black { color: var(--kbrana-black) !important; } img.immocap_logo { padding-top: 10px; } .colgap50 { gap: 50px; } .colgap20 { gap: 20px; } .flex-hor-center { justify-content: center; } .colgap100 { gap: 100px; } .dark-color { color: var(--kbrana-black); } .footer-top { place-content: unset; } .place-content-unset { place-content: unset; } .third-mobile { margin-top: 100% !important; } .item.second-mobile { margin-top: 70% !important; } .item.last-mobile { margin-top: 110% !important; } .footer-brand img { width: auto; height: var(--fluid-96); } .footer-website { text-decoration: none; } .footer-contact-list { display: flex; flex-direction: column; gap: var(--fluid-24); } .footer-contact-link { display: inline-flex; align-items: center; gap: var(--fluid-32); width: fit-content; text-decoration: none; } .footer-contact-link:hover { color: var(--kbrana-accent) !important; } .footer-contact-icon { width: var(--fluid-64); height: var(--fluid-64); border: 1px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--fluid-64); } .footer-contact-icon img { display: none; } .footer-contact-icon::before { content: ""; display: block; width: var(--fluid-32); height: var(--fluid-32); background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .footer-contact-link[href^="tel:"] .footer-contact-icon::before { mask-image: url(assets/img/call.svg); -webkit-mask-image: url(assets/img/call.svg); } .footer-contact-link[href^="mailto:"] .footer-contact-icon::before { mask-image: url(assets/img/mail.svg); -webkit-mask-image: url(assets/img/mail.svg); } .footer-person { gap: var(--fluid-32); } .footer-person-photo { width: var(--fluid-88); height: var(--fluid-88); object-fit: cover; border-radius: 50%; } .footer-person-logo { width: auto; height: var(--fluid-16); } .footer-partners { gap: var(--fluid-40); } .footer-partner { gap: var(--fluid-16); } .footer-partner img { width: auto; height: var(--fluid-32); max-width: var(--fluid-112); } .footer-developer a, .footer-developer p, .footer-bottom-links a, .footer-bottom-links p { color: var(--kbrana-white); } .footer-developer a, .footer-bottom-links a { text-decoration: none; } .footer-divider { width: 100%; height: 1px; background: currentColor; } .footer-bottom-links .footer-list { align-items: center; } .hp-hero-section { justify-content: center; align-items: center; min-height: 760px; color: var(--kbrana-white); text-align: center; } .hp-hero-section::after { z-index: 1; } .hp-hero-media { inset: 0; z-index: 0; } video.hp-hero-media, video.hp-intro-image, video.hp-view-image { object-fit: cover; } .hp-hero-content { position: relative; z-index: 2; margin-top: var(--fluid-160); } .hp-hero-meta { gap: var(--fluid-20); color: var(--kbrana-white); } .hp-hero-meta span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: var(--fluid-24); margin-left: var(--fluid-20); vertical-align: middle; background: currentColor; } .hp-hero-title { font-family: var(--kb-serif); font-size: var(--fluid-160); line-height: 1; font-weight: 400; letter-spacing: 0; color: var(--kbrana-white); } .hp-hero-actions { gap: var(--fluid-24); } .hp-hero-actions .kb-btn { min-width: 270px; } .hp-hero-note { color: var(--kbrana-white); } .hp-intro-image, .hp-view-image { width: 100%; display: block; object-fit: cover; } .hp-video { position: relative; } .hp-video-sound-toggle { position: absolute; left: var(--fluid-24); top: var(--fluid-24); z-index: 1; display: grid; width: var(--fluid-40); height: var(--fluid-40); padding: 0; background: transparent; border: 0; } .hp-video-sound-icon { grid-area: 1 / 1; } .hp-video-sound-icon img { display: block; width: 100%; height: 100%; } .hp-video--muted .hp-video-sound-icon--on, .hp-video:not(.hp-video--muted) .hp-video-sound-icon--muted { opacity: 0; } .hp-video-sound-toggle:focus-visible { outline: 2px solid var(--kbrana-white); outline-offset: 4px; } .hp-view-image-holder { width: 100%; } .hp-view-image { aspect-ratio: 16 / 10; min-height: 540px; max-height: 80vh; } .hp-view-cta { position: absolute; left: var(--fluid-24); bottom: var(--fluid-24); gap: var(--fluid-40); padding: var(--fluid-24) var(--fluid-40); height: auto; } .hp-view-cta .kb-btn { white-space: nowrap; } .hp-benefits { row-gap: var(--fluid-120); } .hp-benefit { gap: var(--fluid-48); } .hp-benefit-icon { width: var(--fluid-120); height: var(--fluid-120); object-fit: contain; flex: 0 0 var(--fluid-120); } .hp-benefit p { max-width: 12em; } .hp-contact-section { overflow: hidden; } .hp-contact-broker { gap: var(--fluid-24); } .hp-contact-broker-photo { width: var(--fluid-88); height: var(--fluid-88); border-radius: 50%; object-fit: cover; flex: 0 0 var(--fluid-88); } .hp-contact-broker-logo { width: auto; height: var(--fluid-16); } .hp-contact-links { display: grid; gap: var(--fluid-12); } .hp-contact-link { display: inline-flex; align-items: center; gap: var(--fluid-16); width: fit-content; color: var(--kbrana-black); text-decoration: none; } .hp-contact-link:hover { color: var(--kbrana-white); } .hp-contact-icon { width: var(--fluid-32); height: var(--fluid-32); border: 1px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--fluid-32); } .hp-contact-icon img, .flat-contact-icon img { display: none; } .hp-contact-icon::before, .flat-contact-icon::before { content: ""; display: block; width: var(--fluid-16); height: var(--fluid-16); background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .hp-contact-link[href^="tel:"] .hp-contact-icon::before, .flat-contact-link[href^="tel:"] .flat-contact-icon::before { mask-image: url(assets/img/call.svg); -webkit-mask-image: url(assets/img/call.svg); } .hp-contact-link[href^="mailto:"] .hp-contact-icon::before, .flat-contact-link[href^="mailto:"] .flat-contact-icon::before { mask-image: url(assets/img/mail.svg); -webkit-mask-image: url(assets/img/mail.svg); } .hp-contact-form .forminator-ui { margin: 0 !important; } .hp-contact-form .forminator-row { margin-bottom: var(--fluid-24) !important; } .hp-contact-form .forminator-label, .hp-contact-form .forminator-design--material .forminator-label:not([class*="forminator-floating-"]) { color: var(--kbrana-black) !important; font-family: var(--kb-sans) !important; font-size: var(--fluid-18) !important; line-height: 1 !important; font-weight: 500 !important; margin-bottom: var(--fluid-6) !important; } .hp-contact-form .forminator-input, .hp-contact-form .forminator-textarea { border: 1px solid transparent !important; border-radius: 4px !important; background: var(--kbrana-white) !important; color: var(--kbrana-black) !important; font-family: var(--kb-sans) !important; font-size: var(--fluid-20) !important; line-height: 1 !important; padding: var(--fluid-12) var(--fluid-8) !important; box-shadow: none !important; font-weight: 500 !important; outline: 0 !important; } .hp-contact-form .forminator-input:focus, .hp-contact-form .forminator-textarea:focus { border-color: var(--kbrana-green) !important; } .hp-contact-form .forminator-textarea { min-height: var(--fluid-80) !important; } .hp-contact-form .forminator-field-consent, .hp-contact-form .forminator-field-checkbox { padding-top: 0 !important; } .hp-contact-form .forminator-checkbox__label, .hp-contact-form .forminator-checkbox-label, .hp-contact-form .forminator-field-consent .forminator-label, .hp-contact-form .forminator-consent__label p { color: var(--kbrana-black) !important; font-size: var(--fluid-14) !important; line-height: 1.2 !important; font-family: var(--kb-sans) !important; font-weight: 500 !important; } .hp-contact-form .forminator-field-consent a, .hp-contact-form .forminator-consent__label a { color: var(--kbrana-black) !important; text-decoration: underline !important; } .hp-contact-form .forminator-checkbox.forminator-consent .forminator-checkbox-box, .hp-contact-form .forminator-design--material .forminator-consent .forminator-checkbox-box { width: var(--fluid-20) !important; height: var(--fluid-20) !important; flex: 0 0 var(--fluid-20) !important; border: 0 !important; border-radius: 4px !important; background: var(--kbrana-white) !important; } .hp-contact-form .forminator-button-submit { min-width: 270px !important; background: var(--kbrana-green) !important; border: 2px solid var(--kbrana-green) !important; border-radius: 999px !important; color: var(--kbrana-white) !important; font-family: var(--kb-sans) !important; font-size: var(--fluid-24) !important; line-height: 1 !important; font-weight: 700 !important; padding: var(--fluid-16) var(--fluid-48) !important; margin-top: var(--fluid-24) !important; margin-bottom: 0 !important; transition: all .3s ease !important; } .hp-contact-form .forminator-button-submit:hover, .hp-contact-form .forminator-button-submit:focus { background: var(--kbrana-accent) !important; border-color: var(--kbrana-green) !important; color: var(--kbrana-green) !important; } .hp-contact-form .forminator-error-message { display: inline-block !important; font-size: var(--fluid-12) !important; line-height: 1.5em !important; } .hp-contact-benefits { gap: var(--fluid-8) var(--fluid-12); } .hp-contact-benefit { gap: var(--fluid-8); } .hp-contact-benefit img { width: var(--fluid-12); height: auto; flex: 0 0 var(--fluid-12); } .hp-location-section { color: var(--kbrana-black); overflow: hidden; } .hp-location-map-holder { position: relative; width: 100%; } .hp-location-map { width: 100%; aspect-ratio: 1728 / 975; min-height: 620px; display: block; object-fit: cover; } .kbrana-google-map { background: #f5f4df; } .kbrana-map-project-marker, .kbrana-map-place-marker { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; pointer-events: none; white-space: nowrap; } .kbrana-map-project-marker { width: 0; height: 0; transform: none; } .kbrana-map-project-logo, .kbrana-map-project-name { position: absolute; bottom: calc((var(--fluid-32) / 2) + var(--fluid-16)); left: calc(var(--fluid-40) * -1); } .kbrana-map-project-logo { width: auto; height: var(--fluid-88); max-width: min(240px, 40vw); object-fit: contain; } .kbrana-map-project-name { color: var(--kbrana-green); font-family: Georgia, serif; font-size: clamp(28px, 2.2vw, 48px); font-weight: 400; line-height: .82; letter-spacing: -.04em; } .kbrana-map-project-dot { position: absolute; top: 50%; left: 50%; width: var(--fluid-32); height: var(--fluid-32); flex: 0 0 var(--fluid-32); border-radius: 50%; background: var(--kbrana-accent); transform: translate(-50%, -50%); } .kbrana-map-place-marker { --kbrana-map-place-icon-size: var(--fluid-64); width: 0; height: 0; transform: none; } .kbrana-map-place-icon { position: absolute; top: 50%; left: 50%; display: grid; width: var(--kbrana-map-place-icon-size); height: var(--kbrana-map-place-icon-size); place-items: center; border-radius: 50%; background: var(--kbrana-accent); transform: translate(-50%, -50%); } .kbrana-map-place-icon img { width: var(--fluid-32); height: var(--fluid-32); } .kbrana-map-place-title { position: absolute; top: 50%; left: calc((var(--kbrana-map-place-icon-size) / 2) + var(--fluid-8)); color: var(--kbrana-black); font-size: var(--fluid-20); line-height: 1; transform: translateY(-50%); } .hp-location-travel-bar { position: absolute; left: 50%; bottom: var(--fluid-40); z-index: 2; width: fit-content; max-width: calc(100% - (var(--fluid-40) * 2)); transform: translateX(-50%); gap: var(--fluid-40); padding: var(--fluid-8) var(--fluid-12); border-radius: 999px; background: var(--kbrana-white); color: var(--kbrana-green); } .hp-location-travel-modes { gap: var(--fluid-6); flex: 0 0 auto; background: var(--kbrana-cream-light); border-radius: 999px; } .hp-location-mode { width: var(--fluid-36); height: var(--fluid-36); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; appearance: none; cursor: pointer; transition: background .25s ease; } .hp-location-mode.is-active { background: var(--kbrana-green); } .hp-location-mode:not(.is-active) { background: transparent; } .hp-location-mode:focus-visible { outline: 2px solid var(--kbrana-green); outline-offset: 3px; } .hp-location-mask-icon { display: inline-block; width: var(--fluid-20); height: var(--fluid-20); background: var(--kbrana-black); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .hp-location-mask-icon-car { width: var(--fluid-18); height: var(--fluid-18); mask-image: url('assets/img/car.svg'); -webkit-mask-image: url('assets/img/car.svg'); } .hp-location-mask-icon-bike { width: var(--fluid-24); height: var(--fluid-18); mask-image: url('assets/img/bike.svg'); -webkit-mask-image: url('assets/img/bike.svg'); } .hp-location-mode.is-active .hp-location-mask-icon { background: var(--kbrana-white); } .hp-location-mask-icon-clock { width: var(--fluid-20); height: var(--fluid-20); flex: 0 0 var(--fluid-20); mask-image: url('assets/img/clock.svg'); -webkit-mask-image: url('assets/img/clock.svg'); } .hp-location-travel-items { gap: var(--fluid-24); padding-right: var(--fluid-40); } .hp-location-travel-item { display: inline-flex; align-items: baseline; gap: var(--fluid-8); font-size: var(--fluid-16); line-height: 1; font-weight: 500; white-space: nowrap; } .hp-location-travel-item strong { font-weight: 700; min-width: 3em; } .hp-location-card-image-holder { position: relative; overflow: hidden; } .hp-location-card.is-large .hp-location-card-image-holder { aspect-ratio: 816 / 485; } .hp-location-card.is-small .hp-location-card-image-holder { aspect-ratio: 538 / 485; } .hp-location-card-image { width: 100%; height: 100%; display: block; object-fit: cover; } .hp-location-card-badge { position: absolute; left: var(--fluid-20); top: var(--fluid-20); gap: var(--fluid-8); padding: var(--fluid-8); background: var(--kbrana-cream); color: var(--kbrana-black); font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .hp-location-card-badge span:not(.hp-location-mask-icon) { padding-bottom: 0.2em; } .hp-gallery-switch-row { position: relative; z-index: 20; display: flex; justify-content: center; } .hp-gallery-switch { position: relative; z-index: 21; width: fit-content; margin-inline: auto; padding: 0; border-radius: 999px; background: var(--kbrana-cream); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; } .hp-gallery-switch.is-dragging { cursor: grabbing; } .hp-gallery-switch-indicator { position: absolute; top: 0; left: 0; z-index: 0; width: var(--gallery-switch-width, 0); height: 100%; border-radius: 999px; background: var(--kbrana-accent); transform: translateX(var(--gallery-switch-x, var(--fluid-4))); transition: transform .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .hp-gallery-switch.is-dragging .hp-gallery-switch-indicator { transition: none; } .hp-gallery-switch-button { position: relative; z-index: 1; min-width: var(--fluid-120); padding: calc(var(--fluid-6) - 0.08em) var(--fluid-24) calc(var(--fluid-6) + 0.08em); border: 0; border-radius: 999px; background: transparent; color: var(--kbrana-black); text-align: center; font-size: var(--fluid-16); font-weight: 700; cursor: inherit; transition: color .25s ease; } .hp-gallery-switch-button.is-active { color: var(--kbrana-black); } .hp-gallery-switch-button:focus-visible { outline: 2px solid var(--kbrana-green); outline-offset: 3px; } .hp-gallery-content > .kb-container { position: relative; } .hp-gallery-panel { position: absolute; width: 100%; opacity: 0; visibility: hidden; transform: translateY(var(--fluid-24)); pointer-events: none; z-index: 1; margin-right: calc(-1 * var(--fluid-40)); transition: opacity .42s ease, transform .55s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .55s; } .hp-gallery-panel.is-active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; z-index: 2; transition-delay: 0s; } .hp-gallery-holder { position: relative; width: 100%; padding-left: var(--fluid-32); } .hp-gallery-image { width: 100%; aspect-ratio: 830 / 626; display: block; object-fit: cover; } .hp-gallery-carousel .owl-nav { position: absolute; top: calc(50% - var(--fluid-32)); left: calc(var(--fluid-32) * -1); right: calc(var(--fluid-40) * 1); z-index: 2; display: flex; justify-content: space-between; pointer-events: none; } .hp-gallery-carousel.owl-carousel .owl-nav button.owl-next, .hp-gallery-carousel.owl-carousel .owl-nav button.owl-prev { position: relative; width: var(--fluid-64); height: var(--fluid-64); display: inline-flex; align-items: center; justify-content: center; background: var(--kbrana-white); color: var(--kbrana-accent); font-size: 0; line-height: 1; border-radius: 50%; box-shadow: 0px 0px 14px 0px #DDAC8B80; pointer-events: all; } .hp-gallery-carousel.owl-carousel .owl-nav button.owl-next:hover, .hp-gallery-carousel.owl-carousel .owl-nav button.owl-prev:hover { background: var(--kbrana-accent); color: var(--kbrana-white); opacity: 1; } .hp-gallery-carousel.owl-carousel .owl-nav button span { display: none; } .hp-gallery-carousel.owl-carousel .owl-nav button::before { content: ""; position: relative; width: var(--fluid-24); height: var(--fluid-24); display: block; mask-image: url(assets/img/kb-arrrow.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; } .hp-gallery-carousel.owl-carousel .owl-nav button.owl-prev::before { transform: rotate(-90deg); } .hp-gallery-carousel.owl-carousel .owl-nav button.owl-next::before { transform: rotate(90deg); } .hp-gallery-carousel.owl-carousel .owl-dots { display: flex; justify-content: center; gap: var(--fluid-6); padding-top: var(--fluid-32); padding-right: var(--fluid-72); } .hp-gallery-carousel.owl-carousel button.owl-dot { width: var(--fluid-12); height: var(--fluid-12); margin: 0; border: 1px solid var(--kbrana-accent) !important; border-radius: 50% !important; background: transparent; } .hp-gallery-carousel.owl-carousel button.owl-dot.active { background: var(--kbrana-accent); } .hp-plan-phases { gap: var(--fluid-6); } .hp-plan-phase { min-width: var(--fluid-120); padding: calc(var(--fluid-4) - 0.1em) var(--fluid-16) calc(var(--fluid-4) + 0.1em); border: 2px solid var(--kbrana-cream); border-radius: 999px; background: var(--kbrana-white); color: var(--kbrana-black); text-align: center; font-size: var(--fluid-16); line-height: 1; font-weight: 500; } .hp-plan-phase.is-active { background: var(--kbrana-green); border-color: var(--kbrana-green); color: var(--kbrana-white); font-weight: 700; } .hp-plan-timeline { position: relative; width: min(1360px, 100%); height: auto; padding: calc(var(--fluid-160) + var(--fluid-8)) 0; margin: var(--fluid-80) auto 0; --plan-marker-size: var(--fluid-8); --plan-track-gap: var(--fluid-6); --plan-quarter-width: var(--fluid-80); --plan-track-columns: var(--plan-marker-size) repeat(4, var(--plan-quarter-width)) var(--plan-marker-size) repeat(4, var(--plan-quarter-width)) var(--plan-marker-size) repeat(4, var(--plan-quarter-width)) var(--plan-marker-size); } .hp-plan-line, .hp-plan-events { position: absolute; left: 5%; right: 5%; top: 50%; display: grid; grid-template-columns: var(--plan-track-columns); gap: var(--plan-track-gap); justify-content: center; } .hp-plan-line { transform: translateY(-50%); align-items: center; z-index: 1; } .hp-plan-events { height: 0; z-index: 2; pointer-events: none; } .hp-plan-quarter-segment { height: var(--fluid-4); width: var(--plan-quarter-width); background: var(--kbrana-accent); } .hp-plan-quarter-segment.is-active { background: var(--kbrana-green); } .hp-plan-year-marker { position: relative; display: flex; justify-content: center; align-items: center; width: var(--plan-marker-size); height: var(--plan-marker-size); } .hp-plan-year-dot { display: block; width: var(--plan-marker-size); height: var(--plan-marker-size); background: var(--kbrana-green); } .hp-plan-year-label { position: absolute; top: 50%; right: calc(100% + var(--fluid-12)); transform: translateY(-50%); color: var(--kbrana-black); white-space: nowrap; } .hp-plan-year-marker:last-of-type .hp-plan-year-label { right: auto; left: calc(100% + var(--fluid-12)); top: 50%; transform: translateY(-50%); } .hp-plan-milestone { position: relative; grid-column: var(--milestone-column) / span 1; justify-self: center; width: 0; height: 0; text-align: center; top: var(--fluid-10); } .hp-plan-milestone-pin { position: absolute; left: 0; width: 2px; height: var(--fluid-48); transform: translateX(-50%); background: var(--kbrana-green); z-index: 3; } .hp-plan-milestone.is-top { top: unset; bottom: var(--fluid-10); } .hp-plan-milestone.is-top .hp-plan-milestone-pin { bottom: 0; } .hp-plan-milestone.is-bottom .hp-plan-milestone-pin { top: 0; } .hp-plan-milestone-content { position: absolute; left: 0; width: max-content; max-width: 180px; transform: translateX(-50%); text-align: center; } .hp-plan-milestone.is-top .hp-plan-milestone-content { bottom: calc(var(--fluid-48) + var(--fluid-8)); } .hp-plan-milestone.is-bottom .hp-plan-milestone-content { top: calc(var(--fluid-48) + var(--fluid-8)); } .hp-plan-milestone.is-top .hp-plan-quarter { padding-bottom: var(--fluid-4); } .hp-plan-milestone.is-bottom .hp-plan-quarter { padding-top: var(--fluid-4); } .hp-plan-milestone.is-top .hp-plan-milestone-text { padding-top: 0; } .hp-plan-milestone-text { max-width: 180px; font-size: clamp(25px, calc(28 / 1728 * 100vw), 32px); padding-top: var(--fluid-4); } .hp-developer-image { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; } .hp-developer-logo { width: auto; height: var(--fluid-88); display: block; } .hp-developer-benefits { gap: var(--fluid-12); } .hp-developer-benefit { gap: var(--fluid-8); font-weight: 500; } .hp-developer-benefit img { width: var(--fluid-12); height: var(--fluid-8); flex: 0 0 var(--fluid-12); } .hp-developer-projects { gap: var(--fluid-48); } .hp-developer-project { min-width: var(--fluid-160); max-width: var(--fluid-240); text-align: center; margin: 0 auto; } .hp-developer-project img { width: auto; max-width: 100%; max-height: var(--fluid-48); object-fit: contain; } a.socials { font-family: "Darker Grotesque", sans-serif; font-size: 1em; font-weight: 400; text-align: left; color: white; line-height: 1.2em; margin-right: 24px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } p.socials { font-family: "Darker Grotesque", sans-serif; font-size: 1em; font-weight: 400; text-align: left; color: white; line-height: 1.2em; margin-right: 24px; display: inline-block; margin-bottom: 0; } /* ========================================================================== Legacy / Cleanup Audit Zone -------------------------------------------------------------------------- Styles below include older template blocks and third-party/plugin overrides. They were not all confirmed on the primary live-page crawl, so keep them active until the related template, popup, gallery/lightbox, cookie banner, form state or language variant is visually checked. ========================================================================== */ .border-radius-0 { border-radius: 0 !important; } .page-template-gdpr { background-color: var(--kbrana-cream-light); color: #000; } div#title-image { max-width: 375px; margin: auto; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); z-index: 1; } .overflow-visible { overflow: visible !important; } #mobile-menu { background-color: var(--kbrana-green); } /* General menu styling */ #main-menu { display: flex; justify-content: flex-end; align-items: center; padding: 0; font-family: "Darker Grotesque", sans-serif; min-height: 50px; } ul.menu a { font-family: "Darker Grotesque", sans-serif; } /* Menu items styling */ #main-menu ul { list-style-type: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--fluid-36); margin-right: 0; } #main-menu li { margin: 0; } #main-menu a { text-decoration: none; font-size: var(--fluid-20); font-weight: 400; line-height: 1.1; color: var(--kbrana-white); display: inline-block; transition: all .3s ease; } #main-menu a:hover { color: var(--kbrana-accent); background: transparent; } #main-menu .menu-item-header-cta { margin-left: 15px; } #main-menu .menu-item-header-cta > a { padding: var(--fluid-10) var(--fluid-48) var(--fluid-12) var(--fluid-48); line-height: 1; text-align: center; background: var(--kbrana-green) !important; border: 2px solid var(--kbrana-green) !important; color: var(--kbrana-white) !important; border-radius: 999px; } #main-menu .menu-item-header-cta > a:hover { background: var(--kbrana-accent) !important; color: var(--kbrana-green) !important; border-color: var(--kbrana-accent) !important; } #main-menu .menu-item-header-cta.current-menu-item > a { background: var(--kbrana-green) !important; border-color: var(--kbrana-green); color: var(--kbrana-white); } #main-menu .menu-item-header-cta.current-menu-item > a:hover { background: var(--kbrana-accent) !important; border-color: var(--kbrana-accent); color: var(--kbrana-green); } .hero-row { width: 100%; margin: unset !important; } /*------ MOBILE MENU BURGER - START ---------- */ .burger-menu .inner { width: 100%; height: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: center; } .burger-menu figure { align-self: center; max-height: 80px; cursor: pointer; } .burger-menu figure .inner { width: 39px; height: 11px; margin: 10px auto; position: relative; } .burger-menu figure .inner span { position: absolute; top: 0; right: 0; width: 39px; height: 2px; background-color: var(--kbrana-black); transform-origin: center; transition: transform .3s ease, width .2s ease, background-color .3s ease; } body:not(.scrolled):not(.header-dark-logo):not(.menu-open) .burger-menu figure .inner span { background-color: var(--kbrana-white); } body.menu-open .burger-menu figure .inner span { background-color: var(--kbrana-black); } .burger-menu figure .inner span:nth-child(1) { top: 0; } .burger-menu figure .inner span:nth-child(2) { top: 9px; width: 33px; } .burger-menu figure.foldin .inner span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .burger-menu figure.foldin .inner span:nth-child(2) { width: 39px; transform: translateY(-4.5px) rotate(-45deg); } .forminator-required { color: currentColor !important; } .burger-menu { z-index: 999999999; display: block; position: relative; height: 18px; width: 22px; border-radius: 0; background: transparent; } .burger-menu figure { align-self: center; max-height: 50px; cursor: pointer; margin: 0; } /*------ MOBILE MENU BURGER - END ---------- */ #mobile-menu { display: none; } h1.not-found-404 { font-size: clamp(48px, 7.5vw, 100px); font-weight: 300; line-height: 1.3em; color: var(--kbrana-black); text-align: center; } .error404 .navbar .immocap_logo { filter: unset; } h2.lost-page { font-size: clamp(40px, 3vw, 40px); line-height: 1.3em; color: var(--kbrana-black); text-align: center; } .not-found-btn { padding: 10px 30px; font-family: "Darker Grotesque", sans-serif; margin-top: 50px; } .not-found-wrap { padding: 50px 0; text-align: center; } .page-404-wrapper .top { display: flex; justify-content: center; align-items: center; } .page-404-wrapper .top { display: flex; justify-content: center; align-items: center; } .page-404-wrapper .top span { color: var(--kbrana-black); font-family: 'Darker Grotesque', sans-serif; font-size: clamp(150px, 30vw, 400px); font-weight: 400; line-height: 1; } .page-404-wrapper .top img { margin-left: -20px; margin-right: -20px; max-width: 500px; height: clamp(180px, 35vw, 500px); object-fit: contain; } #not-found-image { position: absolute; transform: translateY(-50%); top: 60%; left: 0; z-index: 1; } #not-found-image img { max-width: 60%; margin: auto; } .error404 { background: var(--kbrana-black); } p.not-found { font-size: 37px; font-weight: 400; line-height: 44.4px; text-align: center; color: var(--kbrana-white); } .not-found-section .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; } .page-404-p { background-color: white; } a.btn-not-found { font-size: 38px; font-weight: 400; line-height: 44px; text-align: center; color: var(--kbrana-white); border: 3px solid var(--kbrana-white); padding: 15px 40px; border-radius: 50px; } /* ---- cookie banner start ----*/ .cky-consent-container .cky-consent-bar, .cky-preference-center { padding: 36px 36px 24px !important; border-radius: 16px !important; box-shadow: 8px 5px 20px 0px #acabab4d !important; border: 0 !important; } .cky-notice .cky-title { margin-bottom: 12px !important; } .cky-notice-des { margin-bottom: 24px !important; } .cky-preference-header { border-bottom: 0 !important; } .cky-notice .cky-title, .cky-preference-header .cky-preference-title { font-size: 32px !important; line-height: 1.3em !important; font-weight: 400 !important; font-family: var(--kb-serif) !important; word-spacing: -0.26em; } .cky-notice-des { font-size: 20px; /* 12px */ line-height: 1.3em; } .cky-prefrence-btn-wrapper { border: 0 !important; } .cky-audit-table .cky-empty-cookies-text { font-size: 16px !important; font-weight: 500 !important; } .cky-audit-table { border: 0 !important; } .cky-consent-bar .cky-notice-content-wrapper, .cky-preference-header, .cky-preference-body-wrapper, .cky-prefrence-btn-wrapper, .cky-preference-content-wrapper { padding: 0 !important; } .cky-preference-content-wrapper { margin-top: 24px; margin-bottom: 24px; } .cky-consent-container { position: fixed; width: 600px !important; border-radius: 30px; } .cky-consent-bar .cky-banner-btn-close { position: absolute; right: 20px !important; top: 20px !important; } button.cky-banner-btn-close { padding: 6px !important; background-color: unset !important; border-radius: 5px; } .cky-consent-bar .cky-banner-btn-close img, .cky-preference-header .cky-btn-close img { height: 12px !important; width: 12px !important; } button.cky-btn { transition: .2s ease-in; } button.cky-btn:hover { background-color: var(--kbrana-accent) !important; opacity: 1; } .page .cky-notice-des *, .single .cky-notice-des *, .page .cky-preference-content-wrapper *, .single .cky-preference-content-wrapper *, .page .cky-dma-content-wrapper *, .single .cky-dma-content-wrapper *, .page .cky-accordion-header-des *, .single .cky-accordion-header-des *, .page .cky-gpc-wrapper .cky-gpc-desc *, .single .cky-gpc-wrapper .cky-gpc-desc * { font-size: 18px !important; font-family: "Darker Grotesque", sans-serif !important; padding: 0; font-weight: 500 !important; } .cky-footer-shadow { display: none !important; } button.cky-btn { border-width: 0 !important; font-size: 20px; font-weight: 500; line-height: 1.2em; padding: 0.4em 1.4em 0.55em; border-radius: 999px; background: var(--kbrana-cream) !important; border-color: var(--kbrana-cream) !important; color: var(--kbrana-black) !important; } button.cky-btn.cky-btn-accept { background: var(--kbrana-green) !important; border-color: var(--kbrana-green) !important; color: var(--kbrana-white) !important; } button.cky-btn:hover { background: var(--kbrana-accent) !important; border-color: var(--kbrana-accent) !important; color: var(--kbrana-black) !important; } button.cky-btn.cky-btn-accept:hover { background: var(--kbrana-accent) !important; border-color: var(--kbrana-accent) !important; color: var(--kbrana-green) !important; } .cky-notice-des p { font-size: 18px !important; line-height: 1.3em; font-weight: 500; } .page .cky-notice-btn-wrapper .cky-btn, .single .cky-notice-btn-wrapper .cky-btn, .page .cky-prefrence-btn-wrapper .cky-btn, .single .cky-prefrence-btn-wrapper .cky-btn { border-width: 2px !important; } .page .cky-modal.cky-modal-open, .single .cky-modal.cky-modal-open { border-radius: 30px; box-shadow: 8px 5px 20px 0px #acabab4d; } [data-cky-tag="detail-powered-by"] { display: none !important; } .page button.cky-show-desc-btn:not(:hover):not(:active), .single button.cky-show-desc-btn:not(:hover):not(:active) { color: var(--kbrana-black); } button.cky-show-desc-btn { color: var(--kbrana-black) !important; font-family: "Darker Grotesque", sans-serif; font-size: clamp(14px, 1.1vw, 18px) !important; text-decoration: underline !important; transition: all .3s ease; } button.cky-show-desc-btn:hover { color: var(--kbrana-accent) !important; } .page .cky-preference-body-wrapper, .single .cky-preference-body-wrapper { font-family: "Darker Grotesque", sans-serif; font-size: 22px; } body .cky-box-bottom-left { bottom: 12px; left: 48px; } body .cky-accordion-header .cky-accordion-btn { font-size: 22px !important; color: var(--kbrana-black) !important; font-weight: 500 !important; } /* ---- cookie banner end ----*/ .margin-all-0 { margin: 0; } .sitename { color: var(--kbrana-cream-light); margin: 0; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Define the fade-bottom animation */ @keyframes fadeBottom { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Initial state for animations */ .fade-in, .fade-bottom { opacity: 0; } /* Apply the fade-in animation */ .fade-in.show { animation: fadeIn 1s forwards; } /* Apply the fade-bottom animation */ .fade-bottom.show { animation: fadeBottom 1s forwards; } .page-404-p .perex { margin-bottom: 60px; } .page-404-p h2.headline2 { text-align: center; } .bt-footer { width: 100%; } /* DELETE START - REVIEW CANDIDATE: old generic popup overlay */ /* Popup container */ .popup { position: fixed; z-index: 9999999999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); align-content: center; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s; } .popup.show { visibility: visible; opacity: 1; transition: opacity 0.2s ease, visibility 0.2s ease; } /* Popup content */ .popup-content { background-color: #fff8e5; margin: 90px auto; border: 0px !important; border-radius: 30px; padding: 60px; width: 80%; max-width: 800px; position: relative; } /* Close button */ .close { font-family: "Darker Grotesque", sans-serif; color: #878787; float: right; font-size: 22px; font-weight: 300; transition: color 0.3s ease; position: absolute; top: 40px; right: 40px; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* DELETE END - REVIEW CANDIDATE: old generic popup overlay */ #hero-image img.bg-layer { position: absolute; z-index: -1; top: -0; right: 170px; } /* OWL CAROUSEL */ .owl-carousel button.owl-dot { background: rgba(0,0,0,0.2); width: 15px; height: 4px; border-radius: 0 !important; margin: 30px 4px 0; } .owl-carousel button.owl-dot.active { background: var(--kbrana-black); } .owl-carousel .owl-dots { text-align: center; } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .lg-actions .lg-next:before, .lg-actions .lg-prev:after, .lg-toolbar .lg-icon:after { color: var(--kbrana-black); font-size: 16px; line-height: 40px; text-align: center; display: inline-block; width: 40px; padding: 0 !important; height: 40px; transition: all 0.3s ease-in; background-color: var(--kbrana-white); border-radius: 50px; pointer-events: all; font-family: "Darker Grotesque", sans-serif; } button.owl-next span::after { width: 30px; height: 45px; background-image: url(/wp-content/uploads/2025/01/icon-chevron-right.svg); rotate: 90deg; background-size: cover; } .lg-toolbar .lg-icon:after { font-size: 24px; line-height: 38px; color: var(--kbrana-black); width: 40px; height: 40px; padding: 0 0 40px 0 !important; transition: all .3s ease; } .owl-carousel .owl-nav button span { font-family: "Darker Grotesque", sans-serif; font-size: 80px; } .owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover { } .owl-item img { cursor: pointer; } .lg-prev:hover , .lg-next:hover , .lg-close:hover { opacity: .8; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: transparent; padding: 0; } .lg-actions .lg-next:before { content: "→"; } .lg-actions .lg-prev:after { content: "←"; } .gallery-img { width: 100%; aspect-ratio: 1590 / 850; object-fit: cover; } button.owl-next:hover, button.owl-prev:hover { opacity: .8; } button.owl-prev.disabled, button.owl-next.disabled { opacity: 0 !important; } .lg-toolbar .lg-close:after { content: "×"; } .lg-close.lg-icon { margin-right: 15px; transition: all .3s ease; } .lg-backdrop { background-color: rgb(0, 0, 0, .75); } .lg-toolbar { background-color: transparent; } .lg-actions .lg-next, .lg-actions .lg-prev { width: var(--fluid-64); height: var(--fluid-64); display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border-radius: 50%; background: var(--kbrana-white) !important; color: var(--kbrana-accent); box-shadow: 0px 0px 14px 0px #DDAC8B80; opacity: 1; transition: background .25s ease, color .25s ease, opacity .25s ease; } .lg-toolbar .lg-close.lg-icon { width: var(--fluid-64); height: var(--fluid-64); display: inline-flex; align-items: center; justify-content: center; margin-top: var(--fluid-16); margin-right: var(--fluid-16); padding: 0 !important; border-radius: 50%; background: var(--kbrana-white); color: var(--kbrana-accent); box-shadow: 0px 0px 14px 0px #DDAC8B80; opacity: 1; transition: background .25s ease, color .25s ease, opacity .25s ease; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover, .lg-toolbar .lg-close.lg-icon:hover { background: var(--kbrana-accent) !important; color: var(--kbrana-white); opacity: 1; } .lg-actions .lg-next:before, .lg-actions .lg-prev:after { content: ""; width: var(--fluid-24); height: var(--fluid-24); display: block; padding: 0 !important; color: inherit; background-color: currentColor; mask-image: url(assets/img/kb-arrrow.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: url(assets/img/kb-arrrow.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .lg-actions .lg-prev:after { transform: rotate(-90deg); } .lg-actions .lg-next:before { transform: rotate(90deg); } .lg-toolbar .lg-close.lg-icon:after { content: ""; width: var(--fluid-24); height: var(--fluid-24); display: block; padding: 0 !important; color: inherit; background-color: currentColor; mask-image: url(assets/img/kb-close.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: url(assets/img/kb-close.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } #lg-counter { display: none; } .lg-sub-html { padding: 30px 30px 20px; max-width: 600px; width: 90%; margin: 0 auto 30px 30px; color: white; font-size: 16px; line-height: 1.2em; text-align: left; font-family: "Darker Grotesque", sans-serif; } .lg-counter { font-family: "Darker Grotesque", sans-serif; color: white; } .lg-next, .lg-prev { background-color: unset !important; } .lg-sub-html h6:after { content: ""; width: 18px; height: 3px; display: block; background: var(--kbrana-black); margin: 16px 0 8px; border-radius: 2px; } /* DELETE START - REVIEW CANDIDATE: old gallery open button */ .owl-gall-btn { position: absolute; bottom: 53px; left: 40px; z-index: 99; width: auto; padding: 0; } .open-carousel-gall a.button { background: var(--kbrana-white); border: 3px solid var(--kbrana-black); color: var(--kbrana-black); border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1.2em; text-align: center; display: inline-block; padding: 8px 35px; transition: all 0.2s ease-in; } .open-carousel-gall a.button:hover { background: var(--kbrana-black); color: var(--kbrana-white); } /* DELETE END - REVIEW CANDIDATE: old gallery open button */ .text-right { text-align: right; } .content-img { height: 100%; width: 100%; object-fit: cover; min-height: 700px; max-height: calc(100vh - 100px); } /* DELETE START - REVIEW CANDIDATE: old floating form popup */ /* POPUP new css */ .popup { width: 420px; background-color: var(--kbrana-green); padding: 0 35px 35px; display: block; flex-direction: column; left: unset; right: 30px; top: unset; bottom: 30px; height: fit-content; overflow: hidden; transition: opacity .4s ease, visibility .4s ease; opacity: 0; visibility: hidden; z-index: -1; text-align: left; } .popup { -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; } .popup::-webkit-scrollbar { display: none; } .is-popup-content { height: fit-content; padding-top: 35px; position: relative; } .popup.show { visibility: visible; opacity: 1; transition: opacity .4s ease, visibility .4s ease; z-index: 999; } h2.popup-title { font-family: "Darker Grotesque", sans-serif; font-weight: 300; font-size: 24px; line-height: 28px; color: #FDFBF7; padding-top: 25px; padding-bottom: 0; text-transform: none; } .popup-caption { font-family: "Darker Grotesque", sans-serif; font-weight: 300; font-size: 12px; line-height: 18px; color: #fff; padding-top: 6px; max-width: 300px; margin-right: auto; } .popup .forminator-ui.forminator-custom-form { margin-top: 0 !important; } .popup .forminator-row { display: flex; column-gap: 16px; } .popup .close-popup-btn { display: block; position: absolute; top: 15px; right: -20px; width: 20px; height: 20px; background: url('/wp-content/themes/karpatska-brana/assets/img/icon-close.svg') no-repeat; background-size: contain; background-position: 50%; transition: filter .3s ease; } .popup .close-popup-btn:hover { filter: brightness(70%); } .popup .forminator-design--material .forminator-label[class*="forminator-floating-"] { font-size: 12px !important; font-family: "Darker Grotesque", sans-serif !important; font-weight: 300 !important; line-height: 15px !important; } .popup .forminator-input, .popup .forminator-field p { font-size: 12px !important; line-height: 20px !important; } .popup .forminator-input { padding: 0 0 4px !important; } .popup .forminator-design--material .forminator-error-message { font-family: "Darker Grotesque", sans-serif !important; font-size: 10px !important; font-weight: 300 !important; line-height: 12px !important; } .popup .forminator-design--material .forminator-input { border-color: #ffffff; color: #ffffff !important; } .popup .forminator-design--material .forminator-input:-webkit-autofill { transition: background-color 9999s ease-in-out 0s; -webkit-text-fill-color: #fff !important; box-shadow: 0 0 0 1000px var(--kbrana-green) inset !important; } .popup .forminator-row .forminator-col.forminator-col-6, .popup .forminator-row .forminator-col.forminator-col-md-6 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .popup .forminator-row .forminator-col-12 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .popup .forminator-ui.forminator-custom-form[data-grid=open] .forminator-col:not(:last-child) { margin-bottom: 0; } .popup .forminator-ui.forminator-custom-form[data-design=material] .forminator-floating--input { -webkit-transform: translateY(20px); transform: translateY(20px); } .popup .forminator-ui.forminator-custom-form[data-grid=open] .forminator-row:not(:last-child) { margin-bottom: 5px; } .popup .forminator-design--material .forminator-label:not([class*="forminator-floating-"]) { font-family: "Darker Grotesque", sans-serif !important; font-size: 12px !important; color: #fff !important; font-weight: 300 !important; } .popup .forminator-design--material #checkbox-1 .forminator-checkbox .forminator-checkbox-label { color: #fff; font-size: 10px !important; line-height: 1.4em !important; padding: 4px 12px !important; border: 1px solid #fff !important; margin-left: 0 !important; font-family: "Darker Grotesque", sans-serif !important; transition: background .3s ease, color .3s ease; } .popup .forminator-checkbox input[type="checkbox"]:checked + .forminator-checkbox-box +.forminator-checkbox-label, .popup .forminator-design--material #checkbox-1 .forminator-checkbox .forminator-checkbox-label:hover { background: #fff !important; color: var(--kbrana-green) !important; } .popup #checkbox-1 .forminator-checkbox .forminator-checkbox-box { display: none !important; visibility: hidden; } .popup .forminator-ui.forminator-custom-form[data-design=material] .forminator-checkbox.forminator-checkbox-inline { margin-right: 4px !important; margin-top: 5px !important; } .popup .forminator-design--material .forminator-label:not([class*="forminator-floating-"]) .forminator-required { color: #fff !important; } .popup .forminator-field-consent .forminator-field p { font-size: 8px !important; line-height: 1.4em !important; font-weight: 300 !important; } .popup .forminator-field-consent { margin-bottom: 4px !important; } .popup .forminator-field-consent .forminator-field a { text-decoration: underline; } .popup .forminator-design--material .forminator-consent .forminator-checkbox-box { border-color: #fff !important; background-color: transparent !important; border-radius: 0 !important; border-width: 1px !important; width: 9px !important; height: 9px !important; -webkit-box-flex: 0; -ms-flex: 0 0 9px !important; flex: 0 0 9px !important; } .popup .forminator-ui.forminator-custom-form[data-design=material] .forminator-checkbox .forminator-checkbox-box:before { content: ""; opacity: 0; -khtml-opacity: 0; display: block; height: 9px; width: 8px; background-image: url('/wp-content/themes/karpatska-brana/assets/img/popup-consent-icon.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; transform: translate(-50%, -50%) rotate(-6deg); } .popup .forminator-button-submit { font-family: "Darker Grotesque", sans-serif !important; font-size: 13px !important; line-height: 13px !important; background-color: transparent !important; border: 0 !important; width: 155px !important; text-align: left !important; border-radius: 0 !important; padding: 8px 5px 8px 7px !important; font-weight: 400 !important; } .popup .forminator-button-submit:hover { color: var(--kbrana-green) !important; } .popup .forminator-row-last { justify-content: flex-end; } .popup .forminator-button-submit:before { content: ""; display: block; height: 1px; width: 100%; position: absolute; bottom: 0; left: 0; transition: all .3s cubic-bezier(.1,.76,.37,.98); z-index: 0; opacity: 1; background: #fff; } .popup .forminator-button-submit:hover:before { height: 100%; } .popup .forminator-button-submit:after { content: ""; position: absolute; right: 3px; top: 9px; width: 12px; height: 12px; background-image: url('/wp-content/themes/karpatska-brana/assets/img/popup-right-arrow.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } .popup .forminator-button-submit:hover:after { filter: invert(100%); } .popup #consent-1, .popup #consent-2, .popup #consent-3 { margin-left: 11px; margin-bottom: 2px; } .popup .popup-img.mobile { display: none; } .popup .forminator-ui.forminator-design--material .forminator-field-consent .forminator-error-message { margin-left: 24px; } .popup .forminator-is_active:not(.forminator-has_error) span.forminator-required { color: var(--kbrana-accent) !important; } .popup .forminator-design--material .forminator-is_filled .forminator-label[class*="forminator-floating-"], .popup .forminator-design--material .forminator-is_filled .forminator-label[class*="forminator-floating-"] span.forminator-required { color: rgba(255, 255, 255, 0.6) !important; } .popup #name-1 { padding-top: 3px; } .popup .forminator-design--material .forminator-is_filled .forminator-label[class*="forminator-floating-"], .popup .forminator-design--material .forminator-is_active .forminator-label[class*="forminator-floating-"] { font-size: 10px !important; } .popup #consent-4 { margin-bottom: 2px !important; } .popup #forminator-module-978.forminator-design--material .forminator-response-message.forminator-success { box-shadow: unset !important; background: transparent !important; } .popup .forminator-success h4.popup-title-as { font-family: "Darker Grotesque", sans-serif; font-size: 24px; line-height: 28px; color: #FDFBF7; text-align: left; font-weight: 300; border: 0; padding: 0; margin-left: 0; } .popup .forminator-success p.popup-caption { font-family: "Darker Grotesque", sans-serif !important; font-weight: 300 !important; font-size: 12px !important; line-height: 17px !important; color: #fff !important; padding-top: 0 !important; } .popup-form-close-btn.after-submission { cursor: pointer; color: #fff; font-family: "Darker Grotesque", sans-serif; font-weight: 300; font-size: 14px; line-height: 17px; transition: color .3s ease; position: relative; margin-top: 20px !important; display: inline-block; padding: 4px 8px; } .popup-form-close-btn.after-submission:hover { color: var(--kbrana-green); } .popup-form-close-btn.after-submission:before { content: ""; display: block; height: 1px; width: 100%; position: absolute; bottom: 0; left: 0; transition: all .3s cubic-bezier(.1,.76,.37,.98); z-index: -1; opacity: 1; background: #fff; } .popup .popup-form-close-btn.after-submission:hover:before { height: 100%; } .popup .forminator-loading:before { color: #fff !important; } .popup .forminator-field-consent .forminator-label { display: none !important; } .popup .forminator-success { padding: 20px 0 0 0 !important; } .popup .forminator-ui.forminator-custom-form[data-design=material] .forminator-response-message.forminator-loading:before { left: 0 !important; } .popup .forminator-ui .forminator-response-message.forminator-loading { padding-left: 25px !important; margin-bottom: 0 !important; margin-top: 5px !important; font-weight: 300 !important; } .popup #checkbox-1 { padding: 9px 0 15px 0; } .popup .forminator-row-last { margin-top: 10px; margin-bottom: 0 !important; } .popup .forminator-loading, .popup .forminator-loading p, .popup .forminator-loading span, .popup .forminator-loading h3, .popup .forminator-loading h4, .popup .forminator-loading h5 { font-size: 12px !important; font-weight: 300 !important; } /* DELETE END - REVIEW CANDIDATE: old floating form popup */ /* DELETE START - REVIEW CANDIDATE: old public-spaces grid */ /* GRID Verejné priestory */ .grid_kbrana { display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(140px, 10.5vw, 250px); gap: var(--gap); } /* card base */ .card{ border-radius: var(--radius); background: white; display:flex; flex-direction:column; justify-content:space-between; border: 0; } /* layout spans for ≥ 1024px */ .span-3x6{ grid-column: span 2; grid-row: span 6; } .span-2x5{ grid-column: span 2; grid-row: span 5; } .span-3x4{ grid-column: span 2; grid-row: span 4; } .span-2x2{ grid-column: span 2; grid-row: span 2; } .span-2x3{ grid-column: span 2; grid-row: span 3; } .span-2x4{ grid-column: span 2; grid-row: span 4; } .card-grid-inner img { height: 100%; max-height: clamp(170px, 10vh, 200px); display: block; } /* DELETE END - REVIEW CANDIDATE: old public-spaces grid */ .text-field input { border: 0 !important; padding: 16px !important; } .text-field .forminator-is_active label { color: var(--kbrana-white) !important; } .text-field .forminator-field label { padding-bottom: 0 !important; } .forminator-field-checkbox { padding-top: 40px !important; padding-bottom: 2px !important; } .forminator-field-checkbox span.forminator-label { font-size: 1.5em !important; font-weight: 400 !important; font-family: "Darker Grotesque","sans-serif" !important; line-height: 1em !important; color: var(--kbrana-white) !important; margin-bottom: 24px !important; } /***/ .vyber-bytov .forminator-checkbox { display: inline-flex; align-items: center; justify-content: center; font-size: 1em !important; padding: 0.5em 1.25em; border: 2px solid #fff; border-radius: 9999px; background-color: transparent; color: #fff; cursor: pointer; transition: all 0.3s ease; position: relative; margin-right: 1em !important; margin-bottom: 1em !important; margin-top: 0 !important; } .vyber-bytov .forminator-checkbox input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .vyber-bytov .forminator-checkbox-box { display: none !important; } .vyber-bytov .forminator-checkbox-label { color: var(--kbrana-white); font-size: 1em !important; font-weight: 400 !important; font-family: "Darker Grotesque","sans-serif" !important; } .vyber-bytov .forminator-checkbox.is-active{ background-color: var(--kbrana-white); } .vyber-bytov .forminator-checkbox.is-active .forminator-checkbox-label{ color: var(--kbrana-accent) !important; } .vyber-bytov .forminator-checkbox .forminator-checkbox-box~span { margin-left: 0 !important; } .vyber-bytov .forminator-checkbox-label::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } /* ========================================================================== Apartment Offer, Tables And Floor Selection ========================================================================== */ /* výber bytov */ .svgOverlay polygon { transition: fill 0.2s linear; pointer-events: auto; cursor: pointer; } .floor-selection-wrapper .svgOverlay polygon.active { fill: rgba(221, 172, 139, 0.8) !important; pointer-events: none; } .vyber-poschodia-sm .svgOverlay polygon.active-actual-floor { fill: rgb(221, 172, 139) !important; mix-blend-mode: multiply; pointer-events: none; } .floor-info-item { top: 0; bottom: 0; left: 0; right: 0; } .floor-info-item { position: absolute; pointer-events: none; } .tooltip-info { position: absolute; transform: translate(-50%); background: var(--kbrana-accent); padding: var(--fluid-16) var(--fluid-8) var(--fluid-8); border-radius: var(--fluid-12); width: min(var(--fluid-280), calc(100vw - 48px)); z-index: 999; color: var(--kbrana-black); } .tooltip-info p { margin-bottom: 0; } .tooltip-row { display: flex; justify-content: space-between; } .tooltip-panel { background: var(--kbrana-cream-light); border-radius: var(--fluid-8); padding: var(--fluid-12); } .tooltip-panel + .tooltip-panel { margin-top: var(--fluid-8); } .tooltip-stat-row + .tooltip-stat-row { margin-top: var(--fluid-4); } .tooltip-stat-row .tooltip-popis { font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .tooltip-value { width: var(--fluid-24); height: var(--fluid-24); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fluid-18); line-height: 1; font-weight: 500; background: var(--kbrana-cream); color: var(--kbrana-black); flex: 0 0 var(--fluid-24); padding-bottom: 0.1em; } .tooltip-value-free { background: var(--kbrana-green); color: var(--kbrana-white); } .tooltip-value-reserved { background: #ffc073; } .tooltip-flat-details, .tooltip-flat-price-row { padding: var(--fluid-12); border-radius: var(--fluid-8); } .tooltip-flat-row { align-items: center; } .tooltip-flat-row + .tooltip-flat-row { margin-top: var(--fluid-4); } .tooltip-flat-row .tooltip-popis, .tooltip-flat-price-row .tooltip-popis { font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .tooltip-flat-pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fluid-32); padding: 0 var(--fluid-12); border-radius: 999px; font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .tooltip-flat-status { min-width: var(--fluid-88); background: var(--kbrana-green); color: var(--kbrana-white); padding: 0.1em var(--fluid-16) 0.2em; } .tooltip-flat-status.reserved, .tooltip-flat-status.pre-reserved { background: var(--kbrana-accent); color: var(--kbrana-black); } .tooltip-flat-status.sold { background: #b8b8b8; color: var(--kbrana-white); } .tooltip-flat-rooms { padding: .1em 0 .2em; background: #f7bd73; color: var(--kbrana-black); } .tooltip-flat-area { background: var(--kbrana-accent); color: var(--kbrana-black); width: fit-content; white-space: nowrap; padding: 0.1em var(--fluid-16) 0.2em; } .tooltip-flat-price-row { display: flex; align-items: center; justify-content: space-between; } .tooltip-flat-price { font-size: var(--fluid-28); line-height: 1; font-weight: 500; } .position { position: absolute; bottom: 30px; left: 30px; } .flat-image-holder { background: var(--kbrana-grey); border-radius: 10px; padding: 80px 70px 120px; } table { font-family: "Darker Grotesque", sans-serif; font-weight: 600; } table.dataTable td { border-top: 0; } table.dataTable tbody th, table.dataTable tbody td { padding: var(--fluid-16) var(--fluid-8); line-height: 1em; font-weight: 500; text-align: center; vertical-align: middle; } table.dataTable thead th, table.dataTable thead td { border-bottom: 0; padding: var(--fluid-18) var(--fluid-8); font-weight: 500; line-height: 1em; text-align: center; vertical-align: middle; } table.dataTable.no-footer { border-bottom: 0; } .flat-status { text-transform: capitalize; } table.dataTable tbody tr { cursor: pointer; transition: background-color .3s ease; } table.dataTable tbody tr > * { transition: background-color .3s ease; } #byty_table.is-redrawing tbody tr, #byty_table.is-redrawing tbody tr > * { transition: none; } table.dataTable tbody tr.odd, table.dataTable tbody tr.odd > * { background-color: var(--kbrana-cream); } table.dataTable tbody tr.even, table.dataTable tbody tr.even > * { background-color: var(--kbrana-cream-light); } table.dataTable tbody tr:hover, table.dataTable tbody tr:hover > * { background-color: #ead4bd; } #byty_table { visibility: hidden; } table.dataTable { font-size: var(--fluid-24); } table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { background-image: none !important; cursor: pointer; white-space: nowrap; } table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after { content: ""; display: inline-block; width: var(--fluid-24); height: var(--fluid-20); margin-left: var(--fluid-12); margin-bottom: var(--fluid-2); background: center / contain no-repeat; vertical-align: middle; } table.dataTable thead th.sorting::after { background-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3' transform='rotate(180 4 8.5)'%3E%3Cpath d='M3.32809 16.6997C3.52335 16.895 3.83993 16.895 4.03519 16.6997L7.21718 13.5177C7.41244 13.3225 7.41244 13.0059 7.21718 12.8106C7.02191 12.6154 6.70533 12.6154 6.51007 12.8106L3.68164 15.639L0.853214 12.8106C0.657952 12.6154 0.341369 12.6154 0.146107 12.8106C-0.0491549 13.0059 -0.0491549 13.3225 0.146107 13.5177L3.32809 16.6997ZM3.68164 0L3.18164 2.18557e-08L3.18164 16.3462L3.68164 16.3462L4.18164 16.3462L4.18164 -2.18557e-08L3.68164 0Z' fill='%23272727'/%3E%3C/g%3E%3Cg opacity='0.3' transform='translate(12)'%3E%3Cpath d='M3.32809 16.6997C3.52335 16.895 3.83993 16.895 4.03519 16.6997L7.21718 13.5177C7.41244 13.3225 7.41244 13.0059 7.21718 12.8106C7.02191 12.6154 6.70533 12.6154 6.51007 12.8106L3.68164 15.639L0.853214 12.8106C0.657952 12.6154 0.341369 12.6154 0.146107 12.8106C-0.0491549 13.0059 -0.0491549 13.3225 0.146107 13.5177L3.32809 16.6997ZM3.68164 0L3.18164 2.18557e-08L3.18164 16.3462L3.68164 16.3462L4.18164 16.3462L4.18164 -2.18557e-08L3.68164 0Z' fill='%23272727'/%3E%3C/g%3E%3C/svg%3E"); } table.dataTable thead th.sorting_asc::after { background-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(180 4 8.5)'%3E%3Cpath d='M3.32809 16.6997C3.52335 16.895 3.83993 16.895 4.03519 16.6997L7.21718 13.5177C7.41244 13.3225 7.41244 13.0059 7.21718 12.8106C7.02191 12.6154 6.70533 12.6154 6.51007 12.8106L3.68164 15.639L0.853214 12.8106C0.657952 12.6154 0.341369 12.6154 0.146107 12.8106C-0.0491549 13.0059 -0.0491549 13.3225 0.146107 13.5177L3.32809 16.6997ZM3.68164 0L3.18164 2.18557e-08L3.18164 16.3462L3.68164 16.3462L4.18164 16.3462L4.18164 -2.18557e-08L3.68164 0Z' fill='%23272727'/%3E%3C/g%3E%3Cg opacity='0.3' transform='translate(12)'%3E%3Cpath d='M3.32809 16.6997C3.52335 16.895 3.83993 16.895 4.03519 16.6997L7.21718 13.5177C7.41244 13.3225 7.41244 13.0059 7.21718 12.8106C7.02191 12.6154 6.70533 12.6154 6.51007 12.8106L3.68164 15.639L0.853214 12.8106C0.657952 12.6154 0.341369 12.6154 0.146107 12.8106C-0.0491549 13.0059 -0.0491549 13.3225 0.146107 13.5177L3.32809 16.6997ZM3.68164 0L3.18164 2.18557e-08L3.18164 16.3462L3.68164 16.3462L4.18164 16.3462L4.18164 -2.18557e-08L3.68164 0Z' fill='%23272727'/%3E%3C/g%3E%3C/svg%3E"); } table.dataTable thead th.sorting_desc::after { background-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3' transform='rotate(180 4 8.5)'%3E%3Cpath d='M3.32809 16.6997C3.52335 16.895 3.83993 16.895 4.03519 16.6997L7.21718 13.5177C7.41244 13.3225 7.41244 13.0059 7.21718 12.8106C7.02191 12.6154 6.70533 12.6154 6.51007 12.8106L3.68164 15.639L0.853214 12.8106C0.657952 12.6154 0.341369 12.6154 0.146107 12.8106C-0.0491549 13.0059 -0.0491549 13.3225 0.146107 13.5177L3.32809 16.6997ZM3.68164 0L3.18164 2.18557e-08L3.18164 16.3462L3.68164 16.3462L4.18164 16.3462L4.18164 -2.18557e-08L3.68164 0Z' fill='%23272727'/%3E%3C/g%3E%3Cg transform='translate(12)'%3E%3Cpath d='M3.32809 16.6997C3.52335 16.895 3.83993 16.895 4.03519 16.6997L7.21718 13.5177C7.41244 13.3225 7.41244 13.0059 7.21718 12.8106C7.02191 12.6154 6.70533 12.6154 6.51007 12.8106L3.68164 15.639L0.853214 12.8106C0.657952 12.6154 0.341369 12.6154 0.146107 12.8106C-0.0491549 13.0059 -0.0491549 13.3225 0.146107 13.5177L3.32809 16.6997ZM3.68164 0L3.18164 2.18557e-08L3.18164 16.3462L3.68164 16.3462L4.18164 16.3462L4.18164 -2.18557e-08L3.68164 0Z' fill='%23272727'/%3E%3C/g%3E%3C/svg%3E"); } .sorting_disabled::after { content: none; } .td-flat-title { font-weight: 600; } .table-status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: var(--fluid-120); padding: var(--fluid-4) var(--fluid-24) var(--fluid-6) var(--fluid-24); border-radius: 999px; color: var(--kbrana-white); font-size: var(--fluid-20); font-weight: 400; line-height: 1; text-align: center; text-transform: capitalize; } .td-status-free .table-status-pill { background-color: var(--kbrana-green); } .td-status-reserved .table-status-pill, .td-status-prereserved .table-status-pill { background-color: #ddac8b; } .td-status-sold .table-status-pill, .td-status-neponuka-sa .table-status-pill, .td-status-vzor .table-status-pill { background-color: #b8b8b8; } #byty_table_filter { display: none; } .filter-buttons { display: none; } .poschodieImage { position: relative; z-index: 1; pointer-events: none; } .vyber-poschodia-image { z-index: 0; } .single-poschodia #poschodie .row.bg-kbrana-cream { overflow: hidden; } .single-poschodia .position { top: var(--fluid-16); bottom: auto; left: var(--fluid-16); z-index: 12; } .single-poschodia .position .vyber-poschodia-sm { display: flex; align-items: start; gap: var(--fluid-4); width: auto; padding: 0; background: transparent; border-radius: 0; } .single-poschodia .vyber-poschodia-sm .floor-map-holder { order: 1; width: var(--fluid-240); } .single-poschodia .vyber-poschodia-sm .mob-width-floor-select { position: relative; width: 100%; max-width: none; margin: 0; } .single-poschodia .vyber-poschodia-sm .poschodieImage { display: block; width: 100%; height: auto; z-index: 1; } .single-poschodia .vyber-poschodia-sm .svgOverlay { z-index: 2; } .single-poschodia .vyber-poschodia-sm .floor-btns { order: 2; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: var(--fluid-8); margin: 0; padding-top: 0; } .single-poschodia .vyber-poschodia-sm .floor-btn { display: block; width: var(--fluid-24); height: var(--fluid-32); border-radius: 0; background-color: var(--kbrana-accent); background-image: url('assets/img/kb-arrrow.svg'); background-repeat: no-repeat; background-position: center; background-size: var(--fluid-12) auto; transition: opacity .3s ease, background-color .3s ease; } .single-poschodia .vyber-poschodia-sm .floor-btn:hover { background-color: var(--kbrana-green); } .single-poschodia .vyber-poschodia-sm .floor-btn.floor-up { transform: none; } .single-poschodia .vyber-poschodia-sm .floor-btn.floor-down { transform: rotate(180deg); } .single-poschodia .vyber-poschodia-sm .floor-btn.disabled { opacity: 0.35; pointer-events: none; } .single-poschodia .vyber-poschodia-sm .actual-floor { padding: 0; text-align: center; line-height: 1; color: var(--kbrana-black); } .floor-view-marker { position: absolute; z-index: 8; display: flex; flex-direction: column; align-items: center; gap: var(--fluid-8); max-width: var(--fluid-80); color: var(--kbrana-accent); text-align: center; pointer-events: none; } .floor-view-marker p { color: var(--kbrana-accent); } .floor-view-icon { display: block; width: var(--fluid-48); height: var(--fluid-48); object-fit: contain; } .floor-view-top { top: var(--fluid-16); left: 50%; transform: translateX(-50%); } .floor-view-bottom { bottom: var(--fluid-16); left: 50%; transform: translateX(-50%); } .floor-view-left { top: 50%; left: var(--fluid-16); transform: translateY(-50%); } .floor-view-right { top: 50%; right: var(--fluid-16); transform: translateY(-50%); } .floor-status-legend { position: absolute; left: var(--fluid-16); bottom: var(--fluid-16); z-index: 8; display: flex; flex-direction: column; gap: var(--fluid-8); color: var(--kbrana-black); padding: 0; max-width: 300px; } .floor-status-item { display: flex; align-items: center; gap: var(--fluid-8); font-size: var(--fluid-16); line-height: 1; } .floor-status-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--fluid-24); height: var(--fluid-24); border-radius: 50%; color: var(--kbrana-white); font-size: var(--fluid-14); font-weight: 700; line-height: 1; } .flat-status-marker { display: inline-flex; align-items: center; justify-content: center; width: var(--fluid-24); height: var(--fluid-24); border-radius: 50%; background-color: #b8b8b8; color: var(--kbrana-white); font-size: var(--fluid-14); font-weight: 700; line-height: 1; } .floor-status-free .floor-status-dot { background-color: var(--kbrana-green); } .floor-status-reserved .floor-status-dot { background-color: var(--kbrana-accent); } .floor-status-sold .floor-status-dot { background-color: #b8b8b8; } .flat-status-markers { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .flat-status-markers .flat-status-marker { position: absolute; transform: translate(calc(-50% + 8px), calc(-50% + 8px)); } .flat-status-marker-available { background-color: var(--kbrana-green); } .flat-status-marker-reserved { background-color: var(--kbrana-accent); } .flat-status-marker-sold { background-color: #b8b8b8; } /* ========================================================================== Project Pages And Interactive Sections ========================================================================== */ /* NEW CSS od 20.11.2025 */ .hero-section::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; background: rgba(0, 0, 0, 0.15); } .hero-row { z-index: 10; } .col-flex { display: flex; flex-direction: column; align-items: flex-start; } .flex-grow { flex-grow: 1; } .full-w-img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: 95vh; object-fit: cover; } .bg-video-hp { width: 100%; height: 100%; } .full-w-img-animation { position: absolute; left: 0; right: 0; height: auto; top: 8vw; bottom: 8vw; z-index: 10; } .forminator-input, .forminator-field p { font-size: 1em !important; line-height: 1.5em !important; color: var(--kbrana-white) !important; } div#consent-4 { margin-top: 24px; } .forminator-field-consent .forminator-label:not([class*="forminator-floating-"]) { display: none !important; } .popup-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); z-index: 99999; } .form-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: max(950px, 50vw); background: var(--kbrana-white); padding: var(--fluid-80) var(--fluid-80) var(--fluid-64); z-index: 100000; text-align: center; border-radius: 16px; } .popup-backdrop, .form-popup { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .popup-backdrop.active, .form-popup.active { opacity: 1; visibility: visible; } .contact-box .forminator-response-message.forminator-loading { background-color: transparent !important; } body.popup-open { overflow: hidden !important; } /* DELETE START - REVIEW CANDIDATE: old public-spaces card inner helper */ .card-grid-inner { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } /* DELETE END - REVIEW CANDIDATE: old public-spaces card inner helper */ a.text-white:hover, a.socials:hover { color: var(--kbrana-accent) !important; } ul.footer-list { margin-bottom: 0; display: flex; list-style: none; gap: var(--fluid-40); } .footer-gdpr li { font-size: 0.75em; line-height: 1.2em; } .footer-gdpr li { padding: 0 !important; } .foo-list-last { text-align: right; flex-grow: 1; display: inline-block !important; } footer li a:hover { text-decoration: none; color: var(--kbrana-accent) !important; } .header { background-color: rgba(255, 255, 255, 0); transition: all .5s ease; pointer-events: none; } .home:not(.scrolled) .header { background-color: rgba(255, 255, 255, 0); } .scrolled .header { background-color: var(--kbrana-cream-light); } body.menu-open .header { background-color: var(--kbrana-cream-light); z-index: 999; } body.menu-open .kbrana-logo.has-dark-logo .kbrana-logo-light { display: none; } body.menu-open .kbrana-logo.has-dark-logo .kbrana-logo-dark { display: block; } /* DELETE START - REVIEW CANDIDATE: old building overview schema */ .kbrana-schema-holder { position: absolute; left: 30px; top: 30px; padding: 15px 27px 15px 13px; width: 160px; } .kbrana-schema-img { height: auto; min-width: 100px; } .svgOverlay { z-index: 1; } .kbrana-overview-holder .svgOverlay polygon { fill: rgba(221, 172, 139, 0.6); transition: fill .3s ease; } .kbrana-overview-holder .svgOverlay polygon:hover { fill: rgba(221, 172, 139, 0.8); } .kbrana-overview-info { position: absolute; min-width: 190px; padding: 1em; top: 65.5%; left: 53%; } .building-letter { display: flex; height: 2.5em; width: 2.5em; background: var(--kbrana-white); align-items: center; justify-content: center; border-radius: 80px; margin-bottom: 0.5em; } .select-podlazie-container { display: inline-block; } .select-podlazie-container label { display: block; font-size: 0.9em; margin-bottom: 4px; color: #ffffff; } /* DELETE END - REVIEW CANDIDATE: old building overview schema */ .js-custom-select { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; } .custom-select { position: relative; font-size: var(--fluid-24); font-weight: 600; } .custom-select__trigger { width: 100%; height: 2em; padding: 0; border-radius: 0; border: 0; border-bottom: 2px solid var(--kbrana-black); color: var(--kbrana-black); background: var(--kbrana-cream); text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .custom-select__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; padding-bottom: 0.2em; } .custom-select__arrow { position: relative; width: 0.6em; height: 0.6em; flex-shrink: 0; } .custom-select__arrow::before { content: ""; position: absolute; left: 0; right: 0; width: 0.6em; height: 0.6em; margin: auto; background-image: url(assets/img/kb-triangle.svg) ; background-size: contain; background-repeat: no-repeat; transition: all .3s ease; } .custom-select__options { position: absolute; top: 100%; left: 0; right: 0; border-radius: 0; border: 0; background-color: var(--kbrana-cream); overflow-y: auto; list-style: none; padding: 0; z-index: 99999; visibility: hidden; opacity: 0; max-height: 0; transition: all .3s ease; margin: 0; } .custom-select--open .custom-select__options { opacity: 1; visibility: visible; max-height: unset; } .custom-select__option { padding: 0.25em 0.5em; font-size: 0.9em; color: var(--kbrana-black); cursor: pointer; } .column-container.status .custom-select__option, .column-container.status .custom-select__label { text-transform: capitalize; } .custom-select__option--empty { font-style: italic; } .custom-select__option:hover { background-color: rgba(221, 172, 139, 0.6); } .custom-select__option.is-selected { background-color: var(--kbrana-accent); } .select-container { display: flex; } .custom-select.custom-select--open .custom-select__arrow::before { transform: rotate(-180deg); transform-origin: center; } table.dataTable tbody td.td-status::first-letter { text-transform: capitalize; } /* ***** COLOURS */ .bg-kbrana-green { background-color: var(--kbrana-green); } .bg-kbrana-accent { background-color: var(--kbrana-accent); } .bg-kbrana-cream { background-color: var(--kbrana-cream); } .bg-kbrana-cream-light { background-color: var(--kbrana-cream-light); } .bg-kbrana-cream-card { background-color: var(--kbrana-cream-card); } .bg-kbrana-grey { background-color: var(--kbrana-grey); } .bg-kbrana-offwhite { background-color: var(--kbrana-offwhite); } .bg-kbrana-white { background-color: var(--kbrana-white); } /* ***** Border radius */ .br8 { border-radius: 8px; } .br16 { border-radius: 16px; } .mh32 { max-height: 2em; } .vyber-poschodia-sm { width: 160px; padding: 24px 12px; background: var(--kbrana-white); } .first-section { padding-top: calc(var(--fluid-96) + var(--fluid-24) + var(--fluid-16)); } .breadcrumbs { display: flex; gap: var(--fluid-12); align-items: center; } .breadcrumbs a, .breadcrumbs p { font-size: 1em; color: currentColor; margin: 0; text-decoration: none; } .breadcrumbs a:hover { color: var(--kbrana-accent); } .breadcrumbs .separator { width: 0.5em; height: 0.5em; margin-top: 0.2em; background-color: currentColor; mask-image: url('assets/img/kb-breadcrumb-sep.svg'); -webkit-mask-image: url('assets/img/kb-breadcrumb-sep.svg'); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .flat-selection { margin: auto; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-800 { font-weight: 800 !important; } .flat-info-holder { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .flat-img { margin: auto; position: relative; } .flat-img .dimensions-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; background-color: var(--kbrana-cream); transition: all .5s ease; } .flat-img .caption-img { transition: all .5s ease; } .flat-img .caption-img.hide { /* opacity_: 0; visibility_: hidden; */ } .flat-img .dimensions-img.show { opacity: 1; visibility: visible; } .gallery-carousel.owl-carousel .owl-item img { aspect-ratio: 16/9; object-fit: cover; object-position: center; } .gallery-carousel .owl-nav { position: absolute; top: calc(50% - 20px); width: 100%; display: flex; justify-content: space-between; padding: 0 24px; pointer-events: none; } .footer-list a, .footer-contacts a { text-decoration: none; } .hero-bg-image { position: absolute; height: 100%; width: 100%; object-fit: cover; } .forminator-ui.forminator-custom-form[data-design=material] .forminator-checkbox__wrapper { align-items: center !important; } div#mobile-menu { display: block; width: 100vw; height: 100dvh; box-sizing: border-box; background: var(--kbrana-cream-light); z-index: 90; position: fixed; top: 0; right: -100vw; padding: 120px 15px 32px; overflow-y: auto; transition: right 0.5s ease; pointer-events: auto; } .kb-container.mob-menu-container { max-height: calc(100dvh - 104px); overflow-y: auto; } body.menu-open { overflow: hidden !important; } ul.mobile-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 35px; max-width: 100%; align-items: center; } .mobile-menu .menu-item a { display: inline-block; width: auto; font-size: 24px; line-height: 1; padding: 0; background-color: transparent; border-radius: 0; text-decoration: none; color: var(--kbrana-black); text-align: center; } .mobile-menu .menu-item:not(.menu-item-header-cta) a { font-size: 40px; font-family: var(--kb-serif); word-spacing: -0.15em; } .mobile-menu a:hover { color: var(--kbrana-accent); background-color: transparent; } .mobile-menu .menu-item-header-cta > a { display: inline-flex; align-items: center; justify-content: center; padding: var(--fluid-12) var(--fluid-48); min-height: 48px; text-align: center; background: var(--kbrana-green); border: 2px solid var(--kbrana-green); border-radius: 999px; color: var(--kbrana-white); font-weight: 500; } .mobile-menu .menu-item-header-cta > a:hover { background: var(--kbrana-accent); border-color: var(--kbrana-accent); color: var(--kbrana-green); } .mobile-menu-socials a.socials { color: var(--kbrana-black); font-size: 18px; width: fit-content; } .mobile-menu-socials { display: flex; flex-direction: column; padding-right: 0; padding-left: 0; gap: 16px; } .mobile-menu-socials .mob-language-btn { text-decoration: none; } .mobile-menu-holder { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; } .mobile-menu-contact { width: 100%; color: var(--kbrana-black); } .mobile-menu-contact-list { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; align-items: center; padding-bottom: 24px; } .mobile-menu-contact-link { display: flex; align-items: center; gap: 16px; color: var(--kbrana-black); text-decoration: none; font-size: 24px; line-height: 1.1; } .mobile-menu-contact-link:hover { color: var(--kbrana-accent); } .mobile-menu-contact-icon { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .mobile-menu-contact-icon::before { content: ""; width: 16px; height: 16px; display: block; background-color: currentColor; -webkit-mask-image: var(--mobile-contact-icon); mask-image: var(--mobile-contact-icon); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-position: center; mask-repeat: no-repeat; mask-size: contain; } .mobile-menu-contact-icon-phone { --mobile-contact-icon: url(assets/img/call.svg); } .mobile-menu-contact-icon-mail { --mobile-contact-icon: url(assets/img/mail.svg); } .switch-dimensions { display: inline-block; } .switch-dimensions input { display: none; } .switch-dimensions label { display: block; width: 2.5em; height: 1.25em; padding: 0.25em; border-radius: 50px; cursor: pointer; transition: 0.3s; background: var(--kbrana-white); } .switch-dimensions label::after { content: ""; display: inherit; width: 0.75em; height: 0.75em; border-radius: 20px; background: var(--kbrana-green); transition: 0.3s; } .switch-dimensions input:checked ~ label { background: var(--kbrana-green); } .switch-dimensions input:checked ~ label::after { translate: 1.25em 0; background: var(--kbrana-white); } .dimensions-holder { position: absolute; left: 30px; top: 30px; display: flex; gap: 8px; } .dimensions-holder .caption-dimensions { background: var(--kbrana-white); border-radius: 24px; padding: 0.25em 0.75em; font-size: 0.75em; line-height: 1em; display: flex; align-items: center; } .timeline-holder { display: flex; gap: 32px; } .timeline-item { width: calc(20% - 26px); } .timeline-circle { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 100%; } .timeline-circle .text-lg { max-width: 3em; text-align: center; line-height: 1em; } .timeline-text { max-width: 10em; text-align: center; } .timeline-item { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-direction: column; } /* DELETE START - REVIEW CANDIDATE: old locality map markers */ .map-lokalita-img { background: #F4F0E7; height: auto; min-height: unset; } .map-item { position: absolute; opacity: 0; visibility: hidden; transition: all .3s ease; } .map-item.active { opacity: 1; visibility: visible; } .map-icon { width: 19px; height: 19px; } .map-item .map-icon { position: relative; left: -9px; top: -9px; max-width: unset; } .map-tooltip { transform: unset; min-width: 160px; width: max-content; padding: 16px 22px 20px 14px; top: -2px; left: -2px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 99; } .map-tooltip.active { opacity: 1; visibility: visible; } .map-tooltip-icon { height: 18px; width: 18px; } .map-tooltip .tooltip-row { justify-content: flex-start; gap: 6px; flex-wrap: wrap; } .map-tooltip .tooltip-row:first-of-type { padding-left: 16px; } .tooltip-info.map-tooltip .tooltip-title { margin-bottom: 12px; } .switch-holder { position: absolute; left: 30px; top: 30px; background: var(--kbrana-white); padding: 19px 22px 16px 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; } .switch-holder .switch-dimensions label { background: var(--kbrana-cream); } .switch-line { display: flex; gap: 8px; align-items: center; } .map-item.on-top { z-index: 50; } /* DELETE END - REVIEW CANDIDATE: old locality map markers */ .ponuka-bytov { position: relative; z-index: 9; } .ponuka-bytov-intro { position: relative; z-index: 10; } .ponuka-bytov-icon-item { display: flex; align-items: center; gap: var(--fluid-20); } .ponuka-bytov-icon { width: var(--fluid-56); height: var(--fluid-56); object-fit: contain; flex: 0 0 var(--fluid-56); } .current-floor-filter { display: inline-flex; align-items: center; min-height: calc(2 * (var(--fluid-16) + var(--fluid-24))); } .current-floor-filter p { display: inline-flex; padding: var(--fluid-8) var(--fluid-40); border-radius: 999px; background-color: var(--kbrana-cream); color: var(--kbrana-black); height: var(--fluid-48); font-size: var(--fluid-32); border: 0; font-weight: 500; line-height: 1; } .news-animation-holder { display: block; width: 5em; height: 5em; position: relative; aspect-ratio: 1; } .news-holder { z-index: 99; position: relative; padding-top: calc(48px + 2.5em); display: flex; gap: 0.5em; align-items: stretch; justify-content: space-between; } .news-animation { position: absolute; left: 0; right: 0; height: auto; top: 0.9em; bottom: 0.9em; z-index: 10; } .news-item { width: calc(25% - 29.25px); padding: 0.5em 1.4em; background: rgba(231, 229, 218, 0.7); } .cta-phone-holder { position: fixed; bottom: 12px; right: 48px; z-index: 999; } .cta-phone { max-width: 10.5em; padding: 1em 2.5em 1em 1.25em; visibility: hidden; opacity: 0; transition: all .3s ease; } .cta-phone.show { visibility: visible; opacity: 1; } .cta-phone a { text-decoration: none; } .header-left-col { position: relative; align-content: start; } .kbrana-logo { transition: all .5s ease; } .kbrana-logo-dark { display: none; } .mob-select-floor { display: none !important; } .mob-select-floor_:after { content: ""; display: inline-block; width: 12px; height: 12px; background-image: url('assets/img/kb-triangle-top-white.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: 5px; transition: filter 0.2s ease; } .mob-select-floor_:hover:after { filter: invert(1); } .colh-content-holder { z-index: 1; } .fs-popup { position: fixed; bottom: -100%; left: 12px; width: calc(100vw - 24px); background: var(--kbrana-cream-light); padding-top: 0; z-index: 100000; text-align: left; border-radius: 16px 16px 0 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease; } .fs-popup.active { opacity: 1; visibility: visible; bottom: 0; } .floors { position: relative; display: flex; justify-content: flex-start; flex-direction: column; align-items: stretch; } a.popup-floor { text-decoration: none; line-height: 1em; color: var(--kbrana-black); padding: 14px 0; position: relative; border-bottom: 1px solid var(--kbrana-black); width: 100%; text-align: center; transition: all .3s ease; } a.popup-floor:hover { background-color: rgba(221, 172, 139, 0.8) !important; } .popup-black-line { display: block; width: 120px; padding-top: 24px; padding-bottom: 32px; margin: auto; } .popup-black-line .line { display: block; border-top: 1px solid var(--kbrana-black); width: 120px; } .fs-popup-content { padding: 0 24px 24px; max-height: calc(100dvh - 80px); overflow: auto; } .fs-popup-row { display: flex; justify-content: space-between; padding: 0 0 6px; } .fs-popup-title { position: relative; padding-left: 24px; } .fs-popup-title:before { content: ""; display: inline-block; width: 10px; height: 10px; background-color: var(--kbrana-accent); border-radius: 10px; position: absolute; left: 4px; top: 10px; } .flat-select-popup .fs-popup-title:before { display: none; } .flat-select-popup .fs-popup-title { padding-left: 0; } .flat-select-popup .fs-popup-plan { padding: 20px; background: var(--kbrana-cream); border-radius: 20px; margin: 0 -12px 32px -12px; width: auto; } .flat-select-popup .fs-popup-plan img { display: block; width: 100%; height: auto; max-height: 30vh; object-fit: contain; aspect-ratio: 1; } .flat-select-popup .fs-popup-label { font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .flat-select-popup .fs-popup-value { font-size: var(--fluid-20); line-height: 1; font-weight: 500; } .flat-select-popup .tooltip-flat-status, .flat-select-popup .tooltip-flat-area { width: fit-content; min-height: var(--fluid-36); padding: 0 var(--fluid-20); flex: 0 0 auto; display: inline-flex; } .flat-select-popup .tooltip-flat-rooms { width: var(--fluid-36); height: var(--fluid-36); flex: 0 0 var(--fluid-36); padding: 0; border-radius: 50%; text-align: center; } .flat-select-popup .tooltip-flat-price { font-size: var(--fluid-28); } .vyber-poschodia-sm .poschodieImage { z-index: 0; } .room-count { display: block; width: 1.5em; height: 1.5em; border-radius: 40px; line-height: 1.5em; text-align: center; color: var(--kbrana-white); } .room-bg-1 { background-color: var(--kbrana-cream); color: var(--kbrana-black); } .room-bg-2 { background-color: var(--kbrana-accent); color: var(--kbrana-black); } .room-bg-3 { background-color: var(--kbrana-accent); } .room-bg-4 { background-color: var(--kbrana-green); } .room-bg-5 { background-color: var(--kbrana-cream-card); } .column-container { height: 100%; display: flex; flex-direction: column; } .filter-switch-holder { display: flex; gap: 16px; flex-wrap: wrap; height: 100%; } .filter-switch-holder .switch-item { display: flex; gap: var(--fluid-32); align-items: center; transition: all .3s ease; } .filter-switch-holder.pocet-izieb .switch-item { width: calc(20% - 15px); } .room-filter-buttons { display: flex; align-items: center; gap: var(--fluid-12); min-height: calc(2 * (var(--fluid-16) + var(--fluid-24))); } .room-filter-btn { width: var(--fluid-48); height: var(--fluid-48); font-size: var(--fluid-24); display: block; border: 0; border-radius: 999px; background-color: var(--kbrana-cream); color: var(--kbrana-black); font-weight: 500; line-height: 1; cursor: pointer; padding-bottom: 0.2em; transition: background-color .3s ease, color .3s ease, opacity .3s ease; } .room-filter-btn.active { background-color: var(--kbrana-green); color: var(--kbrana-white); } .room-filter-btn.disable, .room-filter-btn:disabled { cursor: not-allowed; opacity: 0.35; } .filter-extended-options { gap: var(--fluid-64); } .filter-controls { gap: var(--fluid-64); } .table-reset-filter img { width: 100%; height: 100%; } .table-reset-filter { height: var(--fluid-32); width: var(--fluid-32); border-radius: 8px; border: 2px solid #E7E5DA; display: block; text-decoration: none; color: var(--kbrana-black); } .status-reset-holder { gap: 25px; align-items: center; } .table-reset-filter:hover { background-color: #E7E5DA; } .show-extended-filter { color: var(--kbrana-black); text-decoration: none; opacity: 0.5; } .show-extended-filter::after { content: ""; width: 0.6em; height: 0.6em; background-image: url(assets/img/kb-triangle.svg); background-size: contain; background-repeat: no-repeat; transition: all .3s ease; display: inline-block; margin-left: 0.5em; position: relative; } .show-extended-filter.active::after { transform: rotate(-180deg); transform-origin: center; } .extended-filter { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; } .extended-filter.open { max-height: 250px; } .orientation { position: absolute; bottom: var(--fluid-16); right: var(--fluid-16); z-index: 8; } .orientation-img { width: var(--fluid-80); height: var(--fluid-96); } .views { position: absolute; text-align: center; } .view-top { top: 30px; right: 50%; transform: translateX(50%); } .view-bottom { bottom: 30px; right: 50%; transform: translateX(50%); } .view-left { left: 30px; top: calc(50% - 8px); } .view-right { right: 30px; top: calc(50% - 8px); } .view-left p { transform: translateX(calc(-50% + 8px)) rotate(-90deg); transform-origin: center center; white-space: nowrap; } .view-right p { transform: translateX(calc(50% - 8px)) rotate(90deg); transform-origin: center center; white-space: nowrap; } .fs-image-holder { position: static; } .switch-item.disable { opacity: 0.5; pointer-events: none; } .custom-select__option.disable { display: none; } .open-cta-phone { display: none; } .close-popup-btn { position: absolute; right: var(--fluid-16); top: var(--fluid-16); width: var(--fluid-32); height: var(--fluid-32); display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--kbrana-white); color: var(--kbrana-accent); box-shadow: unset; opacity: 1; transition: background .25s ease, color .25s ease, opacity .25s ease; } .close-popup-btn:hover { color: var(--kbrana-dark-green); opacity: 1; } .close-popup-btn-icon { display: none; } .close-popup-btn::before { content: ""; width: var(--fluid-24); height: var(--fluid-24); display: block; background-color: currentColor; mask-image: url(assets/img/kb-close.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: url(assets/img/kb-close.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .full-w-img-animation img { height: 100%; width: auto; margin: auto; } .vyber-poschodia-sm .relative { z-index: 99; } .postid-1867 .fs-image-holder .svgOverlay { left: -0.3% !important; } .postid-1864 .fs-image-holder .svgOverlay { left: 0.3% !important; } .postid-1863 .fs-image-holder .svgOverlay { left: 0.2% !important; } .postid-1858 .fs-image-holder .svgOverlay { top: 0.2% !important; } .kbrana-logo img { width: auto; height: var(--fluid-72); } .scrolled .kbrana-logo img { height: var(--fluid-56); } .scrolled .kbrana-logo.has-dark-logo .kbrana-logo-light, .header-dark-logo .kbrana-logo.has-dark-logo .kbrana-logo-light { display: none; } .scrolled .kbrana-logo.has-dark-logo .kbrana-logo-dark, .header-dark-logo .kbrana-logo.has-dark-logo .kbrana-logo-dark { display: block; } .flat-img img { max-height: calc(100vh - 350px); margin: auto; } .news-animation img { max-height: 100%; margin: auto; } .flat-img { overflow: hidden; } /* DELETE START - REVIEW CANDIDATE: old about/project column blocks */ .three-column-holder { position: relative; display: flex; gap: 24px; } .column-hover { height: calc(100dvh - 100px); min-height: 500px; display: flex; flex-direction: column; justify-content: space-between; position: relative; width: calc(33.33% - 16px ); } .column-hover .col-bg-img { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; opacity: 0; transition: all .5s ease-in-out; } .column-hover .col-bg-img img { width: 100%; height: 100%; object-fit: cover; } .column-hover .text-lg, .column-hover .text-md { z-index: 1; transition: all .5s ease-in-out; } .column-hover.load-bg-image .text-lg, .column-hover.load-bg-image .text-md { color: var(--kbrana-white); } .column-hover.load-bg-image .col-bg-img { opacity: 1; } .page-template-about-project .hero-section::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4) 85%); } .page-template-about-project .hero-row { width: 80%; margin-right: auto !important; } .town-culture .card { justify-content: flex-start; } .column-hover .col-bg-img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 80%); } .column-hover.bg-kbrana-accent .text-lg, .column-hover.bg-kbrana-accent .text-md { color: var(--kbrana-white); } .kbrana-numbers { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(75px, 7vw, 110px); grid-auto-flow: row dense; } .col-middle { grid-column: 3 / span 2; } .col-left { grid-column: 1 / span 2; } .kbrana-numbers .card { justify-content: flex-start; } /* DELETE END - REVIEW CANDIDATE: old about/project column blocks */ .mar-col-news-img { margin: -36px 0 -36px 0; position: relative; } .mar-col-news-img img.news-img { height: 100%; position: absolute; object-fit: cover; margin-right: -12px; display: block; max-width: calc(100% + 12px); border-radius: 0 16px 16px 0; transform: translateZ(0); backface-visibility: hidden; } a.black-link { color: var(--kbrana-black); } a.black-link:hover { color: var(--kbrana-accent); } .news-icon-link { position: absolute; top: 30px; right: 30px; height: 40px; width: 40px; background: var(--kbrana-white); padding: 9px; border-radius: 40px; } .news-icon-link:hover { background: var(--kbrana-grey); } .news-icon-link img { width: 100%; object-fit: contain; } [data-cky-tag="powered-by"] { display: none !important; } .flat-image-holder .caption-dimensions { cursor: pointer; } .flat-img img { cursor: pointer; } .single-byty img.lg-object.lg-image { background-color: var(--kbrana-cream); border-radius: 10px; } .lokalita-map-holder .content-img { max-height: unset; } .otgs-development-site-front-end { display: none !important; } .lang-en .cta-phone { max-width: 12.5em; } .cta-phone a { display: block; } .dev-maps { width: 100%; height: auto; } .lang-en .card.bg-kbrana-accent .card-grid-inner img { max-height: clamp(130px, 10vh, 200px); } .floor-selection .floor-selection-wrapper .svgOverlay polygon { fill: rgba(19, 72, 61, 0.3) !important; } .m-flat-status { padding: 0.1em 0.8em; border-radius: 25px; position: relative; top: -0.1em; } .m-flat-status.available { border: 1px solid black; } .m-flat-status.sold { background: var(--kbrana-green); color: var(--kbrana-white); } .m-flat-status.reserved { background: var(--kbrana-cream-card); } .m-flat-status.pre-reserved { background: var(--kbrana-accent); color: var(--kbrana-white); } .m-flat-status::first-letter { text-transform: uppercase; } .parallax { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; display: flex; align-items: center; justify-content: center; overflow: hidden; } .reveal-text { opacity: 0; } .reveal-text.reveal { opacity: 1; } .reveal-text .char { opacity: 0; animation: fadeIn .7s ease forwards; } .progress-line-holder { width: 0; height: 3px; position: absolute; overflow: hidden; left: 0; top: 0; z-index: 99; } .progress-line-holder .progress-line { width: 100vw; height: 100%; background: var(--kbrana-accent); position: relative; } .par-img-holder { display: block; overflow: hidden; } .parallax-img { height: calc(100% + 200px); width: 100%; object-fit: cover; } .hero-section { overflow: hidden; } .zoom-on-scroll { transform: scale(1); } .scrolled #main-menu a, .header-dark-logo #main-menu a { color: var(--kbrana-black); } .scrolled #main-menu a:hover , .header-dark-logo #main-menu a:hover { color: var(--kbrana-accent); } .gdpr-content a { color: var(--kbrana-black); } .gdpr-content a:hover { color: var(--kbrana-accent); } .gdpr-content table { font-family: "Darker Grotesque", sans-serif; font-weight: 400; } .gdpr-content strong { font-weight: 600; } #forminator-module-463 #html-1 { margin: 0; padding: 0; } #forminator-module-463 .forminator-row-last { position: relative; } .forminator-field p.forminator-consent-text { font-size: 0.75em !important; line-height: 1.2em !important; margin-bottom: 0; } .forminator-field p.forminator-consent-text a { color: var(--kbrana-white); } .forminator-field p.forminator-consent-text a:hover { color: var(--kbrana-grey); } .forminator-custom-form { position: relative; } .forminator-custom-form #html-1 { position: absolute; left: 7.5rem; bottom: 0.3rem; max-width: 22rem; z-index: 999; } div#consent-1 { z-index: 99; } .lang-en .forminator-custom-form #html-1 { left: 6.2rem; } .header-left-col { overflow-x: clip; overflow-y: visible; } .kbrana-logo { display: block; width: fit-content; height: auto; align-content: center; } .header-left-col a, .header .right-side-btns, .header #main-menu { pointer-events: auto; } #consent-1 .forminator-consent__label { pointer-events: all; cursor: pointer; } .forminator-design--material .forminator-label[class*="forminator-floating-"].forminator-floating--input .forminator-required { color: var(--kbrana-cream-card) !important; } .forminator-design--material .forminator-is_active .forminator-label[class*="forminator-floating-"].forminator-floating--input .forminator-required { color: var(--kbrana-white) !important; } .mb0 { margin-bottom: 0; } .page-template-gdpr table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 16px; } .page-template-gdpr th, .page-template-gdpr td { padding: 12px 14px; border: 1px solid #e0e0e0; text-align: left; } .page-template-gdpr th { background-color: #f5f5f5; font-weight: 600; } .page-template-gdpr tr:nth-child(even) { background-color: #fafafa; } .page-template-gdpr tr:hover { background-color: #f0f0f0; } /* Optional: responsive scroll on small screens */ .page-template-gdpr .table-wrap { overflow-x: auto; } a.popup-floor.disabled { pointer-events: none; min-height: calc(1em + 21px); } polygon.com-terrace { cursor: default; } .com-terrace-caption { line-height: 1.3em; } /* ========================================================================== News Listing ========================================================================== */ /* NEWS - new css */ .news-page-item { border-bottom: 1px solid var(--kbrana-black); transition: all .3s ease; } .news-page-item:first-child { padding-top: 0 !important; } .news-page-item:last-child, .news-page-item:not(.is-hidden):not(:has(~ .news-page-item:not(.is-hidden))) { border-bottom: transparent !important; } .news-page-image-holder { width: 100%; aspect-ratio: 1.6 / 1; overflow: hidden; } .news-page-image { width: 100%; height: 100%; object-fit: cover; display: block; } .news-toggle-btn { margin-top: 16px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; } .is-hidden { display: none; } .min-h500 { min-height: 500px; } .is-hidden { display: none; } img.lg-object.lg-image { background-color: var(--kbrana-white); } .mar-col-news-img img.news-img { width: 100%; cursor: pointer; transition: all .3s ease; } .mar-col-news-img { overflow: hidden; transform: translateX(.75rem); border-top-right-radius: inherit; border-bottom-right-radius: inherit; padding: 0; } .mar-col-news-img:hover img.news-img { transform: scale(1.05); } .news-icon-link img { height: 100%; display: block; } .news-icon-link-fb { display: flex; align-content: center; align-items: center; text-decoration: none; justify-content: space-between; width: fit-content; min-width: 40px; overflow: hidden; transition: all .3s ease; } .news-icon-link-fb img { width: 22px; height: 22px; z-index: 1; } .news-icon-link-fb:before { content: ""; position: absolute; top: 1px; left: 1px; height: calc(100% - 2px); width: auto; aspect-ratio: 1; background-color: var(--kbrana-white); border-radius: 40px; z-index: 0; transition: all .3s ease; } .news-icon-link-fb .open-fb { font-size: 11px; color: var(--kbrana-black); width: fit-content; white-space: nowrap; max-width: 0; transition: all .3s ease; opacity: 0; } .news-icon-link-fb:hover .open-fb { max-width: 200px; opacity: 1; padding: 0 10px 0 20px; } .news-icon-link-fb:hover:before { background-color: var(--kbrana-black); } .news-icon-link-fb:hover img { filter: invert(1); } .news-icon-link-fb:hover { background-color: var(--kbrana-white); } .news-title-icon { display: inline; height: 1em; margin-right: 8px; } .news-icon-link.hp-news-icon-link { width: 24px; height: 24px; top: 8px; right: 8px; padding: 6px; } .padright-news-link { padding-right: 16px; } .mar-col-news-img img.news-img.show-full-img { position: relative; height: auto; min-height: 100%; } .news-overlay-link { position: absolute; inset: 0; z-index: 5; } .news-item { transition: all .3s ease; } .news-item:has(.news-overlay-link:hover) { background-color: var(--kbrana-accent); } .page .cky-prefrence-btn-wrapper .cky-btn { background: var(--kbrana-cream) !important; border-color: var(--kbrana-cream) !important; color: var(--kbrana-black) !important; } .page .cky-prefrence-btn-wrapper .cky-btn:hover { background-color: var(--kbrana-accent) !important; border-color: var(--kbrana-accent) !important; color: var(--kbrana-black) !important; } .page .cky-prefrence-btn-wrapper .cky-btn.cky-btn-accept { background: var(--kbrana-green) !important; border-color: var(--kbrana-green) !important; color: var(--kbrana-white) !important; } .page .cky-prefrence-btn-wrapper .cky-btn.cky-btn-accept:hover { background: var(--kbrana-accent) !important; border-color: var(--kbrana-accent) !important; color: var(--kbrana-green) !important; } .page .cky-switch input[type="checkbox"]:checked { background: var(--kbrana-black) !important; } .forminator-module-4114 .forminator-success { display: none !important; } .footer a:hover { color: var(--kbrana-accent) !important; } .black-line { border-top: 1px solid var(--kbrana-black); } /* ========================================================================== Single Flat Detail ========================================================================== */ .flat-detail-hero { background: var(--kbrana-white); } .flat-detail-stats { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; row-gap: 24px; } .flat-detail-stat { min-width: 140px; padding: 0 var(--fluid-48) 0 var(--fluid-24); border-left: 1px solid var(--kbrana-black); } .flat-plan-card, .flat-contact-card { min-height: clamp(560px, 52vw, 940px); } .flat-plan-card { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--fluid-88) var(--fluid-96) var(--fluid-104); } .flat-status-pill { position: absolute; top: var(--fluid-20); left: var(--fluid-24); min-width: 90px; padding: 3px 18px 5px; border-radius: 999px; background: var(--kbrana-green); color: var(--kbrana-white); font-size: var(--fluid-18); line-height: 1; text-align: center; } .flat-status-pill.reserved, .flat-status-pill.pre-reserved { background: #F4B86E; } .flat-status-pill.sold { background: #B8B8B8; } .flat-plan-media { width: 74%; max-width: 680px; } .flat-plan-media .flat-plan-image { display: block; width: 100%; height: auto; max-height: none; cursor: pointer; } .flat-download-btn { position: absolute; left: var(--fluid-24); bottom: var(--fluid-24); min-width: 190px; } .kb-btn-icon-down { display: inline-flex; align-items: center; justify-content: center; gap: var(--fluid-12); } .kb-btn-icon-down::after { content: ""; display: block; margin-top: var(--fluid-4); width: var(--fluid-8); height: var(--fluid-16); background-color: currentColor; mask-image: url('assets/img/kb-table-arrow.svg'); -webkit-mask-image: url('assets/img/kb-table-arrow.svg'); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .flat-contact-card { padding: var(--fluid-48) var(--fluid-32); color: var(--kbrana-black); } .flat-contact-broker { gap: var(--fluid-24); } .flat-contact-broker-photo { width: var(--fluid-88); height: var(--fluid-88); border-radius: 50%; object-fit: cover; } .flat-contact-broker-logo { width: 74px; height: auto; } .flat-contact-links { display: grid; gap: var(--fluid-12); } .flat-contact-link { display: inline-flex; align-items: center; gap: var(--fluid-14); color: var(--kbrana-black); text-decoration: none; } .flat-contact-link:hover { color: var(--kbrana-white); } .flat-contact-icon { width: var(--fluid-32); height: var(--fluid-32); border: 1px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .flat-contact-card .hp-contact-benefit p { font-size: var(--fluid-12); } .flat-tabs-nav { display: flex; justify-content: center; align-items: center; gap: var(--fluid-48); margin-bottom: var(--fluid-48); } .flat-tab-btn { appearance: none; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 0 0 var(--fluid-12); font: inherit; font-family: var(--kb-serif); color: var(--kbrana-black); cursor: pointer; transition: all .3s ease; } .flat-tab-btn.active { border-bottom-color: var(--kbrana-black); } .flat-tab-btn:not(.active):hover { color: var(--kbrana-accent); } .flat-tab-panel { display: none; } .flat-tab-panel.active { display: block; } .flat-standard-media { position: relative; width: 100%; overflow: hidden; } .flat-standard-image { display: block; width: 100%; height: auto; min-height: 460px; object-fit: cover; } .flat-standard-point { position: absolute; display: inline-flex; align-items: flex-start; gap: var(--fluid-10); padding: var(--fluid-10) var(--fluid-16) var(--fluid-10) var(--fluid-8); background: color-mix(in srgb, var(--kbrana-cream-light) 90%, transparent); color: var(--kbrana-black); font-size: var(--fluid-20); line-height: 1; white-space: nowrap; } .flat-standard-point .flat-standard-point-text { padding-bottom: 0.1em; margin-top: -0.1em; } .flat-standard-point::before { content: ""; width: var(--fluid-16); height: var(--fluid-20); flex: 0 0 var(--fluid-16); margin-left: var(--fluid-4); background: url("assets/img/kb-plus.svg") center / contain no-repeat; } .flat-standard-point span { display: none; } .page-hero-content { align-items: flex-end; } .page-hero-content .row { width: 100%; } .page-hero-title { text-align: left; } .page-flex-section { color: var(--kbrana-black); } .page-flex-media-holder { position: relative; width: 100%; overflow: hidden; } .page-flex-media { width: 100%; aspect-ratio: 8 / 5; display: block; object-fit: cover; } video.page-flex-media { height: auto; } .page-flex-media-wide { aspect-ratio: 17 / 7; } .page-media-point { z-index: 2; } .page-media-direction { position: absolute; display: inline-flex; align-items: center; gap: var(--fluid-12); padding: calc(var(--fluid-10) - .1em) var(--fluid-16) calc(var(--fluid-10) + .1em); background: var(--kbrana-cream-light); color: var(--kbrana-black); font-size: var(--fluid-20); line-height: 1; white-space: nowrap; } .page-media-direction-icon { width: var(--fluid-12); height: var(--fluid-20); flex: 0 0 var(--fluid-12); background-color: var(--kbrana-accent); mask-image: url("assets/img/direction.svg"); -webkit-mask-image: url("assets/img/direction.svg"); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; transform: rotate(var(--direction-rotate, 0deg)); transform-origin: center; } .page-media-direction strong { color: var(--kbrana-green); font-weight: 600; } .page-flex-overlap-holder { position: relative; width: 100%; padding-bottom: var(--fluid-160); } .page-flex-overlap-main { margin-left: auto; } .page-flex-overlap-small { position: absolute; width: 40%; left: -15%; bottom: 0; z-index: 2; } .page-flex-overlap-small .page-flex-media-holder { overflow: visible; } .page-flex-overlap-holder.is-small-right .page-flex-overlap-main { margin-left: 0; margin-right: auto; } .page-flex-overlap-holder.is-small-right .page-flex-overlap-small { left: auto; right: 0; } .page-flex-media-small { aspect-ratio: 3 / 2; } .page-flex-location + .page-flex-location-cards { padding-top: 0; } .flat-financing-item { border-left: 1px solid var(--kbrana-black); padding-left: var(--fluid-24); height: 100%; } .contact-page-title { max-width: 11em; } .contact-info-card { display: flex; flex-direction: column; gap: var(--fluid-48); } .contact-info-secondary { display: grid; gap: var(--fluid-48); margin-top: auto; } .contact-info-item { position: relative; padding-left: var(--fluid-20); border-left: 1px solid var(--kbrana-black); } .contact-info-value { display: block; color: var(--kbrana-black); text-decoration: none; } a.contact-info-value:hover { color: var(--kbrana-accent); } .contact-page-form-card { min-height: clamp(560px, 48vw, 840px); } .contact-page-form .forminator-row { margin-bottom: var(--fluid-16) !important; } .page-hero-section { align-items: flex-start; text-align: left; justify-content: end; } .marrightmin40 { margin-right: calc(-1 * var(--fluid-40)); } .marleftmin40 { margin-left: calc(-1 * var(--fluid-40)); } .page-flex-media-grid .page-flex-media { aspect-ratio: 8 / 9.5; } .page-flex-overlap-small .flat-standard-point { width: 18em; white-space: normal; } .show-all-btn .table-total-count { padding-inline: var(--fluid-6); } .hp-intro-arrow { height: var(--fluid-80); width: auto; margin: 0 auto; } .mob-menu-line { height: 36px; width: 1px; background: var(--kbrana-black); flex: 0 0 36px; } .tooltip-value-info { display: none; } .tooltip-stat-row.preparing .tooltip-value { display: none; } .kbrana-google-map .gm-style-moc { background-color: rgba(0, 0, 0, 0.2) !important; } *_ { border: 0.1px solid red; } .gdpr-container { max-width: 1200px; } .gdpr-content h2, .gdpr-content h3, .gdpr-content h4, .gdpr-content h5, .gdpr-content h6 { font-family: var(--kb-serif); word-spacing: -0.26em; } .gdpr-content h2 { margin-top: 1em; } .cky-revisit-hide { display: block !important; }