.breadcrumbs-bar {
background-color: #f8fafc;
border-bottom: 1px solid #edf0f4;
padding: 12px 5%;
}
.breadcrumbs {
max-width: 1800px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-gray);
font-family: var(--font-secondary);
}
.breadcrumbs a {
color: var(--text-gray);
text-decoration: none;
transition: var(--transition-smooth);
}
.breadcrumbs a:hover {
color: var(--secondary);
}
.breadcrumbs .separator {
font-size: 11px;
color: #999999;
}
.breadcrumbs .current {
color: var(--primary);
font-weight: 600;
} .legal-page-hero {
background: #ffffff;
padding: 40px 5% 65px 5%;
border-bottom: 1px solid #edf0f4;
}
.legal-hero-inner {
max-width: 1800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.legal-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: rgba(0, 168, 232, 0.1);
color: var(--secondary);
padding: 6px 16px;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
font-family: var(--font-secondary);
}
.legal-badge .material-icons,
.legal-badge .material-icons-outlined {
font-size: 16px;
}
.legal-page-hero h1 {
font-size: 45px;
font-weight: 700;
color: var(--primary);
line-height: 1.25;
margin-bottom: 16px;
font-family: var(--font-secondary);
}
.legal-page-hero h1 span {
color: var(--secondary);
}
.legal-page-hero p {
font-size: 16.5px;
color: var(--text-dark);
line-height: 1.65;
margin-bottom: 24px;
font-family: var(--font-secondary);
max-width: 1000px;
}
.legal-hero-pills {
display: flex;
justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.legal-hero-pills .hero-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: #ffffff;
border: 1px solid #dce4ec;
padding: 8px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
font-family: var(--font-secondary);
}
.legal-hero-pills .hero-pill .material-icons,
.legal-hero-pills .hero-pill .material-icons-outlined {
font-size: 16px;
color: var(--secondary);
} .legal-content-section {
padding: 60px 5% 80px 5%;
background-color: #f8fafc;
}
.legal-content-grid {
max-width: 1800px;
margin: 0 auto;
display: grid;
grid-template-columns: 320px 1fr;
gap: 48px;
align-items: start;
} .legal-sidebar {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 24px;
}
.legal-nav-card {
background: #ffffff;
border-radius: 14px;
border: 1px solid #e5e9f0;
padding: 26px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.legal-nav-card h3 {
font-size: 17px;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
font-family: var(--font-secondary);
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid #edf0f4;
}
.legal-nav-card h3 .material-icons {
font-size: 20px;
color: var(--secondary);
}
.legal-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.legal-nav-link {
display: block;
padding: 8px 12px;
border-radius: 8px;
font-size: 13.5px;
color: var(--text-gray);
text-decoration: none;
font-family: var(--font-secondary);
line-height: 1.4;
transition: var(--transition-smooth);
}
.legal-nav-link:hover {
background: rgba(0, 168, 232, 0.08);
color: var(--secondary);
padding-left: 16px;
}
.legal-nav-link.active {
background: var(--primary);
color: #ffffff;
font-weight: 600;
} .legal-support-card {
background: #ffffff;
border-radius: 14px;
border: 1px solid #e5e9f0;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.legal-support-card h4 {
font-size: 16px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
font-family: var(--font-secondary);
}
.legal-support-card p {
font-size: 13px;
color: var(--text-gray);
line-height: 1.5;
margin-bottom: 16px;
font-family: var(--font-secondary);
}
.legal-support-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: var(--primary);
color: #ffffff;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: var(--transition-smooth);
width: 100%;
font-family: var(--font-secondary);
}
.legal-support-btn:hover {
background: #1e1548;
} .legal-document {
background: #ffffff;
border-radius: 16px;
border: 1px solid #e5e9f0;
padding: 50px 54px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}
.legal-section {
margin-bottom: 46px;
padding-bottom: 36px;
border-bottom: 1px solid #edf0f4;
}
.legal-section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.legal-section h2 {
font-size: 24px;
font-weight: 700;
color: var(--primary);
margin-bottom: 18px;
font-family: var(--font-secondary);
display: flex;
align-items: start;
gap: 12px;
}
.section-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 168, 232, 0.12);
color: var(--secondary);
font-size: 15px;
font-weight: 800;
flex-shrink: 0;
}
.legal-section p {
font-size: 15px;
color: var(--text-dark);
line-height: 1.7;
margin-bottom: 14px;
font-family: var(--font-secondary);
}
.legal-section p:last-child {
margin-bottom: 0;
}
.legal-section ul {
margin: 12px 0 16px 22px;
padding: 0;
}
.legal-section li {
font-size: 14.5px;
color: var(--text-dark);
line-height: 1.65;
margin-bottom: 8px;
font-family: var(--font-secondary);
}
.legal-section strong {
color: var(--primary);
font-weight: 600;
} .legal-alert-box {
background-color: var(--bg-light);
border-left: 4px solid var(--secondary);
border-radius: 8px;
padding: 18px 22px;
margin: 20px 0;
display: flex;
align-items: flex-start;
gap: 14px;
}
.legal-alert-box.alert-health {
background-color: #f0f9ff;
border-left-color: #0284c7;
}
.legal-alert-box.alert-warning {
background-color: #fffbeb;
border-left-color: #f59e0b;
}
.legal-alert-box .material-icons {
font-size: 24px;
color: var(--secondary);
flex-shrink: 0;
margin-top: 2px;
}
.legal-alert-box.alert-health .material-icons {
color: #0284c7;
}
.legal-alert-box.alert-warning .material-icons {
color: #f59e0b;
}
.legal-alert-content {
font-size: 14px;
color: var(--text-dark);
line-height: 1.6;
font-family: var(--font-secondary);
}
.legal-alert-content strong {
display: block;
margin-bottom: 4px;
color: var(--primary);
} @media (max-width: 1024px) {
.legal-content-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.legal-sidebar {
position: static;
top: 0;
}
.legal-document {
padding: 34px 24px;
}
.legal-page-hero h1 {
font-size: 34px;
}
}
@media (max-width: 768px) {
.legal-document {
padding: 26px 18px;
}
.legal-section h2 {
font-size: 20px;
}
.section-number {
width: 28px;
height: 28px;
font-size: 13px;
}
}