/* File: theme/css/humanspark-interactive.css
* Purpose: Reusable interactive components — tabs, numbered steps, download cards.
* Project: HumanSpark | Date: 2026-04-07
*
* Always loaded (sitewide). Extracted from components.css to stay within
* the CSS line budget. Uses hs- prefix + BEM like the rest of the theme.
*/
.hs-tabs {
display: flex; gap: var(--hs-space-sm); flex-wrap: wrap;
margin-bottom: var(--size-4);
}
.hs-tabs__tab {
padding: 0.55rem 1.2rem; border-radius: var(--hs-radius);
font-size: var(--hs-text-base); font-weight: 600;
background: var(--hs-grey); color: var(--hs-text-muted);
border: 1.5px solid transparent;
cursor: pointer; transition: all 0.2s;
font-family: inherit;
}
.hs-tabs__tab:hover,
.hs-tabs__tab--active {
background: rgba(0, 131, 132, 0.08); color: var(--hs-teal);
border-color: var(--hs-teal);
}
.hs-tabs__panel {
display: none;
background: var(--hs-grey); border-radius: var(--hs-card-radius);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.hs-tabs__panel--active { display: block; }
.hs-tabs__panel h3 {
font-size: var(--hs-display-sm); color: var(--hs-navy);
margin-bottom: var(--hs-space-xs); font-weight: 800;
}
.hs-tabs__updated {
font-size: var(--hs-text-xs); color: var(--hs-text-muted);
margin-bottom: var(--size-3); font-style: italic;
}
.hs-tabs__note {
font-size: var(--hs-text-sm); color: var(--hs-teal);
margin-top: var(--size-3); font-weight: 500;
}
.hs-step {
display: flex; gap: var(--size-3); align-items: flex-start;
margin-bottom: var(--size-3);
}
.hs-step__num {
width: 28px; height: 28px; flex-shrink: 0;
border-radius: 50%; background: var(--hs-accent);
color: var(--hs-navy); font-size: var(--hs-text-sm); font-weight: 700;
display: flex; align-items: center; justify-content: center;
margin-top: 0.15rem;
}
.hs-step p {
font-size: var(--hs-text-md); line-height: var(--hs-leading-tight);
color: var(--hs-text); max-width: none; margin: 0; text-align: left;
}
.hs-step strong { color: var(--hs-navy); }
.hs-download {
max-width: 480px; margin: var(--size-4) auto 0;
background: rgba(255, 255, 255, 0.06);
border-radius: var(--hs-card-radius);
padding: clamp(1.25rem, 3vw, 2rem);
}
.hs-download__link {
display: flex; align-items: center; gap: var(--size-3);
padding: var(--size-3); background: rgba(255, 255, 255, 0.08);
border-radius: var(--hs-radius); text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.2s;
}
.hs-download__link:hover {
border-color: var(--hs-accent);
background: rgba(255, 255, 255, 0.12);
}
.hs-download__icon { color: var(--hs-accent); flex-shrink: 0; }
.hs-download__info { text-align: left; }
.hs-download__info strong {
display: block; color: var(--hs-white); font-size: var(--hs-text-md);
}
.hs-download__info span {
font-size: var(--hs-text-xs); color: var(--hs-dark-text-muted);
margin-top: 0.15rem; display: block;
}
.hs-download__hint {
font-size: var(--hs-text-xs); color: var(--hs-dark-text-faint);
margin-top: var(--size-3); text-align: center;
}
.hs-section--centered { text-align: center; }
.hs-hint--dark {
font-size: var(--hs-text-xs); color: var(--hs-dark-text-faint);
margin-top: var(--size-3);
}
@media (max-width: 480px) {
.hs-tabs__panel { padding: var(--size-4); }
}
.hs-guide__body {
display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--size-6);
max-width: 1240px; margin-inline: auto;
padding: var(--size-6) var(--size-4);
}
.hs-guide__main .hs-post-content { max-width: 780px; }
.hs-guide__main section + section {
margin-top: var(--size-6); padding-top: var(--size-5);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.hs-guide__sidebar {
position: sticky; top: 5rem; align-self: start;
max-height: calc(100vh - 6rem); overflow-y: auto;
padding-left: var(--size-3); border-left: 1px solid rgba(0, 0, 0, 0.08);
}
@media (max-width: 900px) {
.hs-guide__body { grid-template-columns: 1fr; gap: var(--size-4); }
.hs-guide__sidebar { display: none; }
}
.hs-guide-intro {
font-size: var(--hs-text-xl); color: var(--hs-text-heading);
line-height: var(--hs-leading-normal); margin-bottom: var(--hs-space-lg);
}
.hs-callout {
background: var(--hs-grey); border-left: 4px solid var(--hs-accent);
padding: var(--hs-space-md) var(--hs-space-lg); border-radius: var(--hs-radius);
margin: var(--hs-space-lg) 0;
}
.hs-callout__label {
display: block; font-weight: 700; color: var(--hs-navy);
text-transform: uppercase; font-size: var(--hs-text-xs);
letter-spacing: var(--hs-tracking-wide); margin-bottom: 0.4em;
}
.hs-callout p { margin: 0; }
.hs-callout p + p { margin-top: 0.55em; }
.hs-callout code { word-break: break-word; }
.hs-table-wrap { overflow-x: auto; margin: var(--hs-space-lg) 0; }
.hs-table-wrap table { width: 100%; margin: 0; }