einundzwanzig-verein/resources/css/components/custom.css

/**
 * Einundzwanzig Custom Components
 *
 * Projekt-spezifische UI-Komponenten wie Feature-Cards,
 * Info-Boxen, Navigation und Status-Badges.
 */

@layer components {
    /**
     * Feature Cards
     *
     * Karten für die Darstellung von Features/Benefits.
     * Varianten: Standard, Nostr (grün), Lightning (lila)
     */
    .feature-card {
        @apply bg-bg-surface rounded-xl p-5 border border-border-subtle;
    }

    .feature-card-nostr {
        @apply bg-bg-surface rounded-xl p-5 border border-green-nostr;
    }

    .feature-card-lightning {
        @apply bg-bg-surface rounded-xl p-5 border border-purple-accent;
    }

    /**
     * Info Boxes
     *
     * Hervorgehobene Informationsbereiche mit Gradient-Hintergrund.
     * Varianten: Warning (amber), Success (grün)
     */
    .info-box {
        @apply rounded-xl p-4 border;
    }

    .info-box-warning {
        @apply rounded-xl p-4 border border-amber-500 bg-gradient-to-b from-amber-500/20 to-transparent;
    }

    .info-box-success {
        @apply rounded-xl p-4 border border-green-nostr bg-gradient-to-b from-green-nostr/20 to-transparent;
    }

    /**
     * Navigation Items
     *
     * Header-Navigation mit Active-State.
     */
    .nav-item {
        @apply px-4 py-3 text-text-secondary hover:text-text-primary transition-colors;
    }

    .nav-item-active {
        @apply px-4 py-3 text-text-primary hover:text-text-primary transition-colors border-b-2 border-orange-primary;
    }

    /**
     * Status Badges
     *
     * Inline-Status-Anzeigen für verschiedene Zustände.
     * Varianten: Active (grün), Pending (amber)
     */
    .status-badge {
        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm;
    }

    .status-badge-active {
        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-green-success/20 text-green-success;
    }

    .status-badge-pending {
        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-amber-500/20 text-amber-500;
    }

    /**
     * Brand Icon Container
     *
     * Container für das Einundzwanzig-Logo/Icon.
     */
    .brand-icon {
        @apply w-8 h-8 rounded-lg bg-orange-primary flex items-center justify-center;
    }

    /**
     * News Category Badges
     *
     * Farbige Kategorie-Badges für News-Karten.
     * Jede Farbe hat einen transparenten Hintergrund mit passender Textfarbe.
     */
    .news-category-badge {
        @apply bg-bg-elevated text-text-secondary border border-border-default;
    }

    .news-category-badge--amber {
        background-color: #FF5C0033;
        color: #FF5C00;
        border: none;
    }

    .news-category-badge--zinc {
        @apply bg-bg-elevated text-text-secondary border border-border-default;
    }

    .news-category-badge--cyan {
        background-color: #06b6d433;
        color: #06b6d4;
        border: none;
    }

    .news-category-badge--orange {
        background-color: #FF5C0033;
        color: #FF5C00;
        border: none;
    }

    .news-category-badge--green {
        background-color: #22c55e33;
        color: #22c55e;
        border: none;
    }

    .news-category-badge--blue {
        background-color: #3b82f633;
        color: #3b82f6;
        border: none;
    }

    .news-category-badge--purple {
        background-color: #7c3aed33;
        color: #7c3aed;
        border: none;
    }

    .news-category-badge--emerald {
        background-color: #10b98133;
        color: #10b981;
        border: none;
    }

    .news-category-badge--rose {
        background-color: #f4365833;
        color: #f43658;
        border: none;
    }

    /**
     * Board Vote Ribbon
     *
     * Diagonal ribbon in der oberen rechten Ecke einer Card, das
     * Vorstandsmitglieder auf ausstehende Voting-Entscheidungen hinweist.
     */
    .vote-ribbon {
        @apply pointer-events-none absolute top-6 -right-12 z-10 w-44 rotate-45
            bg-gradient-to-r from-amber-400 via-orange-500 to-orange-600
            py-1.5 text-center text-[10px] font-bold uppercase tracking-[0.18em] text-white
            shadow-[0_4px_12px_rgba(249,115,22,0.45)] ring-1 ring-white/20;
    }

    .vote-ribbon__label {
        @apply drop-shadow-[0_1px_1px_rgba(0,0,0,0.35)];
    }
}