/* ==================================================
PECB Extensions: styles shared by all widgets.
================================================== */
/* --------------------------------------------------
Button: pill with a round arrow icon that slides from left to right on hover.
Label
Widgets recolor it through these custom properties. Outside an Elementor widget (the plugin's search page
template) a .pecb-scope ancestor gives the same styles.
-------------------------------------------------- */
:where(.pecb-button) {
--pecb-button-bg: #a11e29;
--pecb-button-color: #fff;
--pecb-button-icon-bg: #fff;
--pecb-button-icon-color: #d71920;
--pecb-button-ease: 300ms cubic-bezier(0, 0, .2, 1);
}
:is(.elementor-widget, .pecb-scope) .pecb-button {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 48px;
padding: 0 25px 0 55px; /* room for the icon on the left */
border: 0;
border-radius: 999px;
background-color: var(--pecb-button-bg);
color: var(--pecb-button-color);
font-size: 15px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: padding var(--pecb-button-ease), background-color var(--pecb-button-ease), color var(--pecb-button-ease),
box-shadow var(--pecb-button-ease);
}
/* Hover: text and icon swap sides; total padding stays the same so the width doesn't change */
:is(.elementor-widget, .pecb-scope) .pecb-button:hover,
:is(.elementor-widget, .pecb-scope) .pecb-button:focus-visible {
padding: 0 55px 0 25px;
color: var(--pecb-button-color);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%);
}
.pecb-button__icon {
position: absolute;
top: 50%;
left: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--pecb-button-icon-bg);
color: var(--pecb-button-icon-color);
transform: translateY(-50%);
transition: left var(--pecb-button-ease);
}
.pecb-button__icon svg {
display: block;
width: 16px;
height: 16px;
}
.pecb-button:hover .pecb-button__icon,
.pecb-button:focus-visible .pecb-button__icon {
left: calc(100% - 38px);
}
/* Outline variant: white with a thin border, light icon circle */
:where(.pecb-button--outline) {
--pecb-button-bg: #fff;
--pecb-button-color: #0f172a;
--pecb-button-icon-bg: #f1f5f9;
--pecb-button-icon-color: #0f172a;
--pecb-button-border: #e2e8f0;
}
:is(.elementor-widget, .pecb-scope) .pecb-button--outline {
box-shadow: inset 0 0 0 1px var(--pecb-button-border);
}
:is(.elementor-widget, .pecb-scope) .pecb-button--outline:hover,
:is(.elementor-widget, .pecb-scope) .pecb-button--outline:focus-visible {
--pecb-button-border: #cbd5e1;
}
@media (prefers-reduced-motion: reduce) {
:is(.elementor-widget, .pecb-scope) .pecb-button,
.pecb-button__icon { transition: none; }
}
/* --------------------------------------------------
Media placeholder: where the API has no image (Skills course cards and page, the header's search tiles).
The PECB look: navy panel, the thin circle line of the Hero and CTA, a red play button, the white wordmark.
(the element keeps its own size: aspect-ratio, width, radius)
Widgets size it through these custom properties:
--pecb-ph-bg panel color --pecb-ph-play play button size
--pecb-ph-line circle line --pecb-ph-logo wordmark width (0 hides it)
-------------------------------------------------- */
:where(.pecb-media-placeholder) {
--pecb-ph-bg: #0f172a;
--pecb-ph-line: rgba(255, 255, 255, .16);
--pecb-ph-play: 56px;
--pecb-ph-logo: 60px;
}
.elementor-widget .pecb-media-placeholder {
position: relative;
overflow: hidden;
background-color: var(--pecb-ph-bg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23a11e29'/%3E%3Cpath d='M23 19.5v17l14-8.5z' fill='%23fff'/%3E%3C/svg%3E");
background-position: center;
background-size: var(--pecb-ph-play) var(--pecb-ph-play);
background-repeat: no-repeat;
}
/* Circle line in the top-right corner */
.elementor-widget .pecb-media-placeholder::before {
content: "";
position: absolute;
top: -52%;
right: -18%;
width: 78%;
aspect-ratio: 1;
border: 1px solid var(--pecb-ph-line);
border-radius: 50%;
pointer-events: none;
}
/* PECB wordmark, bottom left */
.elementor-widget .pecb-media-placeholder::after {
content: "";
position: absolute;
left: 6%;
bottom: 9%;
width: var(--pecb-ph-logo);
aspect-ratio: 196.87 / 69.14;
opacity: .92;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196.87 69.14'%3E%3Cg fill='%23fff'%3E%3Cpath d='M142.14,26.13v.1c-.13.72-.66,1.3-1.38,1.49l-4.39,1.15c-.22.05-.45.08-.68.08-1.23,0-2.33-.81-2.66-1.96-.52-1.79-1.66-4.4-4.15-6.6-1.57-1.39-3.7-2.22-6.34-2.46l-.52-.05v-7.87l.72.03c4.63.2,8.65,1.57,11.95,4.11,3.57,2.73,6.07,6.73,7.43,11.88l.02.1Z'/%3E%3Cpath d='M158.02,10v49.13h-3.9c-2.72,0-4.95-2.17-5.03-4.87-.01-.05-.01-.11-.01-.17V15.04c0-.06,0-.12.01-.17.08-2.7,2.31-4.87,5.03-4.87h3.9Z'/%3E%3Cpath d='M10,15.04v39.05c0,2.78,2.26,5.04,5.04,5.04h3.9V10h-3.9c-2.78,0-5.04,2.26-5.04,5.04Z'/%3E%3Cpath d='M48.19,24.81c0,4.28-1.39,7.97-4.13,10.95-2.77,3.02-7.69,4.55-14.62,4.55h-7.93v-8.28h8.02c3.59,0,6.11-.62,7.5-1.86,1.36-1.2,2.02-2.9,2.02-5.17,0-1.63-.4-3.03-1.21-4.16-.79-1.12-1.81-1.83-3.1-2.19-.62-.16-2.05-.36-5.35-.36h-7.89v-8.28h7.39c3.19,0,5.58.15,7.3.46,2.45.41,4.56,1.21,6.27,2.39,1.73,1.2,3.14,2.88,4.17,5.01,1.03,2.11,1.55,4.44,1.55,6.94Z'/%3E%3Cpath d='M89.14,29.65v3.21c0,2.78-2.26,5.04-5.04,5.04h-17.46v-8.25h22.49Z'/%3E%3Cpath d='M91.44,15.04v3.24h-24.8v-8.28h19.76c2.78,0,5.04,2.26,5.04,5.04Z'/%3E%3Cpath d='M55.14,15.04v39.05c0,2.78,2.26,5.04,5.04,5.04h3.9V10h-3.9c-2.78,0-5.04,2.26-5.04,5.04Z'/%3E%3Cpath d='M108.91,26c-.92,2.64-1.38,5.39-1.38,8.19,0,3.64.55,6.83,1.63,9.51,1.02,2.55,2.62,4.47,4.76,5.71,1.51.89,3.14,1.47,4.85,1.74l.68.11v7.88l-1.04-.1c-3.85-.35-7.14-1.37-9.78-3.03-3.35-2.11-5.93-5.2-7.67-9.19-1.7-3.89-2.56-8.13-2.56-12.6,0-4.88.98-9.22,2.92-12.88,1.97-3.72,4.81-6.59,8.45-8.53,2.65-1.41,5.54-2.31,8.6-2.68l1.08-.13v7.89l-.69.11c-2.05.31-3.85.99-5.33,2.02-2.13,1.48-3.65,3.49-4.52,5.98Z'/%3E%3Cpath d='M142.14,43.01l-.02.1c-1.36,5.15-3.86,9.14-7.43,11.88-3.3,2.53-7.32,3.91-11.95,4.1l-.72.04v-7.87l.52-.05c2.64-.24,4.77-1.07,6.34-2.46,2.49-2.21,3.63-4.81,4.15-6.6.33-1.16,1.43-1.96,2.66-1.96.23,0,.46.03.68.08l4.39,1.15c.72.19,1.25.77,1.37,1.49v.1Z'/%3E%3Cpath d='M186.87,44.3c0,2.38-.51,4.62-1.52,6.67-1.01,2.06-2.29,3.68-3.81,4.82-1.5,1.12-3.37,1.97-5.57,2.52-2.14.55-4.77.82-7.82.82h-7.56v-8.27h7.56c1.88,0,3.2-.07,3.92-.2,1.23-.22,2.25-.59,3.05-1.08.73-.45,1.35-1.15,1.84-2.05.49-.91.74-2,.74-3.23,0-1.45-.35-2.66-1.07-3.7-.71-1.02-1.68-1.73-2.97-2.15-1.41-.47-3.55-.71-6.33-.71h-6.74v-8.28h6.04c2.57,0,4.4-.16,5.44-.47,1.25-.37,2.2-.98,2.8-1.8.6-.82.91-1.9.91-3.21s-.3-2.37-.89-3.31c-.56-.88-1.34-1.48-2.4-1.81-1.22-.38-3.45-.58-6.62-.58h-5.28v-8.28h7.28c3.71,0,6.77.51,9.07,1.52,2.4,1.05,4.3,2.7,5.66,4.88,1.34,2.16,2.03,4.47,2.03,6.86,0,2.23-.62,4.36-1.82,6.32-.75,1.22-1.73,2.29-2.94,3.22,1.81.9,3.31,2.13,4.45,3.63,1.7,2.22,2.55,4.87,2.55,7.87Z'/%3E%3Cpath d='M91.44,50.86v3.24c0,2.78-2.26,5.04-5.04,5.04h-19.76v-8.28h24.8Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}