/**
* HT Mega 2025 — Hero Widget Styles
* File: assets/css/widgets/htm25-hero.css
*
* All values pull from htm25-tokens.css custom properties.
* Apply .htm25-style--{style} on the section to switch themes.
* No !important, no hardcoded colors, no Bootstrap.
*/
/* =========================================================
SECTION WRAPPER
========================================================= */
.htm25-hero {
position: relative;
overflow: hidden;
padding-block: var(--htm25-section-py);
padding-inline: var(--htm25-section-px);
background-color: var(--htm25-bg-section);
}
/* =========================================================
BACKGROUND LAYERS
========================================================= */
/* Gradient background for glass + aurora */
.htm25-hero.htm25-style--glass,
.htm25-hero.htm25-style--aurora {
background: var(--htm25-gradient-hero);
}
/* Animated gradient blobs */
.htm25-hero__bg-blobs {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: var(--htm25-z-below);
}
.htm25-hero__blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.6;
animation: htm25-blob-drift 12s ease-in-out infinite alternate;
}
.htm25-style--glass .htm25-hero__blob--1 {
width: 600px;
height: 600px;
top: -200px;
left: -100px;
background: radial-gradient(circle, rgba(120, 110, 255, 0.45), transparent 70%);
animation-duration: 14s;
}
.htm25-style--glass .htm25-hero__blob--2 {
width: 500px;
height: 500px;
bottom: -150px;
right: -100px;
background: radial-gradient(circle, rgba(6, 182, 212, 0.35), transparent 70%);
animation-duration: 18s;
animation-direction: alternate-reverse;
}
.htm25-style--aurora .htm25-hero__blob--1 {
width: 700px;
height: 700px;
top: -250px;
left: -200px;
background: radial-gradient(circle, rgba(255, 60, 172, 0.40), transparent 70%);
animation-duration: 16s;
}
.htm25-style--aurora .htm25-hero__blob--2 {
width: 600px;
height: 600px;
top: -100px;
right: -150px;
background: radial-gradient(circle, rgba(43, 134, 197, 0.35), transparent 70%);
animation-duration: 20s;
animation-direction: alternate-reverse;
}
.htm25-style--aurora .htm25-hero__blob--3 {
width: 500px;
height: 500px;
bottom: -150px;
left: 30%;
background: radial-gradient(circle, rgba(120, 75, 160, 0.30), transparent 70%);
animation-duration: 22s;
}
@keyframes htm25-blob-drift {
from {
transform: translate(0, 0) scale(1.0);
}
to {
transform: translate(40px, 30px) scale(1.1);
}
}
/* =========================================================
INNER LAYOUT
========================================================= */
.htm25-hero__inner {
position: relative;
z-index: var(--htm25-z-base);
display: grid;
grid-template-columns: 1fr;
gap: var(--htm25-space-10);
align-items: center;
max-width: var(--htm25-container-xl);
margin-inline: auto;
}
/* Split layouts: two columns */
.htm25-hero--split-left .htm25-hero__inner,
.htm25-hero--split-right .htm25-hero__inner {
grid-template-columns: 1fr 1fr;
}
/* Centered layout: single column, text centered */
.htm25-hero--centered .htm25-hero__content {
text-align: center;
margin-inline: auto;
max-width: 700px;
}
.htm25-hero--centered .htm25-hero__actions {
justify-content: center;
}
.htm25-hero--centered .htm25-hero__social-proof {
justify-content: center;
}
.htm25-hero--centered .htm25-hero__description {
margin-inline: auto;
}
/* =========================================================
BADGE / EYEBROW
========================================================= */
.htm25-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--htm25-space-2);
padding: var(--htm25-space-1) var(--htm25-space-3);
font-size: var(--htm25-text-xs);
font-weight: var(--htm25-weight-semibold);
letter-spacing: var(--htm25-tracking-wider);
text-transform: uppercase;
border-radius: var(--htm25-badge-radius);
background-color: var(--htm25-badge-bg);
color: var(--htm25-badge-text);
border: 1px solid var(--htm25-badge-border, transparent);
margin-bottom: var(--htm25-space-6);
}
.htm25-hero__badge-icon {
display: flex;
align-items: center;
line-height: 1;
}
.htm25-hero__badge-icon svg,
.htm25-hero__badge-icon i,
.htm25-hero__badge-icon span,
.htm25-hero__badge-icon img {
width: 0.85em;
height: 0.85em;
font-size: 0.85em;
line-height: 1;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* Custom-uploaded SVG icon (rendered as ![]()
, not inline