open-productive-stack/drupal/nextjs/app/globals.css

@import "tailwindcss";

:root {
  --accent: var(--color-emerald-600);
  --accent-hex: #e11d48;
  --fluid-hero: clamp(1.75rem, 4vw + 1rem, 3.75rem);
  --fluid-hero-desc: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
  --fluid-section-title: clamp(1.5rem, 3vw + 0.75rem, 1.875rem);
  /* Fade-in on load: About starts when hero title animation ends (~2.1s), Services after About. */
  --fade-about-delay: 2.1s;
  --fade-about-duration: 1.2s;
  --fade-services-delay: 2.5s;
  --fade-services-duration: 1.2s;
}

/* Footer link icons: tint to emerald on link hover/focus (icons are img/SVG with fixed fill). */
.group:hover .footer-icon-hover-emerald,
.group:focus-visible .footer-icon-hover-emerald {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(130deg) brightness(95%) contrast(101%);
}

@layer base {
  a {
    @apply transition-colors duration-200 ease-out;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-on-load {
  animation: fade-in var(--fade-about-duration) ease-in-out var(--fade-about-delay) both;
}

.animate-fade-in-on-load-delayed {
  animation: fade-in var(--fade-services-duration) ease-in-out var(--fade-services-delay) both;
}

.animate-delay-100 {
  animation-delay: 100ms;
}

.animate-delay-200 {
  animation-delay: 200ms;
}

.animate-delay-300 {
  animation-delay: 300ms;
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee-slow {
  animation: marquee 60s linear infinite;
}

.home-clients-band {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin 8s linear infinite;
}

.animate-spin-once {
  animation: spin 0.5s ease-in-out 1 forwards;
}

@keyframes coin-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(720deg);
  }
}

.animate-coin-spin {
  animation: coin-spin 0.6s ease-in-out 1 forwards;
}

/* Hero title letter animations. */
@keyframes letter-from-down {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes letter-from-up {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes letter-b-exit {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  51% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes letter-o-in-out {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes letter-e-fade-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* t: appears with o (Robot), stays, then slides right as r appears. */
@keyframes letter-t-slide {
  0% {
    opacity: 0;
    transform: translateY(-100%) translateX(-0.7ch);
  }
  20% {
    opacity: 1;
    transform: translateY(-0.45em) translateX(-0.7ch);
  }
  55% {
    opacity: 1;
    transform: translateY(-0.45em) translateX(-0.7ch);
  }
  100% {
    opacity: 1;
    transform: translateY(-0.45em) translateX(2px);
  }
}

.animate-letter-from-down {
  animation: letter-from-down 0.5s ease-out both;
}

.animate-letter-from-up {
  animation: letter-from-up 0.5s ease-out both;
}

.animate-letter-b-exit {
  animation: letter-b-exit 0.9s ease-out both;
}

.animate-letter-o-in-out {
  animation: letter-o-in-out 1.5s ease-out both;
}

.animate-letter-e-fade-in {
  animation: letter-e-fade-in 0.5s ease-out both;
}

.animate-letter-t-slide {
  animation: letter-t-slide 0.9s ease-out both;
}

.hero-letter-t {
  overflow: visible;
  vertical-align: baseline;
}

.hero-letter-r {
  position: relative;
}

.hero-letter-r::before {
  content: "B";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: letter-b-exit 0.6s ease-out both;
  animation-delay: var(--b-delay, 320ms);
}

.hero-letter-e {
  position: relative;
  padding-right: 1px;
  padding-left: 1px;
}

.hero-letter-e::before {
  content: "o";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: letter-o-in-out 1.5s ease-out both;
  animation-delay: var(--o-delay, 760ms);
}

.layout-footer-section {
  margin: 0 auto;
}