.cdl-path {
margin: 0 auto 2rem;
max-width: 42rem;
font-size: 1rem;
line-height: 1.5;
color: #1d2327;
}
.cdl-path--empty .cdl-path__empty {
margin: 0;
padding: 1rem;
border: 1px dashed #ccc;
border-radius: 6px;
color: #555;
} .cdl-path__header {
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #e2e4e7;
}
.cdl-path__eyebrow {
margin: 0 0 0.35rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #92400e;
}
.cdl-path__title {
margin: 0 0 0.75rem;
font-size: clamp(1.35rem, 4vw, 1.75rem);
line-height: 1.25;
}
.cdl-path__meta-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.cdl-path__meta-item {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.4rem;
font-size: 0.875rem;
}
.cdl-path__meta-label {
color: #646970;
}
.cdl-path__meta-value {
font-weight: 600;
}
.cdl-path__description {
margin: 0 0 0.75rem;
color: #3c434a;
}
.cdl-path__goal {
margin: 0;
padding: 0.75rem 0.9rem;
border-radius: 6px;
background: #fef3c7;
color: #78350f;
font-size: 0.925rem;
} .cdl-path__stepper-title,
.cdl-path__summary-title {
margin: 0 0 1rem;
font-size: 1.15rem;
}
.cdl-path__steps {
margin: 0;
padding: 0;
list-style: none;
}
.cdl-path__step {
position: relative;
margin: 0 0 0.5rem;
padding: 1rem;
border: 1px solid #e2e4e7;
border-radius: 8px;
background: #fff;
}
.cdl-path__step:last-child {
margin-bottom: 0;
}
.cdl-path__step-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.65rem;
margin-bottom: 0.75rem;
}
.cdl-path__step-num {
display: inline-block;
margin-bottom: 0.35rem;
padding: 0.12rem 0.45rem;
border-radius: 999px;
background: #f0f0f1;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #50575e;
}
.cdl-path__step-title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
line-height: 1.3;
flex: 0 0 100%;
}
.cdl-path__step-link {
color: #b45309;
text-decoration: none;
font-weight: 600;
}
.cdl-path__step-link:hover,
.cdl-path__step-link:focus {
text-decoration: underline;
}
.cdl-path__step-meta {
margin: 0;
font-size: 0.85rem;
color: #646970;
flex: 0 0 100%;
}
.cdl-path__step-level::after {
content: " · ";
}
.cdl-path__step-block {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid #f0f0f1;
}
.cdl-path__block-title {
margin: 0 0 0.4rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #646970;
}
.cdl-path__tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.cdl-path__tag-list--inline {
display: inline-flex;
}
.cdl-path__tag {
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
font-size: 0.8rem;
font-weight: 500;
}
.cdl-path__pedagogy {
margin: 0;
}
.cdl-path__pedagogy-row {
margin-bottom: 0.5rem;
}
.cdl-path__pedagogy-row:last-child {
margin-bottom: 0;
}
.cdl-path__pedagogy-row dt {
margin: 0 0 0.15rem;
font-size: 0.78rem;
font-weight: 600;
color: #646970;
}
.cdl-path__pedagogy-row dd {
margin: 0;
}
.cdl-path__ref-list {
margin: 0;
padding: 0;
list-style: none;
}
.cdl-path__ref-list--inline {
display: inline-flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
}
.cdl-path__ref-link,
.cdl-path__in-path-link {
color: #016087;
text-decoration: none;
font-size: 0.9rem;
}
.cdl-path__ref-link:hover,
.cdl-path__ref-link:focus,
.cdl-path__in-path-link:hover,
.cdl-path__in-path-link:focus {
text-decoration: underline;
}
.cdl-path__step-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid #f0f0f1;
}
.cdl-path__nav-btn {
display: inline-block;
padding: 0.45rem 0.75rem;
border: 1px solid #dcdcde;
border-radius: 6px;
background: #f6f7f7;
color: #1d2327;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.cdl-path__nav-btn:hover,
.cdl-path__nav-btn:focus {
border-color: #b45309;
background: #fff;
text-decoration: none;
}
.cdl-path__nav-btn--next {
margin-left: auto;
}
.cdl-path__nav-btn--disabled {
visibility: hidden;
min-width: 1px;
}
.cdl-path__step-arrow {
display: block;
margin: 0.65rem auto 0;
text-align: center;
font-size: 1.25rem;
color: #b45309;
line-height: 1;
} .cdl-path__summary {
margin-top: 2rem;
padding: 1rem 1.1rem;
border: 1px solid #e2e4e7;
border-radius: 8px;
background: #fafafa;
}
.cdl-path__summary-list {
margin: 0;
}
.cdl-path__summary-row {
margin-bottom: 0.85rem;
}
.cdl-path__summary-row:last-child {
margin-bottom: 0;
}
.cdl-path__summary-row dt {
margin: 0 0 0.25rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #646970;
}
.cdl-path__summary-row dd {
margin: 0;
font-size: 0.95rem;
} .cdl-path__progress-guest {
margin: 1rem 0 0;
padding: 0.65rem 0.85rem;
border-radius: 6px;
background: #f6f7f7;
font-size: 0.875rem;
color: #646970;
}
.cdl-path__progress-guest a {
margin-left: 0.35rem;
color: #016087;
}
.cdl-path__progress {
margin-top: 1rem;
padding: 0.85rem 1rem;
border-radius: 8px;
background: #f9fafb;
border: 1px solid #e2e4e7;
}
.cdl-path__progress-bar {
height: 0.5rem;
margin-bottom: 0.65rem;
border-radius: 999px;
background: #ececec;
overflow: hidden;
}
.cdl-path__progress-bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
}
.cdl-path__progress-stats {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
margin: 0 0 0.5rem;
padding: 0;
list-style: none;
font-size: 0.875rem;
font-weight: 600;
}
.cdl-path__progress-stat {
color: #1d2327;
}
.cdl-path__progress-next {
margin: 0;
font-size: 0.875rem;
color: #3c434a;
}
.cdl-path__progress-next a {
color: #016087;
font-weight: 600;
text-decoration: none;
}
.cdl-path__progress-next a:hover,
.cdl-path__progress-next a:focus {
text-decoration: underline;
}
.cdl-path__step-badge {
display: inline-block;
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.35;
}
.cdl-path-step--mastered .cdl-path__step-badge {
background: #dcfce7;
color: #166534;
}
.cdl-path-step--practice .cdl-path__step-badge {
background: #fef3c7;
color: #92400e;
}
.cdl-path-step--seen .cdl-path__step-badge {
background: #e0f2fe;
color: #0369a1;
}
.cdl-path-step--new .cdl-path__step-badge {
background: #f3f4f6;
color: #4b5563;
}
.cdl-path-step--mastered {
border-left: 3px solid #22c55e;
}
.cdl-path-step--practice {
border-left: 3px solid #f59e0b;
}
.cdl-path-step--seen {
border-left: 3px solid #38bdf8;
}
.cdl-path-step--new {
border-left: 3px solid #d1d5db;
}
@media (min-width: 640px) {
.cdl-path__step {
padding: 1.15rem 1.25rem;
}
.cdl-path__meta-list {
gap: 0.75rem 1.5rem;
}
}