/* =========================================================== BB ICON FEATURES — FULL REFRESHED STYLESHEET - Icon surface, ripples, card background/overlay, button styles - Per-card shape (square/landscape/portrait/auto) with modern aspect-ratio - Legacy fallback when aspect-ratio not supported (use .no-aspect-ratio on ) - Uses CSS variables set by the block for theming and preview parity =========================================================== */ /* ---------- Reset / base ---------- */ .bb-icon-feature { position: relative; display: flex; align-items: center; gap: var(--bb-gap, 24px); margin: 0; padding: var(--bb-padding, 0); background: var(--bb-card-bg, transparent); border-radius: var(--bb-card-radius, 24px); min-height: var(--bb-min-height, auto); box-sizing: border-box; /* keep background sizing/position explicit and avoid transitions on them */ background-repeat: no-repeat; background-size: var(--bb-card-bg-image-size, cover); background-position: var(--bb-card-bg-position, center center); /* Only animate transform/box-shadow/color -> avoid jank on background images */ transition-property: transform, box-shadow, background-color, color; transition-duration: 0.25s; will-change: transform; -webkit-transform: translateZ(0); transform-style: preserve-3d; backface-visibility: hidden; } /* hover lift / card hover behavior */ .bb-icon-feature[data-card-hover="1"]:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.14); background: var(--bb-card-bg-hover, var(--bb-card-bg, transparent)); } .bb-icon-feature[data-card-hover="0"]:hover { transform: none; box-shadow: none; background: var(--bb-card-bg, transparent); } /* ---------- Layout & alignment (icon positions) ---------- */ .bb-icon-feature[data-icon-position="left"] { flex-direction: row; } .bb-icon-feature[data-icon-position="top"] { flex-direction: column; } .bb-icon-feature[data-icon-position="right"] { flex-direction: row-reverse; } .bb-icon-feature[data-h-align="left"] { justify-content: flex-start; text-align: left; } .bb-icon-feature[data-h-align="center"] { justify-content: center; text-align: center; } .bb-icon-feature[data-h-align="right"] { justify-content: flex-end; text-align: right; } .bb-icon-feature[data-icon-position="top"][data-h-align="left"] { align-items: flex-start; text-align: left; } .bb-icon-feature[data-icon-position="top"][data-h-align="center"] { align-items: center; text-align: center; } .bb-icon-feature[data-icon-position="top"][data-h-align="right"] { align-items: flex-end; text-align: right; } .bb-icon-feature[data-v-align="top"] { align-items: flex-start; } .bb-icon-feature[data-v-align="center"] { align-items: center; } .bb-icon-feature[data-v-align="bottom"] { align-items: flex-end; } /* ---------- Icon hit area + visible surface ---------- */ .bb-icon-wrap { display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; } /* hit-area pseudo element (fuzz) - does not move layout */ .bb-icon-wrap::before { content: ""; position: absolute; left: calc(-1 * var(--bb-fuzz, 0px)); top: calc(-1 * var(--bb-fuzz, 0px)); right: calc(-1 * var(--bb-fuzz, 0px)); bottom: calc(-1 * var(--bb-fuzz, 0px)); background: transparent; z-index: 0; pointer-events: auto; } /* visible circle surface */ .bb-icon-surface { width: var(--bb-circle-size, 90px); height: var(--bb-circle-size, 90px); background: var(--bb-circle-bg, #f3f3f3); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; transition: box-shadow .25s ease, background .25s ease; z-index: 1; overflow: visible; } /* icon element (fontawesome / svg) */ .bb-icon-surface i, .bb-icon-surface svg { width: var(--bb-icon-size, 42px); height: var(--bb-icon-size, 42px); font-size: var(--bb-icon-size, 42px); color: var(--bb-icon-color, #F4B225); display: flex !important; align-items: center; justify-content: center; line-height: 1; transition: color .25s ease; position: relative; z-index: 4; } /* hover surface */ .bb-icon-feature:hover .bb-icon-surface { background: var(--bb-circle-bg-hover, #e0e0e0); box-shadow: 0 8px 18px rgba(0,0,0,0.15); } .bb-icon-feature:hover .bb-icon-surface i { color: var(--bb-icon-hover-color, #ffffff); } /* ---------- Text content ---------- */ .bb-icon-content { display: flex; flex-direction: column; } .bb-icon-content h3 + p { margin-top: var(--bb-title-desc-gap, 10px); } .bb-icon-content h3 { font-size: var(--bb-title-size, 24px); font-weight: var(--bb-title-weight, 700); color: var(--bb-title-color, #222222); margin: 0; } .bb-icon-content p { margin: 0; font-size: var(--bb-desc-size, 17px); line-height: 1.6; color: var(--bb-desc-color, #4a4a4a); } /* Editor preview coloring fix */ .editor-styles-wrapper .bb-icon-feature .bb-icon-content h3 { color: var(--bb-title-color) !important; } .editor-styles-wrapper .bb-icon-feature .bb-icon-content p { color: var(--bb-desc-color) !important; } /* ---------- Ripples / Animations ---------- */ .bb-icon-surface::before, .bb-icon-surface::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(0.8); pointer-events: none; } .bb-icon-surface::before { z-index: 2; background: var(--bb-pulse-outer, rgba(244,178,37,0.15)); transition: opacity .65s ease-out, transform .65s ease-out; } .bb-icon-surface::after { z-index: 3; background: var(--bb-pulse-inner, rgba(244,178,37,0.25)); transition: opacity .45s ease-out, transform .45s ease-out; } .bb-anim-ripple .bb-icon-wrap:hover .bb-icon-surface::after { opacity: 1; transform: scale(var(--bb-ripple-inner, 1.45)); } .bb-anim-ripple .bb-icon-wrap:hover .bb-icon-surface::before { opacity: 1; transform: scale(var(--bb-ripple-outer, 1.8)); } /* ---------- Image background / overlay ---------- */ /* Uses css vars --bb-bg-overlay-start / --bb-bg-overlay-end (0..1) set by the block */ .bb-icon-feature[style*="background-image"] { color: #fff; position: relative; } .bb-icon-feature[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,var(--bb-bg-overlay-start,0.18)) 0%, rgba(0,0,0,var(--bb-bg-overlay-end,0.45)) 100%); z-index: 2; border-radius: inherit; pointer-events: none; } /* ensure inner content sits above overlay */ .bb-icon-feature[style*="background-image"] .bb-icon-content, .bb-icon-feature[style*="background-image"] .bb-icon-surface { position: relative; z-index: 3; } /* ---------- Buttons (card-level) ---------- */ .bb-card-button-wrap { display: flex; justify-content: var(--bb-card-button-align, flex-start); width: 100%; box-sizing: border-box; z-index: 4; } .bb-card-button { display: inline-block; padding: 10px 18px; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .12s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.08); border: none; cursor: pointer; border-radius: var(--bb-card-button-radius, 8px); color: var(--bb-card-button-color, #111); background: var(--bb-card-button-bg, #f4b225); } /* outline variant uses inline style / inline border color; CSS only avoids overwriting */ .bb-card-button-outline { background: transparent !important; box-shadow: none !important; } /* hover/focus */ .bb-card-button:hover, .bb-card-button:focus { transform: translateY(-2px); text-decoration: none; outline: none; } /* editor: prevent navigation while editing */ .editor-styles-wrapper .bb-card-button { pointer-events: none; } /* accessibility focus helpers */ .bb-icon-surface:focus, .bb-icon-surface:focus-visible, .bb-card-button:focus { outline: 3px solid rgba(21,156,228,0.25); outline-offset: 4px; } /* ---------- Per-card shape support ---------- */ /* Modern: aspect-ratio when data-shape="square" */ .bb-icon-feature[data-shape="square"] { aspect-ratio: 1 / 1; } /* optional presets for landscape/portrait if chosen (these don't force responsive behavior) */ .bb-icon-feature[data-shape="landscape"] { aspect-ratio: 16 / 9; } .bb-icon-feature[data-shape="portrait"] { aspect-ratio: 3 / 4; } /* Legacy fallback: add .no-aspect-ratio to (theme can add this if needed) */ .no-aspect-ratio .bb-icon-feature[data-shape="square"] { position: relative; } .no-aspect-ratio .bb-icon-feature[data-shape="square"]::before { content: ""; display: block; padding-top: 100%; } .no-aspect-ratio .bb-icon-feature[data-shape="square"] > .bb-icon-content, .no-aspect-ratio .bb-icon-feature[data-shape="square"] > .bb-icon-wrap { position: absolute; inset: 0; } /* Ensure background behaves and does not jank on hover */ .bb-icon-feature[data-shape="square"] { background-size: var(--bb-card-bg-image-size, cover) !important; background-position: var(--bb-card-bg-position, center center) !important; } /* ---------- Editor helpers / mini controls ---------- */ .bb-mini-color-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; } .bb-mini-color-label { min-width: 120px; font-weight: 600; } .bb-mini-swatch { width: 18px; height: 18px; padding: 0; border: none; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset; } .bb-mini-swatch::-webkit-color-swatch-wrapper { padding: 0; } .bb-mini-swatch::-webkit-color-swatch { border: none; border-radius: 3px; } .bb-mini-hex { width: 96px; min-width: 96px; } @media (max-width: 480px) { .bb-mini-color-row { gap: 8px; flex-wrap: wrap; } .bb-mini-color-label { min-width: auto; width: 100%; } } /* ---------- Small utility helpers ---------- */ /* Force full-width content inside card for centered content, useful when card becomes square */ .bb-icon-feature .bb-icon-content { width: 100%; } /* End of stylesheet */