/* ===================================================================== Park Regency – Responsive overrides --------------------------------------------------------------------- This file restores the responsive behavior that was lost when the site was statically cloned from a Duda CMS instance (which serves different CSS per device on the server). It overrides the inline "criticalCss" desktop-only rules so the layout reflows gracefully at tablet and phone widths without changing the desktop look. ===================================================================== */ /* ---------- Global box & overflow ---------- */ html, body { max-width: 100%; } /* Reveal elements that the original Duda runtime would have animated in. Since the Duda animation JS is not part of this static clone, those nodes remain `visibility: hidden` forever and big sections appear blank. The `:not(.editGrid)` qualifier matches the specificity of the inline critical CSS hider so source order (this file loads later) wins. */ .dmRoot.dmDesktopBody:not(.editGrid) [data-anim-desktop], .dmRoot.dmDesktopBody:not(.editGrid) [data-anim-extended], .dmRoot.dmDesktopBody:not(.editGrid) [data-anim-desktop] *, .dmRoot.dmDesktopBody:not(.editGrid) [data-anim-extended] *, .dmRoot:not(.editGrid) .flex-element [data-anim-extended], .dmRoot .flexslider .slides > li .slide-inner { visibility: visible !important; } body.dmRoot { /* the inline critical CSS sets `body{overflow:hidden}` which kills vertical scrolling on iOS; we need horizontal hidden, vertical auto */ overflow-x: hidden !important; overflow-y: auto !important; } img, svg, video, iframe { max-width: 100%; height: auto; } /* Give every graphicWidget SVG an explicit CSS size so they don't collapse to 0. Many icons in the markup have NO html width/height attributes (gym, spa, room-service, swimming, wifi, money, doctor…). Our global `height:auto` rule makes dimension-less inline SVGs invisible (0-height) because there is no intrinsic height to derive from. Setting explicit pixels here fixes that for all viewports. The per-viewport media-query rules below override as needed. */ .dmRoot .graphicWidget svg { display: block; width: 80px; height: 80px; max-width: 100%; } /* The original Duda CMS uses a runtime JS bundle to populate the `.inlineMap` widget with a Google Maps iframe. That JS is not part of the static clone, so the widget collapses into a tall blank block. Hide the full row that wraps an unpopulated map; the address + phone numbers immediately above already give the user the necessary info. (Once a real iframe is rendered, the row stays visible.) */ .dmRoot .dmRespRow:has(.inlineMap:not(:has(iframe))) { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .dmRoot .inlineMap:not(:has(iframe)) { display: none !important; height: 0 !important; min-height: 0 !important; } .dmRoot .inlineMap iframe { height: 100% !important; } /* ---------- Generic 12-col grid completion (all viewports) ---------- */ /* Critical CSS only defines large-2 / large-10 / large-12. Fill in the rest. */ .dmRoot .dmRespRow .large-1 { width: 8.33333%; } .dmRoot .dmRespRow .large-2 { width: 16.66667%; } .dmRoot .dmRespRow .large-3 { width: 25%; } .dmRoot .dmRespRow .large-4 { width: 33.33333%; } .dmRoot .dmRespRow .large-5 { width: 41.66667%; } .dmRoot .dmRespRow .large-6 { width: 50%; } .dmRoot .dmRespRow .large-7 { width: 58.33333%; } .dmRoot .dmRespRow .large-8 { width: 66.66667%; } .dmRoot .dmRespRow .large-9 { width: 75%; } .dmRoot .dmRespRow .large-10 { width: 83.33333%; } .dmRoot .dmRespRow .large-11 { width: 91.66667%; } .dmRoot .dmRespRow .large-12 { width: 100%; } /* ============================================================ TABLET: 768px – 1024px ============================================================ */ @media (max-width: 1024px) { /* Kill the desktop min-width of 960/768px */ .dmRoot .dmInner, .dmRoot.dmDesktopBody .dmInner { min-width: 0 !important; } .dmRoot .dmLargeBody .dmRespRow { padding-left: 24px !important; padding-right: 24px !important; } /* tablet column widths */ .dmRoot .dmRespRow .medium-1 { width: 8.33333%; } .dmRoot .dmRespRow .medium-2 { width: 16.66667%; } .dmRoot .dmRespRow .medium-3 { width: 25%; } .dmRoot .dmRespRow .medium-4 { width: 33.33333%; } .dmRoot .dmRespRow .medium-5 { width: 41.66667%; } .dmRoot .dmRespRow .medium-6 { width: 50%; } .dmRoot .dmRespRow .medium-7 { width: 58.33333%; } .dmRoot .dmRespRow .medium-8 { width: 66.66667%; } .dmRoot .dmRespRow .medium-9 { width: 75%; } .dmRoot .dmRespRow .medium-10 { width: 83.33333%; } .dmRoot .dmRespRow .medium-11 { width: 91.66667%; } .dmRoot .dmRespRow .medium-12 { width: 100%; } /* Allow rows that are flex containers to wrap */ .dmRoot #dm .dmRespRow .dmRespColsWrapper { flex-wrap: wrap; } /* Hide horizontal desktop nav, surface the hamburger */ .dmRoot .p_hfcontainer nav.u_1222929969 { display: none !important; } .dmRoot .layout-drawer-hamburger.hamburger-on-header { display: flex !important; } /* The original critical CSS pins the fixed hamburger button to `top: 84.7px` (via the `.responsiveTablet` body class), which is far below where our left-aligned logo sits. Pull it up so the button visually shares a row with the logo. */ .dmRoot [dmtemplateid="Hamburger"].runtime-module-container .layout-drawer-hamburger, .dmRoot.responsiveTablet [dmtemplateid="Hamburger"].runtime-module-container .layout-drawer-hamburger { top: 14px !important; } /* Header logo column should not be squashed; left-align so it sits on the left of the stacked header (hamburger button is on the right via the existing `.hamburger-reverse` rules). The vertical padding matches the hamburger button's fixed top position (`top: 25.91px`, height 40px → centre ~45.9px) so the two read as a single horizontal row. */ .dmRoot #dm .p_hfcontainer div.u_1908267241 { width: 100% !important; margin: 0 !important; padding: 18px 0 14px !important; text-align: left !important; } .dmRoot #dm .p_hfcontainer div.u_1179530629 { width: 110px !important; max-width: 110px !important; margin: 0 !important; padding: 0 0 0 16px !important; text-align: left !important; left: 0 !important; } .dmRoot #dm .p_hfcontainer div.u_1179530629 a, .dmRoot #dm .p_hfcontainer div.u_1179530629 img { margin: 0 !important; display: inline-block; max-width: 100% !important; } .dmRoot .p_hfcontainer div.u_1950338110 { width: 100% !important; margin: 0 !important; } /* Fix graphic-widget SVG sizes on tablet. */ .dmRoot .graphicWidget svg { width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; } /* "Öne çıkan olanaklar" amenities grid: at tablet/mobile widths the markup's nested 3-outer-col × 2-sub-col layout squashes labels. Lay all icons two per row so labels stay readable. The outer columns still stack vertically; we override the inner sub-cols to 50/50. */ .dmRoot #dm .dmRespRow.u_1960120507 .dmRespCol .dmRespRow .dmRespColsWrapper, .dmRoot #dm .dmRespRow.u_1340837676 .dmRespCol .dmRespRow .dmRespColsWrapper { display: flex !important; flex-wrap: wrap !important; align-items: stretch; } .dmRoot #dm .dmRespRow.u_1960120507 .dmRespCol .dmRespRow .dmRespCol, .dmRoot #dm .dmRespRow.u_1340837676 .dmRespCol .dmRespRow .dmRespCol { width: 50% !important; max-width: 50% !important; float: none !important; padding: 8px 6px !important; box-sizing: border-box !important; } /* Force outer rows (`u_1960120507`, `u_1340837676`) AND their direct outer columns to full width so the inner pairs sit cleanly stacked. */ .dmRoot #dm .dmRespRow.u_1960120507 > .dmRespColsWrapper > .dmRespCol, .dmRoot #dm .dmRespRow.u_1340837676 > .dmRespColsWrapper > .dmRespCol { width: 100% !important; max-width: 100% !important; float: none !important; } .dmRoot #dm .dmRespRow.u_1960120507 > .dmRespColsWrapper, .dmRoot #dm .dmRespRow.u_1340837676 > .dmRespColsWrapper { display: block !important; } /* Çocuk kulübü is a sub-row with a single child; center it. */ .dmRoot #dm .dmRespRow.u_1340837676 div.u_1722331852 .dmRespColsWrapper { justify-content: center; } .dmRoot #dm .dmRespRow.u_1960120507 .graphicWidget, .dmRoot #dm .dmRespRow.u_1340837676 .graphicWidget { margin: 0 !important; } .dmRoot #dm .dmRespRow.u_1960120507 .dmNewParagraph, .dmRoot #dm .dmRespRow.u_1340837676 .dmNewParagraph { margin: 4px 0 0 !important; } /* Booking widget: width: max-content collides with narrow viewport */ .bon-search-form { width: 100% !important; } .bon-search-form .bon-booking-form .form-group { width: 100% !important; height: auto !important; border-right: 0 !important; padding: 12px 16px !important; } .bon-search-form .bon-booking-form { flex-direction: column; } } /* ============================================================ MOBILE: ≤ 767px ============================================================ */ @media (max-width: 767px) { /* Stack ALL grid columns full-width on phones */ .dmRoot .dmRespRow .small-1, .dmRoot .dmRespRow .small-2, .dmRoot .dmRespRow .small-3, .dmRoot .dmRespRow .small-4, .dmRoot .dmRespRow .small-5, .dmRoot .dmRespRow .small-6, .dmRoot .dmRespRow .small-7, .dmRoot .dmRespRow .small-8, .dmRoot .dmRespRow .small-9, .dmRoot .dmRespRow .small-10, .dmRoot .dmRespRow .small-11, .dmRoot .dmRespRow .small-12, .dmRoot .dmRespRow [class*=" small-"], .dmRoot .dmRespRow [class^="small-"] { width: 100% !important; float: none !important; max-width: 100% !important; } /* Tame hard-coded inline paddings the criticalCss enforces with !important */ .dmRoot #dm .dmContent .dmRespRow { padding-left: 16px !important; padding-right: 16px !important; } .dmRoot .dmLargeBody .dmRespRow { padding-left: 16px !important; padding-right: 16px !important; } .dmRoot #dm .dmBody div.u_1076334126 { padding: 0 16px !important; } .dmRoot #dm .dmBody div.u_1777712210 { padding: 8px 16px 16px !important; } .dmRoot #dm .dmBody div.u_1054185145 { margin: -32px 0 0 !important; padding: 16px 16px 24px !important; } .dmRoot #dm .p_hfcontainer nav.u_1392607675 { padding: 12px 16px !important; } .dmRoot #dm .p_hfcontainer div.u_1356695490 { padding: 13px 64px 0 0 !important; } /* Force flex columns to stack */ .dmRoot #dm .dmRespRow .dmRespColsWrapper { display: block !important; } /* Decorative SVG icons in graphic widgets balloon to full row width on phones once their parent column becomes small-12. Cap the visible icon size and centre it. */ .dmRoot .graphicWidget { text-align: center !important; } .dmRoot .graphicWidget > a, .dmRoot .graphicWidget > span { display: inline-block !important; } .dmRoot .graphicWidget svg { width: 60px !important; height: 60px !important; max-width: 60px !important; max-height: 60px !important; } /* Hide horizontal nav (just in case) and tighten the top bar */ .dmRoot .p_hfcontainer nav.u_1222929969 { display: none !important; } .dmRoot .top_bar { float: none !important; width: 100% !important; height: auto !important; text-align: center !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px; } .dmRoot .top_bar .top-menu-link { font-size: 11px !important; padding: 0 6px !important; margin: 0 !important; } .dmRoot .top_bar .box.hotel_contacts.mail .top-menu-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; display: inline-block; } /* Hero slider */ .dmRoot #dm .dmBody div.u_1701077961 { height: 60vh !important; min-height: 320px; } .dmRoot #dm .dmBody div.u_1701077961 .slides .slide-title { font-size: 32px !important; line-height: 1.15 !important; } .dmRoot #dm .dmBody div.u_1701077961 .slides .slide-text { font-size: 18px !important; } /* Property amenities and review section: keep it from bursting out */ .dmRoot #dm div.dmContent h1 { font-size: 28px !important; } .dmRoot #dm div.dmContent h3 { font-size: 20px !important; } /* Hamburger header logo: left-aligned on phones, hamburger button stays fixed on the right via the existing `.hamburger-reverse` rules. NB: critical CSS uses `#dm` (an id) to set `margin:0 auto` on the logo widget at mobile widths. Match that specificity by including `#dm` so our left-align overrides win. */ .dmRoot #dm .p_hfcontainer div.u_1908267241 { width: 100% !important; margin: 0 !important; padding: 18px 0 14px !important; text-align: left !important; } .dmRoot #dm .p_hfcontainer div.u_1179530629 { width: 110px !important; max-width: 110px !important; margin: 0 !important; padding: 0 0 0 12px !important; text-align: left !important; left: 0 !important; } .dmRoot #dm .p_hfcontainer div.u_1179530629 a, .dmRoot #dm .p_hfcontainer div.u_1179530629 img { margin: 0 !important; display: inline-block; max-width: 100% !important; } .dmRoot .p_hfcontainer div.u_1950338110 { display: none !important; /* desktop nav row in hamburger header */ } /* Hamburger drawer width on phones */ .dmRoot #dm .p_hfcontainer div.u_hamburger-drawer { width: 86vw !important; } /* Activate ".m-size-*" and ".m-font-size-*" classes already in markup */ .dmRoot .m-size-10, .dmRoot .m-font-size-10 { font-size: 10px !important; } .dmRoot .m-size-11, .dmRoot .m-font-size-11 { font-size: 11px !important; } .dmRoot .m-size-12, .dmRoot .m-font-size-12 { font-size: 12px !important; } .dmRoot .m-size-13, .dmRoot .m-font-size-13 { font-size: 13px !important; } .dmRoot .m-size-14, .dmRoot .m-font-size-14 { font-size: 14px !important; } .dmRoot .m-size-15, .dmRoot .m-font-size-15 { font-size: 15px !important; } .dmRoot .m-size-16, .dmRoot .m-font-size-16 { font-size: 16px !important; } .dmRoot .m-size-17, .dmRoot .m-font-size-17 { font-size: 17px !important; } .dmRoot .m-size-18, .dmRoot .m-font-size-18 { font-size: 18px !important; } .dmRoot .m-size-19, .dmRoot .m-font-size-19 { font-size: 19px !important; } .dmRoot .m-size-20, .dmRoot .m-font-size-20 { font-size: 20px !important; } .dmRoot .m-size-21, .dmRoot .m-font-size-21 { font-size: 21px !important; } .dmRoot .m-size-22, .dmRoot .m-font-size-22 { font-size: 22px !important; } .dmRoot .m-size-24, .dmRoot .m-font-size-24 { font-size: 24px !important; } .dmRoot .m-size-25, .dmRoot .m-font-size-25 { font-size: 25px !important; } .dmRoot .m-size-26, .dmRoot .m-font-size-26 { font-size: 26px !important; } .dmRoot .m-size-28, .dmRoot .m-font-size-28 { font-size: 28px !important; } .dmRoot .m-size-30, .dmRoot .m-font-size-30 { font-size: 30px !important; } .dmRoot .m-size-32, .dmRoot .m-font-size-32 { font-size: 32px !important; } .dmRoot .m-size-34, .dmRoot .m-font-size-34 { font-size: 34px !important; } .dmRoot .m-size-36, .dmRoot .m-font-size-36 { font-size: 36px !important; } .dmRoot .m-size-38, .dmRoot .m-font-size-38 { font-size: 38px !important; } .dmRoot .m-size-40, .dmRoot .m-font-size-40 { font-size: 40px !important; } .dmRoot .m-size-42, .dmRoot .m-font-size-42 { font-size: 42px !important; } .dmRoot .m-size-48, .dmRoot .m-font-size-48 { font-size: 48px !important; } .dmRoot .m-text-align-center { text-align: center !important; } .dmRoot .m-text-align-left { text-align: left !important; } .dmRoot .m-text-align-right { text-align: right !important; } /* Buttons should not overflow */ .dmRoot #dm .dmInner .dmWidget { max-width: 100% !important; white-space: normal !important; box-sizing: border-box !important; } } /* ============================================================ Small phones tweak (≤ 480px) ============================================================ */ @media (max-width: 480px) { .dmRoot #dm .dmBody div.u_1701077961 .slides .slide-title { font-size: 26px !important; } .dmRoot #dm div.dmContent h1 { font-size: 24px !important; } .dmRoot #dm .dmBody div.u_1701077961 { height: 55vh !important; min-height: 280px; } } /* ============================================================ Hamburger drawer transition (fixes for cloned static markup where the runtime JS that animates open/close is not available) ============================================================ */ .dmRoot .runtime-module-container .layout-drawer { transition: transform .3s ease; } .dmRoot .runtime-module-container .layout-drawer-overlay { transition: opacity .25s ease; pointer-events: none; } .dmRoot.is-drawer-open .runtime-module-container .layout-drawer[data-origin="side-reverse"] { transform: translate(0, 0) !important; } .dmRoot.is-drawer-open .runtime-module-container .layout-drawer:not([data-origin="side-reverse"]) { transform: translate(0, 0) !important; } .dmRoot.is-drawer-open .runtime-module-container .layout-drawer-overlay { opacity: 1 !important; pointer-events: auto; } .dmRoot.is-drawer-open { overflow: hidden !important; } /* On wider viewports, the hamburger button is hidden – we control this via media queries to avoid double UI on desktop. */ @media (min-width: 1025px) { .dmRoot .layout-drawer-hamburger.hamburger-on-header { display: none !important; } /* Critical CSS applies `margin:-25px 0 0` globally to the logo column (u_1908267241) which clips the logo against the top edge on desktop. Override with a 20px top margin so the full logo is visible. */ .dmRoot #dm .p_hfcontainer div.u_1908267241 { margin: 20px 0 0 !important; padding: 0 !important; } } .dmCustomWidget { display: none !important; }