front/src/index.css - master - melissaaaz/MemoryOffice

front/src/index.css
109 строк3 KB
melissaaaz
upload files Frontend
19 дек 2025, 21:55
19 дек 2025, 21:55bb001d3
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Дополнительные стили для печатной машинки */
@keyframes typewriter {
  0% { width: 0; }
  100% { width: 100%; }
}

@keyframes carriageReturn {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.typewriter-effect {
  overflow: hidden;
  border-right: 2px solid #666;
  white-space: nowrap;
  animation: 
    typewriter 4s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #666; }
}

/* Эффект вибрации бумаги */
@keyframes paperShake {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  25% { transform: translateX(-1px) rotate(-1.2deg); }
  75% { transform: translateX(1px) rotate(-0.8deg); }
}

.paper-shake {
  animation: paperShake 0.1s ease;
}

/* Эффект нажатия клавиши */
@keyframes keyDown {
  0% { transform: translateY(0); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
  50% { transform: translateY(2px); box-shadow: 0 2px 3px rgba(0,0,0,0.1); }
  100% { transform: translateY(0); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
}

.typewriter-key:active {
  animation: keyDown 0.1s ease;
}

/* Эффект мигания для доступных полей */
@keyframes fieldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 163, 175, 0.5); }
  50% { box-shadow: 0 0 0 3px rgba(156, 163, 175, 0); }
}

.input-vintage:focus {
  animation: fieldPulse 2s infinite;
}

/* Дополнительные анимации для печатной машинки */
@keyframes gentlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

.typewriter-machine-container {
  animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes paperHighlight {
  0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
  50% { box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
}

#typewriter-paper {
  animation: paperHighlight 5s ease-in-out infinite;
}

/* Эффект свечения при печати */
@keyframes typingGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.05); }
}

.typing-active {
  animation: typingGlow 0.5s ease;
}

/* Эффект плавающих частиц */
@keyframes floatParticle {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.float-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(156, 163, 175, 0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: floatParticle 3s ease-in infinite;
}