create-venta-app
Version:
Create a Venta app through the commandline.
73 lines (63 loc) • 3.22 kB
CSS
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
/* Custom styles that are just must more simple to do this here then with tailwind */
.radial-gradient-overlay {
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;
}
.text-logo {
font-weight: 100;
@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));
}
.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");
}