{% extends "frontend/site/base.html" %}
{% load static %}
{% block extra_head %}<link rel="stylesheet" href="{% static 'css/brandbook.css' %}?v=20260914-layout-1">{% endblock %}
{% block content %}
{% with bb=page.brandbook %}
<div class="pm-site-page pm-brandbook" id="brandbook" data-brand-name="{{ bb.name }}" data-brand-slug="{{ bb.slug }}">
  <section class="pm-bb-hero" aria-labelledby="pm-bb-title">
    <div class="pm-bb-hero-copy">
      <p class="pm-bb-eyebrow"><span></span> {{ bb.name|upper }} / ФИРМЕННЫЙ СТИЛЬ <small>{{ bb.version }}</small></p>
      <h1 id="pm-bb-title">Забота,<br>которую <em>видно.</em></h1>
      <p class="pm-bb-lead">Знакомый знак. Чистый цвет. Пространство для главного. Визуальный язык медицинского центра — и всё, чтобы работать с ним уверенно.</p>
      <div class="pm-bb-actions"><a class="pm-bb-button pm-bb-button--blue" href="{{ bb.kit.url }}" download="{{ bb.kit.filename }}">Скачать весь комплект <span aria-hidden="true">↓</span></a><a class="pm-bb-link" href="{{ bb.guide.url }}">Открыть брендбук PDF <span aria-hidden="true">↗</span></a></div>
      <p class="pm-bb-file-note">{{ bb.kit.size }} · логотипы, шрифты, шаблоны и исходники</p><a class="pm-bb-link pm-bb-mockup-jump" href="#brand-mockups">Посмотреть реалистичные мокапы <span aria-hidden="true">↓</span></a>
    </div>
    <div class="pm-bb-hero-art">
      <div class="pm-bb-art-top">{% if bb.slug == "profenergomed" %}<span>ЛЕЧЕБНО-ДИАГНОСТИЧЕСКИЙ ЦЕНТР</span><span>ПРОФЭНЕРГОМЕД</span>{% else %}<span>МЕДИЦИНСКИЙ ЦЕНТР</span><span>ДЛЯ ВСЕЙ СЕМЬИ</span>{% endif %}</div>
      <i class="pm-bb-orbit pm-bb-orbit--one" aria-hidden="true"></i><i class="pm-bb-orbit pm-bb-orbit--two" aria-hidden="true"></i>
      <img src="{{ bb.heroLogo }}" width="480" height="480" alt="{{ bb.name }} — {{ bb.tagline }}" fetchpriority="high">
      <div class="pm-bb-art-bottom"><span>Один бренд.<br>В каждом прикосновении.</span><span aria-hidden="true">+</span></div>
    </div>
  </section>

  <nav class="pm-bb-nav" aria-label="Разделы брендбука"><a href="#brand-logo">Логотип</a><a href="#brand-rules">Правила</a><a href="#brand-colors">Цвета</a><a href="#brand-type">Шрифты</a><a href="#brand-mockups">Мокапы</a><a href="#brand-examples">Применение</a><a href="#brand-templates">Шаблоны</a><a href="#brand-downloads">Скачать <span aria-hidden="true">↓</span></a></nav>

  <section class="pm-bb-section" id="brand-logo" aria-labelledby="pm-bb-logo-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">01 / ЛОГОТИП</p><h2 id="pm-bb-logo-title">Узнаваемый.<br>В любом формате.</h2></div><p>Четыре готовые композиции для разных задач. Сохраняйте пропорции, выбирайте подходящий цвет — и используйте файл нужного размера.</p></div>
    <div class="pm-bb-config" data-brand-config>
      <div class="pm-bb-stage" data-logo-stage data-tone="light">
        <div class="pm-bb-stage-meta"><span data-logo-label>Горизонтальный с подписью</span><span>SVG / ВЕКТОР</span></div>
        <div class="pm-bb-stage-image"><img data-logo-preview src="{{ bb.default.svg }}" alt="{{ bb.name }} — горизонтальный логотип с подписью" width="{{ bb.default.width }}" height="{{ bb.default.height }}"></div>
        <div class="pm-bb-stage-bottom"><span>Чёткие линии.<br>Прозрачный фон.</span><div class="pm-bb-backgrounds" data-enhanced hidden role="group" aria-label="Фон предпросмотра"><button type="button" data-background="light" aria-label="Светлый фон" aria-pressed="true"><i></i></button><button type="button" data-background="blue" aria-label="Синий фон" aria-pressed="false"><i></i></button><button type="button" data-background="dark" aria-label="Тёмный фон" aria-pressed="false"><i></i></button><button type="button" data-background="grid" aria-label="Шахматный фон" aria-pressed="false"><i></i></button></div></div>
      </div>
      <div class="pm-bb-tools">
        <div data-enhanced hidden>
          <fieldset class="pm-bb-options"><legend>Компоновка</legend><div class="pm-bb-layouts">{% for layout in bb.layouts %}<button type="button" data-layout="{{ layout.id }}" aria-pressed="{% if layout.id == 'horizontal' %}true{% else %}false{% endif %}">{{ layout.title }}</button>{% endfor %}</div></fieldset>
          <fieldset class="pm-bb-options"><legend>Цвет</legend><div class="pm-bb-colors">{% for color in bb.colors %}<button type="button" data-color="{{ color.id }}" aria-pressed="{% if color.id == 'color' %}true{% else %}false{% endif %}"><i class="pm-bb-swatch-{{ color.id }}"></i>{{ color.name }}</button>{% endfor %}</div></fieldset>
          <fieldset class="pm-bb-options"><legend>Размер PNG</legend><div class="pm-bb-sizes"><button type="button" data-png-size="1024" aria-pressed="false">1024 px</button><button type="button" data-png-size="2048" aria-pressed="false">2048 px</button><button type="button" data-png-size="4096" aria-pressed="true">4096 px</button></div></fieldset>
        </div>
        <div class="pm-bb-download-pair"><a class="pm-bb-button pm-bb-button--blue" data-logo-svg href="{{ bb.default.svg }}" download>Скачать SVG <span aria-hidden="true">↓</span></a><a class="pm-bb-button pm-bb-button--soft" data-logo-png href="{{ bb.default.png.4096 }}" download>PNG <span aria-hidden="true">↓</span></a></div>
        <p class="pm-bb-tool-note" data-logo-status role="status">SVG — для любого масштаба. PNG — 4096 px по большей стороне.</p>
        <p class="pm-bb-load-error" data-logo-error hidden>Предпросмотр не загрузился. Файлы доступны по кнопкам скачивания.</p>
        <noscript><p class="pm-bb-tool-note">Все композиции, цвета и размеры доступны в архиве «Логотипы и иконки» ниже.</p></noscript>
      </div>
    </div>
    <div class="pm-bb-principles"><article><span>01</span><h3>Знакомая форма</h3><p>Оригинальные контуры и надписи сохранены.</p></article><article><span>02</span><h3>Настоящий вектор</h3><p>Без растровых вставок, размытия и зависимости от шрифтов.</p></article><article><span>03</span><h3>Свободный масштаб</h3><p>От небольшого знака до крупного носителя.</p></article></div>
  </section>

  <section class="pm-bb-section" id="brand-rules" aria-labelledby="pm-bb-rules-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">02 / ПРАВИЛА</p><h2 id="pm-bb-rules-title">Воздух —<br>часть логотипа.</h2></div><p>Свободное поле и подходящий фон сохраняют читаемость. Схемы показывают, как размещать знак и каких изменений избегать.</p></div>
    <div class="pm-bb-rules-grid"><figure class="pm-bb-clearspace"><img src="{{ bb.clearspaceImage }}" alt="Охранное поле: полная ширина медицинского креста со всех сторон от видимого контура" width="1120" height="820" loading="lazy"><figcaption><strong>Не меньше x со всех сторон</strong><span>x — полная ширина медицинского креста. Поле добавляется в макете, за пределами файла.</span></figcaption></figure><div class="pm-bb-minimum"><span class="pm-bb-index">МИНИМАЛЬНАЯ ШИРИНА</span><strong>{{ bb.rules.minimum_print_mm }}<span>мм</span></strong><p>{{ bb.rules.minimum_source }} На экране проверяйте читаемость подписи в реальном размере.</p><div><h3>Мало места?</h3><p>Выбирайте композицию без подписи или отдельный знак.</p><img src="{{ bb.compactLogo }}" width="896" height="147" alt="Компактная версия без подписи" loading="lazy"></div></div></div>
    <div class="pm-bb-mistake-cards">{% for item in bb.mistakes %}<article><img src="{{ item.url }}" width="440" height="220" alt="Пример ошибки: {{ item.title|lower }}" loading="lazy"><h3><span aria-hidden="true">×</span> {{ item.title }}</h3></article>{% endfor %}</div><p class="pm-bb-caption">Используйте готовый файл. Не меняйте геометрию, цвет и взаимное расположение элементов.</p>
  </section>

  <section class="pm-bb-section" id="brand-colors" aria-labelledby="pm-bb-colors-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">03 / ПАЛИТРА</p><h2 id="pm-bb-colors-title">Синий.<br>И много света.</h2></div><p>Основной синий — для узнаваемости, дополнительный — для акцентов, светлый фон — для свободного пространства.</p></div>
    <div class="pm-bb-palette">{% for color in bb.palette %}<article class="pm-bb-color-card pm-bb-color-card--{{ color.id }}"><h3>{{ color.name }}</h3><div><button type="button" data-copy-color="{{ color.hex }}" aria-label="Скопировать цвет {{ color.hex }}">{{ color.hex }} <span aria-hidden="true">⧉</span></button><dl><div><dt>RGB</dt><dd>{% for n in color.rgb %}{{ n }}{% if not forloop.last %} / {% endif %}{% endfor %}</dd></div><div><dt>CMYK</dt><dd>{% for n in color.cmyk %}{{ n }}{% if not forloop.last %} / {% endif %}{% endfor %}</dd></div></dl></div><p>{{ color.role }}</p></article>{% endfor %}</div>
    <div class="pm-bb-palette-notes"><p>{{ bb.paletteNote }}</p><p data-copy-status role="status" aria-live="polite">Нажмите HEX, чтобы скопировать цвет.</p></div>
  </section>

  <section class="pm-bb-section" id="brand-type" aria-labelledby="pm-bb-type-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">04 / ТИПОГРАФИКА</p><h2 id="pm-bb-type-title">Ясно.<br>По-человечески.</h2></div><p>Franklin Gothic объединяет брендбук и сайт. Начертания создают иерархию: от уверенного заголовка до спокойного основного текста.</p></div>
    <div class="pm-bb-type-grid"><div class="pm-bb-type-specimen"><span>FRANKLIN GOTHIC</span><h3>Забота<br>о главном.</h3><p>Медицинский центр<br>для всей семьи.</p><div>Аа Бб Вв Гг Дд Ее Ёё Жж Зз<br>0123456789</div></div><div class="pm-bb-type-roles"><article><div><h3>Demi</h3><p>Заголовки и акценты</p></div><b>Аа</b></article><article><div><h3>Medium</h3><p>Подзаголовки и интерфейс</p></div><strong>Аа</strong></article><article><div><h3>Book</h3><p>Основной текст</p></div><span>Аа</span></article><p class="pm-bb-type-note">{{ bb.typeNote }}</p><a class="pm-bb-link" href="#brand-downloads">Скачать шрифты <span aria-hidden="true">↓</span></a></div></div>
  </section>

  <section class="pm-bb-section" id="brand-mockups" aria-labelledby="pm-bb-mockups-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">05 / МОКАПЫ</p><h2 id="pm-bb-mockups-title">Стиль становится<br>осязаемым.</h2></div><p>Реалистичные примеры на настоящих типах носителей: ресепшен, фирменные документы, медицинская форма и бейдж.</p></div>
    <div class="pm-bb-mockups">{% for item in bb.mockups %}<figure>
      <a href="{{ item.image }}" data-example-link data-example-title="{{ item.title }}" data-example-source="{{ item.source }}" aria-label="{{ item.title }} — открыть мокап"><img src="{{ item.preview }}" alt="{{ item.title }} — концептуальный мокап {{ bb.genitive }}" width="1536" height="1024" loading="lazy"><span aria-hidden="true">↗</span></a>
      <figcaption><h3>{{ item.title }}</h3><p>{{ item.description }}</p><a class="pm-bb-link" href="{{ item.source }}" download>Скачать PNG <span aria-hidden="true">↓</span></a></figcaption>
    </figure>{% endfor %}</div>
    <p class="pm-bb-caption">Концептуальные визуализации, созданные с ИИ. Показывают применение стиля и не являются фотографиями действующей клиники. Для производства используйте векторные мастера.</p>
  </section>

  <section class="pm-bb-section" id="brand-examples" aria-labelledby="pm-bb-examples-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">06 / ПРИМЕНЕНИЕ</p><h2 id="pm-bb-examples-title">Один характер.<br>Разные носители.</h2></div><p>От документа до вывески. Векторные примеры показывают, как логотип, типографика и цвет работают вместе.</p></div>
    <div class="pm-bb-examples">{% for example in bb.examples %}<figure><a class="pm-bb-example-image" href="{{ example.svg }}" data-example-link data-example-title="{{ example.title }}"><img src="{{ example.preview }}" width="1600" height="1080" alt="{{ example.title }} — пример применения фирменного стиля" loading="lazy" decoding="async"><span aria-hidden="true">↗</span></a><figcaption><h3>{{ example.title }}</h3><p>{{ example.description }}</p></figcaption></figure>{% endfor %}</div>
    <p class="pm-bb-caption">Демонстрационные композиции. Данные заменяются при подготовке материалов; примеры не являются производственными чертежами.</p>
  </section>

  <section class="pm-bb-section" id="brand-templates" aria-labelledby="pm-bb-templates-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">07 / ШАБЛОНЫ</p><h2 id="pm-bb-templates-title">Начните<br>с готового.</h2></div><p>Четыре основы для повседневной работы. Откройте SVG в векторном редакторе и замените текст, сохраняя поля и композицию.</p></div>
    <div class="pm-bb-templates">{% for item in bb.templates %}<article><div class="pm-bb-template-preview"><img src="{{ item.preview }}" alt="{{ item.name }} — готовый шаблон" width="720" height="720" loading="lazy"></div><div class="pm-bb-template-info"><span>{{ item.format }}</span><h3>{{ item.name }}</h3><p>{{ item.description }}</p><div><a href="{{ item.url }}" download>Редактировать SVG <span aria-hidden="true">↓</span></a><a href="{{ item.outlined_url }}" download>В кривых <span aria-hidden="true">↓</span></a></div></div></article>{% endfor %}</div>
    <p class="pm-bb-caption">В основной версии текст остаётся редактируемым. Версия «В кривых» одинаково выглядит без установленных шрифтов.</p>
  </section>

  <section class="pm-bb-section pm-bb-download-section" id="brand-downloads" aria-labelledby="pm-bb-downloads-title">
    <div class="pm-bb-section-head"><div><p class="pm-bb-index">08 / МАТЕРИАЛЫ</p><h2 id="pm-bb-downloads-title">Всё необходимое.<br>В одном месте.</h2></div><p>Полный комплект или отдельные материалы под задачу. В архиве исходников — оригинальные файлы, чистые мастера и скрипты повторной сборки.</p></div>
    <div class="pm-bb-downloads">{% for item in bb.downloads %}<a href="{{ item.url }}" download="{{ item.filename }}" class="pm-bb-download{% if item.id == 'kit' %} pm-bb-download--primary{% endif %}"><span class="pm-bb-download-format">{{ item.format }}</span><div><h3>{{ item.title }}</h3><p>{{ item.description }}</p><small>{{ item.size }} · {{ item.filename }}</small></div><span class="pm-bb-download-arrow" aria-hidden="true">↓</span></a>{% endfor %}</div>
    <div class="pm-bb-final-note"><p>Версия {{ bb.version }} · 13 сентября 2026</p><p>Знакомый знак и единая подача. Комплект объединяет правила, наглядные примеры и подготовленные файлы.</p></div>
  </section>
</div>
<dialog class="pm-bb-dialog" data-example-dialog aria-labelledby="pm-bb-dialog-title"><div class="pm-bb-dialog-bar"><h2 id="pm-bb-dialog-title">Пример применения</h2><button type="button" data-example-close aria-label="Закрыть просмотр">×</button></div><div class="pm-bb-dialog-body"><img data-example-image alt=""><p data-example-error hidden>Не удалось загрузить изображение. Скачайте исходный файл по ссылке ниже.</p></div><a class="pm-bb-button pm-bb-button--blue" data-example-download download><span data-example-download-label>Скачать исходный SVG</span> <span aria-hidden="true">↓</span></a></dialog>
{{ bb.variants|json_script:"pm-brand-variants" }}
{% endwith %}
{% endblock %}
{% block extra_scripts %}<script defer src="{% static 'js/brandbook.js' %}?v=20260914-layout-1"></script>{% endblock %}