globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #000000;
  --foreground: #ededed;

  --color-secondary: #ffffff;
  --color-accent: #5b61d6;

  /* Add HSL format for accent color that Tailwind expects */
  --accent: 237 65% 64%; /* HSL values for #5b61d6 */
  --accent-foreground: 0 0% 100%; /* White text on accent */
}

/* Define explicitly for dark mode as well */
.dark {
  --accent: 237 65% 64%; /* Same accent color in dark mode */
  --accent-foreground: 0 0% 100%;
}

body {
  color: var(--foreground) !important;
  background: var(--background) !important;
  font-family: Arial, Helvetica, sans-serif;
  /** smooth scrolling on id click */
}

html {
  scroll-behavior: smooth;
}

@layer utilities {
  .scrollable-element::-webkit-scrollbar {
    width: 12px;
  }

  .scrollable-element::-webkit-scrollbar-track {
    @apply bg-black;
  }

  .scrollable-element::-webkit-scrollbar-thumb {
    @apply bg-black;
    border-radius: 10px;
  }

  .scrollable-element::-webkit-scrollbar-thumb:hover {
    @apply bg-black;
  }

  .scrollable-element {
    scrollbar-width: thin;
    scrollbar-color: #000000 #0e0e0e;
  }

  .perspective-1000 {
    perspective: 1000px;
  }

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

  .rotate-x-55 {
    transform: rotateX(55deg);
  }

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

  .rotate-x-90 {
    transform: rotateX(90deg);
  }

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

  ::selection {
    @apply bg-accent text-white;
  }

  .text-balance {
    text-wrap: balance;
  }

  .pause-animation {
    animation-play-state: paused;
  }

  .card-wrapper {
    @apply relative overflow-hidden;
  }

  /* Gradient */
  .card-wrapper::before {
    background: conic-gradient(
      rgba(91, 97, 214, 1) 0deg,
      rgba(91, 97, 214, 0.5) 90deg,
      transparent 80deg
    );
    content: '';
    position: absolute;
    top: 10%;
    left: -10%;
    height: 75%;
    width: 125%;

    @apply animate-border-spin;
  }

  /* Body */
  .card-content {
    @apply absolute left-[1px] top-[1px] h-[calc(100%-2px)] w-[calc(100%-2px)];
  }

  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-b;
  }

  /** This is acting like the 'border' of the arrow */
  .gh-card-arrow::before {
    @apply -left-2 top-2.5 h-4 w-2 absolute;
    content: '';
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--arrow-border-color);
  }

  /** This is acting like the 'background' of the arrow */
  .gh-card-arrow::after {
    @apply -left-1.5 top-2.5 h-4 w-2 absolute;
    content: '';
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--arrow-color);
  }

  /** data-name="onborda-pointer" */
  [data-name='onborda-pointer'] {
    @apply !rounded-md !p-1;
  }

  .text-focus-in {
    -webkit-animation: text-focus-in 0.5s linear both;
    animation: text-focus-in 0.5s linear both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2025-3-14 21:44:14
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
  @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0;
    }
    13% {
      -webkit-filter: blur(10px);
      filter: blur(10px);
      opacity: 0.33;
    }
    25% {
      -webkit-filter: blur(9px);
      filter: blur(9px);
      opacity: 0.25;
    }
    50% {
      -webkit-filter: blur(6px);
      filter: blur(6px);
      opacity: 0.5;
    }
    75% {
      -webkit-filter: blur(3px);
      filter: blur(3px);
      opacity: 0.75;
    }
    87% {
      -webkit-filter: blur(1px);
      filter: blur(1px);
      opacity: 0.87;
    }
    100% {
      -webkit-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }

  /** pure css animation (no framer motion) to fade in and up an element. */

  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
    opacity: 0;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/** calendar css */
.rdp-nav_button_next {
  @apply !left-[90%] relative [&>svg]:!w-3 [&>svg]:!h-3;
}

.rdp-nav_button_previous {
  @apply left-[4%] relative [&>svg]:!w-3 [&>svg]:!h-3;
}

/* Basic editor styles */
.tiptap {
  :first-child {
    margin-top: 0;
  }

  /* Code and preformatted text styles */
  code {
    background-color: var(--purple-light);
    border-radius: 0.4rem;
    color: var(--white);
    font-size: 0.85rem;
    padding: 0.25em 0.3em;
  }

  pre:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 0.5rem;
  }

  .monaco-editor .line-numbers {
    @apply !w-6;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 5% 1;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 7%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --mantine-color-text: var(--foreground) !important;
    --mantine-color-red-6: var(--foreground) !important;
    --mantine-primary-color-filled: rgb(94, 102, 214) !important;
    --mantine-primary-color-filled-hover: rgb(94, 102, 214, 0.5) !important;
    --mantine-primary-color-light: rgba(94, 102, 214, 0.1) !important;
    --mantine-primary-color-light-hover: rgba(94, 102, 214, 0.12) !important;
    --mantine-color-gray-0: var(--background) !important;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-onest !font-medium;
  }
}

@keyframes accordion-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }
}

/*---break--- */

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