/* ════════════════════════════════════════════════════════════════════ * Cuba (Pixelstrap Madrid) Design Tokens * https://laravel.pixelstrap.com/cuba/admin/default-dashboard?layout=madrid * * Single source of truth for backend visual identity. * Loaded last in so it overrides Bootstrap/legacy CSS. * ════════════════════════════════════════════════════════════════════ */ :root { /* ─── 色彩（Heycard 品牌紫 #5C5CFF）─── */ --cuba-primary: #5C5CFF; --cuba-primary-rgb: 92, 92, 255; --cuba-primary-dark: #4747E6; --cuba-primary-light: #8585FF; --cuba-primary-soft: rgba(92, 92, 255, .10); --cuba-secondary: #838383; --cuba-success: #65C15C; --cuba-danger: #FC564A; --cuba-warning: #FFB829; --cuba-info: #40B8F5; --cuba-body-bg: #FFFFFF; --cuba-card-bg: #FFFFFF; --cuba-soft-bg: rgba(242, 243, 247, 0.7); --cuba-soft-bg-2: #EEF1F6; --cuba-text: #2F2F3B; --cuba-text-muted: #52526C; --cuba-text-secondary: #838383; --cuba-border: #E9EDF1; /* ─── Typography ─── */ --cuba-font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --cuba-fs-base: 14px; /* ─── Radii ─── */ --cuba-radius-card: 10px; --cuba-radius-pill: 25px; --cuba-radius-input: 10px; --cuba-radius-btn: 8px; /* ─── Shadows ─── */ --cuba-shadow-card: 0px 1px 0px rgba(82, 82, 108, 0.15); --cuba-shadow-card-hover: 0 6px 18px rgba(82, 82, 108, 0.12); --cuba-shadow-focus: 0 0 0 0.2rem rgba(92, 92, 255, .25); /* ─── Transitions ─── */ --cuba-trans: 0.4s ease; /* ─── Sidebar ─── */ --cuba-sidebar-w: 280px; --cuba-sidebar-w-compact: 112px; /* ─── 同步覆寫 Bootstrap 變數 ─── */ --bs-primary: var(--cuba-primary); --bs-primary-rgb: 92, 92, 255; --bs-border-color: var(--cuba-border); --bs-border-radius: var(--cuba-radius-card); --bs-border-radius-lg: var(--cuba-radius-card); --bs-body-font-family: var(--cuba-font); --bs-body-color: var(--cuba-text); --bs-body-bg: var(--cuba-body-bg); } /* ════════════════════════════════════════════════════════════════════ * Base typography * ════════════════════════════════════════════════════════════════════ */ body { font-family: var(--cuba-font); font-size: var(--cuba-fs-base); color: var(--cuba-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--cuba-font); color: var(--cuba-text); font-weight: 600; letter-spacing: -0.01em; } h1, .h1 { font-size: 26px; } h2, .h2 { font-size: 24px; } h3, .h3 { font-size: 22px; } h4, .h4 { font-size: 20px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 16px; } /* ════════════════════════════════════════════════════════════════════ * Card * ════════════════════════════════════════════════════════════════════ */ .card, .ds-table-card, .ds-page-card { border-radius: var(--cuba-radius-card); border: 1px solid var(--cuba-border); box-shadow: var(--cuba-shadow-card); transition: box-shadow var(--cuba-trans); } .card:hover { box-shadow: var(--cuba-shadow-card-hover); } /* ════════════════════════════════════════════════════════════════════ * Buttons * ════════════════════════════════════════════════════════════════════ */ .btn { border-radius: var(--cuba-radius-btn); font-weight: 500; transition: all var(--cuba-trans); letter-spacing: 0.01em; } .btn-primary { background-color: var(--cuba-primary); border-color: var(--cuba-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--cuba-primary-dark); border-color: var(--cuba-primary-dark); box-shadow: var(--cuba-shadow-focus); } .btn-outline-primary { color: var(--cuba-primary); border-color: var(--cuba-primary); } .btn-outline-primary:hover { background-color: var(--cuba-primary); border-color: var(--cuba-primary); } .btn-success { background-color: var(--cuba-success); border-color: var(--cuba-success); } .btn-danger { background-color: var(--cuba-danger); border-color: var(--cuba-danger); } .btn-warning { background-color: var(--cuba-warning); border-color: var(--cuba-warning); color: #fff; } .btn-info { background-color: var(--cuba-info); border-color: var(--cuba-info); color: #fff; } /* Round / pill 按鈕 */ .btn.rounded-pill { border-radius: var(--cuba-radius-pill); } /* ════════════════════════════════════════════════════════════════════ * Forms * ════════════════════════════════════════════════════════════════════ */ .form-control, .form-select { border-color: var(--cuba-border); border-radius: var(--cuba-radius-input); transition: border-color var(--cuba-trans), box-shadow var(--cuba-trans); } .form-control:focus, .form-select:focus { border-color: var(--cuba-primary); box-shadow: var(--cuba-shadow-focus); } .form-label { font-weight: 500; color: var(--cuba-text); } /* ════════════════════════════════════════════════════════════════════ * Badges / Pills * ════════════════════════════════════════════════════════════════════ */ .badge, .ds-badge { border-radius: var(--cuba-radius-pill); padding: 0.45em 1em; font-weight: 500; letter-spacing: 0.02em; } .badge.bg-primary, .badge-primary { background-color: var(--cuba-primary) !important; } .badge.bg-success, .badge-success { background-color: var(--cuba-success) !important; } .badge.bg-danger, .badge-danger { background-color: var(--cuba-danger) !important; } .badge.bg-warning, .badge-warning { background-color: var(--cuba-warning) !important; } .badge.bg-info, .badge-info { background-color: var(--cuba-info) !important; } /* ════════════════════════════════════════════════════════════════════ * Tables (含 rappasoft livewire-table) * ════════════════════════════════════════════════════════════════════ */ .table, table.laravel-livewire-table { border-color: var(--cuba-border); } .table thead th, table.laravel-livewire-table thead th { background-color: var(--cuba-soft-bg); color: var(--cuba-text); font-weight: 600; border-bottom: 1px solid var(--cuba-border); text-transform: none; } .table tbody tr:hover, table.laravel-livewire-table tbody tr:hover { background-color: var(--cuba-soft-bg); } /* ════════════════════════════════════════════════════════════════════ * Links / accent * ════════════════════════════════════════════════════════════════════ */ a { color: var(--cuba-primary); } a:hover { color: var(--cuba-primary-dark); } .text-primary { color: var(--cuba-primary) !important; } .bg-primary { background-color: var(--cuba-primary) !important; } /* ════════════════════════════════════════════════════════════════════ * Cuba 風格的特殊 utility（依需要使用） * ════════════════════════════════════════════════════════════════════ */ .cuba-soft-bg { background-color: var(--cuba-soft-bg); } .cuba-soft-bg-2 { background-color: var(--cuba-soft-bg-2); } .cuba-border { border: 1px solid var(--cuba-border); } .cuba-pill { border-radius: var(--cuba-radius-pill); } /* Cuba signature gradient（給 hero / banner 用） */ .cuba-gradient-soft { background-image: linear-gradient(144.16deg, rgba(92, 92, 255,0.10) 19.06%, rgba(92, 92, 255,0) 79.03%); } /* ════════════════════════════════════════════════════════════════════ * 統一我先前寫的元件到 Cuba primary（取代 #6366f1 / #4f46e5 / #8585FF） * - 用 highly-specific selector 直接覆寫 * ════════════════════════════════════════════════════════════════════ */ /* card-collection FAB / Action Bar primary 漸層 → Cuba 純色 */ .cc-fab, .va-action--vcf { background: var(--cuba-primary) !important; box-shadow: 0 4px 14px rgba(var(--cuba-primary-rgb), .35) !important; } .cc-fab:hover, .va-action--vcf:hover { background: var(--cuba-primary-dark) !important; box-shadow: 0 6px 22px rgba(var(--cuba-primary-rgb), .45) !important; } /* Auth pages primary button */ .auth-btn-primary { background: var(--cuba-primary) !important; box-shadow: 0 4px 16px rgba(var(--cuba-primary-rgb), .32) !important; } .auth-btn-primary:hover { background: var(--cuba-primary-dark) !important; box-shadow: 0 6px 22px rgba(var(--cuba-primary-rgb), .45) !important; } .auth-input-wrap > input.form-control:focus { border-color: var(--cuba-primary) !important; box-shadow: 0 0 0 4px var(--cuba-primary-soft) !important; } /* Detail Modal / Bottom sheet 的紫色 header → Cuba 純色 */ .cc-detail-head { background: var(--cuba-primary) !important; } /* Card collection 卡片 hover */ .cc-cat-pill.is-active { background: var(--cuba-primary-soft) !important; color: var(--cuba-primary) !important; border-color: rgba(var(--cuba-primary-rgb), .25) !important; } /* Subscription banner & 其他細節保留各自的紅黃配色 */ /* mobile-bottom-nav active state */ .mobile-bottom-nav .nav-item.active, .mobile-bottom-nav a.active { color: var(--cuba-primary) !important; } /* admin design system page header */ .ds-page-title { color: var(--cuba-text); font-weight: 600; } /* Cuba 風格的「最後一條極輕陰影分隔線」*/ .shadow-cuba { box-shadow: var(--cuba-shadow-card) !important; }