.trplbm-box,
.trplbm-box * {
box-sizing: border-box;
}
.trplbm-box {
--trplbm-accent: #24c7cf;
--trplbm-accent-2: #2f9ee8;
--trplbm-dark: #34495e;
--trplbm-muted: #74818c;
--trplbm-border: #e3e9ed;
--trplbm-soft: #f5f8fa;
--trplbm-white: #ffffff;
--trplbm-radius: 14px;
position: relative;
width: 100%;
margin: 28px 0;
overflow: hidden;
border: 1px solid var(--trplbm-border);
border-radius: var(--trplbm-radius);
background: var(--trplbm-white);
color: var(--trplbm-dark);
font-family: inherit;
box-shadow: 0 16px 42px rgba(52, 73, 94, 0.09);
isolation: isolate;
}
.trplbm-box::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--trplbm-accent), var(--trplbm-accent-2));
z-index: 2;
}
.trplbm-box-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"heading heading"
"icon content";
align-items: start;
column-gap: 22px;
row-gap: 17px;
min-height: 156px;
padding: 27px 29px 27px 33px;
}
.trplbm-heading {
grid-area: heading;
min-width: 0;
width: 100%;
}
.trplbm-title {
margin: 0 !important;
color: var(--trplbm-dark) !important;
font-family: inherit !important;
font-size: clamp(1.2rem, 2vw, 1.48rem) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}
.trplbm-icon {
grid-area: icon;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 58px;
width: 58px;
height: 58px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(36, 199, 207, 0.14), rgba(47, 158, 232, 0.11));
color: var(--trplbm-accent-2);
}
.trplbm-icon svg {
width: 30px;
height: 30px;
}
.trplbm-content {
grid-area: content;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.trplbm-content p {
width: 100%;
max-width: none;
margin: 0 !important;
color: var(--trplbm-muted) !important;
font-family: inherit !important;
font-size: 0.98rem !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
.trplbm-badge {
display: inline-flex;
align-items: center;
min-height: 25px;
margin: 0 0 9px;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(36, 199, 207, 0.13), rgba(47, 158, 232, 0.10));
color: var(--trplbm-accent-2);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.045em;
line-height: 1.2;
text-transform: uppercase;
}
.trplbm-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
width: auto;
min-height: 48px;
margin-top: 17px;
padding: 13px 19px !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--trplbm-accent), var(--trplbm-accent-2)) !important;
color: #ffffff !important;
font-family: inherit !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.035em !important;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(47, 158, 232, 0.22);
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.trplbm-content > .trplbm-button:first-child {
margin-top: 0;
}
.trplbm-button:hover,
.trplbm-button:focus-visible {
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-2px);
filter: saturate(1.07);
box-shadow: 0 14px 30px rgba(47, 158, 232, 0.30);
}
.trplbm-button:focus-visible {
outline: 3px solid rgba(47, 158, 232, 0.28);
outline-offset: 3px;
}
.trplbm-arrow {
flex: 0 0 18px;
width: 18px;
height: 18px;
transition: transform 0.18s ease;
}
.trplbm-button:hover .trplbm-arrow,
.trplbm-button:focus-visible .trplbm-arrow {
transform: translateX(3px);
}
.trplbm-ad-label {
position: relative;
z-index: 3;
padding: 8px 29px 0 33px;
color: var(--trplbm-muted);
font-size: 0.68rem;
line-height: 1.2;
letter-spacing: 0.04em;
text-align: right;
text-transform: uppercase;
}
.trplbm-ad-label + .trplbm-box-inner {
min-height: 142px;
padding-top: 16px;
} .trplbm-box--guide {
border-color: rgba(52, 73, 94, 0.14);
background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
box-shadow: 0 10px 30px rgba(52, 73, 94, 0.065);
}
.trplbm-box--guide::before {
width: 4px;
}
.trplbm-box--guide .trplbm-icon {
background: #f1f8fb;
}
.trplbm-box--guide .trplbm-button {
background: #ffffff !important;
color: var(--trplbm-accent-2) !important;
border: 1px solid rgba(47, 158, 232, 0.42) !important;
box-shadow: none;
}
.trplbm-box--guide .trplbm-button:hover,
.trplbm-box--guide .trplbm-button:focus-visible {
background: linear-gradient(135deg, var(--trplbm-accent), var(--trplbm-accent-2)) !important;
color: #ffffff !important;
box-shadow: 0 10px 24px rgba(47, 158, 232, 0.20);
} .trplbm-box--highlight {
border-color: rgba(47, 158, 232, 0.33);
background: linear-gradient(135deg, rgba(36, 199, 207, 0.07), rgba(47, 158, 232, 0.055) 56%, #ffffff 100%);
box-shadow: 0 18px 48px rgba(47, 158, 232, 0.13);
}
.trplbm-box--highlight::after {
content: "";
position: absolute;
right: -75px;
bottom: -105px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(36, 199, 207, 0.13), transparent 68%);
pointer-events: none;
z-index: -1;
} .trplbm-box--compact .trplbm-box-inner {
min-height: 116px;
row-gap: 13px;
padding-top: 19px;
padding-bottom: 19px;
}
.trplbm-box--compact .trplbm-icon {
flex-basis: 48px;
width: 48px;
height: 48px;
border-radius: 12px;
}
.trplbm-box--compact .trplbm-icon svg {
width: 25px;
height: 25px;
}
.trplbm-box--compact .trplbm-title {
font-size: 1.16rem !important;
}
.trplbm-box--compact .trplbm-content p {
font-size: 0.91rem !important;
line-height: 1.55 !important;
}
.trplbm-box--compact .trplbm-button {
min-height: 44px;
margin-top: 13px;
padding-top: 11px !important;
padding-bottom: 11px !important;
} .trplbm-box--advertising {
border-color: rgba(47, 158, 232, 0.42);
background: linear-gradient(135deg, rgba(36, 199, 207, 0.105), rgba(47, 158, 232, 0.075) 60%, #ffffff 100%);
box-shadow: 0 18px 48px rgba(47, 158, 232, 0.15);
}
.trplbm-box--advertising::before {
width: 7px;
}
.trplbm-box--advertising .trplbm-icon {
background: linear-gradient(135deg, rgba(36, 199, 207, 0.20), rgba(47, 158, 232, 0.15));
}
.trplbm-box--advertising .trplbm-ad-label {
font-weight: 700;
}
.trplbm-grid {
display: grid;
grid-template-columns: repeat(var(--trplbm-grid-columns, 2), minmax(0, 1fr));
gap: 18px;
width: 100%;
margin: 28px 0;
}
.trplbm-grid .trplbm-box {
height: 100%;
margin: 0;
}
.trplbm-grid .trplbm-box-inner {
height: 100%;
}
.trplbm-grid .trplbm-button {
width: 100%;
white-space: normal;
}
@media (max-width: 820px) {
.trplbm-box-inner {
column-gap: 18px;
row-gap: 16px;
padding: 24px 23px 24px 27px;
}
.trplbm-content .trplbm-button {
width: 100%;
white-space: normal;
}
.trplbm-ad-label {
padding-right: 23px;
padding-left: 27px;
}
.trplbm-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.trplbm-box {
margin: 22px 0;
border-radius: max(10px, calc(var(--trplbm-radius) - 2px));
}
.trplbm-box-inner,
.trplbm-grid .trplbm-box-inner {
display: flex;
min-height: 0;
flex-direction: column;
align-items: stretch;
gap: 15px;
padding: 22px 20px 21px 24px;
}
.trplbm-heading {
order: 1;
}
.trplbm-icon {
display: none;
}
.trplbm-content {
order: 2;
align-items: stretch;
}
.trplbm-title {
font-size: 1.18rem !important;
}
.trplbm-content p {
font-size: 0.94rem !important;
}
.trplbm-button,
.trplbm-content .trplbm-button {
width: 100%;
white-space: normal;
}
.trplbm-ad-label {
padding: 8px 20px 0 24px;
}
.trplbm-ad-label + .trplbm-box-inner {
padding-top: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.trplbm-button,
.trplbm-arrow {
transition: none;
}
} .editor-styles-wrapper .trplbm-block-editor-preview .trplbm-box {
margin-top: 12px;
margin-bottom: 12px;
}
.editor-styles-wrapper .trplbm-block-editor-preview .trplbm-button {
pointer-events: none;
}