kozenet_ui 0.1.0

data/app/assets/stylesheets/kozenet_ui/components/badge.css

@@ -0,0 +1,101 @@
+@layer components {
+  /* Badge base */
+  .kz-badge {
+    border-radius: var(--kz-radius-sm);
+    font-weight: var(--kz-font-weight-bold);
+    letter-spacing: 0.05em;
+    transition: all var(--kz-transition-base);
+  }
+
+  /* Size variants */
+  .kz-badge.kz-size-xs {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.625rem;
+    line-height: 1;
+  }
+
+  .kz-badge.kz-size-sm {
+    padding: 0.35rem 0.6rem;
+    font-size: var(--kz-font-size-xs);
+    line-height: 1;
+  }
+
+  .kz-badge.kz-size-md {
+    padding: 0.4rem 0.7rem;
+    font-size: var(--kz-font-size-sm);
+    line-height: 1.2;
+  }
+
+  .kz-badge.kz-size-lg {
+    padding: 0.5rem 0.85rem;
+    font-size: var(--kz-font-size-base);
+    line-height: 1.2;
+  }
+
+  /* Variant colors */
+  .kz-badge.kz-badge-primary,
+  .kz-badge.kz-variant-primary {
+    background: linear-gradient(120deg, #6366f1, #0ea5e9);
+    color: white;
+    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.4);
+  }
+
+  .kz-badge.kz-badge-secondary,
+  .kz-badge.kz-variant-secondary {
+    background: linear-gradient(120deg, #8b5cf6, #a855f7);
+    color: white;
+    box-shadow: 0 2px 8px -2px rgba(139, 92, 246, 0.4);
+  }
+
+  .kz-badge.kz-badge-success,
+  .kz-badge.kz-variant-success {
+    background: linear-gradient(120deg, #10b981, #059669);
+    color: white;
+    box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.4);
+  }
+
+  .kz-badge.kz-badge-warning,
+  .kz-badge.kz-variant-warning {
+    background: linear-gradient(120deg, #f59e0b, #d97706);
+    color: white;
+    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.4);
+  }
+
+  .kz-badge.kz-badge-error,
+  .kz-badge.kz-variant-error {
+    background: linear-gradient(120deg, #ef4444, #dc2626);
+    color: white;
+    box-shadow: 0 2px 8px -2px rgba(239, 68, 68, 0.4);
+  }
+
+  .kz-badge.kz-badge-info,
+  .kz-badge.kz-variant-info {
+    background: linear-gradient(120deg, #0ea5e9, #0284c7);
+    color: white;
+    box-shadow: 0 2px 8px -2px rgba(14, 165, 233, 0.4);
+  }
+
+  /* Ghost variant */
+  .kz-badge.kz-variant-ghost {
+    background: transparent;
+    color: var(--kz-text-muted);
+    border: 1px solid var(--kz-border-default);
+  }
+
+  /* Outline variants */
+  .kz-badge.kz-variant-outline {
+    background: transparent;
+    border: 1px solid currentColor;
+  }
+
+  /* Icon spacing */
+  .kz-badge-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .kz-badge-icon svg {
+    width: 0.875em;
+    height: 0.875em;
+  }
+}

data/app/assets/stylesheets/kozenet_ui/components/button.css

@@ -0,0 +1,230 @@
+@layer components {
+  /* Base button styles */
+  .kz-btn {
+    position: relative;
+    border: 0;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Size variants */
+  .kz-btn.kz-size-xs {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+    font-size: 0.75rem;
+    border-radius: var(--kz-radius-sm);
+    min-height: 32px;
+    font-size: var(--kz-font-size-xs);
+  }
+
+  .kz-btn.kz-size-sm {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-radius: 14px;
+    min-height: 36px;
+    font-size: var(--kz-font-size-sm);
+  }
+
+  .kz-btn.kz-size-md {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    border-radius: var(--kz-radius-md);
+    min-height: 46px;
+    font-size: var(--kz-font-size-sm);
+    letter-spacing: 0.35px;
+  }
+
+  .kz-btn.kz-size-lg {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    border-radius: 18px;
+    min-height: 52px;
+    font-size: var(--kz-font-size-base);
+    font-weight: var(--kz-font-weight-semibold);
+  }
+
+  .kz-btn.kz-size-xl {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-radius: var(--kz-radius-lg);
+    min-height: 60px;
+    font-size: var(--kz-font-size-lg);
+    font-weight: var(--kz-font-weight-semibold);
+  }
+
+  /* Primary variant - Gradient */
+  .kz-btn.kz-variant-primary {
+    background: linear-gradient(110deg, #6366f1, #0ea5e9 55%, #06b6d4);
+    color: white;
+    box-shadow: var(--kz-shadow-md);
+    transition: transform var(--kz-transition-base), box-shadow var(--kz-transition-base);
+  }
+
+  .kz-btn.kz-variant-primary:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-lg);
+  }
+
+  .kz-btn.kz-variant-primary:active:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  /* Secondary variant - Elevated glass */
+  .kz-btn.kz-variant-secondary {
+    background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.5));
+    border: 1px solid rgba(0,0,0,0.05);
+    color: var(--kz-text-default);
+    backdrop-filter: blur(10px);
+    transition: all var(--kz-transition-base);
+  }
+
+  .dark .kz-btn.kz-variant-secondary {
+    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
+    border-color: rgba(255,255,255,0.1);
+  }
+
+  .kz-btn.kz-variant-secondary:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
+    transform: translateY(-2px);
+  }
+
+  .dark .kz-btn.kz-variant-secondary:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.12));
+  }
+
+  /* Ghost variant */
+  .kz-btn.kz-variant-ghost {
+    background: transparent;
+    color: var(--kz-text-muted);
+    transition: all var(--kz-transition-base);
+  }
+
+  .kz-btn.kz-variant-ghost:hover:not(:disabled) {
+    background: rgba(0,0,0,0.05);
+    color: var(--kz-text-default);
+  }
+
+  .dark .kz-btn.kz-variant-ghost:hover:not(:disabled) {
+    background: rgba(255,255,255,0.08);
+  }
+
+  /* Outline variant */
+  .kz-btn.kz-variant-outline {
+    background: transparent;
+    border: 1px solid var(--kz-border-default);
+    color: var(--kz-text-default);
+    transition: all var(--kz-transition-base);
+  }
+
+  .kz-btn.kz-variant-outline:hover:not(:disabled) {
+    background: rgba(0,0,0,0.05);
+    border-color: var(--kz-text-default);
+  }
+
+  .dark .kz-btn.kz-variant-outline:hover:not(:disabled) {
+    background: rgba(255,255,255,0.08);
+  }
+
+  /* Accent variant */
+  .kz-btn.kz-variant-accent {
+    background: linear-gradient(125deg, #6366f1, #0ea5e9 55%, #06b6d4);
+    color: white;
+    box-shadow: var(--kz-shadow-md);
+    transition: transform var(--kz-transition-base), box-shadow var(--kz-transition-base);
+  }
+
+  .kz-btn.kz-variant-accent:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-lg);
+  }
+
+  /* Success variant */
+  .kz-btn.kz-variant-success {
+    background: linear-gradient(125deg, #10b981, #059669);
+    color: white;
+    box-shadow: var(--kz-shadow-md);
+  }
+
+  .kz-btn.kz-variant-success:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-lg);
+  }
+
+  /* Warning variant */
+  .kz-btn.kz-variant-warning {
+    background: linear-gradient(125deg, #f59e0b, #d97706);
+    color: white;
+    box-shadow: var(--kz-shadow-md);
+  }
+
+  .kz-btn.kz-variant-warning:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-lg);
+  }
+
+  /* Error variant */
+  .kz-btn.kz-variant-error {
+    background: linear-gradient(125deg, #ef4444, #dc2626);
+    color: white;
+    box-shadow: var(--kz-shadow-md);
+  }
+
+  .kz-btn.kz-variant-error:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-lg);
+  }
+
+  /* Loading spinner */
+  .kz-btn-spinner {
+    margin-left: -0.25rem;
+  }
+
+  /* Icon spacing */
+  .kz-btn-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .kz-btn-icon svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .kz-btn.kz-size-lg .kz-btn-icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .kz-btn.kz-size-xl .kz-btn-icon svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Focus rings */
+  .kz-btn:focus-visible {
+    outline: 2px solid rgb(99 102 241 / 0.5);
+    outline-offset: 2px;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .kz-btn {
+      transition: none;
+    }
+    
+    .kz-btn:hover:not(:disabled) {
+      transform: none;
+    }
+  }
+}

