v3: правила с версионированием и статусами изменений

index.html

@@ -63,12 +63,33 @@ body{font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,s
 
 /* Rules grid */
 .rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
-.rule-card{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:32px;transition:all .3s}
+.rule-card{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:32px;transition:all .3s;position:relative}
 .rule-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.06);transform:translateY(-4px);border-color:var(--cyan-50)}
+.rule-card.modified{border-left:4px solid #f59e0b}
+.rule-card.added{border-left:4px solid #22c55e}
 .rule-icon{font-size:32px;margin-bottom:16px}
-.rule-card h3{font-size:20px;font-weight:700;margin-bottom:10px}
+.rule-card h3{font-size:20px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
 .rule-card p{font-size:15px;color:var(--gray-500);line-height:1.6}
 .rule-tag{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:var(--cyan);background:var(--cyan-50);padding:4px 12px;border-radius:100px}
+.rule-chip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 10px;border-radius:100px}
+.rule-chip.modified{background:#fef3c7;color:#92400e}
+.rule-chip.added{background:#dcfce7;color:#166534}
+.version-badge{font-size:13px;color:var(--gray-500);background:var(--gray-100);padding:6px 14px;border-radius:100px;font-weight:500}
+
+/* Version archive */
+.version-archive{margin-top:48px;border:1px solid var(--gray-100);border-radius:12px;overflow:hidden}
+.version-archive-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;cursor:pointer;font-size:15px;font-weight:600;background:var(--gray-100);transition:background .2s}
+.version-archive-header:hover{background:#e5e7eb}
+.version-arrow{font-size:12px;transition:transform .3s}
+.version-archive.open .version-arrow{transform:rotate(180deg)}
+.version-archive-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
+.version-archive.open .version-archive-body{max-height:400px}
+.version-row{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--gray-100);font-size:14px}
+.version-row:last-child{border-bottom:none}
+.version-row.current{background:var(--cyan-50)}
+.version-num{font-weight:700;color:var(--ink);white-space:nowrap;min-width:40px}
+.version-date{color:var(--gray-500);white-space:nowrap;min-width:110px;font-size:13px}
+.version-desc{color:var(--gray-500);font-size:13px}
 
 /* Steps */
 .steps{background:var(--gray-100)}
@@ -78,24 +99,6 @@ body{font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,s
 .step h3{font-size:18px;font-weight:700;margin-bottom:8px}
 .step p{font-size:15px;color:var(--gray-500);line-height:1.5}
 
-/* Changes timeline */
-.changes{background:var(--gray-100)}
-.timeline{max-width:760px;margin:0 auto;position:relative}
-.timeline::before{content:'';position:absolute;left:32px;top:0;bottom:0;width:2px;background:var(--gray-100)}
-.timeline-item{display:flex;gap:20px;margin-bottom:28px;position:relative}
-.timeline-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:4px;position:relative;z-index:1}
-.timeline-dot.added{background:#22c55e}
-.timeline-dot.modified{background:#f59e0b}
-.timeline-dot.removed{background:#ef4444}
-.timeline-content{flex:1;background:var(--white);border-radius:12px;padding:20px 24px;border:1px solid var(--gray-100)}
-.timeline-date{font-size:13px;color:var(--gray-500);margin-bottom:6px}
-.timeline-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 10px;border-radius:100px;margin-bottom:8px}
-.timeline-badge.added{background:#dcfce7;color:#166534}
-.timeline-badge.modified{background:#fef3c7;color:#92400e}
-.timeline-badge.removed{background:#fee2e2;color:#991b1b}
-.timeline-content h4{font-size:16px;font-weight:700;margin-bottom:4px}
-.timeline-content p{font-size:14px;color:var(--gray-500);line-height:1.5}
-
 /* FAQ */
 .faq-list{max-width:760px;margin:0 auto}
 .faq-item{border-bottom:1px solid var(--gray-100);padding:20px 0}
@@ -144,7 +147,6 @@ body{font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,s
     </a>
     <nav class="nav">
       <a href="#rules">Правила</a>
-      <a href="#changes" class="nav-highlight">📋 Изменения</a>
       <a href="#how">Как это работает</a>
       <a href="#faq">FAQ</a>
       <a href="https://wa.me/77777777777" style="color:var(--ink);font-weight:600">Связаться</a>
@@ -186,27 +188,30 @@ body{font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,s
 
 <section id="rules" class="section">
   <div class="container">
-    <div class="section-label">Правила</div>
+    <div class="section-label">Правила • Версия 2.1</div>
-    <h2>Что покрывает программа обучения</h2>
+    <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px">
-    <p class="section-sub">Все сотрудники могут развиваться за счёт компании. Вот основные направления:</p>
+      <h2 style="margin-bottom:0">Что покрывает программа обучения</h2>
+      <span class="version-badge">актуально на 15 июня 2026</span>
+    </div>
+    <p class="section-sub">Все сотрудники могут развиваться за счёт компании. Правила регулярно обновляются — следите за версиями.</p>
     <div class="rules-grid">
-      <div class="rule-card">
+      <div class="rule-card modified">
         <div class="rule-icon">📚</div>
-        <h3>Профессиональные курсы</h3>
+        <h3>Профессиональные курсы <span class="rule-chip modified">изменено</span></h3>
-        <p>Компания компенсирует до 200 000 ₸ в год на профильные онлайн-курсы, тренинги и мастер-классы.</p>
+        <p>Компания компенсирует до 200 000 ₸ в год на профильные онлайн-курсы, тренинги и мастер-классы. <strong>Добавлены курсы по Soft Skills</strong> — до 150 000 ₸/год дополнительно.</p>
-        <span class="rule-tag">до 200 000 ₸/год</span>
+        <span class="rule-tag">до 350 000 ₸/год</span>
       </div>
-      <div class="rule-card">
+      <div class="rule-card modified">
         <div class="rule-icon">🎓</div>
-        <h3>Сертификация</h3>
+        <h3>Сертификация <span class="rule-chip modified">изменено</span></h3>
-        <p>Подготовка и сдача профессиональных экзаменов (PMP, AWS, CFA и др.) оплачиваются полностью при одобрении руководителя.</p>
+        <p>Подготовка и сдача профессиональных экзаменов (PMP, AWS, CFA и др.) оплачиваются полностью при одобрении руководителя. <strong>Пересдача — одна за счёт компании.</strong></p>
         <span class="rule-tag">100% оплата</span>
       </div>
-      <div class="rule-card">
+      <div class="rule-card modified">
         <div class="rule-icon">🗣️</div>
-        <h3>Конференции и митапы</h3>
+        <h3>Конференции и митапы <span class="rule-chip modified">изменено</span></h3>
-        <p>Участие в профильных конференциях до 2 раз в год. Включает билеты, дорогу и проживание.</p>
+        <p>Участие в профильных конференциях <strong>до 2 раз в год</strong> (было 1). Включает билеты, дорогу и проживание. Бюджет — до 300 000 ₸.</p>
-        <span class="rule-tag">2 раза в год</span>
+        <span class="rule-tag">до 2 раз/год</span>
       </div>
       <div class="rule-card">
         <div class="rule-icon">🌐</div>
@@ -220,65 +225,34 @@ body{font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,s
         <p>Доступ к подпискам на профессиональную литературу (O'Reilly, Bookmate, ЛитРес) для всех сотрудников.</p>
         <span class="rule-tag">бесплатно</span>
       </div>
-      <div class="rule-card">
+      <div class="rule-card added">
         <div class="rule-icon">🧭</div>
-        <h3>Менторинг и карьерные консультации</h3>
+        <h3>Менторинг-программа <span class="rule-chip added">новое</span></h3>
-        <p>Внутренние менторы и карьерные консультации от HR и senior-специалистов компании.</p>
+        <p>Каждый сотрудник может получить ментора из числа senior-специалистов на 3 месяца. Запись через HR-портал.</p>
         <span class="rule-tag">по запросу</span>
       </div>
     </div>
-  </div>
-</section>
 
-<section id="changes" class="section changes">
+    <div class="version-archive">
-  <div class="container">
+      <div class="version-archive-header" onclick="this.parentElement.classList.toggle('open')">
-    <div class="section-label">История изменений</div>
+        <span>📦 Архив версий</span>
-    <h2>Изменения и дополнения Правил</h2>
+        <span class="version-arrow">▼</span>
-    <p class="section-sub">Все актуальные правки, новые пункты и уточнения — в хронологическом порядке.</p>
-    <div class="timeline">
-      <div class="timeline-item">
-        <div class="timeline-dot added"></div>
-        <div class="timeline-content">
-          <div class="timeline-date">15 июня 2026</div>
-          <span class="timeline-badge added">добавлено</span>
-          <h4>Курсы по Soft Skills</h4>
-          <p>Добавлен новый пункт: компании оплачивает курсы по коммуникации, управлению временем и лидерству — до 150 000 ₸/год.</p>
-        </div>
       </div>
-      <div class="timeline-item">
+      <div class="version-archive-body">
-        <div class="timeline-dot modified"></div>
+        <div class="version-row current">
-        <div class="timeline-content">
+          <span class="version-num">v2.1</span>
-          <div class="timeline-date">1 июня 2026</div>
+          <span class="version-date">15 июня 2026</span>
-          <span class="timeline-badge modified">изменено</span>
+          <span class="version-desc">Добавлены курсы Soft Skills, увеличен лимит конференций до 2, уточнены условия сертификации</span>
-          <h4>Лимит на конференции увеличен</h4>
-          <p>Максимальное количество конференций в год увеличено с 1 до 2. Бюджет на поездки — до 300 000 ₸.</p>
         </div>
-      </div>
+        <div class="version-row">
-      <div class="timeline-item">
+          <span class="version-num">v2.0</span>
-        <div class="timeline-dot added"></div>
+          <span class="version-date">1 апреля 2026</span>
-        <div class="timeline-content">
+          <span class="version-desc">Бюджет на курсы повышен до 200 000 ₸, запущена менторинг-программа</span>
-          <div class="timeline-date">15 мая 2026</div>
-          <span class="timeline-badge added">добавлено</span>
-          <h4>Менторинг-программа</h4>
-          <p>Запущена внутренняя программа менторинга: каждый сотрудник может получить ментора из числа senior-специалистов на 3 месяца.</p>
         </div>
-      </div>
+        <div class="version-row">
-      <div class="timeline-item">
+          <span class="version-num">v1.0</span>
-        <div class="timeline-dot modified"></div>
+          <span class="version-date">1 января 2026</span>
-        <div class="timeline-content">
+          <span class="version-desc">Первая версия Правил обучения и развития</span>
-          <div class="timeline-date">1 апреля 2026</div>
-          <span class="timeline-badge modified">изменено</span>
-          <h4>Увеличен бюджет на профессиональные курсы</h4>
-          <p>Годовой лимит на профильные курсы повышен с 150 000 ₸ до 200 000 ₸ в связи с пересмотром бюджета на развитие.</p>
-        </div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-dot removed"></div>
-        <div class="timeline-content">
-          <div class="timeline-date">1 марта 2026</div>
-          <span class="timeline-badge removed">удалено</span>
-          <h4>Отменено ограничение по стажу</h4>
-          <p>Убрано требование «не менее 6 месяцев в компании» для подачи заявки на обучение. Теперь учиться можно с первого дня работы.</p>
         </div>
       </div>
     </div>