/* ========================================================== KIAN DEZH - BOTTOM MEDIA FINAL LOCK نسخه نهایی اصلاح جای متن و دکمه روی عکس/ویدئوهای بالای فوتر فارسی: متن بالا راست دکمه پایین چپ انگلیسی: متن بالا چپ دکمه پایین راست نکته مهم: این فایل باید آخر و بعد از style داخلی صفحات لود شود. ========================================================== */ :root { --kd-bottom-media-height: 780px; --kd-bottom-media-space: clamp(42px, 4.8vw, 76px); --kd-bottom-media-title-size: clamp(22px, 1.9vw, 31px); --kd-bottom-media-title-line-height: 1.35; --kd-bottom-media-text-size: clamp(13px, .9vw, 15px); --kd-bottom-media-text-line-height: 1.75; --kd-bottom-media-button-width: 225px; --kd-bottom-media-button-height: 48px; --kd-bottom-media-button-bg: rgba(255, 255, 255, .20); --kd-bottom-media-button-bg-hover: rgba(255, 255, 255, .36); --kd-bottom-media-button-border: rgba(255, 255, 255, .48); --kd-bottom-media-button-color: #ffffff; } /* ========================================================== PROJECT INFO FIX صفحه اطلاعات پروژه نباید دکمه رزرو داشته باشد. cultural-cta-card را از رفتار مدیای پایین جدا می‌کنیم. ========================================================== */ html body main .cultural-cta-card { height: auto !important; min-height: 0 !important; max-height: none !important; position: relative !important; display: block !important; padding: clamp(28px, 3vw, 46px) !important; border-radius: 30px !important; background: rgba(255, 255, 255, .94) !important; background-image: none !important; color: #111111 !important; overflow: hidden !important; isolation: isolate !important; } html body main .cultural-cta-card::before, html body main .cultural-cta-card::after { content: none !important; display: none !important; } html body main .cultural-cta-card h2 { width: auto !important; max-width: none !important; margin: 0 0 12px !important; padding: 0 !important; color: #111111 !important; font-size: clamp(24px, 2vw, 34px) !important; line-height: 1.55 !important; font-weight: 900 !important; white-space: normal !important; text-shadow: none !important; } html body main .cultural-cta-card p { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #333333 !important; font-size: clamp(15px, 1vw, 17px) !important; line-height: 2.05 !important; font-weight: 700 !important; white-space: normal !important; text-shadow: none !important; } html body main .cultural-cta-card>a { display: none !important; } /* ========================================================== UNIFIED REAL BOTTOM MEDIA SECTIONS این بخش فقط سکشن‌های واقعی عکس/ویدئوی بالای فوتر را کنترل می‌کند. ========================================================== */ html body main section.home-tourism-banner, html body main section.page-bottom-video, html body main section.hotel-bottom-video { position: relative !important; height: var(--kd-bottom-media-height) !important; min-height: var(--kd-bottom-media-height) !important; max-height: var(--kd-bottom-media-height) !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; isolation: isolate !important; background: #111111 !important; } /* تصویر و ویدئو باید کل کادر را پر کنند. */ html body main section.home-tourism-banner>img, html body main section.home-tourism-banner>video, html body main section.page-bottom-video>img, html body main section.page-bottom-video>video, html body main section.hotel-bottom-video>img, html body main section.hotel-bottom-video>video, html body main section.page-bottom-video .page-bottom-video-media, html body main section.hotel-bottom-video .hotel-bottom-video-media { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; display: block !important; transform: none !important; filter: none !important; } /* Overlay فقط برای خوانایی متن؛ جای متن و دکمه را تغییر نمی‌دهد. */ html body main section.home-tourism-banner::before, html body main section.page-bottom-video::before, html body main section.hotel-bottom-video::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient(to bottom, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .06) 42%, rgba(0, 0, 0, .34) 100%) !important; } /* اگر صفحه‌ها overlay جدا دارند، مزاحم جای‌گذاری نشوند. */ html body main section.page-bottom-video .page-bottom-video-overlay, html body main section.hotel-bottom-video .hotel-bottom-video-overlay { position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; } /* ========================================================== CONTENT BOX - FULL AVAILABLE WIDTH متن و دکمه داخل این قاب کنترل می‌شوند. قاب خودش از هر طرف فاصله دارد. ========================================================== */ html body main section.home-tourism-banner .home-tourism-content, html body main section.page-bottom-video .page-bottom-video-content, html body main section.hotel-bottom-video .hotel-bottom-video-content { position: absolute !important; top: var(--kd-bottom-media-space) !important; right: var(--kd-bottom-media-space) !important; bottom: var(--kd-bottom-media-space) !important; left: var(--kd-bottom-media-space) !important; z-index: 5 !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; align-items: initial !important; justify-content: initial !important; justify-items: initial !important; color: #ffffff !important; overflow: visible !important; transform: none !important; } /* صفحه اصلی یک ردیف داخلی دارد؛ باید از وسط‌چین/گرید آزاد شود. */ html body main section.home-tourism-banner .home-tourism-content-row { position: static !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; justify-items: initial !important; } /* ========================================================== TEXT POSITION متن دقیقاً بالا و گوشه قرار می‌گیرد. متن محدود نمی‌شود و در دسکتاپ نمی‌شکند. ========================================================== */ html body main section.home-tourism-banner .home-tourism-content h2, html body main section.page-bottom-video .page-bottom-video-content h2, html body main section.hotel-bottom-video .hotel-bottom-video-content h2 { position: absolute !important; top: 0 !important; bottom: auto !important; width: calc(100vw - (var(--kd-bottom-media-space) * 2)) !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: var(--kd-bottom-media-title-size) !important; line-height: var(--kd-bottom-media-title-line-height) !important; font-weight: 850 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 14px 38px rgba(0, 0, 0, .52), 0 4px 16px rgba(0, 0, 0, .36) !important; } /* متن توضیحی اگر وجود داشت، زیر عنوان و باز هم بدون شکست در دسکتاپ */ html body main section.home-tourism-banner .home-tourism-content p, html body main section.page-bottom-video .page-bottom-video-content p, html body main section.hotel-bottom-video .hotel-bottom-video-content p { position: absolute !important; top: calc(var(--kd-bottom-media-title-size) * 1.65) !important; bottom: auto !important; width: calc(100vw - (var(--kd-bottom-media-space) * 2)) !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .88) !important; font-size: var(--kd-bottom-media-text-size) !important; line-height: var(--kd-bottom-media-text-line-height) !important; font-weight: 650 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 12px 34px rgba(0, 0, 0, .48), 0 3px 12px rgba(0, 0, 0, .34) !important; } /* فارسی: متن بالا گوشه راست */ html[dir="rtl"] body main section.home-tourism-banner .home-tourism-content, html[dir="rtl"] body main section.page-bottom-video .page-bottom-video-content, html[dir="rtl"] body main section.hotel-bottom-video .hotel-bottom-video-content { direction: rtl !important; text-align: right !important; } html[dir="rtl"] body main section.home-tourism-banner .home-tourism-content h2, html[dir="rtl"] body main section.page-bottom-video .page-bottom-video-content h2, html[dir="rtl"] body main section.hotel-bottom-video .hotel-bottom-video-content h2, html[dir="rtl"] body main section.home-tourism-banner .home-tourism-content p, html[dir="rtl"] body main section.page-bottom-video .page-bottom-video-content p, html[dir="rtl"] body main section.hotel-bottom-video .hotel-bottom-video-content p { right: 0 !important; left: auto !important; margin-right: 0 !important; margin-left: auto !important; text-align: right !important; text-align-last: right !important; } /* انگلیسی: متن بالا گوشه چپ */ html[dir="ltr"] body main section.home-tourism-banner .home-tourism-content, html[dir="ltr"] body main section.page-bottom-video .page-bottom-video-content, html[dir="ltr"] body main section.hotel-bottom-video .hotel-bottom-video-content { direction: ltr !important; text-align: left !important; } html[dir="ltr"] body main section.home-tourism-banner .home-tourism-content h2, html[dir="ltr"] body main section.page-bottom-video .page-bottom-video-content h2, html[dir="ltr"] body main section.hotel-bottom-video .hotel-bottom-video-content h2, html[dir="ltr"] body main section.home-tourism-banner .home-tourism-content p, html[dir="ltr"] body main section.page-bottom-video .page-bottom-video-content p, html[dir="ltr"] body main section.hotel-bottom-video .hotel-bottom-video-content p { left: 0 !important; right: auto !important; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; text-align-last: left !important; } /* ========================================================== BUTTON POSITION دکمه دقیقاً پایین و گوشه مخالف متن قرار می‌گیرد. ========================================================== */ html body main section.home-tourism-banner .home-tourism-cta, html body main section.page-bottom-video .page-bottom-video-content>a, html body main section.hotel-bottom-video .hotel-bottom-video-content>a { position: absolute !important; top: auto !important; bottom: 0 !important; width: var(--kd-bottom-media-button-width) !important; min-width: var(--kd-bottom-media-button-width) !important; max-width: var(--kd-bottom-media-button-width) !important; height: var(--kd-bottom-media-button-height) !important; min-height: var(--kd-bottom-media-button-height) !important; max-height: var(--kd-bottom-media-button-height) !important; margin: 0 !important; padding: 0 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid var(--kd-bottom-media-button-border) !important; background: var(--kd-bottom-media-button-bg) !important; background-image: none !important; color: var(--kd-bottom-media-button-color) !important; text-decoration: none !important; font-size: clamp(13px, .86vw, 14.5px) !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; box-shadow: none !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .24) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; transform: none !important; transition: background-color .22s ease, border-color .22s ease, transform .22s ease !important; } html body main section.home-tourism-banner .home-tourism-cta:hover, html body main section.home-tourism-banner .home-tourism-cta:focus-visible, html body main section.page-bottom-video .page-bottom-video-content>a:hover, html body main section.page-bottom-video .page-bottom-video-content>a:focus-visible, html body main section.hotel-bottom-video .hotel-bottom-video-content>a:hover, html body main section.hotel-bottom-video .hotel-bottom-video-content>a:focus-visible { background: var(--kd-bottom-media-button-bg-hover) !important; border-color: rgba(255, 255, 255, .66) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* حذف افکت‌های قبلی دکمه‌ها که جای دکمه را خراب می‌کردند. */ html body main section.home-tourism-banner .home-tourism-cta::before, html body main section.home-tourism-banner .home-tourism-cta::after, html body main section.page-bottom-video .page-bottom-video-content>a::before, html body main section.page-bottom-video .page-bottom-video-content>a::after, html body main section.hotel-bottom-video .hotel-bottom-video-content>a::before, html body main section.hotel-bottom-video .hotel-bottom-video-content>a::after { content: none !important; display: none !important; } /* فارسی: دکمه پایین گوشه چپ */ html[dir="rtl"] body main section.home-tourism-banner .home-tourism-cta, html[dir="rtl"] body main section.page-bottom-video .page-bottom-video-content>a, html[dir="rtl"] body main section.hotel-bottom-video .hotel-bottom-video-content>a { left: 0 !important; right: auto !important; } /* انگلیسی: دکمه پایین گوشه راست */ html[dir="ltr"] body main section.home-tourism-banner .home-tourism-cta, html[dir="ltr"] body main section.page-bottom-video .page-bottom-video-content>a, html[dir="ltr"] body main section.hotel-bottom-video .hotel-bottom-video-content>a { right: 0 !important; left: auto !important; } /* ========================================================== IMAGE CTA BOXES ABOVE FOOTER اگر بعضی صفحات به‌جای video از box تصویری استفاده کردند. project-info با cultural-cta-card عمداً مستثنا شده است. ========================================================== */ html body main .hotel-cta-box, html body main .bazaar-cta-box, html body main .restaurant-cta-box, html body main .residence-cta-box, html body main .golf-cta-box { position: relative !important; height: var(--kd-bottom-media-height) !important; min-height: var(--kd-bottom-media-height) !important; max-height: var(--kd-bottom-media-height) !important; margin: 0 !important; padding: var(--kd-bottom-media-space) !important; overflow: hidden !important; isolation: isolate !important; color: #ffffff !important; } html body main .hotel-cta-box::before, html body main .bazaar-cta-box::before, html body main .restaurant-cta-box::before, html body main .residence-cta-box::before, html body main .golf-cta-box::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(to bottom, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .06) 42%, rgba(0, 0, 0, .34) 100%) !important; } html body main .hotel-cta-box h2, html body main .bazaar-cta-box h2, html body main .restaurant-cta-box h2, html body main .residence-cta-box h2, html body main .golf-cta-box h2, html body main .hotel-cta-box p, html body main .bazaar-cta-box p, html body main .restaurant-cta-box p, html body main .residence-cta-box p, html body main .golf-cta-box p { position: relative !important; z-index: 3 !important; width: calc(100vw - (var(--kd-bottom-media-space) * 2)) !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } html body main .hotel-cta-box h2, html body main .bazaar-cta-box h2, html body main .restaurant-cta-box h2, html body main .residence-cta-box h2, html body main .golf-cta-box h2 { margin: 0 !important; color: #ffffff !important; font-size: var(--kd-bottom-media-title-size) !important; line-height: var(--kd-bottom-media-title-line-height) !important; font-weight: 850 !important; text-shadow: 0 14px 38px rgba(0, 0, 0, .52), 0 4px 16px rgba(0, 0, 0, .36) !important; } html body main .hotel-cta-box p, html body main .bazaar-cta-box p, html body main .restaurant-cta-box p, html body main .residence-cta-box p, html body main .golf-cta-box p { margin: 10px 0 0 !important; color: rgba(255, 255, 255, .88) !important; font-size: var(--kd-bottom-media-text-size) !important; line-height: var(--kd-bottom-media-text-line-height) !important; font-weight: 650 !important; } html body main .hotel-cta-box>a, html body main .bazaar-cta-box>a, html body main .restaurant-cta-box>a, html body main .residence-cta-box>a, html body main .golf-cta-box>a { position: absolute !important; z-index: 4 !important; bottom: var(--kd-bottom-media-space) !important; width: var(--kd-bottom-media-button-width) !important; min-width: var(--kd-bottom-media-button-width) !important; max-width: var(--kd-bottom-media-button-width) !important; height: var(--kd-bottom-media-button-height) !important; min-height: var(--kd-bottom-media-button-height) !important; max-height: var(--kd-bottom-media-button-height) !important; margin: 0 !important; padding: 0 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid var(--kd-bottom-media-button-border) !important; background: var(--kd-bottom-media-button-bg) !important; background-image: none !important; color: #ffffff !important; text-decoration: none !important; font-size: clamp(13px, .86vw, 14.5px) !important; font-weight: 900 !important; white-space: nowrap !important; box-shadow: none !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .24) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; } /* فارسی برای باکس‌های تصویری */ html[dir="rtl"] body main .hotel-cta-box, html[dir="rtl"] body main .bazaar-cta-box, html[dir="rtl"] body main .restaurant-cta-box, html[dir="rtl"] body main .residence-cta-box, html[dir="rtl"] body main .golf-cta-box { direction: rtl !important; text-align: right !important; } html[dir="rtl"] body main .hotel-cta-box h2, html[dir="rtl"] body main .bazaar-cta-box h2, html[dir="rtl"] body main .restaurant-cta-box h2, html[dir="rtl"] body main .residence-cta-box h2, html[dir="rtl"] body main .golf-cta-box h2, html[dir="rtl"] body main .hotel-cta-box p, html[dir="rtl"] body main .bazaar-cta-box p, html[dir="rtl"] body main .restaurant-cta-box p, html[dir="rtl"] body main .residence-cta-box p, html[dir="rtl"] body main .golf-cta-box p { margin-right: 0 !important; margin-left: auto !important; text-align: right !important; text-align-last: right !important; } html[dir="rtl"] body main .hotel-cta-box>a, html[dir="rtl"] body main .bazaar-cta-box>a, html[dir="rtl"] body main .restaurant-cta-box>a, html[dir="rtl"] body main .residence-cta-box>a, html[dir="rtl"] body main .golf-cta-box>a { left: var(--kd-bottom-media-space) !important; right: auto !important; } /* انگلیسی برای باکس‌های تصویری */ html[dir="ltr"] body main .hotel-cta-box, html[dir="ltr"] body main .bazaar-cta-box, html[dir="ltr"] body main .restaurant-cta-box, html[dir="ltr"] body main .residence-cta-box, html[dir="ltr"] body main .golf-cta-box { direction: ltr !important; text-align: left !important; } html[dir="ltr"] body main .hotel-cta-box h2, html[dir="ltr"] body main .bazaar-cta-box h2, html[dir="ltr"] body main .restaurant-cta-box h2, html[dir="ltr"] body main .residence-cta-box h2, html[dir="ltr"] body main .golf-cta-box h2, html[dir="ltr"] body main .hotel-cta-box p, html[dir="ltr"] body main .bazaar-cta-box p, html[dir="ltr"] body main .restaurant-cta-box p, html[dir="ltr"] body main .residence-cta-box p, html[dir="ltr"] body main .golf-cta-box p { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; text-align-last: left !important; } html[dir="ltr"] body main .hotel-cta-box>a, html[dir="ltr"] body main .bazaar-cta-box>a, html[dir="ltr"] body main .restaurant-cta-box>a, html[dir="ltr"] body main .residence-cta-box>a, html[dir="ltr"] body main .golf-cta-box>a { right: var(--kd-bottom-media-space) !important; left: auto !important; } /* ========================================================== RESPONSIVE در موبایل اجازه می‌دهیم متن بشکند تا صفحه خراب نشود. دسکتاپ و لپ‌تاپ متن یک‌خطی می‌ماند. ========================================================== */ @media (max-width: 900px) { :root { --kd-bottom-media-height: 645px; --kd-bottom-media-space: 30px; --kd-bottom-media-title-size: clamp(21px, 4.8vw, 30px); --kd-bottom-media-text-size: 13.4px; --kd-bottom-media-button-width: 210px; --kd-bottom-media-button-height: 46px; } html body main section.home-tourism-banner, html body main section.page-bottom-video, html body main section.hotel-bottom-video, html body main .hotel-cta-box, html body main .bazaar-cta-box, html body main .restaurant-cta-box, html body main .residence-cta-box, html body main .golf-cta-box { height: var(--kd-bottom-media-height) !important; min-height: var(--kd-bottom-media-height) !important; max-height: var(--kd-bottom-media-height) !important; } html body main section.home-tourism-banner .home-tourism-content h2, html body main section.page-bottom-video .page-bottom-video-content h2, html body main section.hotel-bottom-video .hotel-bottom-video-content h2, html body main section.home-tourism-banner .home-tourism-content p, html body main section.page-bottom-video .page-bottom-video-content p, html body main section.hotel-bottom-video .hotel-bottom-video-content p, html body main .hotel-cta-box h2, html body main .bazaar-cta-box h2, html body main .restaurant-cta-box h2, html body main .residence-cta-box h2, html body main .golf-cta-box h2, html body main .hotel-cta-box p, html body main .bazaar-cta-box p, html body main .restaurant-cta-box p, html body main .residence-cta-box p, html body main .golf-cta-box p { width: calc(100vw - (var(--kd-bottom-media-space) * 2)) !important; max-width: calc(100vw - (var(--kd-bottom-media-space) * 2)) !important; white-space: normal !important; overflow-wrap: break-word !important; } } @media (max-width: 640px) { :root { --kd-bottom-media-height: 540px; --kd-bottom-media-space: 22px; --kd-bottom-media-title-size: clamp(20px, 5.6vw, 28px); --kd-bottom-media-text-size: 12.8px; --kd-bottom-media-button-width: 190px; --kd-bottom-media-button-height: 44px; } html body main section.home-tourism-banner, html body main section.page-bottom-video, html body main section.hotel-bottom-video, html body main .hotel-cta-box, html body main .bazaar-cta-box, html body main .restaurant-cta-box, html body main .residence-cta-box, html body main .golf-cta-box { height: var(--kd-bottom-media-height) !important; min-height: var(--kd-bottom-media-height) !important; max-height: var(--kd-bottom-media-height) !important; } }