Componentes

Botón principal

Un rectángulo negro sobre crema. Editorial. Sin gradiente, sin brillo.

<a class="atelier-button atelier-button--primary" href="/es/start/installation/">
  <span>Read the docs</span>
  <span class="atelier-button__arrow" aria-hidden="true">→</span>
</a>
``````css
.atelier-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  font-family: var(--nibiru-font-text);
  font-variation-settings: var(--nibiru-fv-body-bold);
  font-size: 0.92rem;
  letter-spacing: var(--nibiru-tracking-body);
  border-radius: var(--nibiru-radius-md);
  text-decoration: none;
  transition: transform 200ms var(--nibiru-ease-out),
              box-shadow 200ms var(--nibiru-ease-out);
}

.atelier-button--primary {
  background: var(--nibiru-ink);
  color: var(--nibiru-paper);
  border: 1px solid var(--nibiru-ink);
  box-shadow: 0 1px 0 rgba(31, 27, 46, 0.4);
}

.atelier-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(31, 27, 46, 0.5);
}

.atelier-button .atelier-button__arrow {
  transition: transform 240ms var(--nibiru-ease-out);
}
.atelier-button:hover .atelier-button__arrow {
  transform: translateX(3px);
}

Botón fantasma

.atelier-button--ghost {
  background: transparent;
  color: var(--nibiru-ink);
  border: 1px solid var(--nibiru-ink-faint);
}
.atelier-button--ghost:hover {
  border-color: var(--nibiru-iris);
  color: var(--nibiru-iris-deep);
}

Tarjeta

Plano, con tono de papel. Al pasar el ratón, se levanta 2px y se ilumina el borde.

<article class="card">
  <h3 class="card-title">MMVC architecture</h3>
  <p>Modules wrap MVC with traits, plugins, interfaces and settings.</p>
</article>
``````css
.card {
  background: var(--nibiru-mist);
  border: 1px solid rgba(31, 27, 46, 0.10);
  border-radius: var(--nibiru-radius-lg);
  padding: 1.6rem 1.5rem;
  transition: transform 240ms var(--nibiru-ease-out),
              border-color 240ms,
              box-shadow 240ms;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--nibiru-iris);
  box-shadow: 0 18px 40px -20px rgba(94, 84, 140, 0.35);
}

.card-title {
  font-family: var(--nibiru-font-display);
  font-variation-settings: var(--nibiru-fv-display-medium);
  font-size: 1.05rem;
  letter-spacing: -0.018em;
  color: var(--nibiru-ink);
  margin: 0 0 0.5rem;
}

.card p {
  color: var(--nibiru-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

Cita destacada

Una regla violácea de un solo píxel en el lado izquierdo. Sin caja. Sin icono.

<aside class="callout callout--note">
  <span class="callout__title">Note</span>
  <p>Browse <code>/start/quick-start/</code> for a five-minute first build.</p>
</aside>
``````css
.callout {
  background: var(--nibiru-mist);
  border: 0;
  border-left: 2px solid var(--nibiru-iris);
  padding: 1rem 1.2rem 1rem 1.4rem;
  border-radius: 0;
  margin: 1.6rem 0;
}
.callout--tip     { border-left-color: var(--nibiru-aurum); }
.callout--caution { border-left-color: var(--nibiru-aurum); }
.callout--danger  { border-left-color: var(--nibiru-rose); }

.callout__title {
  font-family: var(--nibiru-font-text);
  font-variation-settings: var(--nibiru-fv-label);
  text-transform: uppercase;
  letter-spacing: var(--nibiru-tracking-label);
  font-size: 0.72rem;
  color: var(--nibiru-ink-faint);
  display: block;
  margin-bottom: 0.45rem;
}

Código en línea

Sin caja. Un subrayado coloreado que se mantiene al margen.

:not(pre) > code {
  font-family: var(--nibiru-font-mono);
  font-size: 0.86em;
  background: linear-gradient(to top,
    rgba(124, 112, 171, 0.16) 35%,
    transparent 35%);
  color: var(--nibiru-iris-deep);
  padding: 0 0.18em;
  border-radius: 2px;
}

Héroe con el loto

Cuadrícula asimétrica de dos columnas. Un número editorial grande detrás del texto. La marca de la empresa ancla el lado derecho y respira cada 18 segundos.

<section class="atelier-hero">
  <span class="atelier-hero__number" aria-hidden="true">01</span>

  <div class="atelier-hero__grid">
    <div>
      <p class="atelier-hero__eyebrow">Modular MMVC PHP framework</p>
      <h1 class="atelier-hero__title">
        Create.<br>Invent.<br><em>Impress.</em>
      </h1>
      <p class="atelier-hero__lede">
        Nibiru is a modular PHP framework for builders who ship.
      </p>
      <div class="atelier-hero__cta">
        <a class="atelier-button atelier-button--primary" href="/es/start/installation/">
          Read the docs <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>

    <div class="atelier-hero__art" aria-hidden="true">
      <img class="atelier-hero__mark" src="/img/nibiru-logo.png" alt="">
    </div>
  </div>
</section>

Los estilos completos se encuentran en src/styles/nibiru.css.

Lanzador de Oracle

Un círculo de color papel con un diámetro de 52px en la esquina inferior derecha. La marca de loto dentro gira al pasar el ratón por encima. Sin pulso. Sin brillo.

<button id="oracle-launcher" type="button" aria-label="Open Oracle"></button>
``````css
#oracle-launcher {
  position: fixed;
  bottom: 1.4rem; right: 1.4rem;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(31, 27, 46, 0.18);
  background: var(--nibiru-paper);
  box-shadow: 0 6px 24px -10px rgba(31, 27, 46, 0.35),
              0 1px 2px rgba(31, 27, 46, 0.08);
  cursor: pointer;
  transition: transform 220ms var(--nibiru-ease-out),
              box-shadow 220ms,
              border-color 220ms;
  display: flex; align-items: center; justify-content: center;
}

#oracle-launcher::before {
  content: '';
  width: 26px; height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 C 9 8, 9 16, 12 22 C 15 16, 15 8, 12 2 Z' fill='%237c70ab'/><path d='M2 12 C 8 9, 16 9, 22 12 C 16 15, 8 15, 2 12 Z' fill='%237db7dc'/></svg>");
  background-size: contain;
  transition: transform 400ms var(--nibiru-ease-out);
}

#oracle-launcher:hover {
  transform: translateY(-2px);
  border-color: var(--nibiru-iris);
}
#oracle-launcher:hover::before {
  transform: rotate(60deg);
}