- Add /tenant/index.ui using bricks framework (no inline styles) - Use Image widget for all images (logo, hero, case studies) - Register /tenant and /tenant/index.ui routes as 'any' permission - Include responsive CSS with tenant- prefix to avoid conflicts - Login button redirects to /rbac/user/login.ui - Support multi-tenant customization via ?tenant=xxx parameter
140 lines
2.4 KiB
CSS
140 lines
2.4 KiB
CSS
/* ===== Tenant Landing Page ===== */
|
|
|
|
/* Header */
|
|
.tenant-header {
|
|
background: rgba(255,255,255,0.95);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-item {
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
color: #333;
|
|
transition: color 0.2s;
|
|
}
|
|
.nav-item:hover {
|
|
color: #6366f1;
|
|
}
|
|
|
|
/* Hero */
|
|
.tenant-hero {
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
|
|
color: #fff;
|
|
text-align: center;
|
|
min-height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-title {
|
|
color: #fff !important;
|
|
font-size: 42px !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
color: rgba(255,255,255,0.85) !important;
|
|
font-size: 20px !important;
|
|
font-weight: 400 !important;
|
|
margin-top: 16px !important;
|
|
}
|
|
|
|
/* Buttons */
|
|
.primary.large {
|
|
background: #fff !important;
|
|
color: #6366f1 !important;
|
|
font-size: 16px !important;
|
|
padding: 12px 32px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.secondary.large {
|
|
background: transparent !important;
|
|
color: #fff !important;
|
|
border: 2px solid rgba(255,255,255,0.6) !important;
|
|
font-size: 16px !important;
|
|
padding: 12px 32px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* Solutions */
|
|
.tenant-solutions {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
font-size: 32px !important;
|
|
font-weight: 700 !important;
|
|
color: #1a1a2e !important;
|
|
}
|
|
|
|
.solution-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.solution-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
/* Cases */
|
|
.case-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.case-image {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.case-title {
|
|
padding: 16px 16px 4px;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.case-subtitle {
|
|
padding: 0 16px 16px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Footer */
|
|
.tenant-footer {
|
|
background: #1a1a2e;
|
|
}
|
|
|
|
.footer-text {
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Dark mode support */
|
|
[data-theme="dark"] .tenant-header {
|
|
background: rgba(30,30,46,0.95);
|
|
}
|
|
[data-theme="dark"] .nav-item {
|
|
color: #ccc;
|
|
}
|
|
[data-theme="dark"] .tenant-solutions {
|
|
background: #1e1e2e;
|
|
}
|
|
[data-theme="dark"] .solution-card {
|
|
background: #2a2a3e;
|
|
color: #eee;
|
|
}
|
|
[data-theme="dark"] .case-card {
|
|
background: #2a2a3e;
|
|
}
|
|
[data-theme="dark"] .case-subtitle {
|
|
color: #aaa;
|
|
}
|