WordPress Handoff — Design & Dev Documentation

:root {
  --background: 0 0% 4%;          /* #0A0A0A — sfondo pagina (void) */
  --foreground: 0 0% 100%;        /* #FFFFFF — testo principale */
  --card: 0 0% 7%;                /* #121212 — sfondo card */
  --card-foreground: 0 0% 100%;
  --primary: 150 100% 26%;        /* #008542 — verde smeraldo (brand) */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 12%;          /* #1F1F1F */
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 15%;              /* #262626 */
  --muted-foreground: 0 0% 65%;   /* #A6A6A6 — testo secondario */
  --accent: 150 100% 26%;         /* = primary */
  --accent-foreground: 0 0% 100%;
  --border: 0 0% 18%;             /* #2E2E2E — bordi (silver) */
  --input: 0 0% 18%;
  --ring: 150 100% 26%;
  --radius: 0rem;                 /* Border radius = 0 (angoli vivi) */
  --font-heading: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Light mode — applicato su /light */
.light {
  --background: 0 0% 100%;        /* #FFFFFF */
  --foreground: 0 0% 10%;         /* #1A1A1A */
  --card: 0 0% 96%;               /* #F5F5F5 */
  --card-foreground: 0 0% 10%;
  --primary: 150 100% 26%;        /* #008542 — stesso brand */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --muted: 0 0% 92%;
  --muted-foreground: 0 0% 45%;
  --border: 0 0% 85%;             /* #D9D9D9 */
  --input: 0 0% 85%;
  --ring: 150 100% 26%;
}

colors: {
  emerald: {
    brand: '#008542'    /* Verde brand — bg-emerald-brand, text-emerald-brand */
  },
  void: '#0A0A0A',     /* Sfondo dark */
  silver: '#333333',   /* Bordi e linee dark */
}

<!-- Colore brand su testo/bottone -->
<p class="text-emerald-brand">Testo brand</p>
<button class="bg-emerald-brand text-white">Bottone</button>

<!-- Sfondo dark -->
<section class="bg-void">...</section>

<!-- Bordo silver -->
<div class="border border-silver/20">...</div>

<!-- In WordPress puro (senza Tailwind): usa le variabili CSS -->
<style>
  .brand-text { color: hsl(var(--primary)); }
  .bg-void { background: hsl(var(--background)); }
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;800&family=Inter:wght@400;500&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">

:root {
  --font-heading: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Hero H1 */
font-size: clamp(2.25rem, 8vw, 6rem); /* text-4xl -> text-8xl */
font-weight: 800;
line-height: 1;
letter-spacing: -0.025em;
text-transform: uppercase;

/* Section H2 */
font-size: clamp(1.875rem, 4vw, 3rem); /* text-3xl -> text-5xl */
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;

/* Card H3 */
font-size: 1.25rem; /* text-xl */
font-weight: 800;

/* Body base */
font-size: 1rem;
line-height: 1.75;
color: hsl(var(--muted-foreground));

/* Label tecnico (mono) */
font-family: var(--font-mono);
font-size: 0.75rem; /* text-xs */
text-transform: uppercase;
letter-spacing: 0.3em; /* tracking-[0.3em] */
color: hsl(var(--primary));

/* Tutti i contenuti usano questo wrapper */
.container {
  max-width: 80rem; /* max-w-7xl = 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;   /* px-6 mobile */
  padding-right: 1.5rem;
}

@media (min-width: 1024px) { /* lg */
  .container {
    padding-left: 4rem;   /* lg:px-16 desktop */
    padding-right: 4rem;
  }
}

/* Sezione standard */
.section { padding-top: 6rem; padding-bottom: 6rem; } /* py-24 */

/* Sezione grande */
.section-lg { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 1024px) {
  .section-lg { padding-top: 8rem; padding-bottom: 8rem; } /* lg:py-32 */
}

/* Grid 2 colonne standard (contatti, about) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem; /* gap-16 */
}
@media (min-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 6rem; /* lg:gap-24 */
  }
}

/* Grid prodotti: 1 col mobile, 2 col sm, 3 col lg */
.grid-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .grid-products { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: 1fr 1fr 1fr; } }

/* Facet clip grande (card) */
.facet-clip {
  clip-path: polygon(
    0 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    16px 100%,
    0 calc(100% - 16px)
  );
}

/* Facet clip piccolo (bottoni) */
.facet-clip-sm {
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
}

<a href="#contatti" class="btn-primary">Preventivo</a>

