src/app/globals.css - dev - indievid/Meteo

src/app/globals.css
199 строк5 KB
studio-agent
Squash 'studio-workflow-seed-2bc9e30d-af89-4ec8-ab40-a8a1622fbb2f' into dev
24 июл 2026, 19:13
24 июл 2026, 19:134328f1c
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 199 89% 48%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --accent: 199 89% 48%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 199 89% 48%;

    --radius: 1rem;

    --bg-sunny-from: 38 100% 88%;
    --bg-sunny-via: 199 100% 90%;
    --bg-sunny-to: 220 90% 95%;

    --bg-cloudy-from: 215 35% 88%;
    --bg-cloudy-via: 215 40% 92%;
    --bg-cloudy-to: 220 50% 96%;

    --bg-rainy-from: 215 40% 75%;
    --bg-rainy-via: 220 45% 82%;
    --bg-rainy-to: 230 50% 90%;

    --bg-snowy-from: 210 50% 92%;
    --bg-snowy-via: 210 60% 95%;
    --bg-snowy-to: 220 70% 98%;

    --bg-night-from: 230 45% 18%;
    --bg-night-via: 240 50% 25%;
    --bg-night-to: 260 45% 35%;
  }

  .dark {
    --background: 230 35% 8%;
    --foreground: 210 40% 98%;

    --card: 230 30% 12%;
    --card-foreground: 210 40% 98%;

    --popover: 230 30% 12%;
    --popover-foreground: 210 40% 98%;

    --primary: 199 89% 60%;
    --primary-foreground: 230 35% 8%;

    --secondary: 230 25% 18%;
    --secondary-foreground: 210 40% 98%;

    --muted: 230 25% 18%;
    --muted-foreground: 215 20% 70%;

    --accent: 199 89% 60%;
    --accent-foreground: 230 35% 8%;

    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 230 25% 22%;
    --input: 230 25% 22%;
    --ring: 199 89% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  }
}

@layer components {
  .glass {
    @apply bg-white/55 backdrop-blur-xl ring-1 ring-white/60 shadow-[0_8px_32px_-12px_rgba(15,23,42,0.18)];
  }
  .dark .glass {
    @apply bg-white/[0.06] ring-white/10 shadow-[0_8px_32px_-12px_rgba(0,0,0,0.5)];
  }

  .glass-soft {
    @apply bg-white/40 backdrop-blur-md ring-1 ring-white/50;
  }
  .dark .glass-soft {
    @apply bg-white/[0.04] ring-white/10;
  }

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

  .scene-sunny {
    background-image:
      radial-gradient(at 20% 0%, hsl(var(--bg-sunny-from)) 0px, transparent 55%),
      radial-gradient(at 80% 10%, hsl(var(--bg-sunny-via)) 0px, transparent 50%),
      radial-gradient(at 50% 100%, hsl(var(--bg-sunny-to)) 0px, transparent 60%);
  }
  .scene-cloudy {
    background-image:
      radial-gradient(at 15% 10%, hsl(var(--bg-cloudy-from)) 0px, transparent 55%),
      radial-gradient(at 85% 20%, hsl(var(--bg-cloudy-via)) 0px, transparent 50%),
      radial-gradient(at 50% 100%, hsl(var(--bg-cloudy-to)) 0px, transparent 60%);
  }
  .scene-rainy {
    background-image:
      radial-gradient(at 20% 0%, hsl(var(--bg-rainy-from)) 0px, transparent 55%),
      radial-gradient(at 80% 15%, hsl(var(--bg-rainy-via)) 0px, transparent 50%),
      radial-gradient(at 50% 100%, hsl(var(--bg-rainy-to)) 0px, transparent 60%);
  }
  .scene-snowy {
    background-image:
      radial-gradient(at 20% 0%, hsl(var(--bg-snowy-from)) 0px, transparent 55%),
      radial-gradient(at 80% 10%, hsl(var(--bg-snowy-via)) 0px, transparent 50%),
      radial-gradient(at 50% 100%, hsl(var(--bg-snowy-to)) 0px, transparent 60%);
  }
  .scene-night {
    background-image:
      radial-gradient(at 20% 0%, hsl(var(--bg-night-from)) 0px, transparent 55%),
      radial-gradient(at 80% 20%, hsl(var(--bg-night-via)) 0px, transparent 50%),
      radial-gradient(at 50% 100%, hsl(var(--bg-night-to)) 0px, transparent 60%);
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

  .animate-float-slow { animation: float 9s ease-in-out infinite; }
  .animate-float-slower { animation: float 14s ease-in-out infinite; }
  .animate-spin-slow { animation: spin 30s linear infinite; }
  .animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }
  .animate-shine { animation: shine 6s ease-in-out infinite; }
  .animate-rain { animation: rain 1s linear infinite; }
  .animate-snow { animation: snow 8s linear infinite; }
  .animate-bolt { animation: bolt 4s ease-in-out infinite; }
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-14px) translateX(6px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes shine {
  0%, 100% { transform: translateX(-30%); opacity: 0; }
  50%      { transform: translateX(130%); opacity: 0.6; }
}

@keyframes rain {
  0%   { transform: translateY(-10%); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(140%); opacity: 0; }
}

@keyframes snow {
  0%   { transform: translateY(-10%) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(140%) translateX(20px); opacity: 0; }
}

@keyframes bolt {
  0%, 92%, 100% { opacity: 0; }
  93%, 96%      { opacity: 1; }
  94%, 97%      { opacity: 0; }
}