.vy-hub-page {
--vy-primary: #7c3aed;
--vy-primary-dark: #6d28d9;
--vy-primary-soft: #ede9fe;
--vy-accent: #0f766e;
--vy-accent-dark: #115e59;
--vy-hero-bg-start: #f9f7ff;
--vy-hero-bg-end: #fdfcff;
--vy-hero-border: #e9ddff;
--vy-note-border: #7c3aed;
--vy-link: #2563eb;
--vy-text: #1f2937;
--vy-text-dark: #0f172a;
--vy-text-soft: #475569;
--vy-muted: #64748b;
--vy-card-border: #e5e7eb;
--vy-card-bg: #ffffff;
--vy-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.04);
--vy-shadow-medium: 0 10px 30px rgba(15, 23, 42, 0.08);
max-width: 1180px;
margin: 0 auto;
padding: 24px 16px 60px;
color: var(--vy-text);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.7;
}
.vy-hub-page * {
box-sizing: border-box;
}
.vy-hub-page a {
text-decoration: none;
}
.vy-hub-loading {
padding: 40px 20px;
text-align: center;
color: var(--vy-muted);
font-size: 16px;
}
.vy-breadcrumbs {
font-size: 13px;
color: #6b7280;
margin-bottom: 18px;
}
.vy-breadcrumbs a {
color: var(--vy-link);
}
.vy-breadcrumbs span {
margin: 0 4px;
}
.vy-hero {
background: linear-gradient(135deg, var(--vy-hero-bg-start) 0%, var(--vy-hero-bg-end) 100%);
border: 1px solid var(--vy-hero-border);
border-radius: 24px;
padding: 34px 26px;
margin-bottom: 28px;
box-shadow: 0 10px 30px rgba(124, 58, 237, 0.06);
}
.vy-hero-inner {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
}
.vy-hero-text {
flex: 1 1 520px;
min-width: 280px;
}
.vy-hero-image {
flex: 1 1 360px;
min-width: 280px;
}
.vy-hero-image img {
width: 100%;
display: block;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.vy-hub-page h1 {
margin: 0 0 14px;
font-size: 40px;
line-height: 1.2;
color: var(--vy-text-dark);
}
.vy-hub-page h2 {
margin: 0 0 14px;
font-size: 28px;
line-height: 1.3;
color: var(--vy-text-dark);
}
.vy-hub-page h3 {
margin: 0 0 10px;
font-size: 20px;
line-height: 1.35;
color: #111827;
}
.vy-hub-page p {
margin-top: 0;
}
.vy-lead {
font-size: 18px;
color: #334155;
margin-bottom: 14px;
}
.vy-note {
background: #ffffff;
border-left: 4px solid var(--vy-note-border);
padding: 14px 16px;
border-radius: 12px;
font-size: 15px;
color: #334155;
margin: 18px 0 0;
}
.vy-hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
.vy-btn-primary,
.vy-btn-secondary,
.vy-btn-tool,
.vy-inline-link {
display: inline-block;
transition: all 0.2s ease;
}
.vy-btn-primary {
background: var(--vy-primary);
color: #ffffff !important;
padding: 12px 18px;
border-radius: 12px;
font-weight: 700;
}
.vy-btn-primary:hover {
background: var(--vy-primary-dark);
color: #ffffff !important;
}
.vy-btn-secondary {
background: #ffffff;
color: var(--vy-primary-dark) !important;
border: 1px solid var(--vy-hero-border);
padding: 12px 18px;
border-radius: 12px;
font-weight: 700;
}
.vy-btn-secondary:hover {
background: var(--vy-primary-soft);
color: var(--vy-primary-dark) !important;
}
.vy-block {
margin-bottom: 28px;
}
.vy-card-box {
background: var(--vy-card-bg);
border: 1px solid var(--vy-card-border);
border-radius: 22px;
padding: 26px 22px;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.04);
}
.vy-card-grid {
display: grid;
gap: 18px;
}
.vy-card-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vy-card-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vy-card-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vy-nav-card,
.vy-highlight-card,
.vy-related-card,
.vy-tool-card {
display: block;
background: var(--vy-card-bg);
border: 1px solid var(--vy-card-border);
border-radius: 18px;
padding: 20px;
box-shadow: var(--vy-shadow-soft);
color: var(--vy-text) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vy-nav-card:hover,
.vy-highlight-card:hover,
.vy-related-card:hover,
.vy-tool-card:hover {
transform: translateY(-2px);
box-shadow: var(--vy-shadow-medium);
}
.vy-nav-card:hover,
.vy-related-card:hover,
.vy-highlight-card:hover {
border-color: var(--vy-hero-border);
}
.vy-nav-card h3,
.vy-highlight-card h3,
.vy-related-card h3,
.vy-tool-card h3 {
margin-bottom: 8px;
}
.vy-tool-group {
margin-bottom: 28px;
}
.vy-tool-group:last-child {
margin-bottom: 0;
}
.vy-tool-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.vy-tool-card p {
margin: 0 0 16px;
color: var(--vy-text-soft);
}
.vy-btn-tool {
background: var(--vy-accent);
color: #ffffff !important;
padding: 10px 16px;
border-radius: 12px;
font-weight: 700;
}
.vy-btn-tool:hover {
background: var(--vy-accent-dark);
color: #ffffff !important;
}
.vy-inline-link {
color: var(--vy-primary-dark) !important;
font-weight: 700;
margin-top: 6px;
}
.vy-inline-link:hover {
color: var(--vy-primary) !important;
}
.vy-step-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.vy-step-card {
background: var(--vy-card-bg);
border: 1px solid var(--vy-card-border);
border-radius: 18px;
padding: 22px;
box-shadow: var(--vy-shadow-soft);
}
.vy-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--vy-primary-soft);
color: var(--vy-primary-dark);
font-weight: 700;
margin-bottom: 12px;
}
.vy-faq-list {
display: grid;
gap: 14px;
}
.vy-faq-item {
background: var(--vy-card-bg);
border: 1px solid var(--vy-card-border);
border-radius: 16px;
padding: 0;
overflow: hidden;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}
.vy-faq-item summary {
cursor: pointer;
list-style: none;
padding: 18px 20px;
font-weight: 700;
color: #111827;
position: relative;
}
.vy-faq-item summary::-webkit-details-marker {
display: none;
}
.vy-faq-item summary::after {
content: "+";
position: absolute;
right: 18px;
top: 17px;
font-size: 20px;
color: var(--vy-primary);
}
.vy-faq-item[open] summary::after {
content: "−";
}
.vy-faq-content {
padding: 0 20px 18px;
color: var(--vy-text-soft);
}
.vy-anchor-offset {
scroll-margin-top: 90px;
}
.vy-muted {
color: var(--vy-muted);
}
.vy-hub-page img {
max-width: 100%;
height: auto;
}
.vy-hub-page .is-hidden {
display: none !important;
}
@media (max-width: 991px) {
.vy-card-grid-2,
.vy-card-grid-3,
.vy-card-grid-4,
.vy-tool-list,
.vy-step-grid {
grid-template-columns: 1fr;
}
.vy-hub-page h1 {
font-size: 32px;
}
.vy-hub-page h2 {
font-size: 24px;
}
.vy-hero {
padding: 26px 18px;
}
.vy-card-box,
.vy-tool-card,
.vy-step-card,
.vy-nav-card,
.vy-related-card,
.vy-highlight-card {
padding: 18px;
}
}