create-venta-app/dist/templates/default/ts/src/app/page.module.css

Create a Venta app through the commandline.

.main {
  padding: 50px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  text-align: center;
  z-index: 10;
  color: lightgray;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.5rem;
  color: #333;
  display: inline-block;
  margin: 1rem 0.5rem;
  font-family: var(--font-mono);
}

.radialGradientOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  mask-image: radial-gradient(ellipse at center, black 1%, transparent 80%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cdefs%3E%3CradialGradient cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:black; stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:black; stop-opacity:0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23fadeGradient)' /%3E%3Cpath d='M0 22.5 h45' stroke='gray' stroke-opacity='0.3' stroke-width='1' /%3E%3Cpath d='M22.5 0 v45' stroke='gray' stroke-opacity='0.3' stroke-width='1' /%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.radialGradientText {
  font-size: 2.25rem; /* 4xl */
  @media (min-width: 640px) {
    font-size: 5rem;
  }
  font-family: "Cinzel", serif;
  position: relative;
  z-index: 20;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: transparent;
  background-image: linear-gradient(to bottom, #fafafa, #aab83a);
  padding: 2rem;
  filter: drop-shadow(2px 80px 40px rgba(255, 255, 255, 0.30));
}


.button {
  background: #16181d;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  box-shadow: 2px 2px 25px #1d2027; 
  border-radius: 9999px;
  padding: 0.125rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: lightgray;
  display: inline-block; 
  z-index: 2;
}

.icon {
  margin-left: 0.25rem;
  transform: translateY(25%);
  width: 15px;
  height: 15px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewbox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.14645%203.14645C8.34171%202.95118%208.65829%202.95118%208.85355%203.14645L12.8536%207.14645C13.0488%207.34171%2013.0488%207.65829%2012.8536%207.85355L8.85355%2011.8536C8.65829%2012.0488%208.34171%2012.0488%208.14645%2011.8536C7.95118%2011.6583%207.95118%2011.3417%208.14645%2011.1464L11.2929%208H2.5C2.22386%208%202%207.77614%202%207.5C2%207.22386%202.22386%207%202.5%207H11.2929L8.14645%203.85355C7.95118%203.65829%207.95118%203.34171%208.14645%203.14645Z%22%20fill%3D%22lightgray%22%20fillrule%3D%22evenodd%22%20cliprule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}