style: image-clipped text effect on Developer hero word

This commit is contained in:
2026-03-01 15:08:44 -05:00
parent dac65d0d86
commit 4de29cde5a

View File

@@ -45,7 +45,7 @@
<!-- Hero Title --> <!-- Hero Title -->
<h1 class="text-4xl md:text-5xl lg:text-[3.75rem] xl:text-7xl font-black text-color-base mb-6 leading-[1.05] tracking-tight hp-reveal whitespace-nowrap" data-delay="100"> <h1 class="text-4xl md:text-5xl lg:text-[3.75rem] xl:text-7xl font-black text-color-base mb-6 leading-[1.05] tracking-tight hp-reveal whitespace-nowrap" data-delay="100">
{{ theme('homepage_hero_title1', 'Powerful') }} <span class="hero-img-text" style="background-image: url('https://billing.virtnet.bond/storage/01K8TJ4QFZT7R9M1KCF71Y8BRT.jpg');">{{ theme('homepage_hero_title1', 'Powerful') }}</span>
<span class="bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient"> <span class="bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
{{ theme('homepage_hero_title2', 'VPS Hosting') }} {{ theme('homepage_hero_title2', 'VPS Hosting') }}
</span> </span>
@@ -630,6 +630,16 @@
--hp-blue-dark: #1E6091; --hp-blue-darkest: #184E77; --hp-blue-dark: #1E6091; --hp-blue-darkest: #184E77;
} }
/* ── Image-clipped hero text ── */
.hero-img-text {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ── Scroll-reveal base ── */ /* ── Scroll-reveal base ── */
.hp-reveal { .hp-reveal {
opacity: 0; opacity: 0;