cyberia/research/events/client/src/app/styles/global.css

css
ฯ€ 0.0% 736 words ยท 4 min 
@import "./fonts/fonts.css";
@import "tailwindcss";
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
@import "tw-animate-css";
@import "./embla.css";

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: hsl(0, 0%, 0%);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: hsl(188, 100%, 5%);
  --popover-foreground: oklch(0.145 0 0);
  --primary: hsl(93, 100%, 51%);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: hsl(194, 100%, 56%);
  --secondary-foreground: hsl(178, 100%, 5%);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: hsla(194, 100%, 95%, 0.664);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: hsl(349, 100%, 50%);
  --border: oklch(0.922 0 0);
  --input: hsl(187, 98%, 48%);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --text-high-contrast-rgb-value: 2, 214, 242;
  --background-site-rgb-value: 0, 0, 0;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-secondary;
  }
}

@layer components {
  .card {
    clip-path: polygon(0% 0%, 90% 0%, 100% 30%, 100% 100%, 10% 100%, 0% 70%);

    border-width: 1px;
    border-style: solid;
    border-color: var(--primary);
    padding: 1rem;
    position: relative;
  }
}

@layer utilities {
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }
}

body {
  /* biome-ignore lint/a11y/useGenericFontNames: <Downloaded font> */
  font-family: Chakra Petch;
}

.h1 {
  font-family: var(--font-chakra-petch);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

.h2 {
  font-family: var(--font-chakra-petch);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.h3 {
  font-family: var(--font-chakra-petch);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.h4 {
  font-family: var(--font-chakra-petch);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.h5 {
  font-family: var(--font-chakra-petch);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

.clip-corners {
  clip-path: polygon(0% 0%, 90% 0%, 100% 30%, 100% 100%, 10% 100%, 0% 70%);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) #00000000 !important;
}

::-webkit-scrollbar-track {
  background: var(--primary);
}

::-webkit-scrollbar-thumb {
  background-color: #00000000;
}

.loader {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: var(--secondary);
  animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1 / 1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.loader::after {
  margin: 8px;
  animation-duration: 3s;
}
@keyframes l15 {
  100% {
    transform: rotate(1turn);
  }
}

html {
  overflow: hidden;
}

.glitch {
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 var(--secondary), -0.03em -0.04em 0 #fc00ff, 0.025em
    0.04em 0 var(--primary);
  animation: glitch 725ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 var(--secondary), -0.03em -0.04em 0 #fc00ff, 0.025em
      0.04em 0 var(--primary);
  }
  15% {
    text-shadow: 0.05em 0 0 var(--secondary), -0.03em -0.04em 0 #fc00ff, 0.025em
      0.04em 0 var(--primary);
  }
  16% {
    text-shadow: -0.05em -0.025em 0 var(--secondary), 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 var(--primary);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 var(--secondary), 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 var(--primary);
  }
  50% {
    text-shadow: 0.05em 0.035em 0 var(--secondary), 0.03em 0 0 #fc00ff, 0
      -0.04em 0 var(--primary);
  }
  99% {
    text-shadow: 0.05em 0.035em 0 var(--secondary), 0.03em 0 0 #fc00ff, 0
      -0.04em 0 var(--primary);
  }
  100% {
    text-shadow: -0.05em 0 0 var(--secondary), -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 var(--primary);
  }
}

/* These styles are ment to make google info windows look better */
.gm-style-iw,
.gm-style-iw-c {
  padding: 1rem 1rem !important;
  background-color: black !important;
  border: 1px solid black !important;
}

.gm-style-iw-d {
  overflow: hidden !important;
}

.gm-style .gm-style-iw-tc::after {
  background: black !important;
}

.gm-style-iw button[aria-label="Close"] {
  display: none !important;
}

.gm-style-iw-t::after {
  background: linear-gradient(
    45deg,
    black 50%,
    rgba(0, 0, 0, 0) 51%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  box-shadow: none !important;
}

Graph