Instalación

Cómo integrar el Design System en tu proyecto WordPress/Elementor.

/* Pegar contenido completo de replanta-kit.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Sora:[email protected]&display=swap');

// En functions.php del tema hijo
add_action('wp_enqueue_scripts', function() {
  wp_enqueue_style(
    'replanta-kit',
    get_stylesheet_directory_uri() . '/replanta-kit.css',
    [],
    '4.0'
  );
  wp_enqueue_script(
    'phosphor-icons',
    'https://unpkg.com/@phosphor-icons/[email protected]',
    [],
    null,
    false
  );
});

Tokens CSS

Variables CSS globales definidas en :root. Usar siempre estos valores para mantener consistencia.

--rep-grad: linear-gradient(135deg, #93F1C9 0%, #41999F 50%, #2A6B70 100%);

Tipografía

Botones

Clases de botón para diferentes contextos.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>

Tarjetas

<div class="card">
  <h4>Título</h4>
  <p>Contenido...</p>
</div>

Chips & Badges

<span class="chip">Default</span>
<span class="chip chip--teal">Teal</span>
<span class="chip chip--green">Green</span>

Clases para Elementor

Clases con !important para sobreescribir estilos de Elementor. Añadir en el campo CSS Classes del widget.

Snippets útiles

.grad-text {
  background: var(--rep-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}