/* ============================================================================ Key for Change — Interior page + content-section styles (task 12647) The homepage concept (group #90) shipped nav / hero / body / footer. This file adds the brand system for EVERY OTHER page: a compact page-header, a styled prose column, and a library of reusable content-section modules (cards, steps, stats, tiers, testimonials, checklists, CTA bands, FAQ, featured-in strip). Rendered by templates/partials/sections.html.twig macros. Loaded at priority 81 (after footer.css, before custom.css) — every value references a token from tokens.css (var(--k4c-*)); no raw hex / px here. Non-home has NO .has-hero, so the nav's scaffold offset (body:not(.has-hero) main#start padding-top, nav.css) already clears the fixed bar — the page-header sits directly below the nav. ========================================================================== */ /* ---- Shared section rhythm & backgrounds -------------------------------- */ .k4c-section { padding-block: var(--k4c-section-pad); } .k4c-section--tight { padding-block: calc(var(--k4c-section-pad) * 0.6); } .k4c-section--tint { background: var(--k4c-purple-50); } .k4c-section--tint2 { background: var(--k4c-purple-100); } .k4c-section--grey { background: var(--k4c-grey-100); } .k4c-section--purple { background: var(--k4c-purple); color: var(--k4c-white); } .k4c-section--purple :is(h1,h2,h3,h4) { color: var(--k4c-white); } .k4c-section--purple .k4c-eyebrow { color: var(--k4c-yellow); } /* Section heading cluster (eyebrow + heading + lede), optionally centred */ .k4c-sec-head { margin-bottom: var(--k4c-space-7); max-width: 46rem; } .k4c-sec-head--center { margin-inline: auto; text-align: center; } .k4c-sec-head__title { font-size: var(--k4c-fs-2xl); margin: var(--k4c-space-2) 0 var(--k4c-space-3); } .k4c-sec-head__lede { font-size: var(--k4c-fs-md); color: var(--k4c-grey-600); margin: 0; } .k4c-section--purple .k4c-sec-head__lede { color: color-mix(in oklab, var(--k4c-white) 82%, var(--k4c-purple)); } .k4c-section--purple .k4c-prose { color: color-mix(in oklab, var(--k4c-white) 82%, var(--k4c-purple)); } .k4c-section--purple .k4c-prose ul li::marker { color: var(--k4c-yellow); } /* ============================================================================ Page header (compact interior hero) — brand purple band under the nav ========================================================================== */ .k4c-pagehead { position: relative; background: linear-gradient(135deg, var(--k4c-purple-900) 0%, var(--k4c-purple) 55%, var(--k4c-purple-light) 130%); color: var(--k4c-white); padding-block: calc(var(--k4c-nav-height) + var(--k4c-space-7)) var(--k4c-space-8); overflow: hidden; } .k4c-pagehead::after { /* soft warm glow, decorative */ content: ""; position: absolute; inset: auto -10% -40% auto; width: 40rem; height: 40rem; background: radial-gradient(circle, color-mix(in oklab, var(--k4c-yellow) 22%, transparent) 0%, transparent 62%); pointer-events: none; } /* When a page-header is present it owns the top of the page and paints up under the transparent fixed nav (its own top padding clears the bar), so cancel nav.css's `body:not(.has-hero) main#start` scaffold offset. */ body:has(.k4c-pagehead) main#start { padding-top: 0; } .k4c-pagehead__inner { position: relative; z-index: 1; } .k4c-pagehead--split .k4c-pagehead__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--k4c-space-8); align-items: center; } .k4c-pagehead__eyebrow { color: var(--k4c-yellow); } .k4c-pagehead__title { color: var(--k4c-white); font-size: var(--k4c-fs-3xl); margin: var(--k4c-space-3) 0 0; text-wrap: balance; } .k4c-pagehead__title .k4c-accent { color: var(--k4c-yellow); } .k4c-pagehead__lede { font-size: var(--k4c-fs-lg); color: color-mix(in oklab, var(--k4c-white) 88%, var(--k4c-purple)); margin: var(--k4c-space-5) 0 0; max-width: 40rem; } .k4c-pagehead__meta { margin: var(--k4c-space-5) 0 0; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); color: var(--k4c-yellow); letter-spacing: 0.02em; } .k4c-pagehead__actions { margin-top: var(--k4c-space-6); display: flex; flex-wrap: wrap; gap: var(--k4c-space-3); } /* white-outline ghost that reads on the purple header */ .k4c-btn--onpurple { background: transparent; color: var(--k4c-white); border-color: color-mix(in oklab, var(--k4c-white) 60%, transparent); } .k4c-btn--onpurple:hover { background: var(--k4c-white); color: var(--k4c-purple); border-color: var(--k4c-white); } .k4c-pagehead__media img { width: 100%; height: auto; display: block; border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow-lg); } @media (max-width: 768px) { .k4c-pagehead--split .k4c-pagehead__inner { grid-template-columns: 1fr; } .k4c-pagehead__media { order: -1; max-width: 22rem; } } /* ============================================================================ Prose column — styles raw markdown body content on-brand ========================================================================== */ .k4c-prose { max-width: 46rem; font-size: var(--k4c-fs-md); color: var(--k4c-grey-800); } .k4c-prose--wide { max-width: 60rem; } .k4c-prose > :first-child { margin-top: 0; } .k4c-prose > :last-child { margin-bottom: 0; } .k4c-prose h2 { font-size: var(--k4c-fs-xl); margin: var(--k4c-space-8) 0 var(--k4c-space-4); } .k4c-prose h3 { font-size: var(--k4c-fs-lg); margin: var(--k4c-space-6) 0 var(--k4c-space-3); } .k4c-prose p { margin: 0 0 var(--k4c-space-5); } .k4c-prose ul, .k4c-prose ol { margin: 0 0 var(--k4c-space-5); padding-left: var(--k4c-space-5); } .k4c-prose li { margin-bottom: var(--k4c-space-2); } .k4c-prose ul li::marker { color: var(--k4c-purple-light); } .k4c-prose strong { color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); } .k4c-prose a { color: var(--k4c-purple); text-decoration: underline; } .k4c-prose a:hover { color: var(--k4c-purple-light); } .k4c-prose img { max-width: 100%; height: auto; border-radius: var(--k4c-radius); } .k4c-prose blockquote { margin: var(--k4c-space-6) 0; padding: var(--k4c-space-4) var(--k4c-space-6); border-left: 4px solid var(--k4c-yellow); background: var(--k4c-purple-50); border-radius: var(--k4c-radius-sm); font-size: var(--k4c-fs-lg); color: var(--k4c-grey-800); } .k4c-prose blockquote p:last-child { margin-bottom: 0; } /* ============================================================================ Card grid — icon / heading / text / optional link ========================================================================== */ .k4c-cards { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); } .k4c-cards--2 { grid-template-columns: repeat(2, 1fr); } .k4c-cards--4 { grid-template-columns: repeat(4, 1fr); } .k4c-card { background: var(--k4c-white); border: var(--k4c-border); border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-6); box-shadow: var(--k4c-shadow-sm); transition: transform var(--k4c-transition), box-shadow var(--k4c-transition); display: flex; flex-direction: column; gap: var(--k4c-space-2); } .k4c-card:hover { transform: translateY(-3px); box-shadow: var(--k4c-shadow); } .k4c-card__icon { width: 3rem; height: 3rem; margin-bottom: var(--k4c-space-2); display: grid; place-items: center; background: var(--k4c-purple-100); color: var(--k4c-purple); border-radius: var(--k4c-radius-pill); font-size: var(--k4c-fs-lg); } .k4c-card__title { font-size: var(--k4c-fs-lg); margin: 0; } .k4c-card__text { color: var(--k4c-grey-600); margin: 0; } .k4c-card__link { margin-top: auto; padding-top: var(--k4c-space-3); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); text-decoration: none; } .k4c-card__link::after { content: " →"; } @media (max-width: 900px) { .k4c-cards, .k4c-cards--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .k4c-cards, .k4c-cards--2, .k4c-cards--4 { grid-template-columns: 1fr; } } /* ============================================================================ Steps — numbered process ========================================================================== */ .k4c-steps { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); counter-reset: k4cstep; } .k4c-steps--5 { grid-template-columns: repeat(5, 1fr); } .k4c-step { position: relative; padding-top: var(--k4c-space-6); } .k4c-step__num { position: absolute; top: 0; left: 0; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-extrabold); font-size: var(--k4c-fs-2xl); color: var(--k4c-yellow); line-height: 1; } .k4c-section--purple .k4c-step__num { color: var(--k4c-yellow); } .k4c-step__title { font-size: var(--k4c-fs-lg); margin: var(--k4c-space-3) 0 var(--k4c-space-2); } .k4c-step__text { color: var(--k4c-grey-600); margin: 0; } .k4c-section--purple .k4c-step__text { color: color-mix(in oklab, var(--k4c-white) 80%, var(--k4c-purple)); } @media (max-width: 900px) { .k4c-steps, .k4c-steps--5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .k4c-steps, .k4c-steps--5 { grid-template-columns: 1fr; } } /* ============================================================================ Stats band ========================================================================== */ .k4c-stats { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(4, 1fr); text-align: center; } .k4c-stat__num { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-extrabold); font-size: var(--k4c-fs-3xl); color: var(--k4c-yellow); line-height: 1; } .k4c-stat__label { margin: var(--k4c-space-2) 0 0; font-weight: var(--k4c-fw-semibold); } @media (max-width: 700px) { .k4c-stats { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================ Tiers — programme / pricing cards ========================================================================== */ .k4c-tiers { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); align-items: stretch; } .k4c-tier { position: relative; display: flex; flex-direction: column; background: var(--k4c-white); border: var(--k4c-border); border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-7) var(--k4c-space-6); box-shadow: var(--k4c-shadow-sm); } .k4c-tier--featured { border-color: var(--k4c-purple); box-shadow: var(--k4c-shadow-lg); } .k4c-tier__badge { position: absolute; top: 0; right: var(--k4c-space-6); transform: translateY(-50%); background: var(--k4c-yellow); color: var(--k4c-grey); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); font-size: var(--k4c-fs-xs); text-transform: uppercase; letter-spacing: var(--k4c-tracking-caps); padding: var(--k4c-space-1) var(--k4c-space-4); border-radius: var(--k4c-radius-pill); } .k4c-tier__name { font-size: var(--k4c-fs-xl); margin: 0 0 var(--k4c-space-2); } .k4c-tier__blurb { color: var(--k4c-grey-600); margin: 0 0 var(--k4c-space-5); } .k4c-tier__list { list-style: none; margin: 0 0 var(--k4c-space-6); padding: 0; } .k4c-tier__list li { position: relative; padding-left: var(--k4c-space-6); margin-bottom: var(--k4c-space-3); color: var(--k4c-grey-800); } .k4c-tier__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); } .k4c-tier__cta { margin-top: auto; } @media (max-width: 900px) { .k4c-tiers { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } } /* ============================================================================ Testimonials grid — quote cards ========================================================================== */ .k4c-quotes { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); } .k4c-quotes--2 { grid-template-columns: repeat(2, 1fr); } .k4c-quote { background: var(--k4c-white); border: var(--k4c-border); border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-6); box-shadow: var(--k4c-shadow-sm); display: flex; flex-direction: column; } .k4c-section--purple .k4c-quote { background: color-mix(in oklab, var(--k4c-white) 8%, var(--k4c-purple)); border-color: color-mix(in oklab, var(--k4c-white) 16%, transparent); color: var(--k4c-white); } .k4c-quote__mark { font-family: var(--k4c-font-heading); font-size: var(--k4c-fs-3xl); line-height: 0.6; color: var(--k4c-yellow); height: 1.2rem; } .k4c-quote__title { font-size: var(--k4c-fs-lg); margin: 0 0 var(--k4c-space-2); } .k4c-quote__text { color: var(--k4c-grey-700, var(--k4c-grey-600)); margin: 0 0 var(--k4c-space-4); font-style: italic; } .k4c-section--purple .k4c-quote__text { color: color-mix(in oklab, var(--k4c-white) 88%, var(--k4c-purple)); } .k4c-quote__cite { margin-top: auto; font-style: normal; } .k4c-quote__name { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); color: var(--k4c-purple); } .k4c-section--purple .k4c-quote__name { color: var(--k4c-yellow); } .k4c-quote__role { display: block; font-size: var(--k4c-fs-sm); color: var(--k4c-grey-400); } .k4c-section--purple .k4c-quote__role { color: color-mix(in oklab, var(--k4c-white) 70%, var(--k4c-purple)); } @media (max-width: 900px) { .k4c-quotes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .k4c-quotes, .k4c-quotes--2 { grid-template-columns: 1fr; } } /* Single feature quote (pull-quote) */ .k4c-feature-quote { max-width: 44rem; margin-inline: auto; text-align: center; } .k4c-feature-quote__text { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); font-size: var(--k4c-fs-xl); color: var(--k4c-purple); line-height: var(--k4c-lh-heading); } .k4c-section--purple .k4c-feature-quote__text { color: var(--k4c-white); } .k4c-feature-quote__cite { margin-top: var(--k4c-space-4); font-style: normal; color: var(--k4c-grey-600); } .k4c-feature-quote__cite b { color: var(--k4c-purple); font-family: var(--k4c-font-heading); } .k4c-section--purple .k4c-feature-quote__cite, .k4c-section--purple .k4c-feature-quote__cite b { color: var(--k4c-yellow); } /* ============================================================================ Checklist — with / without, tick + cross ========================================================================== */ .k4c-checkcols { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(2, 1fr); } .k4c-checkcard { border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-6); border: var(--k4c-border); } .k4c-checkcard--yes { background: var(--k4c-purple-50); border-color: color-mix(in oklab, var(--k4c-purple) 20%, transparent); } .k4c-checkcard--no { background: var(--k4c-grey-100); } .k4c-checkcard__title { font-size: var(--k4c-fs-lg); margin: 0 0 var(--k4c-space-4); } .k4c-checklist { list-style: none; margin: 0; padding: 0; } .k4c-checklist li { position: relative; padding-left: var(--k4c-space-6); margin-bottom: var(--k4c-space-3); } .k4c-checklist--yes li::before { content: "✓"; position: absolute; left: 0; color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); } .k4c-checklist--no li::before { content: "✕"; position: absolute; left: 0; color: var(--k4c-red); font-weight: var(--k4c-fw-bold); } @media (max-width: 700px) { .k4c-checkcols { grid-template-columns: 1fr; } } /* Simple benefit list (single column, ticks) */ .k4c-ticklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--k4c-space-8); } .k4c-ticklist li { position: relative; padding-left: var(--k4c-space-6); margin-bottom: var(--k4c-space-3); break-inside: avoid; } .k4c-ticklist li::before { content: "✓"; position: absolute; left: 0; color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); } .k4c-section--purple .k4c-ticklist li::before { color: var(--k4c-yellow); } /* single-column variant — for use inside a narrow media-split column (#12671) */ .k4c-ticklist--single { columns: 1; } @media (max-width: 620px) { .k4c-ticklist { columns: 1; } } /* ============================================================================ CTA band ========================================================================== */ .k4c-cta { background: linear-gradient(135deg, var(--k4c-purple) 0%, var(--k4c-purple-dark) 100%); color: var(--k4c-white); text-align: center; border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-8) var(--k4c-space-6); } .k4c-cta--full { border-radius: 0; } .k4c-cta__title { color: var(--k4c-white); font-size: var(--k4c-fs-2xl); margin: 0 0 var(--k4c-space-3); } .k4c-cta__text { color: color-mix(in oklab, var(--k4c-white) 85%, var(--k4c-purple)); font-size: var(--k4c-fs-md); margin: 0 auto var(--k4c-space-6); max-width: 40rem; } .k4c-cta__actions { display: flex; flex-wrap: wrap; gap: var(--k4c-space-3); justify-content: center; } /* ============================================================================ Featured-in strip (text pills — real logos wired in media task #12649) ========================================================================== */ .k4c-featured { text-align: center; } .k4c-featured__label { color: var(--k4c-grey-400); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); text-transform: uppercase; letter-spacing: var(--k4c-tracking-caps); font-size: var(--k4c-fs-xs); margin: 0 0 var(--k4c-space-5); } .k4c-featured__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k4c-space-3) var(--k4c-space-6); } .k4c-featured__item { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); font-size: var(--k4c-fs-lg); color: var(--k4c-purple-light); } .k4c-section--purple .k4c-featured__label { color: color-mix(in oklab, var(--k4c-white) 70%, var(--k4c-purple)); } .k4c-section--purple .k4c-featured__item { color: var(--k4c-white); } /* ============================================================================ FAQ — native

