nihonbuzz-academy/resources/css/app.css

/* Plyr CSS - Must be at top before @tailwind */
@import "plyr/dist/plyr.css";

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

@layer base {
    html {
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
    }
    :root {
        --brand-red: #FF4500;
        --brand-black: #000000;
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 16 100% 50%;
        --primary-foreground: 0 0% 100%;
        --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%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 16 100% 50%;
        --radius: 1rem;

        /* Plyr Custom Theme */
        --plyr-color-main: #FF4500;
    }
    .dark {
        --background: 240 10% 3.9%; /* Matching nihonbuzz.org #0a0a0b approx */
        --foreground: 0 0% 98%;
        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 240 10% 4.8%;
        --popover-foreground: 0 0% 98%;
        --primary: 16 100% 50%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 12%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 16 100% 50%;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-11 px-6 shadow-sm;
    }
    .btn-sm {
        @apply h-9 rounded-md px-3 text-xs shadow-sm;
    }
    .btn-lg {
        @apply h-12 rounded-xl px-8 shadow-sm;
    }
    .btn-icon {
        @apply h-11 w-11 px-0 shadow-sm;
    }
    
    .btn-primary {
        @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:hover:bg-primary/80;
    }
    .btn-secondary {
        @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 dark:hover:bg-secondary/70;
    }
    .btn-outline {
        @apply border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground;
    }
    .btn-ghost {
        @apply shadow-none hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 dark:hover:text-foreground;
    }
    .btn-destructive {
        @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 dark:hover:bg-destructive/80;
    }
    .btn-link {
        @apply text-primary underline-offset-4 hover:underline shadow-none bg-transparent hover:bg-transparent;
    }
    
    /* Glassmorphism Utilities */
    .card-glass {
        @apply bg-white/50 dark:bg-black/30 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm;
    }
    
    .btn-glass {
        @apply border border-white/40 dark:border-white/10 bg-white/40 dark:bg-white/5 hover:bg-white/60 dark:hover:bg-white/10 backdrop-blur-md text-foreground shadow-sm;
    }
}

@layer utilities {
    .bg-grid {
        background-size: 40px 40px;
        background-image: 
            linear-gradient(to right, hsl(var(--foreground) / var(--grid-opacity, 0.05)) 1px, transparent 1px),
            linear-gradient(to bottom, hsl(var(--foreground) / var(--grid-opacity, 0.05)) 1px, transparent 1px);
        mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
        -webkit-mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
    }

    .bg-seigaiha {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 40a40 40 0 0 1 40-40 40 40 0 0 1 40 40H70a30 30 0 0 0-30-30 30 30 0 0 0-30 30H0zm40 0a10 10 0 0 1 10-10 10 10 0 0 1 10 10H50a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-10zm0-30a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-5zM0 10a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5H0zm70 0a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-5z' fill='none' stroke='%23FF4500' stroke-width='1.5' stroke-opacity='0.15'/%3E%3C/svg%3E");
        mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
        -webkit-mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
    }

    .bg-wave-global {
        background-color: transparent;
        background-image: url('/brand/wave-pattern-global.svg');
        background-repeat: repeat;
        background-size: 400px auto; /* Adjust scale as needed, 400px seems a good starting point for visibility */
    }
}

@layer base {
  * {
    @apply border-border;
    }
  body {
    --grid-opacity: 0.05;
    --hero-glow-opacity: 0.8;
    @apply bg-background text-foreground transition-colors duration-300;
    }
  .dark body {
    --grid-opacity: 0.02;
    --hero-glow-opacity: 0.5;
  }
}

.plyr--video {
    @apply rounded-2xl overflow-hidden shadow-2xl;
}