.bkbg-rv-outer { box-sizing: border-box; width: 100%; } .bkbg-rv-card { border: 1px solid #e5e7eb; box-sizing: border-box; overflow: hidden; } .bkbg-rv-header { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .bkbg-rv-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bkbg-rv-avatar-fallback { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; } .bkbg-rv-name { margin: 0 0 4px; } .bkbg-rv-title { margin: 0 0 12px; font-weight: 600; line-height: 1.3; } .bkbg-rv-contacts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; } .bkbg-rv-contact-item { display: flex; align-items: center; gap: 4px; text-decoration: none; } .bkbg-rv-body { display: flex; flex-direction: column; } /* Section */ .bkbg-rv-section { display: flex; flex-direction: column; } .bkbg-rv-section-header { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; } .bkbg-rv-section-bar { display: inline-block; width: 3px; height: 18px; border-radius: 2px; flex-shrink: 0; } .bkbg-rv-section-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } /* Experience */ .bkbg-rv-exp-item { display: flex; gap: 16px; } .bkbg-rv-timeline-col { display: flex; flex-direction: column; align-items: center; } .bkbg-rv-timeline-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; } .bkbg-rv-timeline-line { width: 2px; flex-grow: 1; margin-top: 4px; } .bkbg-rv-exp-content { flex-grow: 1; } .bkbg-rv-exp-meta { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 4px; } .bkbg-rv-exp-role { font-weight: 700; font-size: 15px; } .bkbg-rv-exp-company { font-weight: 600; font-size: 13px; } .bkbg-rv-exp-dates { font-size: 12px; white-space: nowrap; } .bkbg-rv-exp-desc { margin: 8px 0 0; } /* Education */ .bkbg-rv-edu-item { display: flex; flex-direction: column; } .bkbg-rv-edu-meta { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 4px; } .bkbg-rv-edu-degree { font-weight: 700; font-size: 15px; } .bkbg-rv-edu-institution { font-weight: 500; font-size: 13px; } .bkbg-rv-edu-years { font-size: 12px; white-space: nowrap; } .bkbg-rv-edu-desc { margin: 6px 0 0; } /* Skills */ .bkbg-rv-skill-group { display: flex; flex-direction: column; } .bkbg-rv-skill-cat { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .bkbg-rv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .bkbg-rv-tag { border-radius: 99px; padding: 3px 10px; font-size: 13px; line-height: 1.5; display: inline-block; } /* Layout: sidebar */ .bkbg-rv-outer.layout-sidebar .bkbg-rv-body { flex-direction: row; align-items: flex-start; } .bkbg-rv-outer.layout-sidebar .bkbg-rv-sidebar-col { width: 220px; flex-shrink: 0; } .bkbg-rv-outer.layout-sidebar .bkbg-rv-main-col { flex-grow: 1; } /* ── Typography: Name (h2) ── */ .bkbg-rv-header h2.bkbg-rv-name { font-family: var(--bkrv-nm-font-family, inherit); font-size: var(--bkrv-nm-font-size-d, 24px); font-weight: var(--bkrv-nm-font-weight, 800); font-style: var(--bkrv-nm-font-style, normal); text-decoration: var(--bkrv-nm-text-decoration, none); text-transform: var(--bkrv-nm-text-transform, none); line-height: var(--bkrv-nm-line-height-d, 1.2); letter-spacing: var(--bkrv-nm-letter-spacing-d, normal); word-spacing: var(--bkrv-nm-word-spacing-d, normal); } /* ── Typography: Body (summary, exp-desc, edu-desc) ── */ .bkbg-rv-summary, .bkbg-rv-exp-desc, .bkbg-rv-edu-desc { font-family: var(--bkrv-bt-font-family, inherit); font-size: var(--bkrv-bt-font-size-d, 15px); font-weight: var(--bkrv-bt-font-weight, normal); font-style: var(--bkrv-bt-font-style, normal); text-decoration: var(--bkrv-bt-text-decoration, none); text-transform: var(--bkrv-bt-text-transform, none); line-height: var(--bkrv-bt-line-height-d, 1.7); letter-spacing: var(--bkrv-bt-letter-spacing-d, normal); word-spacing: var(--bkrv-bt-word-spacing-d, normal); } /* ── Responsive Typography ── */ @media (max-width: 1024px) { .bkbg-rv-header h2.bkbg-rv-name { font-size: var(--bkrv-nm-font-size-t, var(--bkrv-nm-font-size-d, 24px)); line-height: var(--bkrv-nm-line-height-t, var(--bkrv-nm-line-height-d, 1.2)); letter-spacing: var(--bkrv-nm-letter-spacing-t, var(--bkrv-nm-letter-spacing-d, normal)); word-spacing: var(--bkrv-nm-word-spacing-t, var(--bkrv-nm-word-spacing-d, normal)); } .bkbg-rv-summary, .bkbg-rv-exp-desc, .bkbg-rv-edu-desc { font-size: var(--bkrv-bt-font-size-t, var(--bkrv-bt-font-size-d, 15px)); line-height: var(--bkrv-bt-line-height-t, var(--bkrv-bt-line-height-d, 1.7)); letter-spacing: var(--bkrv-bt-letter-spacing-t, var(--bkrv-bt-letter-spacing-d, normal)); word-spacing: var(--bkrv-bt-word-spacing-t, var(--bkrv-bt-word-spacing-d, normal)); } } @media (max-width: 767px) { .bkbg-rv-header h2.bkbg-rv-name { font-size: var(--bkrv-nm-font-size-m, var(--bkrv-nm-font-size-t, var(--bkrv-nm-font-size-d, 24px))); line-height: var(--bkrv-nm-line-height-m, var(--bkrv-nm-line-height-t, var(--bkrv-nm-line-height-d, 1.2))); letter-spacing: var(--bkrv-nm-letter-spacing-m, var(--bkrv-nm-letter-spacing-t, var(--bkrv-nm-letter-spacing-d, normal))); word-spacing: var(--bkrv-nm-word-spacing-m, var(--bkrv-nm-word-spacing-t, var(--bkrv-nm-word-spacing-d, normal))); } .bkbg-rv-summary, .bkbg-rv-exp-desc, .bkbg-rv-edu-desc { font-size: var(--bkrv-bt-font-size-m, var(--bkrv-bt-font-size-t, var(--bkrv-bt-font-size-d, 15px))); line-height: var(--bkrv-bt-line-height-m, var(--bkrv-bt-line-height-t, var(--bkrv-bt-line-height-d, 1.7))); letter-spacing: var(--bkrv-bt-letter-spacing-m, var(--bkrv-bt-letter-spacing-t, var(--bkrv-bt-letter-spacing-d, normal))); word-spacing: var(--bkrv-bt-word-spacing-m, var(--bkrv-bt-word-spacing-t, var(--bkrv-bt-word-spacing-d, normal))); } } /* Responsive */ @media (max-width: 640px) { .bkbg-rv-header { flex-direction: column; align-items: center; text-align: center; } .bkbg-rv-contacts { justify-content: center; } .bkbg-rv-outer.layout-sidebar .bkbg-rv-body { flex-direction: column; } .bkbg-rv-outer.layout-sidebar .bkbg-rv-sidebar-col { width: 100%; } }