Try Vyla Home today
Your Entertainment. Zero Servers Attached.
-
Download Now
+
+
+
+
diff --git a/src/scripts/animations/glass-surface.js b/src/scripts/animations/glass-surface.js
index 646d893..ac713fa 100644
--- a/src/scripts/animations/glass-surface.js
+++ b/src/scripts/animations/glass-surface.js
@@ -104,7 +104,6 @@ class GlassSurface {
this.liquidGlassEnabled = parsed.liquidGlassEnabled !== false;
}
} catch (e) {
- console.warn('Failed to read glass settings:', e);
}
}
@@ -420,7 +419,7 @@ function initLiquidGlass() {
'.nav-links',
'.discord-copy-bar',
'.platform-pill',
- '.hero-cta-light',
+ '.hero-cta-unsure',
'#navIslandMain',
'#navbarSearchToggle',
'.hero-icon-group',
diff --git a/src/scripts/animations/light-rays.js b/src/scripts/animations/light-rays.js
index 3e1f68e..042f67d 100644
--- a/src/scripts/animations/light-rays.js
+++ b/src/scripts/animations/light-rays.js
@@ -37,7 +37,6 @@ export function initLightRays(container, options = {}) {
const raysSpeed = options.raysSpeed ?? 1.8;
const lightSpread = options.lightSpread ?? 0.7;
const isMobile = window.innerWidth < 768;
- console.log('Mobile detection:', isMobile, 'window.innerWidth:', window.innerWidth);
const baseRayLength = options.rayLength ?? 0.6;
const rayLength = isMobile ? baseRayLength * 3.0 : baseRayLength * 1.8;
const pulsating = Boolean(options.pulsating);
@@ -50,7 +49,6 @@ export function initLightRays(container, options = {}) {
const mouseInfluence = options.mouseInfluence ?? 0.12;
const noiseAmount = options.noiseAmount ?? 0.08;
const distortion = options.distortion ?? 0.04;
- console.log('Ray length:', rayLength, 'Fade distance:', fadeDistance, 'Glow falloff factor:', glowFalloffFactor);
const mouse = { x: 0.5, y: 0.5 };
const smoothMouse = { x: 0.5, y: 0.5 };
diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css
index 0a8a3e9..60b34af 100644
--- a/src/styles/components/buttons.css
+++ b/src/styles/components/buttons.css
@@ -26,7 +26,7 @@
.hero-cta-row {
display: flex;
- align-items: center;
+ align-items: flex-start;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
@@ -85,9 +85,91 @@
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
+.hero-cta-unsure {
+ position: relative;
+ background: transparent;
+ color: var(--color-fg);
+ border-radius: 50px !important;
+ padding: 0.75rem 1.75rem !important;
+ font-weight: 500;
+ font-size: 0.875rem;
+ text-decoration: none;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
@media (hover: none) and (pointer: coarse) {
.btn {
min-height: 48px;
min-width: 48px;
}
+}
+
+.download-expandable {
+ position: relative;
+ display: inline-block;
+ background: #000;
+ border-radius: var(--radius-pill);
+ overflow: hidden;
+}
+
+.download-expandable[aria-expanded="true"] {
+ border-radius: 10px;
+}
+
+.download-expandable .hero-cta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+ padding-right: 1rem;
+ background: transparent !important;
+ border: none;
+ margin: 0;
+ color: #fff;
+}
+
+.download-btn-text {
+ flex: 1;
+}
+
+.dropdown-arrow {
+ transition: transform 0.3s ease;
+ flex-shrink: 0;
+}
+
+.download-expandable[aria-expanded="true"] .dropdown-arrow {
+ transform: rotate(180deg);
+}
+
+.download-options {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease, opacity 0.3s ease;
+ opacity: 0;
+ background: #000;
+}
+
+.download-options.show {
+ max-height: 200px;
+ opacity: 1;
+}
+
+.download-option {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ color: #fff;
+ text-decoration: none;
+ transition: background 0.2s ease;
+ font-size: 0.875rem;
+ font-weight: 500;
+}
+
+.download-option:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.download-option svg {
+ flex-shrink: 0;
}
\ No newline at end of file
diff --git a/src/styles/components/pills.css b/src/styles/components/pills.css
index 6d98243..4bfa5be 100644
--- a/src/styles/components/pills.css
+++ b/src/styles/components/pills.css
@@ -97,4 +97,28 @@
width: 28px;
height: 28px;
}
+}
+
+.platform-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--radius-pill);
+ font-size: 0.8125rem;
+ color: var(--color-fg-dim);
+}
+
+.platform-pill svg {
+ flex-shrink: 0;
+}
+
+.platform-divider {
+ color: var(--color-fg-dim);
+ opacity: 0.5;
+}
+
+.mac-icon {
+ display: block;
}
\ No newline at end of file
diff --git a/src/styles/sections/cta-banner.css b/src/styles/sections/cta-banner.css
index 033d0df..7a51cce 100644
--- a/src/styles/sections/cta-banner.css
+++ b/src/styles/sections/cta-banner.css
@@ -58,4 +58,28 @@
font-size: 0.9375rem;
color: var(--color-fg-dim);
margin-bottom: 0.5rem;
+}
+
+.cta-banner-content .download-expandable {
+ background: #fff;
+}
+
+.cta-banner-content .download-expandable .hero-cta {
+ color: #000;
+}
+
+.cta-banner-content .download-options {
+ background: #fff;
+}
+
+.cta-banner-content .download-option {
+ color: #000;
+}
+
+.cta-banner-content .download-option:hover {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.cta-banner-content .download-option svg {
+ color: #000;
}
\ No newline at end of file
diff --git a/src/styles/sections/features.css b/src/styles/sections/features.css
index 06097f0..657676e 100644
--- a/src/styles/sections/features.css
+++ b/src/styles/sections/features.css
@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
gap: clamp(3.5rem, 8vw, 6rem);
- width: 70%;
+ width: 60%;
}
.feature-block {