Refresh storefront design with full-bleed hero and new type system

Co-authored-by: Cursor <cursoragent@cursor.com>

app/static/js/main.js

@@ -1,16 +1,25 @@
 (() => {
+  const header = document.querySelector(".site-header");
+  const onScroll = () => {
+    if (!header) return;
+    header.classList.toggle("is-scrolled", window.scrollY > 12);
+  };
+  onScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+
   const reveals = document.querySelectorAll(".reveal");
   if ("IntersectionObserver" in window) {
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
+        entries.forEach((entry, index) => {
-          if (entry.isIntersecting) {
+          if (!entry.isIntersecting) return;
-            entry.target.classList.add("is-visible");
+          const el = entry.target;
-            observer.unobserve(entry.target);
+          el.style.transitionDelay = `${Math.min(index * 0.04, 0.2)}s`;
-          }
+          el.classList.add("is-visible");
+          observer.unobserve(el);
         });
       },
-      { threshold: 0.15 }
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
     );
     reveals.forEach((el) => observer.observe(el));
   } else {

app/templates/admin/base.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Manrope:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/css/style.css" />

app/templates/admin/login.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Manrope:wght@400;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Figtree:wght@400;600;700&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/css/style.css" />

app/templates/base.html

@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Manrope:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/css/style.css" />
@@ -31,9 +31,18 @@
     </header>
     <main>{% block content %}{% endblock %}</main>
     <footer class="site-footer" id="support">
+      <div class="footer-grid">
+        <div>
           <div class="footer-brand">{{ app_name }}</div>
-      <p>Цифровые товары с мгновенной выдачей. Вопросы: support@pitopn.shop</p>
+          <p>Цифровые товары с мгновенной выдачей.</p>
-      <p class="footer-copy">© {{ app_name }} 2026</p>
+        </div>
+        <div class="footer-links">
+          <a href="/#catalog">Каталог</a>
+          <a href="/lookup">Мой заказ</a>
+          <a href="/cart">Корзина</a>
+        </div>
+      </div>
+      <p class="footer-copy">© {{ app_name }} 2026 · support@pitopn.shop</p>
     </footer>
     <script src="/static/js/main.js" defer></script>
   </body>

app/templates/cart.html

@@ -9,44 +9,31 @@
   </div>
 
   {% if not items %}
-  <p class="empty">Корзина пуста. <a href="/#catalog">Перейти в каталог</a></p>
+  <div class="empty-state">
+    <p>Корзина пуста</p>
+    <a class="btn btn-primary" href="/#catalog">Перейти в каталог</a>
+  </div>
   {% else %}
-  <div class="table-wrap">
+  <div class="cart-list">
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th>Товар</th>
-          <th>Цена</th>
-          <th>Кол-во</th>
-          <th>Сумма</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
     {% for item in items %}
-        <tr>
+    <article class="cart-row tone-{{ item.product.image_gradient }}">
-          <td>
+      <div class="cart-thumb"><span class="product-mark">{{ item.product.title[:1] }}</span></div>
+      <div class="cart-info">
         <a href="/product/{{ item.product.slug }}">{{ item.product.title }}</a>
         <div class="muted">В наличии: {{ item.stock }}</div>
-          </td>
+      </div>
-          <td>{{ item.product.price | rub }}</td>
+      <div class="cart-price">{{ item.product.price | rub }}</div>
-          <td>
       <form method="post" action="/cart/update" class="inline-form">
         <input type="hidden" name="product_id" value="{{ item.product.id }}" />
         <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}" />
         <button class="btn btn-ghost btn-tiny" type="submit">OK</button>
       </form>
-          </td>
+      <div class="cart-line">{{ item.line_total | rub }}</div>
-          <td>{{ item.line_total | rub }}</td>
-          <td>
       <form method="post" action="/cart/remove/{{ item.product.id }}">
         <button class="btn btn-ghost btn-tiny" type="submit">Удалить</button>
       </form>
-          </td>
+    </article>
-        </tr>
     {% endfor %}
-      </tbody>
-    </table>
   </div>
   <div class="cart-summary">
     <div class="price big">Итого: {{ total | rub }}</div>

app/templates/index.html

@@ -2,21 +2,22 @@
 
 {% block content %}
 <section class="hero">
+  <div class="hero-bg" aria-hidden="true">
+    <div class="hero-mesh"></div>
+    <div class="hero-scan"></div>
+    <div class="hero-glyph">
+      <span></span><span></span><span></span>
+    </div>
+  </div>
   <div class="hero-copy">
     <p class="brand-mark">{{ app_name }}</p>
