proseka-design-system.css

/* ============================================================
   ПРОСЕКА — Design System
   Скопируй этот файл в любой проект и подключи через @import.
   Не требует сборщиков — работает с plain CSS, Vite, Next.js.
   ============================================================ */

/* ----------------------------------------------------------
   1. Токены (CSS-переменные)
   ---------------------------------------------------------- */
:root {
  /* Цвета */
  --background:       oklch(0.13 0 0);      /* почти чёрный */
  --foreground:       oklch(0.97 0 0);      /* белый */
  --muted:            oklch(0.20 0 0);
  --muted-fg:         oklch(0.62 0 0);      /* серый для второстепенного текста */
  --border:           oklch(0.24 0 0);
  --accent-green:     oklch(0.78 0.22 145); /* единственный цветной акцент */

  /* Радиусы */
  --radius-sm:  0.5rem;
  --radius-md:  0.625rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Шрифт */
  --font-sans: 'Geist', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;
}

/* ----------------------------------------------------------
   2. Базовые стили
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--background); }

body {
  background:  var(--background);
  color:       var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

::selection {
  background: var(--accent-green);
  color:      var(--background);
}

/* ----------------------------------------------------------
   3. Keyframes
   ---------------------------------------------------------- */

@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%       { transform: scale(1.06); opacity: 1;    }
}

@keyframes scroll-chevron {
  0%, 100% { transform: translateY(0);   opacity: 0.3; }
  50%       { transform: translateY(5px); opacity: 0.6; }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 0.85; transform: scale(1);
    box-shadow: 0 0 0px oklch(0.74 0.14 155 / 0);
  }
  50% {
    opacity: 1; transform: scale(1.22);
    box-shadow: 0 0 0 3px oklch(0.74 0.14 155 / 0.12),
                0 0 14px  oklch(0.74 0.14 155 / 0.28);
  }
}

@keyframes marker-ping {
  0%   { r: 2.5; opacity: 0.2; }
  100% { r: 13;  opacity: 0;   }
}

/* ----------------------------------------------------------
   4. Кнопка .btn-primary
   Белая, круглая, с зелёной заливкой от курсора при ховере.
   Эффект: зелёный круг расширяется из точки где мышь.
   JS нужен только для --mx / --my (позиция курсора).
   ---------------------------------------------------------- */
.btn-primary {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.625rem;
  overflow:        hidden;
  isolation:       isolate;

  padding:         1rem 2rem;
  border-radius:   var(--radius-full);
  border:          none;
  cursor:          pointer;
  text-decoration: none;

  background:   var(--foreground);
  color:        var(--background);
  font-family:  var(--font-sans);
  font-size:    1rem;
  font-weight:  600;
  line-height:  1;
  white-space:  nowrap;

  transition: color 400ms ease-out;
}

/* зелёный круг — позиционируется через CSS-переменные --mx --my */
.btn-primary::before {
  content:       '';
  position:      absolute;
  inset:         0;
  z-index:       -1;
  width:         210%;
  aspect-ratio:  1;
  border-radius: var(--radius-full);
  background:    var(--accent-green);
  transform:     translate(calc(var(--mx, 50%) - 50%), calc(var(--my, 50%) - 50%)) scale(0);
  transition:    transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn-primary:hover::before { transform: translate(calc(var(--mx, 50%) - 50%), calc(var(--my, 50%) - 50%)) scale(1); }

/* стрелка внутри кнопки */
.btn-primary .btn-arrow {
  transition: transform 300ms ease-out;
}
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

/* ----------------------------------------------------------
   5. Карточки .feature-card
   Тёмный фон, полупрозрачная граница, иконка слева.
   При ховере — граница светлее + лёгкое увеличение + иконка зеленеет.
   ---------------------------------------------------------- */
.feature-card {
  display:    flex;
  align-items: flex-start;
  gap:         1rem;
  padding:     1rem 1.25rem;
  border-radius: var(--radius-2xl);
  border:      1px solid oklch(0.24 0 0 / 0.4);
  background:  oklch(0.20 0 0 / 0.2);

  transition:
    border-color  300ms ease-out,
    background    300ms ease-out,
    transform     300ms ease-out;
}
.feature-card:hover {
  border-color: oklch(0.24 0 0 / 0.7);
  background:   oklch(0.20 0 0 / 0.35);
  transform:    scale(1.02);
}

.feature-card__icon {
  display:         flex;
  flex-shrink:     0;
  align-items:     center;
  justify-content: center;
  width:           2.25rem;
  height:          2.25rem;
  margin-top:      0.125rem;
  border-radius:   var(--radius-xl);
  border:          1px solid oklch(0.24 0 0 / 0.5);
  background:      oklch(0.20 0 0 / 0.3);
  color:           oklch(0.62 0 0 / 0.7);
  transition:
    border-color 300ms ease-out,
    color        300ms ease-out;
}
.feature-card:hover .feature-card__icon {
  border-color: oklch(0.78 0.22 145 / 0.4);
  color:        oklch(0.78 0.22 145 / 0.7);
}

.feature-card__label {
  font-size:      0.75rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          oklch(0.62 0 0 / 0.6);
  margin:         0 0 0.25rem;
}

.feature-card__value {
  font-size:   1.25rem;
  font-weight: 600;
  color:       var(--foreground);
  margin:      0;
}

/* ----------------------------------------------------------
   6. Утилиты для анимаций
   ---------------------------------------------------------- */
.breathe        { animation: breathe        4.5s ease-in-out infinite; }
.scroll-chevron { animation: scroll-chevron 2s   ease-in-out infinite; }
.pulse-dot      { animation: pulse-dot      3.2s ease-in-out infinite; }
.marker-ping    { animation: marker-ping    2.8s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Scroll reveal */
.reveal {
  opacity:   0;
  transform: translateY(20px);
  filter:    blur(3px);
  transition:
    opacity   700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter    600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.step-line {
  transform: scaleY(0); transform-origin: top;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}
.reveal.is-visible .step-line { transform: scaleY(1); }

.eyebrow-line {
  width: 0; flex-shrink: 0;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.reveal.is-visible .eyebrow-line { width: 2rem; }

.reveal-line {
  transform: scaleX(0.3); transform-origin: center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}
.reveal.is-visible .reveal-line { transform: scaleX(1); }

/* ----------------------------------------------------------
   7. Reduced motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .breathe, .pulse-dot, .scroll-chevron, .marker-ping { animation: none; }
  .step-line  { transform: scaleY(1); transition: none; }
  .eyebrow-line { width: 2rem; transition: none; }
  .reveal-line  { transform: scaleX(1); transition: none; }
  .btn-primary::before { transition: none; }
}