/* File: theme/css/humanspark-layout.css
* Purpose: Structural layout - hero, sections, grids, content width.
* Project: HumanSpark | Date: 2026-03-22
*
* Overview: Minimal layout classes for the HumanSpark theme.
* Provides .hs-hero, .hs-section variants, .hs-grid, and
* width constraints. No decorative effects - that's CSS's job
* to look good, not impressive.
*/
html { overflow-x: hidden; }
body { background: var(--hs-navy); overflow-x: hidden; }
main { background: var(--hs-navy); padding-top: 0; }
/* --- Pico classless overrides ---
* Pico classless styles bare HTML elements directly. These resets
* prevent Pico from conflicting with theme components. */
body > header, body > main, body > footer { max-width: none; margin: 0; padding: 0; }
article { margin-bottom: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.hs-site-header nav ul { margin-left: 0; margin-right: 0; }
:where(nav li)::before { content: none; }
details { margin-bottom: 0; }
details[open] > summary { margin-bottom: 0; }
input, select, textarea { margin-bottom: 0; }
ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }
.hs-post-sidebar__toc li,
.hs-site-footer li,
.hs-cta-discover__list li,
.hs-nav__menu li,
.hs-post-content ul > li,
.hs-feature-list li,
.hs-pricing__features li { list-style-type: none; }
button { border-radius: 0; }
img { max-width: 100%; height: auto; }
.hs-contain {
max-width: var(--hs-content-width);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2rem);
}
.hs-section .hs-contain,
.hs-section--dark .hs-contain {
padding-inline: clamp(1rem, 3vw, 2rem);
}
.hs-page-light {
background: var(--hs-bg-reading);
}
.hs-hero {
background: var(--hs-warm-white);
color: var(--hs-text);
padding-block: clamp(2.5rem, 6vw, 4rem);
padding-inline: clamp(1rem, 3vw, 2rem);
text-align: center;
position: relative;
overflow: hidden;
}
.hs-hero h1,
.hs-hero h2 {
color: var(--hs-text-heading);
max-width: 800px;
margin-inline: auto;
font-size: var(--hs-display-3xl);
line-height: 1.04;
margin-bottom: var(--size-4);
letter-spacing: -0.038em;
}
.hs-hero h1::after { display: none; }
.hs-hero p {
color: var(--hs-text);
max-width: 580px;
margin-inline: auto;
font-size: var(--hs-text-xl);
line-height: var(--hs-leading-tight);
margin-bottom: var(--size-2);
}
.hs-hero .hs-btn {
margin-top: var(--size-3);
padding: var(--size-2) var(--size-fluid-4);
font-size: var(--hs-text-lg);
}
.hs-hero .hs-tagline,
.hs-hero--split .hs-hero__text .hs-tagline {
color: var(--hs-accent);
font-size: var(--hs-text-base);
letter-spacing: var(--hs-tracking-wide);
margin-bottom: var(--size-2);
}
.hs-hero--dark { background: var(--hs-navy); color: var(--hs-white); }
.hs-hero--dark h1, .hs-hero--dark h2 { color: var(--hs-white); }
.hs-hero--dark p { color: var(--hs-dark-text); }
.hs-hero--dark .hs-tagline { color: var(--hs-accent); }
.hs-hero--dark.hs-hero--split .hs-hero__text p { color: var(--hs-dark-text); }
.hs-hero--split {
text-align: left;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(1.75rem, 3.8vw, 3.2rem);
align-items: center;
max-width: var(--hs-content-width);
margin-inline: auto;
padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.hs-hero--split .hs-hero__text {
position: relative;
z-index: 1;
}
.hs-hero--split .hs-hero__text h1 {
max-width: none;
margin-inline: 0;
font-size: var(--hs-display-2xl);
line-height: 1.06;
margin-bottom: var(--size-3);
font-weight: 800;
}
.hs-hero--split .hs-hero__text p {
margin-inline: 0;
max-width: none;
font-size: var(--hs-text-lg);
line-height: var(--hs-leading-tight);
color: var(--hs-text);
}
.hs-hero--split .hs-hero__text h1::after { display: none; }
.hs-hero--split .hs-btn {
margin-top: var(--size-2);
padding: var(--size-2) var(--size-5);
font-size: var(--hs-text-lg);
white-space: nowrap;
}
.hs-hero__image {
border-radius: var(--hs-radius);
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
margin: 0;
background: var(--hs-white);
padding: 2px;
}
.hs-hero__image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: var(--hs-radius);
}
.hs-hero__image figcaption {
color: var(--hs-text-muted);
font-size: var(--hs-text-2xs);
text-align: right;
padding: var(--size-2) var(--hs-space-sm) 0;
font-style: italic;
background: none;
}
.hs-section {
padding-block: var(--hs-section-pad-spacious);
padding-inline: 0;
background: var(--hs-warm-white);
margin-bottom: 0;
}
.hs-section h2 {
text-align: center;
margin-bottom: var(--size-4);
margin-top: 0;
color: var(--hs-navy);
font-size: var(--hs-display-xl);
letter-spacing: var(--hs-tracking-tight);
line-height: 1.06;
}
.hs-section h2::after {
content: '';
display: block;
width: 44px;
height: 3px;
background: var(--hs-gradient-line);
margin-top: var(--size-2);
margin-inline: auto;
border-radius: var(--hs-radius);
}
.hs-section .hs-tagline { text-align: center; }
.hs-section--dark {
background: var(--hs-navy);
color: var(--hs-white);
padding-block: var(--hs-section-pad-standard);
text-align: center;
margin-bottom: 0;
}
.hs-section--dark h2,
.hs-section--dark h3 { color: var(--hs-white); }
.hs-section--dark .hs-grid .hs-card { text-align: left; }
/* font-size intentionally NOT set here — inherited from section/body.
Setting it on `p` creates a specificity trap (0,1,1) that silently
overrides component-level class selectors (0,1,0). */
.hs-section--dark p {
color: var(--hs-dark-text);
max-width: 550px;
margin-inline: auto;
line-height: var(--hs-leading-tight);
}
.hs-section--dark .hs-grid .hs-card p,
.hs-section--dark .hs-grid .hs-card .hs-card__body {
max-width: none;
margin-inline: 0;
}
.hs-section--dark .hs-tagline {
color: var(--hs-accent);
letter-spacing: var(--hs-tracking-wide);
}
.hs-section--proof { text-align: center; padding-block: var(--hs-section-pad-standard); }
.hs-section--proof .hs-contain { max-width: var(--hs-content-width); }
.hs-section--offer { padding-block: var(--hs-section-pad-standard); }
.hs-section--offer .hs-contain { max-width: var(--hs-content-width); }
.hs-section--editorial { padding-block: var(--hs-section-pad-compact); }
.hs-section--editorial .hs-contain { max-width: var(--hs-reading-width); }
.hs-section--editorial h2 { text-align: left; }
.hs-section--editorial h2::after { display: none; }
.hs-section--dark.hs-section--editorial { text-align: left; }
.hs-section--detail > .hs-contain > .hs-btn { margin-top: var(--size-4); }
.hs-section__intro { font-size: var(--hs-text-xl); line-height: var(--hs-leading-tight); color: var(--hs-text); max-width: none; }
.hs-section--grey { background: var(--hs-warm-white); }
.hs-section--services {
background: var(--hs-warm-white);
padding-block: var(--hs-section-pad-compact);
}
.hs-section--services .hs-tagline { text-align: left; font-size: var(--hs-text-2xs); color: var(--hs-accent); margin-bottom: 0.2rem; }
.hs-section--services h2 { text-align: left; font-size: var(--hs-display-lg); font-weight: 800; line-height: 1.14; max-width: 760px; color: var(--hs-navy); margin-top: 0; margin-bottom: var(--size-3); }
.hs-section--services h2::after { display: none; }
.hs-section--services .hs-grid { margin-top: var(--size-3); }
.hs-section--testimonial { padding-block: var(--hs-section-pad-standard); background: var(--hs-white); }
.hs-section--testimonial h2 { text-align: center; color: var(--hs-navy); font-size: var(--hs-display-testimonial-title); margin-bottom: var(--size-fluid-4); }
.hs-section--testimonial h2::after { display: none; }
.hs-section--cta-warm { text-align: center; padding-block: var(--hs-section-pad-spacious); }
.hs-section--cta-warm h2 { font-size: var(--hs-display-xl); max-width: 660px; margin-inline: auto; }
.hs-section--cta-warm p { max-width: 550px; margin-inline: auto; margin-bottom: var(--size-2); }
.hs-section--cta-warm .hs-btn { margin-top: var(--size-2); }
.hs-section--cta-dark {
padding-block: var(--hs-section-pad-spacious) clamp(3rem, 5.5vw, 4.5rem);
background: linear-gradient(180deg, #000a2a 0%, var(--hs-navy) 100%);
}
.hs-section--cta-dark h2 { font-size: var(--hs-display-prominent); max-width: 660px; margin-inline: auto; line-height: 1.06; }
.hs-section--cta-dark p { margin-bottom: var(--size-2); max-width: 550px; margin-inline: auto; }
.hs-section--cta-dark .hs-btn { margin-top: var(--size-2); }
.hs-page-title {
font-size: var(--hs-display-prominent);
color: var(--hs-text-heading);
font-weight: 800;
letter-spacing: var(--hs-tracking-tight);
line-height: 1.06;
margin-bottom: var(--size-fluid-3);
text-align: left;
}
.hs-page-title::after { display: none; }
.hs-cta-discover__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--size-fluid-5);
align-items: center;
}
.hs-cta-discover__text { text-align: left; }
.hs-cta-discover__text .hs-tagline { text-align: left; }
.hs-cta-discover__text h2 { text-align: left; font-size: var(--hs-display-cta-heading); color: var(--hs-white); margin-bottom: var(--size-4); line-height: 1.08; font-weight: 800; }
.hs-cta-discover__text h2::after { display: none; }
.hs-cta-discover__list { list-style: none; padding: 0; margin: 0; }
.hs-cta-discover__list li { color: var(--hs-dark-text); font-size: var(--hs-text-md); display: flex; align-items: center; gap: var(--size-2); margin-bottom: var(--size-2); line-height: var(--hs-leading-tight); }
.hs-cta-discover__list li .hs-icon { color: var(--hs-accent); flex-shrink: 0; width: 18px; height: 18px; }
.hs-cta-discover__action {
text-align: center;
padding: var(--size-6) var(--size-5);
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hs-cta-discover__avatar {
width: 86px;
height: 86px;
border-radius: 50%;
border: 3px solid var(--hs-accent);
margin-bottom: var(--size-3);
}
.hs-cta-discover__meta {
color: var(--hs-dark-text-muted);
font-size: var(--hs-text-sm);
margin-bottom: var(--size-3);
font-family: 'JetBrains Mono', monospace;
letter-spacing: var(--hs-tracking-wide);
}
.hs-cta-discover p,
.hs-cta-discover .hs-cta-discover__meta,
.hs-cta-discover__list li { max-width: none; margin-inline: 0; }
.hs-grid {
display: grid;
gap: clamp(var(--size-3), 2.5vw, var(--size-fluid-3));
max-width: var(--hs-content-width);
margin-inline: auto;
}
.hs-grid--2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.hs-grid--3col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hs-grid--podcast { grid-template-columns: 1fr; gap: var(--size-fluid-3); }
@media (min-width: 640px) { .hs-grid--podcast { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .hs-grid--podcast { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .hs-grid--podcast > :last-child:nth-child(3n+1) { grid-column: 2; } }
.hs-grid--casestudy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.hs-grid--casestudy > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; }
.hs-grid--training-routing { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.hs-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--size-fluid-3);
max-width: var(--hs-content-width);
margin-inline: auto;
}
.hs-tagline {
font-size: var(--hs-text-sm);
font-weight: var(--hs-weight-heading);
text-transform: uppercase;
letter-spacing: var(--hs-tracking-wide);
color: var(--hs-accent);
margin-bottom: var(--size-2);
line-height: var(--hs-leading-tight);
}
.hs-process-strip { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--hs-warm-white); }
.hs-process { display: flex; align-items: flex-start; justify-content: center; gap: clamp(0.65rem, 2vw, 1.4rem); }
.hs-process__step { text-align: center; flex: 0 1 220px; }
.hs-process__icon {
width: 72px; height: 72px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-inline: auto; margin-bottom: 0.35rem;
background: rgba(201, 160, 0, 0.12); color: var(--hs-accent);
border: 2px solid rgba(201, 160, 0, 0.25);
}
.hs-process__icon svg { stroke-width: 2.5; }
.hs-process__number { font-family: 'JetBrains Mono', monospace; font-size: var(--hs-text-sm); font-weight: 700; color: var(--hs-navy); letter-spacing: var(--hs-tracking-wide); display: block; margin-bottom: var(--size-1); }
.hs-process__title { font-size: var(--hs-text-lg); font-weight: 800; color: var(--hs-navy); margin-bottom: 2px; }
.hs-process__detail { font-size: var(--hs-text-sm); color: var(--hs-text-muted); line-height: var(--hs-leading-tight); }
.hs-process__arrow { color: var(--hs-accent); flex-shrink: 0; display: flex; align-items: center; margin-top: 1.5rem; opacity: 0.85; }
.hs-logo-wall { padding-block: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.hs-logo-wall__label { font-size: var(--hs-text-2xs); text-transform: uppercase; letter-spacing: var(--hs-tracking-wider); color: var(--hs-text-muted); margin-bottom: var(--size-2); font-weight: 600; }
.hs-logo-wall__grid { display: flex; align-items: center; justify-content: center; gap: clamp(var(--size-6), 7vw, var(--size-9)); flex-wrap: wrap; }
.hs-logo-wall__item { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); margin: 0; }
.hs-logo-wall__item img { height: 52px; width: auto; opacity: 0.65; transition: opacity 0.2s; filter: grayscale(0.7); }
.hs-logo-wall__item img:hover { opacity: 0.9; filter: grayscale(0); }
.hs-logo-wall__item figcaption { font-size: var(--hs-text-2xs); color: var(--hs-text-muted); letter-spacing: var(--hs-tracking-wide); font-weight: 500; }
.hs-section--dark .hs-logo-wall__label { color: var(--hs-dark-text-faint); }
.hs-section--dark .hs-logo-wall__item figcaption { color: var(--hs-dark-text-faint); }
.hs-section--dark .hs-logo-wall__item img { filter: invert(1) grayscale(1); }
.hs-section--dark .hs-logo-wall__item img:hover { filter: invert(1) grayscale(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 480px) {
.hs-section .hs-contain,
.hs-section--dark .hs-contain { padding-inline: var(--size-4); }
.hs-hero h1, .hs-hero h2 { font-size: var(--hs-display-hero-mobile); }
.hs-hero--split { grid-template-columns: 1fr; text-align: center; }
.hs-hero--split .hs-hero__text h1 { font-size: var(--hs-display-hero-split-mobile); margin-inline: auto; }
.hs-hero--split .hs-hero__text p { margin-inline: auto; }
.hs-hero__image { max-width: 90%; margin-inline: auto; }
.hs-section h2 { font-size: var(--hs-display-section-mobile); }
.hs-grid { gap: var(--size-3); }
.hs-section--dark p { max-width: none; }
.hs-section--cta-dark p { max-width: none; }
.hs-section--cta-dark h2 { max-width: none; font-size: var(--hs-display-section-mobile); }
.hs-stats-grid { grid-template-columns: 1fr; gap: var(--size-3); }
.hs-process { flex-direction: column; gap: var(--size-2); }
.hs-process__arrow { transform: rotate(90deg); margin-top: 0; }
.hs-process__step { flex: none; width: 100%; }
.hs-logo-wall__item img { height: 34px; }
.hs-cta-discover__grid { grid-template-columns: 1fr; text-align: center; }
.hs-cta-discover__text h2 { text-align: center; }
.hs-cta-discover__list li { justify-content: center; }
.hs-tagline { font-size: var(--hs-text-sm); }
}
@media (min-width: 481px) and (max-width: 768px) {
.hs-hero--split { grid-template-columns: 1fr; text-align: center; }
.hs-hero--split .hs-hero__text h1 { margin-inline: auto; }
.hs-hero--split .hs-hero__text p { margin-inline: auto; }
.hs-hero__image { max-width: 380px; margin-inline: auto; }
}
@media (min-width: 1600px) {
.hs-hero h1, .hs-hero h2 { font-size: var(--hs-display-5xl); max-width: 940px; }
.hs-hero p { font-size: var(--hs-text-2xl); max-width: 690px; }
.hs-grid { max-width: 1180px; }
}