accordion (no JS, accessible) ========================================================================== */ .k4c-faq { max-width: 48rem; margin-inline: auto; } .k4c-faq__item { border: var(--k4c-border); border-radius: var(--k4c-radius); margin-bottom: var(--k4c-space-3); background: var(--k4c-white); overflow: hidden; } .k4c-faq__item[open] { border-color: color-mix(in oklab, var(--k4c-purple) 35%, transparent); } .k4c-faq__q { cursor: pointer; list-style: none; padding: var(--k4c-space-4) var(--k4c-space-5); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); color: var(--k4c-purple); font-size: var(--k4c-fs-md); display: flex; justify-content: space-between; align-items: center; gap: var(--k4c-space-4); } .k4c-faq__q::-webkit-details-marker { display: none; } .k4c-faq__q::after { content: "+"; font-size: var(--k4c-fs-xl); color: var(--k4c-purple-light); transition: transform var(--k4c-transition); } .k4c-faq__item[open] .k4c-faq__q::after { transform: rotate(45deg); } .k4c-faq__q:focus-visible { outline: 3px solid var(--q2-focus-ring); outline-offset: -3px; } .k4c-faq__a { padding: 0 var(--k4c-space-5) var(--k4c-space-5); color: var(--k4c-grey-700, var(--k4c-grey-600)); } .k4c-faq__a > :first-child { margin-top: 0; } .k4c-faq__a p { margin: 0 0 var(--k4c-space-3); } /* ============================================================================ Info grid — contact details / address blocks ========================================================================== */ .k4c-info { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(2, 1fr); } .k4c-info__block { padding: var(--k4c-space-6); border: var(--k4c-border); border-radius: var(--k4c-radius-lg); background: var(--k4c-white); } .k4c-info__block h3 { font-size: var(--k4c-fs-lg); margin: 0 0 var(--k4c-space-3); } .k4c-info__block p { margin: 0 0 var(--k4c-space-2); color: var(--k4c-grey-700, var(--k4c-grey-600)); } .k4c-info__block a { color: var(--k4c-purple); } @media (max-width: 700px) { .k4c-info { grid-template-columns: 1fr; } } /* Two-column split (text + aside) */ .k4c-split { display: grid; gap: var(--k4c-space-8); grid-template-columns: 1fr 1fr; align-items: center; } .k4c-split--textwide { grid-template-columns: 1.3fr 0.7fr; } .k4c-split__media img { width: 100%; height: auto; border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow); } @media (max-width: 800px) { .k4c-split, .k4c-split--textwide { grid-template-columns: 1fr; } } /* ============================================================================ Contact form (Grav form plugin) — brand skin ========================================================================== */ .k4c-form { max-width: 40rem; } .k4c-form .form-group { margin-bottom: var(--k4c-space-4); } .k4c-form label { display: block; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); margin-bottom: var(--k4c-space-2); color: var(--k4c-grey-800); } .k4c-form input, .k4c-form textarea, .k4c-form select { width: 100%; padding: var(--k4c-space-3) var(--k4c-space-4); border: 1px solid var(--k4c-grey-200); border-radius: var(--k4c-radius); font-family: var(--k4c-font-body); font-size: var(--k4c-fs-base); background: var(--k4c-white); color: var(--k4c-grey); } .k4c-form input:focus, .k4c-form textarea:focus, .k4c-form select:focus { outline: none; border-color: var(--k4c-purple); box-shadow: 0 0 0 3px var(--q2-focus-ring); } .k4c-form textarea { min-height: 8rem; resize: vertical; } .k4c-form .buttons { margin-top: var(--k4c-space-5); } /* ── News / blog (task 12648) ─────────────────────────────────────────────── */ /* Listing card grid */ .k4c-postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--k4c-space-6); } .k4c-postcard { display: flex; flex-direction: column; background: var(--k4c-white); border: 1px solid var(--k4c-grey-200); border-radius: var(--k4c-radius-lg); overflow: hidden; box-shadow: var(--k4c-shadow-sm); transition: transform var(--k4c-transition), box-shadow var(--k4c-transition); } .k4c-postcard:hover { transform: translateY(-4px); box-shadow: var(--k4c-shadow); } .k4c-postcard__media { display: block; aspect-ratio: 16 / 9; background: var(--k4c-purple-100); overflow: hidden; } .k4c-postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .k4c-postcard__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--k4c-space-4); text-align: center; background: radial-gradient(120% 120% at 15% 20%, color-mix(in oklab, var(--k4c-yellow) 26%, transparent), transparent 46%), linear-gradient(135deg, var(--k4c-purple) 0%, var(--k4c-purple-light) 100%); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); color: var(--k4c-white); letter-spacing: var(--k4c-tracking-caps); text-transform: uppercase; font-size: var(--k4c-fs-sm); } .k4c-postcard__placeholder::before { content: '✦'; display: block; margin-bottom: var(--k4c-space-2); color: var(--k4c-yellow); font-size: var(--k4c-fs-lg); line-height: 1; } .k4c-postcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--k4c-space-5); } .k4c-postcard__cat { margin: 0 0 var(--k4c-space-2); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); text-transform: uppercase; letter-spacing: var(--k4c-tracking-caps); font-size: var(--k4c-fs-xs); color: var(--k4c-purple-light); } .k4c-postcard__title { font-size: var(--k4c-fs-lg); line-height: var(--k4c-lh-tight); margin: 0 0 var(--k4c-space-2); } .k4c-postcard__title a { color: var(--k4c-purple); text-decoration: none; } .k4c-postcard__title a:hover { color: var(--k4c-purple-light); } .k4c-postcard__date { margin: 0 0 var(--k4c-space-3); font-size: var(--k4c-fs-sm); color: var(--k4c-grey-600); } .k4c-postcard__excerpt { margin: 0 0 var(--k4c-space-4); font-size: var(--k4c-fs-sm); color: var(--k4c-grey-800); } .k4c-postcard__link { margin-top: auto; align-self: flex-start; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); font-size: var(--k4c-fs-sm); color: var(--k4c-purple); text-decoration: none; } .k4c-postcard__link:hover { color: var(--k4c-purple-light); } .k4c-postcard__link span { transition: transform var(--k4c-transition); display: inline-block; } .k4c-postcard__link:hover span { transform: translateX(3px); } /* Pagination */ .k4c-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--k4c-space-4); margin-top: var(--k4c-space-8); } .k4c-pagination__link { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); color: var(--k4c-purple); text-decoration: none; padding: var(--k4c-space-2) var(--k4c-space-4); border: 1px solid var(--k4c-grey-200); border-radius: var(--k4c-radius-pill); transition: background var(--k4c-transition), color var(--k4c-transition); } .k4c-pagination__link:hover { background: var(--k4c-purple); color: var(--k4c-white); } .k4c-pagination__status { font-size: var(--k4c-fs-sm); color: var(--k4c-grey-600); } /* Single post */ .k4c-post__hero { margin: 0 auto var(--k4c-space-8); max-width: 60rem; border-radius: var(--k4c-radius-lg); overflow: hidden; box-shadow: var(--k4c-shadow); } .k4c-post__hero img { width: 100%; height: auto; display: block; } .k4c-post__body { margin-inline: auto; } .k4c-post__body :is(iframe, video) { max-width: 100%; } .k4c-post__back { max-width: 46rem; margin: var(--k4c-space-8) auto 0; } .k4c-post__back a { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); color: var(--k4c-purple); text-decoration: none; } .k4c-post__back a:hover { color: var(--k4c-purple-light); } /* ── Utility-page modules (task #12662): image grid + responsive embed ─────── */ .k4c-imggrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .k4c-imgcard { margin: 0; } .k4c-imgcard img { width: 100%; height: auto; display: block; border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow); } .k4c-imgcard figcaption { margin-top: .5rem; text-align: center; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); color: var(--k4c-purple); } .k4c-embed { line-height: 0; } .k4c-embed iframe { display: block; width: 100%; } /* ── Media split — prose column + portrait (task #12670, About page) ───────── */ .k4c-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--k4c-space-8); align-items: start; } .k4c-split .k4c-prose { max-width: none; } .k4c-split .k4c-sec-head { margin-bottom: var(--k4c-space-5); } .k4c-split__media { margin: 0; } .k4c-split__media img { width: 100%; height: auto; display: block; border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow); position: sticky; top: calc(var(--k4c-nav-height) + var(--k4c-space-5)); } .k4c-split--reverse .k4c-split__media { order: -1; } @media (max-width: 820px) { .k4c-split { grid-template-columns: 1fr; gap: var(--k4c-space-6); } .k4c-split__media { max-width: 22rem; margin-inline: auto; order: -1; } .k4c-split__media img { position: static; } } /* ── Card portrait — full-bleed image at card top (team grid, #12670) ──────── */ .k4c-card--media { padding-top: 0; overflow: hidden; } .k4c-card__img { width: calc(100% + var(--k4c-space-6) * 2); margin: 0 calc(var(--k4c-space-6) * -1) var(--k4c-space-3); aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; display: block; background: var(--k4c-purple-100); } /* ============================================================================ Imagery pass (#12665) — shared image conventions Consumed by the figure() and media_split() macros in sections.html.twig. Aspect-ratio boxes reserve space pre-load (CLS guard); rounding + shadow are the sitewide "warm card" treatment. Every colour / radius / space via tokens. ========================================================================== */ /* ---- Standalone responsive figure --------------------------------------- */ .k4c-figure { margin: 0; width: 100%; } .k4c-figure__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--k4c-radius-lg); background: var(--k4c-purple-100); /* graceful placeholder tint while loading */ } /* Ratio variants — the box holds space so images never cause layout shift. */ .k4c-figure--wide .k4c-figure__img, .k4c-figure.k4c-figure--wide { aspect-ratio: 16 / 9; } .k4c-figure--photo .k4c-figure__img { aspect-ratio: 4 / 3; } .k4c-figure--portrait .k4c-figure__img { aspect-ratio: 4 / 5; } .k4c-figure--square .k4c-figure__img { aspect-ratio: 1 / 1; } .k4c-figure--auto .k4c-figure__img { aspect-ratio: auto; height: auto; } /* Framed = white border + soft shadow for feature emphasis (matches the hero). */ .k4c-figure--framed .k4c-figure__img { border: 4px solid color-mix(in oklab, var(--k4c-white) 92%, transparent); box-shadow: var(--k4c-shadow-lg); } .k4c-figure__caption { margin-top: var(--k4c-space-3); font-size: var(--k4c-fs-sm); color: var(--k4c-grey-600); text-align: center; } /* ---- Text + image feature band ------------------------------------------ */ .k4c-mediasplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); } .k4c-mediasplit__title { margin: var(--k4c-space-3) 0 var(--k4c-space-4); } .k4c-mediasplit__actions { display: flex; flex-wrap: wrap; gap: var(--k4c-space-4); margin-top: var(--k4c-space-5); } /* flip = image on the right (default: image left) */ .k4c-mediasplit--flip .k4c-mediasplit__media { order: 2; } @media (max-width: 767.98px) { .k4c-mediasplit { grid-template-columns: 1fr; gap: var(--k4c-space-5); } /* Always image-then-text when stacked, regardless of desktop flip. */ .k4c-mediasplit--flip .k4c-mediasplit__media { order: 0; } } /* ---- GoHighLevel form embeds (#12676) ----------------------------------- */ /* Reusable GHL opt-in iframe wrapper (partials/ghl_form.html.twig). The iframe height is set inline as a pre-paint fallback; GHL's form_embed.js resizes it to content height once loaded. scroll-margin keeps card jump-links clear of the fixed nav. */ .k4c-ghlform { scroll-margin-top: 6rem; } .k4c-ghlform + .k4c-ghlform { margin-top: var(--k4c-space-6); } .k4c-ghlform__eyebrow { margin-bottom: var(--k4c-space-2); } .k4c-ghlform__title { margin: 0 0 var(--k4c-space-2); } .k4c-ghlform__text { margin: 0 0 var(--k4c-space-4); color: var(--k4c-grey-600); } .k4c-ghlform__iframe { display: block; } /* Stacked free-gift forms on /resources/ — one column, comfortably readable. */ .k4c-ghlstack { max-width: 40rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--k4c-space-7); }