diff --git a/packages/theme/src/theme/hoverscape/HoverkraftButton.module.css b/packages/theme/src/theme/hoverscape/HoverkraftButton.module.css index 1ae0ad8..82935d4 100644 --- a/packages/theme/src/theme/hoverscape/HoverkraftButton.module.css +++ b/packages/theme/src/theme/hoverscape/HoverkraftButton.module.css @@ -61,15 +61,17 @@ } .secondary { - background: rgba(25, 152, 255, 0.08); - border: 2px solid rgba(25, 152, 255, 0.35); + background: rgba(25, 152, 255, 0.15); + border: 2px solid rgba(25, 152, 255, 0.5); color: var(--hk-color-dark, #1d2026); + box-shadow: 0 2px 8px rgba(25, 152, 255, 0.15); } .secondary:hover { transform: translateY(-2px); - background: rgba(25, 152, 255, 0.12); - border-color: rgba(25, 152, 255, 0.5); + background: rgba(25, 152, 255, 0.22); + border-color: rgba(25, 152, 255, 0.65); + box-shadow: 0 4px 12px rgba(25, 152, 255, 0.25); text-shadow: 0 3px 12px rgba(8, 43, 80, 0.35); } @@ -86,13 +88,24 @@ text-shadow: 0 3px 12px rgba(8, 43, 80, 0.35); } -[data-theme="dark"] .secondary, +[data-theme="dark"] .secondary { + background: rgba(25, 152, 255, 0.25); + border-color: rgba(25, 152, 255, 0.6); + color: #ffffff; + box-shadow: 0 2px 8px rgba(25, 152, 255, 0.2); +} + +[data-theme="dark"] .secondary:hover { + background: rgba(25, 152, 255, 0.35); + border-color: rgba(25, 152, 255, 0.75); + box-shadow: 0 4px 12px rgba(25, 152, 255, 0.3); +} + [data-theme="dark"] .outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.4); } -[data-theme="dark"] .secondary:hover, [data-theme="dark"] .outline:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); diff --git a/packages/theme/src/theme/hoverscape/HoverkraftFeatureList.module.css b/packages/theme/src/theme/hoverscape/HoverkraftFeatureList.module.css index deb2ea3..6482e21 100644 --- a/packages/theme/src/theme/hoverscape/HoverkraftFeatureList.module.css +++ b/packages/theme/src/theme/hoverscape/HoverkraftFeatureList.module.css @@ -10,10 +10,10 @@ .featureCard { width: 100%; - border: 1px solid var(--ifm-color-emphasis-200); + border: 1px solid var(--ifm-color-primary); border-radius: calc(var(--ifm-global-radius) * 1.5); padding: 1.75rem; - background: var(--ifm-color-content-secondary, #ffffff); + background: var(--ifm-background-color, #ffffff); transition: transform 0.3s ease, box-shadow 0.3s ease, @@ -49,6 +49,7 @@ font-size: 1.25rem; font-weight: 600; margin: 0 0 0.75rem 0; + color: var(--ifm-color-primary); } .featureDescription { diff --git a/packages/theme/src/theme/hoverscape/HoverkraftHero.module.css b/packages/theme/src/theme/hoverscape/HoverkraftHero.module.css index fd5cea8..236ef44 100644 --- a/packages/theme/src/theme/hoverscape/HoverkraftHero.module.css +++ b/packages/theme/src/theme/hoverscape/HoverkraftHero.module.css @@ -95,6 +95,7 @@ .heroButton { min-width: 190px; + color: var(--ifm-color-white, #ffffff) !important; } @media (min-width: 768px) { diff --git a/packages/theme/src/theme/hoverscape/HoverkraftProjectCard.module.css b/packages/theme/src/theme/hoverscape/HoverkraftProjectCard.module.css index 45c22f3..405d894 100644 --- a/packages/theme/src/theme/hoverscape/HoverkraftProjectCard.module.css +++ b/packages/theme/src/theme/hoverscape/HoverkraftProjectCard.module.css @@ -11,17 +11,26 @@ .projectCard:hover { transform: translateY(-4px); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); - border-color: #1998ff; } .primary { - box-shadow: 0 4px 12px rgba(25, 152, 255, 0.08); + background: linear-gradient(135deg, rgba(25, 152, 255, 0.08) 0%, rgba(255, 90, 2, 0.06) 100%); + border-color: rgba(25, 152, 255, 0.3); + box-shadow: 0 4px 12px rgba(25, 152, 255, 0.15); +} + +.primary:hover { + border-color: rgba(25, 152, 255, 0.5); + box-shadow: 0 12px 24px rgba(25, 152, 255, 0.2); } .neutral { - background: var(--ifm-color-content-secondary, #ffffff); - border-color: var(--ifm-color-emphasis-200); + background: #ffffff; + border-color: #cbd5e0; +} + +.neutral:hover { + border-color: #a0aec0; } [data-theme="dark"] .projectCard { @@ -29,6 +38,26 @@ border-color: rgba(255, 255, 255, 0.14); } +[data-theme="dark"] .primary { + background: linear-gradient(135deg, rgba(25, 152, 255, 0.15) 0%, rgba(255, 90, 2, 0.1) 100%); + border-color: rgba(25, 152, 255, 0.4); + box-shadow: 0 4px 12px rgba(25, 152, 255, 0.2); +} + +[data-theme="dark"] .primary:hover { + border-color: rgba(25, 152, 255, 0.6); + box-shadow: 0 12px 24px rgba(25, 152, 255, 0.3); +} + +[data-theme="dark"] .neutral { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.2); +} + +[data-theme="dark"] .neutral:hover { + border-color: rgba(255, 255, 255, 0.3); +} + .projectHeader { display: flex; align-items: flex-start;