/** * Clubhouse Components CSS Library * 通用组件样式库 - 不依赖 @apply 指令 * 可用于多个项目，统一界面风格 *//* ===== 布局组件 ===== *//* 主容器 */.ch-container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}@media (min-width:640px){.ch-container{padding-left:1.5rem;padding-right:1.5rem;}}@media (min-width:1024px){.ch-container{padding-left:2rem;padding-right:2rem;}}/* Hero区域 */.ch-hero{background:linear-gradient(135deg,#22d3ee,#3b82f6,#0d9488);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif;}.ch-hero-content{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:8rem;}@media (min-width:1024px){.ch-hero-content{display:flex;height:100vh;align-items:center;}}.ch-hero-inner{max-width:48rem;margin-left:auto;margin-right:auto;text-align:center;}/* ===== 文本组件 ===== *//* 主标题 */.ch-title{background:linear-gradient(to right,#ffffff,#e0f2fe,#ffffff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.875rem;font-weight:800;line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,0.1);/* 备用方案：如果渐变不支持，使用纯白色 */    color:white;}@media (min-width:640px){.ch-title{font-size:3rem;}}.ch-title-subtitle{display:block;color:rgba(255,255,255,0.9);font-size:1.5rem;margin-top:0.5rem;}@media (min-width:640px){.ch-title-subtitle{font-size:2.25rem;}}/* 副标题 */.ch-subtitle{max-width:36rem;margin-left:auto;margin-right:auto;margin-top:1rem;color:rgba(255,255,255,0.8);font-size:1rem;line-height:1.6;}@media (min-width:640px){.ch-subtitle{font-size:1.25rem;line-height:1.8;}}/* 章节标题 */.ch-section-title{font-size:1.875rem;font-weight:700;text-align:center;}@media (min-width:640px){.ch-section-title{font-size:2.25rem;}}.ch-section-subtitle{margin-top:1rem;color:#4b5563;text-align:center;}/* ===== 卡片组件 ===== *//* 基础卡片 */.ch-card{border-radius:0.75rem;background-color:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}.ch-card:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,0.4);}/* 导航卡片 */.ch-nav-card{position:relative;display:block;overflow:hidden;border-radius:0.75rem;background-color:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);padding:1rem 1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;}.ch-nav-card:hover{transform:scale(1.05);box-shadow:0 25px 50px -12px rgba(0,0,0,0.4);}.ch-nav-card-overlay{position:absolute;inset:0;opacity:0;transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1);}.ch-nav-card:hover .ch-nav-card-overlay{opacity:1;}.ch-nav-card-content{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:0.75rem;}.ch-nav-card-icon{font-size:1.5rem;flex-shrink:0;}.ch-nav-card-title{font-size:1rem;font-weight:700;color:white;margin:0;}.ch-nav-card-desc{color:rgba(255,255,255,0.8);font-size:0.875rem;}/* 导航卡片变体 */.ch-nav-card-player .ch-nav-card-overlay{background:linear-gradient(to right,rgba(34,211,238,0.2),rgba(59,130,246,0.2));}.ch-nav-card-share .ch-nav-card-overlay{background:linear-gradient(to right,rgba(20,184,166,0.2),rgba(34,211,238,0.2));}.ch-nav-card-meeting .ch-nav-card-overlay{background:linear-gradient(to right,rgba(16,185,129,0.2),rgba(20,184,166,0.2));}.ch-nav-card-coffee .ch-nav-card-overlay{background:linear-gradient(to right,rgba(34,211,238,0.2),rgba(14,165,233,0.2));}.ch-nav-card-love .ch-nav-card-overlay{background:linear-gradient(to right,rgba(236,72,153,0.2),rgba(168,85,247,0.2));}.ch-nav-card-too .ch-nav-card-overlay{background:linear-gradient(to right,rgba(251,191,36,0.2),rgba(245,158,11,0.2));}/* 内容卡片 */.ch-content-card{border-radius:0.75rem;background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);padding:2rem;box-shadow:0 8px 32px rgba(6,182,212,0.1),0 4px 16px rgba(0,0,0,0.05);border:1px solid rgba(6,182,212,0.1);}/* ===== 表单组件 ===== *//* 表单容器 */.ch-form{display:flex;flex-direction:column;gap:1.5rem;}/* 表单组 */.ch-form-group{display:flex;flex-direction:column;gap:0.5rem;}/* 标签 */.ch-label{display:block;font-size:0.875rem;font-weight:500;color:#374151;}/* 输入框 */.ch-input{width:100%;border-radius:0.5rem;border:1px solid #d1d5db;padding:0.75rem 1rem;font-size:0.875rem;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);}.ch-input:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 1px #06b6d4;}/* 文本域 */.ch-textarea{width:100%;border-radius:0.5rem;border:1px solid #d1d5db;padding:0.75rem 1rem;font-size:0.875rem;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);resize:vertical;}.ch-textarea:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 1px #06b6d4;}/* ===== 按钮组件 ===== *//* 主按钮 */.ch-btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;font-size:0.875rem;font-weight:500;border-radius:0.5rem;border:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);text-decoration:none;}.ch-btn:focus{outline:none;box-shadow:0 0 0 2px rgba(6,182,212,0.5);}/* 主要按钮 */.ch-btn-primary{background:linear-gradient(135deg,#06b6d4,#0891b2);color:white;box-shadow:0 4px 12px rgba(6,182,212,0.3);font-weight:600;}.ch-btn-primary:hover{background:linear-gradient(135deg,#0891b2,#0e7490);transform:translateY(-1px);box-shadow:0 8px 20px rgba(6,182,212,0.4);}.ch-btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none;background:#94a3b8;}/* 次要按钮 */.ch-btn-secondary{background-color:#e5e7eb;color:#111827;}.ch-btn-secondary:hover{background-color:#d1d5db;}/* 小按钮 */.ch-btn-sm{padding:0.375rem 0.75rem;font-size:0.75rem;}/* 大按钮 */.ch-btn-lg{padding:1rem 2rem;font-size:1rem;}/* 全宽按钮 */.ch-btn-full{width:100%;}/* ===== 留言组件 ===== *//* 留言列表 */.ch-comments{display:flex;flex-direction:column;gap:1rem;max-height:24rem;overflow-y:auto;}/* 留言项 */.ch-comment{border-radius:0.75rem;background-color:white;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid rgba(229,231,235,0.6);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}.ch-comment:hover{transform:translateY(-2px);box-shadow:0 10px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);border-color:rgba(6,182,212,0.2);}/* 留言头部 */.ch-comment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;}/* 用户名 */.ch-comment-user{font-weight:700;color:#0891b2;font-size:0.95rem;}/* 时间 */.ch-comment-time{font-size:0.875rem;color:#6b7280;}/* 留言内容 */.ch-comment-content{color:#1f2937;margin-bottom:1rem;line-height:1.6;}/* 留言操作 */.ch-comment-actions{display:flex;align-items:center;}/* ===== 点赞组件 ===== *//* 点赞按钮 */.ch-like-btn{display:inline-flex;align-items:center;gap:0.5rem;border-radius:0.5rem;border:1px solid rgba(229,231,235,0.8);background-color:#f8fafc;padding:0.5rem 0.875rem;font-size:0.875rem;color:#64748b;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);font-weight:500;}.ch-like-btn:hover{background-color:#e0f2fe;border-color:#06b6d4;color:#0891b2;transform:translateY(-1px);box-shadow:0 4px 12px rgba(6,182,212,0.15);}/* 点赞按钮激活状态 */.ch-like-btn-active{border-color:#0891b2;background-color:#cffafe;color:#0e7490;box-shadow:0 2px 8px rgba(6,182,212,0.2);}.ch-like-btn-active:hover{background-color:#a7f3d0;border-color:#14b8a6;color:#0f766e;transform:translateY(-1px);}/* 点赞数量 */.ch-like-count{font-weight:500;}/* ===== 状态组件 ===== *//* 加载状态 */.ch-loading{text-align:center;padding:2rem 0;color:#6b7280;}/* 错误状态 */.ch-error{border-radius:0.5rem;background-color:#fef2f2;padding:1rem;color:#dc2626;border:1px solid #fecaca;}/* 成功状态 */.ch-success{border-radius:0.5rem;background-color:#f0fdf4;padding:1rem;color:#16a34a;border:1px solid #bbf7d0;}/* ===== 响应式工具类 ===== *//* 网格布局 */.ch-grid{display:grid;gap:1.5rem;}@media (min-width:640px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (min-width:1024px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;}}.ch-grid-3{display:grid;gap:1.5rem;}@media (min-width:640px){.ch-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (min-width:1024px){.ch-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}}.ch-grid-4{display:grid;gap:1.5rem;}@media (min-width:640px){.ch-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (min-width:1024px){.ch-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;}}/* ===== 动画类 ===== *//* 渐入动画 */.ch-fade-in{animation:scale-in 0.3s ease-out;}/* 悬浮动画 */.ch-float{animation:float 6s ease-in-out infinite;}/* 发光效果 */.ch-glow{animation:glow 2s ease-in-out infinite alternate;}@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);}}@keyframes glow{0%{box-shadow:0 0 5px rgba(34,211,238,0.2),0 0 10px rgba(34,211,238,0.2);}100%{box-shadow:0 0 10px rgba(34,211,238,0.4),0 0 20px rgba(34,211,238,0.4);}}@keyframes scale-in{0%{transform:scale(0.9);opacity:0;}100%{transform:scale(1);opacity:1;}}/* ===== 背景和渐变 ===== *//* 主要背景渐变 */.ch-bg-gradient{background:linear-gradient(135deg,#22d3ee,#3b82f6,#0d9488);}/* 卡片背景 */.ch-bg-glass{background-color:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);}/* 内容背景 */.ch-bg-content{background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(240,249,255,0.95));backdrop-filter:blur(10px);}/* ===== Tailwind 替代工具类 ===== *//* 布局工具 */.relative{position:relative;}/* 间距工具 */.mt-8{margin-top:2rem;}.mt-12{margin-top:3rem;}.mx-auto{margin-left:auto;margin-right:auto;}/* 最大宽度 */.max-w-lg{max-width:32rem;}.max-w-xl{max-width:36rem;}/* 文本对齐 */.text-center{text-align:center;}/* 间距组合 */.space-y-4 > * + *{margin-top:1rem;}/* ===== 间距工具类 ===== *//* 章节间距 */.ch-section{padding-top:4rem;padding-bottom:4rem;}/* 容器间距 */.ch-container-padding{padding-left:1rem;padding-right:1rem;}@media (min-width:640px){.ch-container-padding{padding-left:1.5rem;padding-right:1.5rem;}}@media (min-width:1024px){.ch-container-padding{padding-left:2rem;padding-right:2rem;}}