/* * Hotel-specific footer. Reuses the --hs-color-* tokens hotel_suite_print_ * design_tokens() prints in (Hotel Suite Settings > Brand, with the * per-hotel accent-color override from Phase "header per hotel" applying * here too), so it stays on-brand without any footer-only settings. */ .hf-main-footer{ display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; padding-top: 40px; padding-bottom: 40px; } .hf-main-footer > div{ flex: 1; } .hf-bottom-col{ display: flex; flex-direction: column; } .hf-footer { background: var( --hs-color-secondary, #1b211d ); color: #d8d8d3; font-size: 14px; } .hf-footer a { color: inherit; } .hf-heading { font-family: var( --hs-font-heading, inherit ); font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 20px; } /* Icons — same mask-icon technique as the site footer's .hs-icon-*. */ .hf-icon { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var( --hf-icon-svg ) center / contain no-repeat; mask: var( --hf-icon-svg ) center / contain no-repeat; } .hf-icon-pin { --hf-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.4 6.8 11.5 7.1 11.7a1.4 1.4 0 0 0 1.8 0C13.2 21.5 20 15.4 20 10c0-4.4-3.6-8-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E"); } .hf-icon-clock { --hf-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.75-13h-1.5v6.4l4.8 2.9.75-1.3-4.05-2.4Z'/%3E%3C/svg%3E"); } /* Phone/email spans reuse the site footer's .hs-icon-* classes, but those define the SVG under --hs-icon-svg while .hf-icon masks from --hf-icon-svg. Provide the value under --hf-icon-svg too so they render in this footer. */ .hf-icon.hs-icon-phone { --hf-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1a1 1 0 0 0-1 1v1c0 7 5.5 12.5 12.5 12.5h1a1 1 0 0 0 1-1v-2.2a1 1 0 0 0-.8-1L13 10a1 1 0 0 0-1 .3l-.9.9a9 9 0 0 1-4.3-4.3l.9-.9A1 1 0 0 0 8 5L6.7 1.8a1 1 0 0 0-1-.8Z'/%3E%3C/svg%3E"); } .hf-icon.hs-icon-email { --hf-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm0 1v.2l7 4.4 7-4.4V4H1Zm14 1.8-6.5 4.1a1 1 0 0 1-1 0L1 5.8V12h14V5.8Z'/%3E%3C/svg%3E"); } /* Top bar: social icons + address / reception phone / email / hours */ .hf-topbar { display: flex; flex-wrap: wrap; align-items: center; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba( 255, 255, 255, 0.1 ); margin: 0 auto; justify-content: space-between; } .hf-social { display: flex; gap: 12px; flex: none; } .hf-social-link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba( 255, 255, 255, 0.35 ); color: #fff; transition: border-color 0.2s ease, color 0.2s ease; } .hf-social-link:hover { border-color: var( --hs-color-primary, #a8875e ); color: var( --hs-color-primary, #a8875e ); } .hf-topbar-item { display: flex; align-items: flex-start; gap: 10px; } .hf-topbar-text { display: flex; flex-direction: column; gap: 2px; } .hf-topbar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #a3a39c; } .hf-directions-link { display: inline-flex; color: #a3a39c; } .hf-directions-link:hover { color: var( --hs-color-primary, #a8875e ); } .hf-topbar-value { font-size: 14px; color: #fff; } /* Middle: contact form placeholder + map */ .hf-middle { display: grid; grid-template-columns: minmax( 280px, 1fr ) minmax( 320px, 1.2fr ); gap: 40px; padding: 48px 32px; } .hf-contact-form { min-height: 40px; max-width: 460px; } /* "Свържете се с нас" form — dark, underline-style inputs. */ .hf-field { margin-bottom: 22px; } .hf-field label { display: block; font-size: 13px; color: #a3a39c; margin-bottom: 6px; } .hf-field input, .hf-field textarea { width: 100%; border: none; border-bottom: 1px solid rgba( 255, 255, 255, 0.25 ); border-radius: 0; background: transparent; color: #fff; font-family: inherit; font-size: 15px; padding: 8px 0; } .hf-field input:focus, .hf-field textarea:focus { outline: none; border-bottom-color: var( --hs-color-primary, #a8875e ); } .hf-field textarea { resize: vertical; } .hf-consent { margin: 6px 0 24px; font-size: 13px; color: #a3a39c; } .hf-consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .hf-consent input { margin-top: 3px; flex: none; width: auto; } .hf-consent a { color: var( --hs-color-primary, #a8875e ); text-decoration: underline; } .hf-form-submit { background: transparent; color: #fff; border: 1px solid rgba( 255, 255, 255, 0.5 ); border-radius: 2px; padding: 14px 34px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .hf-form-submit:hover { background: var( --hs-color-primary, #a8875e ); border-color: var( --hs-color-primary, #a8875e ); color: #fff; } .hf-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hf-form-notice { padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; } .hf-form-notice--ok { background: rgba( 76, 175, 121, 0.15 ); color: #9fe0b8; } .hf-form-notice--err { background: rgba( 200, 70, 70, 0.15 ); color: #f0a9a9; } .hf-map { position: relative; overflow: hidden; border-radius: 8px; min-height: 280px; } .hf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Bottom: hotel section menu + reservations contact block */ .hf-bottom { display: grid; grid-template-columns: minmax( 240px, 1fr ) minmax( 240px, 1fr ); gap: 40px; padding: 0 32px 48px; border-top: 1px solid rgba( 255, 255, 255, 0.1 ); padding-top: 40px; } .hf-hotel-name { letter-spacing: 0.02em; } .hf-hotel-menu .hotel-main-menu__inner { flex-direction: column; align-items: flex-start; gap: 0px; } /* main-menu.php's own