openvibers/openvibe.live Commits
Home FX: drop the headline sheen overlay (rendered as a block over the gradient logo text); breathing glow instead
Changes
@@@ -14,15 +14,9 @@#page-home .hero-cta .btn-primary { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: hfxPulse 2.6s ease-out infinite; }@keyframes hfxPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }--/* Headline: slow sheen sweeping across the gradient text */--.hfx-shimmer { position: relative; }--.hfx-shimmer::after {-- content: ''; position: absolute; inset: -6px -20px; pointer-events: none;-- background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);-- background-size: 260% 100%; animation: hfxSheen 5s ease-in-out infinite;-- mix-blend-mode: screen; -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000);--}--@keyframes hfxSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }++/* Headline: subtle breathing glow (the sweeping sheen rendered as a block over gradient text, so it is gone) */++.hfx-shimmer { animation: hfxBreathe 4s ease-in-out infinite; }++@keyframes hfxBreathe { 0%,100% { filter: drop-shadow(0 0 0 rgba(139,92,246,0)); } 50% { filter: drop-shadow(0 0 18px rgba(139,92,246,0.45)); } }.hfx-glow { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 25%, transparent); animation: hfxGlow 3s ease-in-out infinite; }@keyframes hfxGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }@@@ -40,6 +34,6 @@@media (prefers-reduced-motion: reduce) {.hfx-sparks, .hfx-spot { display: none; }-- .hfx-shimmer::after, .hfx-glow, #page-home .hero-cta .btn-primary, #page-home .section-header h2 .live-dot { animation: none !important; }++ .hfx-shimmer, .hfx-glow, #page-home .hero-cta .btn-primary, #page-home .section-header h2 .live-dot { animation: none !important; }.hfx-reveal { opacity: 1; transform: none; transition: none; }}@@@ -68,7 +68,7 @@<link rel="stylesheet" href="/css/cosmetics.css?v=2"><link rel="stylesheet" href="/css/messenger.css?v=1"><link rel="stylesheet" href="/css/rs-promo.css?v=7">-- <link rel="stylesheet" href="/css/home-fx.css?v=1">++ <link rel="stylesheet" href="/css/home-fx.css?v=2"><link rel="stylesheet" href="/css/i18n-star.css?v=2"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@@ -14,15 +14,9 @@
@@ -14,15 +14,9 @@
#page-home .hero-cta .btn-primary { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: hfxPulse 2.6s ease-out infinite; }
#page-home .hero-cta .btn-primary { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: hfxPulse 2.6s ease-out infinite; }
@keyframes hfxPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes hfxPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }
-/* Headline: slow sheen sweeping across the gradient text */
-.hfx-shimmer { position: relative; }
-.hfx-shimmer::after {
- content: ''; position: absolute; inset: -6px -20px; pointer-events: none;
- background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
- background-size: 260% 100%; animation: hfxSheen 5s ease-in-out infinite;
- mix-blend-mode: screen; -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000);
-}
-@keyframes hfxSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
+/* Headline: subtle breathing glow (the sweeping sheen rendered as a block over gradient text, so it is gone) */
+.hfx-shimmer { animation: hfxBreathe 4s ease-in-out infinite; }
+@keyframes hfxBreathe { 0%,100% { filter: drop-shadow(0 0 0 rgba(139,92,246,0)); } 50% { filter: drop-shadow(0 0 18px rgba(139,92,246,0.45)); } }
.hfx-glow { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 25%, transparent); animation: hfxGlow 3s ease-in-out infinite; }
.hfx-glow { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 25%, transparent); animation: hfxGlow 3s ease-in-out infinite; }
@keyframes hfxGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes hfxGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@@ -40,6 +34,6 @@
@@ -40,6 +34,6 @@
@media (prefers-reduced-motion: reduce) {
@media (prefers-reduced-motion: reduce) {
.hfx-sparks, .hfx-spot { display: none; }
.hfx-sparks, .hfx-spot { display: none; }
- .hfx-shimmer::after, .hfx-glow, #page-home .hero-cta .btn-primary, #page-home .section-header h2 .live-dot { animation: none !important; }
+ .hfx-shimmer, .hfx-glow, #page-home .hero-cta .btn-primary, #page-home .section-header h2 .live-dot { animation: none !important; }
.hfx-reveal { opacity: 1; transform: none; transition: none; }
.hfx-reveal { opacity: 1; transform: none; transition: none; }
}
}
@@ -68,7 +68,7 @@
@@ -68,7 +68,7 @@
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<link rel="stylesheet" href="/css/rs-promo.css?v=7">
<link rel="stylesheet" href="/css/rs-promo.css?v=7">
- <link rel="stylesheet" href="/css/home-fx.css?v=1">
+ <link rel="stylesheet" href="/css/home-fx.css?v=2">
<link rel="stylesheet" href="/css/i18n-star.css?v=2">
<link rel="stylesheet" href="/css/i18n-star.css?v=2">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">