/* Gli esempi delle pagine dei tipi di lavoro: la scheda con titolo e tipo, il monitor dei siti, la barra del browser,
   l'etichetta del ruolo nelle piattaforme. I colori di ogni esempio stanno in esempi-colori.css. */
[data-pagina='esempi'] .site {
  height: auto;
}
.idea {
  position: relative;
}
.idea-intesta {
  padding: 28px 34px 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}
.idea-intesta h2 {
  padding-right: 64px;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.idea-intesta p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-2);
  max-width: 760px;
}
.tipo {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--etichetta-testo, var(--bianco));
  background: var(--etichetta);
}
.monitor {
  position: absolute;
  display: grid;
  justify-items: center;
}
.monitor-cornice {
  width: 624px;
  padding: 12px 12px 20px;
  border-radius: 16px;
  background: var(--portatile-cornice);
  box-shadow:
    0 0 0 1.5px var(--portatile-bordo),
    0 30px 50px -24px var(--apparecchio-ombra);
}
.monitor-schermo {
  border-radius: 4px;
  overflow: hidden;
  background: var(--monitor-schermo);
}
.monitor-collo {
  width: 90px;
  height: 28px;
  background: linear-gradient(180deg, var(--base-2), var(--base-3));
}
.monitor-base {
  width: 220px;
  height: 10px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--base-1), var(--monitor-base-basso));
  box-shadow: 0 14px 24px -10px var(--apparecchio-ombra);
}
.barra-browser {
  position: relative;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--browser-barra);
  border-bottom: 1px solid var(--browser-riga);
}
.barra-browser .portatile-luci {
  top: 7px;
}
.barra-indirizzo {
  padding: 2px 46px;
  border-radius: 6px;
  font-size: 9px;
  color: var(--text-2);
  background: var(--browser-indirizzo);
}
.ruolo {
  position: absolute;
  z-index: 6;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bianco);
  background: var(--etichetta);
  box-shadow: 0 6px 14px -8px var(--ruolo-ombra);
}
.vetrina .idea {
  background: linear-gradient(160deg, var(--fondo-alto) 0%, var(--fondo-basso) 100%);
  box-shadow:
    inset 0 1px 0 var(--bianco-70),
    0 18px 40px -24px var(--esempio-ombra);
}
/* le schede scure (l'osteria, la cucina) */
.idea-scura .idea-intesta h2 {
  color: var(--scura-titolo);
}
.idea-scura .idea-intesta p {
  color: var(--scura-testo);
}
.idea-scura .filo,
.idea-scura .filo-alone {
  stroke: var(--scura-filo);
}