/* Website editor sections (Kailah). Loaded only when the org has a configured site. Section shells: .kw-section + kw-bg-* / kw-width-* / kw-align-* / kw-pad-* from the section's style object. Colors come from the theme variables the site already defines, so everything follows the org's branding. */ .kw-section { position: relative; } /* Vertical rhythm scales with the viewport so sections keep breathing room at every width instead of running together on tablets and phones (clamp: phone -> desktop). */ .kw-pad-sm { padding: clamp(10px, 2.2vw, 16px) 0; } .kw-pad-md { padding: clamp(24px, 5vw, 48px) 0; } .kw-pad-lg { padding: clamp(40px, 8vw, 96px) 0; } /* A hero carries its own padding (.kw-hero-text is 96px, the banner is sized by its image), so the section shell adds none at any setting — otherwise "Large" stacked 96px on top of 96px and left a 192px gap. */ .kw-type-hero, .kw-type-system_body.kw-pad-sm, .kw-type-spacer { padding: 0; } /* NOTE: no generic gap between sections. The feed/about blocks carry the live site's own padding (see below), so adding margin here would make the editor show more spacing than the real site. Plain sections use .kw-pad-*. */ .kw-type-org_about, .kw-type-org_about_cards, .kw-type-events_feed, .kw-type-campaigns_feed, .kw-type-resources_feed { padding: 0; } /* The original stylesheet spaces these blocks with element-qualified rules (section.about-area { padding: 150px 0 } and friends). The editor renders the same markup inside a
, with the block as a
, so none of those rules matched and the sections ran together — the editor showed far less spacing than the live site. Re-apply the same values to the div form, and scale them down on narrow screens (the originals are fixed at 150px at every width, which is too much on a phone). */ .kw-section div.hero-area { padding: 30px 0; } .kw-section div.about-area, .kw-section div.blog-area, .kw-section div.mission-area { padding: 150px 0; } .kw-section div.campaigns-area { padding: 40px 0 90px 0; } .kw-section div.event-area { padding-bottom: 150px; } /* Mirrors assets/css/responsive.css for the same blocks, so the editor's phone preview matches the real phone layout. Keep the two in step. */ @media (max-width: 767px) { .kw-section div.hero-area { padding: 100px 0; } .kw-section div.about-area { padding: 50px 0; } .kw-section div.blog-area { padding: 70px 0; } .kw-section div.mission-area { padding: 80px 0; } .kw-section div.campaigns-area { padding: 30px 0 50px 0; } .kw-section div.event-area { padding-bottom: 56px; } } /* A card inside a feed (.blk, .event-blk, .plan-box-1, .kw-listing) paints its own white background, so the rules above deliberately stop at its edge via :not(...) — otherwise a tint, dark, primary or custom-dark section turned the card titles white on white and they vanished. Excluding them here, rather than overriding afterwards, leaves each card's own colour rules untouched at their original specificity. */ .kw-bg-default { background: #fff; } /* The org's own brand colours, from the dashboard's branding settings. */ /* The secondary brand colour. Text follows --theme-on-secondary, which theme-contrast.js computes from that colour's luminance at load, so a dark secondary gets white words instead of inheriting the body's near-black. */ .kw-bg-tint { background: var(--theme-light, #f8f9fb); color: var(--theme-on-secondary, #1a1a1a); } .kw-bg-tint :is(h1, h2, h3, h4, h5, p, li, summary):not(:is(.blk, .event-blk, .plan-box-1, .kw-listing) *) { color: var(--theme-on-secondary, #1a1a1a); } .kw-bg-primary { background: var(--theme-color, #0997d9); color: var(--theme-on-primary, #fff); } .kw-bg-dark { background: #15202b; color: #fff; } .kw-bg-dark :is(h1, h2, h3, h4, h5, p, li, summary):not(:is(.blk, .event-blk, .plan-box-1, .kw-listing) *) { color: #fff; } .kw-bg-dark .hightlight-text { color: var(--theme-light, #cfe8ff); } /* Text on the primary brand colour follows the contrast variable the site already computes, so a pale brand colour keeps dark text. */ .kw-bg-primary :is(h1, h2, h3, h4, h5, p, li, summary):not(:is(.blk, .event-blk, .plan-box-1, .kw-listing) *) { color: var(--theme-on-primary, #fff); } /* Custom chosen but no valid colour yet (still typing a hex): plain white, rather than an unstyled block. */ .kw-bg-custom { background: #fff; } /* A custom colour the admin picked: dark or light decided server-side from the colour's luminance, so the words stay readable either way. */ .kw-bg-custom-dark, .kw-bg-custom-dark :is(h1, h2, h3, h4, h5, p, li, summary):not(:is(.blk, .event-blk, .plan-box-1, .kw-listing) *) { color: #fff; } .kw-bg-custom-light, .kw-bg-custom-light :is(h1, h2, h3, h4, h5, p, li, summary):not(:is(.blk, .event-blk, .plan-box-1, .kw-listing) *) { color: #1a1a1a; } /* The .kw-bg-* rules above also set colour on the section itself, which a card would inherit (.blk declares no colour of its own and .kw-listing is explicitly `color: inherit`). Reset it at the card boundary, back to the site's normal text colour, so each card's own rules take it from there. Only the container is targeted — descendants keep their own colours. */ .kw-section :is(.blk, .event-blk, .plan-box-1, .kw-listing) { color: #505050; } /* Text alignment is inherited, so a centred section centred the text inside its cards too — a card's title and date read left-aligned, as they always have. The :not() on the alignment rules stops those rules reaching a card, but not the inheritance from the section itself, so reset it here. A card that centres its own text (the plan cards' text-center) still does, because that is set on the card and wins over this. */ .kw-section :is(.blk, .event-blk, .kw-listing) { text-align: left; } /* Section width. The shell already carries kw-width-*; these give the middle options real widths (previously only "contained" vs "full" existed, with nothing in between). Applied to the inner container so the section's own background still spans the full page. */ .kw-width-narrow > .container, .kw-width-narrow > .container-fluid { max-width: 720px; } .kw-width-medium > .container, .kw-width-medium > .container-fluid { max-width: 960px; } .kw-width-contained > .container { max-width: 1130px; } /* "full" keeps Bootstrap's container-fluid, set by kw_open_container. */ /* ── Column rows (edit mode) ────────────────────────────────────────────── A Columns section's cells accept blocks of their own, as the broadcast email editor's smart cells do. These are editor-only affordances: the published page just gets .kw-col-row wrappers, which carry no styling of their own beyond the stacking gap. */ .kw-column > .kw-col-row + .kw-col-row { margin-top: 12px; } .kw-edit .kw-column[data-kw-col] { position: relative; min-height: 90px; } .kw-edit .kw-column.kw-col-over { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 8px; } .kw-col-drop-line { position: absolute; height: 3px; background: #2563eb; border-radius: 2px; z-index: 2147483646; pointer-events: none; } /* Handle for dragging one block within a column, shown on the page while its section is selected. Small and tucked into the corner so it does not sit on top of the content it moves. */ .kw-edit .kw-col-row { position: relative; } .kw-block-handle { position: absolute; top: 2px; right: 2px; z-index: 3; display: none; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 5px; background: #fff; border: 1px solid #d9dee6; color: #64748b; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.12); } .kw-block-handle:active { cursor: grabbing; } .kw-section.kw-selected .kw-col-row:hover > .kw-block-handle, .kw-section.kw-selected .kw-block-handle:hover { display: flex; } .kw-block-handle svg { width: 12px; height: 12px; pointer-events: none; } /* Dropping beside a section: the edge it will join lights up, so it is clear the new thing lands alongside rather than above or below. */ .kw-edit .kw-section { position: relative; } /* A wide tinted strip rather than a hairline: the band is a third of the content width, so the drop zone is large and the indicator should show that rather than suggesting a precise edge. */ .kw-side-left::before, .kw-side-right::before { content: ""; position: absolute; top: 0; bottom: 0; width: 33%; background: linear-gradient(90deg, rgba(37,99,235,.18), rgba(37,99,235,.04)); border-left: 4px solid #2563eb; z-index: 6; pointer-events: none; } .kw-side-left::before { left: 0; } .kw-side-right::before { right: 0; border-left: 0; border-right: 4px solid #2563eb; background: linear-gradient(270deg, rgba(37,99,235,.18), rgba(37,99,235,.04)); } .kw-side-left::after, .kw-side-right::after { content: "Place alongside"; position: absolute; top: 8px; z-index: 6; background: #2563eb; color: #fff; font: 600 11px/1 system-ui, sans-serif; padding: 5px 8px; border-radius: 5px; pointer-events: none; white-space: nowrap; } .kw-side-left::after { left: 10px; } .kw-side-right::after { right: 10px; } /* "+" buttons on a column's edges, for adding one beside it. Hidden until the column is hovered so they do not clutter the page. */ .kw-edit .kw-column[data-kw-col] { position: relative; } .kw-col-add { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: none; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #d9dee6; background: #fff; color: #2563eb; font: 600 15px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.14); } .kw-col-add-before { left: -12px; } .kw-col-add-after { right: -12px; } .kw-edit .kw-column:hover > .kw-col-add { display: flex; } .kw-col-add:hover { background: #2563eb; color: #fff; border-color: #2563eb; } /* Quick actions in an empty column: the same four starts the email editor offers in an empty cell. */ .kw-col-empty { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 90px; padding: 12px; border: 1px dashed #c9ccd4; border-radius: 8px; background: #fafbfc; } .kw-col-act { font: 500 12px/1 inherit; color: #475569; background: #fff; border: 1px solid #d9dee6; border-radius: 6px; padding: 7px 10px; cursor: pointer; } .kw-col-act:hover { border-color: #2563eb; color: #2563eb; } /* Add-a-section affordance between sections (edit mode). A list page is a single very tall section, so without these there was no visible place to aim a drop and it looked as though sections could not be added at all. */ .kw-edit .kw-page > .kw-section { position: relative; } .kw-edit .kw-page > .kw-section::before, .kw-edit .kw-page > .kw-section::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; pointer-events: none; opacity: 0; transition: opacity .12s; background: repeating-linear-gradient(90deg, #2563eb 0 6px, transparent 6px 12px); } .kw-edit .kw-page > .kw-section::before { top: 0; } .kw-edit .kw-page > .kw-section::after { bottom: 0; } .kw-edit.kw-dragging .kw-page > .kw-section::before, .kw-edit.kw-dragging .kw-page > .kw-section::after { opacity: .35; } /* The one element inside the selected section that the panel is styling. */ .kw-edit .kw-el-selected { outline: 2px solid #7c3aed; outline-offset: 3px; border-radius: 3px; } /* ── Per-element styling ────────────────────────────────────────────────── Set on one element (a heading, a paragraph, a button) rather than the whole section, via kw_el_attrs(). Sizes are relative so a heading styled "lg" stays a heading rather than jumping to a fixed pixel size. */ .kw-el-xs { font-size: .75em; } .kw-el-sm { font-size: .875em; } .kw-el-md { font-size: 1em; } .kw-el-lg { font-size: 1.25em; } .kw-el-xl { font-size: 1.5em; } .kw-el-xxl { font-size: 2em; } .kw-el-normal { font-weight: 400; } .kw-el-medium { font-weight: 600; } .kw-el-bold { font-weight: 700; } /* An element's own colour is emitted as `color:#hex !important` by kw_el_attrs(), because the SECTION's text colour is itself !important (it has to beat the background's automatic contrast). Without that, picking a colour for one heading inside a section that has its own colour would do nothing. */ /* Blocks with `margin: ... auto` stay visually centered even when the text inside them is aligned left or right — that is why a section set to Left aligned its body copy but left its heading block looking centered. Reset the side margins for the non-centered alignments. */ .kw-align-left .section-title .section-subtext, .kw-align-left .kw-heading .section-subtext, .kw-align-left .kw-hero-text .lead { margin-left: 0; margin-right: auto; } .kw-align-right .section-title .section-subtext, .kw-align-right .kw-heading .section-subtext, .kw-align-right .kw-hero-text .lead { margin-left: auto; margin-right: 0; } /* The hero's own heading and lead follow the section too. */ .kw-align-left .kw-hero-text, .kw-align-left .kw-hero-split .hero-title { text-align: left; } .kw-align-right .kw-hero-text, .kw-align-right .kw-hero-split .hero-title { text-align: right; } .kw-align-center .kw-hero-text { text-align: center; } /* ── A feed with fewer cards than it has room for ───────────────────────── One resource in a 3-up carousel sat hard left with two empty slots beside it. kw-feed-few centers what is there. The section's own alignment still wins: these rules are skipped entirely when the admin has chosen left or right, so "center unless you say otherwise" holds. */ /* Not a carousel any more (main.js and the editor both skip Owl when there is nothing to scroll), so these are laid out directly: a centred row that keeps each card the width it would have had in the 3-up view, rather than one card stretched across the page. */ .all-campains.kw-feed-few { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; } .all-campains.kw-feed-few > * { flex: 0 1 calc((100% - 60px) / 3); min-width: 260px; } /* Two cards keep their size and sit together in the middle. */ .all-campains.kw-feed-n2 > * { flex: 0 1 calc((100% - 30px) / 3); } .kw-align-left .all-campains.kw-feed-few { justify-content: flex-start; } .kw-align-right .all-campains.kw-feed-few { justify-content: flex-end; } /* The carousel pads 65px each side for its arrows; with nothing to scroll those arrows are hidden, so the padding only pushes the cards off-center. */ .all-campains.kw-feed-few { padding-left: 0; padding-right: 0; } .all-campains.kw-feed-few .owl-nav { display: none; } /* Listing grids (People, Directory) use CSS Grid with fixed columns. */ .kw-align-center .kw-listings.kw-feed-few, .kw-section:not(.kw-align-left):not(.kw-align-right) .kw-listings.kw-feed-few { justify-content: center; } .kw-align-left .kw-listings.kw-feed-few { justify-content: start; } .kw-align-right .kw-listings.kw-feed-few { justify-content: end; } /* Cards keep their natural column width rather than stretching to fill. */ .kw-listings.kw-feed-few { grid-auto-columns: minmax(0, 1fr); } /* Grid feeds (groups, memberships) use a Bootstrap row. */ .kw-align-center .row.kw-feed-few, .kw-section:not(.kw-align-left):not(.kw-align-right) .row.kw-feed-few { justify-content: center; } /* An explicit left or right alignment overrides the centering above. */ .kw-align-left .row.kw-feed-few { justify-content: flex-start; } .kw-align-right .row.kw-feed-few { justify-content: flex-end; } /* ── Header and footer arrangements ────────────────────────────────────── One class on the