adaptive

index.html

@@ -21,9 +21,11 @@
         p.description {font-size: 18px;color:#6d8982;padding:0;margin:0;}
         p.description_large {font-size: 24px;color:#6d8982;padding:0;margin:0;}
         a:focus {outline: none;}
+        span.nobreak {white-space: nowrap;}
 
-        #top_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
+        #top_logo {font-size: 20px;line-height: 24px;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
         #top_logo img {width: 24px;}
+        #top_logo a {font-weight: bold;color: #0C3B2E;text-decoration: none;}
         #top_line_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;min-width: 360px;}
         #top_line {position:relative;display: flex;flex-direction: row;justify-content: space-around;padding:18px 0;height:80px;box-sizing: border-box; border-bottom: 1px solid #e7ede7;}
         #top_menu {display:flex;flex-direction:row;gap: 40px;margin-top:13px;height:18px;align-items: center;}
@@ -46,21 +48,23 @@
         #page_autobasket {}
         #page_autobasket_content {display: flex;flex-direction: column;gap: 64px;}
         #page_autobasket_content_description {text-align: center;}
-        #page_autobasket_content_description p {font-size: 24px;color: #0C3B2E;}
+        #page_autobasket_content_description p {font-size: 24px;color: #6d8982;}
         #page_autobasket_images {display: flex;flex-direction: row;gap: 20px;justify-content: center;}
         #page_autobasket_images div {display: flex;flex-direction: column; gap: 16px;max-width: 387px;text-align: center;align-items: center;}
         #page_autobasket_images img {max-width: 100%;}
         #page_autobasket_images p {font-size: 18px;color:#6d8982;padding:0;margin:0;}
+        .autobasket_image_wrapper {aspect-ratio: 300/317;background-color: #edfaad;border-radius: 24px;justify-content: center;}
 
         #page_meal_plan {}
         #page_meal_plan_content {display: flex;flex-direction: row;gap:20px;padding:0 120px;justify-content: space-around;}
         #page_meal_plan_content_description {display: flex;flex-direction: column;gap:40px;min-width: 400px;}
-        #page_meal_plan_broc {max-width:529px;}
+        #page_meal_plan_broc {max-width:529px;border-radius: 24px;}
         #page_meal_plan_items {gap: 24px;display: flex;flex-direction: column;}
         .page_meal_plan_item {display: flex;flex-direction: row;gap: 16px;max-width: 650px;}
         .page_meal_plan_item p {font-size:18px;color:#6d8982;padding: 0;margin:0;}
         .page_meal_plan_item img {width:54px;}
         .page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
+        .page_meal_plan_item_text span {white-space: nowrap;}
 
         #page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:110px;box-sizing: border-box;}
         #page_how_it_works_content {text-align: center;}
@@ -83,6 +87,7 @@
         #page_how_it_works_info_content ul li::marker {padding-top:0;}
         #page_how_it_works_info_content ul li {list-style-type: disc;padding-top:3px;padding-bottom:24px;}
         #page_how_it_works_info_content ul li span {margin-top: -28px;display: flex;}
+        #page_meal_plan_broc_small {display: none;}
 
         #page_footer {height: 136px;width: 100%;padding-top:15px;}
         #page_footer > div {display: flex;align-items: center;justify-content: space-between;}
@@ -90,6 +95,10 @@
 
         #bottom_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
         #bottom_logo img {width: 24px;}
+        #bottom_contacts_small {display: none;}
+
+        br.small {display: none;}
+        br.big {display: initial;}
 
         @media (max-width: 1360px){
             #page_how_it_works_steps {padding: 0 20px;}
@@ -116,13 +125,13 @@
             p.description_large br {display: none;}
             #page_autobasket_content_description p {font-size: 20px;}
             .page_container {min-height: auto;padding-top:100px;}
-            #page_meal_plan_content {padding-left: 20px;}
+            #page_meal_plan_content {padding: 0 20px;box-sizing: border-box;}
-            #page_how_it_works_steps {flex-direction: column; display: flex;align-items: center;gap: 24px;}
+            #page_how_it_works_steps {flex-direction: column; display: flex;align-items: center;gap: 24px;color:#0C3B2E;}
             #page_how_it_works_steps > div {display: flex;flex-direction: row;gap: 20px;}
             #page_how_it_works_steps > div img {height: auto;max-width: 80px;max-height: 80px;}
             #page_how_it_works_steps > div:nth-child(3) {flex-direction: row-reverse;}
             .page_how_it_works_steps_arrow {display: none !important;}
-            #page_how_it_works_step_3 img {top:0;position: relative;width: 120px;}
+            #page_how_it_works_step_3 img {top:0;position: relative;width: auto;}
             #page_how_it_works_info_content br {display: none;}
         }
         @media (max-width: 800px){
@@ -145,7 +154,6 @@
             #page_index_content h1 + div div {width: 100%;}
             #page_index_store_btns {justify-content: center;}
             #page_autobasket_content_description p {font-size: 22px;padding: 0 15px;}
-            #page_autobasket_content_description p br {display: none;}
             #page_autobasket_images {flex-direction: column;}
             #page_autobasket_images div {max-width: 100% !important;}
             #page_autobasket_images > div {flex-direction: row;}
@@ -154,11 +162,45 @@
             #page_how_it_works_info_content {margin-left: 100px;color:#0C3B2E;}
         }
         @media (max-width: 420px){
-            #page_index_content {padding-top:35px;}
+            br.small {display: initial !important;}
-            .big_index_greeting {font-size: 84px;line-height: 75px;}
+            br.big {display: none;}
-            h2 {font-size: 38px;}
+            #page_index_content {padding-top:0;width: 100%;}
+            .big_index_greeting {font-size: 65px;line-height: 61px;text-align: left;max-width: 80%;margin: 0 20px;}
+            .big_index_greeting:last-child {text-align: right;}
+            #page_index p {font-size: 20px;text-align: center}
+            #top_line {padding:10px 20px;height:52px;}
+            #top_logo span {display: none;}
+            h2 {font-size: 32px;}
+            #page_meal_plan_content {gap: 0;}
             #page_meal_plan_content_description {max-width: 100%;min-width: 320px;}
-            #page_how_it_works_info_content {}
+            #page_meal_plan_content_description h2 {text-align: center;}
+            #page_how_it_works_content {padding: 0 20px;box-sizing: border-box;}
+            #try_button {font-size: 12px;padding:8.5px 35.5px;}
+            p.text_secondary {margin: 0;}
+            #page_index {height: 100vh;padding-top: 0;}
+            #page_autobasket_images > div {flex-direction: column;}
+            #page_autobasket_images div img {max-width: 100% !important;}
+            #page_autobasket_content_description p {font-size: 16px;}
+            #page_meal_plan_broc_small {display: block;border-radius: 24px;}
+            p.description_large {font-size: 16px;}
+            #page_how_it_works_steps {font-size: 14px;padding:0;align-items: initial;margin-top: 20px;}
+            #page_how_it_works_steps p {display: flex;align-content: center;align-items: center;width: 100%;justify-content: center;}
+            #page_how_it_works_steps > div {width: 100%;}
+            #page_how_it_works_info {margin-top:20px; display: flex;flex-direction: column-reverse;}
+            #page_how_it_works_info_content {margin-left:0;font-size: 16px;}
+            #page_how_it_works_info ul {margin-top:25px;}
+            #page_how_it_works_info_content ul li:last-child {padding-bottom: 0;}
+            #page_how_it_works_info_image {height: auto;margin-top: -15px;margin-bottom: 20px; }
+            #page_how_it_works_info_image img {position: relative;top:initial;left:initial;}
+
+            #page_footer {margin-top: 60px;}
+            #page_footer > div {flex-direction: column;align-items: flex-start;padding-left:10px;font-size:12px;gap: 16px;}
+            #page_footer a {color:#6d8982;}
+            #bottom_logo {margin-bottom: 32px;}
+            #bottom_contacts_header {font-weight: bold;font-size:12px;margin-bottom: 4px;}
+            #bottom_contacts {margin-bottom: 8px;}
+            #bottom_contacts_big {display: none;}
+            #bottom_contacts_small {display: flex;color:#6d8982;}
         }
 
         @media (max-height: 1000px){
@@ -177,7 +219,7 @@
 <div id="top_line_container">
     <div class="container">
         <div id="top_line">
-            <div id="top_logo"><img src="/images/logo.png" alt="">Хватило</div>
+            <div id="top_logo"><a href="#"><img src="/images/logo.png" alt=""><span>Хватило</span></a></div>
             <div id="top_menu">
                 <a href="#page_autobasket">Автокорзина</a>
                 <a href="#page_meal_plan">План питания</a>
@@ -194,7 +236,9 @@
         <h1 class="big_index_greeting">Хватит</h1>
         <div class="container_row">
             <div>
-                <p class="text_secondary">Персональный помощник <br> по питанию: баланс, <br> энергия, порядок  <br>в холодильнике - <br> для всей семьи</p>
+                <p class="text_secondary">
+                    Персональный помощник <br> по питанию: баланс, <br class="big"> энергия,<br class="small"> порядок  <br class="big">в холодильнике - <br> для всей семьи
+                </p>
             </div>
             <div class="big_index_greeting">гадать</div>
         </div>
@@ -208,15 +252,15 @@
     <div id="page_autobasket_content">
         <div id="page_autobasket_content_description">
             <h2>Автокорзина</h2>
-            <p>Вы выбираете, сколько человек в семье, указываете, на сколько дней нужны <br /> продукты — и приложение мгновенно собирает корзину с учётом порций.
+            <p>Вы выбираете, сколько человек в семье, <wbr/>указываете, на сколько дней нужны <wbr/> <span class="nobreak">продукты — и приложение</span> мгновенно <br class="small"/>собирает корзину с учётом порций.
-                <br> На выходе — чёткий список покупок, разбитый по отделам магазина</p>
+                <br> На выходе — <span class="nobreak">чёткий список покупок</span>, <br class="small" />разбитый по отделам магазина</p>
         </div>
         <div id="page_autobasket_images">
             <div>
                 <img src="/images/autobasket_1.png" alt="">
                 <div>
                     <h3>Никаких сомнений</h3>
-                    <p>Забудьте про мучительные вопросы «А хватит ли?», «А что купить ещё?»</p>
+                    <p>Забудьте про мучительные вопросы <br>«А хватит ли?», «А что купить ещё?»</p>
                 </div>
             </div>
             <div>
@@ -227,7 +271,9 @@
                 </div>
             </div>
             <div>
-                <img src="/images/autobasket_3.png" alt="">
+                <div class="autobasket_image_wrapper">
+                    <img src="/images/broc_happy.png" alt="">
+                </div>
                 <div>
                     <h3>Всё схвачено</h3>
                     <p>Мы уже учли, что есть в магазине</p>
@@ -246,6 +292,7 @@
                 рецептов собираете план на день/неделю, планом <br>
                 можно делиться с другими пользователями!
             </p>
+            <img id="page_meal_plan_broc_small" src="/images/broc_diet.png" alt="">
             <div id="page_meal_plan_items">
                 <div class="page_meal_plan_item">
                     <div><img src="/images/balance-icon.png" alt=""></div>
@@ -257,12 +304,13 @@
                 </div>
                 <div class="page_meal_plan_item">
                     <div><img src="/images/personalization-icon.png" alt=""></div>
-                    <div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, что готовить, без ваших объяснений</p></div>
+                    <div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, <wbr><span>что готовить,</span> без ваших
+                        <br class="small">объяснений</p></div>
                 </div>
             </div>
         </div>
         <div>
-            <img id="page_meal_plan_broc" src="/images/broc_meal_plan.png" alt="">
+            <img id="page_meal_plan_broc" src="/images/broc_diet.png" alt="">
         </div>
     </div>
 </div>
@@ -270,22 +318,22 @@
     <div id="page_how_it_works_content" class="container">
         <h2>Как это работает</h2>
         <br>
-        <br>
+        <br class="big">
         <p class="description_large">
-            Добавляете любимые рецепты и указываете <br>
+            Вы выбираете, что хотите приготовить &mdash; Hvatilo <br>
-            возможные замены для продуктов. Из готовых
+            помогает собрать остальное
         </p>
         <div id="page_how_it_works_steps">
             <div id="page_how_it_works_step_1">
                 <img src="/images/smile-icon.png" class="step-image" alt="">
-                <p>Открываете сегодняшний <br> день в плане питания</p>
+                <p>Открываете сегодняшний <br class="big"> день <br class="small">в плане питания</p>
             </div>
             <div class="page_how_it_works_steps_arrow">
                 <img src="/images/arrow-1.png" alt="" id="page_how_it_works_step_1_arrow">
             </div>
             <div id="page_how_it_works_step_2">
                 <img src="/images/laugh-icon.png" class="step-image" alt="">
-                <p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br>с новым списком покупок</p>
+                <p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br class="big">с новым <br class="small"> списком покупок</p>
             </div>
             <div class="page_how_it_works_steps_arrow"><img src="/images/arrow-2.png" alt="" id="page_how_it_works_step_2_arrow"></div>
             <div id="page_how_it_works_step_3">
@@ -298,11 +346,11 @@
             <div id="page_how_it_works_info_content">
                 <ul>
                 <li>
-                    <span>Отсутствие продукта в магазине не сломает приём пищи: <br> автокорзина подстроится под наличие</span>
+                    <span>Отсутствие продукта в магазине <br class="small">не сломает приём пищи: <br><br class="small"> автокорзина подстроится <br class="small">под наличие</span>
                 </li>
-                <li>
+                <li>&nbsp;
-                    &nbsp;
+                    <span>В холодильнике только <br class="small"/>те продукты, которые вы успеете <br> съесть, в помойку отправится <br
-                    <span>В холодильнике только те продукты, которые вы успеете <br> съесть, в помойку отправится только упаковка</span>
+                            class="small">только упаковка</span>
                 </li>
                 </ul>
             </div>
@@ -312,11 +360,17 @@
         <div class="container container_row">
             <div>
                 <div id="bottom_logo"><img src="/images/logo.png" alt="">Хватило</div>
-                &copy; 2026 &mdash; <a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a> <br>
+                <div id="bottom_contacts_header">Контакты</div>
+                <div id="bottom_contacts"><a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a></div>
+                <div id="bottom_contacts_big">&copy; 2026 &mdash; <a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a> <br></div>
             </div>
             <div>
                 <a href="https://hvatilo.ru/app/offer" target="_blank">Пользовательское соглашение</a>
             </div>
+            <div id="bottom_contacts_small">&copy; 2026 <br>
+            <!--ООО &laquo;Дорфан&raquo;-->
+                Самозанятый Телятников Захар Александрович
+            </div>
         </div>
     </div>
 </div>