Atomcms-edit/resources/css/global.css

@import "tailwindcss";
@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans:
    "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}

@layer components {
  .nav-item {
    @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!;
    color: var(--color-navbar-text, #1e293b);
  }

  .dropdown-item {
    @apply block py-2 px-4 font-semibold transition duration-200;
    color: var(--color-text);
  }
  .dropdown-item:hover {
    background-color: var(--color-primary, #eeb425);
    color: var(--button-text-color, #1a1a2e);
  }
}

::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: #2c3039;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::placeholder {
  color: #626565;
  opacity: 1;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-text, #0f172a);
}

.drop-shadow {
  -webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff)
    drop-shadow(0 -2px 0 #fff);
}

.drop-shadow-thin {
  -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
}

.article-image {
  display: block;
  width: 100%;
  height: 100px;
  background-position: 300px 220px !important;
  margin: 0 0 20px;
  transition: 0.3s;
}

.article-image-slide {
  background-position: 350px 220px !important;
}

.recent-articles {
  background-blend-mode: multiply;
}

.icon-base {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.camera-icon { background: #242c31 url("/public/assets/images/icons/camera.png") no-repeat center; }
.discord-icon { background: #25658d url("/public/assets/images/icons/discord.png") no-repeat center; }
html.dark .camera-icon { background: #25658d url("/public/assets/images/icons/camera.png") no-repeat center; }
.hotel-icon { background: #f68b08 url("/public/assets/images/icons/feeds.png") no-repeat center; }
.chat-icon { background: #375571 url("/public/assets/images/icons/chat.png") no-repeat center; }
.article-icon { background: #536e5e url("/public/assets/images/icons/article.gif") no-repeat center; }
.lighthouse-icon { background: #8554a6 url("/public/assets/images/icons/lighthouse.png") no-repeat center; }
.currency-icon { background: #e3ad06 url("/public/assets/images/icons/currency.png") no-repeat center; }
.catalog-icon { background: rgba(141, 74, 183, 0.51) url("/public/assets/images/icons/catalog.png") no-repeat center; }
.inventory-icon { background: #232121 url("/public/assets/images/icons/inventory.png") no-repeat center; }
.duo-chat-icon { background: #eec980 url("/public/assets/images/icons/due-chat.png") no-repeat center; }
.friends-icon { background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat center; }

.nav-credit-icon {
  background: #e9b124 url("/public/assets/images/icons/currency/credits.png") no-repeat center;
  outline: 1px solid #b26d18;
}

.nav-ducket-icon {
  background: #c44aac url("/public/assets/images/icons/currency/duckets.png") no-repeat center;
  outline: 1px solid #812378;
}

.nav-diamond-icon {
  background: #caf1f3 url("/public/assets/images/icons/currency/diamonds.png") no-repeat center;
  outline: 1px solid #6caff4;
}

.me-backdrop {
  height: 180px;
  background-blend-mode: multiply;
}

.staff-bg {
  background-blend-mode: multiply;
}

#disconnected {
  display: none;
}

.profile-bg {
  background: rgba(0, 0, 0, 0.5) url("/public/assets/images/profile/profile-bg.png");
  background-blend-mode: multiply;
}

.leaderboard-first {
  background: #f9d83e url("/public/assets/images/leaderboards/trophy-gold.png") no-repeat center;
  color: transparent;
}

.leaderboard-second {
  background: #b8c4d4 url("/public/assets/images/leaderboards/trophy-silver.png") no-repeat center;
  color: transparent;
}

.leaderboard-third {
  background: #f1851b url("/public/assets/images/leaderboards/trophy-bronze.png") no-repeat center;
  color: transparent;
}

.site-bg {
  background: url("/public/assets/images/background-light.jpg") no-repeat fixed right bottom;
}

.app.dark .site-bg {
  background: url("/public/assets/images/background-dark.jpg") no-repeat fixed right bottom;
}

.app.dark .swal2-popup {
  background: rgb(17 24 39);
  color: white;
}

.turbolinks-progress-bar {
  height: 5px;
  background-color: #e9b124;
  border-radius: 5px;
}

.navigation-icon {
  width: 20px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
}

.navigation-icon.shop { background-image: url("/public/assets/images/icons/navigation/shop.png"); }
.navigation-icon.leaderboards { background-image: url("/public/assets/images/icons/navigation/leaderboards.png"); }
.navigation-icon.rules { background-image: url("/public/assets/images/icons/navigation/rules.gif"); }
.navigation-icon.home { background-image: url("/public/assets/images/icons/navigation/home.png"); }
.navigation-icon.community { background-image: url("/public/assets/images/icons/navigation/community.png"); }

.swiper-slide {
  height: 215px !important;
}

.swiper-pagination-bullet-active,
html.dark .swiper-pagination-bullet-active {
  background: #e9b124 !important;
}

html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: white !important;
}

.prose-xl p:is([style*="text-align: center;"]) img { display: block; margin-left: auto; margin-right: auto; }
.prose-xl p:is([style*="text-align: left;"]) img { margin-left: 0; margin-right: auto; }
.prose-xl p:is([style*="text-align: right;"]) img { margin-left: auto; margin-right: 0; }
.prose-xl p { font-size: 16px; }

.atom-align-left { float: left; margin: 0 10px 10px 0; }
.atom-align-right { float: right; margin: 0 0 10px 10px; }
.atom-align-center { display: block; margin: 0 auto; text-align: center; }
.atom-align-center > * { text-align: center; }

#article-content a {
  color: var(--link-color, #53b2f8);
}

.cursor-grab { cursor: grab !important; }
.cursor-grab:active { cursor: grabbing !important; }

.text-body { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-nav { color: var(--color-navbar-text); }

.text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }

.transition-base {
  transition: all 0.2s ease-in-out;
}

.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.card-base {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
}

.card-base:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);
}