Backend

Name

Tipo

Descrizione

Codice blocco

HTML template

Styleable elements (JSON)

Lista slot stileabili, es. [{"slot": "title", "default": "h2"}].

CSS base

/* Barra: fixed, vetro, ombra */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.8); /* ~ neutral-950 / 80% */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px); /* ~ backdrop-blur-xl */
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05); /* shadow-2xl + hint */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); /* shadow-2xl + shadow-black/40 */
}

.site-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1536px; /* max-w-screen-2xl */
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 2rem; /* py-6 px-8 */
}

.site-nav__brand {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem; /* text-2xl */
  font-weight: 900; /* font-black */
  font-style: italic;
  color: #facc15; /* text-yellow-400 */
  letter-spacing: -0.025em; /* tracking-tight */
  text-transform: uppercase;
}

.site-nav__links {
  display: none; /* hidden */
  align-items: center;
  gap: 3rem; /* space-x-12 */
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .site-nav__links {
    display: flex; /* md:flex */
  }
}

.site-nav__link {
  color: #a3a3a3; /* text-neutral-400 */
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.site-nav__link:hover {
  color: #ffffff;
  transform: scale(1.05);
}

.site-nav__link--active {
  color: #facc15;
  border-bottom: 2px solid #facc15;
  padding-bottom: 0.25rem; /* pb-1 */
}

.site-nav__link--active:hover {
  color: #fde047; /* yellow-300 */
  transform: scale(1.05);
}

.site-nav__cta {
  box-sizing: border-box;
  font-family: "Space Grotesk", sans-serif; /* font-headline */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  padding: 0.625rem 1.5rem; /* py-2.5 px-6 */
  border: none;
  border-radius: 0.5rem; /* rounded-xl dal theme extend */
  background-color: #ffcc00; /* primary-container */
  color: #6f5700; /* on-primary-container */
  cursor: pointer;
  transform: scale(0.95); /* scale-95 */
  transition: transform 0.3s ease;
}

.site-nav__cta:hover {
  transform: scale(1.05);
}

.site-nav__cta:active {
  transition-duration: 75ms; /* active:duration-75 */
}

JS base (legacy)

Deprecato. Preferire js_shared + js_instance_template.

JS condiviso

Library/behavior, incluso una sola volta per blocco.

JS per istanza

Template con {{ block_id }}, eseguito per ogni occorrenza.

Schema contenuti

Content schema json

Default content json

Modifica blocco