/* ============================================================ TALES OF ZONE — мобільний шар Підключення в обох сторінок: Базові стилі сторінки інлайнові, тому всюди !important. Десктоп (>1024px) цей файл не зачіпає, крім scroll-margin. ============================================================ */ /* Якорі з меню не пірнають під фіксовану шапку (працює і на десктопі) */ main section[id] { scroll-margin-top: 96px; } /* ================= ПЛАНШЕТИ ≤ 1024px ================= */ @media (max-width: 1024px) { /* 3-колонкові сітки (новини, стовпи, галерея) -> 2 колонки */ main div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; } /* угруповання 4 -> 2 */ #factions div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } } /* ================= ТЕЛЕФОНИ ≤ 760px ================= */ @media (max-width: 760px) { main section[id] { scroll-margin-top: 128px; } /* ---- Шапка: два ряди — лого+кнопки, під ними меню з горизонтальним скролом ---- */ header[style*="position:fixed"] { flex-wrap: wrap !important; padding: 10px 14px !important; gap: 12px !important; row-gap: 8px !important; } header[style*="position:fixed"] nav { order: 3 !important; width: 100% !important; overflow-x: auto !important; justify-content: flex-start !important; gap: 18px !important; padding-bottom: 4px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } header[style*="position:fixed"] nav::-webkit-scrollbar { display: none; } header[style*="position:fixed"] nav a { flex: none; } header img[src*="logo-round"] { width: 36px !important; height: 36px !important; } header a[style*="clip-path"], header a[target="_blank"] { padding: 9px 13px !important; font-size: 11.5px !important; } /* ---- Секції: компактніші відступи ---- */ main section[id] { padding: 64px 18px !important; } #discord { padding: 40px 18px !important; } /* фінальний CTA */ main section[style*="padding:140px"] { padding: 90px 18px !important; } /* ---- ГЕРО: колонка замість спліта ---- */ section[style*="padding:118px"] { padding: 130px 14px 44px !important; min-height: auto !important; } section[style*="padding:118px"] > div { flex-direction: column !important; min-height: auto !important; gap: 18px !important; } /* вікно каруселі: даємо явну висоту, бо всі шари всередині absolute */ section[style*="padding:118px"] > div > div[style*="flex:1 1 0"] { flex: none !important; width: 100% !important; height: 58vw !important; min-height: 230px !important; max-height: 420px !important; } /* текстова колонка на всю ширину */ section[style*="padding:118px"] > div > div[style*="0 0 35%"] { flex: none !important; width: 100% !important; gap: 16px !important; } section[style*="padding:118px"] h1 { font-size: clamp(30px, 8.6vw, 42px) !important; } /* стрілки каруселі компактніші */ section[style*="padding:118px"] button[style*="width:42px"] { width: 34px !important; height: 34px !important; } /* ---- Всі сітки -> одна колонка ---- */ main div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* винятки: галерея 2 колонки, статистика сервера 2х2 */ #gallery div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #welcome div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } /* ---- Заголовки секцій ---- */ main h2 { font-size: clamp(26px, 7.4vw, 34px) !important; } main h2[style*="margin:0 0 42px"] { margin-bottom: 28px !important; } /* ---- Discord-CTA: банер у колонку ---- */ #discord > div { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 26px 20px !important; } /* ---- Футер: одна колонка ---- */ footer { padding: 48px 18px 28px !important; } footer > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 30px !important; } } /* ================= МАЛІ ТЕЛЕФОНИ ≤ 420px ================= */ @media (max-width: 420px) { /* ховаємо текст бренду, лишаємо лого — щоб влізли обидві кнопки */ header a[href="#top"] > span { display: none !important; } header a[style*="clip-path"], header a[target="_blank"] { padding: 9px 11px !important; font-size: 11px !important; } }