/* Plaza Brand Slab — solid 135° gradient + glass + shadow */
.plaza-slab {
position: relative;
overflow: hidden;
background:
linear-gradient(135deg,
rgba(30, 80, 178, 0.98) 0%,
rgba(42, 111, 213, 0.96) 38%,
rgba(38, 132, 224, 0.94) 68%,
rgba(92, 158, 232, 0.92) 100%) padding-box,
linear-gradient(135deg,
rgba(255, 255, 255, 0.62),
rgba(255, 255, 255, 0.18) 44%,
rgba(255, 255, 255, 0.38)) border-box;
border: 1px solid transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.42),
inset 0 -1px 0 rgba(255, 255, 255, 0.12),
0 24px 60px rgba(16, 58, 130, 0.22);
}
.plaza-slab::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.08) 24%,
transparent 52%),
radial-gradient(circle at 18% 0%,
rgba(255, 255, 255, 0.2), transparent 38%),
radial-gradient(circle at 20% 20%,
rgba(255, 255, 255, 0.12) 0%, transparent 38%),
radial-gradient(circle at 80% 78%,
rgba(255, 255, 255, 0.1) 0%, transparent 34%);
}
/* Plaza Hero Fade — vertical gradient + glass overlay */
.plaza-hero {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom,
rgba(30, 80, 178, 0.98) 0%,
rgba(42, 111, 213, 0.96) 34%,
rgba(92, 158, 232, 0.9) 58%,
#FEFEFE 84%,
#FEFEFE 100%);
}
.plaza-hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.08) 24%,
transparent 52%),
radial-gradient(circle at 18% 0%,
rgba(255, 255, 255, 0.2), transparent 38%);
}