-    <h1>Цифровые товары без ожидания</h1>
+    <h1>Код приходит сразу после оплаты</h1>
-    <p class="hero-lead">
+    <p class="hero-lead">Ключи, софт и карты пополнения с автоматической выдачей.</p>
-      Ключи, софт и подарочные карты — оплатил и сразу получил код.
-    </p>
     <div class="hero-actions">
-      <a class="btn btn-primary" href="#catalog">Смотреть каталог</a>
+      <a class="btn btn-primary" href="#catalog">Открыть каталог</a>
       <a class="btn btn-ghost" href="/lookup">Найти заказ</a>
     </div>
   </div>
-  <div class="hero-visual" aria-hidden="true">
-    <div class="hero-plane"></div>
-    <div class="hero-orbit"></div>
-  </div>
 </section>
 
 <section class="categories" aria-label="Категории">
@@ -26,8 +27,9 @@
   </div>
   <ul class="category-list">
     {% for category in categories %}
-    <li>
+    <li class="reveal">
       <a class="category-link" href="#catalog">
+        <span class="category-index">0{{ loop.index }}</span>
         <span class="category-name">{{ category.name }}</span>
         <span class="category-desc">{{ category.description }}</span>
       </a>
@@ -39,14 +41,16 @@
 <section class="catalog" id="catalog">
   <div class="section-head">
     <h2>Каталог</h2>
-    <p>Популярные позиции с автоматической выдачей</p>
+    <p>Позиции с мгновенной выдачей цифрового кода</p>
   </div>
 
   {% if featured %}
   <div class="featured-rail" aria-label="Избранное">
     {% for product in featured %}
-    <article class="product product-featured gradient-{{ product.image_gradient }} reveal">
+    <article class="product product-featured tone-{{ product.image_gradient }} reveal">
-      <a class="product-media" href="/product/{{ product.slug }}"></a>
+      <a class="product-media" href="/product/{{ product.slug }}">
+        <span class="product-mark">{{ product.title[:1] }}</span>
+      </a>
       <div class="product-body">
         <p class="product-tag">{{ product.delivery_note }}</p>
         <h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
@@ -67,8 +71,10 @@
 
   <div class="product-grid">
     {% for product in products %}
-    <article class="product gradient-{{ product.image_gradient }} reveal">
+    <article class="product tone-{{ product.image_gradient }} reveal">
-      <a class="product-media" href="/product/{{ product.slug }}"></a>
+      <a class="product-media" href="/product/{{ product.slug }}">
+        <span class="product-mark">{{ product.title[:1] }}</span>
+      </a>
       <div class="product-body">
         <p class="product-tag">{{ product.delivery_note }}</p>
         <h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
@@ -95,17 +101,17 @@
     <p>Три шага до цифрового кода</p>
   </div>
   <ol class="steps">
-    <li>
+    <li class="reveal">
       <span class="step-num">01</span>
       <h3>Выберите товар</h3>
       <p>Добавьте ключ, подписку или карту в корзину.</p>
     </li>
-    <li>
+    <li class="reveal">
       <span class="step-num">02</span>
       <h3>Оформите заказ</h3>
-      <p>Укажите email — туда привязывается выдача.</p>
+      <p>Укажите email — к нему привязывается выдача.</p>
     </li>
-    <li>
+    <li class="reveal">
       <span class="step-num">03</span>
       <h3>Получите сразу</h3>
       <p>Коды открываются на странице заказа мгновенно.</p>

app/templates/product.html

@@ -5,15 +5,15 @@
 <section class="page-section product-page">
   <a class="back-link" href="/#catalog">← К каталогу</a>
   <div class="product-layout">
-    <div class="product-hero-media gradient-{{ product.image_gradient }}">
+    <div class="product-stage tone-{{ product.image_gradient }}">
-      <div class="product-media tall"></div>
+      <span class="product-mark xl">{{ product.title[:1] }}</span>
     </div>
     <div class="product-info">
       <p class="product-tag">{{ product.delivery_note }}</p>
       <h1>{{ product.title }}</h1>
       <p class="lead">{{ product.short_description }}</p>
-      <p>{{ product.description }}</p>
+      <p class="body-copy">{{ product.description }}</p>
-      <p class="stock-line">В наличии: {{ stock }} шт.</p>
+      <p class="stock-line">В наличии: <strong>{{ stock }}</strong> шт.</p>
       <div class="buy-row">
         <span class="price big">{{ product.price | rub }}</span>
         <form method="post" action="/cart/add/{{ product.id }}" class="inline-form">