/* ===== CE Prism Badge with Rotating Icon ===== */
:root{
–ce-dark:#27335c;
–ce-mid:#1f5a83;
–white:#ffffff;
–text:#ffffff;
–meta-opacity:0.92;
}
/* container */
.ce-prism-icon {
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 14px;
border-radius:10px;
font-family:Inter, system-ui, -apple-system, “Segoe UI”, Roboto, Arial;
font-weight:800;
font-size:14px;
color:var(–text);
background:linear-gradient(90deg,var(–ce-dark) 0%, var(–ce-mid) 100%);
overflow:hidden;
box-shadow:0 8px 28px rgba(39,51,92,0.12);
line-height:1;
}
/* rotating icon (left) */
.ce-prism-icon .icon {
width:36px;
height:36px;
flex:0 0 36px;
border-radius:50%;
display:inline-grid;
place-items:center;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(135deg,#2c5a7a,#2a4360);
color:var(–white);
font-weight:900;
font-size:14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
transform-origin:center;
animation:ceSpin 3s linear infinite;
}
/* small accent border inside icon for nice depth */
.ce-prism-icon .icon::before{
content:”;
position:relative;
display:block;
width:70%;
height:70%;
border-radius:50%;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
pointer-events:none;
}
/* label block */
.ce-prism-icon .text {
display:inline-flex;
flex-direction:column;
gap:4px;
min-width:0;
}
/* main label and meta */
.ce-prism-icon .label {
display:block;
font-size:15px;
letter-spacing:0.2px;
white-space:nowrap;
}
.ce-prism-icon .meta {
display:block;
font-size:11px;
font-weight:700;
opacity:var(–meta-opacity);
color:rgba(255,255,255,0.95);
}
/* prism sweep overlay (gloss) */
.ce-prism-icon::before{
content:”;
position:absolute;
inset:0;
background: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
transform: translateX(-110%) skewX(-12deg);
filter: blur(8px);
mix-blend-mode:screen;
animation:prismSweep 3s linear infinite;
pointer-events:none;
z-index:0;
}
/* ensure text sits above sweep */
.ce-prism-icon .text, .ce-prism-icon .icon { position:relative; z-index:1; }
/* animations */
@keyframes prismSweep {
0% { transform:translateX(-110%) skewX(-12deg); opacity:0; }
10% { opacity:0.9; transform:translateX(-30%) skewX(-12deg); }
50% { opacity:0.0; transform:translateX(30%) skewX(-12deg); }
100% { transform:translateX(130%) skewX(-12deg); opacity:0; }
}
@keyframes ceSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* responsive: slightly smaller on very small screens */
@media (max-width:420px){
.ce-prism-icon { padding:6px 10px; gap:8px; font-size:13px; border-radius:8px; }
.ce-prism-icon .icon { width:30px; height:30px; flex:0 0 30px; font-size:13px; }
.ce-prism-icon .label { font-size:14px; }
.ce-prism-icon .meta { font-size:10px; }
}
%
54% OFF
+ Extra 20%
Reviews
Customer reviews
There are no reviews yet.