/* BCA Partners — production CSS bundle. DO NOT EDIT.
Source: assets/css/{tokens,base,site,sections,pages}/*.css
Build: bin/build-css.sh — run after editing any source file. */
/* ===== colors.css ===== */
/* BCA Partners — color tokens (values transcribed verbatim from the Figma file) */
:root{
/* Brand */
--bca-navy:#003f6f; /* rgb(0,63,111) — primary brand, headings, filled buttons */
--bca-blue:#0079a6; /* rgb(0,121,166) — secondary/accent, wordmark, links, overlays */
/* Ink / text */
--bca-ink:#111827; /* rgb(17,24,39) — primary heading ink */
--bca-ink-2:#374151; /* rgb(55,65,81) — body copy */
--bca-black:#000000; /* footer bg, some body text */
--bca-muted:#8896a6; /* rgb(136,150,166) — hairline dividers, muted text */
--bca-white:#ffffff;
/* Neutral surfaces & borders */
--bca-surface:#ffffff;
--bca-surface-muted:#f5f5f5; /* services section bg */
--bca-surface-section:#e9ecf2; /* rgb(233,236,242) — alternating section bg / soft cards */
--bca-border:#e0e1e5; /* rgb(224,225,229) — image placeholders, card fills */
--bca-border-2:#dee1e6; /* rgb(222,225,230) — caption bars */
/* Overlays */
--bca-overlay-dark:rgba(36,36,36,0.5); /* blurred glass panel over imagery */
--bca-overlay-blue:rgba(0,121,166,0.8); /* contact CTA band */
--bca-overlay-white:rgba(255,255,255,0.8);
/* Text on dark surfaces (footer, hero, contact band, belief card).
4-tier hierarchy: bright headings > regular body links > muted
descriptions > faint labels. Use these everywhere — no raw
rgba(255,255,255,*) on dark surfaces. */
--bca-text-on-dark-bright:rgba(255,255,255,1); /* headings, strong text, full white */
--bca-text-on-dark:rgba(255,255,255,0.85); /* body, links, primary readable */
--bca-text-on-dark-muted:rgba(255,255,255,0.7); /* descriptions, secondary */
--bca-text-on-dark-faint:rgba(255,255,255,0.55); /* labels, captions, faint */
--bca-text-on-dark-subtle:rgba(255,255,255,0.12); /* social chip bg, etc */
--bca-divider-on-dark:rgba(255,255,255,0.1); /* footer top border, hairlines */
--bca-scrim:rgba(0,0,0,0.3);
/* Semantic aliases */
--color-primary:var(--bca-navy);
--color-accent:var(--bca-blue);
--text-heading:var(--bca-ink);
--text-body:var(--bca-ink-2);
--text-on-dark:var(--bca-white);
--text-eyebrow:var(--bca-navy);
--surface-page:var(--bca-surface);
--surface-muted:var(--bca-surface-muted);
--surface-section:var(--bca-surface-section);
--surface-card:var(--bca-border);
--surface-footer:var(--bca-black);
--border-subtle:var(--bca-border);
--divider:var(--bca-muted);
--link:var(--bca-blue);
--link-hover:var(--bca-navy);
}
/* ===== effects.css ===== */
/* BCA Partners — elevation, borders & glass effects (from the Figma file) */
:root{
--shadow-nav:0px 1px 4px 0px rgba(0,0,0,0.15); /* sticky navbar */
--shadow-card:0px 1px 4px 0px rgba(0,0,0,0.1);
--border-hairline:inset 0 0 0 1px rgba(0,0,0,0.1); /* @kind shadow */
--border-outline:inset 0 0 0 2px currentColor; /* @kind shadow */
/* Frosted glass — used on feature panels and the key-partners band */
--blur-panel:blur(4px); /* @kind other */
--blur-band:blur(12px); /* @kind other */
--transition:160ms ease; /* @kind other */
}
/* ===== fonts.css ===== */
/* BCA Partners — Inter font (self-hosted, woff2).
5 weights × 3 subsets (latin / latin-ext / vietnamese) = 15 woff2 files
in assets/fonts/. Self-hosting avoids the Google Fonts request
and gives us tighter control over the type rendering.
Source: Google Fonts (Inter v20), SIL OFL license. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/inter-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2202, U+2206, U+2208, U+220B, U+220F, U+2211, U+2212, U+2215, U+221A, U+221E, U+2222, U+222B-222D, U+2235, U+2236, U+2248, U+224C, U+2260, U+2264, U+2266, U+226A, U+226E, U+2272, U+2276, U+227A, U+227C, U+2282, U+2283, U+2286, U+2287, U+2295, U+2299, U+22A5, U+22C0, U+22C2, U+22C5, U+22C6, U+22D8, U+22D9, U+22EF, U+2304, U+2306, U+2310, U+2312, U+2318, U+231A, U+231C, U+2336, U+237C, U+2395, U+239B-23B6, U+23CE, U+23D0, U+23DC-23E1, U+2478-2492, U+249C-24B5, U+2500-259F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/inter-400-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+030C, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/inter-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2202, U+2206, U+2208, U+220B, U+220F, U+2211, U+2212, U+2215, U+221A, U+221E, U+2222, U+222B-222D, U+2235, U+2236, U+2248, U+224C, U+2260, U+2264, U+2266, U+226A, U+226E, U+2272, U+2276, U+227A, U+227C, U+2282, U+2283, U+2286, U+2287, U+2295, U+2299, U+22A5, U+22C0, U+22C2, U+22C5, U+22C6, U+22D8, U+22D9, U+22EF, U+2304, U+2306, U+2310, U+2312, U+2318, U+231A, U+231C, U+2336, U+237C, U+2395, U+239B-23B6, U+23CE, U+23D0, U+23DC-23E1, U+2478-2492, U+249C-24B5, U+2500-259F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/inter-500-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+030C, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/inter-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2202, U+2206, U+2208, U+220B, U+220F, U+2211, U+2212, U+2215, U+221A, U+221E, U+2222, U+222B-222D, U+2235, U+2236, U+2248, U+224C, U+2260, U+2264, U+2266, U+226A, U+226E, U+2272, U+2276, U+227A, U+227C, U+2282, U+2283, U+2286, U+2287, U+2295, U+2299, U+22A5, U+22C0, U+22C2, U+22C5, U+22C6, U+22D8, U+22D9, U+22EF, U+2304, U+2306, U+2310, U+2312, U+2318, U+231A, U+231C, U+2336, U+237C, U+2395, U+239B-23B6, U+23CE, U+23D0, U+23DC-23E1, U+2478-2492, U+249C-24B5, U+2500-259F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/inter-600-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+030C, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/inter-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2202, U+2206, U+2208, U+220B, U+220F, U+2211, U+2212, U+2215, U+221A, U+221E, U+2222, U+222B-222D, U+2235, U+2236, U+2248, U+224C, U+2260, U+2264, U+2266, U+226A, U+226E, U+2272, U+2276, U+227A, U+227C, U+2282, U+2283, U+2286, U+2287, U+2295, U+2299, U+22A5, U+22C0, U+22C2, U+22C5, U+22C6, U+22D8, U+22D9, U+22EF, U+2304, U+2306, U+2310, U+2312, U+2318, U+231A, U+231C, U+2336, U+237C, U+2395, U+239B-23B6, U+23CE, U+23D0, U+23DC-23E1, U+2478-2492, U+249C-24B5, U+2500-259F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/inter-700-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+030C, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/inter-800-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/inter-800-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2202, U+2206, U+2208, U+220B, U+220F, U+2211, U+2212, U+2215, U+221A, U+221E, U+2222, U+222B-222D, U+2235, U+2236, U+2248, U+224C, U+2260, U+2264, U+2266, U+226A, U+226E, U+2272, U+2276, U+227A, U+227C, U+2282, U+2283, U+2286, U+2287, U+2295, U+2299, U+22A5, U+22C0, U+22C2, U+22C5, U+22C6, U+22D8, U+22D9, U+22EF, U+2304, U+2306, U+2310, U+2312, U+2318, U+231A, U+231C, U+2336, U+237C, U+2395, U+239B-23B6, U+23CE, U+23D0, U+23DC-23E1, U+2478-2492, U+249C-24B5, U+2500-259F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/inter-800-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+030C, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* ===== icons.css ===== */
/* Icon sizing helper. BCA uses line icons at currentColor.
Icons render via assets/icons/Icon.jsx (). */
:root{
--icon-sm:16px;
--icon-md:24px;
--icon-lg:40px;
}
/* ===== spacing.css ===== */
/* BCA Partners — spacing, radius & layout tokens.
The site is built on a 1440px canvas with a 112px outer gutter and an 8px gap rhythm. */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:80px; /* section top padding */
--gutter:112px; /* desktop outer page margin */
--gutter-mobile:20px;
--content-max:1440px;
--radius:4px; /* cards, buttons, images — the single brand radius */
--radius-pill:154px; /* circular social/icon chips */
/* Button padding from source: 16px 24px */
--btn-pad-y:16px;
--btn-pad-x:24px;
--btn-gap:16px;
/* Touch target minimum (Apple HIG 44pt, Material 48dp). Used for
navbar links, buttons, social chips, form inputs, hamburger. */
--touch-min:44px;
}
/* ===== typography.css ===== */
/* BCA Partners — typography tokens. One family (Inter) across the whole product.
Sizes transcribed from the Figma file; large display sizes carry -0.025em tracking. */
:root{
--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
/* Weights */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */
/* Type scale — size / line-height.
Headings + UI = 1.2 (tight, dramatic).
Body copy (lead, body) = 1.5 (breathable, easy to read).
Small (nav, button, eyebrow) = 1.2 (compact UI). */
--fs-hero:50px; --lh-hero:1.1; /* homepage hero H1, 800 */
--fs-display:60px; --lh-display:1.1; /* page hero, 700 */
--fs-h1:48px; --lh-h1:1.2; /* section title, 700 */
--fs-h2:40px; --lh-h2:1.2; /* section title, 700 */
--fs-h3:30px; --lh-h3:1.2; /* CTA / sub-hero, 700 */
--fs-h4:24px; --lh-h4:1.2; /* card headline, 700 */
--fs-title:20px; --lh-title:1.2; /* small card headline, 500 */
--fs-lead:18px; --lh-lead:1.5; /* intro / lead paragraph */
--fs-body:16px; --lh-body:1.5; /* body + button label, 400/600 */
--fs-small:14px; --lh-small:1.2; /* nav item, footer, eyebrow */
/* UI sizing tokens (formerly magic numbers 15.008, 12.992, 16.992).
Rounded to clean px so they read sensibly in devtools. */
--fs-btn:16px; /* button label, nav link, news excerpt, form input, contact-band CTA */
--fs-meta:13px; /* news card cat/date, career tag, form label, footer copy */
--fs-detail-body:17px; /* single-page body (project/service/leader/research/news detail) */
--tracking-tight:-0.025em; /* applied to display/section headings */
}
/* ===== base.css ===== */
/* BCA Partners — base/reset layer.
Applies the Inter font and design-system colors globally so the body text
matches the Figma file. Loaded BEFORE site.css + sections.css.
Tokens are read from assets/css/tokens/*.css. */
/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
/* === Body / HTML — global font + color === */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
font-size: var(--fs-body, 16px);
line-height: var(--lh-body, 1.5); /* 1.5 for body copy; headings + small UI override to 1.2 */
font-weight: var(--fw-regular, 400);
color: var(--bca-ink-2, #374151);
background-color: var(--bca-surface, #ffffff);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* === Headings — use design-system ink + weights ===
Base: all headings default to semibold (600) + normal letter-spacing.
h1/h2/h3 override to bold (700) + tight letter-spacing for display
hierarchy. h4/h5/h6 keep the semibold default (no override needed). */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
color: var(--bca-ink, #111827);
font-family: var(--font-sans, "Inter", sans-serif);
font-weight: var(--fw-semibold, 600);
line-height: var(--lh-h1, 1.2);
letter-spacing: 0;
}
/* Display headings (h1/h2/h3) — bold + tight tracking for hierarchy */
h1 { font-size: var(--fs-h1, 48px); font-weight: var(--fw-bold, 700); letter-spacing: var(--tracking-tight, -0.025em); }
h2 { font-size: var(--fs-h2, 40px); font-weight: var(--fw-bold, 700); letter-spacing: var(--tracking-tight, -0.025em); }
h3 { font-size: var(--fs-h3, 30px); font-weight: var(--fw-bold, 700); letter-spacing: var(--tracking-tight, -0.025em); }
/* Smaller headings (h4/h5/h6) — inherit generic semibold (no override) */
h4 { font-size: var(--fs-h4, 24px); line-height: var(--lh-h4, 1.2); }
h5 { font-size: var(--fs-title, 20px); line-height: var(--lh-title, 1.2); }
h6 { font-size: var(--fs-body, 16px); line-height: var(--lh-body, 1.2); }
/* === Body copy ===
Spacing handled by sibling combinator: only add top margin when a previous
exists. The first paragraph has no top margin and the last has no bottom
margin by design — no :last-child cleanup needed. */
p {
margin: 0;
color: var(--bca-ink-2, #374151);
}
p + p {
margin-top: 1em;
}
/* === Links === */
a {
color: var(--bca-blue, #0079a6);
text-decoration: none;
transition: color var(--transition, 160ms ease);
}
a:hover, a:focus {
color: var(--bca-navy, #003f6f);
text-decoration: underline;
}
/* === Keyboard focus indicator ===
Standard :focus (above) changes the link color on BOTH mouse-click and
keyboard-tab. To keep mouse focus clean but still show a visible ring
for keyboard users, add a single global :focus-visible rule that paints
a high-contrast outline on every interactive element. The :focus rules
elsewhere handle hover state; this one is keyboard-only. */
:focus-visible {
outline: 2px solid var(--bca-blue, #0079a6);
outline-offset: 2px;
border-radius: var(--radius, 4px);
}
/* Buttons already have their own border-radius; tighten offset. */
.bca-btn:focus-visible {
outline-offset: 3px;
}
/* Inline text links on dark backgrounds — use a light outline. */
.bca-contact-band .bca-contact-band-cta:focus-visible,
.bca-site-footer a:focus-visible {
outline-color: var(--bca-white, #ffffff);
}
/* === Images === */
img, svg, video {
max-width: 100%;
height: auto;
display: block;
}
/* === Lists inside body copy === */
ul, ol {
margin: 0 0 1em 1.5em;
padding: 0;
}
li { margin: 0 0 0.25em; }
/* === Form basics === */
input, textarea, select, button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* === WP block fallback — align with design system === */
.entry-content > * { margin-block: 1em; }
.entry-content h2 { margin-top: 1.5em; margin-bottom: 0.5em; }
.entry-content h3 { margin-top: 1.25em; margin-bottom: 0.5em; }
.entry-content a { color: var(--bca-blue, #0079a6); }
.entry-content code {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
background: var(--bca-surface-section, #e9ecf2);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
.entry-content pre {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
background: var(--bca-surface-section, #e9ecf2);
padding: 16px;
border-radius: var(--radius, 4px);
overflow-x: auto;
}
.entry-content blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 3px solid var(--bca-navy, #003f6f);
color: var(--bca-ink-2, #374151);
font-style: italic;
}
/* === Content-area headings (smaller than display headings) ===
These apply to plain h2/h3 inside BCA content body wrappers —
they should look like article sub-heads, not the global page headings.
Note: h2 rules consolidated in 13-content.css to avoid conflict
(28px article body vs 40px section heading). This file owns h3/p/li
base styles only. */
.bca-wysiwyg h3,
.bca-news-body h3,
.bca-research-body h3,
.bca-service-detail-body h3,
.bca-leader-body h3,
.bca-project-detail-body h3,
.bca-vision-mission-body h3 {
margin: 24px 0 8px;
font-size: 20px;
color: var(--bca-ink, #111827);
font-weight: var(--fw-bold, 700);
letter-spacing: 0;
}
.bca-wysiwyg p,
.bca-news-body p,
.bca-research-body p,
.bca-service-detail-body p,
.bca-leader-body p,
.bca-project-detail-body p,
.bca-vision-mission-body p {
margin: 0;
}
.bca-wysiwyg p + p,
.bca-news-body p + p,
.bca-research-body p + p,
.bca-service-detail-body p + p,
.bca-leader-body p + p,
.bca-project-detail-body p + p,
.bca-vision-mission-body p + p {
margin-top: 1em;
}
.bca-wysiwyg li, .bca-news-body li, .bca-research-body li,
.bca-service-detail-body li, .bca-leader-body li,
.bca-project-detail-body li, .bca-vision-mission-body li {
margin: 0;
}
/* === Utility primitives — pattern from Every Layout / Open Props.
Compose with component classes for cleaner markup + less repetition. */
/* Stack: vertical rhythm with consistent gap. The most-used pattern in
this codebase. Override gap with --stack-gap inline or via a modifier. */
.bca-stack {
display: flex;
flex-direction: column;
gap: var(--stack-gap, 16px);
}
/* Cluster: horizontal flow that wraps. For tag lists, button groups,
meta info (eyebrow + date). */
.bca-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--cluster-gap, 8px);
align-items: center;
}
/* Cover: full-height container with content stuck to the bottom
(for cards with media on top + text below). */
.bca-cover {
display: flex;
flex-direction: column;
gap: var(--cover-gap, 16px);
justify-content: flex-end;
}
/* Box: padded rounded surface. Used for contact details, belief card,
highlight-small. */
.bca-box {
padding: var(--box-pad, 32px);
border-radius: var(--radius);
background: var(--bca-surface-section, #e9ecf2);
}
/* Visually-hidden but accessible (alias of .screen-reader-text). */
.bca-vh {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === Accessibility — hide screen-reader text / skip-link offscreen,
reveal on keyboard focus. Standard _s (Underscores) rule. === */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--bca-surface, #fff);
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: var(--bca-navy, #003f6f);
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* ===== site.css ===== */
/* BCA Partners — site layout (header, footer, common)
Sử dụng design system tokens từ assets/css/tokens/*.css
File này KHÔNG hardcode data — chỉ layout, dùng Theme Settings. */
.bca-site-header { background: var(--bca-white); box-shadow: var(--shadow-nav, 0 1px 4px rgba(0,0,0,0.15)); }
.bca-navbar { position: sticky; top: 0; z-index: 50; background: var(--bca-white); }
.bca-navbar-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); height: 80px; display: flex; align-items: center; gap: 24px; }
.bca-navbar-logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--touch-min, 44px); position: relative; z-index: 60; }
.bca-navbar-logo .bca-logo-img, .bca-navbar-logo .bca-logo-fallback { max-height: 50px; width: auto; }
.bca-logo-fallback { font-weight: var(--fw-bold, 700); font-size: 18px; color: var(--bca-navy); letter-spacing: -0.01em; }
.bca-navbar-nav { margin-left: auto; display: flex; justify-content: flex-end; }
.bca-navbar-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; align-items: center; }
.bca-navbar-menu li { position: relative; }
.bca-navbar-link { text-decoration: none; color: var(--bca-ink); font-weight: var(--fw-semibold, 600); font-size: var(--fs-btn, 15px); line-height: 1.2; padding: 8px 0; transition: color 160ms ease; min-height: var(--touch-min, 44px); display: inline-flex; align-items: center; }
.bca-navbar-link:hover, .bca-navbar-link:focus { color: var(--bca-navy); }
.bca-navbar-menu .current-menu-item > .bca-navbar-link,
.bca-navbar-menu .current-menu-ancestor > .bca-navbar-link { color: var(--bca-blue); }
.bca-navbar-cta { display: none; /* hidden on desktop — Contact us is a regular nav link per design */ }
/* ===== Footer =====
Token usage:
- bg: --bca-black (surface-footer)
- text tiers: --bca-text-on-dark-{bright,muted,faint,subtle}
- dividers: --bca-divider-on-dark
- spacing: --space-* + --gutter / --gutter-mobile
- All raw rgba() values are tokenized — no magic colors. */
/* Container + grid */
.bca-site-footer { background: var(--bca-navy); color: var(--bca-text-on-dark-bright, #fff); padding: 64px var(--gutter) 24px; }
.bca-footer-inner { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-7, 48px); }
.bca-footer-brand { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
/* Brand column (logo + description + socials) */
.bca-footer-logo { min-height: var(--touch-min, 44px); display: inline-flex; align-items: center; }
/* Compensate for transparent left padding in the uploaded white logo asset. */
.bca-footer-logo .bca-logo-img { max-height: 38px; width: auto; transform: translateX(-10px); }
.bca-footer-logo-text { color: var(--bca-text-on-dark-bright, #fff); font-size: 20px; font-weight: var(--fw-bold, 700); text-decoration: none; }
.bca-footer-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bca-text-on-dark-muted, rgba(255,255,255,0.7)); }
/* Contact details — one compact rhythm for heading, address, and lines. */
.bca-footer-contact { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.bca-footer-contact .bca-footer-heading,
.bca-footer-contact .bca-footer-address,
.bca-footer-contact .bca-footer-line { margin-bottom: 0; }
/* Column heading (COMPANY / SERVICES / GET IN TOUCH) */
.bca-footer-col h4.bca-footer-heading {
margin: 0 0 var(--space-4, 16px);
font-size: 14px;
font-weight: var(--fw-semibold, 600);
color: var(--bca-text-on-dark-bright, #fff);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Link list (used in COMPANY + SERVICES columns) */
.bca-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bca-footer-links a {
color: var(--bca-text-on-dark, rgba(255,255,255,0.85));
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: color 160ms ease;
}
.bca-footer-links a:hover,
.bca-footer-links a:focus { color: var(--bca-text-on-dark-bright, #fff); text-decoration: underline; }
/* Contact details (address + tel + email in the first column) */
.bca-footer-address { margin: 0 0 var(--space-3, 12px); font-size: 14px; line-height: 1.5; color: var(--bca-text-on-dark, rgba(255,255,255,0.85)); white-space: normal; }
.bca-footer-line { margin: 0 0 var(--space-2, 8px); font-size: 14px; line-height: 1.5; color: var(--bca-text-on-dark, rgba(255,255,255,0.85)); }
.bca-footer-line:last-child { margin-bottom: 0; }
.bca-footer-label { color: var(--bca-text-on-dark-faint, rgba(255,255,255,0.55)); margin-right: var(--space-2, 8px); }
.bca-footer-line a { color: var(--bca-text-on-dark-bright, #fff); text-decoration: none; transition: opacity 160ms ease; }
.bca-footer-line a:hover,
.bca-footer-line a:focus { text-decoration: underline; opacity: 0.85; }
/* Social chips */
.bca-footer-social-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
.bca-social-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-min, 44px);
height: var(--touch-min, 44px);
border-radius: var(--radius-pill);
background: var(--bca-text-on-dark-subtle, rgba(255,255,255,0.12));
color: var(--bca-text-on-dark-bright, #fff);
text-decoration: none;
font-size: 12px;
font-weight: var(--fw-bold, 700);
transition: background 160ms ease;
}
.bca-social-chip:hover,
.bca-social-chip:focus { background: var(--bca-blue); }
.bca-social-chip-icon {object-fit: contain; display: block; }
/* Bottom bar (copyright + border-top) */
.bca-footer-bottom {
max-width: var(--content-max);
margin: var(--space-7, 48px) auto 0;
padding-top: var(--space-5, 24px);
border-top: 1px solid var(--bca-divider-on-dark, rgba(255,255,255,0.1));
}
.bca-footer-copy { margin: 0; font-size: var(--fs-meta, 13px); color: var(--bca-text-on-dark-faint, rgba(255,255,255,0.55)); }
@media (max-width: 900px) {
.bca-site-footer { padding: 40px var(--gutter-mobile) 20px; }
.bca-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6, 32px); }
.bca-footer-bottom { margin-top: var(--space-5, 24px); padding-top: var(--space-4, 16px); }
}
@media (max-width: 480px) {
.bca-footer-inner { grid-template-columns: 1fr; }
}
/* Common page container */
.bca-section { padding: 80px var(--gutter); background: var(--bca-white); }
.bca-section-leader { padding: 70px 80px 100px}
.bca-section--muted { background: var(--bca-surface-muted); }
.bca-section--section { background: var(--bca-surface-section); }
.bca-section-inner { max-width: var(--content-max); margin: 0 auto; }
.bca-section-heading { margin: 0 0 16px; font-size: 40px; line-height: var(--lh-h2, 1.2); letter-spacing: -0.025em; font-weight: var(--fw-bold, 700); color: var(--bca-navy); }
.bca-section-heading--center { text-align: center; }
.bca-section-sub { margin: -32px 0 48px; font-size: var(--fs-lead, 18px); line-height: var(--lh-lead, 28px); color: var(--bca-ink-2, #374151); max-width: 764px; }
.bca-section-sub--center { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 900px) {
.bca-section { padding: 40px var(--gutter-mobile); }
.bca-section-heading { font-size: 16px; margin-bottom: 24px; }
.bca-section-sub { font-size: 16px; line-height: 24px; margin-bottom: 24px; }
}
/* ===== Mobile menu toggle ===== */
/* Right-side actions group — holds CTA + hamburger on desktop, just hamburger on mobile */
.bca-navbar-actions,
.hdr-actions {
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto; /* push to the right */
position: relative;
z-index: 60; /* above the mobile overlay (z 49) so X stays tappable */
}
.bca-navbar-toggle,
.hdr-burger {
display: inline-flex; /* visible on desktop too (will hide via media query if needed) */
width: var(--touch-min, 44px);
height: var(--touch-min, 44px);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
align-items: center;
justify-content: center;
color: var(--bca-navy, #003f6f);
border-radius: var(--radius, 4px);
transition: background var(--transition, 160ms ease);
flex-shrink: 0;
}
.bca-navbar-toggle:hover,
.bca-navbar-toggle:focus,
.hdr-burger:hover,
.hdr-burger:focus {
background: var(--bca-surface-section, #e9ecf2);
}
.bca-navbar-toggle-icon,
.hdr-burger-icon {
display: inline-block;
width: 22px;
height: 16px;
position: relative;
}
.bca-navbar-toggle-icon span,
.hdr-burger-icon span {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 200ms ease, top 200ms ease, opacity 200ms ease;
}
.bca-navbar-toggle-icon span:nth-child(1),
.hdr-burger-icon span:nth-child(1) { top: 0; }
.bca-navbar-toggle-icon span:nth-child(2),
.hdr-burger-icon span:nth-child(2) { top: 7px; }
.bca-navbar-toggle-icon span:nth-child(3),
.hdr-burger-icon span:nth-child(3) { top: 14px; }
/* Hamburger → X when menu open */
.bca-navbar-toggle[aria-expanded="true"] .bca-navbar-toggle-icon span:nth-child(1),
.hdr-burger[aria-expanded="true"] .hdr-burger-icon span:nth-child(1) {
top: 7px;
transform: rotate(45deg);
}
.bca-navbar-toggle[aria-expanded="true"] .bca-navbar-toggle-icon span:nth-child(2),
.hdr-burger[aria-expanded="true"] .hdr-burger-icon span:nth-child(2) {
opacity: 0;
}
.bca-navbar-toggle[aria-expanded="true"] .bca-navbar-toggle-icon span:nth-child(3),
.hdr-burger[aria-expanded="true"] .hdr-burger-icon span:nth-child(3) {
top: 7px;
transform: rotate(-45deg);
}
/* Desktop: hide hamburger + actions wrapper — design shows only nav links on ≥901px */
@media (min-width: 901px) {
.bca-navbar-toggle,
.hdr-burger { display: none; }
.bca-navbar-actions,
.hdr-actions { display: none; }
}
/* === Mobile (≤900px) — hamburger visible, menu is a full-screen overlay === */
@media (max-width: 900px) {
.bca-navbar-cta { display: none; } /* hide desktop CTA on mobile */
.bca-navbar-actions { gap: 8px; }
/* Full-screen overlay — covers the entire viewport, sits just below the
navbar (z-index 50) so the X (close) button in the navbar stays visible
and tappable. */
.bca-navbar-nav {
position: fixed;
inset: 0;
background: var(--bca-white, #ffffff);
z-index: 49;
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 240ms ease, transform 280ms ease, visibility 0s linear 240ms;
overflow-y: auto;
padding: calc(64px + 24px) var(--gutter-mobile, 20px) 32px;
}
.bca-navbar-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 240ms ease, transform 280ms ease, visibility 0s linear 0s;
}
.bca-navbar-menu {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.bca-navbar-menu li {
width: 100%;
}
.bca-navbar-menu .bca-navbar-link,
.bca-navbar-menu a {
display: block;
padding: 18px 0;
font-size: 20px;
min-height: 56px;
color: var(--bca-ink, #111827);
}
/* Divider between items — sibling combinator adds a border only when a
previous
exists, so the first and last item are clean by design. */
.bca-navbar-menu li + li .bca-navbar-link,
.bca-navbar-menu li + li a {
border-top: 1px solid var(--bca-border, #e0e1e5);
}
/* Body scroll lock when menu is open */
body.bca-menu-open {
overflow: hidden;
}
}
/* === Small phone (≤480px) — tighten nav === */
@media (max-width: 480px) {
.bca-navbar-inner { padding: 0 12px; }
.bca-navbar-logo .bca-logo-img, .bca-navbar-logo .bca-logo-fallback { max-height: 32px; }
.bca-navbar-nav { padding-top: calc(56px + 24px); }
}
/* ===== sections/01-hero.css ===== */
/* BCA Partners — 01-hero.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Hero ===== */
.bca-hero { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: center; color: var(--bca-white, #ffffff); }
.bca-hero-bg { position: absolute; inset: 0; }
.bca-hero-bg--gradient { background: linear-gradient(135deg, #001a2e 0%, #003f6f 50%, #001a2e 100%); }
.bca-hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.bca-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,26,46,0.85) 0%, rgba(0,26,46,0.5) 55%, rgba(0,26,46,0.1) 100%); }
.bca-hero--home .bca-hero-inner { padding: 80px var(--gutter); }
.bca-hero--page { min-height: 400px; }
/* inner keeps full content-max + gutter (left-aligned to page margin like
prototype .pad); symmetric padding keeps page-hero copy vertically centered. */
.bca-hero--page .bca-hero-inner { padding: 80px var(--gutter); }
.bca-hero--page .bca-hero-inner > * { max-width: 720px; }
/* detail hero heading smaller than home (prototype: 44px/52px bold) */
.bca-hero--page .bca-hero-heading { font-size: 44px; line-height: 1.2; font-weight: var(--fw-bold, 700); }
.bca-hero--navy .bca-hero-bg,
.bca-hero--blue .bca-hero-bg,
.bca-hero--gradient .bca-hero-bg { display: block; }
.bca-hero--navy { background: var(--bca-navy); color: var(--bca-white); }
/* gradient tone: dark gradient bg + white text (fallback when no image) */
.bca-hero--gradient { background: var(--bca-navy); color: var(--bca-white); }
.bca-hero--gradient .bca-hero-bg--gradient { display: block; }
.bca-hero--blue { background: var(--bca-blue); color: var(--bca-white); }
/* contact hero heading larger (prototype 48/56) */
.bca-hero--blue .bca-hero-heading { font-size: 48px; line-height: 1.2 }
.bca-hero-inner { position: relative; z-index: 1; max-width: var(--content-max); margin: 0 auto; width: 100%; }
.bca-hero-heading { margin: 0; font-size: var(--fs-hero, 50px); line-height: 1.2; font-weight: var(--fw-extrabold, 800); letter-spacing: -0.025em; color: inherit; }
.bca-hero-sub { margin: 16px 0 0; font-size: var(--fs-lead, 18px); line-height: 1.5; font-weight: 400; max-width: 740px; color: var(--bca-white, #ffffff); }
.bca-hero-cta { margin-top: 24px; }
/* === Mobile hero === */
@media (max-width: 900px) {
.bca-hero { min-height: 240px; }
.bca-hero-heading { font-size: 32px; line-height: 1.2 }
.bca-hero-sub { font-size: var(--fs-btn, 15px); line-height: 1.5 }
.bca-hero--home .bca-hero-inner { padding: 56px var(--gutter-mobile, 20px); }
.bca-hero--page { min-height: 240px; }
.bca-hero--page .bca-hero-inner { padding: 40px var(--gutter-mobile, 20px); }
.bca-hero-cta { margin-top: 16px; }
}
@media (max-width: 480px) {
.bca-hero--home .bca-hero-inner { padding: 40px var(--gutter-mobile, 20px); }
.bca-hero-heading { font-size: 28px; }
}
/* ===== sections/02-buttons.css ===== */
/* BCA Partners — 02-buttons.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Buttons ===== */
.bca-btn { display: inline-flex; align-items: center; gap: 10px; padding: var(--btn-pad-y, 16px) var(--btn-pad-x, 24px); font-weight: var(--fw-semibold, 600); font-size: var(--fs-btn, 15px); line-height: 1.2; text-decoration: none; border-radius: var(--radius); border: 1px solid transparent; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; cursor: pointer; font-family: inherit; min-height: var(--touch-min, 44px); }
.bca-btn--filled { background: var(--bca-navy); color: var(--bca-white); }
.bca-btn--filled:hover, .bca-btn--filled:focus { background: var(--bca-blue); }
.bca-btn--filled.bca-btn--light { background: var(--bca-white); color: var(--bca-navy); }
.bca-btn--filled.bca-btn--light:hover, .bca-btn--filled.bca-btn--light:focus { background: var(--bca-surface-section); }
.bca-btn--line { background: transparent; color: var(--bca-navy); border-width: 2px; border-color: var(--bca-navy); }
.bca-btn--line:hover, .bca-btn--line:focus { background: var(--bca-navy); color: var(--bca-white); }
.bca-btn--ghost { background: transparent; color: var(--bca-navy); padding: 12px 0; min-height: var(--touch-min, 44px); }
.bca-btn--ghost:hover, .bca-btn--ghost:focus { color: var(--bca-blue); }
.bca-btn-arrow { font-size: 1.1em; line-height: 1 }
/* ===== sections/03-contact-band.css ===== */
/* BCA Partners — 03-contact-band.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Scope all overrides under .bca-contact-band so they naturally beat
base.css's generic h1-h6 (color: ink) and a (color: blue) rules
without needing !important. */
/* ===== Contact Band ===== */
.bca-contact-band { position: relative; overflow: hidden; }
.bca-contact-band-bg {
position: absolute; inset: 0;
background-color: var(--bca-surface-section, #e9ecf2);
/* Subtle light wave pattern (matches design HTML aesthetic) */
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.bca-contact-band-img { width: 100%; height: 100%; object-fit: cover; }
.bca-contact-band-scrim { position: absolute; inset: 0; background: transparent; }
/* flex row: text left, CTA right (matches design HTML — light bg + navy text) */
.bca-contact-band-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 53px var(--gutter); min-height: 162px; box-sizing: border-box; max-width: var(--content-max); margin: 0 auto; color: var(--bca-ink, #111827); }
.bca-contact-band-text { flex: 1 1 auto; min-width: 0; }
.bca-contact-band .bca-contact-band-heading { margin: 0; font-size: 30px; line-height: 1.2; font-weight: var(--fw-bold, 700); letter-spacing: -0.025em; color: var(--bca-navy, #003f6f); }
.bca-contact-band .bca-contact-band-sub { margin: 8px 0 0; font-size: 18px; line-height: 1.5; max-width: 600px; color: var(--bca-ink-2, #374151); }
.bca-contact-band .bca-contact-band-cta {
flex: 0 0 auto;
background: var(--bca-white, #ffffff);
color: var(--bca-navy, #003f6f);
border: 0;
padding: 14px 22px;
font-weight: var(--fw-semibold, 600);
font-size: var(--fs-btn, 15px);
text-decoration: none;
}
.bca-contact-band .bca-contact-band-cta:hover,
.bca-contact-band .bca-contact-band-cta:focus {
background: var(--bca-surface-section, #e9ecf2);
color: var(--bca-navy, #003f6f);
}
/* Mobile-friendly pass — stops desktop padding overflowing ≤900 */
@media (max-width: 900px) {
.bca-contact-band-inner { padding: 40px var(--gutter-mobile); min-height: 0; gap: 20px; }
.bca-contact-band .bca-contact-band-heading { font-size: 24px; line-height: 1.2; }
.bca-contact-band-inner { text-align: center; }
.bca-contact-band-inner > .bca-btn { width: 100%; }
}
/* ===== sections/04-common.css ===== */
/* BCA Partners — 04-common.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Section heading + sub ===== */
.bca-section-heading { font-size: 48px; line-height: 1.2 }
.bca-section-heading--sm { font-size: 32px; }
.bca-section-sub--center { text-align: center; }
.bca-teaser-head .bca-section-heading { margin-bottom: 23px; }
.bca-teaser-head .bca-section-sub { margin-top: var(--space-4, 16px); }
.bca-teaser-foot { margin-top: 48px; }
.bca-teaser-foot--center { text-align: center; }
/* ===== sections/05-about.css ===== */
/* BCA Partners — 05-about.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Strengths ===== */
.bca-strengths-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.bca-strengths-list { display: flex; flex-direction: column; gap: 36px; }
.bca-strengths-side { width: 100%; }
.bca-strengths-side-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.bca-strength-item { display: block; }
.bca-strength-text { display: flex; width: 100%; flex-direction: column; gap: 8px; align-items: stretch; }
.bca-strength-title { margin: 0; font-size: 24px; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-strength-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
@media (max-width: 900px) {
.bca-strengths-grid { grid-template-columns: 1fr; }
.bca-strengths-side-img { height: auto; aspect-ratio: 3 / 2; }
}
/* ===== Belief ===== */
.bca-belief-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 360px; }
.bca-belief-bg { position: absolute; inset: 0; }
.bca-belief-img { width: 100%; height: 100%; object-fit: cover; }
.bca-belief-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,63,111,0.95) 0%, rgba(0,63,111,0.78) 48%, rgba(0,63,111,0.2) 100%); }
.bca-belief-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 360px; padding: 56px 64px; color: var(--bca-white); max-width: 800px; }
.bca-belief-heading { margin: 0 0 24px; font-size: 40px; line-height: 1.15; font-weight: var(--fw-bold, 700); letter-spacing: -0.025em; color: var(--bca-white); }
.bca-belief-quote { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 0; }
.bca-belief-mark { display: block; font-size: 48px; line-height: 0.75; font-weight: var(--fw-bold, 700); color: var(--bca-white); opacity: 0.72; transform: translateY(4px); }
.bca-belief-quote p { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.5; color: var(--bca-white); }
@media (max-width: 900px) {
.bca-belief-content { min-height: 360px; padding: 40px 32px; }
.bca-belief-heading { font-size: 28px; }
.bca-belief-quote p { font-size: 16px; }
}
/* ===== V/M/V ===== */
.bca-vmcv-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: var(--space-5, 24px); }
.bca-vmcv-head .bca-section-heading { margin-bottom: 0; }
.bca-vmcv-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.bca-vmcv-feature-row,
.bca-vmcv-feature-row--reverse { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.bca-vmcv-feature-content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: none; }
.bca-vmcv-feature-media { order: -1; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bca-surface-section, #f3f4f6); }
.bca-vmcv-feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bca-vmcv-values { margin-top: var(--space-6, 32px); }
.bca-vmcv-values > .bca-vmcv-title { margin-bottom: var(--space-5, 24px); }
.bca-vmcv-values-heading { margin: 0 0 32px; font-size: var(--fs-h3, 30px); line-height: 1.2; font-weight: var(--fw-bold, 700); letter-spacing: var(--tracking-tight, -0.025em); color: var(--bca-navy); }
.bca-vmcv-values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.bca-vmcv-card { display: flex; flex-direction: column; gap: 16px; }
.bca-vmcv-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.bca-vmcv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-vmcv-title { margin: 0; font-size: 24px; font-weight: var(--fw-bold, 700); color: var(--bca-navy); }
.bca-vmcv-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
.bca-vmcv-card--value { gap: var(--space-2, 8px); }
.bca-vmcv-card--value .bca-vmcv-title { font-size: 20px; line-height: 1.2; color: #000; }
@media (max-width: 900px) {
.bca-vmcv-feature-list { grid-template-columns: 1fr; gap: 32px; }
.bca-vmcv-values-grid { grid-template-columns: 1fr; }
.bca-vmcv-values { margin-top: var(--space-6, 32px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
.bca-vmcv-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== sections/06-services.css ===== */
/* BCA Partners — 06-services.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Services grid + card ===== */
.bca-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.bca-service-card { display: flex; flex-direction: column; gap: 24px; text-decoration: none; color: inherit; }
.bca-service-card:hover, .bca-service-card:focus { text-decoration: none; color: inherit; }
.bca-service-card-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bca-surface-section); }
.bca-service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease; }
.bca-service-card:hover .bca-service-card-img img { transform: scale(1.03); }
.bca-service-card-body { display: flex; flex-direction: column; gap: 12px; }
.bca-service-card-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-service-card-items { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.bca-service-card-excerpt { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
.bca-service-card-item::marker { color: var(--bca-blue); }
@media (max-width: 900px) {
.bca-services-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ===== sections/07-projects.css ===== */
/* BCA Partners — 07-projects.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Project card (flip row) ===== */
.bca-projects-list { display: flex; flex-direction: column; gap: 64px; }
.bca-project-card { display: flex; gap: 64px; align-items: stretch; }
.bca-project-card--flip { flex-direction: row-reverse; }
.bca-project-card-media { flex: 0 0 560px; max-width: 480px; border-radius: var(--radius); overflow: hidden; }
.bca-project-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-project-card-text { flex: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bca-eyebrow { font-size: 16px; line-height: 1.2; font-weight: var(--fw-semibold, 600); color: var(--bca-navy); letter-spacing: 0.02em; }
/* on dark hero backgrounds: white text, was inline style="color:#fff;opacity:.9" */
.bca-eyebrow--on-dark, .bca-hero-sub--on-dark { color: #fff; opacity: 0.9; }
.bca-project-card-title a { color: inherit; text-decoration: none; }
.bca-project-card-title a:hover { color: var(--bca-navy); }
.bca-project-card-client { font-size: 16px; font-weight: var(--fw-semibold, 600); color: var(--bca-black); }
.bca-project-card-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
@media (max-width: 900px) {
.bca-project-card, .bca-project-card--flip { flex-direction: column; }
.bca-project-card-media { flex: 1 1 auto; max-width: 100%; }
.bca-projects-list { gap: 40px; }
.bca-project-card-title { font-size: 24px; }
}
/* Projects archive follows the Research archive card rhythm.
Keep this scoped so the home-page project teaser can retain its own layout. */
.archive-project .bca-project-card { gap: 64px; }
.archive-project .bca-project-card-media { flex: 0 0 624px; max-width: 624px; }
.archive-project .bca-project-card-text { gap: 16px; }
.archive-project .bca-project-card-title {
margin: 0;
font-size: 32px;
line-height: 1.2;
font-weight: var(--fw-bold, 700);
color: var(--bca-ink);
}
.archive-project .bca-project-card-body { font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) {
.archive-project .bca-project-card,
.archive-project .bca-project-card--flip { flex-direction: column; }
.archive-project .bca-project-card-media { flex: 1 1 auto; max-width: 100%; }
.archive-project .bca-projects-list { gap: 64px; }
.archive-project .bca-project-card-title { font-size: 32px; }
}
/* ===== Project detail ===== */
.bca-project-detail-text { margin: 0 0 32px; font-size: var(--fs-body, 16px); line-height: var(--lh-body, 1.5); color: var(--bca-ink-2, #374151); white-space: pre-line; }
.bca-project-detail-content { margin-top: 32px; font-size: var(--fs-body, 16px); line-height: var(--lh-body, 1.5); color: var(--bca-ink-2, #374151); }
/* ===== sections/08-leaders.css ===== */
/* BCA Partners — 08-leaders.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Leader card ===== */
.bca-leaders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* home "Meet our team" shows 4 across (prototype Homepage.jsx) */
#home-leadership .bca-leaders-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { #home-leadership .bca-leaders-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { #home-leadership .bca-leaders-grid { grid-template-columns: 1fr; } }
.bca-leader-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
/* prototype LeaderCard: square-ish photo, no radius, larger name/role */
.bca-leader-card-img { overflow: hidden; aspect-ratio: 3 / 4; background: var(--bca-surface-section); }
.bca-leader-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 200ms ease; }
.bca-leader-card:hover .bca-leader-card-img img { transform: scale(1.03); }
.bca-leader-card-name { margin: 0; font-size: 24px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-leader-card-role { margin: 0; font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold, 700); color: var(--bca-ink-2, #374151); }
@media (max-width: 900px) {
.bca-leaders-grid { grid-template-columns: 1fr; }
}
/* ===== Leadership archive ===== */
.archive-leader .bca-leader-group { margin-bottom: 88px; }
.archive-leader .bca-leader-group:last-child { margin-bottom: 0; }
.archive-leader .bca-leaders-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.archive-leader .bca-leader-card { gap: 18px; }
.archive-leader .bca-leader-card-img { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.archive-leader .bca-leader-card-body { display: flex; flex-direction: column; gap: 6px; }
.archive-leader .bca-leader-card-name { font-size: 22px; letter-spacing: -0.02em; }
.archive-leader .bca-leader-card-role { font-weight: var(--fw-semibold, 600); }
@media (max-width: 900px) {
.archive-leader .bca-leaders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; }
.archive-leader .bca-leader-group { margin-bottom: 64px; }
}
@media (max-width: 480px) {
.archive-leader .bca-leaders-grid { grid-template-columns: 1fr; row-gap: 32px; }
}
/* ===== Leader single ===== */
.bca-single-leader-hero { background: var(--bca-white, #fff); padding-top: 32px; padding-bottom: 32px; }
.bca-leader-hero-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; padding: 0; }
.bca-leader-hero-grid--no-image { grid-template-columns: minmax(0, 1fr); }
.bca-leader-hero-text { min-width: 0; padding-top: 4px; }
.bca-leader-hero-name { margin: 0; font-size: 32px; line-height: 1.2; font-weight: var(--fw-medium, 500); letter-spacing: -0.02em; color: var(--bca-navy); }
.bca-leader-hero-role { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: #666; }
.bca-leader-hero-img { width: 320px; height: 320px; overflow: hidden; background: var(--bca-surface-section); }
.bca-leader-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.bca-single-leader-hero .bca-leader-hero-bio { width: 100%; max-width: none; margin: 24px 0 0; color: #666; font-size: 16px; line-height: 1.55; }
.bca-leader-hero-bio p { color: #666; }
.bca-leader-hero-bio > p:not(.bca-leader-credentials) { position: relative; padding-left: 20px; }
.bca-leader-hero-bio > p:not(.bca-leader-credentials)::before { content: '\2022'; position: absolute; left: 2px; top: 0; color: #666; }
.bca-leader-hero-bio ul, .bca-leader-hero-bio ol { color: #666; }
.bca-leader-credentials { margin: 0 0 16px; font-size: 16px; line-height: 1.55; font-weight: var(--fw-regular, 400); color: #666; }
@media (max-width: 900px) {
.bca-single-leader-hero { padding-top: 24px; padding-bottom: 32px; }
.bca-leader-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bca-leader-hero-img { width: min(100%, 360px); height: auto; aspect-ratio: 1; }
.bca-leader-hero-name { font-size: 30px; }
.bca-leader-hero-bio { margin-top: 20px; }
}
.single-leader .bca-leader-related .bca-leaders-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.single-leader .bca-leader-related .bca-leader-card { gap: 14px; }
.single-leader .bca-leader-related .bca-leader-card-name { font-size: 20px; }
@media (max-width: 900px) {
.single-leader .bca-leader-related .bca-leaders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
}
@media (max-width: 480px) {
.single-leader .bca-leader-related .bca-leaders-grid { grid-template-columns: 1fr; }
}
/* ===== Leader group on archive ===== */
.bca-leader-group { margin-bottom: 64px; }
/* ===== Leader lightbox ===== */
.bca-leader-card { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.bca-leader-card:hover, .bca-leader-card:focus { color: inherit; text-decoration: none; }
.bca-leader-modal { position: fixed; inset: 0; z-index: var(--z-modal, 60); display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; }
.bca-leader-modal[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }
.bca-leader-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.62); backdrop-filter: blur(4px); }
.bca-leader-modal-dialog { position: relative; z-index: 1; width: min(100%, 1240px); max-height: min(820px, calc(100vh - 48px)); overflow-y: auto; padding: 32px; border: 1px solid rgba(0, 63, 111, 0.08); border-radius: 6px; background: var(--bca-white, #fff); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12); }
.bca-leader-modal[aria-hidden="false"] .bca-leader-modal-dialog { animation: bca-leader-modal-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.bca-leader-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--bca-ink-2, #374151); cursor: pointer; transition: color 140ms ease, background-color 140ms ease; }
.bca-leader-modal-close:hover { background: var(--bca-surface-section, #e9ecf2); color: var(--bca-navy, #003f6f); }
.bca-leader-modal-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
.bca-leader-modal-grid.is-no-image { grid-template-columns: minmax(0, 1fr); }
.bca-leader-modal-media { width: 320px; aspect-ratio: 1; overflow: hidden; background: var(--bca-surface-section, #e9ecf2); }
.bca-leader-modal-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.bca-leader-modal-content { min-width: 0; padding: 4px 24px 0 0; }
.bca-leader-modal-name { margin: 0; color: var(--bca-navy, #003f6f); font-size: 32px; line-height: 1.2; font-weight: var(--fw-medium, 500); letter-spacing: -0.02em; }
.bca-leader-modal-role { margin: 6px 0 0; color: #666; font-size: 16px; line-height: 1.5; }
.bca-leader-modal-credentials { margin: 24px 0 16px; color: #666; font-size: 16px; line-height: 1.55; }
.bca-leader-modal-bio { color: #666; font-size: 16px; line-height: 1.55; }
.bca-leader-modal-bio p { color: #666; }
.bca-leader-modal-bio > p { position: relative; padding-left: 20px; }
.bca-leader-modal-bio > p::before { content: '\2022'; position: absolute; top: 0; left: 2px; color: #666; }
.bca-leader-modal-bio ul, .bca-leader-modal-bio ol { color: #666; }
.bca-leader-modal [hidden] { display: none !important; }
@keyframes bca-leader-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
body.bca-leader-modal-open { overflow: hidden; }
@media (max-width: 900px) { .bca-leader-modal { padding: 16px; } .bca-leader-modal-dialog { max-height: calc(100vh - 32px); padding: 24px; } .bca-leader-modal-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .bca-leader-modal-media { width: min(100%, 280px); margin: 0 auto; } .bca-leader-modal-content { padding: 0; } .bca-leader-modal-name { font-size: 28px; } }
@media (max-width: 480px) { .bca-leader-modal-dialog { padding: 20px; } .bca-leader-modal-media { width: min(100%, 220px); } .bca-leader-modal-name { font-size: 25px; padding-right: 24px; } }
@media (prefers-reduced-motion: reduce) { .bca-leader-modal, .bca-leader-modal-close { transition: none; } .bca-leader-modal[aria-hidden="false"] .bca-leader-modal-dialog { animation: none; } }
/* ===== sections/09-news.css ===== */
/* BCA Partners — 09-news.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== News card ===== */
.bca-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.bca-news-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.bca-news-card-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bca-surface-section); }
.bca-news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease; }
.bca-news-card:hover .bca-news-card-img img { transform: scale(1.03); }
.bca-news-card-meta { display: flex; gap: 12px; align-items: center; }
.bca-news-card-cat { font-size: var(--fs-meta, 13px); font-weight: var(--fw-semibold, 600); color: var(--bca-navy); letter-spacing: 0.03em; }
.bca-news-card-date { font-size: var(--fs-meta, 13px); color: var(--bca-muted); }
.bca-news-card-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-news-card-excerpt { margin: 0; font-size: var(--fs-btn, 15px); line-height: 1.5; color: var(--bca-ink-2, #374151); }
@media (max-width: 900px) {
.bca-news-grid { grid-template-columns: 1fr; }
}
/* ===== sections/10-research.css ===== */
/* BCA Partners — 10-research.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Research card (flip row) ===== */
.bca-research-list { display: flex; flex-direction: column; gap: 64px; }
.bca-research-card { display: flex; gap: 64px; align-items: stretch; }
.bca-research-card--flip { flex-direction: row-reverse; }
.bca-research-card-media { flex: 0 0 624px; max-width: 624px; border-radius: var(--radius); overflow: hidden; }
.bca-research-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-research-card-text { flex: 1; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.bca-research-card-title { margin: 0; font-size: 32px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-research-card-title a { color: inherit; text-decoration: none; }
.bca-research-card-excerpt { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
@media (max-width: 900px) {
.bca-research-card, .bca-research-card--flip { flex-direction: column; }
.bca-research-card-media { flex: 1 1 auto; max-width: 100%; }
}
/* ===== sections/11-career.css ===== */
/* BCA Partners — 11-career.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Career row ===== */
.bca-career-list { display: flex; flex-direction: column; border-top: 1px solid var(--bca-border); }
.bca-career-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--bca-border); }
.bca-career-row-text { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.bca-career-row-title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-career-row-title a { color: inherit; text-decoration: none; }
.bca-career-row-title a:hover { color: var(--bca-navy); }
.bca-career-row-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.bca-career-tag { font-size: var(--fs-meta, 13px); font-weight: var(--fw-semibold, 600); color: var(--bca-navy); background: var(--bca-surface-section); border-radius: var(--radius); padding: 4px 10px; }
.bca-career-row-desc { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
.bca-career-cta-band h3 { margin: 0 0 4px; font-size: 20px; font-weight: var(--fw-bold, 700); color: var(--bca-navy); }
/* ACF-managed career page — editorial content flow, no job-card dependency */
.bca-career-page-inner { max-width: 920px; }
.bca-career-notice { margin: 0 0 40px; padding: 16px 20px; border-left: 3px solid var(--bca-navy); border-radius: var(--radius); background: var(--bca-surface-section, #f3f4f6); color: var(--bca-ink-2, #374151); font-size: 16px; line-height: 1.5; }
.bca-career-intro { max-width: 800px; margin: 0 auto 56px; font-size: var(--fs-lead, 18px); line-height: 1.55; }
.bca-career-intro.bca-wysiwyg { max-width: 100%; margin: 0 0 40px; }
.bca-career-intro p:first-child { font-weight: var(--fw-medium, 500); color: var(--bca-ink); }
.bca-career-positions { display: flex; flex-direction: column; border-top: 1px solid var(--bca-border); }
.bca-career-position { padding: 0; border-bottom: 1px solid var(--bca-border); }
.bca-career-position-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.bca-career-position-summary::-webkit-details-marker { display: none; }
.bca-career-position-summary:focus-visible { outline: 2px solid var(--bca-blue); outline-offset: 4px; }
.bca-career-position-title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-navy); }
.bca-career-position-toggle { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--bca-border); border-radius: 50%; color: var(--bca-navy); }
.bca-career-position-toggle::before { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; line-height: 1; font-weight: var(--fw-medium, 500); }
.bca-career-position[open] .bca-career-position-toggle::before { content: '−'; }
.bca-career-position-details { padding: 0 0 40px; max-width: 800px; }
.bca-career-position-overview { margin: 0; font-size: 17px; }
.bca-career-page{padding: 50px;}
/* Career overview copy should align with the position title instead of
inheriting the article body's centered 820px reading rail. */
.bca-career-position-overview.bca-wysiwyg { max-width: 100%; margin: 0; }
.bca-career-position-overview + .bca-career-position-block { margin-top: 32px; }
.bca-career-position-block { max-width: 800px; margin-top: 32px; }
.bca-career-position-block h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.2; color: var(--bca-navy); }
.bca-career-application { margin-top: 56px; padding: 40px; border-radius: var(--radius); background: var(--bca-surface-section); }
.bca-career-application-title { margin: 0 0 20px; font-size: 30px; line-height: 1.2; color: var(--bca-navy); }
.bca-career-application-email { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-weight: var(--fw-semibold, 600); }
.bca-career-application-email a { color: var(--bca-blue); text-decoration: underline; }
@media (max-width: 900px) {
.bca-career-row { grid-template-columns: 1fr; gap: 16px; }
.bca-career-position-summary { gap: 16px; padding: 20px 0; }
.bca-career-position-title { font-size: 22px; }
.bca-career-position-details { padding-bottom: 32px; }
.bca-career-application { padding: 24px; }
}
/* ===== sections/12-contact-form.css ===== */
/* BCA Partners — 12-contact-form.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Contact form ===== */
.bca-contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; }
.bca-contact-form-col > .bca-section-heading { margin-bottom: var(--space-6, 32px); }
.bca-contact-intro { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
.bca-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bca-form-row + .bca-form-row { margin-top: var(--space-4, 16px); }
.bca-field { display: flex; flex-direction: column; gap: 6px; }
.bca-form > .bca-field { margin-top: var(--space-4, 16px); }
.bca-field-label { font-size: var(--fs-meta, 13px); font-weight: var(--fw-semibold, 600); color: var(--bca-ink-2, #374151); }
.bca-field-label em { color: var(--bca-blue); font-style: normal; }
.bca-field input, .bca-field textarea { font-family: inherit; font-size: var(--fs-btn, 15px); padding: 11px 14px; border: 1px solid var(--bca-border); border-radius: var(--radius); background: var(--bca-white); outline: none; box-sizing: border-box; width: 100%; color: var(--bca-ink); }
.bca-field input:focus, .bca-field textarea:focus { border-color: var(--bca-blue); }
.bca-form-actions { margin-top: 4px; }
.bca-form .wpcf7-submit {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--touch-min, 44px);
margin-top: var(--space-3, 12px);
padding: var(--btn-pad-y, 16px) var(--btn-pad-x, 24px);
border: 1px solid transparent;
border-radius: var(--radius);
background: var(--bca-navy);
color: var(--bca-white);
font: inherit;
font-size: var(--fs-btn, 16px);
font-weight: var(--fw-semibold, 600);
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.bca-form .wpcf7-submit:hover,
.bca-form .wpcf7-submit:focus { background: var(--bca-blue); color: var(--bca-white); }
.bca-form .wpcf7-submit:focus-visible { outline: 2px solid var(--bca-blue); outline-offset: 3px; }
.bca-form .wpcf7-submit:disabled { cursor: wait; opacity: 0.65; }
.bca-form .wpcf7-spinner { margin: var(--space-3, 12px) 0 0 var(--space-2, 8px); vertical-align: middle; }
.bca-contact-success { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: var(--bca-surface-section); font-weight: var(--fw-semibold, 600); color: var(--bca-navy); }
.bca-contact-details { display: flex; flex-direction: column; gap: var(--space-3, 12px); padding: 32px; border-radius: var(--radius); background: var(--bca-surface-section); }
.bca-contact-details-heading { margin: 0; font-size: 20px; font-weight: var(--fw-bold, 700); color: var(--bca-navy); margin-bottom: 0.5rem; }
.bca-contact-line { display: flex; flex-direction: column; gap: 4px; margin-top: 0; }
.bca-contact-line-label { font-size: 14px; font-weight: var(--fw-bold, 700); color: var(--bca-ink); }
.bca-contact-line-value { font-size: 16px; line-height: 1.2; color: var(--bca-ink-2, #374151); white-space: pre-line; }
a.bca-contact-line-value { color: var(--bca-blue); text-decoration: none; }
a.bca-contact-line-value:hover { text-decoration: underline; }
/* Google Maps embed */
.bca-contact-map-frame { overflow: hidden; border-radius: var(--radius); background: var(--bca-surface-section); }
.bca-contact-map-frame iframe { display: block; width: 100%; min-height: 420px; border: 0; }
@media (max-width: 900px) {
.bca-contact-grid { grid-template-columns: 1fr; gap: 32px; }
.bca-form-row { grid-template-columns: 1fr; }
.bca-contact-map-frame iframe { min-height: 360px; }
}
@media (max-width: 480px) {
.bca-form .wpcf7-submit { width: 100%; }
.bca-contact-map-frame iframe { min-height: 280px; }
}
/* ===== Apply modal ===== */
.bca-apply-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow: auto; }
.bca-apply-modal[hidden] { display: none; }
.bca-apply-modal-overlay { position: fixed; inset: 0; background: rgba(0,26,46,0.55); z-index: 0; }
.bca-apply-modal-card { position: relative; z-index: 1; width: 100%; max-width: 520px; background: var(--bca-white); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 28px; }
.bca-apply-modal-close { position: absolute; top: 12px; right: 12px; border: none; background: none; font-size: 26px; line-height: 1 color: var(--bca-muted); cursor: pointer; }
.bca-apply-modal-title { margin: 0; font-size: 22px; font-weight: var(--fw-bold, 700); color: var(--bca-navy); }
.bca-apply-modal-sub { margin: 4px 0 20px; font-size: 14px; color: var(--bca-ink-2, #374151); }
/* ===== sections/13-content.css ===== */
/* BCA Partners — 13-content.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Content body width (shared) =====
All "article-style" body classes share the same 820px reading width
and centering. Exceptions (.bca-leader-body) override the max-width
only. base.css owns the inner element styles (h2/h3/p/ul/li). */
.bca-wysiwyg,
.bca-news-body,
.bca-research-body,
.bca-project-detail-body,
.bca-privacy-body {
margin: 0 auto;
}
/* Leader bio — wider (prototype) */
.bca-leader-body {
max-width: 1060px;
margin: 0 auto;
}
/* Body h2 — 28px for ALL article body wrappers (was 24px in base.css
for 4 of these, 28px here for 3 — inconsistent). Now uniform. */
.bca-wysiwyg h2,
.bca-news-body h2,
.bca-research-body h2,
.bca-service-detail-body h2,
.bca-leader-body h2,
.bca-project-detail-body h2,
.bca-vision-mission-body h2 {
margin: 40px 0 12px;
font-size: 28px;
line-height: 1.2;
color: var(--bca-navy);
font-weight: var(--fw-bold, 700);
letter-spacing: 0;
}
/* Body p — only override white-space (preserves line breaks from WP editor) */
.bca-wysiwyg p, .bca-news-body p, .bca-research-body p, .bca-project-detail-body p, .bca-leader-body p {
white-space: pre-line;
}
/* Body list — uniform 16px bottom margin + 22px left indent
(was 0 0 1em 1.5em in base.css, now consistent across all body types). */
.bca-wysiwyg ul, .bca-wysiwyg ol,
.bca-news-body ul, .bca-research-body ul,
.bca-service-detail-body ul, .bca-leader-body ul,
.bca-project-detail-body ul, .bca-vision-mission-body ul {
margin: 0 0 16px;
padding-left: 22px;
display: flex;
flex-direction: column;
gap: 5px;
}
.bca-wysiwyg img, .bca-news-body img, .bca-research-body img, .bca-project-detail-body img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
margin: 16px 0;
}
/* research/news pull-quote: prototype style — blue left rule, no bg, navy 22/32 */
.bca-wysiwyg blockquote, .bca-news-body blockquote, .bca-research-body blockquote, .bca-project-detail-body blockquote {
margin: 32px 0;
padding: 8px 0 8px 28px;
border-left: 4px solid var(--bca-blue);
background: none;
font-style: normal;
font-size: 22px;
line-height: 1.2;
font-weight: var(--fw-bold, 700);
color: var(--bca-navy);
}
.bca-single--career .bca-wysiwyg p, .bca-single--career .bca-wysiwyg li { font-size: 16px; line-height: 1.5 }
/* ===== Privacy body ===== */
.bca-privacy-body p { font-size: 16px; line-height: 1.2; color: var(--bca-ink-2, #374151); }
.bca-privacy-body ul { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
/* ===== Back link ===== */
.bca-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--fw-semibold, 600); color: var(--bca-blue); text-decoration: none; margin-bottom: 16px; }
.bca-back-link:hover { color: var(--bca-navy); }
/* ===== sections/14-archive.css ===== */
/* BCA Partners — 14-archive.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Archive header ===== */
.bca-archive-header { padding: 56px var(--gutter); background: var(--bca-white); border-bottom: 1px solid var(--bca-border); }
.bca-archive-header .bca-section-heading { color: var(--bca-ink); }
@media (max-width: 900px) { .bca-archive-header { padding: 32px var(--gutter-mobile); } }
/* ===== Pagination ===== */
.bca-pagination { margin-top: 48px; display: flex; justify-content: center; }
.bca-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.bca-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--bca-border); border-radius: var(--radius); color: var(--bca-ink); text-decoration: none; font-size: 14px; font-weight: var(--fw-semibold, 600); }
.bca-pagination .page-numbers.current, .bca-pagination .page-numbers:hover { background: var(--bca-navy); color: var(--bca-white); border-color: var(--bca-navy); }
/* ===== Empty state ===== */
.bca-empty { text-align: center; padding: 48px 0; color: var(--bca-ink-2, #374151); font-size: 16px; }
/* ===== sections/15-home.css ===== */
/* BCA Partners — 15-home.js.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* Keep the dense homepage rhythm consistent across every section. */
#main.page-home > .bca-section { padding-block: 48px; }
/* ===== Insights (home) ===== */
.bca-insights-row { display: flex; gap: 32px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.bca-insight-card { width: 384px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; scroll-snap-align: start; }
.bca-insight-card-img { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--bca-surface-section); }
.bca-insight-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-insight-card-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink, #0a1f33); }
.bca-insight-card-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
/* ===== About teaser (home) ===== */
.bca-about-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.bca-about-teaser-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 0.85; background: var(--bca-surface-section, #f3f4f6); }
.bca-about-teaser-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-about-teaser-img-fallback { width: 100%; height: 100%; background: var(--bca-border, #e5e7eb); }
.bca-about-teaser-text { display: flex; flex-direction: column; gap: 24px; }
.bca-about-teaser-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
.bca-about-teaser-block-heading { margin: 0; font-size: 20px; font-weight: var(--fw-bold, 700); color: var(--bca-ink, #0a1f33); }
.bca-about-teaser-block-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
/* ===== Partners (home) ===== */
.bca-partners-list { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; align-items: center; }
.bca-partner-logo { display: flex; align-items: center; justify-content: center; }
.bca-partner-logo-img { max-width: 160px; max-height: 64px; width: auto; height: auto; filter: grayscale(0.1); opacity: 0.9; transition: opacity 200ms ease; }
.bca-partner-logo:hover .bca-partner-logo-img { opacity: 1; }
.bca-partner-logo-link { display: inline-block; }
/* ===== Project highlights (home) — 3 equal cards ===== */
.bca-highlights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.bca-highlight { display: flex; flex-direction: column; gap: 16px; }
#home-highlights .bca-teaser-head .bca-section-sub { margin-bottom: 32px; }
#home-highlights .bca-highlight { gap: 16px; }
#home-highlights .bca-highlight-text { gap: 8px; }
.bca-highlight--big .bca-highlight-media { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--bca-surface-section, #f3f4f6); }
.bca-highlight--big .bca-highlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-highlight--small { gap: 16px; background: transparent; border-radius: 0; overflow: visible; }
.bca-highlight--small .bca-highlight-media { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--bca-surface-section, #f3f4f6); }
.bca-highlight--small .bca-highlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bca-highlight-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bca-highlight--small .bca-highlight-text { padding: 0; }
.bca-highlight .bca-eyebrow { font-size: 14px; line-height: 1.2; }
.bca-highlight-title { margin: 0; font-size: 18px; line-height: 1.2; font-weight: var(--fw-bold, 700); color: var(--bca-ink, #0a1f33); }
.bca-highlight-title a { color: inherit; text-decoration: none; }
.bca-highlight-title a:hover { color: var(--bca-navy, #0a1f33); }
.bca-highlight-client { font-size: 14px; line-height: 1.3; font-weight: var(--fw-semibold, 600); color: var(--bca-black, #111827); }
.bca-highlight-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bca-ink-2, #374151); }
@media (min-width: 901px) {
#home-highlights .bca-highlight-title { min-height: calc(2 * 1.2em); }
}
/* ===== sections/16-detail.css ===== */
/* BCA Partners — 16-detail.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Service detail ===== */
.bca-single--service > .bca-section { padding-block: var(--space-7, 48px); }
.bca-service-detail-body { max-width: 820px; }
.bca-service-detail-excerpt { font-size: 18px; line-height: 1.2; color: var(--bca-ink-2, #374151); margin: 0 0 var(--space-5, 24px); font-weight: var(--fw-medium, 500); }
.bca-single--service .bca-service-detail-body h2 { margin-top: var(--space-6, 32px); margin-bottom: var(--space-2, 8px); }
.bca-single--service .bca-service-detail-body p + p { margin-top: var(--space-3, 12px); }
/* Keep every service-detail list on one spacing rhythm. The shared body
rule adds li margin-bottom on top of the list gap, so reset it here to
prevent the two arrow-marked gaps from drifting apart. */
.bca-single--service .bca-service-detail-body ul { gap: var(--space-md, 8px); }
.bca-single--service .bca-service-detail-body li { margin: 0; }
.w-full{display: block;}
/* "What we do" capabilities → 2-col (prototype .cap).
Note: ACF `items` has only `label` sub-field (no description), so we render
a flat bullet list. Keep the grid gap aligned with the content list above.
Add `description` sub-field + top-border card style later to match the
design's full cap-card structure. */
.bca-single--service .bca-service-card-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md, 16px); }
@media (max-width: 900px) {
.bca-single--service > .bca-section { padding-block: var(--space-6, 32px); }
.bca-service-detail-excerpt { margin-bottom: var(--space-4, 16px); }
.bca-single--service .bca-service-detail-body h2 { margin-top: var(--space-5, 24px); }
.bca-single--service .bca-service-card-items { grid-template-columns: 1fr; }
}
/* ===== sections/17-responsive.css ===== */
/* BCA Partners — 17-responsive.js.css (auto-split from sections.css on 2026-07-16).
Tokens from assets/css/tokens/*.css.
Source order preserved: Hero/Buttons/... — see top of each section. */
/* ===== Responsive additions for new sections ===== */
@media (max-width: 900px) {
#main.page-home > .bca-section { padding-block: 32px; }
.bca-insight-card { width: 280px; }
.bca-about-teaser-grid { grid-template-columns: 1fr; gap: 32px; }
.bca-highlights-grid { grid-template-columns: 1fr; }
.bca-highlight--small { flex-direction: column; }
.bca-highlight--small .bca-highlight-media { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
.bca-highlight--small .bca-highlight-text { padding: 0; }
}
/* ===== Convert gap-fill: sections that had markup but no CSS =====
Layouts derived from ui_kits/website prototype. */
/* Default page template (page.php) — page header + title */
.bca-page-header { padding: 64px var(--gutter) 0; }
.bca-page-header .bca-section-inner { max-width: var(--content-max); margin: 0 auto; }
.bca-page-title {
margin: 0;
font-size: 48px;
line-height: 1.2;
letter-spacing: var(--tracking-tight, -0.025em);
font-weight: var(--fw-bold, 700);
color: var(--bca-navy);
}
/* Service detail — single column body, matches prototype .split fallback */
.bca-service-detail-grid { display: block; }
.bca-service-detail-grid .bca-service-detail-body { margin: 0 auto; }
/* Related leader section — muted band separator */
.bca-leader-related { background: var(--bca-surface-section, #e9ecf2); }
/* Leader card text block */
.bca-leader-card-body { padding: 0; }
/* Footer brand column — stack logo + description, prototype gap */
.bca-footer-brand { display: flex; flex-direction: column; gap: 16px; }
/* Apply modal form (career apply-modal) */
.bca-apply-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
/* Career row CTA — keep button from shrinking in flex row */
.bca-career-row-cta { flex-shrink: 0; align-self: center; }
@media (max-width: 900px) {
.bca-page-title { font-size: 32px; line-height: 1.2 }
.bca-page-header { padding: 40px var(--gutter-mobile) 0; }
.bca-career-row-cta { align-self: flex-start; }
}
/* ============================================================
Mobile-friendly pass — patch heading overrides + tablet ≤900
============================================================ */
@media (max-width: 900px) {
/* detail/contact hero headings must shrink too (higher-specificity
overrides beat the generic .bca-hero-heading mobile rule) */
.bca-hero--page .bca-hero-heading,
.bca-hero--blue .bca-hero-heading { font-size: 32px; line-height: 1.2 }
/* the 48px archive heading (sections.css) never shrank on mobile */
.bca-section-heading { font-size: 28px; }
.bca-section-heading--sm { font-size: 22px; }
/* contact CTA band: stop full desktop padding overflowing */
.bca-contact-band-inner { padding: 40px var(--gutter-mobile); min-height: 0; gap: 20px; }
.bca-contact-band-heading { font-size: 24px; line-height: 1.2 }
/* fixed-width insight cards would overflow small screens */
.bca-insight-card { width: 100%; }
}
/* ============================================================
Small phones ≤480px — tighten type, full-width CTAs
============================================================ */
@media (max-width: 480px) {
.bca-hero--page .bca-hero-heading,
.bca-hero--blue .bca-hero-heading { font-size: 28px; }
.bca-section-heading { font-size: 24px; }
/* article body: drop desktop lead sizing so it fits */
.bca-wysiwyg p, .bca-news-body p, .bca-research-body p, .bca-project-detail-body p, .bca-leader-body p,
.bca-wysiwyg li, .bca-news-body li, .bca-research-body li { font-size: 16px; line-height: 1.5 }
.bca-wysiwyg blockquote, .bca-news-body blockquote, .bca-research-body blockquote, .bca-project-detail-body blockquote { font-size: 18px; line-height: 1.5; padding-left: 16px; }
/* CTAs full-width for easy tapping on small phones */
.bca-btn { width: 100%; justify-content: center; }
/* Contact-band + hero-cta keep auto width to fit inline */
.bca-contact-band .bca-contact-band-cta,
.bca-hero-cta .bca-btn { width: auto; }
.bca-contact-band-inner { text-align: center; }
}
.m-0{margin: 0 !important;}