/* ========================================================================= * style_mobile_fix.css * * Патч мобильной вёрстки для одностраничника pepetocoin.com, сохранённого * SingleFile. Подключать ПОСЛЕ остальных CSS в — тогда каскад * перебивает оригинал. * * Что чинит: * 1. Tokenomics — Owl-карусель в SSR-снимке имеет width:0px у каждой * .owl-item, без JS она не оживает. Делаем flex-стек. * 2. How To Buy — то же: 3 карточки схлопнуты в 0. * 3. Roadmap — Owl-карусель живая, но .owl-item (включая .center) идёт * со scale(1.3..1.7) и режет карточки. Сбрасываем scale, центральную * подсвечиваем иначе. * 4. Value Of $PEPETO Token — мобильная ветка app-token-value (та же * проблема, что у tokenomics). * 5. Шрифты — font-20/16/14/50 жёстко фиксированы, на 360px экране * это слишком мелко или ломает заголовки. Подгоняем rem. * * Стратегия: всё в @media (max-width:768px) и (max-width:576px), на * десктопе поведение не меняется ни на пиксель. * ========================================================================= */ /* ----- общие шрифты и отступы (≤768px) ----------------------------- */ @media screen and (max-width: 768px) { .font-50, h2.font-50, .font-lg-50 { font-size: 1.85rem !important; line-height: 1.15 !important; } .font-40, .font-lg-40 { font-size: 1.55rem !important; line-height: 1.2 !important; } .font-20 { font-size: 1.05rem !important; } .font-16 { font-size: 0.95rem !important; line-height: 1.45 !important; } .font-14 { font-size: 0.875rem !important; } } /* ========================================================================= * 1. TOKENOMICS * ======================================================================= */ @media screen and (max-width: 768px) { /* Стейдж и айтем-ы, которые в SSR-снимке пришли с width:0px, раскладываем в колонку, каждая карточка — на всю ширину. */ .tokenomics .owl-carousel .owl-stage { display: flex !important; flex-direction: column !important; width: 100% !important; transform: none !important; gap: 14px; } .tokenomics .owl-carousel .owl-item, .tokenomics .owl-carousel .owl-item.cloned { width: 100% !important; margin: 0 !important; } /* Карточка — единая высота, чтобы стек выглядел ровно */ .tokenomics .boxs { width: 100% !important; min-height: 0 !important; padding: 18px 16px !important; } .tokenomics .boxs h3 { letter-spacing: 1px; } /* На очень узких — карточки почти квадратные, обрежем длинные тексты */ @media screen and (max-width: 576px) { .tokenomics { padding: 60px 0 50px !important; } .tokenomics .boxs { padding: 16px 14px !important; } .tokenomics .boxs p { font-size: 0.9rem !important; } } } /* ========================================================================= * 2. HOW TO BUY * ======================================================================= */ @media screen and (max-width: 768px) { .how-to-buy { min-height: 0 !important; padding: 60px 0 80px !important; } /* Мобильная Owl-карусель — та же история: SSR width:0 */ .how-to-buy .owl-carousel .owl-stage { display: flex !important; flex-direction: column !important; width: 100% !important; transform: none !important; gap: 12px; } .how-to-buy .owl-carousel .owl-item, .how-to-buy .owl-carousel .owl-item.cloned { width: 100% !important; margin: 0 !important; } .how-to-buy .box { padding: 16px 14px !important; } .how-to-buy .box .title { font-size: 1.05rem !important; margin-bottom: 8px; } .how-to-buy .box p { font-size: 0.9rem !important; line-height: 1.45; } /* Картинку howTobuy-img на мобиле сдвигаем так, чтобы не наезжала */ .how-to-buy .howTobuy-img { position: relative !important; right: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; margin: 16px auto 0 !important; max-width: 80%; } @media screen and (max-width: 576px) { .how-to-buy { padding: 50px 0 70px !important; } } } /* ========================================================================= * 3. ROADMAP * ======================================================================= */ @media screen and (max-width: 768px) { .roadmap { min-height: 0 !important; padding: 60px 0 !important; } /* Сбрасываем scale со всех owl-item. Без этого карточка сжимается до 187px и вылезает за пределы экрана. */ .roadmap .owl-carousel .owl-item, .roadmap .owl-carousel .owl-item.cloned, .roadmap .owl-carousel .owl-item.center, .roadmap .owl-carousel .owl-item.active, .roadmap .card-wrapper.left .owl-carousel .owl-item, .roadmap .card-wrapper.left .owl-carousel .owl-item.center { transform: none !important; width: 100% !important; max-width: 360px; margin: 0 auto !important; } /* Стейдж — горизонтальный свайп на 768/576, но без scale-эффектов. Если хочется просто свайпать — оставляем как есть. Сейчас сделаем безопасный "на всю ширину, без обрезки". */ .roadmap .owl-carousel .owl-stage { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; transform: none !important; gap: 16px; } .roadmap .owl-carousel .owl-stage-outer { padding: 10px 0 20px !important; } .roadmap .card { max-width: 100% !important; min-height: 0 !important; padding: 12px !important; } .roadmap .card .content { max-width: 100% !important; left: 0 !important; padding: 0 8px; } .roadmap .card .content .sub-title { font-size: 1.2rem !important; } .roadmap .card .content .sub-title.small { font-size: 0.95rem !important; line-height: 1.25 !important; } .roadmap .card .content .bullet { font-size: 0.875rem !important; line-height: 1.4; } /* Картинка god-рептилии не должна лезть на карточки */ .roadmap .god { margin-bottom: 0 !important; padding-right: 0 !important; max-width: 70%; margin: 0 auto; display: block; } .roadmap .gif-wrapper { transform: none !important; margin-top: 24px; text-align: center; } /* На очень узком экране (≤576) центральную подсвечиваем яркостью, а не размером */ @media screen and (max-width: 576px) { .roadmap .owl-carousel .owl-item.center .card { filter: drop-shadow(0 0 14px rgba(186, 255, 19, 0.45)); } .roadmap .owl-carousel .owl-item .card ul { max-width: 100% !important; margin: 0 0 12px !important; } .roadmap .card { min-height: 0 !important; } } } /* ========================================================================= * 4. VALUE OF $PEPETO TOKEN (мобильная ветка app-token-value) * ======================================================================= */ @media screen and (max-width: 768px) { .token { padding: 60px 0 !important; } .token .container { padding-left: 16px; padding-right: 16px; } .token .section-title { text-align: center !important; font-size: 1.85rem !important; line-height: 1.15 !important; } .token p.font-16 { text-align: center !important; font-size: 0.95rem !important; line-height: 1.5 !important; } /* Мобильная Owl-карусель value-of-token — та же проблема, что и у tokenomics: в SSR все width:0. Раскладываем в колонку. */ .token .owl-carousel .owl-stage { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; width: 100% !important; gap: 4em; } .token .owl-carousel .owl-item.center { transform: unset !important; } .token .owl-carousel .owl-item, .token .owl-carousel .owl-item.cloned { width: 100% !important; max-width: 360px; margin: 0 auto !important; transform: none !important; } .token .card { max-width: 100% !important; min-height: 0 !important; height: auto !important; } .token .card .content { max-width: 100% !important; left: 0 !important; padding: 0 12px; } .token .card .content .title { font-size: 1.4rem !important; } .token .card .content .sub-title { font-size: 1rem !important; } .token .card .content .desc { font-size: 0.9rem !important; line-height: 1.45; } .token .card .content .btn-item { font-size: 0.8rem !important; padding: 8px 12px !important; } /* Картинку с анимацией (asset_29.gif) ограничиваем по ширине */ .token .animation-img { max-width: 70% !important; margin: 16px auto 0 !important; } @media screen and (max-width: 576px) { .token { padding: 50px 0 !important; } } } /* ========================================================================= * Подстраховка: на ≤480px (очень узкие телефоны) делаем дополнительные * ужатия, чтобы ничего не вылезало за край. * ======================================================================= */ @media screen and (max-width: 480px) { .font-50, h2.font-50, .font-lg-50 { font-size: 1.6rem !important; } .font-40, .font-lg-40 { font-size: 1.35rem !important; } .tokenomics .boxs h3, .token .card .content .title { font-size: 1.2rem !important; } .tokenomics .boxs p, .how-to-buy .box p, .token .card .content .desc, .roadmap .card .content .bullet { font-size: 0.85rem !important; } }