<style>
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #008542;
  color: #fff;
  padding: 0.875rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background 0.2s;
  text-decoration: none;
}
.btn-primary:hover { background: #007038; }
</style>

<a href="#about" class="btn-outline">Chi Siamo</a>

<style>
.btn-outline {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  padding: 0.875rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.btn-outline:hover { border-color: #008542; color: #008542; }
</style>

<div class="product-card facet-clip">
  <div class="product-card__image">
    <img src="..." alt="..." />
  </div>
  <div class="product-card__body">
    <span class="product-card__mono">EDGE</span>
    <h3>Mole Diamantate e Fickert</h3>
    <p>Descrizione...</p>
    <div class="product-card__specs">
      <span>METALLICHE</span><span>IBRIDE</span><span>RESINOIDI</span>
    </div>
  </div>
</div>

<style>
.product-card {
  background: hsl(0 0% 7%);
  border: 1px solid hsl(0 0% 18% / 0.5);
  cursor: pointer;
  transition: border-color 0.3s;
}
.product-card:hover { border-color: rgba(0,133,66,0.4); }
.product-card__mono {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #008542;
}
</style>

<form class="contact-form">
  <div class="field">
    <label>Nome</label>
    <input type="text" required />
  </div>
  <div class="field">
    <label>Messaggio</label>
    <textarea rows="5" required></textarea>
  </div>
  <label class="privacy">
    <input type="checkbox" required />
    Ho letto e accetto la <a href="/privacy">Privacy Policy</a>
  </label>
  <button type="submit" class="btn-primary facet-clip-sm">Invia Richiesta</button>
</form>

<style>
.field {
  border: 1px solid hsl(0 0% 18% / 0.5);
  padding: 1.5rem;
}
.field label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(0 0% 65%);
  display: block;
  margin-bottom: 0.5rem;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
}
</style>

.cutting-line {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(51, 51, 51, 0.15) 0px,
    rgba(51, 51, 51, 0.15) 0.5px,
    transparent 0.5px,
    transparent calc(100% / 12)
  );
}

<nav class="navbar fixed top-0 w-full z-50">
  <div class="container flex items-center justify-between h-16 lg:h-20">
    <!-- Logo -->
    <a href="/"><img src="logo.svg" /></a>

    <!-- Desktop nav -->
    <div class="hidden lg:flex items-center gap-8">
      <a href="#hero">Home</a>
      <a href="#prodotti">Prodotti</a>
      <a href="#about">Chi Siamo</a>
      <a href="#green-work">Sostenibilita</a>
      <a href="#contatti">Contatti</a>
      <a href="/news">News</a>
      <a href="#contatti" class="btn-primary facet-clip-sm">Preventivo</a>
      <!-- Language switcher (9 lingue) -->
      <!-- Toggle dark/light -->
    </div>

    <!-- Mobile: hamburger -->
    <button class="lg:hidden">Menu</button>
  </div>
</nav>

<!-- Mobile menu full-screen -->
<div class="mobile-menu fixed inset-0 bg-void flex-col items-center justify-center">
  <a href="#hero">Home</a>
  <a href="#contatti" class="btn-primary facet-clip-sm">Preventivo</a>
</div>

<footer class="bg-void border-t border-silver/10 py-12">
  <div class="container grid grid-cols-1 lg:grid-cols-4 gap-8">
    <!-- Col 1: Logo + tagline -->
    <div>
      <img src="logo.svg" />
      <p>Ricambi tecnici di precisione per l'industria ceramica</p>
    </div>
    <!-- Col 2: Navigazione -->
    <div>
      <h4>Navigazione</h4>
      <a href="#prodotti">Prodotti</a>
      <a href="#about">Chi Siamo</a>
      <a href="#green-work">Sostenibilita</a>
      <a href="/news">News</a>
    </div>
    <!-- Col 3: Sede -->
    <div>
      <h4>Sede</h4>
      <p>Distretto Ceramico, Sassuolo (MO)</p>
    </div>
    <!-- Col 4: Contatti -->
    <div>
      <h4>Contatti</h4>
      <a href="mailto:info@greendiamant.com">info@greendiamant.com</a>
      <a href="tel:+390536000000">+39 0536 XXX XXX</a>
    </div>
  </div>
  <div class="container border-t border-silver/10 mt-8 pt-8 flex justify-between">
    <p>(c) 2026 Green Diamant SRL - Tutti i diritti riservati</p>
    <div>
      <a href="https://www.iubenda.com/privacy-policy/37534852">Privacy</a>
      <a href="https://www.iubenda.com/privacy-policy/37534852/cookie-policy">Cookie</a>
    </div>
  </div>
</footer>

<section id="hero" class="relative h-[100dvh] flex flex-col cutting-line">
  <!-- Background -->
  <div class="absolute inset-0">
    <img src="hero.jpg" class="w-full h-full object-cover opacity-40" />
    <div class="absolute inset-0 bg-gradient-to-r from-void from-30% via-void/85 to-void/20"></div>
  </div>

  <!-- Content -->
  <div class="relative z-10 flex-1 flex flex-col justify-center container">
    <p class="font-mono text-xs uppercase tracking-[0.3em] text-emerald-brand mb-6">
      Distretto Ceramico di Sassuolo
    </p>
    <h1 class="font-heading font-extrabold uppercase text-4xl lg:text-8xl leading-none text-white">
      Built for<br>
      <span class="text-emerald-brand">Ceramic</span><br>
      Excellence
    </h1>
    <p class="mt-8 text-white/60 max-w-xl">
      Ricambi tecnici di eccellenza per macchine ceramiche...
    </p>
    <div class="mt-10 flex gap-4">
      <button class="btn-primary facet-clip-sm">Scopri i Prodotti</button>
      <button class="btn-outline facet-clip-sm">Chi Siamo</button>
    </div>
  </div>

  <!-- Stats bar -->
  <div class="relative z-10 border-t border-silver/20 grid grid-cols-3">
    <div>20+ / Anni di Esperienza</div>
    <div>500+ / Clienti Attivi</div>
    <div>2.000+ / Componenti a Catalogo</div>
  </div>
</section>

<Navbar />
<HeroSection />          <!-- id="hero" -->
<ProductsSection />      <!-- id="prodotti" - 5 card prodotto -->
<PerformanceSection />   <!-- 4 metriche -->
<AboutSection />         <!-- id="about" - testo + 4 box info -->
<GreenWorkSection />     <!-- id="green-work" - 4 pilastri sostenibilita -->
<ContactSection />       <!-- id="contatti" - form contatti -->
<Footer />

<NavbarLight />           <!-- Stessa struttura, tema light -->
<HeroSectionLight />
<ProductsSectionLight />
<PerformanceSectionLight />
<AboutSectionLight />
<GreenWorkSectionLight />
<ContactSectionLight />
<FooterLight />

<!-- Lista articoli con card (cover, titolo, excerpt, autore, data) -->
<!-- Admin: bottone "Nuovo Articolo" -> /news/new -->
<!-- Ogni card: link a /news/:id (ArticleDetail) -->
<!-- Admin: bottone "Modifica" -> /news/:id/edit (ArticleEditor) -->
<!-- ArticleEditor: editor a blocchi (testo, heading, immagine, video, link, citazione, separatore) -->
<!-- ArticleDetail: render articoli con ArticleRenderer -->

// 1. Fade in + slide (hero, sezioni)
<motion.div
  initial={{ opacity: 0, y: 40 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
>

// 2. Scroll reveal (whileInView)
<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
>

// 3. Stagger children (card grid)
<motion.div
  initial="hidden"
  whileInView="show"
  variants={{
    hidden: {},
    show: { transition: { staggerChildren: 0.1 } }
  }}
>
  <motion.div variants={{ hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } }} />

// 4. Reduced motion (accessibilita)
const prefersReduced = useReducedMotion();
initial={prefersReduced ? {} : { opacity: 0, x: -20 }}

/* Fade in on scroll — usa IntersectionObserver in WP */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* JS: IntersectionObserver */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('is-visible');
  });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Esempio struttura (Italiano)
