Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-22 19:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: modernize website design with gradients and glassmorphism

Browse Source 
- Add gradient backgrounds and accents using purple/pink/cyan palette
- Implement glassmorphism effects on header, cards, and filters
- Add gradient text for headings and stats
- Improve card hover effects with glow shadows and gradient borders
- Update buttons with gradient primary style
- Add subtle pattern overlay on hero section
- Increase spacing and border radius for modern feel
- Update tags with gradient backgrounds
- Add left accent border animation on resource items
- Improve modal with blur backdrop and rounded corners
- Update color palette for both light and dark themes
This commit is contained in:
Aaron Powell
2026-01-28 17:03:20 +11:00
parent f76f63866a
commit 57edb2a34b
2 changed files with 319 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/public/data/manifest.json
View File

@@ -1,5 +1,5 @@
{ {
"generated": "2026-01-28T05:56:29.890Z", "generated": "2026-01-28T06:03:00.479Z",
"counts": { "counts": {
"agents": 140, "agents": 140,
"prompts": 134, "prompts": 134,

507
website/public/styles/global.css
View File

@@ -1,64 +1,87 @@
/* CSS Variables and Base Styles */ /* CSS Variables and Base Styles */
:root { :root {
/* Dark theme (default) */ /* Dark theme (default) */
--color-bg: #0d1117; --color-bg: #0a0a0f;
--color-bg-secondary: #161b22; --color-bg-secondary: #12121a;
--color-bg-tertiary: #21262d; --color-bg-tertiary: #1a1a24;
--color-border: #30363d; --color-border: #2a2a3a;
--color-text: #c9d1d9; --color-text: #e0e0e8;
--color-text-muted: #8b949e; --color-text-muted: #8888a0;
--color-text-emphasis: #f0f6fc; --color-text-emphasis: #ffffff;
--color-link: #58a6ff; --color-link: #6c9fff;
--color-link-hover: #79c0ff; --color-link-hover: #9cc0ff;
--color-accent: #238636; --color-accent: #6366f1;
--color-accent-hover: #2ea043; --color-accent-hover: #818cf8;
--color-danger: #f85149; --color-accent-secondary: #ec4899;
--color-warning: #d29922; --color-danger: #f43f5e;
--color-success: #238636; --color-warning: #f59e0b;
--color-card-bg: #161b22; --color-success: #10b981;
--color-card-hover: #1c2128; --color-card-bg: rgba(18, 18, 26, 0.8);
--border-radius: 6px; --color-card-hover: rgba(26, 26, 36, 0.9);
--border-radius-lg: 12px; --color-glass: rgba(255, 255, 255, 0.05);
--shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.12); --color-glass-border: rgba(255, 255, 255, 0.1);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
--transition: 0.15s ease; --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.15), transparent);
--border-radius: 8px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.5);
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--container-width: 1200px; --container-width: 1200px;
--header-height: 64px; --header-height: 72px;
} }
/* Light theme */ /* Light theme */
[data-theme="light"] { [data-theme="light"] {
--color-bg: #ffffff; --color-bg: #fafafa;
--color-bg-secondary: #f6f8fa; --color-bg-secondary: #ffffff;
--color-bg-tertiary: #f0f3f6; --color-bg-tertiary: #f4f4f5;
--color-border: #d0d7de; --color-border: #e4e4e7;
--color-text: #24292f; --color-text: #3f3f46;
--color-text-muted: #57606a; --color-text-muted: #71717a;
--color-text-emphasis: #1f2328; --color-text-emphasis: #18181b;
--color-link: #0969da; --color-link: #6366f1;
--color-link-hover: #0550ae; --color-link-hover: #4f46e5;
--color-card-bg: #ffffff; --color-card-bg: rgba(255, 255, 255, 0.9);
--color-card-hover: #f6f8fa; --color-card-hover: rgba(255, 255, 255, 1);
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08); --color-glass: rgba(255, 255, 255, 0.7);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --color-glass-border: rgba(0, 0, 0, 0.08);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
--shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3);
} }
/* Auto theme based on system preference */ /* Auto theme based on system preference */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--color-bg: #ffffff; --color-bg: #fafafa;
--color-bg-secondary: #f6f8fa; --color-bg-secondary: #ffffff;
--color-bg-tertiary: #f0f3f6; --color-bg-tertiary: #f4f4f5;
--color-border: #d0d7de; --color-border: #e4e4e7;
--color-text: #24292f; --color-text: #3f3f46;
--color-text-muted: #57606a; --color-text-muted: #71717a;
--color-text-emphasis: #1f2328; --color-text-emphasis: #18181b;
--color-link: #0969da; --color-link: #6366f1;
--color-link-hover: #0550ae; --color-link-hover: #4f46e5;
--color-card-bg: #ffffff; --color-card-bg: rgba(255, 255, 255, 0.9);
--color-card-hover: #f6f8fa; --color-card-hover: rgba(255, 255, 255, 1);
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08); --color-glass: rgba(255, 255, 255, 0.7);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --color-glass-border: rgba(0, 0, 0, 0.08);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
--shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3);
} }
} }
@@ -98,8 +121,10 @@ a:hover {
/* Header */ /* Header */
.site-header { .site-header {
background-color: var(--color-bg-secondary); background: var(--color-glass);
border-bottom: 1px solid var(--color-border); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-glass-border);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -116,38 +141,40 @@ a:hover {
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
font-weight: 600; font-weight: 700;
font-size: 18px; font-size: 20px;
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
transition: all var(--transition);
} }
.logo:hover { .logo:hover {
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
transform: scale(1.02);
} }
.logo-icon { .logo-icon {
font-size: 24px; font-size: 28px;
} }
.main-nav { .main-nav {
display: flex; display: flex;
gap: 24px; gap: 8px;
} }
.main-nav a { .main-nav a {
color: var(--color-text); color: var(--color-text-muted);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 8px 0; padding: 8px 14px;
border-bottom: 2px solid transparent; border-radius: var(--border-radius);
transition: all var(--transition); transition: all var(--transition);
} }
.main-nav a:hover, .main-nav a:hover,
.main-nav a.active { .main-nav a.active {
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
border-bottom-color: var(--color-accent); background: var(--color-bg-tertiary);
} }
.github-link { .github-link {
@@ -225,46 +252,68 @@ a:hover {
/* Hero Section */ /* Hero Section */
.hero { .hero {
background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%); background: var(--gradient-hero), var(--color-bg);
padding: 80px 0 60px; padding: 100px 0 80px;
text-align: center; text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
} }
.hero h1 { .hero h1 {
font-size: 48px; font-size: 56px;
font-weight: 700; font-weight: 800;
color: var(--color-text-emphasis); letter-spacing: -0.02em;
margin-bottom: 16px; background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
position: relative;
} }
.hero-subtitle { .hero-subtitle {
font-size: 20px; font-size: 20px;
color: var(--color-text-muted); color: var(--color-text-muted);
max-width: 600px; max-width: 650px;
margin: 0 auto 32px; margin: 0 auto 40px;
line-height: 1.7;
} }
.hero-search { .hero-search {
max-width: 500px; max-width: 560px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
.hero-search input { .hero-search input {
width: 100%; width: 100%;
padding: 16px 20px; padding: 18px 24px;
font-size: 16px; font-size: 16px;
background-color: var(--color-bg-secondary); background: var(--color-glass);
border: 1px solid var(--color-border); backdrop-filter: blur(10px);
border-radius: var(--border-radius-lg); -webkit-backdrop-filter: blur(10px);
border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius-xl);
color: var(--color-text); color: var(--color-text);
transition: all var(--transition); transition: all var(--transition);
box-shadow: var(--shadow);
} }
.hero-search input:focus { .hero-search input:focus {
outline: none; outline: none;
border-color: var(--color-link); border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3); box-shadow: var(--shadow-glow);
} }
.hero-search input::placeholder { .hero-search input::placeholder {
@@ -274,8 +323,8 @@ a:hover {
.hero-stats { .hero-stats {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 40px; gap: 48px;
margin-top: 40px; margin-top: 56px;
} }
.stat { .stat {
@@ -283,14 +332,20 @@ a:hover {
} }
.stat-value { .stat-value {
font-size: 32px; font-size: 40px;
font-weight: 700; font-weight: 800;
color: var(--color-text-emphasis); background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.stat-label { .stat-label {
font-size: 14px; font-size: 14px;
color: var(--color-text-muted); color: var(--color-text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
} }
/* Search Results Dropdown */ /* Search Results Dropdown */
@@ -358,71 +413,100 @@ a:hover {
/* Cards Grid */ /* Cards Grid */
.cards-grid { .cards-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px; gap: 24px;
} }
.card { .card {
background-color: var(--color-card-bg); background: var(--color-card-bg);
border: 1px solid var(--color-border); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
padding: 24px; padding: 28px;
transition: all var(--transition); transition: all var(--transition);
display: block; display: block;
color: inherit; color: inherit;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition);
} }
.card:hover { .card:hover {
background-color: var(--color-card-hover); background: var(--color-card-hover);
border-color: var(--color-link); border-color: transparent;
transform: translateY(-2px); transform: translateY(-4px);
box-shadow: var(--shadow); box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.card:hover::before {
opacity: 1;
} }
.card-icon { .card-icon {
font-size: 32px; font-size: 40px;
margin-bottom: 12px; margin-bottom: 16px;
display: inline-block;
transition: transform var(--transition);
}
.card:hover .card-icon {
transform: scale(1.1);
} }
.card h3 { .card h3 {
font-size: 18px; font-size: 20px;
font-weight: 600; font-weight: 700;
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
margin-bottom: 8px; margin-bottom: 10px;
} }
.card p { .card p {
font-size: 14px; font-size: 15px;
color: var(--color-text-muted); color: var(--color-text-muted);
line-height: 1.6;
} }
/* Quick Links Section */ /* Quick Links Section */
.quick-links { .quick-links {
padding: 60px 0; padding: 80px 0;
} }
/* Featured Section */ /* Featured Section */
.featured { .featured {
padding: 60px 0; padding: 80px 0;
background-color: var(--color-bg-secondary); background: var(--color-bg-secondary);
position: relative;
} }
.featured h2 { .featured h2 {
font-size: 28px; font-size: 32px;
font-weight: 600; font-weight: 800;
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
margin-bottom: 32px; margin-bottom: 40px;
text-align: center; text-align: center;
} }
/* Getting Started */ /* Getting Started */
.getting-started { .getting-started {
padding: 80px 0; padding: 100px 0;
background: var(--gradient-hero), var(--color-bg);
} }
.getting-started h2 { .getting-started h2 {
font-size: 28px; font-size: 32px;
font-weight: 600; font-weight: 800;
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
margin-bottom: 48px; margin-bottom: 48px;
text-align: center; text-align: center;
@@ -431,46 +515,49 @@ a:hover {
.steps { .steps {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 40px; gap: 48px;
max-width: 800px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
} }
.step { .step {
text-align: center; text-align: center;
position: relative;
} }
.step-number { .step-number {
width: 48px; width: 64px;
height: 48px; height: 64px;
background-color: var(--color-accent); background: var(--gradient-primary);
color: white; color: white;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20px; font-size: 24px;
font-weight: 700; font-weight: 800;
margin: 0 auto 16px; margin: 0 auto 20px;
box-shadow: var(--shadow-glow);
} }
.step h3 { .step h3 {
font-size: 18px; font-size: 20px;
font-weight: 600; font-weight: 700;
color: var(--color-text-emphasis); color: var(--color-text-emphasis);
margin-bottom: 8px; margin-bottom: 10px;
} }
.step p { .step p {
font-size: 14px; font-size: 15px;
color: var(--color-text-muted); color: var(--color-text-muted);
line-height: 1.6;
} }
/* Footer */ /* Footer */
.site-footer { .site-footer {
background-color: var(--color-bg-secondary); background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-glass-border);
padding: 24px 0; padding: 32px 0;
text-align: center; text-align: center;
} }
@@ -481,10 +568,11 @@ a:hover {
.site-footer a { .site-footer a {
color: var(--color-text-muted); color: var(--color-text-muted);
transition: color var(--transition);
} }
.site-footer a:hover { .site-footer a:hover {
color: var(--color-text); color: var(--color-accent);
} }
/* Buttons */ /* Buttons */
@@ -492,7 +580,7 @@ a:hover {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 16px; padding: 10px 18px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@@ -503,25 +591,29 @@ a:hover {
} }
.btn-primary { .btn-primary {
background-color: var(--color-accent); background: var(--gradient-primary);
color: white; color: white;
border-color: var(--color-accent); border-color: transparent;
font-weight: 600;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: var(--color-accent-hover); background: var(--gradient-primary);
border-color: var(--color-accent-hover); transform: translateY(-1px);
box-shadow: var(--shadow-glow);
color: white; color: white;
} }
.btn-secondary { .btn-secondary {
background-color: var(--color-bg-tertiary); background: var(--color-glass);
backdrop-filter: blur(10px);
color: var(--color-text); color: var(--color-text);
border-color: var(--color-border); border-color: var(--color-glass-border);
} }
.btn-secondary:hover { .btn-secondary:hover {
background-color: var(--color-border); background: var(--color-bg-tertiary);
border-color: var(--color-border);
} }
.btn-icon { .btn-icon {
@@ -562,7 +654,9 @@ a:hover {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -575,23 +669,25 @@ a:hover {
} }
.modal-content { .modal-content {
background-color: var(--color-bg-secondary); background: var(--color-bg-secondary);
border: 1px solid var(--color-border); border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-xl);
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
max-height: 90vh; max-height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
overflow: hidden;
} }
.modal-header { .modal-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 16px 20px; padding: 20px 24px;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-glass-border);
background: var(--color-glass);
} }
.modal-header h3 { .modal-header h3 {
@@ -616,10 +712,10 @@ a:hover {
.modal-body pre { .modal-body pre {
margin: 0; margin: 0;
padding: 20px; padding: 24px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
background: var(--color-bg); background: var(--color-bg);
@@ -629,24 +725,28 @@ a:hover {
/* Page Layouts */ /* Page Layouts */
.page-header { .page-header {
padding: 48px 0 32px; padding: 56px 0 40px;
border-bottom: 1px solid var(--color-border); background: var(--gradient-hero), var(--color-bg);
border-bottom: 1px solid var(--color-glass-border);
} }
.page-header h1 { .page-header h1 {
font-size: 32px; font-size: 36px;
font-weight: 700; font-weight: 800;
color: var(--color-text-emphasis); background: var(--gradient-primary);
margin-bottom: 8px; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 12px;
} }
.page-header p { .page-header p {
font-size: 16px; font-size: 17px;
color: var(--color-text-muted); color: var(--color-text-muted);
} }
.page-content { .page-content {
padding: 32px 0 60px; padding: 40px 0 80px;
} }
/* Search and Filter Bar */ /* Search and Filter Bar */
@@ -660,49 +760,53 @@ a:hover {
.search-bar input { .search-bar input {
flex: 1; flex: 1;
min-width: 250px; min-width: 250px;
padding: 12px 16px; padding: 14px 18px;
font-size: 14px; font-size: 15px;
background-color: var(--color-bg-secondary); background: var(--color-glass);
border: 1px solid var(--color-border); border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius); border-radius: var(--border-radius-lg);
color: var(--color-text); color: var(--color-text);
transition: all var(--transition);
} }
.search-bar input:focus { .search-bar input:focus {
outline: none; outline: none;
border-color: var(--color-link); border-color: var(--color-accent);
box-shadow: var(--shadow-glow);
} }
/* Filters Bar */ /* Filters Bar */
.filters-bar { .filters-bar {
display: flex; display: flex;
gap: 16px; gap: 16px;
margin-bottom: 20px; margin-bottom: 24px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 16px; padding: 18px 20px;
background-color: var(--color-bg-secondary); background: var(--color-glass);
border: 1px solid var(--color-border); backdrop-filter: blur(10px);
border-radius: var(--border-radius); border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius-lg);
} }
.filter-group { .filter-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
} }
.filter-group label { .filter-group label {
font-size: 13px; font-size: 13px;
font-weight: 500;
color: var(--color-text-muted); color: var(--color-text-muted);
white-space: nowrap; white-space: nowrap;
} }
.filter-group select { .filter-group select {
padding: 6px 12px; padding: 8px 14px;
font-size: 13px; font-size: 13px;
background-color: var(--color-bg); background: var(--color-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--color-text); color: var(--color-text);
min-width: 150px; min-width: 150px;
@@ -711,26 +815,30 @@ a:hover {
.filter-group select:focus { .filter-group select:focus {
outline: none; outline: none;
border-color: var(--color-link); border-color: var(--color-accent);
} }
.checkbox-label { .checkbox-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
font-size: 13px;
font-weight: 500;
color: var(--color-text-muted);
} }
.checkbox-label input[type="checkbox"] { .checkbox-label input[type="checkbox"] {
width: 16px; width: 18px;
height: 16px; height: 18px;
cursor: pointer; cursor: pointer;
accent-color: var(--color-accent);
} }
.btn-small { .btn-small {
padding: 6px 12px; padding: 8px 14px;
font-size: 12px; font-size: 13px;
} }
/* Choices.js Theme Overrides */ /* Choices.js Theme Overrides */
@@ -821,8 +929,8 @@ a:hover {
/* Tag variants */ /* Tag variants */
.tag-model { .tag-model {
background-color: rgba(88, 166, 255, 0.15); background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
color: var(--color-link); color: #a5b4fc;
} }
.tag-none { .tag-none {
@@ -832,68 +940,89 @@ a:hover {
} }
.tag-handoffs { .tag-handoffs {
background-color: rgba(210, 153, 34, 0.15); background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
color: var(--color-warning); color: #fcd34d;
} }
.tag-extension { .tag-extension {
background-color: rgba(35, 134, 54, 0.15); background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.2));
color: var(--color-success); color: #6ee7b7;
} }
.tag-category { .tag-category {
background-color: rgba(130, 80, 223, 0.15); background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 114, 182, 0.2));
color: #a371f7; color: #f9a8d4;
} }
.tag-assets { .tag-assets {
background-color: rgba(88, 166, 255, 0.15); background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(34, 211, 238, 0.2));
color: var(--color-link); color: #67e8f9;
} }
.tag-collection { .tag-collection {
background-color: rgba(210, 153, 34, 0.15); background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
color: var(--color-warning); color: #fcd34d;
} }
.tag-featured { .tag-featured {
background-color: rgba(210, 153, 34, 0.2); background: var(--gradient-primary);
color: var(--color-warning); color: white;
padding: 2px 8px; padding: 3px 10px;
border-radius: 12px; border-radius: 12px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 600;
} }
.results-count { .results-count {
font-size: 14px; font-size: 14px;
color: var(--color-text-muted); color: var(--color-text-muted);
margin-bottom: 16px; margin-bottom: 20px;
font-weight: 500;
} }
/* Resource List */ /* Resource List */
.resource-list { .resource-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 16px;
} }
.resource-item { .resource-item {
background-color: var(--color-card-bg); background: var(--color-card-bg);
border: 1px solid var(--color-border); backdrop-filter: blur(10px);
border-radius: var(--border-radius); border: 1px solid var(--color-glass-border);
padding: 16px 20px; border-radius: var(--border-radius-lg);
padding: 20px 24px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 20px;
transition: all var(--transition); transition: all var(--transition);
cursor: pointer; cursor: pointer;
position: relative;
}
.resource-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--gradient-primary);
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
opacity: 0;
transition: opacity var(--transition);
} }
.resource-item:hover { .resource-item:hover {
background-color: var(--color-card-hover); background: var(--color-card-hover);
border-color: var(--color-link); transform: translateX(4px);
box-shadow: var(--shadow);
}
.resource-item:hover::before {
opacity: 1;
} }
.resource-info { .resource-info {