(inline by default) instead of a — reset it so
the icon/heading/text still stack the same as the unlinked version. */
.icon-text-item--linked {
text-decoration: none;
color: inherit;
}
.icon-text-content {
flex: 1;
min-width: 0;
}
/* ── Icon position: Left ─────────────────────────────────────────────────── */
.icon-pos-left .icon-text-item {
display: flex;
align-items: center;
gap: 20px;
text-align: left;
background-color: #325432;
border-radius: 10px;
border: 1px solid #FFB500;
padding: 8px 24px;
}
.icon-pos-left .icon-text-icon {
flex-shrink: 0;
margin-bottom: 0;
}
.icon-text-icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 40px;
line-height: 1;
}
.icon-text-icon img,
.icon-text-icon svg {
width: 48px;
height: 48px;
object-fit: contain;
}
/* SVG pasted by user may carry its own width/height — force it to fill the wrapper */
.icon-text-svg-wrap svg,
.icon-text-icon > svg {
width: 100% !important;
height: 100% !important;
display: block;
}
.icon-text-heading {
/* Heading Tag (Display panel) can be span, which is inline by default —
force block so margin/line-height/full-width behave the same
regardless of which tag is selected. */
display: block;
margin: 0px;
font-size: var(--wp--preset--font-size--body);
font-weight: 500;
line-height: 1.3;
color: #fff;
}
.icon-text-body {
margin: 0 0 14px;
font-size: var(--wp--preset--font-size--body);
line-height: 1.65;
color: #FABD05;
font-weight: 500;
}
.icon-text-link {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
text-decoration: underline;
color: currentColor;
transition: opacity 0.2s;
}
.icon-text-link:hover {
opacity: 0.76;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.icon-text-grid {
grid-template-columns: repeat(var(--icon-text-cols-tablet), 1fr);
}
.icon-text-track .icon-text-item {
flex-basis: calc(100% / var(--icon-text-cols-tablet) - var(--icon-text-gap) + var(--icon-text-gap) / var(--icon-text-cols-tablet));
}
}
@media (max-width: 600px) {
.icon-text-grid {
grid-template-columns: repeat(var(--icon-text-cols-mobile), 1fr);
}
.icon-text-track .icon-text-item {
flex-basis: calc(100% / var(--icon-text-cols-mobile) - var(--icon-text-gap) + var(--icon-text-gap) / var(--icon-text-cols-mobile));
}
}
/* ── Icon position: top ─────────────────────────────────────────────────── */
.wp-block-custom-blocks-icon-text.icon-pos-top .icon-text-icon {
width: 62px;
height: 62px;
margin: 0 auto;
}
.wp-block-custom-blocks-icon-text.icon-pos-top .icon-text-item {
padding: 12px;
border-radius: 16px;
border: 1px solid #cccccc;
background: #fff;
color: #1D1E3A;
}
.wp-block-custom-blocks-icon-text.icon-pos-top .icon-text-item .icon-text-heading {
color: #1D1E3A;
font-weight: 600;
margin-top: 10px;
}
/* =============================================================
Container Block
============================================================= */
.wp-block-custom-blocks-container {
width: 100%;
box-sizing: border-box;
}
.wp-block-custom-blocks-container__inner {
width: 100%;
padding: 0 var(--spacing--lg);
box-sizing: border-box;
}
.wp-block-custom-blocks-container__inner .wp-block-custom-blocks-container__inner {
padding: 0;
}
/* ── Background image (+ optional color/gradient overlay) ────
*
* background-image here is only the non-responsive fallback — Container's
* actual background-image (layering the per-breakpoint Background Color/
* Gradient control on top of the image) is generated dynamically in
* custom-blocks.php's custom_blocks_responsive_background_css(), which
* wins the cascade (later in source order) at equal specificity. Kept
* here for background-size/position/repeat, which that function doesn't
* set. */
.wp-block-custom-blocks-container[style*="--cb-bg-image"] {
background-image: var(--cb-bg-overlay, none), var(--cb-bg-image) !important;
background-size: cover, cover !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* =============================================================
Editor canvas — Width Control UI
============================================================= */
.cb-width-control {
margin-bottom: 8px;
}
.cb-width-control__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #1e1e1e;
margin: 0 0 8px;
}
.cb-width-control__toggle {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
/* =============================================================
Section Block — shared frontend styles
============================================================= */
.wp-block-custom-blocks-section {
width: 100%;
display: block;
}
/* Section Padding (Theme Options > Layout & Grid) + the responsive Padding/
* Margin control's per-instance overrides are generated dynamically —
* see custom-blocks.php's custom_blocks_responsive_spacing_css(), enqueued
* via wp_add_inline_style() so the @media breakpoints always reflect the
* LIVE values from Theme Options > Responsive (CSS custom properties can't
* be used inside an @media condition, so this can't be static compiled CSS). */
/* ── Background image (+ optional color/gradient overlay) ── */
.wp-block-custom-blocks-section[style*="--cb-bg-image"] {
background-image: var(--cb-bg-overlay, none), var(--cb-bg-image) !important;
background-size: cover, cover !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* ── Slide mode ────────────────────────────────────────────── */
.wp-block-custom-blocks-section.is-slider {
position: relative;
}
.section-slider-track {
position: relative;
width: 100%;
overflow: hidden;
}
.section-slide {
width: 100%;
box-sizing: border-box;
transition: opacity 0.6s ease;
}
/*
* CLS prevention — CSS sets the initial slider layout before JS runs.
*
* The first slide stays in normal flow and drives the track height.
* All subsequent slides are absolutely stacked behind it and hidden.
* JS only needs to lock the measured height then make slide[0] absolute —
* no visible layout shift ever occurs.
*/
.wp-block-custom-blocks-section.is-slider .section-slide:first-child {
position: relative;
opacity: 1;
z-index: 1;
}
.wp-block-custom-blocks-section.is-slider .section-slide + .section-slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
z-index: 0;
}
/* ── Arrow buttons ─────────────────────────────────────────── */
.section-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: #fff;
border: 1px solid #C6D1E2;
color: #000;
width: 64px;
height: 64px;
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.section-slider-btn:hover,
.section-slider-btn:focus-visible {
background: var(--color--green-forest);
border-color: var(--color--green-forest);
color: #fff;
transform: translateY(-50%) scale(1.08);
}
.section-slider-btn:focus-visible {
background: var(--color--green-forest);
border-color: var(--color--green-forest);
color: #fff;
}
.section-slider-btn.is-prev {
left: -80px;
}
.section-slider-btn.is-next {
right: -80px;
}
@media (max-width: 1330px) {
.section-slider-btn {
width: 45px;
height: 45px;
font-size: 18px;
}
.section-slider-btn.is-prev {
left: 0px;
}
.section-slider-btn.is-next {
right: 0px;
}
}
@media (max-width: 480px) {
.section-slider-btn {
width: 40px;
height: 40px;
font-size: 18px;
}
.section-slider-btn.is-prev {
left: 8px;
}
.section-slider-btn.is-next {
right: 8px;
}
}
/* ── Dot navigation ────────────────────────────────────────── */
.section-slider-dots {
display: flex;
justify-content: center;
gap: 0.8rem;
padding: 0;
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
z-index: 2;
}
.section-slider-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border: none;
cursor: pointer;
padding: 0;
}
.section-slider-dot::before {
content: "";
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.section-slider-dot:hover::before,
.section-slider-dot:focus-visible::before {
background: rgba(255, 255, 255, 0.2);
}
.section-slider-dot.is-active::before {
background: var(--color--white);
transform: scale(1.3);
}
.section-slider-dot:focus-visible {
outline: 2px solid var(--color--white);
outline-offset: 2px;
border-radius: 4px;
}
/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.section-slide {
transition: none !important;
}
.section-slider-btn {
transition: none;
}
.section-slider-dot::before {
transition: none;
}
}
/* =============================================================
Editor canvas styles
============================================================= */
.wp-block-custom-blocks-section-edit.is-slide-mode {
outline: 2px dashed #0073aa;
outline-offset: 4px;
padding: 4px;
}
/* ── Tabs Block — pill nav bar + panels ────────────────────────────────────
TabItemBlock's own content (whatever blocks were placed inside) renders
unstyled here — this block only owns the tab bar and show/hide behavior,
never the panel content's own appearance. */
.wp-block-custom-blocks-tabs,
.wp-block-custom-blocks-tabs-edit {
width: 100%;
}
.tabs-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing--sm);
margin-bottom: var(--spacing--xl);
}
.tabs-nav-btn {
appearance: none;
border: none;
background: transparent;
color: var(--color--near-black);
font-family: var(--font-family--body);
font-size: var(--font-size--body);
font-weight: 600;
padding: var(--spacing--sm-plus) var(--spacing--lg);
border-radius: var(--wp--custom--border-radius--pill, 999px);
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
}
.tabs-nav-btn:hover {
background: var(--color--warm-grey);
}
.tabs-nav-btn.is-active {
background: var(--color--green-light);
color: var(--color--near-black);
}
.tabs-nav-btn.is-active:hover {
background: var(--color--green-light);
}
.tabs-nav-btn:focus-visible {
outline: 2px solid var(--color--green-forest);
outline-offset: 2px;
}
/* Editor-only "+ Add Tab" button — never rendered on the frontend. */
.tabs-nav-btn--add {
border: 1px dashed var(--color--medium-grey);
color: var(--color--medium-grey);
}
.tabs-nav-btn--add:hover {
background: transparent;
border-color: var(--color--green-forest);
color: var(--color--green-forest);
}
.tabs-panel-wrap[hidden] {
display: none;
}
.tab-panel {
width: 100%;
}
/* ── Editor canvas ──────────────────────────────────────────────────────── */
.tab-item-label-field {
display: flex;
align-items: center;
gap: var(--spacing--sm);
margin-bottom: var(--spacing--md);
padding: var(--spacing--sm) var(--spacing--md);
background: #f6f7f7;
border: 1px dashed #ccc;
border-radius: 4px;
}
.tab-item-label-field__prefix {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #757575;
flex-shrink: 0;
}
.tab-item-label-field__input {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
font-weight: 600;
color: var(--color--near-black);
outline: none;
}
/* ── Image Grid Block — responsive logo/badge row ──────────────────────────
Single row on desktop, compact multi-column grid on narrower screens.
Breakpoints (1024/768) match Card's own grid breakpoints for consistency
across the plugin. */
.wp-block-custom-blocks-image-grid,
.wp-block-custom-blocks-image-grid-edit {
display: grid;
grid-template-columns: repeat(var(--image-grid-columns-desktop, 6), 1fr);
align-items: center;
justify-items: center;
gap: var(--spacing--xl);
width: 100%;
}
@media (max-width: 1024px) {
.wp-block-custom-blocks-image-grid,
.wp-block-custom-blocks-image-grid-edit {
grid-template-columns: repeat(var(--image-grid-columns-tablet, 4), 1fr);
gap: var(--spacing--lg);
}
}
@media (max-width: 768px) {
.wp-block-custom-blocks-image-grid,
.wp-block-custom-blocks-image-grid-edit {
grid-template-columns: repeat(var(--image-grid-columns-mobile, 3), 1fr);
gap: var(--spacing--md);
}
}
.image-grid-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.image-grid-link {
display: inline-flex;
}
.image-grid-img {
height: var(--image-grid-logo-height, 48px);
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Editor sidebar ("Content" panel) — the collapsible image list is styled
entirely with inline styles in editor.js, matching the Card block's
manual-card list byte-for-byte (same collapsible-row look/interaction),
so there's nothing to declare here. */
/*# sourceMappingURL=custom-blocks.css.map */