/*
Theme Name: Behavior Lab (Salient Child)
Theme URI: https://behavior-lab.com
Description: Behavior Lab brand child theme for Salient. Adds self-contained [bl_*] shortcodes (type card, temperament quadrant, spectrum bars, workshop specs, CTA) and opt-in .bl- helper classes, so the Behavior Lab identity layers cleanly on top of Salient + WPBakery without fighting the parent theme's global CSS.
Author: Behavior Lab / TeamTuneUp
Template: salient
Version: 0.2.0
Text Domain: behaviorlab-child
*/
/* ============================================================= *
* Everything here is namespaced (.bl-*) or opt-in. It does NOT
* restyle Salient globally, so your existing pages are untouched.
* ============================================================= */
.bl-scope,
[class^="bl-"],
[class*=" bl-"]{
--bl-ink:#14181f;
--bl-paper:#ffffff;
--bl-soft:#f6f4ef;
--bl-muted:#5b6470;
--bl-faint:#6b7480;
--bl-line:#e5e0d5;
--bl-accent:#1668a8;
--bl-accent-ink:#0d4d7d;
--bl-orange:#e96a0c;
--bl-nt:#17a06a; --bl-nf:#2f6bff; --bl-sj:#e23b3b; --bl-sp:#f39a12;
--bl-radius:14px;
/* Two H2 tiers: major sections vs. minor ones, so importance reads through
type scale, not just spacing (see .bl-sec--lg). */
--bl-h2:clamp(26px,3.6vw,38px);
--bl-h2-sm:clamp(24px,3.4vw,34px);
--bl-shadow:0 1px 2px rgba(20,24,31,.05),0 12px 30px -18px rgba(20,24,31,.28);
--bl-font-display:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
--bl-font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--bl-font-mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;
}
[class^="bl-"] *,[class*=" bl-"] *{box-sizing:border-box}
/* opt-in helpers you can add to WPBakery elements */
.bl-eyebrow{font-family:var(--bl-font-mono);font-size:12px;letter-spacing:.18em;
text-transform:uppercase;color:var(--bl-accent);font-weight:600;display:inline-block}
.bl-h2{font-family:var(--bl-font-display)!important;font-weight:800;letter-spacing:-.02em;
line-height:1.06;color:var(--bl-ink)}
.bl-lead{color:var(--bl-muted);font-size:19px;line-height:1.6}
.bl-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--bl-font-body);
font-weight:650;font-size:15px;padding:13px 22px;border-radius:10px;text-decoration:none;
border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease}
.bl-btn:hover{transform:translateY(-1px)}
.bl-btn-primary{background:var(--bl-accent);color:#fff}
.bl-btn-primary:hover{background:var(--bl-accent-ink);color:#fff}
.bl-btn-ghost{background:transparent;color:var(--bl-ink);border-color:rgba(20,24,31,.22)}
.bl-btn-ghost:hover{border-color:var(--bl-accent)}
.bl-btn:focus-visible{outline:2px solid var(--bl-accent);outline-offset:3px}
/* ---- Type card (specimen) ---- */
.bl-typecard{background:var(--bl-paper);border:1px solid var(--bl-line);border-radius:18px;
box-shadow:var(--bl-shadow);padding:22px;position:relative;overflow:hidden;max-width:460px;
font-family:var(--bl-font-body);color:var(--bl-ink)}
.bl-typecard .bl-tag{position:absolute;top:12px;right:16px;font-family:var(--bl-font-mono);
font-size:10px;letter-spacing:.14em;color:var(--bl-faint)}
.bl-typecard .bl-type{display:flex;align-items:baseline;gap:10px;margin:4px 4px 16px}
.bl-typecard .bl-type b{font-family:var(--bl-font-display);font-size:42px;letter-spacing:.06em}
.bl-typecard .bl-type span{font-family:var(--bl-font-mono);font-size:12px;color:var(--bl-muted);
text-transform:uppercase;letter-spacing:.1em}
.bl-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bl-tile{border:1px solid var(--bl-line);border-radius:10px;overflow:hidden;text-align:center;background:var(--bl-soft)}
.bl-tile .bl-top{color:#fff;font-family:var(--bl-font-mono);font-weight:700;font-size:12.5px;padding:7px 4px;letter-spacing:.05em}
.bl-tile .bl-face{height:60px;display:flex;align-items:center;justify-content:center;color:var(--bl-ink)}
.bl-tile .bl-nm{font-size:11px;color:var(--bl-muted);padding:6px 2px}
/* Dichotomy line icons (bl_dim_icon() in shortcodes.php, mirrored as
DIM_ICON in bl-hero-slot.js) — single-stroke, currentColor, drawn to a
24x24 box, replacing the old per-OS emoji set. */
.bl-dim-icon{width:24px;height:24px;display:block}
/* ---- Spectrum bar ---- */
.bl-spectrum{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:12px;
font-family:var(--bl-font-body);font-size:13px;margin:12px 0;color:var(--bl-ink)}
.bl-spectrum .bl-l{text-align:right;color:var(--bl-muted);font-weight:600}
.bl-spectrum .bl-r{color:var(--bl-ink);font-weight:700}
.bl-track{height:8px;border-radius:99px;background:rgba(20,24,31,.09);position:relative}
.bl-track i{position:absolute;top:-3px;height:14px;width:14px;border-radius:50%;
background:var(--bl-accent);border:2px solid var(--bl-paper);box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* Narrow phones: the 1fr/2fr/1fr grid squeezes long dichotomy words
("Extraversion"/"Introversion") until they wrap mid-word. Switch to
labels-over-bar: both labels share a top row, the track spans full width
underneath, so nothing has to shrink to fit a narrow side column. */
@media(max-width:420px){
.bl-spectrum{grid-template-columns:1fr 1fr;grid-template-areas:"l r" "track track";gap:4px 10px;font-size:12.5px}
.bl-spectrum .bl-l{grid-area:l;text-align:left}
.bl-spectrum .bl-r{grid-area:r;text-align:right}
.bl-spectrum .bl-track{grid-area:track}
}
/* ---- Temperament quadrant ---- */
.bl-quadrant{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:420px;
font-family:var(--bl-font-body)}
.bl-q{border-radius:12px;padding:16px;color:#fff;min-height:96px;display:flex;
flex-direction:column;justify-content:space-between}
.bl-q small{font-family:var(--bl-font-mono);font-size:11px;letter-spacing:.08em;opacity:.92}
.bl-q b{font-family:var(--bl-font-display);font-size:24px;font-weight:800}
/* ---- Workshop specs ---- */
/* Clean spec sheet: one row per spec, label left / value right, hairline
rows. Reads as an intentional aligned card in the workshop's half-column,
instead of a 3-col grid whose uneven cells floated out of alignment. */
.bl-specs{display:block;font-family:var(--bl-font-body);border:1px solid var(--bl-line);
border-radius:14px;overflow:hidden;background:var(--bl-paper);margin:0}
.bl-specs .bl-spec{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
padding:14px 20px;border-bottom:1px solid var(--bl-line);background:var(--bl-paper)}
.bl-specs .bl-spec:last-child{border-bottom:none}
.bl-specs dt{font-family:var(--bl-font-mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--bl-muted);margin:0;flex:none}
.bl-specs dd{margin:0;font-weight:650;font-size:15px;color:var(--bl-ink);text-align:right}
/* ---- Science cards ---- */
.bl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;font-family:var(--bl-font-body)}
.bl-card{background:var(--bl-paper);border:1px solid var(--bl-line);border-radius:var(--bl-radius);
padding:26px;box-shadow:var(--bl-shadow)}
.bl-card .bl-k{font-family:var(--bl-font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--bl-faint)}
.bl-card h3{font-family:var(--bl-font-display);font-weight:800;font-size:20px;margin:10px 0 8px;color:var(--bl-ink)}
.bl-card p{color:var(--bl-muted);font-size:15.5px;margin:0}
@media(max-width:820px){.bl-cards{grid-template-columns:1fr}}
/* ---- CTA block ---- */
.bl-cta{background:linear-gradient(180deg,#fff,var(--bl-soft));border:1px solid var(--bl-line);
border-radius:22px;padding:48px;text-align:center;box-shadow:var(--bl-shadow);font-family:var(--bl-font-body)}
.bl-cta h2{font-family:var(--bl-font-display);font-weight:800;letter-spacing:-.02em;
font-size:var(--bl-h2-sm);margin:12px auto 0;max-width:22ch;color:var(--bl-ink)}
.bl-cta .bl-price{font-family:var(--bl-font-mono);font-size:13px;color:var(--bl-muted);margin-top:10px}
.bl-cta .bl-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
/* Dark treatment for the final "Get started" [bl_cta] block — the owner
likes the dark bands and the back half of the page had none. Applied via
a wrapper class (.bl-cta-dark) around the shortcode output rather than a
shortcode attribute, so [bl_cta] itself still defaults to the light card
anywhere else it's used. Buttons keep their own backgrounds so both stay
legible on dark. */
.bl-cta-dark .bl-cta{background:linear-gradient(180deg,var(--bl-ink),#1b212b);border-color:rgba(255,255,255,.14)}
.bl-cta-dark .bl-cta .bl-eyebrow{color:#7db8ec}
.bl-cta-dark .bl-cta h2{color:#fff}
.bl-cta-dark .bl-cta .bl-price{color:rgba(255,255,255,.75)}
.bl-cta-dark .bl-cta .bl-btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.bl-cta-dark .bl-cta .bl-btn-ghost:hover{border-color:#fff}
/* ---- Steps ---- */
.bl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:bls;font-family:var(--bl-font-body)}
.bl-step{position:relative;padding-top:18px}
.bl-step::before{counter-increment:bls;content:"0" counter(bls);font-family:var(--bl-font-mono);
font-size:13px;color:var(--bl-accent);font-weight:700;letter-spacing:.1em}
.bl-step h3{font-family:var(--bl-font-display);font-weight:800;font-size:17px;margin:8px 0 6px;color:var(--bl-ink)}
.bl-step p{font-size:14.5px;color:var(--bl-muted);margin:0}
@media(max-width:820px){.bl-steps{grid-template-columns:1fr 1fr}}
/* ---- Homepage layout helpers (WPBakery page) ---- */
.bl-sec{padding:34px 0}
/* Major sections (hero, 16-types, reports) get noticeably more breathing
room than minor ones (trust logos, FAQ, workshop) so importance reads
through space, not just content. */
.bl-sec--lg{padding:clamp(52px,7vw,88px) 0}
/* Hero -> trust-logos seam was too wide; pairs with .bl-sec on the trust row. */
.bl-sec--tight-top{padding-top:12px}
.bl-center{text-align:center}
/* Hero CTA row — replaces a hack between the two buttons. */
.bl-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
/* Modifier for .bl-eyebrow — replaces repeated inline style="display:block". */
.bl-eyebrow--block{display:block}
/* ---- Header logo ---- */
/* Replace Salient's plain text site-title (#logo.no-image) with the Behavior
Lab brand mark, controlled entirely from the child theme (no Salient logo
option needed). Path is relative to this stylesheet at the theme root. */
#logo{
background-image:url('assets/img/bl-logo.svg') !important;
background-repeat:no-repeat !important;
background-position:left center !important;
background-size:contain !important;
width:190px !important;
/* Source SVG viewBox is 236x44 (ratio 5.36); 190px wide at that ratio is
35.4px tall — was hard-coded to 36px, stretching the mark slightly. */
height:35.4px !important;
line-height:35.4px !important;
font-size:0 !important;
color:transparent !important;
display:inline-block !important;
}
#logo img{display:none !important}
/* ---- Distraction-free assessment page (page id 10) ---- */
/* The [behavior_lab] app is the entire page here, so hide the marketing
header/footer and let the test own the screen (like 16Personalities). */
.page-id-10 #header-outer,
.page-id-10 #header-space,
.page-id-10 #footer-outer,
.page-id-10 #page-header-bg{display:none !important}
.page-id-10 #ajax-content-wrap{padding-top:0 !important}
.page-id-10 .container-wrap{padding-top:0 !important;background:var(--bl-soft)}
body.page-id-10{background:var(--bl-soft)}
/* ---- Hero card column ---- */
/* The [bl_typecard] specimen's WPBakery column: centers the card and gives
it a positioning context for the radial glow behind it. Also the anchor
for content_placement="top" on the hero row, so the H1 cap-height and the
card's "PROFILE // SPECIMEN" tag share a top baseline. */
.bl-hero-card-col{display:flex;align-items:flex-start;justify-content:center;position:relative}
.bl-hero-card-col::before{content:"";position:absolute;inset:-10% -10% -10% 10%;z-index:-1;
background:radial-gradient(60% 60% at 60% 35%,rgba(22,104,168,.07),transparent 70%);pointer-events:none}
/* ---- Dark band two-column layout ("How the three frameworks work
together") ---- */
/* Prose left, the Type/Temperament/CBT Venn as a right column with a
vertical rule. The Venn used to sit above the band in the light
section; it now lives here so hovering a framework paragraph can
highlight its matching circle (see assets/js/bl-venn-link.js). */
.bl-band-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px 48px;margin-top:18px;align-items:start}
.bl-band-fw{border-radius:8px}
.bl-band-fw:focus-visible{outline:2px solid #7db8ec;outline-offset:6px}
.bl-band-venn{display:flex;flex-direction:column;align-items:center;justify-content:center;
border-left:1px solid rgba(255,255,255,.14);padding-left:32px}
.bl-band-venn .bl-venn{margin:0}
.bl-band-venn .bl-plus{margin-top:14px}
.bl-band .bl-plus b{color:#7db8ec}
@media(max-width:900px){
.bl-band-grid{grid-template-columns:1fr}
.bl-band-venn{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;margin-top:8px}
}
.bl-eyebrow{display:inline-block}
.bl-hx{font-family:var(--bl-font-display);font-weight:800;letter-spacing:-.02em;line-height:1.06;color:var(--bl-ink);margin:12px 0 0}
.bl-lead{color:var(--bl-muted);font-size:19px;line-height:1.6}
/* Typographic "trusted by" row (no logo assets). font-weight 800 + flat
opacity:.5 on ink read as faded/disabled placeholder text; a real
mid-gray at full opacity plus tighter weight/tracking reads as a
deliberate, designed row instead. Company names/copy unchanged. */
.bl-trustline{text-align:center;font-family:var(--bl-font-display);font-weight:650;color:var(--bl-muted);font-size:16px;line-height:2.3;letter-spacing:.01em}
@media(max-width:680px){.bl-trustline{font-size:14px;line-height:2}}
.bl-band{background:var(--bl-ink);border-radius:20px;padding:44px}
.bl-band .bl-eyebrow{color:#7db8ec}
.bl-band .bl-hx,.bl-band p,.bl-band li{color:#fff}
.bl-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
/* Default (light-background) metric card — used by the B2 "Why teams do
this" prose section. .bl-band overrides this back to the dark-band look
used by the "Why it matters" count-up band. */
.bl-metric{border:1px solid var(--bl-line);border-radius:12px;padding:14px 16px;color:var(--bl-ink);background:var(--bl-paper)}
.bl-metric>b{font-family:var(--bl-font-display);font-size:24px;display:block}
.bl-metric small{font-family:var(--bl-font-mono);font-size:12px;opacity:.75;display:block;margin-top:4px}
.bl-band .bl-metric{border-color:rgba(255,255,255,.18);color:#fff;background:transparent}
/* Prose variant (B2 "Why teams do this") — full-sentence body copy instead
of a short mono label, so a plain-language … … reads
like a sentence, not a stat readout. */
.bl-metrics--prose{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bl-metrics--prose{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bl-metrics--prose{grid-template-columns:1fr}}
.bl-metrics--prose .bl-metric{padding:16px 18px}
.bl-metrics--prose .bl-metric small{font-family:var(--bl-font-body);font-size:14.5px;line-height:1.55;opacity:.92;margin-top:0}
.bl-metrics--prose .bl-metric small b{font-family:var(--bl-font-display);font-weight:700;font-size:inherit;color:var(--bl-ink);display:inline}
.bl-quote{max-width:46rem;margin:0 auto;text-align:center}
/* Full reset first: Salient styles bare with a left border,
padding, italics and a narrow max-width, which was mangling these. */
.bl-quote blockquote{margin:0;padding:0;border:0;quotes:none;font-style:normal;max-width:none;
font-family:var(--bl-font-display);font-weight:800;font-size:clamp(19px,2.1vw,25px);
letter-spacing:-.015em;line-height:1.42;color:var(--bl-ink)}
.bl-quote blockquote::before,.bl-quote blockquote::after{content:none}
.bl-quote .bl-who{margin-top:18px;font-family:var(--bl-font-mono);font-size:12.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--bl-muted)}
/* Supporting testimonials grid (below the primary/hero quote) — 2 quotes,
not 3: the duplicate Kiddie Academy quote was dropped (see
behaviorlab-home-wpbakery.html), so this is sized for exactly 2. */
.bl-quotes-more{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px;max-width:680px;margin-left:auto;margin-right:auto}
.bl-quote--sm blockquote{margin:0;padding:0;border:0;quotes:none;font-style:normal;
font-family:var(--bl-font-body);font-weight:600;font-size:16px;letter-spacing:0;line-height:1.5;color:var(--bl-ink)}
.bl-quote--sm blockquote::before,.bl-quote--sm blockquote::after{content:none}
.bl-quote--sm .bl-who{margin-top:12px;font-size:11.5px}
@media(max-width:820px){.bl-quotes-more{grid-template-columns:1fr}}
.bl-plus{text-align:center;font-family:var(--bl-font-mono);font-size:13px;color:var(--bl-muted);
letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.bl-plus b{color:var(--bl-accent)}
.bl-faq details{border-bottom:1px solid var(--bl-line);padding:16px 0}
.bl-faq summary{cursor:pointer;font-weight:650;font-size:17px;color:var(--bl-ink);list-style:none}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary:focus-visible{outline:2px solid var(--bl-accent);outline-offset:3px;border-radius:4px}
.bl-faq p{color:var(--bl-muted);margin:10px 0 0;font-size:15.5px}
@media(max-width:640px){.bl-metrics{grid-template-columns:1fr 1fr}}
/* ---- "What makes it different": standalone light card below the dark
band (previously the band's right-side sidebar, displaced by the Venn
moving in). Styled consistently with the other light cards (.bl-card,
.bl-specs): paper background, hairline border, radius, shadow. ---- */
.bl-diff{background:var(--bl-paper);border:1px solid var(--bl-line);border-radius:var(--bl-radius);
padding:32px 36px;box-shadow:var(--bl-shadow);max-width:900px;margin:0 auto;font-family:var(--bl-font-body)}
.bl-diff .bl-eyebrow{margin-bottom:12px}
.bl-diff ul{margin:0;padding-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:4px 32px}
.bl-diff li{margin-bottom:10px;color:var(--bl-muted);font-size:15.5px;line-height:1.5}
@media(max-width:680px){.bl-diff{padding:26px 24px}.bl-diff ul{grid-template-columns:1fr}}
/* ---- The 16 types ---- */
.bl-typefams{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-family:var(--bl-font-body)}
.bl-fam{background:var(--bl-paper);border:1px solid var(--bl-line);border-top:4px solid var(--fc);
border-radius:var(--bl-radius);padding:22px 24px;box-shadow:var(--bl-shadow)}
.bl-famhead{display:flex;align-items:baseline;gap:10px;padding-bottom:13px;
border-bottom:1px solid var(--bl-line);margin-bottom:6px}
.bl-famhead .bl-fc{font-family:var(--bl-font-mono);font-size:11.5px;font-weight:700;color:#fff;
background:var(--fc);padding:3px 8px;border-radius:6px;letter-spacing:.08em}
.bl-famhead b{font-family:var(--bl-font-display);font-size:21px;color:var(--bl-ink)}
.bl-famhead small{margin-left:auto;font-family:var(--bl-font-mono);font-size:10.5px;
color:var(--bl-faint);letter-spacing:.04em;text-transform:uppercase}
.bl-trow{display:grid;grid-template-columns:52px 132px 1fr;align-items:baseline;gap:12px;
padding:9px 0;border-bottom:1px dashed var(--bl-line)}
.bl-trow:last-child{border-bottom:none}
.bl-trow .bl-tc{font-family:var(--bl-font-mono);font-size:12px;color:var(--bl-muted);font-weight:700;letter-spacing:.05em}
.bl-trow b{font-family:var(--bl-font-display);font-size:16.5px;color:var(--bl-ink)}
.bl-trow .bl-d{color:var(--bl-muted);font-size:14px}
@media(max-width:820px){.bl-typefams{grid-template-columns:1fr}.bl-trow{grid-template-columns:52px 1fr}.bl-trow .bl-d{grid-column:2;font-size:13.5px}
/* Tap target: the clickable family header (bl-types-explorer.js filter)
was under 44px tall on mobile with only bottom padding. */
.bl-famhead{padding:12px 0 13px;min-height:44px}
}