feat(sprint-2): цвета, типографика, оффлайн элементы

Страницы фундамента:
- /foundation/colors — палитра 7 цветов, HEX/RGB/HSL/CSS-var с копированием,
  WCAG-контраст 7 пар, экспорт JSON-токенов
- /foundation/typography — DINPro (оффлайн) + Fira Sans (веб), шкалы,
  таблица применения, живой пример

Оффлайн элементы (5 страниц):
- /offline/uniform — схема формы, таблица размеров логотипа
- /offline/badges — макеты бейджей 70×30 мм (светлый/тёмный)
- /offline/navigation — 4 шаблона табличек, цвета Oracal
- /offline/transport — CSS-макет трамвая, трёхполосная схема
- /offline/print — макеты визитки и листовки А5, Telegram-бот

Sidebar: убраны «скоро» для Цветов, Типографики, всех Оффлайн
Версия: Sprint 2 · v0.2.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/offline/print/page.tsx

@@ -0,0 +1,331 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Печатные материалы | Брендбук О!Клиника",
+};
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/* Макет визитки */
+function BusinessCardMockup({ side }: { side: "front" | "back" }) {
+  /* 90×50 мм → пропорция 9:5. Отображаем 288×160px */
+  if (side === "front") {
+    return (
+      <div
+        className="rounded-xl overflow-hidden shadow-md"
+        style={{ width: 288, height: 160, background: "#5b7b87", flexShrink: 0 }}
+      >
+        {/* Верхняя бирюзовая полоса */}
+        <div style={{ height: 6, background: "#7ecfca" }} />
+
+        <div className="flex h-full">
+          {/* Левая колонка с логотипом */}
+          <div
+            className="flex items-center justify-center px-6"
+            style={{ width: 110, borderRight: "1px solid rgba(255,255,255,0.15)" }}
+          >
+            <Image
+              src="/logo/logo-transparent.png"
+              alt="Логотип"
+              width={80}
+              height={28}
+              className="object-contain"
+              style={{ filter: "brightness(0) invert(1)" }}
+            />
+          </div>
+
+          {/* Правая колонка с данными */}
+          <div className="flex flex-col justify-center px-5 pb-2 gap-1">
+            <p
+              style={{
+                fontFamily: "'DINPro', Arial, sans-serif",
+                fontSize: 12,
+                fontWeight: 700,
+                color: "#ffffff",
+              }}
+            >
+              Иванова Анна Викторовна
+            </p>
+            <p
+              style={{
+                fontFamily: "'DINPro', Arial, sans-serif",
+                fontSize: 9,
+                color: "rgba(255,255,255,0.7)",
+              }}
+            >
+              Врач-оториноларинголог
+            </p>
+            <div className="mt-2 space-y-0.5">
+              {["+7 (495) 000-00-00", "oclinica.ru"].map(line => (
+                <p
+                  key={line}
+                  style={{
+                    fontFamily: "'DINPro', Arial, sans-serif",
+                    fontSize: 8,
+                    color: "rgba(255,255,255,0.6)",
+                  }}
+                >
+                  {line}
+                </p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden shadow-md flex items-center justify-center"
+      style={{ width: 288, height: 160, background: "#c4a882", flexShrink: 0 }}
+    >
+      <Image
+        src="/logo/logo-transparent.png"
+        alt="Логотип на обороте"
+        width={140}
+        height={50}
+        className="object-contain"
+        style={{
+          filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
+        }}
+      />
+    </div>
+  );
+}
+
+/* Макет листовки */
+function LeafletMockup() {
+  /* А5 = 148×210 мм → пропорция ≈ 1:1.42. Отображаем 180×256px */
+  return (
+    <div
+      className="rounded-xl overflow-hidden shadow-md"
+      style={{ width: 180, height: 256, background: "#ffffff", border: "1px solid #e5e7eb", flexShrink: 0 }}
+    >
+      {/* Шапка */}
+      <div
+        className="px-4 pt-4 pb-3 flex items-end justify-between"
+        style={{ background: "#5b7b87" }}
+      >
+        <Image
+          src="/logo/logo-transparent.png"
+          alt="Логотип"
+          width={90}
+          height={32}
+          className="object-contain"
+          style={{ filter: "brightness(0) invert(1)" }}
+        />
+      </div>
+
+      {/* Тело */}
+      <div className="px-4 pt-3">
+        {/* Плейсхолдер фото */}
+        <div
+          className="w-full rounded mb-3"
+          style={{ height: 70, background: "#e0f5f4" }}
+        />
+        {/* Заголовок */}
+        <div
+          className="h-3 rounded mb-1.5"
+          style={{ background: "#1b4c72", width: "80%" }}
+        />
+        <div
+          className="h-3 rounded mb-3"
+          style={{ background: "#1b4c72", width: "60%" }}
+        />
+        {/* Текст-заглушка */}
+        {[100, 90, 95, 80].map((w, i) => (
+          <div
+            key={i}
+            className="h-1.5 rounded mb-1"
+            style={{ background: "#e5e7eb", width: `${w}%` }}
+          />
+        ))}
+        {/* CTA-кнопка */}
+        <div
+          className="mt-4 rounded py-2 text-center"
+          style={{ background: "#7ecfca" }}
+        >
+          <p
+            style={{
+              fontFamily: "'DINPro', Arial, sans-serif",
+              fontSize: 9,
+              fontWeight: 700,
+              color: "#ffffff",
+            }}
+          >
+            ЗАПИСАТЬСЯ НА ПРИЁМ
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function PrintPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Оффлайн элементы → 6.5
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Печатные материалы
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Листовки, визитки и digital-каналы клиники. Все материалы следуют
+          единому фирменному стилю с использованием шрифта DINPro и цветов Oracal.
+        </p>
+      </div>
+
+      {/* Визитки */}
+      <Section
+        title="Визитки"
+        subtitle="Стандарт 90×50 мм. Двусторонняя печать. Изображены в масштабе."
+      >
+        <div className="flex flex-wrap gap-6 items-start">
+          <div className="flex flex-col items-center gap-2">
+            <BusinessCardMockup side="front" />
+            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Лицевая сторона</p>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <BusinessCardMockup side="back" />
+            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Оборотная сторона</p>
+          </div>
+        </div>
+
+        <div
+          className="mt-6 overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Элемент", "Содержание"].map(h => (
+                  <th key={h} className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Лицевая — логотип", "Белый инвертированный на тёмно-серо-голубом фоне"],
+                ["Лицевая — ФИО", "DINPro Bold, 10pt, белый"],
+                ["Лицевая — должность", "DINPro Regular, 8pt, белый 70%"],
+                ["Лицевая — контакты", "DINPro Regular, 7pt, белый 60%"],
+                ["Оборотная", "Логотип тёмно-коричневый на бежевом фоне (081M)"],
+                ["Размер", "90 × 50 мм, 4+4 офсет или цифровая печать"],
+              ].map(([el, content]) => (
+                <tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
+                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* Листовки */}
+      <Section
+        title="Листовки"
+        subtitle="Формат А5 (148×210 мм). Шаблон для акций и информационных материалов."
+      >
+        <div className="flex gap-8 items-start">
+          <LeafletMockup />
+          <div className="flex-1">
+            <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
+              Структура листовки
+            </p>
+            <div className="space-y-3">
+              {[
+                { zone: "Шапка", desc: "Логотип белый на тёмно-серо-голубом (073M)" },
+                { zone: "Фото", desc: "Фото врача или процедуры, 70% ширины" },
+                { zone: "Заголовок", desc: "DINPro Bold, тёмно-синий (050M), 18–22pt" },
+                { zone: "Текст", desc: "DINPro Regular, 9–10pt, серый #374151" },
+                { zone: "CTA-кнопка", desc: "Основной бирюзовый (053M), DINPro Bold белый" },
+              ].map(({ zone, desc }) => (
+                <div key={zone} className="flex gap-3">
+                  <span
+                    className="shrink-0 text-xs font-semibold px-2 py-0.5 rounded mt-0.5"
+                    style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
+                  >
+                    {zone}
+                  </span>
+                  <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Telegram-бот */}
+      <Section
+        title="Telegram-бот"
+        subtitle="Цифровой канал взаимодействия с пациентами."
+      >
+        <div
+          className="rounded-xl border p-6"
+          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+        >
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            {[
+              { icon: "🤖", title: "Запись на приём", desc: "Выбор врача, даты и времени через бот" },
+              { icon: "📋", title: "Результаты анализов", desc: "Уведомления и просмотр результатов" },
+              { icon: "💬", title: "Напоминания", desc: "Напоминание о предстоящем визите" },
+            ].map(({ icon, title, desc }) => (
+              <div key={title} className="flex gap-3">
+                <span className="text-2xl shrink-0">{icon}</span>
+                <div>
+                  <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+                    {title}
+                  </p>
+                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            className="mt-4 pt-4 border-t text-xs"
+            style={{ borderColor: "var(--bb-border)", color: "var(--bb-text-muted)" }}
+          >
+            В Telegram-боте используется системный шрифт Telegram. Логотип и цвета бренда
+            применяются в аватаре, приветственном изображении и кнопках меню.
+          </div>
+        </div>
+      </Section>
+
+    </div>
+  );
+}