/**
* UniteElements Master Design System Bundle (Consolidated & High Performance)
* Author: Jyotirmay Ray
*/
/* --- variables.css --- */
/**
* UniteElements Theme - Complete Design Tokens & Custom Properties
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
:root {
/* ==========================================================================
1. Brand Color System (Locked Blue Foundation: #2B5DF5)
========================================================================== */
--uniteelements-primary-50: #EFF4FF;
--uniteelements-primary-100: #DBE6FE;
--uniteelements-primary-200: #BFD3FE;
--uniteelements-primary-300: #93B5FD;
--uniteelements-primary-400: #6090FA;
--uniteelements-primary-500: #2B5DF5; /* Working Base Source-of-Truth */
--uniteelements-primary-600: #1D44DB;
--uniteelements-primary-700: #1A35B0;
--uniteelements-primary-800: #1A2D8E;
--uniteelements-primary-900: #1A2874;
/* Semantic Brand Mappings */
--uniteelements-primary: var(--uniteelements-primary-500);
--uniteelements-primary-hover: var(--uniteelements-primary-600);
--uniteelements-primary-active: var(--uniteelements-primary-700);
--uniteelements-primary-light: var(--uniteelements-primary-300);
--uniteelements-primary-soft: rgba(43, 93, 245, 0.08);
--uniteelements-primary-subtle: rgba(43, 93, 245, 0.04);
--uniteelements-primary-glow: rgba(43, 93, 245, 0.22);
--uniteelements-primary-contrast: #FFFFFF;
/* ==========================================================================
2. Neutral Palette
========================================================================== */
--uniteelements-neutral-white: #FFFFFF;
--uniteelements-neutral-50: #F8FAFC;
--uniteelements-neutral-100: #F1F5F9;
--uniteelements-neutral-200: #E2E8F0;
--uniteelements-neutral-300: #CBD5E1;
--uniteelements-neutral-400: #94A3B8;
--uniteelements-neutral-500: #64748B;
--uniteelements-neutral-600: #475569;
--uniteelements-neutral-700: #334155;
--uniteelements-neutral-800: #1E293B;
--uniteelements-neutral-900: #0F172A;
--uniteelements-neutral-black: #080C15;
/* ==========================================================================
3. Semantic Backgrounds & Surfaces (Light First)
========================================================================== */
--uniteelements-bg-page: #F1F5FD;
--uniteelements-bg-canvas: #F1F5FD;
--uniteelements-bg-surface: var(--uniteelements-neutral-white);
--uniteelements-bg-surface-elevated: var(--uniteelements-neutral-white);
--uniteelements-bg-surface-subtle: #F1F5F9;
--uniteelements-bg-surface-active: #EFF6FF;
--uniteelements-bg-overlay: rgba(8, 12, 21, 0.45);
/* Backward compatibility aliases */
--uniteelements-bg: var(--uniteelements-bg-page);
--uniteelements-surface: var(--uniteelements-bg-surface);
--uniteelements-surface-subtle: var(--uniteelements-bg-surface-subtle);
/* ==========================================================================
4. Semantic Typography & Text Colors
========================================================================== */
--uniteelements-text-primary: var(--uniteelements-neutral-900);
--uniteelements-text-secondary: var(--uniteelements-neutral-600);
--uniteelements-text-muted: var(--uniteelements-neutral-500);
--uniteelements-text-disabled: var(--uniteelements-neutral-400);
--uniteelements-text-inverse: var(--uniteelements-neutral-white);
/* Backward compatibility alias */
--uniteelements-text: var(--uniteelements-text-primary);
--uniteelements-text-light: var(--uniteelements-text-disabled);
/* ==========================================================================
5. Borders & Dividers
========================================================================== */
--uniteelements-border-subtle: rgba(226, 232, 240, 0.65);
--uniteelements-border-default: rgba(226, 232, 240, 0.95);
--uniteelements-border-strong: rgba(203, 213, 225, 0.95);
--uniteelements-border-focus: var(--uniteelements-primary-500);
--uniteelements-border-glass: rgba(255, 255, 255, 0.85);
/* Backward compatibility alias */
--uniteelements-border: var(--uniteelements-border-default);
/* ==========================================================================
6. Semantic Status Colors
========================================================================== */
--uniteelements-success-50: #ECFDF5;
--uniteelements-success-200: #A7F3D0;
--uniteelements-success-500: #10B981;
--uniteelements-success-600: #059669;
--uniteelements-success-700: #047857;
--uniteelements-success: var(--uniteelements-success-500);
--uniteelements-success-soft: rgba(16, 185, 129, 0.12);
--uniteelements-warning-50: #FFFBEB;
--uniteelements-warning-500: #F59E0B;
--uniteelements-warning-600: #D97706;
--uniteelements-warning: var(--uniteelements-warning-500);
--uniteelements-warning-soft: rgba(245, 158, 11, 0.12);
--uniteelements-danger-50: #FEF2F2;
--uniteelements-danger-100: #FEE2E2;
--uniteelements-danger-500: #EF4444;
--uniteelements-danger-600: #DC2626;
--uniteelements-danger: var(--uniteelements-danger-500);
--uniteelements-danger-soft: rgba(239, 68, 68, 0.12);
/* Error aliases mapping to danger tokens */
--uniteelements-error-50: var(--uniteelements-danger-50);
--uniteelements-error-100: var(--uniteelements-danger-100);
--uniteelements-error-500: var(--uniteelements-danger-500);
--uniteelements-error-600: var(--uniteelements-danger-600);
--uniteelements-error: var(--uniteelements-danger-500);
--uniteelements-error-soft: var(--uniteelements-danger-soft);
--uniteelements-info-50: #F0F9FF;
--uniteelements-info-500: #0EA5E9;
--uniteelements-info-600: #0284C7;
--uniteelements-info: var(--uniteelements-info-500);
--uniteelements-info-soft: rgba(14, 165, 233, 0.12);
/* ==========================================================================
7. Liquid Glass Material & High-Definition Lighting
========================================================================== */
/* Tier 1: Glass Soft */
--uniteelements-glass-soft-bg: rgba(255, 255, 255, 0.82);
--uniteelements-glass-soft-border: rgba(255, 255, 255, 0.85);
--uniteelements-glass-soft-blur: blur(14px) saturate(180%);
/* Tier 2: Glass Medium (Default 3D Surface) */
--uniteelements-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
--uniteelements-glass-border: rgba(255, 255, 255, 0.95);
--uniteelements-glass-blur: blur(20px) saturate(190%);
--uniteelements-glass-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
--uniteelements-glass-bevel: 0 1px 0 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 0 rgba(43, 93, 245, 0.05) inset;
/* Tier 3: Glass Strong (Elevated Modals, Drawers & Consoles) */
--uniteelements-glass-strong-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.94) 100%);
--uniteelements-glass-strong-border: rgba(255, 255, 255, 0.98);
--uniteelements-glass-strong-blur: blur(28px) saturate(200%);
/* Atmospheric Ambient Mesh Background (1:1 Reference Luminous Depth) */
--uniteelements-ambient-mesh:
radial-gradient(ellipse 70% 40% at 50% -10%, rgba(43, 93, 245, 0.18) 0%, rgba(56, 189, 248, 0.12) 40%, transparent 80%),
radial-gradient(ellipse 50% 30% at 85% 15%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 15% 75%, rgba(43, 93, 245, 0.06) 0%, transparent 60%),
linear-gradient(180deg, #F1F5FD 0%, #EBF2FC 50%, #F5F8FE 100%);
/* Glass Opaque Fallback */
--uniteelements-glass-fallback-bg: #FFFFFF;
/* ==========================================================================
8. Typography Tokens (Space Grotesk)
========================================================================== */
--uniteelements-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--uniteelements-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--uniteelements-font-family-mono: var(--uniteelements-font-mono);
--uniteelements-font-weight-regular: 400;
--uniteelements-font-weight-medium: 500;
--uniteelements-font-weight-semibold: 600;
--uniteelements-font-weight-bold: 700;
--uniteelements-line-height-none: 1;
--uniteelements-line-height-tight: 1.18;
--uniteelements-line-height-snug: 1.35;
--uniteelements-line-height-normal: 1.5;
--uniteelements-line-height-relaxed: 1.65;
--uniteelements-letter-spacing-tighter: -0.04em;
--uniteelements-letter-spacing-tight: -0.02em;
--uniteelements-letter-spacing-normal: 0;
--uniteelements-letter-spacing-wide: 0.04em;
--uniteelements-letter-spacing-wider: 0.08em;
--uniteelements-font-size-caption: 0.75rem; /* 12px */
--uniteelements-font-size-overline: 0.6875rem; /* 11px */
--uniteelements-font-size-body-sm: 0.875rem; /* 14px */
--uniteelements-font-size-body: 1rem; /* 16px */
--uniteelements-font-size-body-m: 1rem; /* 16px */
--uniteelements-font-size-body-lg: 1.125rem; /* 18px */
--uniteelements-font-size-h6: 0.875rem; /* 14px */
--uniteelements-font-size-h5: 1rem; /* 16px */
--uniteelements-font-size-h4: 1.125rem; /* 18px */
--uniteelements-font-size-h3: 1.5rem; /* 24px */
--uniteelements-font-size-h2: 2rem; /* 32px */
--uniteelements-font-size-h1: 2.5rem; /* 40px */
--uniteelements-font-size-display-m: 3rem; /* 48px */
--uniteelements-font-size-display-l: 3.75rem; /* 60px */
--uniteelements-font-size-display-xl: 4.5rem; /* 72px */
/* Standard size aliases for backward compatibility */
--uniteelements-font-size-xs: var(--uniteelements-font-size-caption);
--uniteelements-font-size-sm: var(--uniteelements-font-size-body-sm);
--uniteelements-font-size-base: var(--uniteelements-font-size-body-m);
--uniteelements-font-size-md: var(--uniteelements-font-size-body-m);
--uniteelements-font-size-lg: var(--uniteelements-font-size-body-lg);
--uniteelements-font-size-xl: var(--uniteelements-font-size-h3);
--uniteelements-font-size-2xl: var(--uniteelements-font-size-h2);
--uniteelements-font-size-3xl: var(--uniteelements-font-size-h1);
--uniteelements-font-size-4xl: var(--uniteelements-font-size-display-m);
/* ==========================================================================
9. Standardized Spacing Scale (4px increments)
========================================================================== */
--uniteelements-space-1: 0.25rem; /* 4px */
--uniteelements-space-2: 0.5rem; /* 8px */
--uniteelements-space-3: 0.75rem; /* 12px */
--uniteelements-space-4: 1rem; /* 16px */
--uniteelements-space-5: 1.25rem; /* 20px */
--uniteelements-space-6: 1.5rem; /* 24px */
--uniteelements-space-8: 2rem; /* 32px */
--uniteelements-space-10: 2.5rem; /* 40px */
--uniteelements-space-12: 3rem; /* 48px */
--uniteelements-space-14: 3.5rem; /* 56px */
--uniteelements-space-16: 4rem; /* 64px */
--uniteelements-space-20: 5rem; /* 80px */
--uniteelements-space-24: 6rem; /* 96px */
--uniteelements-space-32: 8rem; /* 128px */
--uniteelements-space-40: 10rem; /* 160px */
/* ==========================================================================
10. Border Radius System
========================================================================== */
--uniteelements-radius-xs: 4px;
--uniteelements-radius-sm: 8px;
--uniteelements-radius-md: 12px;
--uniteelements-radius-lg: 16px;
--uniteelements-radius-xl: 20px;
--uniteelements-radius-2xl: 28px;
--uniteelements-radius-pill: 9999px;
--uniteelements-radius-full: 9999px;
/* ==========================================================================
11. Shadow & Elevation System (Soft Diffusion & Clean Speculars)
========================================================================== */
--uniteelements-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
--uniteelements-shadow-sm: 0 2px 6px -1px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
--uniteelements-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
--uniteelements-shadow-lg: 0 14px 28px -6px rgba(15, 23, 42, 0.08), 0 6px 12px -4px rgba(15, 23, 42, 0.03);
--uniteelements-shadow-xl: 0 24px 44px -8px rgba(15, 23, 42, 0.10), 0 10px 18px -6px rgba(15, 23, 42, 0.04);
--uniteelements-shadow-glass: 0 14px 40px -8px rgba(43, 93, 245, 0.08), 0 2px 10px 0 rgba(15, 23, 42, 0.03);
--uniteelements-shadow-card-hover: 0 20px 42px -10px rgba(43, 93, 245, 0.15), 0 6px 16px -3px rgba(15, 23, 42, 0.05);
/* ==========================================================================
12. Motion & Transitions
========================================================================== */
--uniteelements-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--uniteelements-ease-in: cubic-bezier(0.4, 0, 1, 1);
--uniteelements-ease-out: cubic-bezier(0, 0, 0.2, 1);
--uniteelements-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--uniteelements-duration-fast: 150ms;
--uniteelements-duration-normal: 220ms;
--uniteelements-duration-slow: 350ms;
--uniteelements-transition: all var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
--uniteelements-transition-transform: transform var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
--uniteelements-transition-fade: opacity var(--uniteelements-duration-fast) var(--uniteelements-ease-standard);
/* ==========================================================================
13. Layout Containers & Breakpoints
========================================================================== */
--uniteelements-container-narrow: 768px;
--uniteelements-container-standard: 1140px;
--uniteelements-container-wide: 1280px;
--uniteelements-container-full: 1440px;
--uniteelements-container-max: var(--uniteelements-container-wide);
--uniteelements-container-pad: 1.5rem;
/* Focus Ring */
--uniteelements-focus-ring: 0 0 0 3px rgba(43, 93, 245, 0.25);
}
/* --- base.css --- */
/**
* UniteElements Theme - Base Styles, Reset, Material & Atmosphere
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: var(--uniteelements-font-family);
font-size: 16px;
line-height: var(--uniteelements-line-height-normal);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
background-color: #F1F5FD;
background-image:
radial-gradient(circle 800px at 50% -100px, rgba(43, 93, 245, 0.14) 0%, rgba(56, 189, 248, 0.08) 40%, transparent 70%),
radial-gradient(circle 600px at 90% 200px, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: var(--uniteelements-text-primary);
overflow-x: clip;
max-width: 100%;
width: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: transparent;
color: var(--uniteelements-text-primary);
overflow-x: clip;
max-width: 100%;
width: 100%;
position: relative;
}
/* Global Responsive Anti-Overflow Rules */
img,
video,
canvas,
svg,
iframe,
embed,
object,
table,
pre,
code {
max-width: 100%;
box-sizing: border-box;
}
pre,
code {
overflow-x: auto;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption,
span,
a,
strong,
b {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
/* Mobile Container Padding Optimization */
@media (max-width: 640px) {
:root {
--uniteelements-container-pad: 1rem;
}
}
/* Enforce 16px font-size on mobile inputs to eliminate iOS Safari auto-zoom */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
font-size: 16px !important;
}
}
/* ==========================================================================
Atmosphere & Ambient Background Lighting
========================================================================== */
.uniteelements-ambient-bg {
position: relative;
background-image: var(--uniteelements-ambient-mesh);
background-attachment: fixed;
}
.uniteelements-glow-blue {
position: relative;
}
.uniteelements-glow-blue::before {
content: '';
position: absolute;
inset: -20px;
background: radial-gradient(circle, rgba(43, 93, 245, 0.15) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
border-radius: inherit;
}
/* ==========================================================================
Liquid Glass Materials (iOS Inspired)
========================================================================== */
.uniteelements-glass-soft {
background-color: var(--uniteelements-glass-soft-bg);
backdrop-filter: var(--uniteelements-glass-soft-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-soft-blur);
border: 1px solid var(--uniteelements-glass-soft-border);
box-shadow: var(--uniteelements-shadow-xs);
}
.uniteelements-glass {
background-color: var(--uniteelements-glass-bg);
backdrop-filter: var(--uniteelements-glass-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-blur);
border: 1px solid var(--uniteelements-glass-border);
box-shadow: var(--uniteelements-shadow-glass);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-glass);
}
.uniteelements-glass-strong {
background-color: var(--uniteelements-glass-strong-bg);
backdrop-filter: var(--uniteelements-glass-strong-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-strong-blur);
border: 1px solid var(--uniteelements-glass-strong-border);
box-shadow: var(--uniteelements-shadow-md);
}
/* Progressive Enhancement Fallback when backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
.uniteelements-glass-soft,
.uniteelements-glass,
.uniteelements-glass-strong {
background-color: var(--uniteelements-glass-fallback-bg);
border-color: var(--uniteelements-border-default);
}
}
/* ==========================================================================
Accessibility: Screen Reader & Skip Link
========================================================================== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-link {
position: absolute;
top: -9999px;
left: 1rem;
background: var(--uniteelements-primary-500);
color: var(--uniteelements-primary-contrast);
padding: var(--uniteelements-space-3) var(--uniteelements-space-6);
border-radius: var(--uniteelements-radius-md);
font-weight: var(--uniteelements-font-weight-medium);
z-index: 99999;
text-decoration: none;
box-shadow: var(--uniteelements-shadow-lg);
transition: top var(--uniteelements-duration-fast) ease;
}
.skip-link:focus {
top: 1rem;
}
/* ==========================================================================
Focus State System
========================================================================== */
:focus-visible {
outline: none;
box-shadow: var(--uniteelements-focus-ring);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: var(--uniteelements-focus-ring);
}
/* ==========================================================================
Text Selection & Scrollbars
========================================================================== */
::selection {
background-color: var(--uniteelements-primary-100);
color: var(--uniteelements-primary-900);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--uniteelements-bg-page);
}
::-webkit-scrollbar-thumb {
background: var(--uniteelements-neutral-300);
border-radius: var(--uniteelements-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--uniteelements-neutral-400);
}
/* ==========================================================================
Reduced Motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- typography.css --- */
/**
* UniteElements Theme - Typography System & Utilities
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* Standard Elements */
h1, h2, h3, h4, h5, h6 {
font-family: var(--uniteelements-font-family);
font-weight: var(--uniteelements-font-weight-bold);
line-height: var(--uniteelements-line-height-tight);
color: var(--uniteelements-text-primary);
letter-spacing: var(--uniteelements-letter-spacing-tight);
margin-bottom: var(--uniteelements-space-4);
}
h1 { font-size: var(--uniteelements-font-size-h1); }
h2 { font-size: var(--uniteelements-font-size-h2); }
h3 { font-size: var(--uniteelements-font-size-h3); }
h4 { font-size: var(--uniteelements-font-size-h4); font-weight: var(--uniteelements-font-weight-semibold); }
h5 { font-size: var(--uniteelements-font-size-h5); font-weight: var(--uniteelements-font-weight-semibold); }
h6 { font-size: var(--uniteelements-font-size-h6); font-weight: var(--uniteelements-font-weight-semibold); letter-spacing: var(--uniteelements-letter-spacing-normal); }
p {
font-size: var(--uniteelements-font-size-body);
line-height: var(--uniteelements-line-height-relaxed);
color: var(--uniteelements-text-secondary);
margin-bottom: var(--uniteelements-space-4);
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--uniteelements-primary-500);
text-decoration: none;
transition: color var(--uniteelements-duration-fast) ease;
}
a:hover {
color: var(--uniteelements-primary-600);
}
/* ==========================================================================
Typography Scale Utility Classes
========================================================================== */
.uniteelements-display-xl {
font-size: var(--uniteelements-font-size-display-xl);
font-weight: var(--uniteelements-font-weight-bold);
line-height: var(--uniteelements-line-height-tight);
letter-spacing: var(--uniteelements-letter-spacing-tighter);
}
.uniteelements-display-l {
font-size: var(--uniteelements-font-size-display-l);
font-weight: var(--uniteelements-font-weight-bold);
line-height: var(--uniteelements-line-height-tight);
letter-spacing: var(--uniteelements-letter-spacing-tighter);
}
.uniteelements-display-m {
font-size: var(--uniteelements-font-size-display-m);
font-weight: var(--uniteelements-font-weight-bold);
line-height: var(--uniteelements-line-height-snug);
letter-spacing: var(--uniteelements-letter-spacing-tight);
}
.uniteelements-heading-1 { font-size: var(--uniteelements-font-size-h1); font-weight: var(--uniteelements-font-weight-bold); }
.uniteelements-heading-2 { font-size: var(--uniteelements-font-size-h2); font-weight: var(--uniteelements-font-weight-bold); }
.uniteelements-heading-3 { font-size: var(--uniteelements-font-size-h3); font-weight: var(--uniteelements-font-weight-semibold); }
.uniteelements-heading-4 { font-size: var(--uniteelements-font-size-h4); font-weight: var(--uniteelements-font-weight-semibold); }
.uniteelements-heading-5 { font-size: var(--uniteelements-font-size-h5); font-weight: var(--uniteelements-font-weight-semibold); }
.uniteelements-heading-6 { font-size: var(--uniteelements-font-size-h6); font-weight: var(--uniteelements-font-weight-semibold); }
.uniteelements-body-lg {
font-size: var(--uniteelements-font-size-body-lg);
line-height: var(--uniteelements-line-height-relaxed);
}
.uniteelements-body {
font-size: var(--uniteelements-font-size-body);
line-height: var(--uniteelements-line-height-relaxed);
}
.uniteelements-body-sm {
font-size: var(--uniteelements-font-size-body-sm);
line-height: var(--uniteelements-line-height-normal);
}
.uniteelements-caption {
font-size: var(--uniteelements-font-size-caption);
line-height: var(--uniteelements-line-height-normal);
color: var(--uniteelements-text-muted);
}
.uniteelements-overline {
font-size: var(--uniteelements-font-size-overline);
font-weight: var(--uniteelements-font-weight-bold);
line-height: var(--uniteelements-line-height-none);
text-transform: uppercase;
letter-spacing: var(--uniteelements-letter-spacing-wider);
color: var(--uniteelements-primary-500);
}
.uniteelements-label-lg { font-size: var(--uniteelements-font-size-body-lg); font-weight: var(--uniteelements-font-weight-semibold); }
.uniteelements-label { font-size: var(--uniteelements-font-size-body); font-weight: var(--uniteelements-font-weight-medium); }
.uniteelements-label-sm { font-size: var(--uniteelements-font-size-body-sm); font-weight: var(--uniteelements-font-weight-medium); }
/* Color Modifier Helpers */
.uniteelements-text-primary { color: var(--uniteelements-text-primary) !important; }
.uniteelements-text-secondary { color: var(--uniteelements-text-secondary) !important; }
.uniteelements-text-muted { color: var(--uniteelements-text-muted) !important; }
.uniteelements-text-brand { color: var(--uniteelements-primary-500) !important; }
.uniteelements-text-success { color: var(--uniteelements-success-500) !important; }
.uniteelements-text-warning { color: var(--uniteelements-warning-500) !important; }
.uniteelements-text-danger { color: var(--uniteelements-danger-500) !important; }
/* --- layout.css --- */
/**
* UniteElements Theme - Layout Containers, Grid System & Stack Utilities
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Shell & Document Structure
========================================================================== */
html {
scroll-behavior: smooth;
}
#offers,
#products,
#ecosystem,
#bundles,
#services,
#community,
#latest-drops,
#featured-products {
scroll-margin-top: 85px;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
position: sticky;
top: 10px;
z-index: 990;
padding: 0 16px;
margin-bottom: 8px;
background: transparent;
border: none;
box-shadow: none;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .header-inner {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(24px) saturate(190%);
-webkit-backdrop-filter: blur(24px) saturate(190%);
border: 1.5px solid rgba(255, 255, 255, 0.95);
border-radius: 999px;
padding: 6px 20px;
box-shadow: 0 10px 32px -10px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
min-height: 58px;
}
.site-main {
flex: 1 0 auto;
padding: 0;
}
.site-footer {
background-color: var(--uniteelements-bg-surface);
border-top: 1px solid var(--uniteelements-border-default);
padding: var(--uniteelements-space-12) 0 var(--uniteelements-space-8);
margin-top: auto;
}
/* ==========================================================================
2. Layout Containers
========================================================================== */
.uniteelements-container {
width: 100%;
max-width: var(--uniteelements-container-standard);
margin-left: auto;
margin-right: auto;
padding-left: var(--uniteelements-container-pad);
padding-right: var(--uniteelements-container-pad);
}
.uniteelements-container--narrow {
max-width: var(--uniteelements-container-narrow);
}
.uniteelements-container--wide {
max-width: var(--uniteelements-container-wide);
}
.uniteelements-container--full {
max-width: var(--uniteelements-container-full);
}
/* ==========================================================================
3. Grid System
========================================================================== */
.uniteelements-grid {
display: grid;
gap: var(--uniteelements-space-6);
}
.uniteelements-grid-2 {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-6);
}
@media (min-width: 768px) {
.uniteelements-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
}
.uniteelements-grid-3 {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-6);
}
@media (min-width: 640px) {
.uniteelements-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.uniteelements-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
.uniteelements-grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-4);
}
@media (min-width: 480px) {
.uniteelements-grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: var(--uniteelements-space-4);
}
}
@media (min-width: 1024px) {
.uniteelements-grid-4 {
grid-template-columns: repeat(4, 1fr);
gap: var(--uniteelements-space-6);
}
}
/* Specialized 4-Item Metric / Stats Strip (2x2 on mobile, 4 in a row on desktop) */
.uniteelements-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 768px) {
.uniteelements-stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
}
.uniteelements-grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--uniteelements-space-6);
}
/* Responsive Table Wrapper for Mobile Scrolling */
.uniteelements-responsive-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: var(--uniteelements-space-4);
}
/* Sidebar + Content Layout */
.uniteelements-grid-sidebar {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-8);
}
@media (min-width: 1024px) {
.uniteelements-grid-sidebar {
grid-template-columns: 280px 1fr;
}
}
.uniteelements-grid-sidebar-right {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-8);
}
@media (min-width: 1024px) {
.uniteelements-grid-sidebar-right {
grid-template-columns: 1fr 280px;
}
}
/* Editorial Asymmetric Composition */
.uniteelements-grid-editorial {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-6);
}
@media (min-width: 1024px) {
.uniteelements-grid-editorial {
grid-template-columns: 1.4fr 1fr;
}
}
/* ==========================================================================
4. Flex & Stack Layout Utilities
========================================================================== */
.uniteelements-stack {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-4);
}
.uniteelements-stack--sm { gap: var(--uniteelements-space-2); }
.uniteelements-stack--lg { gap: var(--uniteelements-space-8); }
.uniteelements-stack--xl { gap: var(--uniteelements-space-12); }
.uniteelements-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--uniteelements-space-4);
}
.uniteelements-inline--sm { gap: var(--uniteelements-space-2); }
.uniteelements-inline--lg { gap: var(--uniteelements-space-6); }
.uniteelements-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--uniteelements-space-3);
}
.uniteelements-split {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--uniteelements-space-4);
}
.uniteelements-center {
display: flex;
justify-content: center;
align-items: center;
}
/* ==========================================================================
5. Dividers
========================================================================== */
.uniteelements-divider {
border: 0;
height: 1px;
background-color: var(--uniteelements-border-default);
margin: var(--uniteelements-space-6) 0;
}
.uniteelements-divider--subtle {
background-color: var(--uniteelements-border-subtle);
}
.uniteelements-divider--glass {
background-color: var(--uniteelements-border-glass);
}
/* ==========================================================================
6. Responsive Visibility Classes
========================================================================== */
.uniteelements-hide-mobile {
display: none !important;
}
@media (min-width: 768px) {
.uniteelements-hide-mobile {
display: inline-flex !important;
}
}
.uniteelements-hide-desktop {
display: inline-flex !important;
}
@media (min-width: 768px) {
.uniteelements-hide-desktop {
display: none !important;
}
}
/* --- components/buttons.css --- */
/**
* UniteElements Component - Buttons
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
font-family: var(--uniteelements-font-family);
font-weight: var(--uniteelements-font-weight-medium);
line-height: var(--uniteelements-line-height-none);
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--uniteelements-radius-md);
cursor: pointer;
transition: var(--uniteelements-transition);
white-space: nowrap;
user-select: none;
gap: var(--uniteelements-space-2);
}
.uniteelements-btn svg {
width: 1.15em;
height: 1.15em;
fill: currentColor;
flex-shrink: 0;
transition: transform var(--uniteelements-duration-fast) ease;
}
/* ==========================================================================
Button Sizes
========================================================================== */
.uniteelements-btn--sm {
height: 32px;
padding: 0 var(--uniteelements-space-3);
font-size: var(--uniteelements-font-size-body-sm);
border-radius: var(--uniteelements-radius-sm);
}
.uniteelements-btn--md {
height: 40px;
padding: 0 var(--uniteelements-space-4);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-semibold);
}
.uniteelements-btn--lg {
height: 48px;
padding: 0 var(--uniteelements-space-6);
font-size: var(--uniteelements-font-size-body);
font-weight: var(--uniteelements-font-weight-semibold);
border-radius: var(--uniteelements-radius-lg);
}
.uniteelements-btn--xl {
height: 56px;
padding: 0 var(--uniteelements-space-8);
font-size: var(--uniteelements-font-size-body-lg);
font-weight: var(--uniteelements-font-weight-semibold);
border-radius: var(--uniteelements-radius-lg);
}
.uniteelements-btn--full {
width: 100%;
}
.uniteelements-btn--icon-only {
padding: 0;
width: 40px;
height: 40px;
}
.uniteelements-btn--icon-only.uniteelements-btn--sm { width: 32px; height: 32px; }
.uniteelements-btn--icon-only.uniteelements-btn--lg { width: 48px; height: 48px; }
/* ==========================================================================
Button Variants
========================================================================== */
/* 1. Primary (#2B5DF5) */
.uniteelements-btn--primary {
background-color: var(--uniteelements-primary-500);
color: var(--uniteelements-primary-contrast);
box-shadow: 0 2px 4px 0 rgba(43, 93, 245, 0.2), 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}
.uniteelements-btn--primary:hover {
background-color: var(--uniteelements-primary-600);
color: var(--uniteelements-primary-contrast);
transform: translateY(-1px);
box-shadow: 0 4px 12px 0 rgba(43, 93, 245, 0.28), 0 2px 4px 0 rgba(15, 23, 42, 0.06);
}
.uniteelements-btn--primary:active {
background-color: var(--uniteelements-primary-700);
transform: translateY(0);
box-shadow: 0 1px 2px 0 rgba(43, 93, 245, 0.2);
}
/* 2. Secondary */
.uniteelements-btn--secondary {
background-color: var(--uniteelements-bg-surface);
color: var(--uniteelements-text-primary);
border-color: var(--uniteelements-border-default);
box-shadow: var(--uniteelements-shadow-xs);
}
.uniteelements-btn--secondary:hover {
background-color: var(--uniteelements-bg-surface-subtle);
color: var(--uniteelements-primary-500);
border-color: var(--uniteelements-border-strong);
transform: translateY(-1px);
box-shadow: var(--uniteelements-shadow-sm);
}
.uniteelements-btn--secondary:active {
background-color: var(--uniteelements-bg-surface-active);
transform: translateY(0);
}
/* 3. Tertiary (Soft Brand) */
.uniteelements-btn--tertiary {
background-color: var(--uniteelements-primary-soft);
color: var(--uniteelements-primary-500);
}
.uniteelements-btn--tertiary:hover {
background-color: rgba(43, 93, 245, 0.14);
color: var(--uniteelements-primary-600);
transform: translateY(-1px);
}
.uniteelements-btn--tertiary:active {
background-color: rgba(43, 93, 245, 0.18);
transform: translateY(0);
}
/* 4. Ghost */
.uniteelements-btn--ghost {
background-color: transparent;
color: var(--uniteelements-text-secondary);
}
.uniteelements-btn--ghost:hover {
background-color: var(--uniteelements-bg-surface-subtle);
color: var(--uniteelements-text-primary);
}
.uniteelements-btn--ghost:active {
background-color: var(--uniteelements-bg-surface-active);
}
/* 5. Glass (Liquid Glass) */
.uniteelements-btn--glass {
background-color: var(--uniteelements-glass-bg);
backdrop-filter: var(--uniteelements-glass-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-blur);
border-color: var(--uniteelements-glass-border);
color: var(--uniteelements-text-primary);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-xs);
}
.uniteelements-btn--glass:hover {
background-color: rgba(255, 255, 255, 0.96);
color: var(--uniteelements-primary-500);
border-color: rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-md);
}
.uniteelements-btn--glass:active {
transform: translateY(0);
}
/* 6. Danger */
.uniteelements-btn--danger {
background-color: var(--uniteelements-danger-500);
color: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(239, 68, 68, 0.2);
}
.uniteelements-btn--danger:hover {
background-color: var(--uniteelements-danger-600);
transform: translateY(-1px);
box-shadow: 0 4px 10px 0 rgba(239, 68, 68, 0.3);
}
/* 7. Link */
.uniteelements-btn--link {
background: none;
border: 0;
padding: 0;
height: auto;
color: var(--uniteelements-primary-500);
font-weight: var(--uniteelements-font-weight-medium);
}
.uniteelements-btn--link:hover {
color: var(--uniteelements-primary-600);
text-decoration: underline;
}
/* ==========================================================================
States (Disabled & Loading)
========================================================================== */
.uniteelements-btn:disabled,
.uniteelements-btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
box-shadow: none !important;
}
.uniteelements-btn.is-loading {
color: transparent !important;
pointer-events: none;
}
.uniteelements-btn.is-loading::after {
content: '';
position: absolute;
width: 1.25em;
height: 1.25em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: uniteelements-spin 0.6s linear infinite;
}
.uniteelements-btn--primary.is-loading::after {
border-color: #FFFFFF;
border-right-color: transparent;
}
@keyframes uniteelements-spin {
to { transform: rotate(360deg); }
}
/* --- components/inputs.css --- */
/**
* UniteElements Component - Inputs & Form Controls
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Form Layout & Field Containers
========================================================================== */
.uniteelements-form-group {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-2);
margin-bottom: var(--uniteelements-space-4);
width: 100%;
}
.uniteelements-form-group:last-child {
margin-bottom: 0;
}
.uniteelements-label {
display: inline-flex;
align-items: center;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-medium);
color: var(--uniteelements-text-primary);
gap: var(--uniteelements-space-1);
}
.uniteelements-label .required,
.uniteelements-required {
color: var(--uniteelements-danger-500);
font-weight: var(--uniteelements-font-weight-bold);
}
.uniteelements-help-text {
font-size: var(--uniteelements-font-size-caption);
color: var(--uniteelements-text-muted);
}
.uniteelements-error-message {
font-size: var(--uniteelements-font-size-caption);
color: var(--uniteelements-danger-500);
font-weight: var(--uniteelements-font-weight-medium);
display: flex;
align-items: center;
gap: var(--uniteelements-space-1);
}
/* ==========================================================================
2. Base Text Inputs & Textarea
========================================================================== */
.uniteelements-input,
.uniteelements-textarea,
.uniteelements-select {
width: 100%;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-primary);
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-md);
padding: 0 var(--uniteelements-space-4);
height: 42px;
transition: var(--uniteelements-transition);
box-shadow: var(--uniteelements-shadow-xs);
-webkit-appearance: none;
appearance: none;
}
.uniteelements-input::placeholder,
.uniteelements-textarea::placeholder {
color: var(--uniteelements-text-disabled);
}
.uniteelements-input:hover,
.uniteelements-textarea:hover,
.uniteelements-select:hover {
border-color: var(--uniteelements-border-strong);
}
.uniteelements-input:focus,
.uniteelements-textarea:focus,
.uniteelements-select:focus {
border-color: var(--uniteelements-primary-500);
box-shadow: var(--uniteelements-focus-ring);
outline: none;
}
.uniteelements-textarea {
height: auto;
min-height: 100px;
padding: var(--uniteelements-space-3) var(--uniteelements-space-4);
line-height: var(--uniteelements-line-height-normal);
resize: vertical;
}
/* Input Sizes */
.uniteelements-input--sm {
height: 34px;
padding: 0 var(--uniteelements-space-3);
font-size: var(--uniteelements-font-size-caption);
border-radius: var(--uniteelements-radius-sm);
}
.uniteelements-input--lg {
height: 50px;
padding: 0 var(--uniteelements-space-5);
font-size: var(--uniteelements-font-size-body);
border-radius: var(--uniteelements-radius-lg);
}
/* ==========================================================================
3. Input Adornments & Icons
========================================================================== */
.uniteelements-input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.uniteelements-input-icon-left,
.uniteelements-input-icon-right {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: var(--uniteelements-text-muted);
pointer-events: none;
width: 40px;
height: 100%;
}
.uniteelements-input-icon-left { left: 0; }
.uniteelements-input-icon-right { right: 0; }
.uniteelements-input-wrapper--has-left .uniteelements-input {
padding-left: 40px;
}
.uniteelements-input-wrapper--has-right .uniteelements-input {
padding-right: 40px;
}
/* ==========================================================================
4. Custom Select Dropdown
========================================================================== */
.uniteelements-select-wrapper {
position: relative;
width: 100%;
}
.uniteelements-select-wrapper::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--uniteelements-text-muted);
pointer-events: none;
}
/* ==========================================================================
5. Checkboxes, Radios & Toggles
========================================================================== */
.uniteelements-checkbox-label,
.uniteelements-radio-label {
display: inline-flex;
align-items: center;
gap: var(--uniteelements-space-3);
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-primary);
cursor: pointer;
user-select: none;
}
.uniteelements-checkbox,
.uniteelements-radio {
width: 18px;
height: 18px;
border: 1px solid var(--uniteelements-border-strong);
background-color: var(--uniteelements-bg-surface);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
display: grid;
place-content: center;
transition: var(--uniteelements-transition);
margin: 0;
}
.uniteelements-checkbox {
border-radius: var(--uniteelements-radius-xs);
}
.uniteelements-radio {
border-radius: 50%;
}
.uniteelements-checkbox:checked,
.uniteelements-radio:checked {
background-color: var(--uniteelements-primary-500);
border-color: var(--uniteelements-primary-500);
}
.uniteelements-checkbox:checked::before {
content: '';
width: 10px;
height: 6px;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
transform: rotate(-45deg) translate(1px, -1px);
}
.uniteelements-radio:checked::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #FFFFFF;
}
/* Toggle Switch */
.uniteelements-toggle-label {
display: inline-flex;
align-items: center;
gap: var(--uniteelements-space-3);
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-primary);
cursor: pointer;
user-select: none;
}
.uniteelements-toggle {
position: relative;
width: 44px;
height: 24px;
appearance: none;
-webkit-appearance: none;
background-color: var(--uniteelements-neutral-200);
border-radius: var(--uniteelements-radius-pill);
cursor: pointer;
transition: var(--uniteelements-transition);
outline: none;
}
.uniteelements-toggle::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 2px;
left: 2px;
background-color: #FFFFFF;
box-shadow: var(--uniteelements-shadow-xs);
transition: transform var(--uniteelements-duration-fast) var(--uniteelements-ease-standard);
}
.uniteelements-toggle:checked {
background-color: var(--uniteelements-primary-500);
}
.uniteelements-toggle:checked::before {
transform: translateX(20px);
}
/* ==========================================================================
6. Error & Validation States
========================================================================== */
.uniteelements-input.is-error,
.uniteelements-textarea.is-error,
.uniteelements-select.is-error {
border-color: var(--uniteelements-danger-500);
}
.uniteelements-input.is-error:focus,
.uniteelements-textarea.is-error:focus,
.uniteelements-select.is-error:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.uniteelements-input.is-success,
.uniteelements-textarea.is-success,
.uniteelements-select.is-success {
border-color: var(--uniteelements-success-500);
}
.uniteelements-input:disabled,
.uniteelements-textarea:disabled,
.uniteelements-select:disabled,
.uniteelements-toggle:disabled,
.uniteelements-checkbox:disabled {
background-color: var(--uniteelements-neutral-100);
color: var(--uniteelements-text-disabled);
cursor: not-allowed;
opacity: 0.7;
}
/* --- components/cards.css --- */
/**
* UniteElements Component - Cards & Panels
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-card {
position: relative;
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-xl);
padding: var(--uniteelements-space-6);
transition: all var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
}
/* ==========================================================================
Card Structural Elements
========================================================================== */
.uniteelements-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--uniteelements-space-4);
gap: var(--uniteelements-space-3);
}
.uniteelements-card__title {
font-size: var(--uniteelements-font-size-h4);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-primary);
margin: 0;
}
.uniteelements-card__subtitle {
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-muted);
margin-top: var(--uniteelements-space-1);
}
.uniteelements-card__body {
flex: 1 1 auto;
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-secondary);
}
.uniteelements-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--uniteelements-space-6);
padding-top: var(--uniteelements-space-4);
border-top: 1px solid var(--uniteelements-border-subtle);
}
.uniteelements-card__media {
margin: calc(var(--uniteelements-space-6) * -1) calc(var(--uniteelements-space-6) * -1) var(--uniteelements-space-4);
border-radius: var(--uniteelements-radius-xl) var(--uniteelements-radius-xl) 0 0;
overflow: hidden;
}
.uniteelements-card__media img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
}
/* ==========================================================================
Card Variants
========================================================================== */
/* 1. Glass Card (Liquid Glass Material) */
.uniteelements-card--glass {
background: var(--uniteelements-glass-bg);
backdrop-filter: var(--uniteelements-glass-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-blur);
border: 1px solid var(--uniteelements-glass-border);
border-radius: var(--uniteelements-radius-2xl);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-glass-bevel), var(--uniteelements-shadow-glass);
}
/* 2. Elevated Card */
.uniteelements-card--elevated {
border-color: rgba(226, 232, 240, 0.6);
box-shadow: var(--uniteelements-shadow-lg);
}
/* 3. Interactive / Hover Card */
.uniteelements-card--interactive {
cursor: pointer;
border-radius: var(--uniteelements-radius-xl);
}
.uniteelements-card--interactive:hover {
transform: translateY(-3px);
border-color: rgba(43, 93, 245, 0.35);
box-shadow: var(--uniteelements-shadow-card-hover), 0 0 0 1px rgba(43, 93, 245, 0.1) inset;
}
.uniteelements-card--interactive:hover .uniteelements-card__media img {
transform: scale(1.02);
}
/* 4. Stat Card (For dashboards / metric highlights) */
.uniteelements-card--stat {
padding: var(--uniteelements-space-5);
border-radius: var(--uniteelements-radius-xl);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.85));
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 30px -10px rgba(43, 93, 245, 0.08), inset 0 1px 1px rgba(255, 255, 255, 1);
}
.uniteelements-card--stat .stat-value {
font-size: var(--uniteelements-font-size-display-m);
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
line-height: var(--uniteelements-line-height-none);
margin: var(--uniteelements-space-2) 0;
}
.uniteelements-card--stat .stat-change {
display: inline-flex;
align-items: center;
gap: var(--uniteelements-space-1);
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-medium);
}
.uniteelements-card--stat .stat-change--up { color: var(--uniteelements-success-600); }
.uniteelements-card--stat .stat-change--down { color: var(--uniteelements-danger-600); }
/* 5. Feature Card (6-grid on Single Deal / Product) */
.uniteelements-card--feature {
border-radius: var(--uniteelements-radius-xl);
border: 1px solid rgba(219, 230, 254, 0.6);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.65));
padding: var(--uniteelements-space-6);
box-shadow: 0 8px 24px -6px rgba(43, 93, 245, 0.04);
}
.uniteelements-card--feature .feature-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--uniteelements-radius-lg);
background: linear-gradient(135deg, #EFF4FF 0%, #DBE6FE 100%);
color: var(--uniteelements-primary-500);
margin-bottom: var(--uniteelements-space-4);
box-shadow: 0 4px 12px -2px rgba(43, 93, 245, 0.15);
}
/* 6. 3D Glass Hero Showcase & Podiums */
.uniteelements-3d-podium {
position: relative;
perspective: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-3d-stage {
position: absolute;
bottom: -20px;
width: 280px;
height: 60px;
background: radial-gradient(ellipse at center, rgba(43, 93, 245, 0.25) 0%, rgba(43, 93, 245, 0.05) 50%, transparent 70%);
border-radius: 50%;
filter: blur(10px);
z-index: 1;
}
.uniteelements-3d-glass-plate {
position: relative;
z-index: 2;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(219, 230, 254, 0.45) 50%, rgba(255, 255, 255, 0.75) 100%);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1.5px solid rgba(255, 255, 255, 0.95);
border-radius: 28px;
box-shadow: 0 25px 60px -15px rgba(43, 93, 245, 0.2), inset 0 2px 2px rgba(255, 255, 255, 1), inset 0 -2px 4px rgba(43, 93, 245, 0.1);
padding: 24px;
transition: transform 0.4s var(--uniteelements-ease-standard);
}
.uniteelements-3d-orb {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(43, 93, 245, 0.6) 60%, rgba(29, 68, 219, 0.9) 100%);
box-shadow: 0 10px 25px -5px rgba(43, 93, 245, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
/* --- components/badges.css --- */
/**
* UniteElements Component - Badges & Tags
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-badge {
display: inline-flex;
align-items: center;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-semibold);
line-height: var(--uniteelements-line-height-none);
padding: 4px 10px;
border-radius: var(--uniteelements-radius-pill);
white-space: nowrap;
gap: 6px;
border: 1px solid transparent;
transition: var(--uniteelements-transition);
}
.uniteelements-badge svg {
width: 12px;
height: 12px;
fill: currentColor;
}
/* ==========================================================================
Badge Sizes
========================================================================== */
.uniteelements-badge--sm {
padding: 2px 7px;
font-size: var(--uniteelements-font-size-overline);
}
.uniteelements-badge--lg {
padding: 6px 14px;
font-size: var(--uniteelements-font-size-body-sm);
}
/* Dot Indicator */
.uniteelements-badge .badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
}
/* ==========================================================================
Status Variants
========================================================================== */
/* Active / Success */
.uniteelements-badge--active,
.uniteelements-badge--success {
background-color: var(--uniteelements-success-50);
color: var(--uniteelements-success-600);
border-color: rgba(16, 185, 129, 0.2);
}
/* Warning / Expiring */
.uniteelements-badge--warning,
.uniteelements-badge--expiring {
background-color: var(--uniteelements-warning-50);
color: var(--uniteelements-warning-600);
border-color: rgba(245, 158, 11, 0.2);
}
/* Danger / Expired / Revoked */
.uniteelements-badge--danger,
.uniteelements-badge--expired {
background-color: var(--uniteelements-danger-50);
color: var(--uniteelements-danger-600);
border-color: rgba(239, 68, 68, 0.2);
}
/* Info / Primary Blue */
.uniteelements-badge--brand,
.uniteelements-badge--info {
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-600);
border-color: rgba(43, 93, 245, 0.18);
}
/* Neutral / Draft / Pending */
.uniteelements-badge--neutral,
.uniteelements-badge--pending {
background-color: var(--uniteelements-neutral-100);
color: var(--uniteelements-neutral-700);
border-color: var(--uniteelements-border-default);
}
/* ==========================================================================
Specialty & Technology Badges
========================================================================== */
.uniteelements-badge--verified {
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-500);
border-color: rgba(43, 93, 245, 0.2);
}
.uniteelements-badge--new {
background-color: #0F172A;
color: #FFFFFF;
}
.uniteelements-badge--popular {
background: linear-gradient(135deg, var(--uniteelements-primary-500) 0%, var(--uniteelements-primary-700) 100%);
color: #FFFFFF;
}
.uniteelements-badge--outline {
background-color: transparent;
}
/* --- components/avatars.css --- */
/**
* UniteElements Component - Avatars
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-700);
font-family: var(--uniteelements-font-family);
font-weight: var(--uniteelements-font-weight-semibold);
line-height: var(--uniteelements-line-height-none);
user-select: none;
overflow: hidden;
flex-shrink: 0;
border: 2px solid var(--uniteelements-neutral-white);
box-shadow: var(--uniteelements-shadow-xs);
}
.uniteelements-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uniteelements-avatar svg {
width: 55%;
height: 55%;
fill: currentColor;
}
/* ==========================================================================
Avatar Sizes
========================================================================== */
.uniteelements-avatar--xs {
width: 24px;
height: 24px;
font-size: 10px;
}
.uniteelements-avatar--sm {
width: 32px;
height: 32px;
font-size: 12px;
}
.uniteelements-avatar--md {
width: 40px;
height: 40px;
font-size: 14px;
}
.uniteelements-avatar--lg {
width: 48px;
height: 48px;
font-size: 16px;
}
.uniteelements-avatar--xl {
width: 64px;
height: 64px;
font-size: 22px;
}
/* ==========================================================================
Status Indicator Dot
========================================================================== */
.uniteelements-avatar__status {
position: absolute;
bottom: 0;
right: 0;
width: 25%;
height: 25%;
min-width: 8px;
min-height: 8px;
border-radius: 50%;
border: 2px solid var(--uniteelements-neutral-white);
}
.uniteelements-avatar__status--online { background-color: var(--uniteelements-success-500); }
.uniteelements-avatar__status--busy { background-color: var(--uniteelements-danger-500); }
.uniteelements-avatar__status--away { background-color: var(--uniteelements-warning-500); }
/* ==========================================================================
Avatar Group
========================================================================== */
.uniteelements-avatar-group {
display: inline-flex;
align-items: center;
}
.uniteelements-avatar-group .uniteelements-avatar {
margin-left: -10px;
transition: transform var(--uniteelements-duration-fast) ease;
}
.uniteelements-avatar-group .uniteelements-avatar:first-child {
margin-left: 0;
}
.uniteelements-avatar-group .uniteelements-avatar:hover {
transform: translateY(-2px) scale(1.05);
z-index: 2;
}
/* --- components/tooltips.css --- */
/**
* UniteElements Component - Tooltips
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
[data-uniteelements-tooltip] {
position: relative;
}
.uniteelements-tooltip {
position: absolute;
z-index: 1000;
background-color: var(--uniteelements-neutral-900);
color: #FFFFFF;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-medium);
line-height: var(--uniteelements-line-height-normal);
padding: 5px 10px;
border-radius: var(--uniteelements-radius-sm);
white-space: nowrap;
pointer-events: none;
box-shadow: var(--uniteelements-shadow-md);
opacity: 0;
visibility: hidden;
transition: opacity var(--uniteelements-duration-fast) ease, transform var(--uniteelements-duration-fast) ease;
}
/* Placements */
.uniteelements-tooltip--top {
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(4px);
margin-bottom: 6px;
}
.uniteelements-tooltip--bottom {
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
margin-top: 6px;
}
.uniteelements-tooltip.is-active,
[data-uniteelements-tooltip]:hover .uniteelements-tooltip,
[data-uniteelements-tooltip]:focus-visible .uniteelements-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* --- components/modals.css --- */
/**
* UniteElements Component - Modals & Dialogs
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* Modal Backdrop / Overlay (Hidden by default, fixed full-screen) */
.uniteelements-modal-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 75px var(--uniteelements-space-4) var(--uniteelements-space-4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.uniteelements-modal-overlay.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Modal Content Container */
.uniteelements-modal {
position: relative;
width: 100%;
max-width: 580px;
max-height: 85vh;
background: #FFFFFF;
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-2xl, 24px);
box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96) translateY(-10px);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: auto;
}
.uniteelements-modal-overlay.is-active .uniteelements-modal {
transform: scale(1) translateY(0);
}
/* Glass Modal Variant (Crisp 3D Elevated White Glass) */
.uniteelements-modal--glass {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border: 1.5px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 25px 60px -15px rgba(43, 93, 245, 0.2), inset 0 1px 2px 0 rgba(255, 255, 255, 1);
}
/* Search Modal Specific Sizing */
.uniteelements-modal--search {
max-width: 620px;
border-radius: 20px;
box-shadow: 0 30px 80px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 1) inset;
}
/* Modal Sections */
.uniteelements-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--uniteelements-space-6) var(--uniteelements-space-6) var(--uniteelements-space-4);
border-bottom: 1px solid var(--uniteelements-border-subtle);
}
.uniteelements-modal__title {
font-size: var(--uniteelements-font-size-h3);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-primary);
margin: 0;
}
.uniteelements-modal__close {
background: transparent;
border: 0;
cursor: pointer;
color: var(--uniteelements-text-muted);
padding: var(--uniteelements-space-2);
border-radius: var(--uniteelements-radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: var(--uniteelements-transition);
}
.uniteelements-modal__close:hover {
color: var(--uniteelements-text-primary);
background-color: var(--uniteelements-bg-surface-subtle);
}
.uniteelements-modal__body {
padding: var(--uniteelements-space-6);
overflow-y: auto;
flex: 1 1 auto;
}
.uniteelements-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--uniteelements-space-3);
padding: var(--uniteelements-space-4) var(--uniteelements-space-6);
background-color: var(--uniteelements-bg-surface-subtle);
border-top: 1px solid var(--uniteelements-border-subtle);
}
/* Mobile responsive sheet */
@media (max-width: 640px) {
.uniteelements-modal-overlay {
padding: 20px 10px;
align-items: flex-start;
}
.uniteelements-modal--mobile-fullscreen {
max-width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
}
}
/* --- components/drawers.css --- */
/**
* UniteElements Component - Drawers & Slide-over Sheets
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-drawer-overlay {
position: fixed;
inset: 0;
z-index: 9980;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
opacity: 0;
visibility: hidden;
transition: opacity var(--uniteelements-duration-normal) var(--uniteelements-ease-standard),
visibility var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
}
.uniteelements-drawer-overlay.is-active {
opacity: 1;
visibility: visible;
}
.uniteelements-drawer {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
max-width: 420px;
background: #FFFFFF;
z-index: 9985;
display: flex;
flex-direction: column;
box-shadow: var(--uniteelements-shadow-xl);
transition: transform var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
}
/* Right Drawer (Default) */
.uniteelements-drawer--right {
right: 0;
transform: translateX(100%);
border-left: 1px solid var(--uniteelements-border-default);
}
/* Left Drawer */
.uniteelements-drawer--left {
left: 0;
transform: translateX(-100%);
border-right: 1px solid var(--uniteelements-border-default);
}
/* Bottom Sheet */
.uniteelements-drawer--bottom {
top: auto;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 85vh;
border-radius: var(--uniteelements-radius-2xl) var(--uniteelements-radius-2xl) 0 0;
transform: translateY(100%);
border-top: 1px solid var(--uniteelements-border-default);
}
.uniteelements-drawer.is-active {
transform: translate(0, 0);
}
/* Glass Drawer Variant */
.uniteelements-drawer--glass {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.96) 100%);
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border-left: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: -15px 0 50px rgba(15, 23, 42, 0.18);
}
/* Drawer Sections */
.uniteelements-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--uniteelements-space-6);
border-bottom: 1px solid var(--uniteelements-border-subtle);
}
.uniteelements-drawer__title {
font-size: var(--uniteelements-font-size-h3);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-primary);
margin: 0;
}
.uniteelements-drawer__body {
padding: var(--uniteelements-space-6);
overflow-y: auto;
flex: 1 1 auto;
}
.uniteelements-drawer__footer {
padding: var(--uniteelements-space-4) var(--uniteelements-space-6);
border-top: 1px solid var(--uniteelements-border-subtle);
background-color: var(--uniteelements-bg-surface-subtle);
}
/* --- components/dropdowns.css --- */
/**
* UniteElements Component - Dropdown Menus & Popovers
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-dropdown {
position: relative;
display: inline-block;
}
.uniteelements-dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1050;
min-width: 220px;
padding: var(--uniteelements-space-2);
margin-top: var(--uniteelements-space-2);
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
box-shadow: var(--uniteelements-shadow-lg);
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--uniteelements-duration-fast) ease,
transform var(--uniteelements-duration-fast) ease,
visibility var(--uniteelements-duration-fast) ease;
}
.uniteelements-dropdown__menu--right {
left: auto;
right: 0;
}
.uniteelements-dropdown.is-open .uniteelements-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Glass Dropdown Variant */
.uniteelements-dropdown__menu--glass {
background-color: var(--uniteelements-glass-strong-bg);
backdrop-filter: var(--uniteelements-glass-strong-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-strong-blur);
border-color: var(--uniteelements-glass-strong-border);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-lg);
}
.uniteelements-dropdown__item {
display: flex;
align-items: center;
gap: var(--uniteelements-space-3);
padding: var(--uniteelements-space-2) var(--uniteelements-space-3);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-medium);
color: var(--uniteelements-text-primary);
text-decoration: none;
border-radius: var(--uniteelements-radius-sm);
transition: var(--uniteelements-transition);
cursor: pointer;
border: 0;
background: transparent;
width: 100%;
text-align: left;
}
.uniteelements-dropdown__item:hover,
.uniteelements-dropdown__item:focus-visible {
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-600);
}
.uniteelements-dropdown__item--danger:hover {
background-color: var(--uniteelements-danger-50);
color: var(--uniteelements-danger-600);
}
.uniteelements-dropdown__divider {
height: 1px;
background-color: var(--uniteelements-border-subtle);
margin: var(--uniteelements-space-2) 0;
}
/* --- components/tabs.css --- */
/**
* UniteElements Component - Tabs & Segmented Controls
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Underline Tabs (Default)
========================================================================== */
.uniteelements-tabs {
display: flex;
align-items: center;
gap: var(--uniteelements-space-6);
border-bottom: 1px solid var(--uniteelements-border-default);
list-style: none;
padding: 0;
margin: 0 0 var(--uniteelements-space-6);
overflow-x: auto;
}
.uniteelements-tab {
position: relative;
padding: var(--uniteelements-space-3) 0;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-medium);
color: var(--uniteelements-text-muted);
background: transparent;
border: 0;
cursor: pointer;
white-space: nowrap;
transition: var(--uniteelements-transition);
}
.uniteelements-tab::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--uniteelements-primary-500);
transform: scaleX(0);
transition: transform var(--uniteelements-duration-fast) var(--uniteelements-ease-standard);
}
.uniteelements-tab:hover {
color: var(--uniteelements-text-primary);
}
.uniteelements-tab.is-active {
color: var(--uniteelements-primary-500);
font-weight: var(--uniteelements-font-weight-semibold);
}
.uniteelements-tab.is-active::after {
transform: scaleX(1);
}
/* ==========================================================================
2. Segmented Controls (iOS Inspired)
========================================================================== */
.uniteelements-segmented {
display: inline-flex;
background-color: var(--uniteelements-neutral-100);
padding: 3px;
border-radius: var(--uniteelements-radius-md);
gap: 2px;
border: 1px solid var(--uniteelements-border-subtle);
}
.uniteelements-segmented__item {
padding: 6px 14px;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-medium);
color: var(--uniteelements-text-muted);
background: transparent;
border: 0;
border-radius: var(--uniteelements-radius-sm);
cursor: pointer;
transition: var(--uniteelements-transition);
}
.uniteelements-segmented__item:hover {
color: var(--uniteelements-text-primary);
}
.uniteelements-segmented__item.is-active {
background-color: var(--uniteelements-bg-surface);
color: var(--uniteelements-text-primary);
font-weight: var(--uniteelements-font-weight-semibold);
box-shadow: var(--uniteelements-shadow-xs);
}
/* ==========================================================================
3. Pill Tabs
========================================================================== */
.uniteelements-tabs--pills {
border-bottom: 0;
gap: var(--uniteelements-space-2);
}
.uniteelements-tabs--pills .uniteelements-tab {
padding: var(--uniteelements-space-2) var(--uniteelements-space-4);
border-radius: var(--uniteelements-radius-pill);
background-color: transparent;
}
.uniteelements-tabs--pills .uniteelements-tab::after {
display: none;
}
.uniteelements-tabs--pills .uniteelements-tab:hover {
background-color: var(--uniteelements-bg-surface-subtle);
}
.uniteelements-tabs--pills .uniteelements-tab.is-active {
background-color: var(--uniteelements-primary-500);
color: #FFFFFF;
}
/* Tab Panels */
.uniteelements-tab-panel {
display: none;
}
.uniteelements-tab-panel.is-active {
display: block;
}
/* --- components/toasts.css --- */
/**
* UniteElements Component - Toasts & Floating Notifications
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-toast-container {
position: fixed;
bottom: var(--uniteelements-space-6);
right: var(--uniteelements-space-6);
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-3);
max-width: 400px;
width: calc(100% - 32px);
pointer-events: none;
}
.uniteelements-toast {
position: relative;
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
box-shadow: var(--uniteelements-shadow-lg);
padding: var(--uniteelements-space-4);
display: flex;
align-items: flex-start;
gap: var(--uniteelements-space-3);
pointer-events: auto;
transform: translateY(16px);
opacity: 0;
transition: transform var(--uniteelements-duration-normal) var(--uniteelements-ease-standard),
opacity var(--uniteelements-duration-normal) var(--uniteelements-ease-standard);
}
.uniteelements-toast.is-visible {
transform: translateY(0);
opacity: 1;
}
/* Glass Toast Variant */
.uniteelements-toast--glass {
background-color: var(--uniteelements-glass-strong-bg);
backdrop-filter: var(--uniteelements-glass-strong-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-strong-blur);
border-color: var(--uniteelements-glass-strong-border);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-lg);
}
.uniteelements-toast__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
}
.uniteelements-toast__content {
flex: 1 1 auto;
}
.uniteelements-toast__title {
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-primary);
margin-bottom: 2px;
}
.uniteelements-toast__message {
font-size: var(--uniteelements-font-size-caption);
color: var(--uniteelements-text-secondary);
line-height: var(--uniteelements-line-height-normal);
}
.uniteelements-toast__close {
background: transparent;
border: 0;
cursor: pointer;
color: var(--uniteelements-text-muted);
padding: 2px;
line-height: 1;
border-radius: var(--uniteelements-radius-xs);
flex-shrink: 0;
}
.uniteelements-toast__close:hover {
color: var(--uniteelements-text-primary);
}
/* Toast Status Colors */
.uniteelements-toast--success .uniteelements-toast__icon { color: var(--uniteelements-success-500); }
.uniteelements-toast--info .uniteelements-toast__icon { color: var(--uniteelements-primary-500); }
.uniteelements-toast--warning .uniteelements-toast__icon { color: var(--uniteelements-warning-500); }
.uniteelements-toast--error .uniteelements-toast__icon { color: var(--uniteelements-danger-500); }
/* --- components/states.css --- */
/**
* UniteElements Component - Loading, Empty & Error States
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Loading Spinners
========================================================================== */
.uniteelements-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid var(--uniteelements-border-strong);
border-radius: 50%;
border-top-color: var(--uniteelements-primary-500);
animation: uniteelements-spin 0.8s linear infinite;
}
.uniteelements-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.uniteelements-spinner--lg { width: 36px; height: 36px; border-width: 4px; }
/* ==========================================================================
2. Skeleton Loaders (Pulsing shimmer)
========================================================================== */
.uniteelements-skeleton {
background: linear-gradient(90deg, var(--uniteelements-neutral-100) 25%, var(--uniteelements-neutral-200) 50%, var(--uniteelements-neutral-100) 75%);
background-size: 200% 100%;
animation: uniteelements-skeleton-wave 1.5s infinite;
border-radius: var(--uniteelements-radius-sm);
display: block;
}
@keyframes uniteelements-skeleton-wave {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.uniteelements-skeleton--text { height: 14px; margin-bottom: 8px; width: 100%; }
.uniteelements-skeleton--title { height: 24px; margin-bottom: 12px; width: 60%; }
.uniteelements-skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }
.uniteelements-skeleton--button { height: 40px; width: 120px; border-radius: var(--uniteelements-radius-md); }
.uniteelements-skeleton--card { height: 180px; width: 100%; border-radius: var(--uniteelements-radius-lg); }
/* ==========================================================================
3. Empty States
========================================================================== */
.uniteelements-empty-state {
text-align: center;
padding: var(--uniteelements-space-12) var(--uniteelements-space-6);
background-color: var(--uniteelements-bg-surface);
border: 1px dashed var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-xl);
display: flex;
flex-direction: column;
align-items: center;
max-width: 500px;
margin: 0 auto;
}
.uniteelements-empty-state__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-500);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-empty-state__icon svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.uniteelements-empty-state__title {
font-size: var(--uniteelements-font-size-h3);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-primary);
margin-bottom: var(--uniteelements-space-2);
}
.uniteelements-empty-state__description {
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-secondary);
margin-bottom: var(--uniteelements-space-6);
max-width: 360px;
}
.uniteelements-empty-state__actions {
display: flex;
align-items: center;
gap: var(--uniteelements-space-3);
}
/* ==========================================================================
4. Error States & Banners
========================================================================== */
.uniteelements-error-state {
padding: var(--uniteelements-space-4) var(--uniteelements-space-6);
border-radius: var(--uniteelements-radius-md);
background-color: var(--uniteelements-danger-50);
border: 1px solid rgba(239, 68, 68, 0.2);
color: var(--uniteelements-danger-600);
display: flex;
align-items: flex-start;
gap: var(--uniteelements-space-3);
font-size: var(--uniteelements-font-size-body-sm);
}
.uniteelements-error-state svg {
width: 20px;
height: 20px;
fill: currentColor;
flex-shrink: 0;
margin-top: 1px;
}
/* --- components/tables.css --- */
/**
* UniteElements Component - Data Tables
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
.uniteelements-table-wrapper {
width: 100%;
overflow-x: auto;
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
box-shadow: var(--uniteelements-shadow-xs);
}
.uniteelements-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
}
.uniteelements-table th {
background-color: var(--uniteelements-neutral-50);
color: var(--uniteelements-text-muted);
font-weight: var(--uniteelements-font-weight-semibold);
font-size: var(--uniteelements-font-size-caption);
text-transform: uppercase;
letter-spacing: var(--uniteelements-letter-spacing-wide);
padding: var(--uniteelements-space-3) var(--uniteelements-space-4);
border-bottom: 1px solid var(--uniteelements-border-default);
white-space: nowrap;
}
.uniteelements-table td {
padding: var(--uniteelements-space-4);
border-bottom: 1px solid var(--uniteelements-border-subtle);
color: var(--uniteelements-text-primary);
vertical-align: middle;
}
.uniteelements-table tr:last-child td {
border-bottom: 0;
}
.uniteelements-table tbody tr {
transition: background-color var(--uniteelements-duration-fast) ease;
}
.uniteelements-table tbody tr:hover {
background-color: var(--uniteelements-primary-subtle);
}
.uniteelements-table .text-right {
text-align: right;
}
.uniteelements-table .text-center {
text-align: center;
}
/* Glass Table Variant */
.uniteelements-table-wrapper--glass {
background-color: var(--uniteelements-glass-bg);
backdrop-filter: var(--uniteelements-glass-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-blur);
border-color: var(--uniteelements-glass-border);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-xs);
}
/* --- components/offers.css --- */
/**
* UniteElements Theme - Offers & Deal Engine Styles
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Countdown Timer Component
========================================================================== */
.uniteelements-countdown-wrapper {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.uniteelements-countdown {
display: inline-flex;
align-items: center;
gap: 8px;
}
.uniteelements-countdown__unit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #FFFFFF;
border: 1.5px solid #E2E8F0;
border-radius: 12px;
min-width: 52px;
padding: 8px 10px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
transition: all 0.2s ease;
}
.uniteelements-countdown__unit:hover {
border-color: #93C5FD;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
}
.uniteelements-countdown__val {
font-family: var(--uniteelements-font-family, ui-sans-serif, system-ui);
font-size: 1.25rem;
font-weight: 800;
color: #0F172A;
line-height: 1;
letter-spacing: -0.02em;
}
.uniteelements-countdown__lbl {
font-size: 9px;
font-weight: 800;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
}
.uniteelements-countdown__sep {
font-size: 1.25rem;
font-weight: 800;
color: #94A3B8;
}
.uniteelements-countdown.is-expired .uniteelements-countdown__expired {
color: var(--uniteelements-text-muted);
font-weight: var(--uniteelements-font-weight-semibold);
font-size: var(--uniteelements-font-size-body-sm);
}
/* ==========================================================================
2. Spotlight Bento Showcase & Deal Canvas
========================================================================== */
.uniteelements-featured-deal-section {
margin: 36px 0 48px;
}
.uniteelements-spotlight-bento-canvas {
background: radial-gradient(120% 120% at 50% -10%, #FFFFFF 0%, #F8FAFC 55%, #F1F5F9 100%);
border: 1.5px solid rgba(203, 213, 225, 0.85);
border-radius: 28px;
padding: 40px;
box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-spotlight-top-neon {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3.5px;
background: linear-gradient(90deg, #2563EB 0%, #8B5CF6 35%, #EC4899 70%, #10B981 100%);
z-index: 3;
}
.uniteelements-spotlight-aurora-glow {
position: absolute;
top: -100px;
right: -80px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(139, 92, 246, 0.06) 50%, transparent 70%);
filter: blur(50px);
pointer-events: none;
z-index: 1;
}
.uniteelements-spotlight-bento-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
align-items: stretch;
position: relative;
z-index: 2;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
@media (min-width: 1080px) {
.uniteelements-spotlight-bento-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 36px;
}
}
.uniteelements-spotlight-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.uniteelements-spotlight-pills-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.uniteelements-spotlight-badge-fire {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #DC2626;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 999px;
}
.uniteelements-spotlight-badge-bolt {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
color: #2563EB;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 999px;
}
.uniteelements-spotlight-badge-type {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #059669;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-radius: 999px;
}
.uniteelements-spotlight-title {
font-size: clamp(24px, 3.2vw, 36px);
font-weight: 900;
line-height: 1.15;
margin: 0 0 14px;
letter-spacing: -0.035em;
}
.uniteelements-spotlight-title a {
color: #0F172A;
text-decoration: none;
transition: color 0.2s ease;
}
.uniteelements-spotlight-title a:hover {
color: #2563EB;
}
.uniteelements-spotlight-excerpt {
font-size: 15.5px;
line-height: 1.6;
color: #475569;
margin: 0 0 20px;
font-weight: 500;
}
.uniteelements-spotlight-price-row {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.uniteelements-spotlight-price-main {
display: flex;
align-items: baseline;
gap: 12px;
}
.uniteelements-spotlight-price-main del {
font-size: 1.25rem;
font-weight: 600;
color: #94A3B8 !important;
text-decoration: line-through !important;
text-decoration-color: #EF4444 !important;
}
.uniteelements-spotlight-price-main ins {
font-size: 2.5rem;
font-weight: 900;
color: #2563EB !important;
text-decoration: none !important;
line-height: 1;
letter-spacing: -0.03em;
}
.uniteelements-spotlight-savings-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 12px;
font-weight: 800;
color: #FFFFFF;
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
letter-spacing: 0.02em;
}
.uniteelements-spotlight-countdown-wrap {
margin-bottom: 24px;
padding: 12px 16px;
background: rgba(241, 245, 249, 0.85);
border: 1px solid #E2E8F0;
border-radius: 16px;
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
}
.uniteelements-spotlight-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: auto;
}
.uniteelements-spotlight-btn-claim {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
font-weight: 800;
font-size: 14.5px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 6px 20px -2px rgba(37, 99, 235, 0.45);
border: 1px solid rgba(255, 255, 255, 0.25);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-spotlight-btn-claim:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -2px rgba(37, 99, 235, 0.55);
filter: brightness(1.05);
}
.uniteelements-spotlight-btn-specs {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 22px;
background: #FFFFFF;
border: 1.5px solid #CBD5E1;
color: #334155 !important;
font-weight: 700;
font-size: 14px;
border-radius: 999px;
text-decoration: none !important;
transition: all 0.2s ease;
}
.uniteelements-spotlight-btn-specs:hover {
border-color: #94A3B8;
color: #0F172A !important;
background: #F8FAFC;
transform: translateY(-1px);
}
/* Right Column: High-Tech 2x2 Bento Matrix Deck */
.uniteelements-spotlight-bento-deck {
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
border: 1.5px solid #334155;
border-radius: 22px;
padding: 22px 20px;
color: #FFFFFF;
box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.35);
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: 100%;
}
.uniteelements-bento-deck-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
min-width: 0;
width: 100%;
}
.uniteelements-bento-deck-emblem {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(37, 99, 235, 0.2);
border: 1px solid rgba(96, 165, 250, 0.35);
color: #60A5FA;
flex-shrink: 0;
}
.uniteelements-bento-deck-title {
font-size: 15px;
font-weight: 800;
color: #F8FAFC;
margin: 0 0 4px;
letter-spacing: -0.01em;
line-height: 1.3;
word-break: break-word;
}
.uniteelements-bento-deck-sub {
font-size: 12px;
line-height: 1.45;
color: #94A3B8;
margin: 0;
font-weight: 500;
word-break: break-word;
}
.uniteelements-bento-matrix-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 18px;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.uniteelements-bento-tile {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 10px;
background: rgba(30, 41, 59, 0.75);
border: 1px solid rgba(71, 85, 105, 0.55);
border-radius: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.2s ease;
min-width: 0;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.uniteelements-bento-tile:hover {
background: rgba(51, 65, 85, 0.9);
border-color: rgba(148, 163, 184, 0.6);
transform: translateY(-2px);
}
.uniteelements-bento-tile__icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
font-size: 14px;
flex-shrink: 0;
}
.uniteelements-bento-tile__icon--emerald {
background: rgba(16, 185, 129, 0.18);
border: 1px solid rgba(52, 211, 153, 0.3);
}
.uniteelements-bento-tile__icon--blue {
background: rgba(37, 99, 235, 0.18);
border: 1px solid rgba(96, 165, 250, 0.3);
}
.uniteelements-bento-tile__icon--purple {
background: rgba(139, 92, 246, 0.18);
border: 1px solid rgba(192, 132, 252, 0.3);
}
.uniteelements-bento-tile__icon--amber {
background: rgba(245, 158, 11, 0.18);
border: 1px solid rgba(251, 191, 36, 0.3);
}
.uniteelements-bento-tile__content {
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
flex: 1;
}
.uniteelements-bento-tile__title {
font-size: 12px;
font-weight: 800;
color: #F1F5F9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.uniteelements-bento-tile__desc {
font-size: 10.5px;
color: #94A3B8;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.uniteelements-bento-trust-strip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(51, 65, 85, 0.8);
border-radius: 10px;
font-size: 11px;
font-weight: 700;
color: #CBD5E1;
width: 100%;
min-width: 0;
box-sizing: border-box;
line-height: 1.4;
}
.uniteelements-trust-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 8px #10B981;
flex-shrink: 0;
}
@media (max-width: 960px) {
.uniteelements-spotlight-bento-canvas {
padding: 24px 20px;
border-radius: 20px;
}
.uniteelements-spotlight-actions {
flex-direction: column;
width: 100%;
}
.uniteelements-spotlight-btn-claim,
.uniteelements-spotlight-btn-specs {
width: 100%;
text-align: center;
}
}
@media (max-width: 768px) {
.uniteelements-bento-matrix-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.uniteelements-spotlight-bento-deck {
padding: 18px 16px;
}
}
@media (max-width: 480px) {
.uniteelements-spotlight-bento-canvas {
padding: 18px 14px;
}
.uniteelements-spotlight-bento-deck {
padding: 14px 12px;
}
}
/* ==========================================================================
2. Offers Page Hero & Filters
========================================================================== */
.uniteelements-offers-hero {
padding: var(--uniteelements-space-12) 0 var(--uniteelements-space-8);
}
.uniteelements-hero-feature-deck {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.uniteelements-hero-feature-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid #E2E8F0;
padding: 6px 14px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: #334155;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
transition: all 0.2s ease;
}
.uniteelements-hero-feature-chip:hover {
border-color: #93C5FD;
background: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
/* ==========================================================================
Offers Dynamic Command Bar & Live Filtering Suite
========================================================================== */
.uniteelements-offers-command-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: #FFFFFF;
border: 1.5px solid #E2E8F0;
border-radius: 18px;
padding: 8px 14px;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
margin-bottom: 28px;
position: relative;
z-index: 10;
}
.uniteelements-cmd-pills-scroll {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 2px 0;
flex-shrink: 1;
min-width: 0;
}
.uniteelements-cmd-pills-scroll::-webkit-scrollbar {
display: none;
}
.uniteelements-cmd-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: #334155;
background: #F8FAFC;
border: 1px solid #E2E8F0;
text-decoration: none !important;
white-space: nowrap;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
}
.uniteelements-cmd-pill:hover {
color: #1D4ED8;
background: #EFF6FF;
border-color: #BFDBFE;
transform: translateY(-1px);
}
.uniteelements-cmd-pill.is-active {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
border-color: #2563EB;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
.uniteelements-cmd-pill-count {
font-size: 11px;
font-weight: 800;
padding: 1px 6px;
border-radius: 999px;
background: #E2E8F0;
color: #475569;
transition: all 0.2s ease;
}
.uniteelements-cmd-pill.is-active .uniteelements-cmd-pill-count {
background: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
}
.uniteelements-cmd-suite {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.uniteelements-cmd-search-box {
position: relative;
display: flex;
align-items: center;
width: 175px;
transition: width 0.25s ease;
}
.uniteelements-cmd-search-box:focus-within {
width: 220px;
}
.uniteelements-cmd-search-svg {
position: absolute;
left: 10px;
color: #94A3B8;
pointer-events: none;
}
.uniteelements-cmd-search-input {
width: 100%;
height: 34px;
padding: 0 28px 0 30px;
border-radius: 999px;
border: 1px solid #CBD5E1;
background: #F8FAFC;
font-size: 12.5px;
font-weight: 600;
color: #0F172A;
outline: none;
transition: all 0.2s ease;
}
.uniteelements-cmd-search-input:focus {
background: #FFFFFF;
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.uniteelements-cmd-search-clear {
position: absolute;
right: 8px;
background: none;
border: none;
color: #94A3B8;
cursor: pointer;
font-size: 11px;
padding: 2px 4px;
border-radius: 50%;
line-height: 1;
}
.uniteelements-cmd-search-clear:hover {
color: #0F172A;
}
.uniteelements-cmd-divider {
width: 1px;
height: 20px;
background: #E2E8F0;
}
.uniteelements-cmd-sort-box {
position: relative;
display: flex;
align-items: center;
}
.uniteelements-cmd-sort-svg {
position: absolute;
left: 10px;
color: #64748B;
pointer-events: none;
}
.uniteelements-cmd-sort-select {
height: 34px;
padding: 0 12px 0 30px;
border-radius: 999px;
border: 1px solid #CBD5E1;
background: #F8FAFC;
font-size: 12px;
font-weight: 700;
color: #334155;
cursor: pointer;
outline: none;
transition: all 0.2s ease;
}
.uniteelements-cmd-sort-select:hover,
.uniteelements-cmd-sort-select:focus {
border-color: #94A3B8;
background: #FFFFFF;
}
.uniteelements-cmd-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
color: #065F46;
white-space: nowrap;
}
.uniteelements-cmd-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 6px #10B981;
}
@media (max-width: 900px) {
.uniteelements-offers-command-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 10px;
}
.uniteelements-cmd-suite {
justify-content: space-between;
width: 100%;
}
.uniteelements-cmd-search-box,
.uniteelements-cmd-search-box:focus-within {
width: 100%;
flex: 1;
}
}
/* ==========================================================================
3. Deal Card Component
========================================================================== */
.uniteelements-deal-card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
contain: layout style;
content-visibility: auto;
contain-intrinsic-size: 0 420px;
}
.uniteelements-deal-card__top {
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-deal-card__pricing-box {
background: linear-gradient(135deg, var(--uniteelements-primary-50) 0%, rgba(255, 255, 255, 0.9) 100%);
border: 1px solid var(--uniteelements-primary-100);
border-radius: var(--uniteelements-radius-md);
padding: var(--uniteelements-space-3) var(--uniteelements-space-4);
display: flex;
align-items: center;
justify-content: space-between;
margin: var(--uniteelements-space-3) 0;
}
.uniteelements-deal-card__savings {
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-success-600);
}
.uniteelements-deal-card__countdown {
margin-top: var(--uniteelements-space-3);
padding-top: var(--uniteelements-space-3);
border-top: 1px dashed var(--uniteelements-border-subtle);
}
/* ==========================================================================
4. Single Deal Page Layout
========================================================================== */
.uniteelements-single-deal-hero {
padding: var(--uniteelements-space-10) 0 var(--uniteelements-space-16);
}
.uniteelements-deal-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-10);
align-items: center;
}
@media (min-width: 1024px) {
.uniteelements-deal-hero-grid {
grid-template-columns: 1.15fr 0.85fr;
}
}
.uniteelements-deal-pricing-highlight {
background: var(--uniteelements-glass-strong-bg);
backdrop-filter: var(--uniteelements-glass-strong-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-strong-blur);
border: 1px solid var(--uniteelements-primary-200);
border-radius: var(--uniteelements-radius-xl);
padding: var(--uniteelements-space-6);
box-shadow: var(--uniteelements-shadow-glass);
margin: var(--uniteelements-space-4) 0;
}
.uniteelements-price-tiers {
display: flex;
align-items: baseline;
gap: var(--uniteelements-space-4);
margin-bottom: var(--uniteelements-space-2);
}
.uniteelements-deal-specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--uniteelements-space-6);
margin: var(--uniteelements-space-12) 0;
}
.uniteelements-deal-terms {
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
padding: var(--uniteelements-space-6);
margin: var(--uniteelements-space-12) 0;
}
/* ==========================================================================
Single Offer Page — Responsive Grids & Mobile Polish
========================================================================== */
/* Hero 2-col layout */
.uniteelements-single-deal-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center;
}
@media (min-width: 960px) {
.uniteelements-single-deal-grid {
grid-template-columns: 1.18fr 0.82fr;
gap: 40px;
}
}
.uniteelements-deal-hero-title {
font-size: clamp(1.75rem, 5vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
margin: 0 0 8px;
letter-spacing: -0.03em;
color: var(--uniteelements-text-primary);
word-break: break-word;
}
.uniteelements-deal-hero-subtitle {
font-size: clamp(1rem, 2.5vw, 1.15rem);
font-weight: 600;
color: var(--uniteelements-primary-600);
margin: 0 0 12px;
line-height: 1.4;
}
.uniteelements-deal-hero-excerpt {
color: var(--uniteelements-text-secondary);
margin: 0 0 20px;
font-size: 15px;
line-height: 1.6;
max-width: 580px;
}
/* Feature & License Chips Grid */
.uniteelements-offer-feature-chips-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
max-width: 100%;
margin-bottom: 24px;
}
@media (min-width: 480px) {
.uniteelements-offer-feature-chips-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
max-width: 480px;
}
}
.uniteelements-chip-card {
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
border-radius: var(--uniteelements-radius-md);
border: 1px solid rgba(226, 232, 240, 0.85);
background: rgba(255, 255, 255, 0.85);
}
.uniteelements-chip-card .chip-emoji {
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.uniteelements-chip-card .chip-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Hero Pricing Cluster */
.uniteelements-deal-hero-pricing {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.uniteelements-deal-hero-live-price {
font-size: clamp(2rem, 5vw, 2.5rem);
font-weight: 800;
color: var(--uniteelements-primary-600);
line-height: 1;
}
.uniteelements-deal-hero-reg-price {
font-size: 1.15rem;
text-decoration: line-through;
color: var(--uniteelements-text-muted);
}
.uniteelements-deal-hero-savings-badge {
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--uniteelements-radius-pill);
}
/* Hero CTA Group */
.uniteelements-deal-hero-cta-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
@media (max-width: 640px) {
.uniteelements-deal-hero-cta-group {
flex-direction: column;
width: 100%;
}
.uniteelements-deal-cta-btn {
width: 100%;
justify-content: center;
padding: 14px 24px;
}
}
.uniteelements-deal-trust-badges {
font-size: 12px;
color: var(--uniteelements-text-muted);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* 3D Showcase Podium & Glass Plate */
.uniteelements-3d-podium {
display: flex;
justify-content: center;
width: 100%;
}
.uniteelements-3d-glass-plate {
width: 100%;
max-width: 100%;
border-radius: var(--uniteelements-radius-2xl);
border: 1.5px solid rgba(255, 255, 255, 0.95);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 246, 255, 0.9) 100%);
box-shadow: 0 20px 50px -10px rgba(43, 93, 245, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.8);
padding: var(--uniteelements-space-5);
overflow: hidden;
}
@media (min-width: 640px) {
.uniteelements-3d-glass-plate {
max-width: 380px;
padding: var(--uniteelements-space-6);
}
}
.uniteelements-3d-plate-header {
text-align: center;
padding-bottom: 14px;
border-bottom: 1px solid rgba(43, 93, 245, 0.12);
margin-bottom: 14px;
}
.uniteelements-3d-plate-avatar {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, #2B5DF5, #1D44DB);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 20px;
margin: 0 auto 8px;
box-shadow: 0 8px 20px rgba(43, 93, 245, 0.35);
}
.uniteelements-3d-plate-title {
font-size: 16px;
font-weight: 800;
color: var(--uniteelements-text-primary);
letter-spacing: -0.01em;
}
.uniteelements-3d-plate-sub {
font-size: 11px;
color: var(--uniteelements-primary-600);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
.uniteelements-3d-plate-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.uniteelements-3d-plate-row {
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-radius: var(--uniteelements-radius-md);
}
.plate-row-name {
font-size: 13px;
font-weight: 700;
color: var(--uniteelements-text-primary);
}
.plate-row-sub {
font-size: 11px;
color: var(--uniteelements-text-muted);
}
/* Trust Stats Strip */
.uniteelements-stat-box {
padding: 16px;
text-align: center;
border-radius: var(--uniteelements-radius-xl);
}
@media (max-width: 480px) {
.uniteelements-stat-box {
padding: 12px 8px;
}
}
.stat-num {
font-size: clamp(1.25rem, 4vw, 1.65rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 4px;
}
.stat-lbl {
font-size: 11.5px;
color: var(--uniteelements-text-muted);
font-weight: 600;
}
/* Body & Sidebar 2-Col System */
.uniteelements-deal-body-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
@media (min-width: 960px) {
.uniteelements-deal-body-grid {
grid-template-columns: 1.25fr 0.75fr;
}
}
.uniteelements-deal-body-main {
min-width: 0;
}
/* Offer Description */
.uniteelements-offer-description {
color: var(--uniteelements-text-secondary);
margin: 0 0 28px;
font-size: 15px;
line-height: 1.7;
word-break: break-word;
}
.uniteelements-offer-description p {
margin: 0 0 12px;
line-height: 1.7;
}
.uniteelements-offer-description ul,
.uniteelements-offer-description ol {
margin: 0 0 14px;
padding-left: 20px;
}
.uniteelements-offer-description li {
margin-bottom: 6px;
}
.uniteelements-offer-description h2,
.uniteelements-offer-description h3,
.uniteelements-offer-description h4 {
margin: 20px 0 10px;
font-weight: 800;
color: var(--uniteelements-text-primary);
letter-spacing: -0.02em;
}
.uniteelements-offer-callout-box {
background: var(--uniteelements-primary-50);
border: 1px solid var(--uniteelements-primary-100);
border-radius: var(--uniteelements-radius-lg);
padding: 16px 20px;
margin-bottom: 28px;
font-size: 14px;
color: var(--uniteelements-primary-800);
font-weight: 600;
line-height: 1.5;
}
/* Benefit / Highlight Cards */
.uniteelements-benefit-card {
padding: 16px;
border-radius: var(--uniteelements-radius-lg);
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--uniteelements-border-subtle);
transition: all 0.2s ease;
}
.uniteelements-benefit-card:hover {
border-color: var(--uniteelements-primary-300);
transform: translateY(-2px);
box-shadow: var(--uniteelements-shadow-sm);
}
.benefit-title {
font-size: 15px;
font-weight: 700;
margin: 0 0 4px;
color: var(--uniteelements-text-primary);
}
.benefit-desc {
margin: 0;
color: var(--uniteelements-text-secondary);
font-size: 13px;
line-height: 1.5;
}
/* Testimonials */
.uniteelements-testimonials-section {
margin-top: 24px;
}
.testimonials-title {
text-align: center;
margin: 0 0 4px;
font-size: 20px;
font-weight: 800;
color: var(--uniteelements-text-primary);
}
.testimonials-subtitle {
text-align: center;
color: var(--uniteelements-text-muted);
font-size: 13px;
margin: 0 0 20px;
}
.uniteelements-testimonial-card {
padding: 16px;
border-radius: var(--uniteelements-radius-lg);
}
.review-stars {
color: #EAB308;
margin-bottom: 6px;
font-size: 13px;
}
.review-quote {
font-size: 12.5px;
color: var(--uniteelements-text-secondary);
margin: 0 0 12px;
font-style: italic;
line-height: 1.5;
}
.review-author {
display: flex;
align-items: center;
gap: 8px;
}
.author-name {
font-size: 12px;
font-weight: 700;
color: var(--uniteelements-text-primary);
}
.author-role {
font-size: 10.5px;
color: var(--uniteelements-text-muted);
}
/* Sticky Deal Summary Sidebar */
.uniteelements-sticky-deal-sidebar {
position: static;
width: 100%;
}
@media (min-width: 960px) {
.uniteelements-sticky-deal-sidebar {
position: sticky;
top: 90px;
z-index: 15;
}
}
.uniteelements-deal-summary-box {
padding: 22px;
border: 1.5px solid rgba(43, 93, 245, 0.22);
border-radius: var(--uniteelements-radius-2xl);
box-shadow: 0 20px 40px -10px rgba(43, 93, 245, 0.12);
}
.summary-header {
font-size: 18px;
font-weight: 800;
margin: 0 0 16px;
color: var(--uniteelements-text-primary);
}
.summary-line-items {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
font-size: 13px;
}
.summary-row {
color: var(--uniteelements-text-primary);
}
.summary-pricing-footer {
border-top: 1px solid var(--uniteelements-border-subtle);
padding-top: 14px;
margin-top: 12px;
}
.total-value-row {
font-size: 13px;
color: var(--uniteelements-text-muted);
margin-bottom: 4px;
}
.final-price-row {
font-size: 15px;
font-weight: 700;
color: var(--uniteelements-text-primary);
margin-bottom: 10px;
align-items: baseline;
}
.final-price-num {
font-size: 24px;
color: var(--uniteelements-primary-600);
font-weight: 800;
}
.savings-chip-box {
padding: 8px 12px;
text-align: center;
color: var(--uniteelements-success-700);
background: var(--uniteelements-success-50);
border-color: var(--uniteelements-success-200);
font-weight: 700;
font-size: 13px;
margin-bottom: 16px;
border-radius: var(--uniteelements-radius-md);
}
.sidebar-trust-caption {
text-align: center;
font-size: 11px;
color: var(--uniteelements-text-muted);
margin-top: 12px;
}
/* ==========================================================================
5. Mobile Floating Deals Dock & Interactive Slide-up Sheet
========================================================================== */
/* Hide by default on desktop */
.uniteelements-offers-mobile-dock {
display: none;
}
@media (max-width: 768px) {
.uniteelements-offers-mobile-dock {
display: block;
position: fixed;
bottom: 20px;
left: 16px;
right: 16px;
max-width: 440px;
margin: 0 auto;
z-index: 990;
animation: uniteelements-dock-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.uniteelements-offers-mobile-dock__inner {
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
padding: 6px 8px 6px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.uniteelements-dock-info-btn {
background: transparent;
border: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
cursor: pointer;
color: #FFFFFF;
min-width: 0;
flex: 1;
}
.uniteelements-dock-live-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 12px #10B981;
flex-shrink: 0;
position: relative;
}
.uniteelements-dock-live-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(16, 185, 129, 0.6);
animation: uniteelements-pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
.uniteelements-dock-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.uniteelements-dock-category {
font-size: 13px;
font-weight: 800;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
letter-spacing: -0.01em;
}
.uniteelements-dock-count {
font-size: 11px;
font-weight: 700;
color: #94A3B8;
line-height: 1.2;
}
.uniteelements-dock-trigger-btn {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
padding: 8px 16px;
font-size: 12.5px;
font-weight: 800;
color: #FFFFFF;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease;
flex-shrink: 0;
position: relative;
}
.uniteelements-dock-trigger-btn:active {
transform: scale(0.96);
}
.uniteelements-dock-active-dot {
width: 7px;
height: 7px;
background: #F59E0B;
border: 1.5px solid #1E40AF;
border-radius: 50%;
position: absolute;
top: 4px;
right: 6px;
}
}
@keyframes uniteelements-dock-slide-in {
from {
opacity: 0;
transform: translateY(24px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes uniteelements-pulse-ring {
0% {
transform: scale(0.8);
opacity: 0.9;
}
80%, 100% {
transform: scale(2.2);
opacity: 0;
}
}
/* ==========================================================================
Filter Sheet & Backdrop Modal
========================================================================== */
.uniteelements-filter-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-filter-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.uniteelements-filter-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-height: 88vh;
z-index: 1001;
background: #FFFFFF;
border-radius: 28px 28px 0 0;
box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.25);
transform: translateY(105%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.uniteelements-filter-sheet.is-open {
transform: translateY(0);
}
.uniteelements-filter-sheet__drag-bar {
width: 44px;
height: 5px;
background: #E2E8F0;
border-radius: 999px;
margin: 12px auto 4px;
flex-shrink: 0;
}
.uniteelements-filter-sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px 16px;
border-bottom: 1px solid #F1F5F9;
flex-shrink: 0;
}
.uniteelements-filter-sheet__title {
margin: 0;
font-size: 1.25rem;
font-weight: 900;
color: #0F172A;
letter-spacing: -0.02em;
}
.uniteelements-filter-sheet__close {
width: 36px;
height: 36px;
border-radius: 50%;
background: #F1F5F9;
border: 1px solid #E2E8F0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: #64748B;
cursor: pointer;
transition: all 0.2s ease;
}
.uniteelements-filter-sheet__close:hover {
background: #E2E8F0;
color: #0F172A;
}
.uniteelements-filter-sheet__body {
padding: 20px 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 24px;
}
.uniteelements-sheet-group__label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748B;
margin-bottom: 12px;
}
.uniteelements-sheet-group__hint {
font-size: 11px;
font-weight: 700;
color: #2563EB;
text-transform: none;
letter-spacing: normal;
}
.uniteelements-sheet-pills-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.uniteelements-sheet-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: #334155;
background: #F8FAFC;
border: 1px solid #E2E8F0;
text-decoration: none;
transition: all 0.2s ease;
}
.uniteelements-sheet-pill .sheet-pill-count {
font-size: 11px;
padding: 1px 6px;
border-radius: 999px;
background: #E2E8F0;
color: #475569;
font-weight: 800;
}
.uniteelements-sheet-pill.is-active {
background: #2563EB;
color: #FFFFFF;
border-color: #2563EB;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.uniteelements-sheet-pill.is-active .sheet-pill-count {
background: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
}
.uniteelements-sheet-sort-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.uniteelements-sheet-sort-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 14px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
text-decoration: none;
color: #334155;
font-size: 14px;
font-weight: 700;
gap: 12px;
transition: all 0.2s ease;
}
.uniteelements-sheet-sort-item.is-active {
background: #EFF6FF;
border-color: #BFDBFE;
color: #1D4ED8;
}
.uniteelements-sheet-sort-item .sheet-sort-icon {
font-size: 16px;
line-height: 1;
}
.uniteelements-sheet-sort-item .sheet-sort-label {
flex: 1;
}
.uniteelements-sheet-sort-item .sheet-sort-check {
font-weight: 900;
color: #2563EB;
font-size: 15px;
}
.uniteelements-filter-sheet__footer {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid #F1F5F9;
background: #FFFFFF;
flex-shrink: 0;
}
.uniteelements-sheet-reset-btn {
padding: 12px 18px;
font-size: 13px;
font-weight: 800;
color: #64748B;
text-decoration: none;
border-radius: 999px;
background: #F1F5F9;
border: 1px solid #E2E8F0;
transition: all 0.2s ease;
white-space: nowrap;
}
.uniteelements-sheet-reset-btn:hover {
color: #0F172A;
background: #E2E8F0;
}
/* --- components/bundles.css --- */
/**
* UniteElements Theme - Developer Bundles Space Styles
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Bundles Hero Stage
========================================================================== */
.uniteelements-bundles-hero {
position: relative;
overflow: hidden;
padding: var(--uniteelements-space-16, 64px) 0 var(--uniteelements-space-12, 48px);
background: radial-gradient(circle at 50% 0%, rgba(43, 93, 245, 0.12) 0%, transparent 65%),
var(--uniteelements-bg-canvas, #F8FAFC);
border-bottom: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
width: 100%;
box-sizing: border-box;
}
.uniteelements-bundles-hero__glow {
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 780px;
max-width: 100vw;
height: 380px;
background: radial-gradient(ellipse at center, rgba(43, 93, 245, 0.22) 0%, rgba(99, 102, 241, 0.08) 45%, transparent 70%);
filter: blur(50px);
pointer-events: none;
}
.uniteelements-bundles-hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--uniteelements-space-10, 40px);
align-items: center;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 960px) {
.uniteelements-bundles-hero {
padding: 40px 0 32px;
}
.uniteelements-bundles-hero-grid {
grid-template-columns: 100%;
gap: 24px;
}
}
.uniteelements-bundles-telemetry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--uniteelements-space-4, 16px);
margin-top: var(--uniteelements-space-8, 32px);
padding: var(--uniteelements-space-4, 16px);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
border-radius: var(--uniteelements-radius-lg, 16px);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.uniteelements-bundles-telemetry-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 12px;
}
}
@media (max-width: 480px) {
.uniteelements-bundles-telemetry-grid {
grid-template-columns: 100%;
gap: 10px;
}
}
.uniteelements-telemetry-block {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
overflow: hidden;
}
.uniteelements-telemetry-block__icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--uniteelements-primary-50, #EFF6FF);
color: var(--uniteelements-primary-600, #2563EB);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.uniteelements-telemetry-block__val {
font-size: 14px;
font-weight: 700;
color: var(--uniteelements-text-primary, #0F172A);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-telemetry-block__sub {
font-size: 11px;
color: var(--uniteelements-text-muted, #64748B);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
2. Master Bundle Spotlight Stage
========================================================================== */
.uniteelements-master-bundle-card {
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 246, 255, 0.92) 100%);
border: 2px solid rgba(43, 93, 245, 0.35);
border-radius: var(--uniteelements-radius-2xl, 24px);
padding: var(--uniteelements-space-8, 32px);
box-shadow: 0 20px 50px rgba(43, 93, 245, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.8) inset;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.uniteelements-master-bundle-card {
padding: 20px 16px;
border-radius: 18px;
}
}
.uniteelements-master-bundle-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 260px;
height: 260px;
background: radial-gradient(circle at top right, rgba(43, 93, 245, 0.15), transparent 70%);
pointer-events: none;
}
.uniteelements-bundle-components-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 16px 0;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.uniteelements-bundle-component-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
border-radius: var(--uniteelements-radius-md, 12px);
transition: all 0.2s ease;
gap: 10px;
min-width: 0;
box-sizing: border-box;
}
.uniteelements-bundle-component-item:hover {
background: #ffffff;
border-color: var(--uniteelements-primary-300, #93C5FD);
transform: translateX(3px);
}
.uniteelements-bundle-component-item__left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.uniteelements-bundle-component-item__icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--uniteelements-primary-50, #EFF6FF);
color: var(--uniteelements-primary-600, #2563EB);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.uniteelements-bundle-component-item__name {
font-weight: 700;
font-size: 13.5px;
color: var(--uniteelements-text-primary, #0F172A);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-bundle-component-item__price {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 13px;
font-weight: 700;
color: var(--uniteelements-text-secondary, #475569);
flex-shrink: 0;
}
/* ==========================================================================
3. Curated Stacks Grid
========================================================================== */
.uniteelements-stack-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1.5px solid var(--uniteelements-border-default, #E2E8F0);
border-radius: var(--uniteelements-radius-xl, 20px);
padding: var(--uniteelements-space-6, 24px);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.uniteelements-stack-card {
padding: 20px 16px;
border-radius: 16px;
}
}
.uniteelements-stack-card:hover {
border-color: var(--uniteelements-primary-400, #60A5FA);
box-shadow: 0 16px 40px rgba(43, 93, 245, 0.1);
transform: translateY(-4px);
}
.uniteelements-stack-card--featured {
border: 2px solid var(--uniteelements-primary-500, #3B82F6);
background: linear-gradient(180deg, rgba(239, 246, 255, 0.5) 0%, #ffffff 100%);
box-shadow: 0 12px 32px rgba(43, 93, 245, 0.08);
}
.uniteelements-stack-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--uniteelements-space-4, 16px);
}
.uniteelements-stack-card__badge-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.uniteelements-stack-card__title {
font-size: 19px;
font-weight: 800;
margin: 0 0 8px;
color: var(--uniteelements-text-primary, #0F172A);
line-height: 1.3;
word-break: break-word;
overflow-wrap: break-word;
}
.uniteelements-stack-card__desc {
font-size: 13.5px;
color: var(--uniteelements-text-secondary, #475569);
margin: 0 0 var(--uniteelements-space-4, 16px);
line-height: 1.5;
word-break: break-word;
}
.uniteelements-stack-card__includes-title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: var(--uniteelements-text-muted, #64748B);
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.uniteelements-stack-card__items {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--uniteelements-space-6, 24px);
flex-grow: 1;
min-width: 0;
}
.uniteelements-stack-card__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--uniteelements-text-primary, #0F172A);
background: var(--uniteelements-bg-canvas, #F8FAFC);
padding: 6px 10px;
border-radius: var(--uniteelements-radius-sm, 8px);
border: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
word-break: break-word;
overflow-wrap: break-word;
}
.uniteelements-stack-card__footer {
padding-top: var(--uniteelements-space-4, 16px);
border-top: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--uniteelements-space-3, 12px);
margin-top: auto;
flex-wrap: wrap;
}
.uniteelements-stack-card__price-box {
display: flex;
flex-direction: column;
}
.uniteelements-stack-card__orig-price {
font-size: 12.5px;
text-decoration: line-through;
color: var(--uniteelements-text-muted, #94A3B8);
font-family: var(--uniteelements-font-mono, monospace);
}
.uniteelements-stack-card__current-price {
font-size: 21px;
font-weight: 800;
color: var(--uniteelements-primary-600, #2563EB);
font-family: var(--uniteelements-font-family, ui-sans-serif, system-ui);
line-height: 1.1;
}
/* ==========================================================================
4. Interactive Stack Builder (Zero Overflow & Mobile Hardened)
========================================================================== */
.uniteelements-bundle-builder-stage {
background: #FFFFFF;
border: 1.5px solid var(--uniteelements-border-default, #E2E8F0);
border-radius: var(--uniteelements-radius-2xl, 24px);
padding: var(--uniteelements-space-8, 32px);
box-shadow: 0 10px 32px -4px rgba(15, 23, 42, 0.06);
margin: var(--uniteelements-space-12, 48px) 0;
position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 768px) {
.uniteelements-bundle-builder-stage {
padding: 16px 12px;
margin: 20px 0;
border-radius: 18px;
}
}
.uniteelements-builder-grid {
display: grid;
grid-template-columns: 1.32fr 0.88fr;
gap: var(--uniteelements-space-8, 32px);
align-items: start;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 960px) {
.uniteelements-builder-grid {
grid-template-columns: 100%;
gap: 20px;
}
}
.uniteelements-builder-catalog {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--uniteelements-space-4, 16px);
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 640px) {
.uniteelements-builder-catalog {
grid-template-columns: 100%;
gap: 12px;
}
}
.uniteelements-builder-item {
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 2px solid var(--uniteelements-border-default, #E2E8F0);
border-radius: var(--uniteelements-radius-lg, 16px);
padding: 14px 14px 14px 14px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
min-width: 0;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.uniteelements-builder-item:hover {
border-color: var(--uniteelements-primary-400, #60A5FA);
background: rgba(239, 246, 255, 0.4);
transform: translateY(-2px);
}
.uniteelements-builder-item.is-selected {
border-color: var(--uniteelements-primary-600, #2563EB);
background: #EFF6FF;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
}
.uniteelements-builder-item__check {
position: absolute;
top: 14px;
right: 14px;
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid var(--uniteelements-border-default, #CBD5E1);
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.uniteelements-builder-item.is-selected .uniteelements-builder-item__check {
background: var(--uniteelements-primary-600, #2563EB);
border-color: var(--uniteelements-primary-600, #2563EB);
color: #FFFFFF;
}
.uniteelements-builder-item__check svg {
width: 14px;
height: 14px;
stroke-width: 3;
opacity: 0;
transition: opacity 0.2s ease;
}
.uniteelements-builder-item.is-selected .uniteelements-builder-item__check svg {
opacity: 1;
}
.uniteelements-builder-item__title {
font-size: 14px;
font-weight: 800;
color: var(--uniteelements-text-primary, #0F172A);
margin: 0 0 6px;
padding-right: 32px;
line-height: 1.35;
word-break: break-word;
overflow-wrap: break-word;
}
.uniteelements-builder-item__meta {
font-size: 11.5px;
font-weight: 600;
color: var(--uniteelements-text-secondary, #64748B);
margin-bottom: 10px;
word-break: break-word;
}
.uniteelements-builder-item__price {
font-family: var(--uniteelements-font-mono, monospace);
font-weight: 800;
font-size: 15px;
color: var(--uniteelements-primary-600, #2563EB);
margin-top: auto;
}
/* Sticky Calculation Deck (Mobile Zero Overflow) */
.uniteelements-builder-calculator {
position: sticky;
top: 90px;
background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
color: #FFFFFF;
border: 1.5px solid #334155;
border-radius: var(--uniteelements-radius-xl, 20px);
padding: var(--uniteelements-space-6, 24px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 960px) {
.uniteelements-builder-calculator {
position: static;
padding: 18px 14px;
border-radius: 16px;
width: 100%;
max-width: 100%;
}
}
.uniteelements-calc-meter-wrap {
margin: 14px 0 18px;
width: 100%;
box-sizing: border-box;
}
.uniteelements-calc-meter-bar {
height: 8px;
background: rgba(255, 255, 255, 0.15);
border-radius: 999px;
overflow: hidden;
position: relative;
width: 100%;
box-sizing: border-box;
}
.uniteelements-calc-meter-fill {
height: 100%;
background: linear-gradient(90deg, #2563EB, #10B981);
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-calc-tier-labels {
display: flex;
justify-content: space-between;
font-size: 10.5px;
font-family: var(--uniteelements-font-mono, monospace);
color: #94A3B8;
margin-top: 6px;
gap: 2px;
width: 100%;
box-sizing: border-box;
}
.uniteelements-calc-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 13px;
gap: 8px;
width: 100%;
box-sizing: border-box;
}
.uniteelements-calc-row:last-of-type {
border-bottom: none;
}
.uniteelements-calc-row--total {
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.uniteelements-calc-total-val {
font-size: clamp(20px, 4vw, 26px);
font-weight: 900;
color: #38BDF8;
font-family: var(--uniteelements-font-family, ui-sans-serif, system-ui);
line-height: 1.1;
}
#uniteelements-builder-submit-btn {
width: 100%;
margin-top: 16px;
justify-content: center;
padding: 13px 16px;
font-size: 13.5px;
font-weight: 800;
border-radius: 999px;
text-align: center;
white-space: normal;
height: auto;
min-height: 46px;
line-height: 1.3;
box-sizing: border-box;
word-break: break-word;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#uniteelements-builder-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.55);
}
/* ==========================================================================
5. Comparison Matrix Table (Horizontal Scrollable on Mobile)
========================================================================== */
.uniteelements-compare-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--uniteelements-space-8, 32px) 0;
border-radius: var(--uniteelements-radius-lg, 16px);
border: 1px solid var(--uniteelements-border-default, #E2E8F0);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.uniteelements-compare-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
text-align: left;
background: #FFFFFF;
}
.uniteelements-compare-table th,
.uniteelements-compare-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
font-size: 13px;
box-sizing: border-box;
}
.uniteelements-compare-table th {
background: var(--uniteelements-bg-canvas, #F8FAFC);
font-weight: 800;
color: var(--uniteelements-text-primary, #0F172A);
}
.uniteelements-compare-table tr:hover td {
background: rgba(239, 246, 255, 0.4);
}
/* --- components/services.css --- */
/**
* UniteElements Theme - Custom Development & Services Space Styles
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Services Hero Stage
========================================================================== */
.uniteelements-services-hero {
position: relative;
overflow: hidden;
padding: var(--uniteelements-space-16) 0 var(--uniteelements-space-12);
background: radial-gradient(circle at 50% 0%, rgba(43, 93, 245, 0.12) 0%, transparent 65%),
var(--uniteelements-bg-canvas);
border-bottom: 1px solid var(--uniteelements-border-subtle);
}
.uniteelements-services-hero__glow {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 400px;
background: radial-gradient(ellipse at center, rgba(43, 93, 245, 0.2) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.uniteelements-services-hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--uniteelements-space-10);
align-items: center;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 960px) {
.uniteelements-services-hero-grid {
grid-template-columns: 1fr;
gap: var(--uniteelements-space-8);
}
}
/* Telemetry Grid */
.uniteelements-services-telemetry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--uniteelements-space-4);
margin-top: var(--uniteelements-space-8);
padding: var(--uniteelements-space-4);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--uniteelements-border-subtle);
border-radius: var(--uniteelements-radius-lg);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
box-sizing: border-box;
min-width: 0;
width: 100%;
}
@media (max-width: 768px) {
.uniteelements-services-telemetry-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--uniteelements-space-3);
}
}
/* ==========================================================================
2. Services Matrix Cards (Cyber Engineering Deck)
========================================================================== */
.uniteelements-service-card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 18px;
padding: 24px;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
box-sizing: border-box;
min-width: 0;
width: 100%;
word-break: break-word;
}
.uniteelements-service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2B5DF5 0%, #38BDF8 50%, #10B981 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.uniteelements-service-card:hover {
border-color: rgba(43, 93, 245, 0.35);
box-shadow: 0 20px 45px -10px rgba(43, 93, 245, 0.16), 0 0 0 1px rgba(43, 93, 245, 0.12);
transform: translateY(-5px);
}
.uniteelements-service-card:hover::before {
opacity: 1;
}
/* Card Top Bar */
.uniteelements-service-card__top-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(226, 232, 240, 0.8);
box-sizing: border-box;
}
.uniteelements-service-card__hud-id {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.uniteelements-service-card__hud-id code {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 11px;
font-weight: 700;
color: #94A3B8;
letter-spacing: 0.04em;
background: transparent;
padding: 0;
}
.uniteelements-service-card__category-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: #2563EB;
background: #EFF6FF;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(37, 99, 235, 0.18);
letter-spacing: 0.02em;
flex-shrink: 0;
white-space: nowrap;
}
.uniteelements-badge-pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2563EB;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
animation: uniteelements-pulse-dot 2s infinite;
}
@keyframes uniteelements-pulse-dot {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.6;
}
}
/* Card Header */
.uniteelements-service-card__header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.uniteelements-service-card__icon-box {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(43, 93, 245, 0.12) 0%, rgba(56, 189, 248, 0.12) 100%);
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(43, 93, 245, 0.22);
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.08);
transition: all 0.3s ease;
}
.uniteelements-service-card:hover .uniteelements-service-card__icon-box {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #ffffff;
border-color: #1D4ED8;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
transform: scale(1.05);
}
.uniteelements-service-card__title {
font-size: 19px;
font-weight: 800;
margin: 0;
color: #0F172A;
line-height: 1.25;
letter-spacing: -0.02em;
word-break: break-word;
}
.uniteelements-service-card__desc {
font-size: 13.5px;
color: #64748B;
margin: 0 0 16px;
line-height: 1.55;
min-height: 42px;
word-break: break-word;
}
/* Telemetry & SLA Metric Box */
.uniteelements-service-card__telemetry {
display: flex;
align-items: center;
justify-content: space-between;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 9px 14px;
margin-bottom: 16px;
position: relative;
box-sizing: border-box;
gap: 8px;
}
.uniteelements-service-card__telemetry-col {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.uniteelements-service-card__telemetry-lbl {
font-size: 10px;
font-family: var(--uniteelements-font-mono, monospace);
font-weight: 700;
text-transform: uppercase;
color: #94A3B8;
letter-spacing: 0.05em;
white-space: nowrap;
}
.uniteelements-service-card__telemetry-val {
font-size: 12.5px;
font-weight: 700;
color: #0F172A;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-service-card__telemetry-divider {
width: 1px;
height: 24px;
background: #E2E8F0;
flex-shrink: 0;
}
.uniteelements-text-brand {
color: #2563EB !important;
}
.uniteelements-text-emerald {
color: #059669 !important;
}
/* Deliverables Header & Tags */
.uniteelements-service-card__deliverables-header {
margin-bottom: 8px;
}
.uniteelements-service-card__deliverables-header code {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 10.5px;
font-weight: 700;
color: #94A3B8;
letter-spacing: 0.06em;
background: transparent;
padding: 0;
}
.uniteelements-service-card__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
flex-grow: 1;
}
.uniteelements-service-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: #F1F5F9;
color: #334155;
border: 1px solid rgba(203, 213, 225, 0.8);
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
transition: all 0.2s ease;
word-break: break-word;
}
.uniteelements-service-tag:hover {
background: #E2E8F0;
color: #0F172A;
border-color: #94A3B8;
}
.uniteelements-service-tag__check {
color: #2563EB;
flex-shrink: 0;
}
/* Card Action Button */
.uniteelements-service-card__footer {
padding-top: 14px;
border-top: 1px solid #F1F5F9;
margin-top: auto;
box-sizing: border-box;
}
.uniteelements-btn-service-action {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #ffffff !important;
border: none;
border-radius: 10px;
padding: 12px 16px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
outline: none;
text-decoration: none;
box-sizing: border-box;
}
.uniteelements-btn-service-action:hover {
background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38);
transform: translateY(-2px);
color: #ffffff !important;
}
.uniteelements-btn-service-action:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.uniteelements-btn-service-action__icon {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.uniteelements-btn-service-action:hover .uniteelements-btn-service-action__icon {
transform: translateX(4px);
}
/* ==========================================================================
3. Interactive Cost & Timeline Estimator (Synthesizer)
========================================================================== */
.uniteelements-estimator-stage {
background: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-2xl);
padding: var(--uniteelements-space-8);
box-shadow: var(--uniteelements-shadow-lg);
margin: var(--uniteelements-space-12) 0;
box-sizing: border-box;
min-width: 0;
width: 100%;
overflow: hidden;
}
.uniteelements-estimator-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--uniteelements-space-8);
align-items: start;
box-sizing: border-box;
min-width: 0;
width: 100%;
}
@media (max-width: 960px) {
.uniteelements-estimator-grid {
grid-template-columns: 1fr;
gap: var(--uniteelements-space-6);
}
}
.uniteelements-estimator-control-group {
margin-bottom: var(--uniteelements-space-6);
box-sizing: border-box;
min-width: 0;
}
.uniteelements-estimator-control-group:last-of-type {
margin-bottom: 0;
}
.uniteelements-estimator-label {
font-size: 14px;
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
margin-bottom: 8px;
display: block;
}
.uniteelements-estimator-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: var(--uniteelements-space-3);
box-sizing: border-box;
min-width: 0;
width: 100%;
}
.uniteelements-estimator-btn {
background: #ffffff;
border: 2px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-md);
padding: 10px 14px;
font-size: 13px;
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-secondary);
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
outline: none;
box-sizing: border-box;
min-width: 0;
white-space: normal;
word-break: break-word;
}
.uniteelements-estimator-btn:hover {
border-color: var(--uniteelements-primary-300);
color: var(--uniteelements-primary-600);
}
.uniteelements-estimator-btn.is-active {
border-color: var(--uniteelements-primary-600);
background: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-700);
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.15);
}
/* Estimator Live Output Console */
.uniteelements-estimator-output {
background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
border-radius: var(--uniteelements-radius-xl);
padding: var(--uniteelements-space-6);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
position: sticky;
top: 100px;
box-sizing: border-box;
min-width: 0;
width: 100%;
overflow: hidden;
word-break: break-word;
}
.uniteelements-estimator-price-val {
font-size: 28px;
font-weight: 800;
color: #38bdf8;
font-family: var(--uniteelements-font-family);
line-height: 1.15;
margin: 8px 0;
word-break: break-word;
}
.uniteelements-estimator-timeline-val {
font-size: 15px;
font-weight: 700;
color: #10B981;
margin-bottom: 16px;
word-break: break-word;
}
/* ==========================================================================
4. Engineering Workflow 4-Step Process
========================================================================== */
.uniteelements-process-step-card {
background: #ffffff;
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-xl);
padding: var(--uniteelements-space-6);
position: relative;
transition: all 0.3s ease;
box-sizing: border-box;
min-width: 0;
width: 100%;
word-break: break-word;
}
.uniteelements-process-step-card:hover {
border-color: var(--uniteelements-primary-400);
box-shadow: var(--uniteelements-shadow-md);
transform: translateY(-2px);
}
.uniteelements-process-step-num {
font-family: var(--uniteelements-font-mono);
font-size: 28px;
font-weight: 800;
color: var(--uniteelements-primary-500);
margin-bottom: 8px;
}
/* ==========================================================================
5. Proposal Form Footer & Submit Controls
========================================================================== */
.uniteelements-service-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--uniteelements-space-4);
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
}
.uniteelements-nda-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--uniteelements-text-secondary);
cursor: pointer;
user-select: none;
box-sizing: border-box;
}
.uniteelements-nda-label input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: #2563EB;
cursor: pointer;
margin: 0;
}
.uniteelements-service-submit-btn {
white-space: nowrap;
flex-shrink: 0;
}
/* ==========================================================================
6. Mobile Responsiveness Hardening
========================================================================== */
@media (max-width: 768px) {
.uniteelements-service-form-footer {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.uniteelements-service-submit-btn {
width: 100%;
justify-content: center;
}
.uniteelements-estimator-output {
position: static;
}
}
@media (max-width: 640px) {
.uniteelements-services-hero {
padding: var(--uniteelements-space-10) 0 var(--uniteelements-space-8);
}
.uniteelements-services-telemetry-grid {
grid-template-columns: 1fr;
padding: 12px;
}
.uniteelements-estimator-stage {
padding: 16px;
border-radius: var(--uniteelements-radius-xl);
margin: var(--uniteelements-space-8) 0;
}
.uniteelements-estimator-options {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.uniteelements-estimator-output {
padding: 18px;
}
.uniteelements-service-card {
padding: 18px;
}
.uniteelements-service-card__title {
font-size: 17px;
}
}
/* --- components/products.css --- */
/**
* UniteElements Theme - Product Engine & Single Product Styles
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Products Archive Directory Hero & Filters
========================================================================== */
.uniteelements-products-hero {
position: relative;
overflow: hidden;
padding: var(--uniteelements-space-10) 0 var(--uniteelements-space-8);
}
@media (min-width: 768px) {
.uniteelements-products-hero {
padding: var(--uniteelements-space-14) 0 var(--uniteelements-space-10);
}
}
.uniteelements-products-hero-inner {
max-width: 860px;
}
.uniteelements-products-hero-title {
font-size: clamp(1.85rem, 5vw, 3.25rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.035em;
color: var(--uniteelements-text-primary);
margin: 0 0 var(--uniteelements-space-3);
}
.uniteelements-products-hero-lead {
font-size: clamp(0.95rem, 2.2vw, 1.125rem);
color: var(--uniteelements-text-secondary);
line-height: 1.6;
margin: 0 0 var(--uniteelements-space-6);
max-width: 740px;
}
.uniteelements-catalog-metrics-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (min-width: 640px) {
.uniteelements-catalog-metrics-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
}
.uniteelements-metric-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--uniteelements-radius-full);
font-size: 11.5px;
color: var(--uniteelements-text-primary);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
transition: all 0.2s ease;
}
@media (min-width: 640px) {
.uniteelements-metric-chip {
padding: 6px 14px;
font-size: 12px;
}
}
.uniteelements-metric-chip:hover {
border-color: var(--uniteelements-primary-300);
background: #FFFFFF;
transform: translateY(-1px);
}
.uniteelements-metric-chip strong {
color: var(--uniteelements-primary-600);
font-weight: 700;
}
/* ==========================================================================
High-Tech Dynamic Catalog Command Bar & Live Filtering Suite
========================================================================== */
.uniteelements-catalog-command-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: #FFFFFF;
border: 1.5px solid #E2E8F0;
border-radius: 18px;
padding: 8px 14px;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
margin-bottom: 28px;
position: sticky;
top: 76px;
z-index: 40;
transition: all 0.25s ease;
}
.uniteelements-cmd-pills-scroll {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 2px 0;
flex-shrink: 1;
min-width: 0;
}
.uniteelements-cmd-pills-scroll::-webkit-scrollbar {
display: none;
}
.uniteelements-cmd-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: #334155;
background: #F8FAFC;
border: 1px solid #E2E8F0;
text-decoration: none !important;
white-space: nowrap;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
cursor: pointer;
}
.uniteelements-cmd-pill:hover {
color: #1D4ED8;
background: #EFF6FF;
border-color: #BFDBFE;
transform: translateY(-1px);
}
.uniteelements-cmd-pill.is-active {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
border-color: #2563EB;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
.uniteelements-cmd-pill-count {
font-size: 11px;
font-weight: 800;
padding: 1px 6px;
border-radius: 999px;
background: #E2E8F0;
color: #475569;
transition: all 0.2s ease;
font-family: var(--uniteelements-font-mono, monospace);
}
.uniteelements-cmd-pill.is-active .uniteelements-cmd-pill-count {
background: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
}
.uniteelements-cmd-suite {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.uniteelements-cmd-search-box {
position: relative;
display: flex;
align-items: center;
width: 175px;
transition: width 0.25s ease;
}
.uniteelements-cmd-search-box:focus-within {
width: 220px;
}
.uniteelements-cmd-search-svg {
position: absolute;
left: 10px;
color: #94A3B8;
pointer-events: none;
}
.uniteelements-cmd-search-input {
width: 100%;
height: 34px;
padding: 0 28px 0 30px;
border-radius: 999px;
border: 1px solid #CBD5E1;
background: #F8FAFC;
font-size: 12.5px;
font-weight: 600;
color: #0F172A;
outline: none;
transition: all 0.2s ease;
}
.uniteelements-cmd-search-input:focus {
background: #FFFFFF;
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.uniteelements-cmd-search-clear {
position: absolute;
right: 8px;
background: none;
border: none;
color: #94A3B8;
cursor: pointer;
font-size: 11px;
padding: 2px 4px;
border-radius: 50%;
line-height: 1;
}
.uniteelements-cmd-search-clear:hover {
color: #0F172A;
}
.uniteelements-cmd-divider {
width: 1px;
height: 20px;
background: #E2E8F0;
}
.uniteelements-cmd-sort-box {
position: relative;
display: flex;
align-items: center;
}
.uniteelements-cmd-sort-svg {
position: absolute;
left: 10px;
color: #64748B;
pointer-events: none;
}
.uniteelements-cmd-sort-select {
height: 34px;
padding: 0 12px 0 30px;
border-radius: 999px;
border: 1px solid #CBD5E1;
background: #F8FAFC;
font-size: 12px;
font-weight: 700;
color: #334155;
cursor: pointer;
outline: none;
transition: all 0.2s ease;
}
.uniteelements-cmd-sort-select:hover,
.uniteelements-cmd-sort-select:focus {
border-color: #94A3B8;
background: #FFFFFF;
}
.uniteelements-cmd-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
color: #065F46;
white-space: nowrap;
}
.uniteelements-cmd-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 6px #10B981;
}
.uniteelements-cmd-reset-btn {
background: #F1F5F9;
border: 1px solid #CBD5E1;
border-radius: 999px;
padding: 4px 10px;
font-size: 11.5px;
font-weight: 700;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.uniteelements-cmd-reset-btn:hover {
background: #E2E8F0;
color: #0F172A;
}
/* Hide Desktop Catalog Toolbar on Mobile (< 768px) */
@media (max-width: 768px) {
.uniteelements-catalog-command-bar,
.uniteelements-catalog-toolbar,
#uniteelements-desktop-catalog-toolbar {
display: none !important;
}
}
/* ==========================================================================
Mobile Floating Action Dock & High-Tech Bottom Filter Drawer
========================================================================== */
.uniteelements-catalog-mobile-dock {
display: none !important;
}
@media (max-width: 768px) {
.uniteelements-catalog-mobile-dock {
display: block !important;
position: fixed !important;
bottom: 20px !important;
left: 16px !important;
right: 16px !important;
max-width: 440px !important;
margin: 0 auto !important;
z-index: 9990 !important;
user-select: none;
-webkit-user-select: none;
animation: uniteelements-dock-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
}
@keyframes uniteelements-dock-rise {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.uniteelements-mobile-dock-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
border-radius: 999px;
padding: 8px 10px 8px 16px;
}
.uniteelements-dock-telemetry {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
cursor: pointer;
}
.uniteelements-dock-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 10px #10B981;
flex-shrink: 0;
animation: uniteelements-pulse-dot 2s infinite ease-in-out;
}
@keyframes uniteelements-pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: 0.7; }
}
.uniteelements-dock-current-label {
font-size: 13px;
font-weight: 700;
color: #F8FAFC;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.uniteelements-dock-total-pill {
font-size: 10.5px;
font-weight: 800;
background: rgba(255, 255, 255, 0.14);
color: #93C5FD;
padding: 2px 7px;
border-radius: 999px;
font-family: var(--uniteelements-font-mono, monospace);
flex-shrink: 0;
}
.uniteelements-dock-trigger-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #2B5DF5 0%, #1D44DB 100%);
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 14px rgba(43, 93, 245, 0.4);
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-dock-trigger-btn:hover {
transform: scale(1.02);
box-shadow: 0 6px 18px rgba(43, 93, 245, 0.5);
}
.uniteelements-dock-badge {
background: #FFFFFF;
color: #1D44DB;
font-size: 11px;
font-weight: 800;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 2px;
}
/* Mobile Drawer / Bottom Sheet */
.uniteelements-mobile-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 100000;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.uniteelements-mobile-drawer-overlay.is-active {
opacity: 1;
visibility: visible;
}
.uniteelements-mobile-filter-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 88vh;
background: #FFFFFF;
border-radius: 28px 28px 0 0;
box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.3);
z-index: 100001;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.uniteelements-mobile-filter-drawer.is-active {
transform: translateY(0);
}
.uniteelements-drawer-handle-bar {
display: flex;
justify-content: center;
padding: 12px 0 4px;
cursor: grab;
}
.uniteelements-drawer-handle {
width: 44px;
height: 5px;
background: #CBD5E1;
border-radius: 999px;
}
.uniteelements-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 24px 14px;
border-bottom: 1px solid #F1F5F9;
}
.uniteelements-drawer-overline {
font-size: 10px;
font-weight: 800;
font-family: var(--uniteelements-font-mono, monospace);
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
margin-bottom: 2px;
}
.uniteelements-drawer-title {
margin: 0;
font-size: 18px;
font-weight: 800;
color: #0F172A;
letter-spacing: -0.02em;
}
.uniteelements-drawer-close {
background: #F1F5F9;
border: 1px solid #E2E8F0;
width: 32px;
height: 32px;
border-radius: 50%;
color: #475569;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.uniteelements-drawer-close:hover {
background: #E2E8F0;
color: #0F172A;
}
.uniteelements-drawer-body {
padding: 18px 24px;
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.uniteelements-drawer-section {
margin-bottom: 22px;
}
.uniteelements-drawer-label {
display: flex;
align-items: baseline;
justify-content: space-between;
font-weight: 800;
font-size: 12.5px;
color: #0F172A;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.uniteelements-label-sub {
font-size: 11px;
font-weight: 500;
color: #64748B;
text-transform: none;
letter-spacing: normal;
}
.uniteelements-mobile-cat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.uniteelements-mobile-cat-btn {
padding: 10px 12px;
border-radius: 14px;
background: #F8FAFC;
border: 1.5px solid #E2E8F0;
font-size: 12.5px;
font-weight: 700;
color: #334155;
text-align: left;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.uniteelements-mobile-cat-btn .cat-icon {
font-size: 14px;
flex-shrink: 0;
}
.uniteelements-mobile-cat-btn .cat-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-mobile-cat-btn .cat-count {
background: rgba(0, 0, 0, 0.06);
font-size: 10.5px;
padding: 1px 6px;
border-radius: 999px;
font-family: var(--uniteelements-font-mono, monospace);
flex-shrink: 0;
}
.uniteelements-mobile-cat-btn.is-active {
background: #EFF6FF;
border-color: #2563EB;
color: #2563EB;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
}
.uniteelements-mobile-cat-btn.is-active .cat-count {
background: #2563EB;
color: #FFFFFF;
}
.uniteelements-mobile-sort-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.uniteelements-sort-radio-card {
border: 1.5px solid #E2E8F0;
background: #F8FAFC;
border-radius: 14px;
padding: 10px 12px;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
display: block;
}
.uniteelements-sort-radio-card input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.uniteelements-sort-radio-card .sort-card-content {
display: flex;
align-items: center;
gap: 8px;
}
.uniteelements-sort-radio-card .sort-icon {
font-size: 14px;
flex-shrink: 0;
}
.uniteelements-sort-radio-card .sort-text {
font-size: 12.5px;
font-weight: 700;
color: #334155;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-sort-radio-card.is-selected {
border-color: #2563EB;
background: #EFF6FF;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
}
.uniteelements-sort-radio-card.is-selected .sort-text {
color: #2563EB;
}
.uniteelements-drawer-footer {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px 28px;
background: #FFFFFF;
border-top: 1px solid #F1F5F9;
box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}
.uniteelements-drawer-reset-btn {
flex: 1;
border-radius: 999px;
background: #F8FAFC;
border: 1.5px solid #E2E8F0;
color: #475569;
font-size: 13px;
font-weight: 700;
padding: 12px 16px;
cursor: pointer;
transition: all 0.15s ease;
}
.uniteelements-drawer-reset-btn:hover {
background: #F1F5F9;
color: #0F172A;
}
.uniteelements-drawer-apply-btn {
flex: 2.5;
border-radius: 999px;
padding: 12px 18px;
font-size: 13.5px;
font-weight: 800;
cursor: pointer;
text-align: center;
}
/* ==========================================================================
2. Software Product Card Layout & Micro-Visuals
========================================================================== */
.uniteelements-product-card {
background: #FFFFFF;
border: 1.5px solid rgba(226, 232, 240, 0.9);
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
@media (max-width: 480px) {
.uniteelements-product-card {
padding: 16px;
border-radius: 16px;
}
}
.uniteelements-product-card:hover {
transform: translateY(-4px);
border-color: var(--uniteelements-primary-300);
box-shadow: 0 20px 40px -10px rgba(43, 93, 245, 0.14), 0 0 0 1px var(--uniteelements-primary-200);
}
.uniteelements-product-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 8px;
min-height: 26px;
}
/* Card Media / Images */
.uniteelements-product-card__media {
border-radius: 14px;
overflow: hidden;
margin-bottom: 14px;
background: #F8FAFC;
border: 1px solid var(--uniteelements-border-subtle);
aspect-ratio: 16 / 9;
}
.uniteelements-product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform 0.3s ease;
will-change: transform;
image-rendering: auto;
}
.uniteelements-product-card:hover .uniteelements-product-card__media img {
transform: scale(1.04);
}
/* Rich Dynamic Fallback Visual Canvas */
.uniteelements-product-card__fallback-visual {
position: relative;
border-radius: 14px;
padding: 24px 16px 16px;
margin-bottom: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid rgba(226, 232, 240, 0.85);
overflow: hidden;
min-height: 120px;
transition: all 0.25s ease;
}
.uniteelements-product-card:hover .uniteelements-product-card__fallback-visual {
border-color: var(--uniteelements-primary-300);
}
/* Visual Theme Variants */
.uniteelements-visual--saas {
background: linear-gradient(135deg, #FAF5FF 0%, #EFF6FF 100%);
border-color: #E9D5FF;
}
.uniteelements-visual--saas .uniteelements-product-card__fallback-icon {
color: #7C3AED;
}
.uniteelements-visual--ai {
background: linear-gradient(135deg, #ECFDF5 0%, #EFF6FF 100%);
border-color: #A7F3D0;
}
.uniteelements-visual--ai .uniteelements-product-card__fallback-icon {
color: #059669;
}
.uniteelements-visual--commerce {
background: linear-gradient(135deg, #EFF6FF 0%, #E0F2FE 100%);
border-color: #BAE6FD;
}
.uniteelements-visual--commerce .uniteelements-product-card__fallback-icon {
color: #0284C7;
}
.uniteelements-visual--theme {
background: linear-gradient(135deg, #F0FDF4 0%, #EFF6FF 100%);
border-color: #BBF7D0;
}
.uniteelements-visual--theme .uniteelements-product-card__fallback-icon {
color: #16A34A;
}
.uniteelements-visual--default {
background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
border-color: #E2E8F0;
}
.uniteelements-visual--default .uniteelements-product-card__fallback-icon {
color: var(--uniteelements-primary-500);
}
.uniteelements-card-terminal-dots {
position: absolute;
top: 10px;
left: 12px;
display: flex;
gap: 4px;
}
.uniteelements-card-terminal-dots span {
width: 6.5px;
height: 6.5px;
border-radius: 50%;
}
.uniteelements-card-terminal-dots .dot-r { background: #EF4444; }
.uniteelements-card-terminal-dots .dot-y { background: #F59E0B; }
.uniteelements-card-terminal-dots .dot-g { background: #10B981; }
.uniteelements-card-arch-tag {
position: absolute;
top: 8px;
right: 12px;
font-size: 9.5px;
font-weight: 700;
font-family: var(--uniteelements-font-mono);
letter-spacing: 0.06em;
color: var(--uniteelements-text-muted);
background: rgba(255, 255, 255, 0.7);
padding: 2px 7px;
border-radius: 4px;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.uniteelements-product-card__fallback-icon {
margin-bottom: 6px;
transition: transform 0.25s ease;
}
.uniteelements-product-card:hover .uniteelements-product-card__fallback-icon {
transform: scale(1.1);
}
.uniteelements-visual-caption {
font-family: var(--uniteelements-font-mono);
font-size: 11px;
font-weight: 700;
color: var(--uniteelements-text-primary);
letter-spacing: 0.02em;
}
/* Card Body & Title */
.uniteelements-product-card__body {
display: flex;
flex-direction: column;
flex: 1 0 auto;
margin-bottom: 12px;
}
.uniteelements-product-card__title {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
color: var(--uniteelements-text-primary);
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
.uniteelements-product-card__title a {
color: var(--uniteelements-text-primary);
text-decoration: none;
transition: color 0.15s ease;
}
.uniteelements-product-card__title a:hover {
color: var(--uniteelements-primary-600);
}
.uniteelements-product-card__desc {
font-size: 13px;
color: var(--uniteelements-text-secondary);
line-height: 1.5;
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3em;
}
/* Micro-Tech Row on Cards */
.uniteelements-product-card__tech-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 4px;
}
.uniteelements-tech-pill-micro {
font-size: 10px;
font-weight: 600;
font-family: var(--uniteelements-font-mono);
color: var(--uniteelements-primary-700);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 2px 7px;
border-radius: 4px;
white-space: nowrap;
}
/* Card Footer */
.uniteelements-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #F1F5F9;
min-height: 52px;
}
.uniteelements-product-card__price {
font-size: 15px;
font-weight: 800;
color: var(--uniteelements-text-primary);
font-family: var(--uniteelements-font-family);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
min-width: 0;
}
.uniteelements-product-card__price del {
font-size: 11.5px;
font-weight: 500;
color: var(--uniteelements-text-muted);
text-decoration: line-through;
margin-right: 4px;
}
.uniteelements-product-card__price ins {
text-decoration: none;
color: var(--uniteelements-primary-600);
font-weight: 800;
}
.uniteelements-price-from {
font-size: 11px;
font-weight: 600;
color: var(--uniteelements-text-muted);
text-transform: uppercase;
margin-right: 3px;
}
.uniteelements-price-free {
font-size: 13px;
font-weight: 700;
color: #059669;
background: #ECFDF5;
padding: 2px 8px;
border-radius: 4px;
}
.uniteelements-price-custom {
font-size: 12px;
font-weight: 700;
color: var(--uniteelements-primary-600);
background: var(--uniteelements-primary-50);
padding: 2px 8px;
border-radius: 4px;
}
.uniteelements-product-card .uniteelements-btn--glow {
border-radius: 10px;
padding: 7px 13px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
background: linear-gradient(135deg, #2B5DF5 0%, #1D44DB 100%);
color: #FFFFFF;
box-shadow: 0 3px 10px rgba(43, 93, 245, 0.3);
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.uniteelements-product-card .uniteelements-btn--glow:hover {
box-shadow: 0 6px 18px rgba(43, 93, 245, 0.45);
transform: translateY(-2px);
}
/* ==========================================================================
2. Creative 3D Software Studio Hero & Showcase Stage
========================================================================== */
.uniteelements-single-product-hero {
padding: 24px 0 40px;
position: relative;
overflow-x: clip;
}
@media (min-width: 1024px) {
.uniteelements-single-product-hero {
padding: 32px 0 54px;
}
}
@media (max-width: 640px) {
.uniteelements-single-product-hero {
padding: 16px 0 28px;
}
.uniteelements-software-hero-grid {
gap: 20px;
margin-bottom: 24px;
}
.uniteelements-software-badge-cluster {
gap: 6px;
margin-bottom: 12px;
}
.uniteelements-software-hero-title {
margin-bottom: 10px;
}
.uniteelements-software-hero-lead {
margin-bottom: 16px;
}
.uniteelements-software-feature-matrix {
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 18px;
}
.uniteelements-matrix-chip-card {
padding: 8px 10px;
font-size: 11.5px;
border-radius: 10px;
}
.uniteelements-matrix-chip-icon {
width: 24px;
height: 24px;
font-size: 12px;
border-radius: 6px;
}
.uniteelements-software-pricing-deck {
margin-bottom: 14px;
}
.uniteelements-software-actions-row {
gap: 8px;
margin-bottom: 12px;
}
.uniteelements-btn-cta-primary,
.uniteelements-btn-cta-secondary {
padding: 11px 16px;
font-size: 13px;
min-height: 44px;
}
.uniteelements-software-stage-podium {
padding: 14px;
border-radius: 18px;
}
.uniteelements-stage-media-wrap {
margin-bottom: 12px;
border-radius: 12px;
}
.uniteelements-stage-media-wrap img {
max-height: 180px;
}
.uniteelements-stage-preview-fallback {
padding: 20px 14px;
}
.uniteelements-studio-telemetry-deck {
padding: 12px 14px;
gap: 10px;
border-radius: 16px;
}
.uniteelements-telemetry-icon-box {
width: 34px;
height: 34px;
font-size: 15px;
border-radius: 8px;
}
}
.uniteelements-software-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
margin-bottom: 36px;
width: 100%;
max-width: 100%;
}
@media (min-width: 1024px) {
.uniteelements-software-hero-grid {
grid-template-columns: 1.16fr 0.84fr;
gap: 48px;
}
}
/* Left: High-Impact Software Positioning */
.uniteelements-software-hero-left {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
}
.uniteelements-software-badge-cluster {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.uniteelements-badge-hero-cat {
display: inline-flex;
align-items: center;
gap: 6px;
background: #EFF6FF;
color: #2563EB;
font-size: 11.5px;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid #DBEAFE;
}
.uniteelements-badge-hero-version {
display: inline-flex;
align-items: center;
background: #FFFFFF;
color: #475569;
font-size: 11.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #E2E8F0;
font-family: var(--uniteelements-font-mono);
}
.uniteelements-badge-hero-rating {
display: inline-flex;
align-items: center;
gap: 4px;
background: #ECFDF5;
color: #059669;
font-size: 11.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #A7F3D0;
}
.uniteelements-badge-hero-custom {
display: inline-flex;
align-items: center;
gap: 4px;
background: #FEF3C7;
color: #D97706;
font-size: 11.5px;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid #FDE68A;
}
.uniteelements-software-hero-title {
font-size: clamp(26px, 3.8vw, 42px);
font-weight: 800;
color: #0F172A;
line-height: 1.18;
margin: 0 0 14px;
letter-spacing: -0.03em;
word-break: break-word;
hyphens: auto;
}
.uniteelements-software-hero-lead {
font-size: clamp(14px, 1.8vw, 15.5px);
color: #475569;
line-height: 1.6;
margin: 0 0 24px;
word-break: break-word;
}
/* 2x3 Feature Matrix Deck */
.uniteelements-software-feature-matrix {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 24px;
width: 100%;
}
@media (min-width: 540px) {
.uniteelements-software-feature-matrix {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
}
.uniteelements-matrix-chip-card {
display: flex;
align-items: center;
gap: 10px;
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 10px 14px;
font-size: 12.5px;
font-weight: 600;
color: #334155;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
transition: all 0.2s ease;
word-break: break-word;
}
.uniteelements-matrix-chip-card:hover {
border-color: #93C5FD;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
}
.uniteelements-matrix-chip-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
/* Software Price Deck */
.uniteelements-software-pricing-deck {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.uniteelements-price-active-val {
font-size: clamp(28px, 4vw, 38px);
font-weight: 800;
color: #2563EB;
line-height: 1;
}
.uniteelements-price-regular-val {
font-size: 16px;
color: #94A3B8;
text-decoration: line-through;
}
.uniteelements-price-discount-pill {
background: #2563EB;
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
.uniteelements-software-actions-row {
display: flex;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
width: 100%;
}
.uniteelements-btn-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
font-size: 14px;
font-weight: 700;
padding: 13px 26px;
border-radius: 12px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
transition: all 0.2s ease;
border: none;
cursor: pointer;
min-height: 48px;
flex: 1;
min-width: 160px;
}
.uniteelements-btn-cta-primary:hover {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5);
transform: translateY(-2px);
}
.uniteelements-btn-cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #FFFFFF;
color: #0F172A !important;
font-size: 14px;
font-weight: 700;
padding: 13px 22px;
border-radius: 12px;
text-decoration: none;
border: 1px solid #CBD5E1;
transition: all 0.2s ease;
min-height: 48px;
flex: 1;
min-width: 150px;
}
.uniteelements-btn-cta-secondary:hover {
border-color: #2563EB;
color: #2563EB !important;
transform: translateY(-2px);
}
.uniteelements-trust-guarantee-strip {
font-size: 11.5px;
color: #64748B;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Right Stage: 3D Holographic Studio Podium */
.uniteelements-software-hero-right {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
}
.uniteelements-podium-ambient-aura {
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(37, 99, 235, 0.2) 50%, transparent 70%);
filter: blur(44px);
pointer-events: none;
z-index: 1;
}
.uniteelements-software-stage-podium {
position: relative;
z-index: 2;
width: 100%;
max-width: 460px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 246, 255, 0.94) 100%);
border: 2px solid rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 24px;
box-shadow: 0 20px 50px -10px rgba(37, 99, 235, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.uniteelements-stage-header-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.uniteelements-stage-window-dots {
display: flex;
gap: 6px;
}
.uniteelements-stage-window-dots span {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.uniteelements-dot-blue { background: #38BDF8; }
.uniteelements-dot-purple { background: #818CF8; }
.uniteelements-dot-green { background: #34D399; }
.uniteelements-stage-media-wrap {
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
border: 1px solid #E2E8F0;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
margin-bottom: 16px;
}
.uniteelements-stage-media-wrap img {
width: 100%;
height: auto;
max-height: 260px;
object-fit: cover;
display: block;
}
.uniteelements-stage-preview-fallback {
padding: 32px 20px;
text-align: center;
background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%);
}
.uniteelements-stage-spec-chips-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.uniteelements-spec-chip-pill {
display: flex;
align-items: center;
gap: 6px;
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 6px 10px;
font-size: 11px;
font-weight: 700;
color: #334155;
font-family: var(--uniteelements-font-mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 4-Column Studio Telemetry Deck */
.uniteelements-studio-telemetry-deck {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 20px;
padding: 18px 20px;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
width: 100%;
}
@media (min-width: 768px) {
.uniteelements-studio-telemetry-deck {
grid-template-columns: repeat(4, 1fr);
padding: 20px 28px;
gap: 20px;
}
}
.uniteelements-telemetry-block {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.uniteelements-telemetry-icon-box {
width: 42px;
height: 42px;
border-radius: 12px;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.uniteelements-telemetry-stat-num {
font-size: clamp(15px, 2vw, 18px);
font-weight: 800;
color: #0F172A;
line-height: 1.15;
}
.uniteelements-telemetry-stat-lbl {
font-size: 11px;
color: #64748B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
3. Product Metadata Strip
========================================================================== */
.uniteelements-meta-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: var(--uniteelements-space-3);
background: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
padding: var(--uniteelements-space-4) var(--uniteelements-space-6);
margin: var(--uniteelements-space-8) 0;
box-shadow: var(--uniteelements-shadow-xs);
}
.uniteelements-meta-strip__item {
display: flex;
flex-direction: column;
gap: 2px;
}
.uniteelements-meta-strip__label {
font-size: 11px;
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.uniteelements-meta-strip__val {
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
}
.uniteelements-product-meta-section {
margin: 0 0 var(--uniteelements-space-6) 0;
position: relative;
z-index: 10;
}
.uniteelements-meta-telemetry-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
background: #FFFFFF;
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 16px;
padding: 16px 20px;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
}
.uniteelements-meta-telemetry-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 10px;
background: #F8FAFC;
border: 1px solid rgba(241, 245, 249, 0.8);
transition: all 0.2s ease;
}
.uniteelements-meta-telemetry-item:hover {
background: #F1F5F9;
border-color: #E2E8F0;
transform: translateY(-1px);
}
.uniteelements-meta-icon-box {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
flex-shrink: 0;
}
.uniteelements-meta-icon--blue {
background: #EFF6FF;
color: #2563EB;
}
.uniteelements-meta-icon--green {
background: #ECFDF5;
color: #059669;
}
.uniteelements-meta-icon--indigo {
background: #EEF2FF;
color: #4F46E5;
}
.uniteelements-meta-icon--amber {
background: #FFFBEB;
color: #D97706;
}
.uniteelements-meta-icon--emerald {
background: #F0FDF4;
color: #16A34A;
}
.uniteelements-meta-icon--purple {
background: #FAF5FF;
color: #7C3AED;
}
.uniteelements-meta-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.uniteelements-meta-label {
font-size: 11px;
font-weight: 600;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-meta-val {
font-size: 13px;
font-weight: 700;
color: #0F172A;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-meta-val code {
background: #EFF6FF;
color: #1D4ED8;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (max-width: 768px) {
.uniteelements-product-meta-section {
margin: 4px 0 20px 0;
}
.uniteelements-meta-telemetry-bar {
grid-template-columns: repeat(2, 1fr);
padding: 12px;
gap: 8px;
}
.uniteelements-meta-telemetry-item {
padding: 6px 8px;
gap: 8px;
}
.uniteelements-meta-icon-box {
width: 30px;
height: 30px;
}
.uniteelements-meta-label {
font-size: 10px;
}
.uniteelements-meta-val {
font-size: 12px;
}
}
@media (max-width: 480px) {
.uniteelements-meta-telemetry-bar {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
4. 'What You Get' & Entitlement Rows
========================================================================== */
.uniteelements-entitlement-list {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-3);
margin: var(--uniteelements-space-6) 0;
}
.uniteelements-entitlement-row {
display: flex;
align-items: flex-start;
gap: var(--uniteelements-space-4);
padding: var(--uniteelements-space-4);
background: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-md);
transition: var(--uniteelements-transition);
}
.uniteelements-entitlement-row:hover {
border-color: var(--uniteelements-primary-200);
background-color: var(--uniteelements-primary-50);
}
.uniteelements-entitlement-row__icon {
color: var(--uniteelements-success-500);
flex-shrink: 0;
margin-top: 2px;
}
.uniteelements-entitlement-row__title {
font-weight: var(--uniteelements-font-weight-bold);
font-size: var(--uniteelements-font-size-body);
color: var(--uniteelements-text-primary);
margin-bottom: 2px;
}
.uniteelements-entitlement-row__desc {
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-secondary);
margin: 0;
}
/* ==========================================================================
5. Technical Details Matrix & Resources
========================================================================== */
.uniteelements-tech-specs-table {
width: 100%;
border-collapse: collapse;
margin: var(--uniteelements-space-4) 0;
}
.uniteelements-tech-specs-table th,
.uniteelements-tech-specs-table td {
padding: var(--uniteelements-space-3) var(--uniteelements-space-4);
border-bottom: 1px solid var(--uniteelements-border-subtle);
font-size: var(--uniteelements-font-size-body-sm);
}
.uniteelements-tech-specs-table th {
text-align: left;
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-secondary);
width: 40%;
}
.uniteelements-tech-specs-table td {
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
}
.uniteelements-resources-grid {
display: flex;
flex-wrap: wrap;
gap: var(--uniteelements-space-3);
margin: var(--uniteelements-space-4) 0;
}
/* ==========================================================================
6. Related Products Discovery
========================================================================== */
.uniteelements-related-products-section {
margin: var(--uniteelements-space-16) 0 var(--uniteelements-space-12);
padding-top: var(--uniteelements-space-12);
border-top: 1px solid var(--uniteelements-border-subtle);
}
/* ==========================================================================
7. Liquid Glass Variation Tier Matrix & Pricing Selector
========================================================================== */
.uniteelements-variation-tier-matrix {
margin: var(--uniteelements-space-6) 0;
}
.uniteelements-tier-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-3);
}
.uniteelements-tier-card {
position: relative;
background: var(--uniteelements-glass-bg);
backdrop-filter: var(--uniteelements-glass-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-blur);
border: 1.5px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
padding: var(--uniteelements-space-4) var(--uniteelements-space-5);
cursor: pointer;
transition: all var(--uniteelements-duration-fast) var(--uniteelements-ease-out);
user-select: none;
}
.uniteelements-tier-card:hover {
border-color: var(--uniteelements-primary-300);
transform: translateY(-2px);
box-shadow: var(--uniteelements-shadow-md);
}
.uniteelements-tier-card:focus-visible {
outline: 2px solid var(--uniteelements-primary-500);
outline-offset: 2px;
}
.uniteelements-tier-card.is-selected {
border-color: var(--uniteelements-primary-500);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(239, 244, 255, 0.8));
box-shadow: 0 0 0 1px var(--uniteelements-primary-500), var(--uniteelements-shadow-glass);
}
.uniteelements-tier-badge {
position: absolute;
top: -10px;
right: 16px;
background: linear-gradient(135deg, var(--uniteelements-primary-500), var(--uniteelements-primary-700));
color: #ffffff;
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 10px;
border-radius: var(--uniteelements-radius-full);
box-shadow: 0 2px 8px rgba(43, 93, 245, 0.35);
z-index: 2;
}
.uniteelements-tier-header-row {
display: flex;
align-items: center;
gap: var(--uniteelements-space-3);
}
.uniteelements-tier-radio-indicator {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--uniteelements-border-strong);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--uniteelements-duration-fast) var(--uniteelements-ease-out);
}
.uniteelements-tier-card.is-selected .uniteelements-tier-radio-indicator {
border-color: var(--uniteelements-primary-500);
background: var(--uniteelements-primary-50);
}
.uniteelements-radio-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--uniteelements-primary-500);
transform: scale(0);
transition: transform var(--uniteelements-duration-fast) var(--uniteelements-ease-out);
}
.uniteelements-tier-card.is-selected .uniteelements-radio-dot {
transform: scale(1);
}
.uniteelements-tier-title-wrap {
flex: 1;
min-width: 0;
}
.uniteelements-tier-name {
font-size: var(--uniteelements-font-size-base);
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
margin: 0 0 2px;
line-height: var(--uniteelements-line-height-tight);
}
.uniteelements-tier-domain-tag {
display: inline-block;
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-medium);
color: var(--uniteelements-primary-600);
background: var(--uniteelements-primary-50);
padding: 1px 8px;
border-radius: var(--uniteelements-radius-sm);
}
.uniteelements-tier-pricing-wrap {
text-align: right;
flex-shrink: 0;
}
.uniteelements-tier-price {
font-size: var(--uniteelements-font-size-lg);
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
font-family: var(--uniteelements-font-family);
}
.uniteelements-tier-price del {
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-muted);
margin-right: 4px;
}
.uniteelements-tier-price ins {
text-decoration: none;
color: var(--uniteelements-primary-600);
}
.uniteelements-tier-feature-list {
list-style: none;
padding: var(--uniteelements-space-3) 0 0 var(--uniteelements-space-8);
margin: var(--uniteelements-space-2) 0 0;
border-top: 1px dashed var(--uniteelements-border-subtle);
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.uniteelements-tier-feature-list li {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-secondary);
}
.uniteelements-tier-feature-list svg {
color: var(--uniteelements-primary-500);
flex-shrink: 0;
}
/* ==========================================================================
8. High-Tech Single Product Hero & Canvas Showcase
========================================================================== */
.uniteelements-product-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: var(--uniteelements-font-size-caption);
color: var(--uniteelements-text-muted);
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-product-breadcrumbs a {
color: var(--uniteelements-text-secondary);
text-decoration: none;
transition: color var(--uniteelements-duration-fast) var(--uniteelements-ease-out);
}
.uniteelements-product-breadcrumbs a:hover {
color: var(--uniteelements-primary-500);
}
.uniteelements-product-breadcrumbs .sep {
color: var(--uniteelements-border-strong);
}
.uniteelements-product-breadcrumbs .current {
color: var(--uniteelements-primary-600);
font-weight: 600;
}
.uniteelements-product-hero-title {
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.03em;
color: var(--uniteelements-text-primary);
margin: 0 0 var(--uniteelements-space-4);
}
.uniteelements-product-hero-lead {
font-size: var(--uniteelements-font-size-body-lg);
color: var(--uniteelements-text-secondary);
line-height: 1.6;
max-width: 820px;
margin: 0 0 var(--uniteelements-space-6);
}
.uniteelements-product-hero-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--uniteelements-space-4);
padding: var(--uniteelements-space-4) 0;
border-top: 1px solid var(--uniteelements-border-subtle);
margin-bottom: var(--uniteelements-space-6);
}
.uniteelements-hero-tech-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.uniteelements-tech-chip {
font-family: var(--uniteelements-font-mono);
font-size: 11px;
font-weight: 600;
color: var(--uniteelements-primary-700);
background: rgba(239, 246, 255, 0.9);
border: 1px solid rgba(191, 219, 254, 0.8);
padding: 3px 10px;
border-radius: var(--uniteelements-radius-sm);
}
.uniteelements-hero-quick-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Software Media Showcase Deck */
.uniteelements-product-canvas-deck {
margin-top: var(--uniteelements-space-4);
}
.uniteelements-media-canvas {
background: #FFFFFF;
border: 2px solid rgba(255, 255, 255, 0.95);
border-radius: var(--uniteelements-radius-2xl);
padding: var(--uniteelements-space-4);
box-shadow: 0 20px 50px -10px rgba(43, 93, 245, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);
overflow: hidden;
}
.uniteelements-media-canvas__main {
border-radius: var(--uniteelements-radius-xl);
overflow: hidden;
background: #F8FAFC;
}
.uniteelements-canvas-img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
display: block;
}
.uniteelements-media-canvas__gallery {
display: flex;
gap: 10px;
margin-top: 12px;
overflow-x: auto;
padding-bottom: 4px;
}
.uniteelements-gallery-thumb {
width: 72px;
height: 54px;
border-radius: var(--uniteelements-radius-md);
overflow: hidden;
border: 1.5px solid var(--uniteelements-border-default);
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
}
.uniteelements-gallery-thumb:hover {
border-color: var(--uniteelements-primary-500);
transform: translateY(-2px);
}
.uniteelements-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
9. Asymmetric 2-Column Product Workspace Section
========================================================================== */
.uniteelements-product-workspace-section {
padding: var(--uniteelements-space-8) 0 var(--uniteelements-space-12);
}
@media (min-width: 1024px) {
.uniteelements-product-workspace-section {
padding: var(--uniteelements-space-10) 0 var(--uniteelements-space-16);
}
}
.uniteelements-product-workspace-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-8);
align-items: start;
}
@media (min-width: 1024px) {
.uniteelements-product-workspace-layout {
grid-template-columns: 1fr 370px;
gap: var(--uniteelements-space-10);
}
}
/* Glass Console Navigation Bar */
.uniteelements-console-nav-wrap {
margin-bottom: var(--uniteelements-space-5);
position: sticky;
top: 70px;
z-index: 10;
}
.uniteelements-console-tabs {
display: flex;
align-items: center;
gap: 6px;
padding: 6px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: var(--uniteelements-radius-xl);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%;
}
.uniteelements-console-tabs::-webkit-scrollbar {
display: none;
}
.uniteelements-console-tab-btn {
flex-shrink: 0;
white-space: nowrap;
}
.uniteelements-console-tab-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
background: transparent;
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-body-sm);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-secondary);
border-radius: var(--uniteelements-radius-lg);
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.uniteelements-console-tab-btn:hover {
color: var(--uniteelements-primary-600);
background: rgba(239, 246, 255, 0.7);
}
.uniteelements-console-tab-btn.is-active {
background: var(--uniteelements-primary-500);
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.35);
}
.uniteelements-console-panel {
display: none;
}
.uniteelements-console-panel.is-active {
display: block;
animation: uniteelementsFadeIn 0.3s ease;
}
@keyframes uniteelementsFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Overview Feature Grid */
.uniteelements-overview-card {
padding: var(--uniteelements-space-8);
}
.uniteelements-overview-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--uniteelements-space-4);
margin: var(--uniteelements-space-6) 0 var(--uniteelements-space-8);
}
.uniteelements-feat-chip {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: rgba(248, 250, 252, 0.9);
border: 1px solid rgba(226, 232, 240, 0.85);
border-radius: var(--uniteelements-radius-lg);
transition: all 0.2s ease;
}
.uniteelements-feat-chip:hover {
border-color: var(--uniteelements-primary-300);
background: #FFFFFF;
transform: translateY(-2px);
box-shadow: var(--uniteelements-shadow-sm);
}
.uniteelements-feat-chip__icon {
font-size: 20px;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.uniteelements-feat-chip__body {
display: flex;
flex-direction: column;
gap: 3px;
}
.uniteelements-feat-chip__body strong {
font-size: 13px;
color: var(--uniteelements-text-primary);
}
.uniteelements-feat-chip__body span {
font-size: 12px;
color: var(--uniteelements-text-secondary);
line-height: 1.4;
}
/* Article Typography for Merchant Description */
.uniteelements-product-article {
color: var(--uniteelements-text-primary);
font-size: var(--uniteelements-font-size-base);
line-height: 1.75;
border-top: 1px solid var(--uniteelements-border-subtle);
padding-top: var(--uniteelements-space-6);
}
.uniteelements-product-article h2,
.uniteelements-product-article h3,
.uniteelements-product-article h4 {
color: var(--uniteelements-text-primary);
font-weight: 800;
margin: 1.5em 0 0.5em;
letter-spacing: -0.02em;
}
.uniteelements-product-article p {
margin-bottom: 1.25em;
}
.uniteelements-product-article ul,
.uniteelements-product-article ol {
margin: 1em 0 1.5em 1.5em;
padding: 0;
}
.uniteelements-product-article li {
margin-bottom: 0.5em;
color: var(--uniteelements-text-secondary);
}
/* ==========================================================================
10. Sticky Deployment Console Deck
========================================================================== */
.uniteelements-sticky-deployment-deck {
position: static;
width: 100%;
}
@media (min-width: 1024px) {
.uniteelements-sticky-deployment-deck {
position: sticky;
top: 90px;
z-index: 20;
}
}
.uniteelements-deck-inner {
padding: var(--uniteelements-space-5);
border-radius: var(--uniteelements-radius-2xl);
border: 1.5px solid rgba(255, 255, 255, 1);
box-shadow: 0 20px 50px -10px rgba(43, 93, 245, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.8);
}
@media (min-width: 640px) {
.uniteelements-deck-inner {
padding: var(--uniteelements-space-6);
}
}
.uniteelements-deck-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--uniteelements-space-3);
}
.uniteelements-deck-product-title {
font-size: var(--uniteelements-font-size-base);
font-weight: 800;
color: var(--uniteelements-text-primary);
line-height: 1.3;
margin: 0 0 var(--uniteelements-space-4);
}
.uniteelements-deck-price-box {
background: rgba(248, 250, 252, 0.9);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: var(--uniteelements-radius-xl);
padding: var(--uniteelements-space-4);
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-deck-live-price {
font-size: 1.75rem;
font-weight: 800;
color: var(--uniteelements-primary-600);
}
.uniteelements-deck-cta-row {
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-deck-secondary-links {
display: flex;
gap: 8px;
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-deck-deliverables {
padding-top: var(--uniteelements-space-4);
border-top: 1px solid var(--uniteelements-border-subtle);
margin-bottom: var(--uniteelements-space-4);
}
.uniteelements-deck-checklist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.uniteelements-deck-checklist li {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--uniteelements-text-secondary);
font-weight: 500;
}
.uniteelements-deck-trust-seal {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding-top: var(--uniteelements-space-3);
border-top: 1px solid var(--uniteelements-border-subtle);
font-size: 11px;
font-weight: 600;
color: var(--uniteelements-text-muted);
}
.uniteelements-glow-pulse {
animation: uniteelementsGlowPulse 1.2s ease;
}
@keyframes uniteelementsGlowPulse {
0% { box-shadow: 0 0 0 0 rgba(43, 93, 245, 0.6); }
50% { box-shadow: 0 0 0 12px rgba(43, 93, 245, 0); }
100% { box-shadow: 0 0 0 0 rgba(43, 93, 245, 0); }
}
/* ==========================================================================
11. Modern Floating Quick-Action Pill Dock
========================================================================== */
.uniteelements-floating-bottom-dock {
position: fixed;
bottom: 12px;
left: 0;
right: 0;
z-index: 999;
transform: translateY(140%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.uniteelements-floating-bottom-dock.is-visible {
transform: translateY(0);
pointer-events: auto;
}
.uniteelements-dock-container {
max-width: 860px;
margin: 0 auto;
padding: 0 16px;
width: 100%;
}
.uniteelements-dock-pill-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1.5px solid rgba(255, 255, 255, 0.9);
border-radius: 999px;
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(226, 232, 240, 0.8);
}
.uniteelements-dock-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.uniteelements-dock-icon-box {
width: 34px;
height: 34px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border: 1px solid #DBEAFE;
}
.uniteelements-dock-icon-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uniteelements-dock-meta {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.uniteelements-dock-title {
font-size: 13px;
font-weight: 700;
color: #0F172A;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
line-height: 1.25;
}
@media (min-width: 480px) {
.uniteelements-dock-title {
max-width: 220px;
}
}
@media (min-width: 768px) {
.uniteelements-dock-title {
max-width: 320px;
}
}
.uniteelements-dock-subtext {
font-size: 11px;
color: #64748B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: none;
}
@media (min-width: 640px) {
.uniteelements-dock-subtext {
display: block;
}
}
.uniteelements-dock-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
@media (min-width: 540px) {
.uniteelements-dock-right {
gap: 14px;
}
}
.uniteelements-dock-price-deck {
display: flex;
align-items: baseline;
gap: 6px;
}
.uniteelements-dock-price-old {
font-size: 11px;
color: #94A3B8;
text-decoration: line-through;
display: none;
}
@media (min-width: 540px) {
.uniteelements-dock-price-old {
display: inline-block;
}
}
.uniteelements-dock-price-current {
font-size: 15px;
font-weight: 800;
color: #2563EB;
white-space: nowrap;
}
.uniteelements-dock-btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
font-size: 12.5px;
font-weight: 700;
padding: 8px 18px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
transition: all 0.2s ease;
white-space: nowrap;
min-height: 38px;
}
.uniteelements-dock-btn-cta:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
transform: translateY(-1px);
}
@media (max-width: 480px) {
.uniteelements-dock-container {
padding: 0 8px;
}
.uniteelements-dock-pill-inner {
padding: 6px 10px;
gap: 8px;
}
.uniteelements-dock-title {
font-size: 12px;
max-width: 100px;
}
.uniteelements-dock-icon-box {
width: 28px;
height: 28px;
}
.uniteelements-dock-price-current {
font-size: 13.5px;
}
.uniteelements-dock-btn-cta {
padding: 7px 12px;
font-size: 11.5px;
min-height: 34px;
}
}
@media (max-width: 360px) {
.uniteelements-dock-title {
max-width: 80px;
}
.uniteelements-dock-btn-cta span {
font-size: 11px;
}
}
/* --- components/cart.css --- */
/**
* UniteElements Theme - Creative Cart / Purchase Workspace Styles
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Cart Drawer Container
========================================================================== */
/* ==========================================================================
1. Cart Drawer Container (3D Liquid Glass Modal Drawer)
========================================================================== */
.uniteelements-cart-drawer {
position: fixed;
top: 14px;
bottom: 14px;
right: 14px;
width: calc(100% - 28px);
max-width: 480px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
z-index: 9985;
display: flex;
flex-direction: column;
box-shadow: 0 32px 80px -16px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.95) inset;
transform: translateX(115%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(226, 232, 240, 0.85);
border-radius: 28px;
overflow: hidden;
}
.uniteelements-cart-drawer.is-active {
transform: translateX(0);
}
/* ==========================================================================
2. Cart Header with 3D Isometric Cart Icon
========================================================================== */
.uniteelements-cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
background: rgba(255, 255, 255, 0.75);
flex-shrink: 0;
}
.uniteelements-cart-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 20px 24px;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 12px;
}
.uniteelements-3d-cart-icon {
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(219, 230, 254, 0.75) 100%);
border: 1.5px solid rgba(255, 255, 255, 1);
box-shadow: 0 10px 24px -4px rgba(43, 93, 245, 0.2), inset 0 2px 2px rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-cart-drawer__title {
font-size: 20px;
font-weight: 700;
color: var(--uniteelements-text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.uniteelements-cart-drawer__meta-line {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--uniteelements-text-secondary);
margin-top: 2px;
}
.uniteelements-cart-close-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(241, 245, 249, 0.8);
border: 1px solid rgba(255, 255, 255, 0.9);
color: var(--uniteelements-text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--uniteelements-transition);
}
.uniteelements-cart-close-circle:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--uniteelements-danger-600);
transform: scale(1.06);
}
/* ==========================================================================
3. Cart Items List & Cards
========================================================================== */
.uniteelements-cart-card {
display: flex;
gap: 14px;
padding: 16px;
background: #FFFFFF;
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 20px;
box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
transition: var(--uniteelements-transition);
}
.uniteelements-cart-card:hover {
border-color: rgba(43, 93, 245, 0.3);
box-shadow: 0 8px 24px -4px rgba(43, 93, 245, 0.08);
}
.uniteelements-cart-card__media {
width: 52px;
height: 52px;
border-radius: 14px;
overflow: hidden;
background: var(--uniteelements-primary-50);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-cart-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uniteelements-cart-card__glyph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
font-size: 22px;
border-radius: 12px;
}
.uniteelements-cart-card__content {
flex: 1 1 auto;
min-width: 0;
}
.uniteelements-cart-card__title {
font-size: 13.5px;
font-weight: 700;
color: var(--uniteelements-text-primary);
margin: 0;
line-height: 1.3;
}
.uniteelements-cart-card__title a {
color: #0F172A;
text-decoration: none;
transition: color 0.2s ease;
}
.uniteelements-cart-card__title a:hover {
color: #2563EB;
}
.uniteelements-cart-card__price {
font-size: 15px;
font-weight: 800;
color: #2563EB;
white-space: nowrap;
}
.uniteelements-license-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 6px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
font-size: 11px;
font-weight: 600;
color: #475569;
}
/* Savings celebration banner */
.uniteelements-cart-savings-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.6));
border: 1px solid rgba(191, 219, 254, 0.8);
margin: 8px 0;
}
@keyframes uniteelementsCartPulse {
0% {
box-shadow: 0 0 0 0 rgba(43, 93, 245, 0.4);
border-color: var(--uniteelements-primary-500);
}
70% {
box-shadow: 0 0 0 10px rgba(43, 93, 245, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(43, 93, 245, 0);
}
}
.uniteelements-cart-item__media {
width: 64px;
height: 64px;
border-radius: var(--uniteelements-radius-md);
overflow: hidden;
background-color: var(--uniteelements-bg-surface-subtle);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-cart-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uniteelements-cart-item__content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.uniteelements-cart-item__header {
display: flex;
align-items: center;
gap: var(--uniteelements-space-2);
margin-bottom: 2px;
}
.uniteelements-cart-item__title {
font-size: var(--uniteelements-font-size-body);
font-weight: var(--uniteelements-font-weight-semibold);
margin: 0;
line-height: 1.3;
}
.uniteelements-cart-item__title a {
color: var(--uniteelements-text-primary);
text-decoration: none;
}
.uniteelements-cart-item__title a:hover {
color: var(--uniteelements-primary-600);
}
.uniteelements-cart-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--uniteelements-space-2);
}
.uniteelements-cart-item__price {
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-primary-600);
font-size: var(--uniteelements-font-size-body);
}
.uniteelements-cart-item__remove {
background: transparent;
border: none;
color: var(--uniteelements-text-muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--uniteelements-transition);
}
.uniteelements-cart-item__remove:hover {
color: var(--uniteelements-error-600);
background: var(--uniteelements-error-50);
}
/* ==========================================================================
4. Promo Code / Coupons
========================================================================== */
.uniteelements-coupon-wrapper {
margin-top: var(--uniteelements-space-4);
padding-top: var(--uniteelements-space-4);
border-top: 1px dashed var(--uniteelements-border-subtle);
}
.uniteelements-coupon-toggle-btn {
background: transparent;
border: none;
color: var(--uniteelements-primary-600);
font-size: var(--uniteelements-font-size-caption);
font-weight: var(--uniteelements-font-weight-semibold);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
}
.uniteelements-coupon-form {
display: none;
margin-top: var(--uniteelements-space-3);
gap: var(--uniteelements-space-2);
}
.uniteelements-coupon-form.is-active {
display: flex;
}
.uniteelements-applied-coupons {
display: flex;
flex-wrap: wrap;
gap: var(--uniteelements-space-2);
margin-top: var(--uniteelements-space-2);
}
.uniteelements-coupon-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--uniteelements-success-50);
border: 1px solid var(--uniteelements-success-200);
border-radius: var(--uniteelements-radius-pill);
font-size: 11px;
font-weight: 700;
color: var(--uniteelements-success-700);
}
.uniteelements-coupon-tag button {
background: transparent;
border: none;
cursor: pointer;
color: var(--uniteelements-success-700);
font-size: 14px;
line-height: 1;
padding: 0;
}
/* ==========================================================================
5. Cart Summary Footer
========================================================================== */
.uniteelements-cart-drawer__summary {
flex-shrink: 0;
padding: 20px 24px 22px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.04);
}
.uniteelements-cart-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--uniteelements-font-size-body-sm);
color: var(--uniteelements-text-secondary);
margin-bottom: var(--uniteelements-space-2);
}
.uniteelements-cart-summary-row--savings {
color: var(--uniteelements-success-600);
font-weight: var(--uniteelements-font-weight-bold);
}
.uniteelements-cart-summary-row--total {
font-size: var(--uniteelements-font-size-h3);
font-weight: var(--uniteelements-font-weight-bold);
color: var(--uniteelements-text-primary);
margin-top: var(--uniteelements-space-3);
padding-top: var(--uniteelements-space-3);
border-top: 1px solid var(--uniteelements-border-subtle);
}
/* ==========================================================================
6. Empty State
========================================================================== */
.uniteelements-cart-drawer__empty {
padding: var(--uniteelements-space-12) var(--uniteelements-space-6);
text-align: center;
display: none;
}
.uniteelements-cart-drawer__empty-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--uniteelements-space-4);
background: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-500);
border-radius: var(--uniteelements-radius-xl);
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
7. Full Cart Page & WooCommerce Blocks Styling
========================================================================== */
.wp-block-woocommerce-cart,
.wc-block-cart {
max-width: 1340px !important;
margin: 20px auto 60px !important;
padding: 0 clamp(16px, 2.5vw, 32px) !important;
font-family: inherit;
}
.wc-block-cart__form,
.wc-block-cart.is-large {
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
gap: clamp(24px, 3vw, 44px) !important;
align-items: start !important;
}
@media (max-width: 1024px) {
.wc-block-cart__form,
.wc-block-cart.is-large {
grid-template-columns: 1fr !important;
}
}
.wc-block-cart__main {
background: rgba(255, 255, 255, 0.94) !important;
backdrop-filter: blur(28px) !important;
-webkit-backdrop-filter: blur(28px) !important;
border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
border-radius: 24px !important;
padding: clamp(20px, 2.5vw, 36px) !important;
box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.05) !important;
}
.wc-block-cart-items {
width: 100% !important;
border-collapse: collapse !important;
}
.wc-block-cart-items__header th {
padding: 12px 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #64748B !important;
text-transform: uppercase !important;
border-bottom: 1.5px solid #E2E8F0 !important;
}
.wc-block-cart-items__row,
.wc-block-cart-item {
border-bottom: 1px solid #F1F5F9 !important;
padding: 18px 0 !important;
}
.wc-block-cart-item__image {
width: 68px !important;
height: 68px !important;
border-radius: 16px !important;
border: 1px solid #E2E8F0 !important;
overflow: hidden !important;
margin-right: 16px !important;
}
.wc-block-cart-item__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.wc-block-cart-item__product-name {
font-size: 15px !important;
font-weight: 700 !important;
color: #0F172A !important;
text-decoration: none !important;
line-height: 1.4 !important;
display: block !important;
}
.wc-block-cart-item__prices {
font-size: 15px !important;
font-weight: 700 !important;
color: #2563EB !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 6px 0 !important;
}
.wc-block-components-product-price {
font-size: 15px !important;
font-weight: 800 !important;
color: #2563EB !important;
}
.wc-block-components-product-sale-badge {
background: #EFF6FF !important;
color: #1D4ED8 !important;
border: 1px solid rgba(37, 99, 235, 0.2) !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 999px !important;
}
/* Quantity controls in block */
.wc-block-components-quantity-selector {
display: inline-flex !important;
align-items: center !important;
background: #F8FAFC !important;
border: 1.5px solid #CBD5E1 !important;
border-radius: 999px !important;
padding: 2px 6px !important;
height: 36px !important;
}
.wc-block-components-quantity-selector__button {
border: none !important;
background: transparent !important;
color: #475569 !important;
font-weight: 800 !important;
width: 26px !important;
height: 26px !important;
cursor: pointer !important;
border-radius: 50% !important;
transition: all 0.2s !important;
}
.wc-block-components-quantity-selector__button:hover {
background: #E2E8F0 !important;
color: #0F172A !important;
}
.wc-block-components-quantity-selector__input {
border: none !important;
background: transparent !important;
width: 36px !important;
text-align: center !important;
font-weight: 700 !important;
font-size: 14px !important;
color: #0F172A !important;
}
.wc-block-cart-item__remove-link {
color: #DC2626 !important;
font-size: 12px !important;
font-weight: 600 !important;
margin-left: 12px !important;
cursor: pointer !important;
}
/* Sidebar Totals */
.wc-block-cart__sidebar {
background: rgba(255, 255, 255, 0.94) !important;
backdrop-filter: blur(28px) !important;
-webkit-backdrop-filter: blur(28px) !important;
border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
border-radius: 24px !important;
padding: clamp(20px, 2.5vw, 32px) !important;
box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.08) !important;
position: sticky !important;
top: 96px !important;
}
.cart-collaterals .cart_totals {
width: 100% !important;
float: none !important;
}
.cart-collaterals .cart_totals h2 {
font-size: 18px;
font-weight: 800;
color: #0F172A;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid #E2E8F0;
}
.cart-collaterals .shop_table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.cart-collaterals .shop_table th {
padding: 10px 0;
font-size: 13px;
color: #64748B;
text-align: left;
font-weight: 600;
}
.cart-collaterals .shop_table td {
padding: 10px 0;
font-size: 14px;
font-weight: 700;
color: #0F172A;
text-align: right;
}
.cart-collaterals .order-total th,
.cart-collaterals .order-total td {
border-top: 1.5px solid #E2E8F0;
padding-top: 14px;
font-size: 18px;
font-weight: 800;
color: #2B5DF5;
}
.cart-collaterals .wc-proceed-to-checkout .checkout-button,
.wc-block-cart__submit-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 52px !important;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
color: #FFFFFF !important;
font-size: 15.5px !important;
font-weight: 800 !important;
border-radius: 999px !important;
text-decoration: none !important;
box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.4) !important;
transition: all 0.25s ease !important;
border: none !important;
cursor: pointer !important;
margin-top: 18px !important;
}
.cart-collaterals .wc-proceed-to-checkout .checkout-button:hover,
.wc-block-cart__submit-button:hover {
background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 16px 36px -4px rgba(37, 99, 235, 0.5) !important;
}
@media (max-width: 900px) {
.uniteelements-cart-wrapper > div:last-child {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 640px) {
.uniteelements-cart-drawer {
max-width: 100%;
border-left: none;
}
}
/* --- components/checkout.css --- */
/**
* UniteElements Theme - High-Tech Creative Checkout Experience Styles
*
* Highly optimized for desktop, tablet, and mobile devices.
* Styles WooCommerce Gutenberg Blocks (.wc-block-checkout) and Classic WooCommerce Checkout.
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
0. WordPress Admin Bar Isolation & Protection
========================================================================== */
#wpadminbar,
#wpadminbar * {
box-sizing: content-box !important;
}
#wpadminbar #adminbarsearch,
#wpadminbar .admin-bar-search {
display: none !important;
}
#wpadminbar input,
#wpadminbar input[type="text"] {
background: transparent !important;
border: none !important;
min-height: unset !important;
height: auto !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ==========================================================================
1. Universal Checkout Wrapper & Master 2-Column Responsive Grid
========================================================================== */
/* Outer wrappers MUST be block containers, never grids, preventing nested column traps */
.uniteelements-checkout-space {
background: #F8FAFC !important;
width: 100% !important;
min-height: calc(100vh - 80px);
}
/* CRITICAL: Override .uniteelements-container base class max-width (1140px) for checkout context.
The checkout page uses div.uniteelements-container.uniteelements-checkout-container —
the base class limits it to 1140px. We must explicitly expand it to 1280px here. */
.uniteelements-checkout-space .uniteelements-container,
.uniteelements-checkout-space.uniteelements-container,
.uniteelements-checkout-container.uniteelements-container {
max-width: 1280px !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.uniteelements-checkout-page-article,
.uniteelements-checkout-content-wrap,
form.checkout.woocommerce-checkout {
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
box-sizing: border-box !important;
}
/* WooCommerce block checkout wrapper: must NOT have display:block in shared rule —
desktop grid rule below overrides to display:grid. Keep block-display only for mobile. */
.wp-block-woocommerce-checkout,
div.wp-block-woocommerce-checkout.alignwide {
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* ==========================================================================
Master 2-Column Layout on Desktop (>= 1024px)
APPROACH: Work WITH WooCommerce Blocks flex layout — override children directly.
WooCommerce 11.x Blocks sets its own CSS on the parent (display:flex or its own
layout) via its own bundled CSS loaded from the plugin. We cannot reliably force
display:grid on the parent and have it stick. Instead, we target the TWO CHILDREN
directly with explicit flex sizing to override WC's fixed pixel widths.
========================================================================== */
/* Step 1: Ensure parent is a flex row container on desktop */
@media (min-width: 1024px) {
.wp-block-woocommerce-checkout.wc-block-checkout,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: clamp(24px, 3.5vw, 40px) !important;
align-items: flex-start !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* Step 2: Left column (Contact + Billing + Payment) takes all remaining space */
@media (min-width: 1024px) {
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main,
.uniteelements-checkout-main-col,
.uniteelements-checkout-left-col,
.col2-set {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
box-sizing: border-box !important;
container-type: inline-size;
}
}
/* Step 3: Right sidebar (Order Summary) gets fixed 440px */
@media (min-width: 1024px) {
.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar,
.uniteelements-checkout-sidebar-col,
.uniteelements-checkout-right-col,
#order_review,
.woocommerce-checkout-review-order {
flex: 0 0 440px !important;
width: 440px !important;
max-width: 440px !important;
min-width: 0 !important;
position: -webkit-sticky !important;
position: sticky !important;
top: 96px !important;
box-sizing: border-box !important;
z-index: 10 !important;
}
}
/* Ensure inner form inside .wc-block-checkout__main is a single vertical stack, NEVER a grid */
.wc-block-checkout__form {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Tablet & Mobile Collapse (< 1024px) */
@media (max-width: 1023px) {
.wp-block-woocommerce-checkout.wc-block-checkout:not(.is-empty-cart),
.wp-block-woocommerce-checkout:not(.is-empty-cart),
.wc-block-checkout:not(.is-empty-cart),
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.woocommerce-checkout .uniteelements-checkout-2col-layout,
form.checkout.woocommerce-checkout.uniteelements-checkout-2col-layout,
form.checkout.woocommerce-checkout {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
width: 100% !important;
}
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main,
.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar,
.uniteelements-checkout-main-col,
.uniteelements-checkout-left-col,
.uniteelements-checkout-sidebar-col,
.uniteelements-checkout-right-col,
.woocommerce-billing-fields,
.col2-set,
#order_review,
.woocommerce-checkout-review-order {
width: 100% !important;
max-width: 100% !important;
position: static !important;
top: auto !important;
}
}
/* ==========================================================================
2. Main Checkout Column & Step Cards
========================================================================== */
.wc-block-components-checkout-step,
.wc-block-checkout__main > .wc-block-components-checkout-step,
.wc-block-checkout__form > .wc-block-components-checkout-step,
.wc-block-checkout__form .wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-fields-block > .wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-fields-block .wc-block-components-checkout-step,
.uniteelements-checkout-step-card {
background: #FFFFFF !important;
border: 1.5px solid #E2E8F0 !important;
border-radius: 20px !important;
padding: clamp(22px, 2.5vw, 32px) !important;
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.04) !important;
width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 0 !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
position: relative !important;
}
.wc-block-components-checkout-step:focus-within,
.uniteelements-checkout-step-card:focus-within {
border-color: #2563EB !important;
box-shadow: 0 10px 30px -4px rgba(37, 99, 235, 0.12) !important;
}
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__title,
.uniteelements-checkout-step-card h3 {
font-size: 18px !important;
font-weight: 800 !important;
color: #0F172A !important;
margin: 0 0 18px !important;
letter-spacing: -0.02em !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border-bottom: 1px solid #F1F5F9 !important;
padding-bottom: 14px !important;
}
.wc-block-components-checkout-step__container {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
}
/* ==========================================================================
3. Input Fields & Form Controls (Strictly Scoped)
========================================================================== */
.wc-block-components-text-input,
.wc-block-components-combobox,
.wc-block-components-country-input,
.wc-block-components-state-input {
margin-bottom: 0 !important;
width: 100% !important;
}
/* Scoped inputs & controls */
.uniteelements-checkout-space select,
.uniteelements-checkout-space textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
form.checkout.woocommerce-checkout select,
form.checkout.woocommerce-checkout textarea {
background: #F8FAFC !important;
border: 1.5px solid #CBD5E1 !important;
border-radius: 12px !important;
padding: 13px 16px !important;
font-size: 15px !important;
color: #0F172A !important;
font-weight: 600 !important;
width: 100% !important;
min-height: 48px !important;
box-sizing: border-box !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
font-family: inherit !important;
}
/* Scoped Gutenberg Block Text Inputs with Floating Label Integration */
.wc-block-components-text-input {
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wc-block-components-text-input input,
.wc-block-components-text-input input.wc-block-components-text-input__input {
background: #F8FAFC !important;
border: 1.5px solid #CBD5E1 !important;
border-radius: 12px !important;
padding-top: 22px !important;
padding-bottom: 6px !important;
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 14.5px !important;
color: #0F172A !important;
font-weight: 600 !important;
width: 100% !important;
min-height: 52px !important;
box-sizing: border-box !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
font-family: inherit !important;
line-height: 1.4 !important;
}
.wc-block-components-text-input label,
.wc-block-components-text-input label.wc-block-components-text-input__label {
position: absolute !important;
left: 14px !important;
top: 7px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #64748B !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
line-height: 1 !important;
display: block !important;
z-index: 2 !important;
}
/* Classic WooCommerce form labels outside Gutenberg */
.woocommerce-billing-fields .form-row label,
.woocommerce-shipping-fields .form-row label,
.woocommerce-additional-fields .form-row label,
.uniteelements-checkout-space .form-row label {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #475569 !important;
margin-bottom: 6px !important;
display: block !important;
}
.uniteelements-checkout-space input:focus,
.uniteelements-checkout-space select:focus,
.uniteelements-checkout-space textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-state-input select:focus,
form.checkout.woocommerce-checkout input:focus,
form.checkout.woocommerce-checkout select:focus,
form.checkout.woocommerce-checkout textarea:focus {
background: #FFFFFF !important;
border-color: #2563EB !important;
box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14) !important;
outline: none !important;
}
/* ==========================================================================
3.1 Address Form 2-Column Desktop Grid Layout
========================================================================== */
.wc-block-components-address-form {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 16px 14px !important;
justify-content: space-between !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-select-input,
.wc-block-components-address-form .wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-combobox {
box-sizing: border-box !important;
flex: 1 0 calc(50% - 7px) !important;
width: calc(50% - 7px) !important;
min-width: 0 !important;
}
.wc-block-components-address-form .wc-block-components-address-form__first-name,
.wc-block-components-address-form .wc-block-components-address-form__last-name,
.wc-block-components-address-form .wc-block-components-address-form__city,
.wc-block-components-address-form .wc-block-components-address-form__state,
.wc-block-components-address-form .wc-block-components-address-form__postcode,
.wc-block-components-address-form .wc-block-components-address-form__phone {
flex: 1 0 calc(50% - 7px) !important;
width: calc(50% - 7px) !important;
}
.wc-block-components-address-form .wc-block-components-address-form__address_1,
.wc-block-components-address-form .wc-block-components-address-form__address_2,
.wc-block-components-address-form .wc-block-components-address-form__company,
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-checkbox,
.wc-block-components-address-form .wc-block-components-address-form__email {
flex: 0 0 100% !important;
width: 100% !important;
}
@media (max-width: 640px) {
.wc-block-components-address-form {
flex-direction: column !important;
}
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-select-input,
.wc-block-components-address-form .wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-combobox,
.wc-block-components-address-form .wc-block-components-address-form__first-name,
.wc-block-components-address-form .wc-block-components-address-form__last-name,
.wc-block-components-address-form .wc-block-components-address-form__city,
.wc-block-components-address-form .wc-block-components-address-form__state,
.wc-block-components-address-form .wc-block-components-address-form__postcode,
.wc-block-components-address-form .wc-block-components-address-form__phone {
flex: 0 0 100% !important;
width: 100% !important;
}
}
/* Checkbox & Order Notes Alignment (No clipped border icons) */
.wc-block-components-checkbox,
.wc-block-components-checkbox label,
.wc-block-checkout__order-notes .wc-block-components-checkbox label,
.uniteelements-checkout-space .woocommerce-form__label-for-checkbox {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
cursor: pointer !important;
font-size: 13.5px !important;
color: #334155 !important;
font-weight: 600 !important;
width: auto !important;
}
.wc-block-components-checkbox input[type="checkbox"],
.uniteelements-checkout-space input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
border-radius: 6px !important;
border: 1.5px solid #CBD5E1 !important;
accent-color: #2563EB !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
/* ==========================================================================
4. Payment Methods Deck & Radio Controls (PayPal Vertical Wrap Fix)
========================================================================== */
.wc-block-components-payment-methods,
.wc-block-components-radio-control {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
background: #F8FAFC !important;
border: 1.5px solid #E2E8F0 !important;
border-radius: 14px !important;
padding: 14px 18px !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
width: 100% !important;
}
.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option:has(input:checked) {
background: #EFF6FF !important;
border-color: #2563EB !important;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08) !important;
}
/* Radio Control Option Layout (Horizontal Flex Row) */
.wc-block-components-radio-control__option-layout,
.wc-block-components-radio-control-accordion-option label,
.wc-block-components-radio-control__option label {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
margin: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
}
.wc-block-components-radio-control__input {
margin: 0 !important;
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
accent-color: #2563EB !important;
cursor: pointer !important;
}
/* Radio Control Label Group (Title on Left, Icons/Badges on Right) */
.wc-block-components-radio-control__label-group {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex: 1 1 auto !important;
gap: 12px !important;
min-width: 0 !important;
width: 100% !important;
}
/* PayPal / Payment Method Title: Never wrap letter-by-letter */
.wc-block-components-radio-control__label {
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
font-weight: 700 !important;
font-size: 14.5px !important;
color: #0F172A !important;
margin: 0 !important;
display: inline-block !important;
flex-shrink: 0 !important;
line-height: 1.4 !important;
}
/* Payment Method Icons & Badges (PayPal, Stripe, etc.) */
.wc-block-components-radio-control__secondary-label,
.wc-block-components-payment-method-icons {
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
flex-shrink: 0 !important;
max-height: 28px !important;
}
.wc-block-components-payment-method-icons img {
max-height: 26px !important;
width: auto !important;
display: inline-block !important;
}
/* ==========================================================================
5. Order Summary Sidebar Card (Sticky & Liquid Glass)
========================================================================== */
.wc-block-checkout-order-summary,
.wc-block-components-order-summary,
#order_review,
.cart-collaterals {
background: #FFFFFF !important;
border: 1.5px solid #E2E8F0 !important;
border-radius: 22px !important;
padding: clamp(20px, 2.5vw, 28px) !important;
box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.05) !important;
width: 100% !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
}
.wc-block-checkout-order-summary::before,
#order_review::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2563EB 0%, #6366F1 100%);
}
.wc-block-components-order-summary__header,
.wc-block-checkout-order-summary h2 {
font-size: 18px !important;
font-weight: 800 !important;
color: #0F172A !important;
margin: 0 0 16px !important;
letter-spacing: -0.02em !important;
border-bottom: 1px solid #F1F5F9 !important;
padding-bottom: 12px !important;
}
/* Suppress bulky paragraph excerpt & duplicated prices in line items */
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata .wc-block-components-product-price,
.wc-block-components-product-metadata .price {
display: none !important;
}
/* Cart / Order Items in Sidebar */
.wc-block-components-order-summary-item {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 16px 0 !important;
border-bottom: 1px solid #F1F5F9 !important;
width: 100% !important;
}
.wc-block-components-order-summary-item__image {
width: 52px !important;
height: 52px !important;
border-radius: 12px !important;
border: 1px solid #DBEAFE !important;
background: linear-gradient(135deg, #EFF6FF 0%, #F1F5F9 100%) !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
.wc-block-components-order-summary-item__description {
flex: 1 !important;
min-width: 0 !important;
}
.wc-block-components-product-name {
font-size: 14px !important;
font-weight: 800 !important;
color: #0F172A !important;
line-height: 1.35 !important;
margin-bottom: 4px !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Product Line Item Price & Discount Badge in Sidebar */
.wc-block-components-product-price {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin-top: 4px !important;
flex-wrap: wrap !important;
}
.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
text-decoration: line-through !important;
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.wc-block-components-product-price ins,
.wc-block-components-product-price__value {
text-decoration: none !important;
color: #059669 !important;
font-size: 13.5px !important;
font-weight: 700 !important;
}
.wc-block-components-sale-badge {
background: #ECFDF5 !important;
color: #059669 !important;
border: 1px solid #A7F3D0 !important;
border-radius: 6px !important;
padding: 2px 7px !important;
font-size: 11px !important;
font-weight: 700 !important;
display: inline-block !important;
margin-left: 6px !important;
white-space: nowrap !important;
}
/* Line Item Price in Sidebar */
.wc-block-components-order-summary-item__quantity {
font-size: 14.5px !important;
font-weight: 800 !important;
color: #2563EB !important;
font-family: 'SFMono-Regular', Consolas, Menlo, monospace !important;
}
/* Coupon Box */
.wc-block-components-totals-coupon {
margin: 14px 0 !important;
width: 100% !important;
}
.wc-block-components-totals-coupon__form {
display: flex !important;
gap: 8px !important;
align-items: center !important;
}
/* Totals rows */
.wc-block-components-totals-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 0 !important;
font-size: 14px !important;
color: #64748B !important;
font-weight: 600 !important;
}
.wc-block-components-totals-item .wc-block-components-totals-item__value {
font-weight: 700 !important;
color: #0F172A !important;
}
.wc-block-components-totals-footer-item,
.wc-block-components-totals-item--total {
border-top: 2px dashed #E2E8F0 !important;
margin-top: 14px !important;
padding-top: 16px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-item--total .wc-block-components-totals-item__label {
font-size: 16px !important;
font-weight: 800 !important;
color: #0F172A !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-item--total .wc-block-components-totals-item__value {
font-size: 26px !important;
font-weight: 900 !important;
color: #2563EB !important;
letter-spacing: -0.02em !important;
font-family: 'Space Grotesk', 'SFMono-Regular', monospace !important;
}
/* ==========================================================================
6. Primary High-Converting Checkout Actions & Button
========================================================================== */
.wc-block-checkout__actions,
.wc-block-components-checkout-step--actions {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
margin-top: 10px !important;
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
#place_order,
.checkout-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 56px !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
color: #FFFFFF !important;
font-size: 16.5px !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
border: none !important;
cursor: pointer !important;
box-shadow: 0 10px 24px -2px rgba(37, 99, 235, 0.42) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
text-decoration: none !important;
margin-top: 0 !important;
order: 1 !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
#place_order:hover,
.checkout-button:hover {
background: linear-gradient(135deg, #3B6BFC 0%, #1E40AF 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 14px 32px -2px rgba(37, 99, 235, 0.58) !important;
}
.wc-block-checkout__terms,
.wc-block-components-checkout-terms,
.wc-block-checkout__actions_terms {
font-size: 12.5px !important;
color: #64748B !important;
line-height: 1.5 !important;
margin: 0 !important;
text-align: center !important;
order: 2 !important;
}
.wc-block-checkout__terms a,
.wc-block-components-checkout-terms a,
.wc-block-checkout__actions_terms a {
color: #2563EB !important;
text-decoration: underline !important;
font-weight: 700 !important;
}
/* ==========================================================================
7. Alert & Notice Banners
========================================================================== */
.wc-block-components-notice-banner,
.woocommerce-error {
background: rgba(254, 242, 242, 0.95) !important;
backdrop-filter: blur(16px) !important;
border: 1.5px solid rgba(248, 113, 113, 0.45) !important;
border-radius: 16px !important;
padding: 16px 20px !important;
color: #991B1B !important;
font-size: 13.5px !important;
font-weight: 600 !important;
box-shadow: 0 10px 24px -6px rgba(239, 68, 68, 0.12) !important;
margin-bottom: 20px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Success Messages (e.g. ?add-to-cart=xxx item added notice) */
.wc-block-components-notice-banner.is-success,
.woocommerce-message {
background: rgba(236, 253, 245, 0.95) !important;
backdrop-filter: blur(16px) !important;
border: 1.5px solid rgba(110, 231, 183, 0.6) !important;
border-radius: 16px !important;
padding: 16px 20px !important;
color: #065F46 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
box-shadow: 0 10px 24px -6px rgba(16, 185, 129, 0.12) !important;
margin-bottom: 20px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.wc-block-components-notice-banner.is-info,
.woocommerce-info {
background: rgba(239, 246, 255, 0.95) !important;
border-color: rgba(147, 197, 253, 0.5) !important;
color: #1E40AF !important;
box-shadow: 0 10px 24px -6px rgba(37, 99, 235, 0.1) !important;
}
/* ==========================================================================
8. Deep Mobile Responsiveness (< 768px Viewports)
========================================================================== */
@media (max-width: 768px) {
.site-main.uniteelements-checkout-space {
padding: 10px 0 40px !important;
}
.uniteelements-checkout-space .uniteelements-container {
padding: 0 12px !important;
}
.wc-block-components-checkout-step,
.uniteelements-checkout-step-card,
.wc-block-checkout-order-summary {
padding: 20px 16px !important;
border-radius: 16px !important;
}
.uniteelements-checkout-space input[type="text"],
.uniteelements-checkout-space input[type="email"],
.uniteelements-checkout-space input[type="tel"],
.wc-block-components-text-input input,
.woocommerce-checkout input[type="text"] {
font-size: 16px !important; /* Prevents auto-zoom on iOS */
padding: 12px 14px !important;
min-height: 48px !important;
}
.wc-block-components-checkout-place-order-button,
#place_order {
min-height: 52px !important;
font-size: 15px !important;
}
}
/* ==========================================================================
9. Developer Studio Software Entitlements Deck & Security Assurance
========================================================================== */
.uniteelements-checkout-entitlements-deck {
background: #FFFFFF !important;
border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
border-radius: 20px !important;
padding: 22px 24px !important;
margin-top: 20px !important;
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.04) !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.uniteelements-entitlements-header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
border-bottom: 1px solid #F1F5F9 !important;
padding-bottom: 12px !important;
}
.uniteelements-entitlements-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
background: #EFF6FF !important;
color: #2563EB !important;
font-size: 14px !important;
}
.uniteelements-entitlements-header h4 {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
font-size: 13.5px !important;
font-weight: 800 !important;
color: #0F172A !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
text-transform: uppercase !important;
}
.uniteelements-entitlements-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.uniteelements-entitlements-list li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #475569 !important;
line-height: 1.45 !important;
}
.uniteelements-entitlements-list .entitlement-check {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #ECFDF5 !important;
color: #059669 !important;
font-size: 10px !important;
font-weight: 900 !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
.uniteelements-entitlements-security {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding-top: 12px !important;
border-top: 1px dashed #E2E8F0 !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #64748B !important;
letter-spacing: 0.02em !important;
}
/* ==========================================================================
10. Empty Cart State & Zero-State High-Tech Card
========================================================================== */
.wc-block-checkout.is-empty-cart,
.wc-block-checkout-empty,
.woocommerce-checkout .woocommerce-info.cart-empty,
.uniteelements-checkout-empty-state {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
background: #FFFFFF !important;
border: 1.5px solid #E2E8F0 !important;
border-radius: 24px !important;
padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 48px) !important;
max-width: 680px !important;
margin: 40px auto !important;
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
grid-column: 1 / -1 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wc-block-checkout-empty__title,
.uniteelements-checkout-empty-state h2 {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
font-size: clamp(20px, 3vw, 24px) !important;
font-weight: 800 !important;
color: #0F172A !important;
letter-spacing: -0.02em !important;
margin: 0 0 12px !important;
}
.wc-block-checkout-empty__description,
.uniteelements-checkout-empty-state p {
font-size: 15px !important;
color: #64748B !important;
line-height: 1.6 !important;
margin: 0 0 28px !important;
max-width: 440px !important;
}
.wc-block-checkout-empty a,
.wc-block-components-button.wp-element-button,
.uniteelements-checkout-empty-state a.button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
color: #FFFFFF !important;
border-radius: 14px !important;
padding: 14px 32px !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.wc-block-checkout-empty a:hover,
.wc-block-components-button.wp-element-button:hover,
.uniteelements-checkout-empty-state a.button:hover,
.woocommerce-checkout .return-to-shop a.button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
color: #FFFFFF !important;
}
.woocommerce-checkout .woocommerce:has(.cart-empty),
.woocommerce-checkout .cart-empty-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
background: #FFFFFF !important;
border: 1.5px solid #E2E8F0 !important;
border-radius: 24px !important;
padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 48px) !important;
max-width: 680px !important;
margin: 40px auto !important;
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
box-sizing: border-box !important;
}
.woocommerce-checkout .cart-empty {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
font-size: clamp(18px, 2.5vw, 22px) !important;
font-weight: 800 !important;
color: #0F172A !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 0 20px !important;
}
.woocommerce-checkout .cart-empty::before {
display: none !important;
}
.woocommerce-checkout .return-to-shop {
margin: 0 !important;
}
.woocommerce-checkout .return-to-shop a.button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
color: #FFFFFF !important;
border-radius: 14px !important;
padding: 14px 32px !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* --- components/cart.css (Cart Studio & Table Styles) --- */
.uniteelements-cart-studio-wrap {
max-width: 1280px !important;
margin: 24px auto 72px !important;
padding: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Funnel Stepper */
.uniteelements-cart-funnel-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1.5px solid #E2E8F0;
border-radius: 20px;
padding: 16px 28px;
margin-bottom: 32px;
box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
.uniteelements-funnel-step {
display: flex;
align-items: center;
gap: 12px;
opacity: 0.55;
transition: all 0.25s ease;
}
.uniteelements-funnel-step.is-active {
opacity: 1;
}
.uniteelements-funnel-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #F1F5F9;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
font-size: 13.5px;
font-weight: 800;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
flex-shrink: 0;
transition: all 0.25s ease;
border: 1px solid #E2E8F0;
}
.uniteelements-funnel-step.is-active .uniteelements-funnel-num {
background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
color: #FFFFFF;
border-color: #1D4ED8;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), 0 4px 12px rgba(37, 99, 235, 0.35);
}
.uniteelements-funnel-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.uniteelements-funnel-text strong {
font-size: 13.5px;
font-weight: 800;
color: #0F172A;
letter-spacing: -0.01em;
}
.uniteelements-funnel-text span {
font-size: 11.5px;
color: #64748B;
font-weight: 500;
}
.uniteelements-funnel-divider {
flex: 1;
height: 2px;
background: linear-gradient(90deg, #E2E8F0 0%, #CBD5E1 50%, #E2E8F0 100%);
margin: 0 20px;
border-radius: 999px;
}
/* 2-Column Cart Grid Layout on Desktop (> 1024px) */
@media (min-width: 1025px) {
.uniteelements-cart-grid-layout {
display: grid !important;
grid-template-columns: minmax(0, 1.4fr) minmax(360px, 400px) !important;
gap: clamp(24px, 3vw, 36px) !important;
align-items: start !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* Left: Cart Items Card */
.uniteelements-cart-items-card {
background: #FFFFFF;
border: 1.5px solid #E2E8F0;
border-radius: 20px;
padding: clamp(20px, 3vw, 28px);
box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
}
.uniteelements-cart-items-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
border-bottom: 1px solid #E2E8F0;
padding-bottom: 16px;
}
.uniteelements-cart-items-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.uniteelements-cart-items-title {
font-size: clamp(1.2rem, 2.5vw, 1.4rem);
font-weight: 800;
color: #0F172A;
margin: 0;
letter-spacing: -0.02em;
}
.uniteelements-cart-count-badge {
background: #EFF6FF;
color: #1D4ED8;
border: 1px solid #BFDBFE;
font-size: 11.5px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
/* Cart Items Table */
.uniteelements-cart-table {
width: 100%;
border-collapse: collapse;
}
.uniteelements-cart-table th {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #64748B !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 14px 10px !important;
border-bottom: 1.5px solid #E2E8F0 !important;
text-align: left !important;
}
.uniteelements-cart-table th.product-remove,
.uniteelements-cart-table td.product-remove {
width: 36px !important;
max-width: 40px !important;
padding: 14px 6px !important;
text-align: center !important;
}
.uniteelements-cart-table th.product-thumbnail,
.uniteelements-cart-table td.product-thumbnail {
width: 68px !important;
max-width: 72px !important;
padding: 14px 8px !important;
text-align: center !important;
}
.uniteelements-cart-table th.product-name,
.uniteelements-cart-table td.product-name {
width: auto !important;
min-width: 280px !important;
padding: 14px 14px !important;
text-align: left !important;
}
.uniteelements-cart-table th.product-price,
.uniteelements-cart-table td.product-price {
width: 100px !important;
max-width: 110px !important;
padding: 14px 8px !important;
text-align: right !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
}
.uniteelements-cart-table th.product-quantity,
.uniteelements-cart-table td.product-quantity {
width: 95px !important;
max-width: 105px !important;
padding: 14px 6px !important;
text-align: center !important;
}
.uniteelements-cart-table th.product-subtotal,
.uniteelements-cart-table td.product-subtotal {
width: 110px !important;
max-width: 120px !important;
padding: 14px 10px !important;
text-align: right !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
}
.uniteelements-cart-table td {
padding: 16px 10px !important;
vertical-align: middle !important;
}
.uniteelements-cart-row {
border-bottom: 1px solid #F1F5F9;
transition: background 0.15s ease;
}
.uniteelements-cart-row:hover {
background: #F8FAFC;
}
.uniteelements-cart-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: #FEF2F2;
color: #EF4444 !important;
text-decoration: none;
border: 1px solid #FEE2E2;
transition: all 0.18s ease;
}
.uniteelements-cart-remove-btn:hover {
background: #DC2626;
color: #FFFFFF !important;
border-color: #DC2626;
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.uniteelements-cart-thumb-box {
width: 60px;
height: 60px;
border-radius: 14px;
overflow: hidden;
background: #F1F5F9;
border: 1.5px solid #E2E8F0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.uniteelements-cart-thumb-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uniteelements-cart-item-title {
font-size: 15px !important;
font-weight: 700 !important;
color: #0F172A !important;
line-height: 1.4 !important;
letter-spacing: -0.01em !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
.uniteelements-cart-item-title a {
color: #0F172A !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.uniteelements-cart-item-title a:hover {
color: #2563EB !important;
}
.uniteelements-cart-item-badges {
margin-top: 6px !important;
}
.uniteelements-badge-entitlement {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #059669 !important;
background: #ECFDF5 !important;
border: 1px solid #A7F3D0 !important;
padding: 2.5px 8px !important;
border-radius: 6px !important;
white-space: nowrap !important;
}
.uniteelements-cart-unit-price {
font-size: 14.5px;
font-weight: 600;
color: #475569;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.uniteelements-cart-line-total {
font-size: 16px;
font-weight: 800;
color: #1D4ED8;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* Quantity Input Pill */
.uniteelements-cart-qty-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.uniteelements-cart-qty-wrap .quantity {
display: inline-flex !important;
align-items: center !important;
background: #F8FAFC !important;
border: 1.5px solid #CBD5E1 !important;
border-radius: 12px !important;
padding: 2px 4px !important;
transition: all 0.2s ease !important;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.uniteelements-cart-qty-wrap .quantity:focus-within {
border-color: #2563EB !important;
background: #FFFFFF !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
.uniteelements-cart-qty-wrap .quantity input.qty {
width: 52px !important;
height: 34px !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #0F172A !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
box-shadow: none !important;
-moz-appearance: textfield !important;
}
.uniteelements-cart-qty-wrap .quantity input.qty::-webkit-outer-spin-button,
.uniteelements-cart-qty-wrap .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* Action Bar & High-Tech Coupon Console */
.uniteelements-cart-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 22px 0 6px;
}
.uniteelements-coupon-box {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.uniteelements-coupon-input-group {
display: inline-flex;
align-items: center;
background: #F8FAFC;
border: 1.5px solid #CBD5E1;
border-radius: 12px;
padding: 3px 4px 3px 12px;
transition: all 0.2s ease;
gap: 8px;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.uniteelements-coupon-input-group:focus-within {
border-color: #2563EB;
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.uniteelements-coupon-icon {
color: #64748B;
display: flex;
align-items: center;
flex-shrink: 0;
transition: color 0.2s ease;
}
.uniteelements-coupon-input-group:focus-within .uniteelements-coupon-icon {
color: #2563EB;
}
.uniteelements-coupon-input {
min-width: 230px !important;
width: 270px !important;
border: none !important;
background: transparent !important;
padding: 8px 4px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: #0F172A !important;
outline: none !important;
box-shadow: none !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
letter-spacing: 0.02em !important;
}
.uniteelements-coupon-input::placeholder {
color: #94A3B8;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
letter-spacing: normal;
}
.uniteelements-btn-apply-coupon {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: #0F172A !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 9px !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
flex-shrink: 0 !important;
line-height: 1.4 !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}
.uniteelements-btn-apply-coupon:hover {
background: #1E293B !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2) !important;
color: #FFFFFF !important;
}
.uniteelements-btn-update-cart {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
background: #FFFFFF !important;
color: #334155 !important;
border: 1.5px solid #CBD5E1 !important;
border-radius: 12px !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.uniteelements-btn-update-cart:hover {
background: #F8FAFC !important;
border-color: #93C5FD !important;
color: #1D4ED8 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important;
}
/* ==========================================================================
5. Order Settlement & Totals Card
========================================================================== */
.uniteelements-cart-totals-card {
background: #FFFFFF;
border: 1.5px solid #E2E8F0;
border-radius: 20px;
padding: clamp(20px, 3vw, 28px);
box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.05);
position: sticky;
top: 90px;
}
.uniteelements-totals-header {
margin-bottom: 16px;
}
.uniteelements-totals-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #EFF6FF;
color: #1D4ED8;
border: 1px solid #BFDBFE;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 6px;
text-transform: uppercase;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.uniteelements-totals-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2563EB;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.uniteelements-totals-title {
font-size: 19px;
font-weight: 800;
color: #0F172A;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid #E2E8F0;
letter-spacing: -0.02em;
}
.uniteelements-totals-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 18px;
}
.uniteelements-totals-table th {
padding: 10px 0;
font-size: 13.5px;
color: #64748B;
text-align: left;
font-weight: 600;
}
.uniteelements-totals-table td {
padding: 10px 0;
font-size: 14.5px;
font-weight: 700;
color: #0F172A;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.uniteelements-totals-table .cart-discount th,
.uniteelements-totals-table .cart-discount td {
color: #059669;
font-weight: 700;
}
.uniteelements-totals-table .order-total th {
border-top: 2px dashed #E2E8F0;
padding-top: 16px;
font-size: 15px;
font-weight: 800;
color: #0F172A;
}
.uniteelements-totals-table .order-total td {
border-top: 2px dashed #E2E8F0;
padding-top: 16px;
font-size: 26px !important;
font-weight: 900 !important;
color: #2563EB !important;
letter-spacing: -0.02em;
}
.uniteelements-proceed-wrap .checkout-button,
.cart-collaterals .wc-proceed-to-checkout .checkout-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 52px !important;
background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%) !important;
color: #FFFFFF !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
padding: 14px 24px !important;
border-radius: 14px !important;
text-decoration: none !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.45), 0 8px 24px -4px rgba(37, 99, 235, 0.45) !important;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
cursor: pointer !important;
margin-top: 16px !important;
box-sizing: border-box !important;
}
.uniteelements-proceed-wrap .checkout-button:hover,
.cart-collaterals .wc-proceed-to-checkout .checkout-button:hover {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
transform: translateY(-2px) !important;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.55), 0 12px 32px -4px rgba(37, 99, 235, 0.6) !important;
color: #FFFFFF !important;
}
.uniteelements-totals-trust-strip {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #E2E8F0;
}
.uniteelements-trust-item {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 600;
color: #475569;
line-height: 1.35;
}
.uniteelements-trust-item svg {
flex-shrink: 0;
}
@media (max-width: 1024px) {
.uniteelements-cart-studio-wrap .uniteelements-cart-grid-layout,
.uniteelements-cart-grid-layout {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 100% !important;
width: 100% !important;
gap: 24px !important;
}
.uniteelements-cart-items-card,
.uniteelements-cart-sidebar-col,
.cart-collaterals,
.uniteelements-cart-totals-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
position: static !important;
}
}
@media (max-width: 768px) {
.uniteelements-cart-funnel-bar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: 16px;
}
.uniteelements-funnel-divider {
display: none;
}
.uniteelements-cart-table thead {
display: none;
}
.uniteelements-cart-table,
.uniteelements-cart-table tbody,
.uniteelements-cart-row,
.uniteelements-cart-row td {
display: block;
width: 100%;
box-sizing: border-box;
}
.uniteelements-cart-row {
position: relative;
padding: 16px 0;
border-bottom: 1.5px solid #E2E8F0;
}
.uniteelements-cart-row td {
padding: 6px 0;
text-align: left !important;
}
.uniteelements-cart-row td.product-remove {
position: absolute;
top: 14px;
right: 0;
width: auto;
padding: 0;
}
.uniteelements-cart-row td.product-subtotal {
text-align: left !important;
}
.uniteelements-cart-action-bar {
flex-direction: column;
width: 100%;
gap: 12px;
}
.uniteelements-coupon-box {
width: 100%;
}
.uniteelements-coupon-input-group {
width: 100%;
box-sizing: border-box;
display: flex;
}
.uniteelements-coupon-input {
flex: 1 !important;
min-width: 0 !important;
width: 100% !important;
}
.uniteelements-btn-update-cart {
width: 100% !important;
justify-content: center !important;
box-sizing: border-box !important;
}
}
@media (max-width: 480px) {
.uniteelements-cart-studio-wrap {
margin-top: 16px;
margin-bottom: 40px;
}
.uniteelements-cart-items-card,
.uniteelements-cart-totals-card {
padding: 16px 14px;
border-radius: 16px;
}
.uniteelements-coupon-input-group {
flex-direction: column;
padding: 10px;
gap: 10px;
align-items: stretch;
}
.uniteelements-coupon-input {
padding: 6px 4px !important;
}
.uniteelements-btn-apply-coupon {
width: 100% !important;
justify-content: center !important;
}
}
/* --- components/megamenu.css --- */
/**
* UniteElements iOS Liquid Glass Mega Menu & Header Navigation Architecture
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. iOS Liquid Glass Floating Header Capsule
========================================================================== */
.site-header {
position: sticky;
top: 14px;
z-index: 1000;
padding: 0 clamp(12px, 2.5vw, 24px);
margin-bottom: 12px;
background: transparent;
border: none;
box-shadow: none;
transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
top: 14px;
}
.site-header .header-inner {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: 999px;
padding: 6px 14px 6px 20px;
box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08),
0 4px 12px -2px rgba(37, 99, 235, 0.06),
0 0 0 1px rgba(226, 232, 240, 0.6) inset;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1440px;
width: 100%;
margin: 0 auto;
min-height: 58px;
box-sizing: border-box;
transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
position: relative;
}
.site-header.is-scrolled .header-inner {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(226, 232, 240, 0.9) inset;
min-height: 58px;
}
/* ==========================================================================
2. Main Navigation Bar Links
========================================================================== */
.main-navigation {
display: flex;
align-items: center;
}
.main-navigation ul.nav-menu {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
}
.main-navigation li {
position: relative;
}
.main-navigation a.nav-link,
.main-navigation li > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
color: #475569;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
}
.main-navigation li:hover > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.is-active > a {
color: #2B5DF5;
background: rgba(43, 93, 245, 0.08);
}
.main-navigation .nav-chevron {
transition: transform 0.2s ease;
}
.main-navigation li:hover > a .nav-chevron {
transform: rotate(180deg);
}
/* ==========================================================================
3. iOS Liquid Glass Mega Menu Panels
========================================================================== */
.uniteelements-megamenu-panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(32px) saturate(210%);
-webkit-backdrop-filter: blur(32px) saturate(210%);
border: 1.5px solid rgba(255, 255, 255, 0.98);
border-radius: 24px;
padding: 24px;
box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.14),
0 8px 24px -4px rgba(37, 99, 235, 0.08),
0 0 0 1px rgba(226, 232, 240, 0.7);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.22s;
z-index: 1001;
box-sizing: border-box;
}
/* Pseudo arrow / bridge to prevent mouse-leave flickering */
.uniteelements-megamenu-panel::before {
content: '';
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
background: transparent;
}
.main-navigation li:hover > .uniteelements-megamenu-panel,
.main-navigation li:focus-within > .uniteelements-megamenu-panel,
.uniteelements-megamenu-panel.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Panel Widths */
.uniteelements-megamenu-panel--wide {
width: 780px;
}
.uniteelements-megamenu-panel--standard {
width: 620px;
}
.uniteelements-megamenu-panel--compact {
width: 480px;
}
/* Grid Layouts inside Mega Menu */
.uniteelements-megamenu-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 20px;
}
.uniteelements-megamenu-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.uniteelements-megamenu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}
.uniteelements-megamenu-title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94A3B8;
}
.uniteelements-megamenu-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: rgba(43, 93, 245, 0.1);
color: #2B5DF5;
}
/* Interactive Navigation Items */
.uniteelements-megamenu-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
border-radius: 14px;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
background: transparent;
}
.uniteelements-megamenu-item:hover {
background: rgba(241, 245, 249, 0.85);
transform: translateX(3px);
}
.uniteelements-megamenu-icon {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.6));
border: 1px solid rgba(191, 219, 254, 0.6);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #2B5DF5;
transition: all 0.2s ease;
}
.uniteelements-megamenu-item:hover .uniteelements-megamenu-icon {
background: #2B5DF5;
color: #FFFFFF;
transform: scale(1.06);
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.3);
}
.uniteelements-megamenu-item-content {
flex: 1;
min-width: 0;
}
.uniteelements-megamenu-item-title {
font-size: 13.5px;
font-weight: 700;
color: #0F172A;
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 6px;
}
.uniteelements-megamenu-item-desc {
font-size: 11.5px;
color: #64748B;
line-height: 1.4;
}
/* Mega Menu Spotlight Featured Card */
.uniteelements-megamenu-spotlight {
background: linear-gradient(145deg, rgba(248, 250, 253, 0.95), rgba(239, 246, 255, 0.7));
border: 1.5px solid rgba(226, 232, 240, 0.9);
border-radius: 18px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.uniteelements-spotlight-aurora {
position: absolute;
top: -40px;
right: -40px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(43, 93, 245, 0.2) 0%, transparent 70%);
pointer-events: none;
}
.uniteelements-spotlight-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 999px;
background: #ECFDF5;
border: 1px solid #A7F3D0;
color: #059669;
font-size: 10.5px;
font-weight: 700;
margin-bottom: 10px;
width: fit-content;
}
.uniteelements-spotlight-title {
font-size: 14.5px;
font-weight: 800;
color: #0F172A;
margin: 0 0 6px;
line-height: 1.3;
}
.uniteelements-spotlight-desc {
font-size: 12px;
color: #64748B;
line-height: 1.45;
margin: 0 0 14px;
}
.uniteelements-spotlight-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid rgba(226, 232, 240, 0.7);
}
.uniteelements-spotlight-price {
font-size: 15px;
font-weight: 800;
color: #2B5DF5;
}
/* Bottom Telemetry Bar */
.uniteelements-megamenu-footer-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(226, 232, 240, 0.8);
font-size: 11.5px;
color: #64748B;
}
.uniteelements-megamenu-footer-links {
display: flex;
align-items: center;
gap: 14px;
}
.uniteelements-megamenu-footer-links a {
color: #2B5DF5;
font-weight: 700;
text-decoration: none;
}
.uniteelements-megamenu-footer-links a:hover {
text-decoration: underline;
}
/* ==========================================================================
4. Mobile Mega Menu Accordion Styles
========================================================================== */
.uniteelements-mobile-megamenu-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.uniteelements-mobile-accordion-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
color: #0F172A;
background: transparent;
border: none;
width: 100%;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
}
.uniteelements-mobile-accordion-toggle:hover,
.uniteelements-mobile-accordion-toggle.is-active {
background: rgba(241, 245, 249, 0.9);
color: #2B5DF5;
}
.uniteelements-mobile-accordion-icon {
transition: transform 0.2s ease;
}
.uniteelements-mobile-accordion-toggle.is-active .uniteelements-mobile-accordion-icon {
transform: rotate(180deg);
}
.uniteelements-mobile-accordion-content {
display: none;
flex-direction: column;
gap: 4px;
padding: 6px 0 10px 14px;
border-left: 2px solid rgba(43, 93, 245, 0.2);
margin-left: 14px;
}
.uniteelements-mobile-accordion-content.is-open {
display: flex;
}
.uniteelements-mobile-sub-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #475569;
text-decoration: none;
transition: all 0.15s ease;
}
.uniteelements-mobile-sub-link:hover {
color: #2B5DF5;
background: rgba(241, 245, 249, 0.7);
}
/* --- components/product-os.css --- */
/**
* UniteElements Customer Developer OS & My Account Portal Stylesheet
*
* — Ultra-Wide Cinematic Software Architecture
* — Dynamic Mesh Aurora Glow & Cyber Grid
* — Futuristic Glassmorphism Components
* — Native Mobile App Bottom Dock & Drawer System
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Global Account Layout & Atmospheric Backdrop
========================================================================== */
body.woocommerce-account {
background-color: #F8FAFD !important;
color: #0F172A;
font-family: var(--uniteelements-font-family, 'Inter', -apple-system, sans-serif);
}
/* Full Fluid Width Account Canvas */
.woocommerce-account .site-main,
.woocommerce-account #primary,
.woocommerce-account #content,
.site-main--fullwidth {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.uniteelements-account-wrapper {
position: relative;
min-height: 100vh;
width: 100%;
padding: 24px 0 100px;
background-color: #F8FAFD;
overflow-x: hidden;
}
/* Full Width Fluid Container */
.uniteelements-account-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 clamp(16px, 3.5vw, 64px);
box-sizing: border-box;
}
/* Main 2-Column Asymmetric Workspace Layout */
.uniteelements-account-grid {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: clamp(24px, 3vw, 48px);
align-items: start;
width: 100%;
}
@media (max-width: 1024px) {
.uniteelements-account-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.uniteelements-account-sidebar-col {
display: none; /* Mobile switches to App Bar + Bottom Dock */
}
}
/* ==========================================================================
2. Futuristic Sidebar Navigation (Desktop)
========================================================================== */
.uniteelements-account-nav {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 20px;
padding: 20px 16px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
position: sticky;
top: 90px;
}
/* Profile Capsule */
.uniteelements-nav-profile-capsule {
background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(239, 246, 255, 0.6) 100%);
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 16px 14px;
text-align: center;
margin-bottom: 20px;
position: relative;
}
.uniteelements-nav-avatar-wrap {
position: relative;
width: 52px;
height: 52px;
margin: 0 auto 10px;
}
.uniteelements-nav-avatar-ring {
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
background: linear-gradient(135deg, #2B5DF5 0%, #8B5CF6 100%);
box-shadow: 0 4px 14px rgba(43, 93, 245, 0.25);
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-nav-avatar-img,
.uniteelements-nav-avatar-ring img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #FFFFFF;
background: #FFFFFF;
}
.uniteelements-nav-status-indicator {
position: absolute;
bottom: 1px;
right: 1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #10B981;
border: 2px solid #FFFFFF;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.uniteelements-nav-user-name {
font-size: 14.5px;
font-weight: 800;
color: #0F172A;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-nav-user-email {
font-size: 11.5px;
color: #64748B;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-nav-user-meta-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.uniteelements-nav-tier-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(43, 93, 245, 0.1);
border: 1px solid rgba(43, 93, 245, 0.2);
color: #2B5DF5;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.uniteelements-nav-member-id {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 10.5px;
font-weight: 600;
color: #94A3B8;
}
/* Nav Scroll Area */
.uniteelements-nav-scroll-area {
max-height: calc(100vh - 380px);
overflow-y: auto;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: #CBD5E1 transparent;
}
.uniteelements-nav-group {
margin-bottom: 18px;
}
.uniteelements-nav-group-title {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94A3B8;
padding: 0 10px 6px;
}
.uniteelements-nav-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.uniteelements-nav-items li a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
color: #475569;
font-size: 13px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
transition: all 0.15s ease;
position: relative;
}
.uniteelements-nav-icon {
display: flex;
align-items: center;
justify-content: center;
color: #64748B;
transition: color 0.15s ease;
flex-shrink: 0;
}
.uniteelements-nav-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-nav-count-badge {
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
background: #F1F5F9;
color: #475569;
margin-left: auto;
}
.uniteelements-nav-count-badge.uniteelements-badge--active {
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
.uniteelements-nav-items li a:hover {
color: #2B5DF5;
background: #F1F5FD;
}
.uniteelements-nav-items li a:hover .uniteelements-nav-icon {
color: #2B5DF5;
}
.uniteelements-nav-items li.is-active a {
color: #2B5DF5;
background: #EFF6FF;
font-weight: 700;
box-shadow: inset 3px 0 0 #2B5DF5;
}
.uniteelements-nav-items li.is-active a .uniteelements-nav-icon {
color: #2B5DF5;
}
.uniteelements-nav-logout-btn {
color: #EF4444 !important;
}
.uniteelements-nav-logout-btn .uniteelements-nav-icon {
color: #EF4444 !important;
}
.uniteelements-nav-logout-btn:hover {
background: #FEF2F2 !important;
}
/* Sidebar Bottom Help Box */
.uniteelements-nav-help-card {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
border-radius: 14px;
padding: 14px;
margin-top: 14px;
color: #FFFFFF;
}
.uniteelements-nav-help-glow {
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(43, 93, 245, 0.4) 0%, transparent 70%);
filter: blur(20px);
pointer-events: none;
}
.uniteelements-nav-help-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.uniteelements-nav-help-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-nav-help-card__title {
font-size: 12.5px;
font-weight: 800;
color: #FFFFFF;
line-height: 1.2;
}
.uniteelements-nav-help-card__desc {
font-size: 10.5px;
color: #94A3B8;
}
.uniteelements-nav-help-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 7px 10px;
border-radius: 8px;
background: linear-gradient(135deg, #2B5DF5 0%, #1D4ED8 100%);
color: #FFFFFF;
font-size: 11.5px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.3);
transition: opacity 0.15s ease;
}
.uniteelements-nav-help-action-btn:hover {
opacity: 0.92;
color: #FFFFFF;
}
/* ==========================================================================
3. Executive OS Command Center Deck (Dashboard Overview)
========================================================================== */
.uniteelements-os-hero-deck {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: 24px;
padding: clamp(20px, 4vw, 32px);
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.02);
margin-bottom: 24px;
}
.uniteelements-os-hero-aurora {
position: absolute;
top: -60px;
right: -40px;
width: 400px;
height: 300px;
background: radial-gradient(ellipse, rgba(43, 93, 245, 0.15) 0%, rgba(139, 92, 246, 0.08) 50%, transparent 70%);
filter: blur(50px);
pointer-events: none;
}
.uniteelements-os-hero-topline {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 8px;
}
.uniteelements-os-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(43, 93, 245, 0.08);
border: 1px solid rgba(43, 93, 245, 0.2);
color: #2B5DF5;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.uniteelements-os-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2B5DF5;
box-shadow: 0 0 6px #2B5DF5;
animation: pulseLive 2s infinite ease-in-out;
}
@keyframes pulseLive {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.uniteelements-os-engine-version {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 11.5px;
font-weight: 600;
color: #94A3B8;
}
.uniteelements-os-hero-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}
.uniteelements-os-hero-title {
font-size: clamp(1.5rem, 3.5vw, 2.125rem);
font-weight: 900;
letter-spacing: -0.03em;
color: #0F172A;
margin: 0 0 6px;
line-height: 1.15;
}
.uniteelements-os-hero-sub {
font-size: clamp(0.875rem, 1.8vw, 0.95rem);
color: #475569;
margin: 0;
line-height: 1.6;
max-width: 680px;
}
.uniteelements-os-3d-emblem {
width: 72px;
height: 72px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(43, 93, 245, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
border: 1px solid rgba(43, 93, 245, 0.25);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(43, 93, 245, 0.12);
flex-shrink: 0;
}
@media (max-width: 640px) {
.uniteelements-os-hero-emblem-wrap {
display: none;
}
}
/* ==========================================================================
4. Dynamic 4-Column KPI Grid
========================================================================== */
/* ==========================================================================
4. Dynamic 4-Column KPI Grid
========================================================================== */
.uniteelements-os-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1100px) {
.uniteelements-os-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
@media (max-width: 520px) {
.uniteelements-os-kpi-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
.uniteelements-os-kpi-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
min-width: 0;
}
.uniteelements-os-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
border-color: #CBD5E1;
}
.uniteelements-kpi-icon-wrap {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-kpi--blue .uniteelements-kpi-icon-wrap { background: rgba(43, 93, 245, 0.1); color: #2B5DF5; }
.uniteelements-kpi--emerald .uniteelements-kpi-icon-wrap { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.uniteelements-kpi--purple .uniteelements-kpi-icon-wrap { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
.uniteelements-kpi--amber .uniteelements-kpi-icon-wrap { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.uniteelements-kpi-num {
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
font-weight: 900;
color: #0F172A;
line-height: 1.1;
margin-bottom: 4px;
letter-spacing: -0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-kpi--emerald .uniteelements-kpi-num { color: #059669; }
.uniteelements-kpi--purple .uniteelements-kpi-num { color: #7C3AED; }
.uniteelements-kpi--blue .uniteelements-kpi-num { color: #2B5DF5; }
.uniteelements-kpi-title {
font-size: 12px;
font-weight: 700;
color: #334155;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-kpi-subtext {
font-size: 10.5px;
color: #94A3B8;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
5. Quick Action Launcher Strip
========================================================================== */
.uniteelements-os-quick-launcher {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 28px;
}
@media (max-width: 1100px) {
.uniteelements-os-quick-launcher {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
@media (max-width: 520px) {
.uniteelements-os-quick-launcher {
grid-template-columns: 1fr;
gap: 8px;
}
}
.uniteelements-launcher-btn {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 14px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
transition: all 0.2s ease;
min-width: 0;
}
.uniteelements-launcher-btn:hover {
border-color: #2B5DF5;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(43, 93, 245, 0.08);
}
.uniteelements-launcher-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-launcher-text {
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
min-width: 0;
}
.uniteelements-launcher-text strong {
font-size: 13px;
font-weight: 800;
color: #0F172A;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uniteelements-launcher-text span {
font-size: 11px;
color: #64748B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
6. Content Layout Grid (Products Feed + Health Matrix)
========================================================================== */
.uniteelements-os-content-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items: start;
}
@media (max-width: 1200px) {
.uniteelements-os-content-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
.uniteelements-os-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.uniteelements-os-section-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.uniteelements-os-section-title {
font-size: 18px;
font-weight: 900;
color: #0F172A;
margin: 0;
letter-spacing: -0.02em;
}
.uniteelements-os-section-badge {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: #EFF6FF;
color: #2B5DF5;
}
.uniteelements-os-view-all-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 700;
color: #2B5DF5;
text-decoration: none;
transition: gap 0.15s ease;
}
.uniteelements-os-view-all-link:hover {
gap: 7px;
}
/* Product Cards Stack */
.uniteelements-os-products-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.uniteelements-os-product-item-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
transition: all 0.2s ease;
}
.uniteelements-os-product-item-card:hover {
border-color: #2B5DF5;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(43, 93, 245, 0.08);
}
.uniteelements-os-item-left {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 240px;
}
.uniteelements-os-item-emblem {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
color: #2B5DF5;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-os-item-badge-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.uniteelements-os-cat-pill {
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
background: rgba(43, 93, 245, 0.08);
color: #2B5DF5;
}
.uniteelements-os-ver-pill {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 6px;
background: #F1F5F9;
color: #475569;
}
.uniteelements-os-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
color: #059669;
background: rgba(16, 185, 129, 0.1);
padding: 2px 7px;
border-radius: 999px;
}
.dot-live {
width: 5px;
height: 5px;
border-radius: 50%;
background: #10B981;
}
.uniteelements-os-item-name {
font-size: 15px;
font-weight: 800;
margin: 0 0 4px;
line-height: 1.3;
}
.uniteelements-os-item-name a {
color: #0F172A;
text-decoration: none;
transition: color 0.15s ease;
}
.uniteelements-os-item-name a:hover {
color: #2B5DF5;
}
.uniteelements-os-item-specs {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: #64748B;
flex-wrap: wrap;
}
.uniteelements-os-btn-workspace {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 10px;
background: #EFF6FF;
border: 1px solid #BFDBFE;
color: #2B5DF5;
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s ease;
}
.uniteelements-os-btn-workspace:hover {
background: #2B5DF5;
border-color: #2B5DF5;
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(43, 93, 245, 0.25);
}
@media (max-width: 640px) {
.uniteelements-os-product-item-card {
flex-direction: column;
align-items: stretch;
}
.uniteelements-os-btn-workspace {
width: 100%;
}
}
/* Empty State Card */
.uniteelements-os-empty-state-card {
background: #FFFFFF;
border: 1px dashed #CBD5E1;
border-radius: 20px;
padding: 48px 24px;
text-align: center;
}
.uniteelements-os-empty-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: #EFF6FF;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.uniteelements-os-empty-title {
font-size: 18px;
font-weight: 800;
color: #0F172A;
margin: 0 0 8px;
}
.uniteelements-os-empty-desc {
font-size: 13.5px;
color: #64748B;
max-width: 440px;
margin: 0 auto 20px;
line-height: 1.6;
}
.uniteelements-os-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
border-radius: 12px;
background: linear-gradient(135deg, #2B5DF5 0%, #1D4ED8 100%);
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 18px rgba(43, 93, 245, 0.28);
transition: opacity 0.15s ease;
}
.uniteelements-os-btn-primary:hover {
opacity: 0.92;
color: #FFFFFF;
}
/* Side Widgets */
.uniteelements-os-side-widget {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 18px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
}
.uniteelements-os-side-widget.uniteelements-widget--glow {
background: linear-gradient(135deg, #FDF4FF 0%, #FFFFFF 100%);
border-color: #E9D5FF;
}
.uniteelements-widget-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.uniteelements-widget-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 800;
color: #0F172A;
}
.uniteelements-status-healthy {
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
background: #ECFDF5;
color: #059669;
}
.uniteelements-telemetry-rows {
display: flex;
flex-direction: column;
gap: 10px;
}
.uniteelements-telemetry-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #F1F5F9;
}
.uniteelements-telemetry-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.uniteelements-tel-label {
color: #64748B;
font-weight: 500;
}
.uniteelements-tel-val {
font-weight: 700;
color: #0F172A;
}
.uniteelements-widget-desc {
font-size: 12.5px;
color: #64748B;
margin: 0 0 14px;
line-height: 1.5;
}
.uniteelements-widget-cta-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 9px 12px;
border-radius: 10px;
background: #7C3AED;
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
transition: opacity 0.15s ease;
}
.uniteelements-widget-cta-btn:hover {
opacity: 0.92;
color: #FFFFFF;
}
/* ==========================================================================
7. Advanced Mobile App Mode & Floating Dock (≤1024px)
========================================================================== */
.uniteelements-account-mobile-appbar {
display: none;
}
.uniteelements-account-mobile-pills {
display: none;
}
.uniteelements-account-app-dock {
display: none;
}
.uniteelements-account-drawer-overlay,
.uniteelements-account-drawer-sheet {
display: none;
}
@media (max-width: 1024px) {
/* Top App Bar */
.uniteelements-account-mobile-appbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid #E2E8F0;
border-radius: 16px;
margin-bottom: 12px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.uniteelements-account-mobile-user {
display: flex;
align-items: center;
gap: 10px;
}
.uniteelements-account-mobile-avatar {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
}
.uniteelements-account-mobile-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid #2B5DF5;
}
.uniteelements-mobile-status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #10B981;
border: 1.5px solid #FFFFFF;
}
.uniteelements-mobile-greeting {
font-size: 13.5px;
font-weight: 800;
color: #0F172A;
line-height: 1.2;
}
.uniteelements-mobile-badge-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9.5px;
font-weight: 700;
color: #2B5DF5;
text-transform: uppercase;
}
.uniteelements-account-mobile-menu-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 10px;
background: #F1F5F9;
border: 1px solid #E2E8F0;
color: #334155;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
/* Horizontal Scrollable Pills */
.uniteelements-account-mobile-pills {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
margin-bottom: 16px;
scrollbar-width: none;
}
.uniteelements-account-mobile-pills::-webkit-scrollbar {
display: none;
}
.uniteelements-pill-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid #E2E8F0;
color: #475569;
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
transition: all 0.15s ease;
}
.uniteelements-pill-tab.is-active {
background: #2B5DF5;
border-color: #2B5DF5;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.3);
}
.uniteelements-pill-tab.is-active svg {
stroke: #FFFFFF;
}
/* Floating Bottom Dock (Native App Style) */
.uniteelements-account-app-dock {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
height: 64px;
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
z-index: 9999;
padding: 0 8px;
}
.uniteelements-dock-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #94A3B8;
text-decoration: none;
background: transparent;
border: none;
padding: 6px 10px;
border-radius: 12px;
cursor: pointer;
font-size: 10px;
font-weight: 600;
transition: color 0.15s ease;
flex: 1;
}
.uniteelements-dock-btn.is-active {
color: #2B5DF5;
}
.uniteelements-dock-btn.is-active .uniteelements-dock-icon svg {
stroke: #2B5DF5;
}
.uniteelements-dock-icon {
display: flex;
align-items: center;
justify-content: center;
}
/* Bottom Sheet Drawer */
.uniteelements-account-drawer-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
z-index: 10000;
}
.uniteelements-account-drawer-overlay.is-open {
display: block;
}
.uniteelements-account-drawer-sheet {
display: flex;
flex-direction: column;
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 80vh;
background: #FFFFFF;
border-radius: 24px 24px 0 0;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
z-index: 10001;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
padding: 16px 20px 40px;
}
.uniteelements-account-drawer-sheet.is-open {
transform: translateY(0);
}
.uniteelements-drawer-handle-bar {
width: 40px;
height: 4px;
border-radius: 2px;
background: #CBD5E1;
margin: 0 auto 14px;
}
.uniteelements-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #E2E8F0;
}
.uniteelements-drawer-title {
font-size: 16px;
font-weight: 800;
color: #0F172A;
}
.uniteelements-drawer-close-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #F1F5F9;
border: none;
font-size: 18px;
color: #64748B;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.uniteelements-drawer-body {
overflow-y: auto;
flex: 1;
}
}
/* ==========================================================================
Universal WooCommerce Native Design Overrides (White Crystal Glass Suite)
========================================================================== */
/* 1. Notices & Alerts */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-radius: 16px !important;
padding: 16px 20px 16px 52px !important;
margin: 0 0 24px !important;
position: relative !important;
font-family: inherit !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
list-style: none !important;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}
.woocommerce-message {
border: 1px solid rgba(16, 185, 129, 0.3) !important;
border-left: 4px solid #10B981 !important;
color: #065F46 !important;
}
.woocommerce-message::before {
content: "✓" !important;
position: absolute !important;
left: 18px !important;
top: 14px !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: rgba(16, 185, 129, 0.15) !important;
color: #10B981 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 900 !important;
font-size: 13px !important;
}
.woocommerce-info {
border: 1px solid rgba(43, 93, 245, 0.3) !important;
border-left: 4px solid #2B5DF5 !important;
color: #1E40AF !important;
}
.woocommerce-info::before {
content: "ℹ" !important;
position: absolute !important;
left: 18px !important;
top: 14px !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: rgba(43, 93, 245, 0.12) !important;
color: #2B5DF5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 900 !important;
font-size: 13px !important;
}
.woocommerce-error {
border: 1px solid rgba(239, 68, 68, 0.3) !important;
border-left: 4px solid #EF4444 !important;
color: #991B1B !important;
}
.woocommerce-error li {
margin: 0 !important;
padding: 2px 0 !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
float: right !important;
padding: 6px 14px !important;
border-radius: 8px !important;
background: #0F172A !important;
color: #FFFFFF !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
border: none !important;
margin-top: -2px !important;
transition: background 0.15s ease !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
background: #2B5DF5 !important;
}
/* 2. Tables (Orders, Downloads, Addresses) */
table.shop_table,
table.woocommerce-orders-table,
table.woocommerce-table--order-details {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid #E2E8F0 !important;
border-radius: 18px !important;
background: #FFFFFF !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02) !important;
margin-bottom: 24px !important;
}
table.shop_table th,
table.woocommerce-orders-table th,
table.woocommerce-table--order-details th {
background: #F8FAFC !important;
color: #475569 !important;
font-size: 11.5px !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
padding: 14px 18px !important;
border-bottom: 1px solid #E2E8F0 !important;
border-top: none !important;
}
table.shop_table td,
table.woocommerce-orders-table td,
table.woocommerce-table--order-details td {
padding: 14px 18px !important;
border-bottom: 1px solid #F1F5F9 !important;
border-top: none !important;
color: #334155 !important;
font-size: 13.5px !important;
vertical-align: middle !important;
}
table.shop_table tr:last-child td,
table.woocommerce-orders-table tr:last-child td {
border-bottom: none !important;
}
table.shop_table tr:hover td,
table.woocommerce-orders-table tr:hover td {
background: rgba(248, 250, 252, 0.8) !important;
}
/* 3. Native Form Controls (Inputs, Selects, Checkboxes) */
.woocommerce form .form-row {
margin-bottom: 18px !important;
padding: 0 !important;
}
.woocommerce form .form-row label {
display: block !important;
font-size: 12.5px !important;
font-weight: 700 !important;
color: #1E293B !important;
margin-bottom: 6px !important;
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
width: 100% !important;
border-radius: 12px !important;
border: 1.5px solid #E2E8F0 !important;
background: #F8FAFC !important;
color: #0F172A !important;
font-size: 13.5px !important;
font-weight: 600 !important;
font-family: inherit !important;
padding: 12px 16px !important;
transition: all 0.15s ease !important;
box-sizing: border-box !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) inset !important;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
background: #FFFFFF !important;
border-color: #2B5DF5 !important;
box-shadow: 0 0 0 4px rgba(43, 93, 245, 0.14) !important;
outline: none !important;
}
/* 4. Native Buttons */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 22px !important;
border-radius: 12px !important;
font-size: 13.5px !important;
font-weight: 800 !important;
font-family: inherit !important;
text-decoration: none !important;
cursor: pointer !important;
border: none !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
background: linear-gradient(135deg, #2B5DF5 0%, #1D4ED8 100%) !important;
color: #FFFFFF !important;
box-shadow: 0 6px 18px rgba(43, 93, 245, 0.3) !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
transform: translateY(-1px) !important;
box-shadow: 0 10px 24px rgba(43, 93, 245, 0.4) !important;
background: linear-gradient(135deg, #3B6BFC 0%, #1E40AF 100%) !important;
}
/* 5. Pagination */
.woocommerce-pagination,
.woocommerce-Pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin-top: 24px !important;
}
.woocommerce-pagination ul,
.woocommerce-Pagination ul {
display: flex !important;
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.woocommerce-pagination ul li,
.woocommerce-Pagination ul li {
border: none !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.woocommerce-Pagination ul li a,
.woocommerce-Pagination ul li span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 10px !important;
border-radius: 10px !important;
border: 1px solid #E2E8F0 !important;
background: #FFFFFF !important;
color: #475569 !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.15s ease !important;
}
.woocommerce-pagination ul li span.current,
.woocommerce-Pagination ul li span.current {
background: #2B5DF5 !important;
color: #FFFFFF !important;
border-color: #2B5DF5 !important;
box-shadow: 0 4px 12px rgba(43, 93, 245, 0.3) !important;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-Pagination ul li a:hover {
border-color: #2B5DF5 !important;
color: #2B5DF5 !important;
}
/* --- homepage.css --- */
/**
* UniteElements Theme - Homepage & Platform Layouts
*
* @package UniteElements_Theme
* @author Jyotirmay Ray
*/
/* ==========================================================================
1. Header Utilities & Controls
========================================================================== */
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--uniteelements-space-4);
}
.site-branding .site-title {
font-family: var(--uniteelements-font-family);
font-size: var(--uniteelements-font-size-h3);
font-weight: var(--uniteelements-font-weight-bold);
letter-spacing: var(--uniteelements-letter-spacing-tight);
margin: 0;
}
.site-branding .site-title a {
color: var(--uniteelements-text-primary);
display: inline-flex;
align-items: center;
gap: var(--uniteelements-space-2);
}
.site-branding .site-title a svg {
width: 26px;
height: 26px;
fill: var(--uniteelements-primary-500);
}
.main-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation a {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
color: #475569;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.main-navigation a:hover {
color: #2563EB;
background: rgba(239, 246, 255, 0.9);
}
.main-navigation li.current-menu-item a,
.main-navigation li.current_page_item a,
.main-navigation a.is-active {
color: #2563EB;
background: #EFF6FF;
font-weight: 700;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--uniteelements-space-3);
}
.header-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 40px;
border-radius: var(--uniteelements-radius-full);
background-color: rgba(241, 245, 249, 0.75);
border: 1px solid rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--uniteelements-text-secondary);
cursor: pointer;
transition: var(--uniteelements-transition);
}
.header-action-btn:hover {
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-600);
border-color: rgba(43, 93, 245, 0.3);
transform: scale(1.05);
}
.header-action-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* ── Notification Bell – prevent fill:currentColor from corrupting stroke-only paths ── */
.ue-notif-bell-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.ue-notif-bell-btn .ue-bell-svg,
.ue-notif-bell-btn svg.ue-bell-svg {
width: 19px !important;
height: 19px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.ue-bell-pulse {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
background: #EF4444;
border-radius: 50%;
border: 2px solid #FFFFFF;
animation: ue-bell-pulse-anim 2s infinite;
}
.ue-bell-count {
position: absolute;
top: -2px;
right: -2px;
min-width: 17px;
height: 17px;
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
color: #FFFFFF;
font-size: 9px;
font-weight: 800;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 1.5px solid #FFFFFF;
line-height: 1;
}
@keyframes ue-bell-pulse-anim {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
.uniteelements-cart-badge {
position: absolute;
top: -2px;
right: -2px;
background: linear-gradient(135deg, #2B5DF5 0%, #1D44DB 100%);
color: #FFFFFF;
font-size: 10px;
font-weight: var(--uniteelements-font-weight-bold);
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: var(--uniteelements-radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(43, 93, 245, 0.4);
border: 1.5px solid #FFFFFF;
}
.header-mobile-toggle {
display: none;
}
/* Advanced Mobile Navigation Item */
.uniteelements-mobile-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 14px;
text-decoration: none;
background: transparent;
transition: var(--uniteelements-transition);
}
.uniteelements-mobile-menu-item:hover,
.uniteelements-mobile-menu-item:focus-visible {
background: rgba(239, 246, 255, 0.85);
transform: translateX(4px);
}
@media (max-width: 960px) {
.main-navigation {
display: none;
}
.header-mobile-toggle {
display: inline-flex;
}
.site-header {
height: 64px;
}
.site-branding .site-title a {
font-size: 1.15rem;
}
}
/* ==========================================================================
2. Search Modal
========================================================================== */
.uniteelements-search-modal .uniteelements-modal {
max-width: 620px;
border-radius: 24px;
box-shadow: 0 30px 80px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 1) inset;
}
.uniteelements-search-modal .uniteelements-modal__header {
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.uniteelements-search-modal .uniteelements-modal__title {
font-size: 1.125rem;
font-weight: 700;
color: #0F172A;
letter-spacing: -0.01em;
}
.uniteelements-search-modal .uniteelements-modal__close {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #64748B;
transition: all 0.15s ease;
}
.uniteelements-search-modal .uniteelements-modal__close:hover {
background: #F1F5F9;
color: #0F172A;
}
.uniteelements-search-modal .uniteelements-modal__body {
padding: 24px;
}
.uniteelements-search-form {
display: flex;
align-items: center;
position: relative;
width: 100%;
}
.uniteelements-search-input {
height: 54px;
width: 100%;
padding-left: 50px;
padding-right: 16px;
font-size: 1rem;
font-weight: 500;
background: #FFFFFF;
border: 1.5px solid #CBD5E1;
border-radius: 16px;
color: #0F172A;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
transition: all 0.2s ease;
}
.uniteelements-search-input::placeholder {
color: #94A3B8;
font-weight: 400;
}
.uniteelements-search-input:focus {
border-color: #2B5DF5;
box-shadow: 0 0 0 4px rgba(43, 93, 245, 0.15);
outline: none;
}
.uniteelements-search-icon {
position: absolute;
left: 18px;
color: #64748B;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-search-quicklinks {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.uniteelements-search-quicklinks span {
font-size: 13px;
font-weight: 700;
color: #64748B;
}
.uniteelements-search-quicklinks a.uniteelements-badge {
background: #F1F5F9;
color: #334155;
font-size: 12px;
font-weight: 600;
border: 1px solid #E2E8F0;
border-radius: 999px;
padding: 5px 14px;
text-decoration: none;
transition: all 0.15s ease;
}
.uniteelements-search-quicklinks a.uniteelements-badge:hover {
background: #EFF6FF;
color: #2B5DF5;
border-color: #BFDBFE;
transform: translateY(-1px);
}
/* ==========================================================================
3. Hero & Product Ecosystem Visual (High-Tech Developer Marketplace)
========================================================================== */
.uniteelements-hero-section {
padding: var(--uniteelements-space-10) 0 var(--uniteelements-space-12);
position: relative;
background-color: transparent;
overflow: hidden;
border-bottom: 1px solid var(--uniteelements-border-subtle);
}
@media (min-width: 768px) {
.uniteelements-hero-section {
padding: var(--uniteelements-space-12) 0 var(--uniteelements-space-16);
}
}
@media (min-width: 1024px) {
.uniteelements-hero-section {
padding: var(--uniteelements-space-14) 0 var(--uniteelements-space-20);
}
}
/* Precision Developer Dot Grid & Blueprint Background Matrix */
.uniteelements-hero-bg-grid,
.uniteelements-hero-tech-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
radial-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px);
background-size: 36px 36px, 36px 36px, 18px 18px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 25%, #000000 40%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 25%, #000000 40%, transparent 90%);
pointer-events: none;
z-index: 1;
}
/* Radiant Ambient Aurora Glow */
.uniteelements-hero-aurora,
.uniteelements-hero-aurora-glow {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 75% 20%, rgba(56, 189, 248, 0.18) 0%, rgba(43, 93, 245, 0.12) 35%, transparent 65%),
radial-gradient(circle at 20% 45%, rgba(129, 140, 248, 0.14) 0%, rgba(43, 93, 245, 0.06) 40%, transparent 60%),
radial-gradient(circle at 50% 0%, rgba(219, 234, 254, 0.65) 0%, transparent 55%);
filter: blur(50px);
pointer-events: none;
z-index: 1;
}
.uniteelements-hero-ambient-orb {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 1;
opacity: 0.5;
}
.uniteelements-orb-left {
top: -150px;
left: -100px;
background: radial-gradient(circle, rgba(43, 93, 245, 0.2) 0%, transparent 70%);
}
.uniteelements-orb-right {
top: 50px;
right: -150px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%);
}
.uniteelements-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-10);
align-items: center;
position: relative;
z-index: 2;
}
@media (min-width: 1024px) {
.uniteelements-hero-grid {
grid-template-columns: 1.1fr 0.9fr;
gap: var(--uniteelements-space-12);
}
}
.uniteelements-hero-content {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-4);
position: relative;
z-index: 2;
}
/* High-Tech Terminal Capsule Badge */
.uniteelements-hero-badge-wrap {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.uniteelements-hero-badge,
.uniteelements-tech-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(43, 93, 245, 0.25);
border-radius: 9999px;
padding: 6px 14px;
box-shadow: 0 4px 16px rgba(43, 93, 245, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: all 0.2s ease;
}
.uniteelements-hero-badge:hover,
.uniteelements-tech-pill:hover {
border-color: rgba(43, 93, 245, 0.45);
box-shadow: 0 6px 20px rgba(43, 93, 245, 0.14);
}
.uniteelements-hero-ping,
.uniteelements-live-ping {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
animation: uniteelementsPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
flex-shrink: 0;
}
.uniteelements-hero-badge-txt,
.uniteelements-tech-pill__label {
font-size: 11px;
font-weight: 800;
color: #1D44DB;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.uniteelements-hero-badge-divider,
.uniteelements-tech-pill__divider {
color: #94A3B8;
font-size: 11px;
font-weight: 700;
}
.uniteelements-hero-badge-mono,
.uniteelements-tech-pill__mono {
font-family: var(--uniteelements-font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 700;
color: #0284C7;
letter-spacing: 0.04em;
}
/* Hero Main Title & Gradient Headline */
.uniteelements-hero-title,
.uniteelements-hero-headline {
font-size: clamp(2.3rem, 4.8vw, 3.8rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.04em;
color: #0F172A;
margin: 0;
overflow-wrap: break-word;
}
.uniteelements-hero-gradient-text {
background: linear-gradient(135deg, #1E40AF 0%, #2B5DF5 45%, #0284C7 85%, #06B6D4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.uniteelements-hero-subhead,
.uniteelements-hero-subheadline {
font-size: clamp(0.98rem, 1.8vw, 1.125rem);
color: #475569;
line-height: 1.65;
max-width: 580px;
margin: 0;
font-weight: 400;
}
/* Action Group & Buttons */
.uniteelements-hero-cta-group {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 6px;
}
.uniteelements-hero-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.uniteelements-btn-hero-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 26px;
border-radius: 12px;
background: linear-gradient(135deg, #2B5DF5 0%, #1D44DB 100%);
color: #FFFFFF !important;
font-size: 14.5px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 20px -2px rgba(43, 93, 245, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
white-space: nowrap;
}
.uniteelements-btn-hero-primary * {
color: #FFFFFF !important;
}
.uniteelements-btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px -2px rgba(43, 93, 245, 0.6);
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #FFFFFF !important;
}
/* Developer CLI Snippet Pill */
.uniteelements-cli-snippet-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0F172A;
color: #E2E8F0;
padding: 10px 16px;
border-radius: 12px;
border: 1.5px solid rgba(56, 189, 248, 0.25);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.uniteelements-cli-snippet-pill:hover {
border-color: rgba(56, 189, 248, 0.6);
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.2);
transform: translateY(-2px);
}
.uniteelements-cli-prefix {
color: #38BDF8;
font-family: var(--uniteelements-font-mono, monospace);
font-weight: 700;
font-size: 13px;
}
.uniteelements-cli-code {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 12.5px;
color: #F8FAFC;
font-weight: 600;
background: transparent;
padding: 0;
}
.uniteelements-cli-copy-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #94A3B8;
border-radius: 6px;
padding: 3px 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
font-size: 11px;
}
.uniteelements-cli-snippet-pill:hover .uniteelements-cli-copy-btn {
background: #2563EB;
color: #FFFFFF;
border-color: #3B82F6;
}
.cli-copy-feedback {
color: #10B981 !important;
font-weight: 700;
font-size: 11.5px;
font-family: var(--uniteelements-font-mono, monospace);
}
/* Command Palette Quick Search Hint */
.uniteelements-hero-cmd-hint {
display: flex;
align-items: center;
}
.uniteelements-cmd-search-trigger {
background: transparent;
border: none;
padding: 0;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 12.5px;
color: #64748B;
transition: color 0.2s ease;
text-align: left;
}
.uniteelements-cmd-search-trigger:hover {
color: #2563EB;
}
.cmd-kbd {
background: #F1F5F9;
border: 1px solid #CBD5E1;
border-radius: 5px;
padding: 2px 6px;
font-family: var(--uniteelements-font-mono, monospace);
font-size: 11px;
font-weight: 700;
color: #334155;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cmd-text {
font-weight: 500;
}
.cmd-arrow {
transition: transform 0.2s ease;
}
.uniteelements-cmd-search-trigger:hover .cmd-arrow {
transform: translateX(3px);
}
/* Secondary Hero Button */
.uniteelements-btn-hero-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
border: 1.5px solid #CBD5E1;
color: #0F172A;
font-size: 14px;
font-weight: 700;
text-decoration: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-btn-hero-secondary:hover {
background: #FFFFFF;
border-color: #2563EB;
color: #2563EB;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
}
.btn-flash-tag {
font-size: 14px;
}
/* ==========================================================================
Interactive Multi-Product Hero Carousel Deck
========================================================================== */
.uniteelements-hero-carousel-column {
position: relative;
width: 100%;
}
.uniteelements-product-deck {
background: #0B1120;
border: 1.5px solid rgba(56, 189, 248, 0.22);
border-radius: 22px;
box-shadow: 0 25px 60px -15px rgba(11, 17, 32, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 40px -10px rgba(37, 99, 235, 0.25);
overflow: hidden;
position: relative;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-product-deck:hover {
border-color: rgba(56, 189, 248, 0.45);
box-shadow: 0 30px 70px -12px rgba(11, 17, 32, 0.65),
0 0 0 1px rgba(255, 255, 255, 0.12) inset,
0 0 50px -5px rgba(37, 99, 235, 0.35);
}
/* Deck Top Bar */
.uniteelements-deck-topbar {
background: rgba(15, 23, 42, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
gap: 12px;
}
.uniteelements-deck-dots {
display: flex;
align-items: center;
gap: 6px;
}
.uniteelements-deck-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.uniteelements-deck-dots .dot-r { background: #EF4444; }
.uniteelements-deck-dots .dot-y { background: #F59E0B; }
.uniteelements-deck-dots .dot-g { background: #10B981; }
.uniteelements-deck-status-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--uniteelements-font-mono, monospace);
font-size: 11px;
font-weight: 700;
color: #38BDF8;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.25);
padding: 3px 10px;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.deck-pulse-orb {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 8px #10B981;
animation: deckPulse 2s infinite;
}
@keyframes deckPulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
100% { opacity: 1; transform: scale(1); }
}
.uniteelements-deck-controls-mini {
display: flex;
align-items: center;
gap: 10px;
}
.uniteelements-deck-counter {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 11px;
font-weight: 700;
color: #94A3B8;
letter-spacing: 0.05em;
}
.uniteelements-deck-counter #heroCurrentIndex {
color: #38BDF8;
font-weight: 800;
}
.uniteelements-deck-nav-btns {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 2px;
}
.deck-nav-btn {
background: transparent;
border: none;
color: #94A3B8;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.deck-nav-btn:hover {
color: #FFFFFF;
background: rgba(255, 255, 255, 0.12);
}
/* Viewport & Track */
.uniteelements-deck-viewport {
position: relative;
overflow: hidden;
width: 100%;
}
.uniteelements-deck-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
width: 100%;
}
.uniteelements-deck-slide {
min-width: 100%;
width: 100%;
flex-shrink: 0;
box-sizing: border-box;
}
.uniteelements-deck-card {
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Top Meta Badges */
.uniteelements-deck-card-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.uniteelements-deck-badges {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.uniteelements-mini-pill {
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.uniteelements-mini-pill--blue {
background: rgba(37, 99, 235, 0.2);
color: #60A5FA;
border: 1px solid rgba(37, 99, 235, 0.4);
}
.uniteelements-mini-pill--mono {
background: rgba(56, 189, 248, 0.12);
color: #38BDF8;
border: 1px solid rgba(56, 189, 248, 0.3);
font-family: var(--uniteelements-font-mono, monospace);
}
.uniteelements-mini-pill--emerald {
background: rgba(16, 185, 129, 0.15);
color: #34D399;
border: 1px solid rgba(16, 185, 129, 0.35);
}
.uniteelements-deck-rating {
display: flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
}
.rating-stars {
color: #F59E0B;
letter-spacing: 1px;
}
.rating-val {
color: #CBD5E1;
font-weight: 700;
font-family: var(--uniteelements-font-mono, monospace);
}
/* Main Product Visual & Details */
.uniteelements-deck-card-main {
display: flex;
align-items: flex-start;
gap: 16px;
}
.uniteelements-deck-card-visual {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(56, 189, 248, 0.3);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.deck-prod-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.deck-prod-icon-box {
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-deck-card-info {
flex: 1;
min-width: 0;
}
.uniteelements-deck-card-title {
font-size: 1.25rem;
font-weight: 800;
color: #FFFFFF;
margin: 0 0 6px 0;
line-height: 1.25;
letter-spacing: -0.01em;
}
.uniteelements-deck-card-title a {
color: #FFFFFF;
text-decoration: none;
transition: color 0.15s ease;
}
.uniteelements-deck-card-title a:hover {
color: #38BDF8;
}
.uniteelements-deck-card-desc {
font-size: 12.5px;
color: #94A3B8;
margin: 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Stack Matrix */
.uniteelements-deck-stack-matrix {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.deck-stack-chip {
font-family: var(--uniteelements-font-mono, monospace);
font-size: 11px;
font-weight: 600;
color: #CBD5E1;
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 3px 9px;
border-radius: 6px;
}
/* Security Strip */
.uniteelements-deck-security-strip {
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.22);
border-radius: 10px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11.5px;
font-weight: 700;
color: #34D399;
}
.sec-strip-left {
display: flex;
align-items: center;
gap: 6px;
}
.sec-strip-escrow {
font-size: 10.5px;
color: #6EE7B7;
background: rgba(16, 185, 129, 0.15);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--uniteelements-font-mono, monospace);
}
/* Price & Action Row */
.uniteelements-deck-footer-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.uniteelements-deck-price-val {
display: flex;
align-items: baseline;
gap: 8px;
}
.uniteelements-deck-price-val del {
font-size: 13px;
color: #64748B !important;
text-decoration: line-through;
}
.uniteelements-deck-price-val ins,
.uniteelements-deck-price-val .woocommerce-Price-amount {
font-size: 1.55rem;
font-weight: 900;
color: #38BDF8 !important;
text-decoration: none !important;
line-height: 1;
letter-spacing: -0.02em;
}
.uniteelements-btn-deck-deploy {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF !important;
font-size: 13px;
font-weight: 800;
padding: 11px 22px;
border-radius: 999px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-btn-deck-deploy:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.55);
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #FFFFFF !important;
}
/* Deck Bottom Bar */
.uniteelements-deck-bottom-bar {
background: rgba(15, 23, 42, 0.6);
padding: 10px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.uniteelements-deck-dots-nav {
display: inline-flex;
align-items: center;
gap: 6px;
}
.uniteelements-deck-dot-pill {
display: block !important;
width: 20px !important;
height: 6px !important;
min-width: 20px !important;
max-width: 36px !important;
min-height: 6px !important;
max-height: 6px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.22) !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
box-shadow: none !important;
flex-shrink: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}
.uniteelements-deck-dot-pill.is-active {
width: 36px !important;
min-width: 36px !important;
background: #38BDF8 !important;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
}
.quick-peek-hint {
font-size: 11px;
color: #64748B;
font-weight: 500;
}
@media (max-width: 768px) {
.uniteelements-hero-cta-row {
flex-direction: column;
align-items: stretch;
}
.uniteelements-btn-hero-primary,
.uniteelements-btn-hero-secondary {
width: 100%;
box-sizing: border-box;
justify-content: center;
}
.uniteelements-deck-card {
padding: 16px;
}
.uniteelements-deck-card-title {
font-size: 1.1rem;
}
.uniteelements-deck-quick-peek {
display: none;
}
}
/* ==========================================================================
Spotlight Drop & Offers Section
========================================================================== */
.uniteelements-offer-section,
.uniteelements-spotlight-drop-section {
margin: 24px 0 48px;
}
@media (min-width: 960px) {
.uniteelements-spotlight-2col-layout {
grid-template-columns: 1.18fr 0.82fr !important;
gap: 40px !important;
}
}
@media (max-width: 640px) {
.uniteelements-spotlight-drop-section {
margin: 16px 0 28px;
}
}
.uniteelements-deal-content {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-4);
}
.uniteelements-deal-price-row {
display: flex;
align-items: baseline;
gap: var(--uniteelements-space-3);
margin-top: var(--uniteelements-space-2);
}
/* ==========================================================================
5. Ecosystem Category Navigation
========================================================================== */
.uniteelements-ecosystem-section {
margin: var(--uniteelements-space-16) 0;
}
.uniteelements-section-header {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-2);
margin-bottom: var(--uniteelements-space-8);
}
.uniteelements-category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--uniteelements-space-4);
}
.uniteelements-category-card {
background-color: var(--uniteelements-bg-surface);
border: 1px solid var(--uniteelements-border-default);
border-radius: var(--uniteelements-radius-lg);
padding: var(--uniteelements-space-5);
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-3);
text-decoration: none;
transition: var(--uniteelements-transition);
}
.uniteelements-category-card:hover {
border-color: var(--uniteelements-primary-300);
transform: translateY(-2px);
box-shadow: var(--uniteelements-shadow-md);
}
.uniteelements-category-card__icon {
width: 36px;
height: 36px;
border-radius: var(--uniteelements-radius-md);
background-color: var(--uniteelements-primary-50);
color: var(--uniteelements-primary-500);
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-category-card__icon svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.uniteelements-category-card__title {
font-size: var(--uniteelements-font-size-h4);
font-weight: var(--uniteelements-font-weight-semibold);
color: var(--uniteelements-text-primary);
margin: 0;
}
.uniteelements-category-card__desc {
font-size: var(--uniteelements-font-size-caption);
color: var(--uniteelements-text-secondary);
margin: 0;
}
/* ==========================================================================
6. Software Product Card Layout (Unified in components/products.css)
========================================================================== */
/* ==========================================================================
7. Featured Editorial Collection (1 Large + 3 Compact)
========================================================================== */
.uniteelements-featured-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-6);
}
@media (min-width: 1024px) {
.uniteelements-featured-grid {
grid-template-columns: 1.2fr 1fr;
}
}
.uniteelements-featured-secondary-stack {
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-4);
}
/* ==========================================================================
8. Bundles Section
========================================================================== */
.uniteelements-bundles-section {
margin: var(--uniteelements-space-16) 0;
}
.uniteelements-bundle-panel {
background-color: var(--uniteelements-glass-strong-bg);
backdrop-filter: var(--uniteelements-glass-strong-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-strong-blur);
border: 1px solid var(--uniteelements-glass-strong-border);
border-radius: var(--uniteelements-radius-2xl);
padding: var(--uniteelements-space-10);
box-shadow: var(--uniteelements-glass-highlight), var(--uniteelements-shadow-glass);
}
.uniteelements-bundle-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--uniteelements-space-8);
align-items: center;
}
@media (min-width: 960px) {
.uniteelements-bundle-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ==========================================================================
9. Custom Development Services Studio
========================================================================== */
.uniteelements-services-section {
margin: var(--uniteelements-space-16) 0;
}
.uniteelements-service-card {
padding: var(--uniteelements-space-6);
display: flex;
flex-direction: column;
gap: var(--uniteelements-space-3);
}
/* ==========================================================================
10. Final CTA Glass Banner
========================================================================== */
.uniteelements-final-cta-section {
margin: var(--uniteelements-space-16) 0;
}
.uniteelements-cta-banner {
text-align: center;
padding: var(--uniteelements-space-12) var(--uniteelements-space-6);
background: radial-gradient(circle at 50% -20%, rgba(43, 93, 245, 0.12), transparent 70%), var(--uniteelements-glass-strong-bg);
backdrop-filter: var(--uniteelements-glass-strong-blur);
-webkit-backdrop-filter: var(--uniteelements-glass-strong-blur);
border: 1px solid var(--uniteelements-primary-200);
border-radius: var(--uniteelements-radius-2xl);
box-shadow: var(--uniteelements-shadow-glass);
max-width: 960px;
margin: 0 auto;
}
/* ==========================================================================
11. Advanced Footer Styling (High-Creative Desktop & Strict 2-Column Mobile Grid)
========================================================================== */
.uniteelements-advanced-footer {
padding: clamp(52px, 6vw, 80px) 0 32px;
background: radial-gradient(100% 80% at 50% 0%, #FFFFFF 0%, #F8FAFC 55%, #F1F5F9 100%);
border-top: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
position: relative;
overflow: hidden;
}
/* Subtle top glow highlight line */
.uniteelements-advanced-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.2) 20%, rgba(59, 130, 246, 0.75) 50%, rgba(37, 99, 235, 0.2) 80%, transparent 100%);
pointer-events: none;
}
/* Background ambient micro-glow */
.uniteelements-advanced-footer::after {
content: '';
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 720px;
height: 240px;
background: radial-gradient(ellipse, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.uniteelements-advanced-footer .uniteelements-container {
position: relative;
z-index: 1;
}
/* Footer Main Grid: 5 columns on desktop, 4 on tablet, strict 2 on mobile */
.uniteelements-footer-grid {
display: grid;
grid-template-columns: 1.55fr 1fr 1fr 1fr 1fr;
gap: 40px 28px;
padding-bottom: clamp(36px, 4.5vw, 52px);
border-bottom: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
margin-bottom: var(--uniteelements-space-6, 20px);
}
.uniteelements-footer-brand-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.uniteelements-footer-brand-wrap {
margin-bottom: 2px;
}
.uniteelements-footer-bio {
color: var(--uniteelements-text-secondary, #64748B);
max-width: 320px;
margin: 0;
font-size: 13.5px;
line-height: 1.6;
letter-spacing: -0.01em;
}
/* Enterprise Cloud & Infrastructure Badge */
.uniteelements-footer-infra-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 5px 11px;
font-size: 11.5px;
font-weight: 600;
color: #475569;
width: fit-content;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
transition: all 0.2s ease;
}
.uniteelements-footer-infra-badge:hover {
border-color: #CBD5E1;
background: #F1F5F9;
}
.uniteelements-footer-infra-badge .uniteelements-infra-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #3B82F6;
flex-shrink: 0;
box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
}
/* Live System Status Pill */
.uniteelements-live-status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(220, 252, 231, 0.8);
border: 1px solid rgba(187, 247, 208, 0.95);
font-size: 11px;
font-weight: 700;
color: #15803D;
width: fit-content;
backdrop-filter: blur(4px);
}
.uniteelements-status-pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4);
animation: uniteelementsPulse 2s infinite;
}
@keyframes uniteelementsPulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}
70% {
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
/* Support Desk Direct Action Pill */
.uniteelements-footer-support-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #EFF6FF;
border: 1px solid rgba(37, 99, 235, 0.25);
color: #2563EB;
font-size: 12px;
font-weight: 700;
padding: 7px 14px;
border-radius: 10px;
text-decoration: none;
width: fit-content;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
}
.uniteelements-footer-support-btn:hover {
background: #2563EB;
color: #FFFFFF !important;
border-color: #2563EB;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
text-decoration: none;
}
.uniteelements-footer-support-btn .uniteelements-btn-arrow {
transition: transform 0.2s ease;
font-size: 13px;
}
.uniteelements-footer-support-btn:hover .uniteelements-btn-arrow {
transform: translateX(3px);
}
/* Social Profile Icons */
.uniteelements-footer-socials {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.uniteelements-social-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 10px;
background: #FFFFFF;
color: #475569;
border: 1px solid #E2E8F0;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.uniteelements-social-icon-btn:hover {
background: #2563EB;
color: #FFFFFF !important;
border-color: #2563EB;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
/* Navigation Columns Styling */
.uniteelements-footer-col {
min-width: 0;
}
.uniteelements-footer-heading {
font-size: 12px;
font-weight: 800;
color: var(--uniteelements-text-primary, #0F172A);
margin: 0 0 16px;
letter-spacing: 0.07em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.uniteelements-footer-heading::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2563EB;
flex-shrink: 0;
box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
}
.uniteelements-footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.uniteelements-footer-links a {
color: var(--uniteelements-text-secondary, #64748B);
font-size: 13.5px;
line-height: 1.5;
text-decoration: none;
font-weight: 500;
transition: color 0.18s ease, transform 0.18s ease;
display: inline-block;
}
.uniteelements-footer-links a:hover {
color: var(--uniteelements-primary-600, #2563EB);
transform: translateX(3px);
text-decoration: none;
}
/* ==========================================================================
Full-Width Security, Trust & Compliance Verification Dock
========================================================================== */
.uniteelements-footer-trust-dock {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.95) 100%);
border: 1px solid rgba(226, 232, 240, 0.85);
border-radius: 14px;
padding: 12px 18px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
}
.uniteelements-trust-dock-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.uniteelements-trust-dock-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: #334155;
letter-spacing: 0.02em;
}
.uniteelements-trust-shield-icon {
color: #2563EB;
flex-shrink: 0;
}
.uniteelements-trust-badges-flow {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.uniteelements-trust-badge-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: #475569;
background: #FFFFFF;
border: 1px solid #E2E8F0;
padding: 0 10px;
height: 28px;
border-radius: 8px;
line-height: 1;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
box-sizing: border-box;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.uniteelements-badge-bolt {
font-size: 11px;
}
.uniteelements-trust-badge-link {
text-decoration: none !important;
color: #475569;
cursor: pointer;
}
.uniteelements-trust-badge-link:hover {
background: #EFF6FF;
border-color: rgba(37, 99, 235, 0.35);
color: #2563EB;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
}
.uniteelements-pill-tag-green {
color: #16A34A;
font-weight: 800;
font-size: 10px;
}
.uniteelements-pill-tag-grade {
background: #16A34A;
color: #FFFFFF;
font-size: 9.5px;
font-weight: 800;
padding: 1px 4px;
border-radius: 3px;
line-height: 1.2;
}
.uniteelements-trust-dmca-pill {
display: inline-flex;
align-items: center;
height: 28px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.uniteelements-trust-dmca-pill:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.uniteelements-trust-dmca-pill img {
height: 28px;
width: auto;
display: block;
border-radius: 6px;
}
/* Footer Bottom Bar */
.uniteelements-footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: 12.5px;
color: var(--uniteelements-text-muted, #64748B);
}
@media (min-width: 900px) {
.uniteelements-footer-bottom {
flex-direction: row;
text-align: left;
}
}
.uniteelements-footer-bottom-left {
font-weight: 500;
}
.uniteelements-footer-bottom-right {
display: inline-flex;
align-items: center;
gap: 16px;
}
.uniteelements-footer-engineered-by {
font-size: 12px;
}
.uniteelements-author-link {
color: var(--uniteelements-primary-600, #2563EB);
font-weight: 700;
text-decoration: none;
}
.uniteelements-author-link:hover {
text-decoration: underline;
}
.uniteelements-back-to-top {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 8px;
background: #EFF6FF;
color: #2563EB;
font-weight: 700;
font-size: 12px;
text-decoration: none;
border: 1px solid rgba(37, 99, 235, 0.18);
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s ease;
line-height: 1.4;
}
.uniteelements-back-to-top .uniteelements-back-arrow {
font-size: 13px;
line-height: 1;
transition: transform 0.2s ease;
}
.uniteelements-back-to-top:hover {
background: #2563EB;
color: #FFFFFF !important;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.uniteelements-back-to-top:hover .uniteelements-back-arrow {
transform: translateY(-2px);
}
/* ==========================================================================
Responsive Breakpoints: Tablet (768px-1023px) & Mobile (<768px)
========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
.uniteelements-footer-grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px 20px;
}
.uniteelements-footer-brand-col {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-bottom: 24px;
border-bottom: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
margin-bottom: 8px;
}
}
@media (max-width: 767px) {
.uniteelements-advanced-footer {
padding: 40px 0 96px; /* 96px clearance for floating WhatsApp Help Desk button */
}
/* STRICT 2-COLUMN MOBILE GRID */
.uniteelements-footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 28px 14px;
padding-bottom: 32px;
margin-bottom: 20px;
}
.uniteelements-footer-brand-col {
grid-column: 1 / -1;
padding-bottom: 24px;
border-bottom: 1px solid var(--uniteelements-border-subtle, #E2E8F0);
margin-bottom: 4px;
}
.uniteelements-footer-heading {
font-size: 11px;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.uniteelements-footer-links {
gap: 8px;
}
.uniteelements-footer-links a {
font-size: 13px;
line-height: 1.4;
word-break: break-word;
padding: 2px 0;
}
.uniteelements-footer-trust-dock {
padding: 12px 14px;
margin-bottom: 20px;
}
.uniteelements-trust-dock-inner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.uniteelements-trust-badges-flow {
gap: 8px;
}
.uniteelements-trust-badge-pill {
font-size: 11px;
padding: 0 8px;
height: 26px;
}
.uniteelements-trust-dmca-pill,
.uniteelements-trust-dmca-pill img {
height: 26px;
}
.uniteelements-footer-bottom {
gap: 14px;
text-align: center;
}
.uniteelements-footer-bottom-left {
font-size: 11.5px;
line-height: 1.5;
}
.uniteelements-footer-bottom-right {
flex-direction: column;
gap: 8px;
}
}
/* ==========================================================================
UniteElements Theme - Universal Modern Utility Layer (Tailwind Compatible)
========================================================================== */
/* Flexbox & Layout */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.hidden { display: none !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-grow { flex-grow: 1 !important; }
/* Grid Layouts */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (min-width: 640px) {
.sm\:flex { display: flex !important; }
.sm\:hidden { display: none !important; }
.sm\:flex-row { flex-direction: row !important; }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.sm\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.sm\:w-24 { width: 6rem !important; }
.sm\:h-24 { height: 6rem !important; }
}
@media (min-width: 768px) {
.md\:flex { display: flex !important; }
.md\:hidden { display: none !important; }
.md\:flex-row { flex-direction: row !important; }
.md\:items-center { align-items: center !important; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.md\:gap-6 { gap: 1.5rem !important; }
.md\:gap-8 { gap: 2rem !important; }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex !important; }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
}
/* Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.gap-10 { gap: 2.5rem !important; }
.gap-12 { gap: 3rem !important; }
/* Space between */
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem !important; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem !important; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem !important; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem !important; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem !important; }
/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }
.p-12 { padding: 3rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
/* Margin */
.m-0 { margin: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-1\.5 { margin-bottom: 0.375rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-auto { margin-top: auto !important; }
.ml-auto { margin-left: auto !important; }
/* Sizing */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }
.w-20 { width: 5rem !important; }
.h-20 { height: 5rem !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.h-1\.5 { height: 0.375rem !important; }
.min-h-screen { min-height: 100vh !important; }
.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }
/* Rounded */
.rounded { border-radius: 0.25rem !important; }
.rounded-sm { border-radius: 0.125rem !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-full { border-radius: 9999px !important; }
/* Backgrounds */
.bg-white { background-color: #FFFFFF !important; }
.bg-slate-50 { background-color: #F8FAFC !important; }
.bg-slate-100 { background-color: #F1F5F9 !important; }
.bg-slate-200 { background-color: #E2E8F0 !important; }
.bg-slate-700 { background-color: #334155 !important; }
.bg-slate-800 { background-color: #1E293B !important; }
.bg-slate-900 { background-color: #0F172A !important; }
.bg-\[\#FAFAFA\] { background-color: #FAFAFA !important; }
.bg-\[\#2B5DF5\] { background-color: #2B5DF5 !important; }
.bg-blue-50 { background-color: #EFF6FF !important; }
.bg-blue-600 { background-color: #2563EB !important; }
.bg-emerald-50 { background-color: #ECFDF5 !important; }
.bg-emerald-100 { background-color: #D1FAE5 !important; }
.bg-amber-50 { background-color: #FFFBEB !important; }
.bg-amber-100 { background-color: #FEF3C7 !important; }
.bg-amber-200 { background-color: #FDE68A !important; }
.bg-rose-50 { background-color: #FFF1F2 !important; }
.bg-rose-100 { background-color: #FFE4E6 !important; }
.bg-red-50 { background-color: #FEF2F2 !important; }
.bg-red-100 { background-color: #FEE2E2 !important; }
/* Text Colors */
.text-white { color: #FFFFFF !important; }
.text-slate-300 { color: #CBD5E1 !important; }
.text-slate-400 { color: #94A3B8 !important; }
.text-slate-500 { color: #64748B !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1E293B !important; }
.text-slate-900 { color: #0F172A !important; }
.text-blue-600 { color: #2563EB !important; }
.text-\[\#2B5DF5\] { color: #2B5DF5 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065F46 !important; }
.text-amber-700 { color: #B45309 !important; }
.text-amber-800 { color: #92400E !important; }
.text-amber-900 { color: #78350F !important; }
.text-rose-700 { color: #BE123C !important; }
.text-rose-800 { color: #9F1239 !important; }
.text-red-700 { color: #B91C1C !important; }
/* Typography */
.text-\[10px\] { font-size: 10px !important; }
.text-\[11px\] { font-size: 11px !important; }
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-mono { font-family: var(--uniteelements-font-mono, ui-monospace, monospace) !important; }
.font-sans { font-family: var(--uniteelements-font-family, 'Space Grotesk', -apple-system, sans-serif) !important; }
.uppercase { text-transform: uppercase !important; }
.capitalize { text-transform: capitalize !important; }
.italic { font-style: italic !important; }
.underline { text-decoration: underline !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Borders */
.border { border-width: 1px !important; border-style: solid !important; }
.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-slate-100 { border-color: #F1F5F9 !important; }
.border-slate-200 { border-color: #E2E8F0 !important; }
.border-slate-200\/60 { border-color: rgba(226, 232, 240, 0.6) !important; }
.border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8) !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-emerald-200 { border-color: #A7F3D0 !important; }
.border-amber-200 { border-color: #FDE68A !important; }
.border-rose-200 { border-color: #FECDD3 !important; }
.border-red-200 { border-color: #FECACA !important; }
/* Positioning & Shadows */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.inset-0 { inset: 0 !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05) !important; }
.shadow { box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.1), 0 1px 2px -1px rgba(15, 23, 42, 0.1) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1) !important; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(15, 23, 42, 0.05) !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.object-cover { object-fit: cover !important; }
.cursor-pointer { cursor: pointer !important; }
.transition-all { transition: all 0.2s ease !important; }
/* Mobile Touch Tap Target & Viewport Safety */
@media (max-width: 768px) {
html, body {
overflow-x: clip !important;
max-width: 100% !important;
width: 100% !important;
}
.uniteelements-container, .ipl-container, .ipd-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
button, .button, .uniteelements-btn, .uniteelements-pill-tab, a.uniteelements-btn {
min-height: 38px;
}
.uniteelements-table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
}
}
/* ==========================================================================
UniteElements 60fps GPU-Accelerated Animation & Reveal Engine
========================================================================== */
.uniteelements-reveal {
opacity: 0;
transform: translateY(18px) translateZ(0);
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--reveal-index, 0) * 45ms);
will-change: opacity, transform;
}
.uniteelements-reveal.is-revealed {
opacity: 1;
transform: translateY(0) translateZ(0);
will-change: auto;
}
/* Micro-Interaction Button Specular Hover Glow */
.uniteelements-btn--glow {
position: relative;
overflow: hidden;
}
.uniteelements-btn--glow::after {
content: '';
position: absolute;
top: var(--mouse-y, 50%);
left: var(--mouse-x, 50%);
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.uniteelements-btn--glow:hover::after {
opacity: 1;
}
/* Card & Bento Elevation Transitions */
.uniteelements-card,
.uniteelements-product-card,
.uniteelements-telemetry-box,
.uniteelements-bento-tile {
transform: translateZ(0);
backface-visibility: hidden;
}
/* Accessibility: User Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.uniteelements-reveal,
.uniteelements-card,
.uniteelements-btn,
.uniteelements-dock-live-dot,
.uniteelements-hero-ping {
animation: none !important;
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ==========================================================================
Mobile Full-Width Add to Cart & Buy Now Buttons & Layout Reordering
========================================================================== */
@media (max-width: 768px) {
/* Reorder Single Product Workspace: Sticky Deployment Deck directly below Hero on mobile */
.uniteelements-product-workspace-layout {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.uniteelements-workspace-sidebar-col {
order: 1 !important;
width: 100% !important;
}
.uniteelements-workspace-main-col {
order: 2 !important;
width: 100% !important;
}
.uniteelements-sticky-deployment-deck {
position: static !important;
top: auto !important;
margin-bottom: 8px !important;
}
.single-product .uniteelements-prod-actions,
.single-product .cart,
.single-product form.cart {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.single-product .single_add_to_cart_button,
.single-product .uniteelements-prod-btn-primary,
.single-product .uniteelements-prod-btn-secondary,
.single-product .uniteelements-prod-btn-demo,
.single-product .uniteelements-prod-btn-docs,
.single-product .uniteelements-btn-buy-now {
width: 100% !important;
min-width: 100% !important;
box-sizing: border-box !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
}
/* ==========================================================================
ThemeForest & CodeCanyon Style Live Demo Viewer Modal & Sandbox Console
========================================================================== */
.uniteelements-demo-modal {
position: fixed;
inset: 0;
z-index: 999999;
background: #090D16;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0;
padding: 0;
box-sizing: border-box;
animation: uniteelementsFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes uniteelementsFadeIn {
from {
opacity: 0;
transform: scale(0.99);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Modal Top Bar Console */
.uniteelements-demo-topbar {
height: 56px;
min-height: 56px;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
gap: 16px;
position: relative;
z-index: 20;
color: #FFFFFF;
}
/* Topbar Left */
.uniteelements-demo-topbar-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 0%;
min-width: 0;
}
.uniteelements-demo-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #E2E8F0;
padding: 6px 12px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: all 0.18s ease;
line-height: 1;
}
.uniteelements-demo-btn:hover {
background: rgba(255, 255, 255, 0.18);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.3);
}
.uniteelements-demo-back-btn {
background: rgba(37, 99, 235, 0.15);
border-color: rgba(37, 99, 235, 0.4);
color: #93C5FD;
}
.uniteelements-demo-back-btn:hover {
background: #2563EB;
color: #FFFFFF;
border-color: #3B82F6;
}
.uniteelements-demo-product-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.uniteelements-demo-badge-wrap {
display: flex;
align-items: center;
gap: 6px;
}
.uniteelements-demo-brand-tag {
font-size: 10px;
font-weight: 700;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.uniteelements-demo-live-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #34D399;
font-size: 9.5px;
font-weight: 800;
padding: 2px 6px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.uniteelements-demo-pulse-orb {
width: 5px;
height: 5px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 6px #10B981;
animation: pulse-dot-green 1.4s infinite;
}
.uniteelements-demo-title {
font-size: 13.5px;
font-weight: 700;
color: #FFFFFF;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
/* Topbar Center (Device Viewport Switcher) */
.uniteelements-demo-topbar-center {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.uniteelements-demo-device-switcher {
background: rgba(2, 6, 23, 0.7);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 3px;
display: flex;
gap: 3px;
}
.uniteelements-device-btn {
background: transparent;
border: none;
color: #94A3B8;
padding: 6px 12px;
border-radius: 7px;
font-size: 11.5px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.18s ease;
}
.uniteelements-device-btn:hover {
color: #FFFFFF;
background: rgba(255, 255, 255, 0.06);
}
.uniteelements-device-btn.is-active {
background: #2563EB;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
/* Topbar Right (Tools & Buy Now) */
.uniteelements-demo-topbar-right {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 0%;
justify-content: flex-end;
}
.uniteelements-demo-icon-only-btn {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.uniteelements-demo-price-pill {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #F8FAFC;
font-size: 13px;
font-weight: 700;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
}
.uniteelements-demo-price-pill .woocommerce-Price-amount {
color: #60A5FA;
font-weight: 800;
}
.uniteelements-demo-btn-buy {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
color: #FFFFFF;
font-size: 12.5px;
font-weight: 700;
padding: 7px 16px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
transition: all 0.2s ease;
white-space: nowrap;
}
.uniteelements-demo-btn-buy:hover {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
}
.uniteelements-demo-close-btn {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: #FCA5A5;
width: 32px;
height: 32px;
padding: 0;
justify-content: center;
}
.uniteelements-demo-close-btn:hover {
background: #EF4444;
color: #FFFFFF;
border-color: #EF4444;
}
/* Progress Bar */
.uniteelements-demo-progress {
position: absolute;
top: 56px;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.05);
z-index: 25;
display: none;
overflow: hidden;
}
.uniteelements-demo-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #2563EB, #38BDF8, #10B981);
box-shadow: 0 0 10px #38BDF8;
}
/* Main Viewport Surface */
.uniteelements-demo-viewport {
position: relative;
flex: 1 1 auto;
width: 100%;
height: calc(100vh - 56px);
height: calc(100dvh - 56px);
background: #020617;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
margin: 0;
}
/* Fallback Warning Bar */
.uniteelements-demo-fallback-bar {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 30;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(245, 158, 11, 0.4);
border-radius: 12px;
padding: 10px 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
max-width: 90%;
width: auto;
}
.uniteelements-fallback-inner {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: #F8FAFC;
flex-wrap: wrap;
}
.uniteelements-fallback-link {
background: #F59E0B;
color: #0F172A !important;
font-weight: 700;
font-size: 11.5px;
padding: 4px 10px;
border-radius: 6px;
text-decoration: none;
margin-left: auto;
}
.uniteelements-fallback-link:hover {
background: #FBBF24;
}
/* Loader Screen */
.uniteelements-demo-loader {
position: absolute;
inset: 0;
background: #090D16;
display: flex;
align-items: center;
justify-content: center;
z-index: 15;
}
.uniteelements-demo-loader-card {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 32px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
max-width: 380px;
}
.uniteelements-demo-spinner {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
}
.uniteelements-spinner-ring {
position: absolute;
inset: 0;
border: 3px solid rgba(37, 99, 235, 0.2);
border-top-color: #38BDF8;
border-radius: 50%;
animation: uniteelementsSpin 1s linear infinite;
}
@keyframes uniteelementsSpin {
to {
transform: rotate(360deg);
}
}
.uniteelements-loader-text {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
margin: 0 0 6px;
}
.uniteelements-loader-sub {
color: #94A3B8;
font-size: 12px;
margin: 0;
}
/* Frame Container & Dynamic Sizing */
.uniteelements-demo-frame-wrap {
height: 100%;
width: 100%;
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
position: relative;
display: flex;
background: #FFFFFF;
}
.uniteelements-demo-frame-wrap.is-desktop {
width: 100%;
max-width: 100%;
}
.uniteelements-demo-frame-wrap.is-laptop {
width: 1024px;
max-width: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.uniteelements-demo-frame-wrap.is-tablet {
width: 768px;
max-width: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.uniteelements-demo-frame-wrap.is-mobile {
width: 375px;
max-width: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.uniteelements-demo-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
background: #FFFFFF;
}
/* ==========================================================================
Mobile Responsive Optimizations (< 768px)
========================================================================== */
@media (max-width: 768px) {
.uniteelements-demo-topbar {
height: 48px;
min-height: 48px;
padding: 0 10px;
gap: 8px;
}
.uniteelements-demo-progress {
top: 48px;
}
.uniteelements-demo-viewport {
height: calc(100vh - 48px);
height: calc(100dvh - 48px);
}
.uniteelements-demo-back-text {
display: none;
}
.uniteelements-demo-topbar-center {
display: none !important; /* Hide device switcher on mobile devices */
}
.uniteelements-demo-title {
max-width: 140px;
font-size: 12px;
}
.uniteelements-demo-live-pill {
display: none;
}
.uniteelements-demo-price-pill {
display: none; /* Conserve horizontal real estate */
}
.uniteelements-demo-btn-buy span {
font-size: 11.5px;
}
.uniteelements-demo-btn-buy {
padding: 6px 10px;
}
.uniteelements-demo-frame-wrap,
.uniteelements-demo-frame-wrap.is-laptop,
.uniteelements-demo-frame-wrap.is-tablet,
.uniteelements-demo-frame-wrap.is-mobile {
width: 100% !important;
max-width: 100% !important;
box-shadow: none !important;
}
}
@media (max-width: 480px) {
.uniteelements-demo-title {
max-width: 100px;
}
.uniteelements-demo-ext-link {
display: none;
}
}