data/app/assets/stylesheets/kozenet_ui/components/header.css

@@ -0,0 +1,389 @@
+@layer components {
+  /* Header container */
+  .kz-header {
+    position: relative;
+    width: 100%;
+    z-index: var(--kz-z-sticky);
+  }
+
+  .kz-header.kz-header-sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  .kz-header.kz-header-blur {
+    backdrop-filter: blur(28px) saturate(1.4);
+    -webkit-backdrop-filter: blur(28px) saturate(1.4);
+    background: linear-gradient(135deg, 
+      rgba(245, 247, 250, 0.88), 
+      rgba(240, 243, 247, 0.82)
+    );
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .dark .kz-header.kz-header-blur {
+    background: linear-gradient(135deg, 
+      rgba(15, 18, 24, 0.85), 
+      rgba(20, 24, 30, 0.82)
+    );
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  /* Header bar (main content) */
+  .kz-header-bar {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    height: 78px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 1rem;
+    max-width: 1480px;
+  }
+
+  @media (min-width: 1040px) {
+    .kz-header-bar {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
+
+  /* Left section (brand + nav) */
+  .kz-header-start {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  /* Brand */
+  .kz-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    font-weight: 600;
+    font-size: 1.125rem;
+    text-decoration: none;
+    padding: 0.4rem 0.55rem;
+    border-radius: var(--kz-radius-md);
+    letter-spacing: 0.3px;
+  }
+
+  .kz-brand img {
+    height: 44px;
+    width: auto;
+    display: block;
+  }
+
+  .kz-brand .accent {
+    background: linear-gradient(110deg, 
+      rgb(var(--kz-primary-500) / 1), 
+      rgb(var(--kz-accent-500) / 1) 55%, 
+      rgb(var(--kz-accent-400) / 1)
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Navigation links */
+  .kz-nav-links {
+    display: none;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .kz-nav-link {
+    display: inline-flex;
+    align-items: center;
+    height: 2.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--kz-text-muted);
+    text-decoration: none;
+    border-radius: var(--kz-radius-md);
+    position: relative;
+    transition: var(--kz-transition-base);
+    letter-spacing: 0.35px;
+  }
+
+  .kz-nav-link:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: var(--kz-text-default);
+  }
+
+  .dark .kz-nav-link:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .kz-nav-link.is-active {
+    background: var(--kz-cta-gradient);
+    color: var(--kz-cta-text);
+    box-shadow: var(--kz-shadow-md);
+  }
+
+  /* Search */
+  .kz-search-col {
+    display: none;
+    display: block;
+  }
+
+  .kz-search-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.75), 
+      rgba(255, 255, 255, 0.55)
+    );
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    padding: 0 0.85rem 0 2.25rem;
+    box-shadow: var(--kz-shadow-sm);
+  }
+
+  .dark .kz-search-wrap {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.1), 
+      rgba(255, 255, 255, 0.06)
+    );
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .kz-search-icon {
+    position: absolute;
+    left: 0.75rem;
+    color: var(--kz-text-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .kz-search-input {
+    flex: 1;
+    background: transparent;
+    border: 0;
+    outline: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--kz-text-default);
+    letter-spacing: 0.35px;
+  }
+
+  .kz-search-input::placeholder {
+    color: var(--kz-text-muted);
+  }
+
+  /* Actions */
+  .kz-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .kz-action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 46px;
+    border-radius: var(--kz-radius-md);
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.65), 
+      rgba(255, 255, 255, 0.5)
+    );
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    color: var(--kz-text-muted);
+    transition: var(--kz-transition-base);
+  }
+
+  .kz-action-btn:hover {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.9), 
+      rgba(255, 255, 255, 0.75)
+    );
+    color: var(--kz-text-default);
+    transform: translateY(-2px);
+  }
+
+  .dark .kz-action-btn {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.12), 
+      rgba(255, 255, 255, 0.08)
+    );
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .dark .kz-action-btn:hover {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.18), 
+      rgba(255, 255, 255, 0.12)
+    );
+  }
+
+  /* CTA Button */
+  .kz-cta {
+    display: inline-flex;
+    align-items: center;
+    height: 46px;
+    padding: 0 1.15rem;
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--kz-radius-md);
+    background: var(--kz-cta-gradient);
+    color: var(--kz-cta-text);
+    box-shadow: var(--kz-shadow-md);
+    transition: var(--kz-transition-base);
+  }
+
+  .kz-cta:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-lg);
+  }
+
+  /* Avatar button */
+  .kz-avatar-btn {
+    width: 46px;
+    height: 46px;
+    border-radius: var(--kz-radius-md);
+    overflow: hidden;
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.65), 
+      rgba(255, 255, 255, 0.5)
+    );
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: var(--kz-shadow-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dark .kz-avatar-btn {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.12), 
+      rgba(255, 255, 255, 0.08)
+    );
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Mobile trigger */
+  .kz-mobile-trigger {
+    display: none;
+  }
+
+  /* Mobile panel */
+  .kz-mobile-panel {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 78px;
+    padding: 1rem 1rem 1.25rem;
+    background: linear-gradient(135deg, 
+      rgba(245, 247, 250, 0.95), 
+      rgba(240, 243, 247, 0.9)
+    );
+    backdrop-filter: blur(26px) saturate(1.4);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.25);
+    transform-origin: top center;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .kz-mobile-panel.hidden {
+    transform: scaleY(0);
+  }
+
+  .dark .kz-mobile-panel {
+    background: linear-gradient(135deg, 
+      rgba(15, 18, 24, 0.95), 
+      rgba(20, 24, 30, 0.9)
+    );
+    border-color: rgba(255, 255, 255, 0.06);
+    box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.8);
+  }
+
+  /* User dropdown */
+  .kz-user-dropdown {
+    position: absolute;
+    top: 78px;
+    right: 1rem;
+    min-width: 220px;
+    padding: 0.55rem 0.55rem 0.7rem;
+    border-radius: 18px;
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.9), 
+      rgba(255, 255, 255, 0.75)
+    );
+    backdrop-filter: blur(26px) saturate(1.4);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    box-shadow: var(--kz-shadow-xl);
+    animation: fadeIn 0.28s ease;
+  }
+
+  .dark .kz-user-dropdown {
+    background: linear-gradient(135deg, 
+      rgba(20, 24, 30, 0.92), 
+      rgba(18, 22, 28, 0.88)
+    );
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 1080px) {
+    .kz-nav-links {
+      display: none;
+    }
+    
+    .kz-search-col {
+      display: none;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .kz-header-bar {
+      grid-template-columns: 1fr auto;
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .kz-action-btn:hover,
+    .kz-cta:hover {
+      transform: none;
+    }
+    
+    .kz-mobile-panel {
+      transition: none;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+      --kz-cta-gradient: var(--kz-cta-gradient-dark);
+      --kz-cta-text: var(--kz-cta-text-dark);
+    }
+  }
+}
+
+header {
+  background: none;
+}