/* ============================================================
bch-pages — content pages no plugin draws (inc/pages/page-kit.php)
Two layouts on the theme's own --bsy-* tokens:
.bch-kit pages composed from [bch_*] shortcodes (About pages)
.bch-doc plain documents (terms, privacy) — brand header,
contents rail, prose
Buttons (.bsy-btn), cards (.bsy-card), pills and the section
head come from bch-chrome.css and are reused as-is.
Loaded only where bch_page_kind() says so — see
inc/chrome/chrome-assets.php.
============================================================ */
/* ── Hero surface — shared by the kit hero and the document header ── */
.bch-hero,
.bch-doc__hero {
position: relative; overflow: hidden; isolation: isolate;
border-radius: var(--bsy-radius-3xl);
background: linear-gradient(160deg, var(--bsy-brand-active) 0%, var(--bsy-brand) 62%);
color: var(--bsy-white);
box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 28px 60px -24px rgba(0,30,80,.45);
}
/* Faint graph-paper grid fading toward the far side, and a gold corner glow. */
.bch-hero__grid {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 36px),
repeating-linear-gradient(to right, rgba(255,255,255,.07) 0 1px, transparent 1px 36px);
-webkit-mask-image: linear-gradient(to left, black 0%, transparent 85%);
mask-image: linear-gradient(to left, black 0%, transparent 85%);
}
.bch-hero__glow {
position: absolute; z-index: -1; pointer-events: none;
inset-block-end: -200px; inset-inline-end: -140px;
width: 480px; height: 480px; border-radius: var(--bsy-radius-pill);
background: radial-gradient(circle, rgba(255,225,94,.22), transparent 65%);
}
/* ── Kit hero ───────────────────────────────────────────────── */
.bch-hero {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 32px; align-items: center;
padding: clamp(28px, 4.2vw, 56px) clamp(22px, 4.2vw, 52px);
min-height: 340px;
}
.bch-hero--media { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.bch-hero__copy {
display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
max-width: 760px; min-width: 0;
}
.bch-hero__title {
margin: 4px 0 0;
font-family: var(--bsy-font); font-weight: var(--bsy-fw-black);
font-size: clamp(30px, 4.6vw, 56px); line-height: 1.1;
color: var(--bsy-white); text-wrap: balance;
}
.bch-hero__accent { display: block; margin-top: 6px; color: var(--bsy-accent-gold); }
.bch-hero__lede {
margin: 0; max-width: 64ch;
font-size: clamp(14.5px, 1.45vw, 17px); line-height: 1.85;
font-weight: var(--bsy-fw-medium); color: rgba(255,255,255,.9);
}
.bch-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* Buttons sit on the brand gradient, so they swap to the on-brand palette. */
.bch-hero .bsy-btn--primary { background: var(--bsy-white); color: var(--bsy-brand); box-shadow: 0 12px 28px rgba(0,20,80,.28); }
.bch-hero .bsy-btn--primary:hover { background: var(--bsy-white); color: var(--bsy-brand-hover); }
.bch-hero .bsy-btn--secondary { background: rgba(255,255,255,.12); color: var(--bsy-white); border-color: rgba(255,255,255,.42); }
.bch-hero .bsy-btn--secondary:hover { background: rgba(255,255,255,.22); color: var(--bsy-white); }
.bch-hero__foot { margin-top: 8px; max-width: 100%; }
.bch-hero__media img {
width: 100%; height: auto;
border-radius: var(--bsy-radius-2xl);
background: var(--bsy-white);
box-shadow: 0 24px 48px -18px rgba(0,20,80,.5);
}
/* ── Stat strip ─────────────────────────────────────────────── */
.bch-stats { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 12px; }
.bch-stat { display: flex; flex-direction: column; gap: 5px; padding-inline: 22px; }
.bch-stat:first-child { padding-inline-start: 0; }
.bch-stat + .bch-stat { border-inline-start: 1px solid var(--bsy-grey-200); }
.bch-stat__n { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--bsy-fw-black); line-height: 1; color: var(--bsy-brand); }
.bch-stat__l { font-size: 12.5px; font-weight: var(--bsy-fw-semibold); line-height: 1.3; color: var(--bsy-grey-600); }
/* On the hero: a glass strip. */
.bch-hero .bch-stats {
display: inline-flex; padding: 14px 20px;
border-radius: var(--bsy-radius-lg);
background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
}
.bch-hero .bch-stat + .bch-stat { border-inline-start-color: rgba(255,255,255,.2); }
.bch-hero .bch-stat__n { color: var(--bsy-white); }
.bch-hero .bch-stat__l { color: rgba(255,255,255,.8); }
/* ── Section card + prose ───────────────────────────────────── */
.bch-section { padding: clamp(20px, 3vw, 36px); }
.bch-section .bsy-shead { margin-bottom: 14px; }
.bch-section--tint { background: var(--bsy-brand-lighter); border-color: var(--bsy-brand-20); box-shadow: none; }
.bch-prose {
font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.95;
font-weight: var(--bsy-fw-medium); color: var(--bsy-grey-700);
}
.bch-prose > :first-child { margin-top: 0; }
.bch-prose > :last-child { margin-bottom: 0; }
.bch-prose p { margin: 0 0 14px; }
.bch-section .bch-prose p,
.bch-section .bch-prose ul,
.bch-section .bch-prose ol { max-width: 76ch; }
.bch-prose strong, .bch-prose b { color: var(--bsy-fg-primary); font-weight: var(--bsy-fw-bold); }
/* Graphik Arabic has no italic; a faked slant reads badly. */
.bch-prose em, .bch-prose i { font-style: normal; }
/* Text links only. A card or button inside a section is an too, and an
ancestor's underline paints through every line of text inside it. */
.bch-prose a:not(.bch-card):not(.bsy-btn) {
color: var(--bsy-brand); font-weight: var(--bsy-fw-semibold);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.bch-prose a:not(.bch-card):not(.bsy-btn):hover { color: var(--bsy-brand-hover); }
.bch-prose h2, .bch-prose h3, .bch-prose h4 {
font-family: var(--bsy-font); font-weight: var(--bsy-fw-black);
line-height: 1.35; color: var(--bsy-fg-primary);
}
.bch-prose h2 { font-size: clamp(19px, 2vw, 24px); margin: 34px 0 12px; }
.bch-prose h3 { font-size: clamp(16px, 1.6vw, 19px); margin: 26px 0 10px; }
.bch-prose h4 { font-size: 16px; margin: 20px 0 8px; }
.bch-prose ul, .bch-prose ol { margin: 0 0 16px; padding-inline-start: 1.4em; }
.bch-prose li { margin-bottom: 6px; }
.bch-prose li::marker { color: var(--bsy-brand); font-weight: var(--bsy-fw-bold); }
.bch-prose .bch-cards,
.bch-prose .bch-stats,
.bch-prose .bch-cta { margin-block: 22px; }
/* ── Card grid ──────────────────────────────────────────────── */
.bch-cards { --bch-cols: 3; display: grid; grid-template-columns: repeat(var(--bch-cols), minmax(0, 1fr)); gap: 14px; }
.bch-cards--2 { --bch-cols: 2; }
.bch-cards--4 { --bch-cols: 4; }
.bch-card {
position: relative; min-width: 0;
display: flex; flex-direction: column; gap: 10px;
padding: 20px;
background: var(--bsy-white); color: var(--bsy-fg-primary);
border: 1.5px solid var(--bsy-border-default); border-radius: var(--bsy-radius-2xl);
text-decoration: none; line-height: 1.5;
transition: border-color var(--bsy-duration-fast) var(--bsy-ease-out),
transform var(--bsy-duration-fast) var(--bsy-ease-out),
box-shadow var(--bsy-duration-fast) var(--bsy-ease-out);
}
a.bch-card:hover { border-color: var(--bsy-brand); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(0,45,140,.55); }
.bch-card__head { display: flex; align-items: center; gap: 10px; }
.bch-card__ic {
display: grid; place-items: center; flex: none;
width: 44px; height: 44px; border-radius: var(--bsy-radius-md);
background: var(--bsy-brand-lighter); color: var(--bsy-brand);
}
.bch-card__ic svg { width: 22px; height: 22px; }
.bch-card__label { font-size: 12px; font-weight: var(--bsy-fw-bold); color: var(--bsy-grey-600); }
.bch-card__t {
margin: 2px 0 0;
font-family: var(--bsy-font); font-size: 18px; font-weight: var(--bsy-fw-black);
line-height: 1.3; color: var(--bsy-fg-primary);
}
.bch-card__d { font-size: 13.5px; line-height: 1.75; font-weight: var(--bsy-fw-medium); color: var(--bsy-grey-700); }
.bch-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bch-card__tag {
padding: 4px 10px; border-radius: var(--bsy-radius-pill);
background: var(--bsy-grey-100); color: var(--bsy-grey-800);
font-size: 11.5px; font-weight: var(--bsy-fw-bold); line-height: 1.5;
unicode-bidi: isolate;
}
.bch-card__tag--more { background: var(--bsy-brand-lighter); color: var(--bsy-brand); }
.bch-card__cta {
margin-top: auto; padding-top: 6px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: var(--bsy-fw-bold); color: var(--bsy-brand);
}
.bch-card__cta svg { width: 14px; height: 14px; }
.bch-card--featured { background: var(--bsy-brand); border-color: transparent; color: var(--bsy-white); box-shadow: var(--bsy-shadow-brand-lg); }
.bch-card--featured .bch-card__ic { background: rgba(255,255,255,.18); color: var(--bsy-white); }
.bch-card--featured .bch-card__t,
.bch-card--featured .bch-card__cta { color: var(--bsy-white); }
.bch-card--featured .bch-card__label,
.bch-card--featured .bch-card__d { color: rgba(255,255,255,.86); }
.bch-card--featured .bch-card__tag { background: rgba(255,255,255,.16); color: var(--bsy-white); }
/* ── CTA strip ──────────────────────────────────────────────── */
.bch-cta {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 18px 28px;
padding: clamp(20px, 3vw, 32px);
border-radius: var(--bsy-radius-2xl);
background: var(--bsy-brand-lighter); border: 1px solid var(--bsy-brand-20);
}
.bch-cta__copy { flex: 1 1 320px; min-width: 0; }
.bch-cta__t {
margin: 0 0 6px;
font-family: var(--bsy-font); font-size: clamp(20px, 2.2vw, 26px); font-weight: var(--bsy-fw-black);
line-height: 1.25; color: var(--bsy-fg-primary);
}
.bch-cta__s { margin: 0; font-size: 14.5px; line-height: 1.75; font-weight: var(--bsy-fw-medium); color: var(--bsy-grey-700); }
.bch-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* .bsy-page a { color: inherit } outranks the button's own colour — restate it. */
.bch-cta .bsy-btn--primary { color: var(--bsy-white); }
.bch-cta .bsy-btn--secondary { color: var(--bsy-brand); background: var(--bsy-white); }
/* ── Document ───────────────────────────────────────────────── */
.bch-doc__hero {
display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
padding: clamp(24px, 3.4vw, 42px) clamp(22px, 4.2vw, 52px);
}
.bch-doc__crumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: var(--bsy-fw-medium); color: rgba(255,255,255,.72);
}
.bch-doc__crumbs a { color: rgba(255,255,255,.88); text-decoration: none; }
.bch-doc__crumbs a:hover { color: var(--bsy-white); text-decoration: underline; text-underline-offset: 3px; }
.bch-doc__crumbs svg { width: 12px; height: 12px; opacity: .65; }
.bch-doc__crumbs [aria-current] { color: var(--bsy-white); font-weight: var(--bsy-fw-bold); }
.bch-doc__title {
margin: 4px 0 0;
font-family: var(--bsy-font); font-weight: var(--bsy-fw-black);
font-size: clamp(26px, 3.6vw, 44px); line-height: 1.18;
color: var(--bsy-white); text-wrap: balance;
}
.bch-doc__meta {
margin: 0; display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: var(--bsy-fw-medium); color: rgba(255,255,255,.82);
}
.bch-doc__meta svg { width: 14px; height: 14px; flex: none; }
.bch-doc__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.bch-doc__body.has-toc { grid-template-columns: 272px minmax(0, 1fr); }
.bch-doc__toc-nav {
position: sticky; top: 96px;
max-height: calc(100vh - 120px); overflow: auto;
padding: 18px 14px;
border-radius: var(--bsy-radius-2xl);
background: var(--bsy-grey-50); border: 1px solid var(--bsy-grey-100);
}
.bch-doc__toc-h { margin: 0 6px 10px; font-size: 13px; font-weight: var(--bsy-fw-black); color: var(--bsy-fg-primary); }
.bch-doc__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bch-doc__toc a {
display: block; padding: 8px 10px; border-radius: var(--bsy-radius-sm);
font-size: 13px; line-height: 1.55; font-weight: var(--bsy-fw-medium);
color: var(--bsy-grey-700); text-decoration: none;
}
.bch-doc__toc a:hover { background: var(--bsy-brand-lighter); color: var(--bsy-brand); }
.bch-doc__toc-mobile { display: none; }
.bch-doc__prose { padding: clamp(20px, 3.4vw, 44px); }
.bch-doc__prose[dir="ltr"] { text-align: left; }
.bch-doc__prose h2 { padding-top: 24px; border-top: 1px solid var(--bsy-grey-100); scroll-margin-top: 96px; }
.bch-doc__prose > h2:first-child { padding-top: 0; border-top: 0; }
.bch-doc__prose table { display: block; overflow-x: auto; width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 14px; }
.bch-doc__prose th,
.bch-doc__prose td { padding: 10px 12px; border: 1px solid var(--bsy-grey-200); text-align: start; vertical-align: top; }
.bch-doc__prose th { background: var(--bsy-grey-50); color: var(--bsy-fg-primary); font-weight: var(--bsy-fw-bold); }
/* The old terms page marks its section titles as bare anchors. */
.bch-doc__prose a[tabindex]:not([href]) {
display: block; margin: 30px 0 10px;
font-size: clamp(17px, 1.8vw, 21px); font-weight: var(--bsy-fw-black);
line-height: 1.35; color: var(--bsy-fg-primary); text-decoration: none;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
.bch-hero--media { grid-template-columns: minmax(0, 1fr); }
.bch-cards,
.bch-cards--4 { --bch-cols: 2; }
.bch-doc__body.has-toc { grid-template-columns: minmax(0, 1fr); }
.bch-doc__toc-nav { display: none; }
.bch-doc__toc-mobile {
display: block; padding: 2px 16px;
border-radius: var(--bsy-radius-xl);
background: var(--bsy-grey-50); border: 1px solid var(--bsy-grey-100);
}
.bch-doc__toc-mobile summary {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: 48px; cursor: pointer; list-style: none;
font-size: 14px; font-weight: var(--bsy-fw-black); color: var(--bsy-fg-primary);
}
.bch-doc__toc-mobile summary::-webkit-details-marker { display: none; }
.bch-doc__toc-mobile summary svg { width: 14px; height: 14px; transition: transform var(--bsy-duration-base) var(--bsy-ease-out); }
.bch-doc__toc-mobile[open] summary svg { transform: rotate(180deg); }
.bch-doc__toc-mobile ol { padding-bottom: 12px; }
}
@media (max-width: 640px) {
.bch-hero,
.bch-doc__hero { border-radius: var(--bsy-radius-xl); }
.bch-hero { min-height: 0; gap: 22px; }
.bch-cards,
.bch-cards--2,
.bch-cards--4 { --bch-cols: 1; }
.bch-hero .bch-stats { display: flex; width: 100%; padding: 12px 14px; }
.bch-stat { padding-inline: 14px; }
.bch-hero__actions { width: 100%; }
.bch-hero__actions .bsy-btn,
.bch-cta__actions,
.bch-cta__actions .bsy-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.bch-card { transition: none; }
a.bch-card:hover { transform: none; }
}