hero: {
  tagline: "Distretto Ceramico di Sassuolo",
  title1: "Built for", title2: "Ceramic", title3: "Excellence",
  subtitle: "Ricambi tecnici di eccellenza...",
  cta1: "Scopri i Prodotti", cta2: "Chi Siamo",
  stat1: "Anni di Esperienza", stat2: "Clienti Attivi", stat3: "Componenti a Catalogo",
}
products: {
  tag: "// Catalogo Prodotti",
  items: [
    { title: "Mole Diamantate e Fickert", mono: "EDGE", description: "...", specs: [...] },
    // ...5 items
  ]
}
// ...about, green, contact, footer, nav, news

// Campi inviati:
{
  firstName: "Nome",
  lastName: "Cognome",
  company: "Nome Azienda",
  phone: "Telefono",
  email: "Email",
  message: "Messaggio"
}
// Destinatario: commerciale@greendiamant.com
// Mittente: Greendiamantcom@gmail.com

{
  title: "string",
  slug: "string (auto-generated)",
  excerpt: "string",
  cover_image: "url (dark)",
  cover_image_light: "url (light, fallback a cover_image)",
  content: "JSON array di blocchi",
  status: "draft | published",
  author_name: "string"
}

<title>Green Diamant - Utensili Diamantati e Ricambi Tecnici per Ceramica | Sassuolo</title>
<meta name="description" content="Green Diamant SRL: utensili diamantati, mole, Fickert, spazzole, ricambi industriali e rigenerazione componenti per macchine ceramiche..." />
<link rel="canonical" href="https://www.greendiamant.com/" />
<!-- hreflang per 9 lingue -->
<link rel="alternate" hreflang="it" href="https://www.greendiamant.com/" />
<link rel="alternate" hreflang="x-default" href="https://www.greendiamant.com/" />
<!-- JSON-LD: Organization, WebSite, Product catalog, Professional Service -->