mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-18 08:14:07 +00:00
refactor: rename modules and update migration docs
BREAKING CHANGE Module paths moved to `github.com/HugoBlox/kit` with new names: - core `blox-tailwind` → `blox` - analytics → `analytics` - netlify → `integrations/netlify` - slides (reveal) → `slides` Update go.mod, module.yaml/params, scripts, tests, and v0.11 migration guide accordingly.
This commit is contained in:
George Cushen committed
1 parent
e7e0c714d3
commit
f4280ddb1c
566 files changed
+134
-151
No files matched your search
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* 2025 Hugo Blox Glassmorphism Utility Classes
|
||||
*
|
||||
* Modern glassmorphism effects for Hugo Blox CTA cards and other components
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Glassmorphism Base Classes
|
||||
========================================================================== */
|
||||
|
||||
.glassmorphism-primary {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklch, var(--color-primary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--color-primary-600) 95%, transparent),
|
||||
color-mix(in oklch, var(--color-primary-700) 90%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-primary::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.1), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-secondary {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in oklch, var(--color-secondary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--color-secondary-600) 95%, transparent),
|
||||
color-mix(in oklch, var(--color-secondary-700) 90%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-secondary::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.1), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-dark {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgb(0 0 0 / 0.7), rgb(31 41 55 / 0.8), rgb(0 0 0 / 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-dark::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(255 255 255 / 0.05), transparent, rgb(255 255 255 / 0.1));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.glassmorphism-light {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(248 250 252 / 0.95), rgb(241 245 249 / 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glassmorphism-light::before {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(45deg, rgb(0 0 0 / 0.02), transparent, rgb(255 255 255 / 0.05));
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Noise Texture Classes (when used as background image)
|
||||
========================================================================== */
|
||||
|
||||
.noise-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.noise-texture::after {
|
||||
content: "";
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background-image: url("/media/textures/noise-pattern.svg");
|
||||
background-size: 100px 100px;
|
||||
background-repeat: repeat;
|
||||
opacity: 0.03;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.dark .noise-texture::after {
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.02;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Enhanced Ring Classes for 2025 Design
|
||||
========================================================================== */
|
||||
|
||||
.glass-ring {
|
||||
@apply ring-1 ring-white/20 hover:ring-white/40 dark:ring-gray-700/50 dark:hover:ring-gray-600/70;
|
||||
}
|
||||
|
||||
.glass-shadow {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgb(0 0 0 / 0.25),
|
||||
0 0 0 1px rgb(255 255 255 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.dark .glass-shadow {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgb(0 0 0 / 0.5),
|
||||
0 0 0 1px rgb(255 255 255 / 0.05),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CTA Card Glassmorphism Overlay (works with section backgrounds)
|
||||
========================================================================== */
|
||||
|
||||
.cta-glassmorphism {
|
||||
@apply relative;
|
||||
|
||||
/* Dynamic overlay opacity control */
|
||||
--glassmorphism-opacity: 0.15;
|
||||
|
||||
/* Subtle overlay tint that works with any background */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / var(--glassmorphism-opacity)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 50%,
|
||||
rgb(255 255 255 / var(--glassmorphism-opacity)) 100%
|
||||
);
|
||||
|
||||
/* Enhanced glassmorphism effects */
|
||||
backdrop-filter: blur(20px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.2);
|
||||
|
||||
/* Modern border and shadow for light mode */
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
|
||||
box-shadow:
|
||||
0 32px 64px -12px rgb(0 0 0 / 0.25),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
|
||||
}
|
||||
|
||||
.cta-glassmorphism:hover {
|
||||
/* Enhanced hover state */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.7)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.2));
|
||||
box-shadow:
|
||||
0 40px 80px -16px rgb(0 0 0 / 0.3),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for CTA glassmorphism */
|
||||
.dark .cta-glassmorphism {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.25)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / var(--glassmorphism-opacity));
|
||||
box-shadow:
|
||||
0 32px 64px -12px rgb(0 0 0 / 0.4),
|
||||
inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5));
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.75)) 0%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.4)) 50%,
|
||||
rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.75)) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CTA Button Glassmorphism (nested within CTA cards)
|
||||
========================================================================== */
|
||||
|
||||
.cta-glassmorphism .group {
|
||||
/* Ensure proper text contrast in light mode */
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group {
|
||||
/* Maintain white text in dark mode */
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
|
||||
/* Enhanced button glassmorphism for light mode visibility */
|
||||
.cta-glassmorphism .group > div:first-child {
|
||||
/* Light mode button background */
|
||||
background: rgb(255 255 255 / 0.9);
|
||||
border: 1px solid rgb(0 0 0 / 0.1);
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgb(0 0 0 / 0.1),
|
||||
0 4px 6px -2px rgb(0 0 0 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.3);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group > div:first-child {
|
||||
/* Dark mode button background */
|
||||
background: rgb(0 0 0 / 0.4);
|
||||
border: 1px solid rgb(255 255 255 / 0.2);
|
||||
box-shadow:
|
||||
0 10px 25px -5px rgb(0 0 0 / 0.3),
|
||||
0 4px 6px -2px rgb(0 0 0 / 0.2),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.cta-glassmorphism .group:hover > div:first-child {
|
||||
background: rgb(255 255 255);
|
||||
border: 1px solid rgb(0 0 0 / 0.15);
|
||||
box-shadow:
|
||||
0 20px 40px -8px rgb(0 0 0 / 0.15),
|
||||
0 8px 12px -4px rgb(0 0 0 / 0.1),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
.dark .cta-glassmorphism .group:hover > div:first-child {
|
||||
background: rgb(0 0 0 / 0.6);
|
||||
border: 1px solid rgb(255 255 255 / 0.3);
|
||||
}
|
||||
Reference in new issue
Block a user