/* BEDŘIŠKA FULLSCREEN NAVIGATION 1.5.0 * Elementor-safe: never changes the Elementor header/container layout. * The fullscreen overlay is portaled to by JS. */ .elementor-widget-bedriska_fullscreen_nav > .elementor-widget-container{ min-height:0!important; } .bedriska-nav{ width:100%; max-width:100%; min-width:0; margin:0; padding:0; position:relative; } /* * BEDŘIŠKA FULLSCREEN NAVIGATION 1.1 * ------------------------------------------------------------ * ZÁKLADNÍ LADĚNÍ: většinu hodnot lze měnit přímo v Elementoru. * Níže jsou zároveň CSS proměnné pro rychlé ruční doladění. */ :root.bedriska-nav-lock, :root.bedriska-nav-lock body { overflow: hidden !important; } /* ============================================================ 01 / DESIGN TOKENS ============================================================ */ .bedriska-nav { --bn-bg: #0b0c0c; --bn-text: #f3f3ef; --bn-muted: #b8b8b1; --bn-accent: #b9d719; --bn-submenu-hover: #b9d719; --bn-line: rgba(255,255,255,.12); --bn-left: 30%; --bn-photo: 34%; --bn-logo-width: 210px; --bn-menu-size: 32px; --bn-menu-gap: 24px; --bn-menu-letter: .4px; --bn-detail-title-size: 62px; --bn-detail-title-letter: .8px; --bn-intro-size: 20px; --bn-intro-letter: 0px; --bn-submenu-size: 23px; --bn-submenu-letter: .8px; --bn-submenu-line: 1.15; --bn-submenu-pad-y: 18px; --bn-utility-size: 16px; --bn-utility-letter: .5px; --bn-lang-size: 15px; --bn-lang-letter: 0px; --bn-contact-label-size: 14px; --bn-contact-phone-size: 18px; --bn-booking-size: 17px; --bn-booking-letter: .6px; --bn-shell-radius: 30px; --bn-modal-gap: 18px; --bn-photo-shade-height: 150px; --bn-photo-shade-opacity: .46; --bn-booking-radius: 999px; --bn-offer-radius: 18px; --bn-offer-width: 255px; --bn-offer-height: 205px; --bn-offer-title-size: 27px; --bn-booking-max-width: 330px; --bn-booking-bg: transparent; --bn-booking-color: #f3f3ef; --bn-booking-border: #b9d719; --bn-booking-hover-bg: #b9d719; --bn-booking-hover-color: #0d0f08; --bn-menu-pad-x: 54px; --bn-detail-pad-x: 58px; --bn-top-h: 110px; --bn-footer-h: 104px; font-family: "Dosis", Arial, sans-serif !important; color: var(--bn-text) !important; line-height: 1.2; box-sizing: border-box; } .bedriska-nav *, .bedriska-nav *::before, .bedriska-nav *::after { box-sizing: border-box; } /* Tvrdý reset proti stylům šablony / Elementoru. */ .bedriska-nav button, .bedriska-nav a, .bedriska-nav h1, .bedriska-nav h2, .bedriska-nav h3, .bedriska-nav p, .bedriska-nav small, .bedriska-nav strong, .bedriska-nav em, .bedriska-nav span { font-family: "Dosis", Arial, sans-serif !important; text-shadow: none !important; } .bedriska-nav button { appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; text-transform: none; } /* ============================================================ 02 / SPOUŠTĚČ ============================================================ */ .bedriska-trigger { display: inline-flex !important; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important; background: #fff !important; color: #111 !important; padding: 12px 19px !important; margin: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; position: relative !important; inset: auto !important; transform: none !important; float: none !important; flex: 0 0 auto !important; } .bedriska-trigger:hover, .bedriska-trigger:focus { background: #fff !important; color: #111 !important; } .bedriska-trigger-lines { width: 21px; display: grid; gap: 5px; } .bedriska-trigger-lines i { height: 1.5px; background: currentColor; display: block; } .bedriska-trigger-lines i:last-child { width: 14px; } /* ============================================================ 03 / FULLSCREEN OVERLAY ============================================================ */ .bedriska-nav-overlay { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 2147483000 !important; background: rgba(0,0,0,.76) !important; opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; padding: clamp(8px,1.2vw,22px) !important; margin: 0 !important; } .bedriska-nav-overlay.is-open { opacity: 1; visibility: visible; } .bedriska-nav-overlay[hidden] { display: none !important; } .bedriska-nav-shell { position: relative; isolation: isolate; width: 100%; height: 100%; max-width: none !important; max-height: none !important; background: var(--bn-bg) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: var(--bn-shell-radius) !important; overflow: hidden !important; box-shadow: 0 40px 120px rgba(0,0,0,.5) !important; display: grid; grid-template-rows: var(--bn-top-h) minmax(0,1fr) var(--bn-footer-h); } /* ============================================================ 04 / HORNÍ LIŠTA Logo je vždy přesně uprostřed. Zavírací tlačítko se JS umístí na stejné místo, kde je na stránce spouštěč menu. ============================================================ */ .bedriska-nav-top { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 0; padding: 18px 42px !important; background: var(--bn-bg) !important; border-bottom: 1px solid var(--bn-line); } .bedriska-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-width:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .bedriska-logo img { display:block !important; width:var(--bn-logo-width) !important; max-width:min(38vw,360px) !important; max-height:82px; height:auto !important; object-fit:contain; object-position:center; } .bedriska-langs { display:flex; align-items:center; gap:18px; margin:0 !important; padding:0 !important; position:relative; z-index:3; } .bedriska-langs a { color:var(--bn-text) !important; background:transparent !important; border:0 !important; font-size:var(--bn-lang-size) !important; font-weight:400 !important; line-height:1 !important; letter-spacing:var(--bn-lang-letter) !important; text-decoration:none !important; text-transform:lowercase !important; opacity:.76; padding:0 !important; margin:0 !important; } .bedriska-langs a.is-active { color:var(--bn-accent) !important; opacity:1; } .bedriska-close { --bn-close-size:44px; --bn-close-x:28px; --bn-close-y:28px; position:fixed !important; left:var(--bn-close-x) !important; top:var(--bn-close-y) !important; z-index:2147483100 !important; display:block !important; width:var(--bn-close-size) !important; height:var(--bn-close-size) !important; min-width:var(--bn-close-size) !important; padding:0 !important; margin:0 !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:999px !important; background:var(--bn-bg) !important; color:var(--bn-text) !important; cursor:pointer; } .bedriska-close:hover,.bedriska-close:focus { border-color:var(--bn-accent) !important; background:var(--bn-bg) !important; } .bedriska-close i { position:absolute; left:23%; right:23%; top:50%; height:1.5px; background:currentColor; transform-origin:center; } .bedriska-close i:first-child { transform:rotate(45deg); } .bedriska-close i:last-child { transform:rotate(-45deg); } /* ============================================================ 05 / HLAVNÍ TŘI SLOUPCE ============================================================ */ .bedriska-nav-main { min-height: 0; overflow: hidden; display: grid; grid-template-columns: var(--bn-left) minmax(0,calc(100% - var(--bn-left) - var(--bn-photo))) var(--bn-photo); border-bottom: 1px solid var(--bn-line); } /* LEVÝ SLOUPEC */ .bedriska-mainmenu { min-width: 0; min-height: 0; overflow: hidden; padding: clamp(22px,3vh,38px) var(--bn-menu-pad-x) clamp(18px,2.5vh,30px) !important; border-right: 1px solid var(--bn-line); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; } .bedriska-mainmenu > nav { display: grid !important; gap: clamp(13px,2.2vh,var(--bn-menu-gap)) !important; margin: 0 !important; padding: 0 !important; } .bedriska-main-item { appearance: none !important; display: block !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--bn-text) !important; font-size: var(--bn-menu-size) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: var(--bn-menu-letter) !important; text-align: left !important; white-space: normal; cursor: pointer; position: relative; transition: color .18s ease, transform .18s ease; } .bedriska-main-item:hover, .bedriska-main-item:focus { background: transparent !important; color: var(--bn-text) !important; } .bedriska-main-item.is-active, .bedriska-main-item.is-active:hover, .bedriska-main-item.is-active:focus { color: var(--bn-accent) !important; transform: translateX(12px); } .bedriska-main-item.is-active::before { content: ""; position: absolute; width: 34px; height: 2px; background: var(--bn-accent); left: -48px; top: 50%; } .bedriska-utility { display: grid; gap: 9px; padding-top: 18px; border-top: 1px solid var(--bn-line); } .bedriska-utility a { display: flex !important; align-items: center; justify-content: space-between; gap: 18px; max-width: 310px; color: var(--bn-accent) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; text-decoration: none !important; font-size: var(--bn-utility-size) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing:var(--bn-utility-letter) !important; } .bedriska-utility span { transition: transform .18s ease; } .bedriska-utility a:hover span { transform: translateX(4px); } /* STŘED */ .bedriska-details { min-width: 0; min-height: 0; overflow: hidden !important; scrollbar-width: none; padding: clamp(24px,3.5vh,46px) var(--bn-detail-pad-x) 28px !important; background: var(--bn-bg) !important; } .bedriska-detail { display:none; height:100%; min-height:0; overflow:hidden; align-content:start; grid-template-rows:auto auto auto; } .bedriska-detail.is-active { display:grid; } .bedriska-detail h2 { color: var(--bn-text) !important; background: transparent !important; font-size: var(--bn-detail-title-size) !important; font-weight: 400 !important; line-height: .98 !important; letter-spacing: var(--bn-detail-title-letter) !important; text-transform: uppercase !important; margin: 0 0 clamp(18px,2.5vh,26px) !important; padding: 0 !important; } .bedriska-detail h2::after { content:""; display:block; width:40px; height:2px; background:var(--bn-accent); margin-top:clamp(14px,2vh,20px); } .bedriska-detail > p { max-width: 580px; color: var(--bn-muted) !important; background: transparent !important; font-size: var(--bn-intro-size) !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: var(--bn-intro-letter) !important; margin: 0 0 clamp(20px,3vh,34px) !important; padding: 0 !important; } .bedriska-submenu { display:grid; min-height:0; align-self:start; } .bedriska-submenu a { display:flex !important; align-items:center; justify-content:space-between; gap:20px; color:var(--bn-text) !important; background:transparent !important; text-decoration:none !important; transition:color .18s ease; font-size:var(--bn-submenu-size) !important; font-weight:400 !important; line-height:var(--bn-submenu-line) !important; letter-spacing:var(--bn-submenu-letter) !important; padding:clamp(8px,1.6vh,var(--bn-submenu-pad-y)) 0 !important; margin:0 !important; border:0 !important; border-top:1px solid var(--bn-line) !important; border-radius:0 !important; } .bedriska-submenu a:last-child { border-bottom:1px solid var(--bn-line) !important; } .bedriska-submenu a:hover, .bedriska-submenu a:focus { color:var(--bn-submenu-hover) !important; } .bedriska-submenu a:hover span, .bedriska-submenu a:focus span { color:var(--bn-submenu-hover) !important; } .bedriska-submenu b { color:var(--bn-accent) !important; font-size:1.15em; font-weight:300 !important; transition:transform .18s ease; } .bedriska-submenu a:hover b { transform:translateX(5px); } .bedriska-simple-link { color:var(--bn-accent) !important; text-decoration:none !important; font-size:var(--bn-submenu-size) !important; } /* FOTO – vždy čistě oddělené, bez gradientu přes hlavní fotografii. */ .bedriska-visual { position:relative; min-width:0; min-height:0; overflow:hidden; background:#111 !important; } .bedriska-section-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center !important; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s linear, visibility .18s linear; } .bedriska-section-image.is-active { opacity:1; visibility:visible; } /* AKTUÁLNÍ NABÍDKA */ .bedriska-offers { position:absolute; right:clamp(18px,2vw,30px); bottom:clamp(18px,2vw,30px); width:min(var(--bn-offer-width),70%); height:var(--bn-offer-height); z-index:3; } .bedriska-offer { position:absolute !important; inset:0 !important; display:flex !important; flex-direction:column; justify-content:flex-end; padding:20px !important; margin:0 !important; border:1px solid var(--bn-accent) !important; border-radius:var(--bn-offer-radius) !important; color:#fff !important; text-decoration:none !important; /* Gradient je pouze uvnitř malé promo karty kvůli čitelnosti, nikdy přes hlavní foto. */ background:linear-gradient(rgba(7,7,7,.18),rgba(7,7,7,.88)),var(--offer-bg,none) center/cover no-repeat,rgba(8,8,8,.9) !important; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .28s ease,transform .28s ease,visibility .28s ease; } .bedriska-offer.is-active { opacity:1; visibility:visible; transform:none; } .bedriska-offer small { color:var(--bn-accent) !important; font-size:13px !important; letter-spacing:.06em; margin:0 0 7px !important; } .bedriska-offer strong { color:#fff !important; font-size:var(--bn-offer-title-size) !important; line-height:1.03 !important; font-weight:400 !important; } .bedriska-offer em { color:#ddd !important; font-size:13px !important; font-style:normal !important; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bedriska-offer > span { display:flex; justify-content:space-between; margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.22); font-size:14px !important; } .bedriska-offer b { color:var(--bn-accent) !important; font-weight:400 !important; } /* ============================================================ 06 / SPODNÍ KONTAKTY ============================================================ */ .bedriska-footer { min-height: 0; overflow: hidden; display:grid; grid-template-columns:1fr 1fr 1fr minmax(220px,.95fr); align-items:center; padding:12px 34px !important; background:var(--bn-bg) !important; } .bedriska-contact { min-width:0; padding:0 24px; border-right:1px solid var(--bn-line); } .bedriska-contact:first-child { padding-left:0; } .bedriska-contact small { display:block; color:var(--bn-accent) !important; font-size:var(--bn-contact-label-size) !important; font-weight:400 !important; line-height:1.1 !important; letter-spacing:.075em; margin:0 0 6px !important; } .bedriska-contact a { color:var(--bn-text) !important; background:transparent !important; text-decoration:none !important; transition:color .18s ease; font-size:var(--bn-contact-phone-size) !important; font-weight:400 !important; line-height:1.1 !important; white-space:nowrap; } .bedriska-booking { justify-self:end; width:min(100%,var(--bn-booking-max-width)); margin:0 0 0 30px !important; padding:13px 22px !important; border:1px solid var(--bn-accent) !important; border-radius:var(--bn-booking-radius) !important; background:transparent !important; color:var(--bn-text) !important; text-decoration:none !important; display:flex !important; align-items:center; justify-content:space-between; gap:20px; font-size:var(--bn-booking-size) !important; font-weight:500 !important; line-height:1 !important; letter-spacing:var(--bn-booking-letter) !important; transition:background .18s ease,color .18s ease; } .bedriska-booking:hover { background:var(--bn-accent) !important; color:#0d0f08 !important; } .bedriska-booking b { font-size:24px !important; font-weight:300 !important; color:inherit !important; } @media (min-width:1051px) and (max-height:820px) { .bedriska-nav { --bn-top-h:92px; --bn-footer-h:88px; } .bedriska-details { padding-top:22px !important; padding-bottom:18px !important; } .bedriska-detail h2 { margin-bottom:16px !important; } .bedriska-detail h2::after { margin-top:12px; } .bedriska-detail > p { margin-bottom:18px !important; line-height:1.38 !important; } .bedriska-submenu a { padding-top:9px !important; padding-bottom:9px !important; } } /* ============================================================ 07 / RESPONSIVE ============================================================ */ @media (max-width: 1280px) { .bedriska-nav { --bn-left:30%; --bn-photo:32%; --bn-menu-size:27px; --bn-detail-title-size:52px; --bn-submenu-size:20px; --bn-menu-pad-x:38px; --bn-detail-pad-x:40px; } .bedriska-main-item.is-active::before { left:-36px; width:25px; } .bedriska-footer { padding-left:26px !important; padding-right:26px !important; } .bedriska-contact { padding:0 18px; } } @media (max-width: 1050px) { .bedriska-nav { --bn-top-h:92px; --bn-footer-h:92px; } .bedriska-nav-main { grid-template-columns:42% 58%; } .bedriska-visual { display:none; } .bedriska-mainmenu { padding-left:34px !important; padding-right:30px !important; } .bedriska-footer { grid-template-columns:1fr 1fr minmax(220px,.9fr); } .bedriska-contact:nth-child(3) { display:none; } } @media (max-width: 720px) { .bedriska-nav { --bn-top-h:80px; --bn-footer-h:78px; } .bedriska-nav-overlay { padding:0 !important; } .bedriska-nav-shell { border-radius:0 !important; grid-template-rows:var(--bn-top-h) minmax(0,1fr) var(--bn-footer-h); } .bedriska-nav-top { padding:14px 20px !important; } .bedriska-logo img { max-width:145px !important; max-height:54px; } .bedriska-top-actions { gap:10px; } .bedriska-langs { gap:12px; } .bedriska-langs a { font-size:13px !important; } .bedriska-close { width:34px !important; height:34px !important; min-width:34px !important; } .bedriska-close i { top:16px; } .bedriska-nav-main { display:block; overflow:auto; } .bedriska-mainmenu { min-height:100%; border-right:0; padding:24px 26px !important; } .bedriska-mainmenu > nav { gap:18px !important; } .bedriska-main-item { font-size:25px !important; } .bedriska-main-item.is-active { transform:translateX(9px); } .bedriska-main-item.is-active::before { left:-25px; width:17px; } .bedriska-utility { margin-top:30px; } .bedriska-details { display:none; } .bedriska-footer { display:block; padding:12px 20px !important; } .bedriska-contact { display:none !important; } .bedriska-booking { width:100%; max-width:none; margin:0 !important; padding:14px 20px !important; font-size:16px !important; } } /* ============================================================ 08 / V1.6 EDITORIAL LAYOUT Bez samostatné horní lišty: logo patří k levému sloupci, jazyky plují vpravo nahoře a zavření zůstává na pozici triggeru. ============================================================ */ @media (min-width: 721px) { .bedriska-nav-shell { grid-template-rows: minmax(0,1fr) var(--bn-footer-h) !important; } .bedriska-nav-main { grid-row: 1; height: 100%; min-height: 0; } .bedriska-langs { position: absolute !important; top: clamp(30px,4.2vh,56px); right: clamp(34px,4vw,68px); z-index: 20; gap: clamp(12px,1.5vw,22px); } .bedriska-mainmenu { display: grid !important; grid-template-rows: auto 1fr auto; align-content: stretch; justify-content: stretch; gap: 0 !important; padding-top: clamp(28px,4.2vh,54px) !important; padding-bottom: clamp(22px,3vh,38px) !important; } .bedriska-logo { position: static !important; transform: none !important; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; min-height: clamp(94px,13vh,142px); margin: 0 !important; pointer-events: auto; } .bedriska-logo img { width: var(--bn-logo-width) !important; max-width: min(78%,360px) !important; max-height: clamp(72px,11vh,126px) !important; object-position: left top; } .bedriska-mainmenu > nav { align-self: start; margin-top: clamp(12px,1.8vh,24px) !important; } .bedriska-utility { align-self: end; margin-top: clamp(20px,3vh,38px); } .bedriska-details { padding-top: clamp(120px,14vh,168px) !important; } .bedriska-visual { margin-top: clamp(88px,10vh,118px); min-height: 0; } .bedriska-footer { grid-row: 2; } } @media (max-width: 720px) { .bedriska-nav-shell { grid-template-rows: minmax(0,1fr) var(--bn-footer-h) !important; } .bedriska-langs { position:absolute !important; top:22px; right:20px; z-index:20; } .bedriska-mainmenu { display:grid !important; grid-template-rows:auto auto auto; align-content:start; min-height:100%; padding-top:22px !important; } .bedriska-logo { position:static !important; transform:none !important; justify-content:flex-start; min-height:74px; margin:0 0 18px !important; } .bedriska-logo img { width:var(--bn-logo-width) !important; max-width:150px !important; max-height:62px !important; object-position:left center; } } /* ============================================================ 09 / V1.7 REFERENCE-MATCHED DESKTOP COMPOSITION Cíl: proporce podle schváleného vizuálu, ne klasické mega-menu. ============================================================ */ .bedriska-nav { --bn-left: 27%; --bn-photo: 41%; --bn-logo-width: 285px; --bn-menu-pad-x: 64px; --bn-detail-pad-x: 60px; --bn-detail-title-size: 54px; --bn-submenu-top-gap: 54px; } @media (min-width: 1051px) { .bedriska-nav-main { grid-template-columns: var(--bn-left) minmax(0,calc(100% - var(--bn-left) - var(--bn-photo))) var(--bn-photo) !important; } .bedriska-mainmenu { grid-template-rows: auto auto 1fr auto !important; padding: clamp(38px,5.2vh,62px) var(--bn-menu-pad-x) clamp(28px,3.8vh,44px) !important; } .bedriska-logo { min-height: clamp(122px,15vh,170px) !important; margin: 0 !important; } .bedriska-logo img { width: var(--bn-logo-width) !important; max-width: min(86%,420px) !important; max-height: clamp(104px,13vh,148px) !important; } .bedriska-mainmenu > nav { margin-top: clamp(10px,1.5vh,18px) !important; gap: clamp(18px,2.45vh,var(--bn-menu-gap)) !important; } .bedriska-utility { align-self: end; margin-top: clamp(28px,4vh,48px) !important; padding-top: clamp(18px,2.4vh,26px) !important; } .bedriska-details { padding: clamp(140px,17vh,188px) var(--bn-detail-pad-x) 30px !important; } .bedriska-detail { grid-template-rows: auto auto auto !important; align-content: start !important; } .bedriska-detail h2 { font-size: var(--bn-detail-title-size) !important; margin-bottom: clamp(20px,2.7vh,30px) !important; } .bedriska-detail > p { margin-bottom: 0 !important; max-width: 500px; } .bedriska-submenu { margin-top: var(--bn-submenu-top-gap) !important; align-self: start !important; } .bedriska-visual { margin-top: clamp(88px,10.8vh,118px) !important; } .bedriska-langs { top: clamp(32px,4.6vh,52px) !important; right: clamp(42px,4vw,64px) !important; } /* Close remains where the trigger lives, but never sits over the logo. */ .bedriska-close { background: rgba(11,12,12,.96) !important; box-shadow: 0 0 0 7px rgba(11,12,12,.92) !important; } .bedriska-footer { grid-template-columns: 1fr 1fr 1fr minmax(250px,.9fr) !important; padding: 14px clamp(38px,4vw,64px) !important; } .bedriska-contact { padding: 0 clamp(24px,2.4vw,38px) !important; } .bedriska-contact:first-child { padding-left: 0 !important; } .bedriska-booking { max-width: 305px; } } /* Short desktops: preserve the reference proportions instead of collapsing the composition. */ @media (min-width:1051px) and (max-height:900px) { .bedriska-mainmenu { padding-top: 30px !important; padding-bottom: 24px !important; } .bedriska-logo { min-height: 110px !important; } .bedriska-logo img { max-height: 98px !important; } .bedriska-mainmenu > nav { gap: 14px !important; } .bedriska-details { padding-top: 118px !important; padding-bottom: 20px !important; } .bedriska-detail h2 { margin-bottom: 18px !important; } .bedriska-detail > p { line-height: 1.42 !important; } .bedriska-submenu { margin-top: min(var(--bn-submenu-top-gap),42px) !important; } .bedriska-submenu a { padding-top: 9px !important; padding-bottom: 9px !important; } .bedriska-visual { margin-top: 104px !important; } } /* ============================================================ 10 / V1.8 – EXACT REFERENCE COMPOSITION Druhý uživatelský screenshot je zdroj proporcí: 27.5 % menu / 33 % editorial detail / 39.5 % fotografie. Fullscreen bez vnějšího rámečku; obraz začíná pod jazyky. ============================================================ */ .bedriska-nav { --bn-left: 27.5%; --bn-photo: 39.5%; --bn-logo-width: 245px; --bn-menu-pad-x: 62px; --bn-detail-pad-x: 58px; --bn-menu-size: 34px; --bn-detail-title-size: 60px; --bn-intro-size: 19px; --bn-submenu-size: 21px; --bn-footer-h: 112px; --bn-shell-radius: 0px; } @media (min-width:1051px) { .bedriska-nav-overlay { padding: 0 !important; background: var(--bn-bg) !important; } .bedriska-nav-shell { border: 0 !important; border-radius: var(--bn-shell-radius) !important; box-shadow: none !important; grid-template-rows: minmax(0,1fr) var(--bn-footer-h) !important; } .bedriska-nav-main { grid-template-columns: var(--bn-left) minmax(0,calc(100% - var(--bn-left) - var(--bn-photo))) var(--bn-photo) !important; border-bottom: 1px solid var(--bn-line) !important; } /* LEFT / logo + main nav + utility */ .bedriska-mainmenu { display:grid !important; grid-template-rows:auto auto 1fr auto !important; padding: clamp(38px,4.6vh,52px) var(--bn-menu-pad-x) clamp(28px,3.2vh,38px) !important; gap:0 !important; } .bedriska-logo { position:static !important; transform:none !important; justify-content:flex-start !important; align-items:flex-start !important; min-height: clamp(128px,15vh,160px) !important; width:100% !important; } .bedriska-logo img { width:var(--bn-logo-width) !important; max-width:min(82%,320px) !important; max-height:132px !important; object-position:left top !important; } .bedriska-mainmenu > nav { align-self:start !important; margin-top:clamp(34px,4.5vh,52px) !important; gap:clamp(18px,2.35vh,var(--bn-menu-gap)) !important; } .bedriska-main-item { font-size:var(--bn-menu-size) !important; line-height:1.06 !important; } .bedriska-main-item.is-active { transform:translateX(12px) !important; } .bedriska-main-item.is-active::before { left:-50px !important; width:34px !important; } .bedriska-utility { align-self:end !important; width:100% !important; max-width:100% !important; margin-top:clamp(26px,3vh,40px) !important; } .bedriska-utility a { max-width:100% !important; } /* MIDDLE / large editorial heading */ .bedriska-details { padding: clamp(165px,20.5vh,220px) var(--bn-detail-pad-x) 28px !important; overflow:hidden !important; } .bedriska-detail { height:auto !important; align-content:start !important; grid-template-rows:auto auto auto !important; } .bedriska-detail h2 { font-size:var(--bn-detail-title-size) !important; line-height:.98 !important; margin:0 0 clamp(24px,3vh,34px) !important; } .bedriska-detail > p { max-width:520px !important; font-size:var(--bn-intro-size) !important; line-height:1.55 !important; margin:0 !important; } .bedriska-submenu { margin-top:clamp(46px,6.2vh,66px) !important; align-self:start !important; } .bedriska-submenu a { font-size:var(--bn-submenu-size) !important; padding:clamp(13px,1.7vh,var(--bn-submenu-pad-y)) 0 !important; } /* RIGHT / image starts below language row like the approved mockup */ .bedriska-visual { margin-top:clamp(92px,9.6vh,102px) !important; height:auto !important; } .bedriska-langs { top:clamp(46px,5.1vh,58px) !important; right:clamp(92px,7.6vw,122px) !important; gap:clamp(14px,1.55vw,24px) !important; } .bedriska-langs a { font-size:var(--bn-lang-size) !important; } /* Close: by default top-right. Optional trigger-position mode stays available. */ .bedriska-close { position:fixed !important; width:46px !important; height:46px !important; min-width:46px !important; left:auto !important; top:38px !important; right:34px !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .bedriska-close:hover,.bedriska-close:focus { background:transparent !important; border:0 !important; color:var(--bn-accent) !important; } .bedriska-footer { grid-template-columns:1fr 1fr 1fr minmax(260px,.96fr) !important; padding:14px 62px !important; } .bedriska-contact { padding:0 46px !important; } .bedriska-contact:first-child { padding-left:0 !important; } .bedriska-booking { max-width:330px !important; } } @media (min-width:1051px) and (max-height:900px) { .bedriska-mainmenu { padding-top:30px !important; padding-bottom:22px !important; } .bedriska-logo { min-height:112px !important; } .bedriska-logo img { max-height:98px !important; } .bedriska-mainmenu > nav { margin-top:26px !important; gap:13px !important; } .bedriska-details { padding-top:142px !important; } .bedriska-detail h2 { font-size:clamp(46px,var(--bn-detail-title-size),60px) !important; } .bedriska-submenu { margin-top:42px !important; } .bedriska-submenu a { padding-top:9px !important; padding-bottom:9px !important; } .bedriska-visual { margin-top:96px !important; } .bedriska-langs { top:42px !important; } } /* ============================================================ 11 / V1.9 – APPROVED MOCKUP MATCH - photo reaches the very top, languages float over it - editorial middle column has a subtly different background - utility links have breathing room before the footer - offer card is compact and translucent, without its own image - close defaults to the original MENU trigger position ============================================================ */ .bedriska-nav { --bn-left: 27.4%; --bn-photo: 39.8%; --bn-offer-width: 238px; --bn-offer-height: 205px; --bn-offer-title-size: 27px; --bn-offer-radius: 20px; --bn-middle-bg: #0e1010; } @media (min-width:1051px) { /* Full visual column from the top edge — no artificial top gap. */ .bedriska-visual { margin-top: 0 !important; height: 100% !important; min-height: 0 !important; align-self: stretch !important; background: #111 !important; } .bedriska-section-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; } /* Languages sit directly ON TOP of the image, as in the approved mockup. */ .bedriska-langs { position:absolute !important; z-index:60 !important; top:38px !important; right:54px !important; gap:18px !important; padding:0 !important; } .bedriska-langs a { font-size:13px !important; line-height:1 !important; } /* Subtle panel contrast in the editorial/middle column. */ .bedriska-details { background:var(--bn-middle-bg) !important; border-right:1px solid rgba(255,255,255,.035) !important; } /* Left utility block gets the intentional empty area seen in the reference. */ .bedriska-mainmenu { padding-bottom:42px !important; } .bedriska-utility { align-self:end !important; margin-top:52px !important; margin-bottom:20px !important; padding-top:22px !important; } /* Compact offer card: no secondary/post thumbnail inside the card. */ .bedriska-offers { right:28px !important; bottom:26px !important; width:var(--bn-offer-width) !important; height:var(--bn-offer-height) !important; } .bedriska-offer { width:100% !important; min-height:100% !important; height:auto !important; padding:20px 22px 16px !important; border:1px solid var(--bn-accent) !important; border-radius:var(--bn-offer-radius) !important; background:rgba(7,9,8,.86) !important; background-image:none !important; box-shadow:none !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex !important; flex-direction:column; justify-content:flex-end; } .bedriska-offer::before { display:none !important; } .bedriska-offer small { font-size:12px !important; margin:0 0 11px !important; letter-spacing:.04em !important; } .bedriska-offer strong { font-size:var(--bn-offer-title-size) !important; line-height:1.05 !important; margin:0 !important; } .bedriska-offer em { display:block !important; font-size:12px !important; line-height:1.2 !important; color:var(--bn-accent) !important; margin:10px 0 0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bedriska-offer > span { margin-top:13px !important; padding-top:11px !important; font-size:12px !important; line-height:1 !important; border-top:1px solid rgba(255,255,255,.18) !important; } /* Close = MENU origin. Hide the old right-top styling even if stale data exists. */ .bedriska-nav.close-trigger .bedriska-close { right:auto !important; background:rgba(11,12,12,.96) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:999px !important; } /* Keep footer visually separated from Webkamera with a calm band. */ .bedriska-footer { min-height:var(--bn-footer-h) !important; } } @media (min-width:1051px) and (max-height:900px) { .bedriska-visual { margin-top:0 !important; } .bedriska-langs { top:30px !important; } .bedriska-mainmenu { padding-bottom:30px !important; } .bedriska-utility { margin-top:34px !important; margin-bottom:12px !important; } .bedriska-offers { right:24px !important; bottom:22px !important; } } /* ============================================================ 12 / V1.10 – INSET MODAL + LOCAL PHOTO SHADE - desktop modal has breathing room around the page - rounded shell, page remains subtly visible behind it - photo still reaches the top of its column - ONLY the top part of photo is shaded for language legibility - close stays at the original MENU trigger position ============================================================ */ @media (min-width:1051px) { .bedriska-nav-overlay { padding: var(--bn-modal-gap) !important; background: rgba(4,5,5,.72) !important; } .bedriska-nav-shell { width:100% !important; height:100% !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:var(--bn-shell-radius) !important; box-shadow:0 28px 90px rgba(0,0,0,.42) !important; overflow:hidden !important; } /* Keep the photo full-height in its column. */ .bedriska-visual { margin-top:0 !important; height:100% !important; position:relative !important; } .bedriska-section-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; } /* Local shade only at the top of the image. No gradient across the rest. */ .bedriska-visual::after { content:""; position:absolute; z-index:25; top:0; left:0; right:0; height:var(--bn-photo-shade-height); pointer-events:none; background:linear-gradient( to bottom, rgba(0,0,0,var(--bn-photo-shade-opacity)) 0%, rgba(0,0,0,calc(var(--bn-photo-shade-opacity) * .58)) 48%, rgba(0,0,0,0) 100% ); } .bedriska-langs { z-index:70 !important; } .bedriska-offers { z-index:45 !important; } /* Trigger-position close is the only default desktop behavior. */ .bedriska-nav.close-trigger .bedriska-close { right:auto !important; } } @media (min-width:1051px) and (max-height:760px) { .bedriska-nav-overlay { padding: max(8px, calc(var(--bn-modal-gap) * .7)) !important; } } /* ============================================================ 13 / V1.11 – CONTENT-SAFE MODAL HEIGHT + OFFER ARTICLE TEXT - no inner/middle column scrollbar on desktop - when content is taller than the viewport, the WHOLE modal grows and the overlay becomes the single scroll container - current offer always has a short article-content description ============================================================ */ @media (min-width:1051px) { .bedriska-nav-overlay { overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; align-items:flex-start !important; } .bedriska-nav-shell { height:var(--bn-runtime-shell-height, calc(100dvh - (2 * var(--bn-modal-gap)))) !important; min-height:calc(100dvh - (2 * var(--bn-modal-gap))) !important; max-height:none !important; flex:none !important; } /* The full modal is the only thing allowed to scroll. */ .bedriska-nav-main, .bedriska-mainmenu, .bedriska-details, .bedriska-detail, .bedriska-visual { max-height:none !important; } .bedriska-mainmenu, .bedriska-details, .bedriska-detail { overflow:visible !important; } .bedriska-details { scrollbar-width:none !important; } .bedriska-details::-webkit-scrollbar { display:none !important; } .bedriska-detail { height:auto !important; min-height:100% !important; } /* A 100-char description needs a little more breathing room than the old card. */ .bedriska-offers { height:auto !important; min-height:var(--bn-offer-height) !important; } .bedriska-offer { min-height:var(--bn-offer-height) !important; justify-content:flex-end !important; } .bedriska-offer em { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden !important; white-space:normal !important; text-overflow:clip !important; color:rgba(255,255,255,.70) !important; font-size:13px !important; line-height:1.35 !important; margin:10px 0 0 !important; } } /* ============================================================ 14 / V1.12 – EDITABLE HEIGHT, TYPOGRAPHY FIX, UNIFIED SVG ARROWS ============================================================ */ .bedriska-nav { --bn-shell-min-height: 880px; --bn-detail-pad-top: 110px; --bn-close-left: 28px; --bn-close-top: 26px; --bn-offer-text-size: 13px; --bn-offer-pad-top: 20px; --bn-arrow-width: 24px; } .bedriska-arrow { display:block !important; width:var(--bn-arrow-width) !important; height:auto !important; max-width:none !important; flex:none !important; object-fit:contain !important; } .bedriska-arrow-wrap { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:none !important; line-height:1 !important; } @media (min-width:1051px) { /* Language typography must always honor the Elementor variable. */ .bedriska-langs a { font-size:var(--bn-lang-size) !important; letter-spacing:var(--bn-lang-letter) !important; } /* Explicit menu window height. Whole overlay scrolls if this exceeds viewport. */ .bedriska-nav-shell { height:var(--bn-runtime-shell-height,var(--bn-shell-min-height)) !important; min-height:var(--bn-shell-min-height) !important; max-height:none !important; } /* Editorial middle-column top offset is fully editable. */ .bedriska-details { padding-top:var(--bn-detail-pad-top) !important; } /* Cleaner close button: fixed to modal's own top-left, away from the logo. */ .bedriska-nav.close-left .bedriska-close { position:absolute !important; left:var(--bn-close-left) !important; top:var(--bn-close-top) !important; right:auto !important; width:42px !important; height:42px !important; min-width:42px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } .bedriska-nav.close-left .bedriska-close:hover, .bedriska-nav.close-left .bedriska-close:focus { color:var(--bn-accent) !important; background:transparent !important; } /* Current offer starts at the top of the card – no giant empty block. */ .bedriska-offer { justify-content:flex-start !important; padding:var(--bn-offer-pad-top) 22px 16px !important; } .bedriska-offer em { font-size:var(--bn-offer-text-size) !important; line-height:1.42 !important; margin-top:14px !important; -webkit-line-clamp:4 !important; } .bedriska-offer > span { margin-top:auto !important; } /* No stray separator immediately before the booking button. */ .bedriska-contact:nth-child(3) { border-right:0 !important; } .bedriska-booking { margin-left:0 !important; } /* All arrow places use the same uploaded SVG. */ .bedriska-submenu b, .bedriska-booking b, .bedriska-offer b { font-size:inherit !important; color:inherit !important; font-weight:400 !important; } .bedriska-submenu a:hover .bedriska-arrow, .bedriska-utility a:hover .bedriska-arrow, .bedriska-booking:hover .bedriska-arrow, .bedriska-offer:hover .bedriska-arrow { transform:translateX(4px); } .bedriska-arrow { transition:transform .18s ease; } } /* ============================================================ 15 / V1.13 – CLEAN LEFT COLUMN + DISTINCT MIDDLE COLUMN ============================================================ */ .bedriska-nav { --bn-left-bg:#090a0a; --bn-middle-bg:#111313; --bn-footer-bg:#0a0b0b; } .bedriska-mainmenu { background:var(--bn-left-bg) !important; } .bedriska-details { background:var(--bn-middle-bg) !important; } .bedriska-footer { background:var(--bn-footer-bg) !important; } /* Logo is off by default. Keep the markup as a zero-size anchor so existing layouts remain stable and the user can switch it back on from Elementor. */ .bedriska-logo.is-hidden { display:none !important; min-height:0 !important; height:0 !important; margin:0 !important; padding:0 !important; } .bedriska-logo.is-visible { display:flex !important; } @media (min-width:1051px) { /* With no logo, use the upper area for a calm close control and start the navigation lower down instead of reserving an empty brand block. */ .bedriska-logo.is-hidden + nav { margin-top:clamp(84px,10vh,118px) !important; } .bedriska-mainmenu:has(.bedriska-logo.is-hidden) { justify-content:space-between !important; } .bedriska-nav.close-left .bedriska-close { z-index:30 !important; color:var(--bn-text) !important; } } /* ============================================================ 16 / V1.14 – LOCKED LEFT CLOSE + REAL EDITORIAL MIDDLE PANEL User-approved behavior: close is ALWAYS in the left column; middle column has its own visible background; footer follows the left panel. ============================================================ */ .bedriska-nav { --bn-left-bg:#090a0a; --bn-middle-bg:#151818; } /* The footer is not a separate design color. It visually belongs to the dark shell. */ .bedriska-footer { background:var(--bn-left-bg) !important; } /* Make the two editorial planes unambiguously different. */ .bedriska-mainmenu { background:var(--bn-left-bg) !important; } .bedriska-details { background:var(--bn-middle-bg) !important; box-shadow:inset 1px 0 0 rgba(255,255,255,.025), inset -1px 0 0 rgba(255,255,255,.025) !important; } @media (min-width:1051px) { /* Hard lock: no saved control or JS may ever push the close button right. */ .bedriska-nav .bedriska-close, .bedriska-nav.close-left .bedriska-close, .bedriska-nav.close-trigger .bedriska-close, .bedriska-nav.close-right .bedriska-close { position:absolute !important; left:var(--bn-close-left,32px) !important; right:auto !important; top:var(--bn-close-top,30px) !important; width:44px !important; height:44px !important; min-width:44px !important; z-index:110 !important; border:1px solid rgba(255,255,255,.15) !important; border-radius:999px !important; background:rgba(9,10,10,.72) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .bedriska-nav .bedriska-close:hover, .bedriska-nav .bedriska-close:focus { color:var(--bn-accent) !important; border-color:rgba(185,215,25,.62) !important; background:rgba(9,10,10,.88) !important; } .bedriska-nav .bedriska-close i { left:25% !important; right:25% !important; top:50% !important; } /* No logo reservation: navigation begins below the close control with clean air. */ .bedriska-logo.is-hidden + nav { margin-top:clamp(118px,13vh,150px) !important; } } /* ============================================================ 17 / V1.15 – CLOSE BUTTON IS STRUCTURALLY INSIDE LEFT COLUMN No shell/top-right positioning. This is intentionally final-authority CSS. ============================================================ */ @media (min-width:1051px) { .bedriska-mainmenu { position:relative !important; } .bedriska-mainmenu > .bedriska-close { position:absolute !important; left:var(--bn-close-left,32px) !important; right:auto !important; top:var(--bn-close-top,30px) !important; margin:0 !important; transform:none !important; width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; z-index:20 !important; } /* Navigation starts below the close button. */ .bedriska-mainmenu > .bedriska-logo.is-hidden + nav { margin-top:clamp(112px,12vh,142px) !important; } } /* ============================================================ 18 / V1.16 – VIEWPORT-DRIVEN MODAL + LEFT BRAND / CLOSE SYSTEM Final authority. No manually defined desktop window height. ============================================================ */ @media (min-width:1051px) { .bedriska-nav-overlay { overflow-y:auto !important; overflow-x:hidden !important; padding:var(--bn-modal-gap,18px) !important; } .bedriska-nav-shell { width:100% !important; height:auto !important; min-height:calc(100dvh - (var(--bn-modal-gap,18px) * 2)) !important; max-height:none !important; grid-template-rows:minmax(0,1fr) var(--bn-footer-h,112px) !important; overflow:hidden !important; } .bedriska-nav-main { min-height:calc(100dvh - (var(--bn-modal-gap,18px) * 2) - var(--bn-footer-h,112px)) !important; height:auto !important; overflow:visible !important; } /* Left column: close action first, logo beneath, navigation below. */ .bedriska-mainmenu { background:var(--bn-left-bg,#090a0a) !important; padding:32px var(--bn-menu-pad-x,62px) 42px !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; overflow:visible !important; } .bedriska-mainmenu > .bedriska-close { position:relative !important; inset:auto !important; align-self:flex-start !important; width:auto !important; min-width:0 !important; height:48px !important; min-height:48px !important; padding:0 20px 0 15px !important; margin:0 0 26px !important; border:1px solid rgba(185,215,25,.78) !important; border-radius:999px !important; background:rgba(8,9,9,.82) !important; color:var(--bn-text,#f3f3ef) !important; display:inline-flex !important; align-items:center !important; gap:12px !important; font-size:15px !important; line-height:1 !important; letter-spacing:.01em !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transform:none !important; } .bedriska-mainmenu > .bedriska-close:hover, .bedriska-mainmenu > .bedriska-close:focus { background:var(--bn-accent,#b9d719) !important; color:#0a0a0a !important; border-color:var(--bn-accent,#b9d719) !important; } .bedriska-close-x { position:relative !important; display:block !important; width:20px !important; height:20px !important; flex:0 0 20px !important; } .bedriska-close-x i { position:absolute !important; left:1px !important; right:1px !important; top:9px !important; height:1.4px !important; background:currentColor !important; transform-origin:center !important; } .bedriska-close-x i:first-child { transform:rotate(45deg) !important; } .bedriska-close-x i:last-child { transform:rotate(-45deg) !important; } .bedriska-close-label { display:block !important; color:inherit !important; } .bedriska-logo, .bedriska-logo.is-visible { position:relative !important; inset:auto !important; transform:none !important; display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 0 44px !important; padding:0 !important; pointer-events:none !important; } .bedriska-logo.is-hidden { display:none !important; } .bedriska-logo img { width:min(var(--bn-logo-width,245px),82%) !important; max-width:300px !important; max-height:112px !important; height:auto !important; object-fit:contain !important; } .bedriska-mainmenu > nav, .bedriska-mainmenu > .bedriska-logo.is-hidden + nav { margin-top:0 !important; } .bedriska-mainmenu > nav { flex:0 0 auto !important; } .bedriska-utility { margin-top:auto !important; padding-top:34px !important; } /* Editorial middle column: visibly distinct plane, not footer color. */ .bedriska-details { background:var(--bn-middle-bg,#151818) !important; padding-top:var(--bn-detail-pad-top,92px) !important; overflow:visible !important; scrollbar-width:none !important; } .bedriska-details::-webkit-scrollbar { display:none !important; } /* Photo reaches the very top. Languages live on the photo, with only a top shade. */ .bedriska-visual { position:relative !important; min-height:100% !important; overflow:hidden !important; } .bedriska-visual::after { content:""; position:absolute; z-index:15; left:0; right:0; top:0; height:var(--bn-photo-shade-height,150px); pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,var(--bn-photo-shade-opacity,.46)), rgba(0,0,0,0)); } .bedriska-langs { position:absolute !important; z-index:50 !important; top:30px !important; right:38px !important; margin:0 !important; padding:0 !important; background:transparent !important; } /* Footer follows shell width; no extra design stripe before booking. */ .bedriska-footer { min-height:var(--bn-footer-h,112px) !important; height:auto !important; background:var(--bn-left-bg,#090a0a) !important; } .bedriska-booking { border-left:0 !important; } .bedriska-booking::before { display:none !important; } }