/* ===========================================
ERKON TEMA - VANILLA CSS
Poenoten Design System
=========================================== */
/* ===========================================
1. CSS RESET & DESIGN SYSTEM
=========================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Prevents theme hover color leaking into cookie banner links */
#piskotki-gdpr a:hover {
color: inherit;
}
:root {
/* ==========================================================================
1. BRAND COLORS (Primarne barve)
========================================================================== */
--erkon-primary: #0f1e45;
--erkon-primary-rgb: 15, 30, 69;
--erkon-secondary: #007CBA;
--erkon-secondary-rgb: 0, 124, 186;
--erkon-accent: #c49a6c;
--erkon-green: #3AD531;
--erkon-white: #ffffff;
--erkon-footer-bg: #170733;
/* Service Brand Colors */
--erkon-prezracevanje: #2f8ac8;
--erkon-prezracevanje-hover: #0aa8c9;
--erkon-hlajenje: #1e3a8a;
--erkon-hlajenje-hover: #162d6b;
--erkon-ogrevanje: #81142d;
--erkon-ogrevanje-hover: #5a0d1f;
/* ==========================================================================
2. GRAY SCALE (Nevtralna paleta - 10 odtenkov)
========================================================================== */
--gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;
--gray-400: #a3a3a3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;
/* ==========================================================================
3. SEMANTIC COLORS (Sistemske barve)
========================================================================== */
--color-success: #16a34a;
--color-success-light: #dcfce7;
--color-success-dark: #15803d;
--color-warning: #ca8a04;
--color-warning-light: #fef9c3;
--color-warning-dark: #a16207;
--color-error: #dc2626;
--color-error-light: #fee2e2;
--color-error-dark: #b91c1c;
--color-info: #0891b2;
--color-info-light: #cffafe;
--color-info-dark: #0e7490;
/* ==========================================================================
4. SURFACE COLORS (Površine)
========================================================================== */
--surface-default: var(--erkon-white);
--surface-muted: var(--gray-50);
--surface-subtle: var(--gray-100);
--surface-emphasis: var(--erkon-primary);
--surface-inverse: var(--gray-900);
/* ==========================================================================
5. TEXT COLORS (Besedilo)
========================================================================== */
--text-primary: var(--gray-900);
--text-secondary: var(--gray-600);
--text-tertiary: var(--gray-500);
--text-disabled: var(--gray-400);
--text-inverse: var(--erkon-white);
--text-brand: var(--erkon-primary);
--text-accent: var(--erkon-accent);
/* ==========================================================================
6. BORDER COLORS (Obrobe)
========================================================================== */
--border-default: var(--gray-200);
--border-muted: var(--gray-100);
--border-emphasis: var(--gray-300);
--border-brand: var(--erkon-primary);
/* ==========================================================================
7. INTERACTIVE STATES
========================================================================== */
--color-hover: rgba(var(--erkon-primary-rgb), 0.08);
--color-active: rgba(var(--erkon-primary-rgb), 0.12);
--color-focus: var(--erkon-accent);
--color-selected: rgba(var(--erkon-primary-rgb), 0.16);
/* ==========================================================================
8. TYPOGRAPHY
========================================================================== */
/* Font Families */
--font-heading: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
/* Fluid Font Sizes (z clamp()) */
--text-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
--text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
--text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
--text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
--text-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
--text-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--text-3xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
--text-4xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
--text-5xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
--text-6xl: clamp(2.75rem, 2.2rem + 2.5vw, 3.75rem);
/* Font Weights */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.6;
--leading-loose: 1.75;
/* Letter Spacing */
--tracking-tighter: -0.03em;
--tracking-tight: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.04em;
/* ==========================================================================
9. SPACING SYSTEM (8px grid)
========================================================================== */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px - base */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* Semantic Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 80px;
/* Gaps */
--gap-sm: 16px;
--gap-md: 32px; /* Popravljeno: 30px → 32px za 8px grid */
--gap-lg: 48px;
/* Section Spacing - Standardized */
--section-py: var(--space-24); /* 96px - desktop */
--section-py-compact: var(--space-20); /* 80px - compact */
--section-py-small: var(--space-6); /* 24px - minimal */
/* Container Horizontal Padding */
--container-px: var(--space-8); /* 32px - desktop */
/* Card Internal Padding */
--card-padding: var(--space-12); /* 48px */
/* ==========================================================================
10. SHADOWS
========================================================================== */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
/* Colored Shadows */
--shadow-primary: 0 4px 14px 0 rgba(var(--erkon-primary-rgb), 0.25);
--shadow-primary-lg: 0 10px 25px -5px rgba(var(--erkon-primary-rgb), 0.3);
--shadow-accent: 0 4px 14px 0 rgba(196, 154, 108, 0.25);
/* ==========================================================================
11. BORDER RADIUS
========================================================================== */
--radius-none: 0;
--radius-sm: 0.125rem; /* 2px */
--radius-base: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-3xl: 1.5rem; /* 24px */
--radius-full: 9999px;
/* Semantic Radius */
--radius-button: var(--radius-md);
--radius-input: var(--radius-md);
--radius-card: var(--radius-xl);
/* ==========================================================================
12. Z-INDEX SYSTEM
========================================================================== */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-header: 300;
--z-overlay: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-toast: 800;
/* ==========================================================================
13. MOTION / TRANSITIONS
========================================================================== */
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--duration-slower: 400ms;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--transition-fast: 0.15s ease;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s ease;
/* ==========================================================================
14. ACCESSIBILITY
========================================================================== */
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
--focus-ring-color: var(--erkon-accent);
--touch-target-min: 44px;
/* ==========================================================================
15. BREAKPOINTS (Tailwind System)
Use these values for all @media queries
========================================================================== */
--breakpoint-xs: 480px; /* Small mobile - edge cases only */
--breakpoint-sm: 640px; /* Mobile landscape */
--breakpoint-md: 768px; /* Tablet */
--breakpoint-lg: 1024px; /* Desktop */
--breakpoint-xl: 1280px; /* Large desktop */
/* BREAKPOINT USAGE GUIDE:
Desktop-first (max-width) for component styles:
max-width: 1280px → Large desktop adjustments
max-width: 1024px → Tablet/desktop transition
max-width: 768px → Mobile/tablet transition
max-width: 639px → Small mobile (complement to min-width: 640px)
max-width: 480px → Very small mobile edge cases
Mobile-first (min-width) for grid/utility classes ONLY:
min-width: 640px → col-sm-*, utility-sm
min-width: 768px → col-md-*, utility-md
min-width: 1024px → col-lg-*, utility-lg
min-width: 1280px → col-xl-*
Special:
782px → WordPress admin bar (WP standard, DO NOT CHANGE)
Custom konfigurator: 1100px, 850px, 650px (intentional) */
/* ==========================================================================
LEGACY ALIASES (Backward Compatibility)
Ne uporabljaj v novi kodi!
========================================================================== */
/* Stare barvne spremenljivke -> nove */
--primary: var(--erkon-primary);
--primary-light: #1a2d5a;
--primary-dark: #0a1530;
--secondary: var(--erkon-secondary);
--accent: var(--erkon-prezracevanje);
--title: var(--text-primary);
--subtitle: var(--text-secondary);
--text: var(--text-secondary);
--text-muted: var(--text-tertiary);
--title-inverse: var(--text-inverse);
--bg-primary: var(--surface-default);
--bg-secondary: var(--surface-muted);
--bg-light: var(--gray-100);
--bg-dark: var(--gray-800);
--border-color: var(--border-default);
--border: var(--border-default);
--overlay: rgba(0, 0, 0, 0.5);
/* Stare sistemske barve */
--success: var(--color-success);
--danger: var(--color-error);
--warning: var(--color-warning);
--info: var(--color-info);
/* Stari aliasi */
--erkon-blue: var(--erkon-primary);
--erkon-dark: var(--gray-800);
--erkon-gray: var(--gray-500);
--erkon-border-color: var(--border-default);
--erkon-transition: var(--transition);
--erkon-shadow-sm: var(--shadow-sm);
--erkon-border-radius: var(--radius-md);
/* Stari radius aliasi */
--radius: var(--radius-md);
--radius-3: var(--radius-lg);
--radius-4: var(--radius-xl);
--radius-pill: var(--radius-full);
--radius-circle: 50%;
/* Stari shadow alias */
--shadow: var(--shadow-md);
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
color: var(--text-primary);
background-color: var(--surface-default);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* CSS GRID LAYOUT - The Ultimate Fix */
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: max-content 1fr auto; /* Header, Content, Footer */
min-height: 100vh;
margin: 0;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* WordPress alignment classes */
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.wp-block-image.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-block-image.aligncenter img {
margin-left: auto;
margin-right: auto;
}
/* Team image section styling */
.wp-block-image.size-large {
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: var(--erkon-primary);
transition: color var(--duration-fast) var(--ease-in-out);
}
a:hover {
color: var(--erkon-prezracevanje);
}
ul, ol {
list-style: none;
}
/* ===========================================
2. TYPOGRAPHY
=========================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-heading);
font-weight: var(--font-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text-brand);
margin-top: 0;
margin-bottom: var(--space-2);
}
h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }
.display-4 {
font-size: var(--text-6xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
}
.display-5 {
font-size: var(--text-5xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.display-6 {
font-size: var(--text-4xl);
font-weight: var(--font-bold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
}
.lead {
font-size: var(--text-xl);
font-weight: var(--font-normal);
line-height: var(--leading-relaxed);
color: var(--text-secondary);
}
p {
margin-bottom: 0.875rem;
font-size: inherit;
font-weight: 400;
line-height: 1.5;
color: var(--text);
}
/* ===========================================
3. LAYOUT SYSTEM
Native Erkon grid/flex layout (NOT Bootstrap)
=========================================== */
/* Container */
.container {
width: 100%;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container-fluid {
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/* Section spacing */
.section-padding {
padding-top: var(--section-py);
padding-bottom: var(--section-py);
}
.section-padding-sm {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
/* Grid row (flexbox-based) */
.grid-row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
[class*="col-"] {
position: relative;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.col {
flex: 1 0 0%;
position: relative;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* Gap utilities - horizontalni gutter s padding, vertikalni z row-gap */
.g-0 { --gutter-x: 0; --gutter-y: 0; }
.g-1 { --gutter-x: 0.25rem; --gutter-y: 0.25rem; }
.g-2 { --gutter-x: 0.5rem; --gutter-y: 0.5rem; }
.g-3 { --gutter-x: 1rem; --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.g-5 { --gutter-x: 3rem; --gutter-y: 3rem; }
.grid-row.g-0, .grid-row.g-1, .grid-row.g-2,
.grid-row.g-3, .grid-row.g-4, .grid-row.g-5 {
row-gap: var(--gutter-y);
margin-left: calc(var(--gutter-x) * -0.5);
margin-right: calc(var(--gutter-x) * -0.5);
}
.grid-row.g-0 > [class*="col-"], .grid-row.g-1 > [class*="col-"], .grid-row.g-2 > [class*="col-"],
.grid-row.g-3 > [class*="col-"], .grid-row.g-4 > [class*="col-"], .grid-row.g-5 > [class*="col-"] {
padding-left: calc(var(--gutter-x) * 0.5);
padding-right: calc(var(--gutter-x) * 0.5);
}
/* ===========================================
4. SPACING UTILITIES
=========================================== */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-auto { margin-left: auto !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
/* ===========================================
5. DISPLAY & FLEXBOX UTILITIES
Native Erkon utility classes (NOT Bootstrap)
=========================================== */
/* Display utilities */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.hidden { display: none !important; }
.grid { display: grid !important; }
/* Flex direction */
.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }
/* Flex wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
/* Flex grow/shrink */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }
.grow { flex-grow: 1 !important; }
.grow-0 { flex-grow: 0 !important; }
.shrink { flex-shrink: 1 !important; }
.shrink-0 { flex-shrink: 0 !important; }
/* Justify content */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }
/* Align items */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }
/* Align self */
.self-start { align-self: flex-start !important; }
.self-end { align-self: flex-end !important; }
.self-center { align-self: center !important; }
.self-stretch { align-self: stretch !important; }
/* Gap utilities */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
/* ===========================================
6. TYPOGRAPHY UTILITIES
=========================================== */
.fw-light { font-weight: 400 !important; } /* 300 je prelahek */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-extrabold { font-weight: 800 !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 1.7 !important; } /* prose - premium */
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.small { font-size: 0.875em !important; }
/* ===========================================
7. COLOR UTILITIES
=========================================== */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--subtitle) !important; } /* muted gray, ne modra */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-light { color: var(--bg-light) !important; }
.text-dark { color: var(--title) !important; }
.text-body { color: var(--text) !important; }
.text-body-emphasis { color: var(--title) !important; }
.text-body-secondary { color: var(--text-muted) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--erkon-white) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }
.text-reset { color: inherit !important; }
.text-erkon-blue { color: var(--erkon-blue) !important; }
.text-erkon-accent { color: var(--erkon-accent) !important; }
.text-erkon-dark { color: var(--erkon-dark) !important; }
.text-accent-warm { color: #E19A75 !important; }
/* Service-specific colors */
.text-prezracevanje { color: #2f8ac8 !important; }
.text-hlajenje { color: #1e3a8a !important; }
.text-ogrevanje { color: #81142d !important; }
/* Service section color overrides - see section 8 for full button styles */
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--bg-danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-body { background-color: var(--bg-primary) !important; }
.bg-body-tertiary { background-color: var(--bg-secondary) !important; }
.bg-white { background-color: var(--erkon-white) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-primary-subtle { background-color: rgba(var(--erkon-primary-rgb), 0.1) !important; }
.bg-erkon-blue { background-color: var(--erkon-blue) !important; }
.bg-erkon-accent { background-color: var(--erkon-accent) !important; }
.bg-erkon-dark { background-color: var(--erkon-dark) !important; }
.bg-erkon-gray { background-color: var(--erkon-gray) !important; }
.text-bg-primary { color: var(--erkon-white) !important; background-color: var(--primary) !important; }
.text-bg-secondary { color: var(--erkon-white) !important; background-color: var(--secondary) !important; }
/* ===========================================
8. ERKON PREMIUM BUTTON SYSTEM
===========================================
Poenoten button sistem za celotno Erkon temo.
VARIANTE:
- .btn-primary : Temno modra (brand) - primarna akcija
- .btn-secondary : Outline primary - sekundarna akcija
- .btn-accent : Zlata/bronasta - poudarjen CTA
- .btn-light : Bela - za temna ozadja
- .btn-outline-light : Outline bela - sekundarna na temnih ozadjih
- .btn-ghost : Prozorna - subtilna akcija
- .btn-danger : Rdeča - destruktivne akcije
- .btn-success : Zelena - potrditvene akcije
VELIKOSTI: .btn-sm, (default), .btn-lg, .btn-xl
=========================================== */
/* Base Button */
.btn {
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
min-height: 46px;
padding: 0 1.375rem;
font-family: var(--font-heading, 'Libre Franklin', sans-serif);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
border: 2px solid transparent;
border-radius: var(--radius-md, 6px);
cursor: pointer;
user-select: none;
transition: all var(--transition);
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
}
.btn:hover {
transform: translateY(-2px) translateZ(0);
}
.btn:active {
transform: translateY(0) translateZ(0);
transition-duration: 0.1s;
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--erkon-primary-rgb), 0.25);
}
.btn:disabled,
.btn.disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Primary Button */
.btn-primary {
color: var(--erkon-white);
background-color: var(--erkon-primary, var(--erkon-primary));
border-color: var(--erkon-primary, var(--erkon-primary));
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
}
.btn-primary:hover {
color: var(--erkon-white);
background-color: #1a2d5a;
border-color: #1a2d5a;
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
.btn-primary:active {
background-color: #0a1530;
border-color: #0a1530;
}
/* Secondary Button (Outline) */
.btn-secondary {
color: var(--erkon-primary, var(--erkon-primary));
background-color: transparent;
border-color: var(--erkon-primary, var(--erkon-primary));
}
.btn-secondary:hover {
color: var(--erkon-white);
background-color: var(--erkon-primary, var(--erkon-primary));
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
/* Accent Button (Gold) */
.btn-accent {
color: var(--erkon-primary, var(--erkon-primary));
background-color: var(--erkon-accent, #c49a6c);
border-color: var(--erkon-accent, #c49a6c);
box-shadow: 0 4px 14px rgba(196, 154, 108, 0.25);
}
.btn-accent:hover {
background-color: #d4aa7c;
border-color: #d4aa7c;
box-shadow: 0 8px 25px rgba(196, 154, 108, 0.4);
}
/* Light Button */
.btn-light {
color: var(--erkon-primary, var(--erkon-primary));
background-color: var(--erkon-white);
border-color: var(--erkon-white);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.btn-light:hover {
color: var(--erkon-primary, var(--erkon-primary));
background-color: #f8f9fa;
border-color: #f8f9fa;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Dark Button */
.btn-dark {
color: var(--erkon-white);
background-color: #2B2B2B;
border-color: #2B2B2B;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.btn-dark:hover {
color: #2B2B2B;
background-color: var(--erkon-white);
border-color: #2B2B2B;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(43, 43, 43, 0.2);
}
/* Outline Primary */
.btn-outline-primary {
color: var(--erkon-primary, var(--erkon-primary));
border-color: var(--erkon-primary, var(--erkon-primary));
background-color: transparent;
}
.btn-outline-primary:hover {
color: var(--erkon-white);
background-color: var(--erkon-primary, var(--erkon-primary));
border-color: var(--erkon-primary, var(--erkon-primary));
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
/* Outline Secondary */
.btn-outline-secondary {
color: #2B2B2B;
border-color: #2B2B2B;
background-color: transparent;
}
.btn-outline-secondary:hover {
color: var(--erkon-white);
background-color: #2B2B2B;
border-color: #2B2B2B;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(43, 43, 43, 0.3);
}
/* Outline Light */
.btn-outline-light {
color: var(--erkon-white);
border-color: var(--erkon-white);
background-color: transparent;
}
.btn-outline-light:hover {
color: var(--erkon-primary, var(--erkon-primary));
background-color: var(--erkon-white);
border-color: var(--erkon-white);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
/* Danger Button */
.btn-danger {
color: var(--erkon-white);
background-color: var(--color-error, #dc2626);
border-color: var(--color-error, #dc2626);
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}
.btn-danger:hover {
background-color: #b91c1c;
border-color: #b91c1c;
box-shadow: 0 8px 25px rgba(220, 38, 38, 0.35);
}
/* Success Button */
.btn-success {
color: var(--erkon-white);
background-color: var(--color-success, #16a34a);
border-color: var(--color-success, #16a34a);
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
}
.btn-success:hover {
background-color: #15803d;
border-color: #15803d;
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.35);
}
/* Service Button Variants - Premium with shine effect */
.btn-prezracevanje,
.btn-hlajenje,
.btn-ogrevanje {
position: relative;
overflow: hidden;
font-weight: 600;
letter-spacing: 0.5px;
border-width: 2px;
}
/* Shine effect on hover */
.btn-prezracevanje::before,
.btn-hlajenje::before,
.btn-ogrevanje::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.btn-prezracevanje:hover::before,
.btn-hlajenje:hover::before,
.btn-ogrevanje:hover::before {
left: 100%;
}
.btn-prezracevanje {
color: var(--erkon-prezracevanje);
border-color: var(--erkon-prezracevanje);
background-color: transparent;
}
.btn-prezracevanje:hover {
color: var(--erkon-prezracevanje);
background-color: rgba(13, 202, 240, 0.1);
border-color: var(--erkon-prezracevanje);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(13, 202, 240, 0.15);
}
.btn-hlajenje {
color: var(--erkon-hlajenje);
border-color: var(--erkon-hlajenje);
background-color: transparent;
}
.btn-hlajenje:hover {
color: var(--erkon-hlajenje);
background-color: rgba(30, 58, 138, 0.1);
border-color: var(--erkon-hlajenje);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 58, 138, 0.15);
}
.btn-ogrevanje {
color: var(--erkon-ogrevanje);
border-color: var(--erkon-ogrevanje);
background-color: transparent;
}
.btn-ogrevanje:hover {
color: var(--erkon-ogrevanje);
background-color: rgba(129, 20, 45, 0.1);
border-color: var(--erkon-ogrevanje);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(129, 20, 45, 0.15);
}
/* Ghost Button */
.btn-ghost {
color: var(--erkon-primary, var(--erkon-primary));
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.btn-ghost:hover {
background-color: rgba(var(--erkon-primary-rgb), 0.08);
}
/* Button Sizes */
.btn-sm {
min-height: 40px;
padding: 0 1.125rem;
font-size: 0.875rem;
border-radius: var(--radius-sm, 4px);
}
.btn-lg {
min-height: 52px;
padding: 0 1.75rem;
font-size: 1rem;
border-radius: var(--radius-lg, 8px);
}
.btn-xl {
min-height: 58px;
padding: 0 2rem;
font-size: 1.0625rem;
border-radius: var(--radius-lg, 8px);
}
/* Close Button */
.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.25em;
color: #000;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
border: 0;
border-radius: var(--radius-md, 6px);
opacity: 0.5;
cursor: pointer;
transition: opacity var(--transition-fast);
}
.btn-close:hover { opacity: 0.75; }
.btn-close:focus-visible { box-shadow: 0 0 0 3px rgba(var(--erkon-primary-rgb), 0.25); opacity: 1; }
/* Legacy Erkon Button Aliases */
.btn-erkon-primary {
color: var(--erkon-white);
background-color: var(--erkon-primary, var(--erkon-primary));
border: none;
border-color: var(--erkon-primary, var(--erkon-primary));
padding: 0.75rem 1.5rem;
font-weight: 600;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
transition: all var(--duration-normal) ease;
}
.btn-erkon-primary:hover {
color: var(--erkon-white);
background-color: #1a2d5a;
border-color: #1a2d5a;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
.btn-erkon-secondary {
color: var(--erkon-primary, var(--erkon-primary));
background-color: transparent;
border-color: var(--erkon-primary, var(--erkon-primary));
}
.btn-erkon-secondary:hover {
color: var(--erkon-white);
background-color: var(--erkon-primary, var(--erkon-primary));
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
.btn-erkon-light {
color: var(--erkon-primary, var(--erkon-primary));
background-color: var(--erkon-white);
border-color: var(--erkon-white);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.btn-erkon-light:hover {
background-color: #f8f9fa;
border-color: #f8f9fa;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.btn-erkon-outline-light {
color: var(--erkon-white);
background-color: transparent;
border-color: var(--erkon-white);
}
.btn-erkon-outline-light:hover {
color: var(--erkon-primary, var(--erkon-primary));
background-color: var(--erkon-white);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
/* Loading State */
.btn-loading,
.btn-loader {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn-loading::after,
.btn-loader::after {
content: '';
position: absolute;
width: 1.25rem;
height: 1.25rem;
top: 50%;
left: 50%;
margin-top: -0.625rem;
margin-left: -0.625rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-right-color: var(--erkon-white);
border-radius: 50%;
animation: btn-spin 0.75s linear infinite;
}
.btn-secondary.btn-loading::after,
.btn-ghost.btn-loading::after,
.btn-light.btn-loading::after {
border-color: rgba(var(--erkon-primary-rgb), 0.3);
border-right-color: var(--erkon-primary, var(--erkon-primary));
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
/* Arrow Animation */
.btn .btn-arrow {
transition: transform var(--transition);
}
.btn:hover .btn-arrow {
transform: translateX(4px);
}
/* Button Groups */
.btn-group {
display: inline-flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Responsive */
/* ===========================================
9. CARDS
=========================================== */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: var(--erkon-white);
background-clip: border-box;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.card-body {
flex: 1 1 auto;
padding: 1.5rem;
}
.card-title {
margin-bottom: 0.75rem;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-header {
padding: 1rem 1.5rem;
background-color: var(--bg-light);
border-bottom: 1px solid var(--border-color);
}
.card-footer {
padding: 1rem 1.5rem;
background-color: var(--bg-light);
border-top: 1px solid var(--border-color);
}
/* ===========================================
10. FORMS
=========================================== */
.form-control {
display: block;
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--text);
background-color: var(--erkon-white);
background-clip: padding-box;
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}
.form-control:focus {
color: var(--text);
background-color: var(--erkon-white);
border-color: var(--primary);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--erkon-primary-rgb), 0.25);
}
.form-control::placeholder {
color: var(--text-muted);
opacity: 1;
}
.form-control:disabled {
background-color: var(--bg-light);
opacity: 1;
}
.form-select {
display: block;
width: 100%;
padding: 0.75rem 2.25rem 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--text);
background-color: var(--erkon-white);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
appearance: none;
}
.form-select:focus {
border-color: var(--primary);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--erkon-primary-rgb), 0.25);
}
.form-label {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-check {
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
.form-check-input {
float: left;
margin-left: -1.5em;
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
background-color: var(--erkon-white);
border: 1px solid var(--border-color);
border-radius: var(--radius-base);
appearance: none;
}
.form-check-input[type="checkbox"] {
border-radius: var(--radius-base);
}
.form-check-input[type="radio"] {
border-radius: 50%;
}
.form-check-input:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.form-check-input:checked[type="checkbox"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-label {
cursor: pointer;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group > .form-control {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--text);
text-align: center;
white-space: nowrap;
background-color: var(--bg-light);
border: 1px solid var(--border-color);
}
/* ===========================================
11. ALERTS
=========================================== */
.alert {
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: var(--radius);
}
.alert-info {
color: #055160;
background-color: #cff4fc;
border-color: #b6effb;
}
.alert-danger {
color: #842029;
background-color: #f8d7da;
border-color: #f5c2c7;
}
.alert-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
}
.alert-warning {
color: #664d03;
background-color: #fff3cd;
border-color: #ffecb5;
}
.alert-dismissible {
padding-right: 3rem;
}
.alert-dismissible .btn-close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 1.25rem 1rem;
}
.alert-dismissing {
opacity: 0;
transform: translateY(-10px);
transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease;
}
/* ===========================================
12. BORDERS & SHADOWS
=========================================== */
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-start { border-left: 1px solid var(--border-color) !important; }
.border-end { border-right: 1px solid var(--border-color) !important; }
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-light { border-color: var(--bg-light) !important; }
.border-dark { border-color: var(--bg-dark) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--radius-sm) !important; }
.rounded-2 { border-radius: var(--radius) !important; }
.rounded-3 { border-radius: var(--radius-3) !important; }
.rounded-4 { border-radius: var(--radius-4) !important; }
.rounded-circle { border-radius: var(--radius-circle) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-start-4 { border-top-left-radius: var(--radius-4) !important; border-bottom-left-radius: var(--radius-4) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-none { box-shadow: none !important; }
/* ===========================================
13. POSITION & SIZING
=========================================== */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }
.end-0 { right: 0 !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }
/* ===========================================
14. OPACITY & VISIBILITY
=========================================== */
.opacity-0 { opacity: 0 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Skip-to-content link for keyboard navigation (WCAG 2.4.1) */
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--erkon-primary);
color: var(--erkon-white);
padding: 8px 16px;
text-decoration: none;
z-index: 100000;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within),
.screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ===========================================
15. LISTS
=========================================== */
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline-item {
display: inline-block;
}
.list-inline-item:not(:last-child) {
margin-right: 0.5rem;
}
.list-group {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
.list-group-item {
position: relative;
display: block;
padding: 0.75rem 1rem;
color: var(--text);
background-color: var(--erkon-white);
border: 1px solid var(--border-color);
}
.list-group-item:first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.list-group-item:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.list-group-item + .list-group-item {
border-top-width: 0;
}
.list-group-item-action {
width: 100%;
color: var(--text);
text-align: inherit;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
z-index: 1;
color: var(--text);
text-decoration: none;
background-color: var(--bg-light);
}
/* ===========================================
16. TABLES
=========================================== */
.table {
width: 100%;
margin-bottom: 1rem;
color: var(--text);
vertical-align: top;
border-color: var(--border-color);
}
.table > :not(caption) > * > * {
padding: 0.75rem;
background-color: transparent;
border-bottom-width: 1px;
box-shadow: inset 0 0 0 9999px transparent;
}
.table > tbody {
vertical-align: inherit;
}
.table > thead {
vertical-align: bottom;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ===========================================
17. NAVIGATION
=========================================== */
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: 0.5rem 1rem;
color: var(--primary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
}
.nav-link:hover,
.nav-link:focus {
color: var(--secondary);
}
.nav-link.disabled {
color: var(--text-muted);
pointer-events: none;
cursor: default;
}
.nav-tabs {
border-bottom: 1px solid var(--border-color);
}
.nav-tabs .nav-link {
margin-bottom: -1px;
background: none;
border: 1px solid transparent;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
border-color: var(--bg-light) var(--bg-light) var(--border-color);
}
.nav-tabs .nav-link.active {
color: var(--text);
background-color: var(--erkon-white);
border-color: var(--border-color) var(--border-color) var(--erkon-white);
}
.nav-item {
margin-bottom: 0;
}
.navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-brand {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
text-decoration: none;
white-space: nowrap;
}
/* ===========================================
18. DROPDOWN (Vanilla)
=========================================== */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
z-index: 1000;
display: none;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0;
font-size: 1rem;
color: var(--text);
text-align: left;
list-style: none;
background-color: var(--erkon-white);
background-clip: padding-box;
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.dropdown-menu.show,
.dropdown.open .dropdown-menu,
.has-dropdown.open .dropdown-menu,
.menu-item-has-children.open .sub-menu {
display: block;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.5rem 1rem;
clear: both;
font-weight: 400;
color: var(--text);
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: var(--title);
background-color: var(--bg-light);
}
.dropdown-item.active,
.dropdown-item:active {
color: var(--erkon-white);
background-color: var(--primary);
}
.dropdown-item-text {
display: block;
padding: 0.5rem 1rem;
color: var(--text);
}
.dropdown-header {
display: block;
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 0.875rem;
color: var(--text-muted);
white-space: nowrap;
}
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid var(--border-color);
}
.has-dropdown .dropdown,
.menu-item-has-children .sub-menu {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--duration-slow) ease;
}
.has-dropdown.open .dropdown,
.has-dropdown:hover .dropdown,
.menu-item-has-children.open .sub-menu,
.menu-item-has-children:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ===========================================
19. PAGINATION
=========================================== */
.pagination {
display: flex;
padding-left: 0;
list-style: none;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
color: var(--primary);
text-decoration: none;
background-color: var(--erkon-white);
border: 1px solid var(--border-color);
transition: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}
.page-link:hover {
z-index: 2;
color: var(--secondary);
background-color: var(--bg-light);
border-color: var(--border-color);
}
.page-item:first-child .page-link {
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
}
.page-item:last-child .page-link {
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.page-item.active .page-link {
z-index: 3;
color: var(--erkon-white);
background-color: var(--primary);
border-color: var(--primary);
}
.page-item.disabled .page-link {
color: var(--text-muted);
pointer-events: none;
background-color: var(--erkon-white);
}
/* ===========================================
20. ACCORDION (Vanilla)
=========================================== */
.accordion {
--accordion-border-color: var(--border-color);
--accordion-btn-padding-x: 1.25rem;
--accordion-btn-padding-y: 1rem;
--accordion-body-padding-x: 1.25rem;
--accordion-body-padding-y: 1rem;
}
.accordion-item {
background-color: var(--erkon-white);
border: 1px solid var(--accordion-border-color);
}
.accordion-item:first-of-type {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.accordion-item:last-of-type {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.accordion-item:not(:first-of-type) {
border-top: 0;
}
.accordion-header {
margin-bottom: 0;
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
font-size: 1rem;
color: var(--text);
text-align: left;
background-color: var(--erkon-white);
border: 0;
overflow-anchor: none;
transition: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
cursor: pointer;
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: var(--bg-secondary);
}
.accordion-button::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 1.25rem;
transition: transform var(--duration-normal) ease-in-out;
}
.accordion-button:not(.collapsed)::after {
transform: rotate(-180deg);
}
.accordion-body {
padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
}
.accordion-collapse {
display: none;
}
.accordion-collapse.show {
display: block;
}
/* ===========================================
21. OFFCANVAS (Vanilla)
=========================================== */
.offcanvas {
position: fixed;
bottom: 0;
z-index: 1045;
display: flex;
flex-direction: column;
max-width: 100%;
visibility: hidden;
background-color: var(--erkon-white);
background-clip: padding-box;
outline: 0;
transition: transform var(--duration-slow) ease-in-out;
}
.offcanvas-start {
top: 0;
left: 0;
width: 400px;
border-right: 1px solid var(--border-color);
transform: translateX(-100%);
}
.offcanvas-end {
top: 0;
right: 0;
width: 400px;
border-left: 1px solid var(--border-color);
transform: translateX(100%);
}
.offcanvas.show {
visibility: visible;
transform: none;
}
.offcanvas-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.offcanvas-title {
margin-bottom: 0;
line-height: 1.5;
}
.offcanvas-body {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
}
/* ===========================================
22. SPINNERS
=========================================== */
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -0.125em;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border 0.75s linear infinite;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.2em;
}
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
/* ===========================================
23. HEADER STYLES
Based on primer-dobre-prakse design
=========================================== */
/* Top Bar - nad headerjem */
/* Top Bar - inside master wrapper */
.top-bar {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: #1a2744;
padding: 10px clamp(15px, 3vw, 25px);
max-height: 60px;
overflow: hidden;
transition: all var(--duration-slow) ease;
}
/* Master Header Wrapper - FIXED (prevents scroll jitter) */
.master-header-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
width: 100%;
background: white;
overflow: visible;
}
/* WP Admin Bar Handling */
.admin-bar .master-header-wrapper {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .master-header-wrapper {
top: 46px;
}
}
/* Content wrapper padding to clear fixed header */
/* Desktop: top-bar(44px) + header(102px) = 146px, use 150px */
.wrapper {
padding-top: 150px;
}
/* When wrapper follows breadcrumbs, breadcrumb handles the offset */
.breadcrumb-wrapper + .wrapper {
padding-top: 0;
}
/* Reset nested site-main */
.wrapper .site-main {
padding-top: 0;
}
.admin-bar .wrapper {
padding-top: 182px; /* 150px + admin bar (32px) */
}
.admin-bar .breadcrumb-wrapper + .wrapper {
padding-top: 0;
}
@media (max-width: 768px) {
/* Mobile: no top-bar, header only (64px), use 70px */
.wrapper {
padding-top: 70px;
}
.breadcrumb-wrapper + .wrapper {
padding-top: 0;
}
.admin-bar .wrapper {
padding-top: 116px; /* 70px + mobile admin bar (46px) */
}
.admin-bar .breadcrumb-wrapper + .wrapper {
padding-top: 0;
}
}
/* Additional wrappers that need padding for fixed nav offset */
#single-wrapper,
#archive-wrapper,
#author-wrapper,
#search-wrapper,
#tag-wrapper,
#single-job-wrapper,
#error-404-wrapper,
.breadcrumb-wrapper,
.single-header,
.outer-shop-wrapper,
.outer-single-product-wrapper {
padding-top: 150px;
}
/* When wrapper follows breadcrumbs, only breadcrumb needs padding */
.breadcrumb-wrapper + .single-header,
.breadcrumb-wrapper + #archive-wrapper,
.breadcrumb-wrapper + #author-wrapper,
.breadcrumb-wrapper + #search-wrapper,
.breadcrumb-wrapper + #tag-wrapper,
.breadcrumb-wrapper + #single-job-wrapper {
padding-top: 0;
}
.admin-bar #single-wrapper,
.admin-bar #archive-wrapper,
.admin-bar #author-wrapper,
.admin-bar #search-wrapper,
.admin-bar #tag-wrapper,
.admin-bar #single-job-wrapper,
.admin-bar #error-404-wrapper,
.admin-bar .breadcrumb-wrapper,
.admin-bar .single-header,
.admin-bar .outer-shop-wrapper,
.admin-bar .outer-single-product-wrapper {
padding-top: 182px; /* 150px + admin bar (32px) */
}
.admin-bar .breadcrumb-wrapper + .single-header,
.admin-bar .breadcrumb-wrapper + #archive-wrapper,
.admin-bar .breadcrumb-wrapper + #author-wrapper,
.admin-bar .breadcrumb-wrapper + #search-wrapper,
.admin-bar .breadcrumb-wrapper + #tag-wrapper,
.admin-bar .breadcrumb-wrapper + #single-job-wrapper {
padding-top: 0;
}
@media (max-width: 768px) {
#single-wrapper,
#archive-wrapper,
#author-wrapper,
#search-wrapper,
#tag-wrapper,
#single-job-wrapper,
#error-404-wrapper,
.breadcrumb-wrapper,
.single-header,
.outer-shop-wrapper,
.outer-single-product-wrapper {
padding-top: 70px; /* Mobile: header only (64px) + buffer */
}
.breadcrumb-wrapper + .single-header,
.breadcrumb-wrapper + #archive-wrapper,
.breadcrumb-wrapper + #author-wrapper,
.breadcrumb-wrapper + #search-wrapper,
.breadcrumb-wrapper + #tag-wrapper,
.breadcrumb-wrapper + #single-job-wrapper {
padding-top: 0;
}
.admin-bar #single-wrapper,
.admin-bar #archive-wrapper,
.admin-bar #author-wrapper,
.admin-bar #search-wrapper,
.admin-bar #tag-wrapper,
.admin-bar #single-job-wrapper,
.admin-bar #error-404-wrapper,
.admin-bar .breadcrumb-wrapper,
.admin-bar .single-header,
.admin-bar .outer-shop-wrapper,
.admin-bar .outer-single-product-wrapper {
padding-top: 116px; /* 70px + mobile admin bar (46px) */
}
.admin-bar .breadcrumb-wrapper + .single-header,
.admin-bar .breadcrumb-wrapper + #archive-wrapper,
.admin-bar .breadcrumb-wrapper + #author-wrapper,
.admin-bar .breadcrumb-wrapper + #search-wrapper,
.admin-bar .breadcrumb-wrapper + #tag-wrapper,
.admin-bar .breadcrumb-wrapper + #single-job-wrapper {
padding-top: 0;
}
}
.top-bar-container {
width: 100%;
max-width: min(1170px, 100%);
min-width: 0;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar-contact {
display: flex;
gap: 24px;
}
.top-bar-phone,
.top-bar-email {
display: flex;
align-items: center;
gap: 8px;
color: var(--erkon-white);
font-size: 14px;
font-weight: 400;
transition: color var(--duration-slow) ease;
}
.top-bar-phone:hover,
.top-bar-email:hover {
color: var(--accent);
text-decoration: none;
}
.top-bar-phone i,
.top-bar-email i {
font-size: 12px;
}
.top-bar-social {
display: flex;
gap: 8px;
margin-right: -15px;
}
.top-bar-social a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
color: var(--erkon-white);
font-size: 14px;
text-decoration: none;
transition: color var(--duration-slow) ease, transform var(--duration-slow) ease;
}
.top-bar-social a:hover {
color: var(--accent);
transform: translateY(-2px);
}
/* Main Header */
/* Main Header - inside wrapper */
.header {
position: relative;
z-index: 2;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 28px clamp(15px, 3vw, 40px);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.95) 25%, rgba(242, 248, 255, 0.92) 75%);
background-color: transparent;
box-shadow: 0 4px 20px rgba(var(--erkon-primary-rgb), 0.06),
0 1px 3px rgba(0, 0, 0, 0.04);
transition: padding var(--transition), background var(--transition), box-shadow var(--transition);
}
.header.scrolled {
padding: 16px clamp(15px, 3vw, 40px);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Admin bar + scrolled */
/* Hide top-bar on scroll - smooth collapse */
body.scrolled .top-bar {
height: 0;
min-height: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
/* backdrop-filter creates containing block for fixed children - remove when mobile menu is open */
body.menu-open .header.scrolled {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.header-container {
position: relative;
width: 100%;
max-width: min(1170px, 100%);
min-width: 0;
margin: 0 auto;
display: flex;
align-items: center;
}
/* Header Logo - auto width based on image */
.header-logo {
flex: 0 0 auto;
}
.header-logo img {
width: 190px;
height: auto;
}
/* Header Nav - flexible, takes remaining space */
.header-nav {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
min-width: 0;
}
.header-nav ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.header-nav li {
position: relative;
}
.header-nav > ul > li > a {
display: block;
padding: 10px 18px;
font-family: 'Libre Franklin', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--text);
transition: color var(--duration-slow);
position: relative;
}
.header-nav > ul > li > a:hover,
.header-nav > ul > li.active > a,
.header-nav > ul > li.current-menu-item > a,
.header-nav > ul > li.current-menu-ancestor > a {
color: var(--secondary);
}
/* Nav underline animation */
.header-nav > ul > li > a::after {
content: '';
position: absolute;
bottom: 5px;
left: 18px;
right: 18px;
height: 2px;
background: var(--secondary);
transform: scaleX(0);
transition: transform var(--duration-slow) ease;
}
.header-nav > ul > li > a:hover::after,
.header-nav > ul > li.active > a::after,
.header-nav > ul > li.current-menu-item > a::after {
transform: scaleX(1);
}
/* Dropdown arrow */
.header-nav .dropdown-arrow {
width: 12px;
height: 12px;
margin-left: 5px;
transition: transform var(--duration-slow) ease;
}
.header-nav li.has-dropdown:hover .dropdown-arrow {
transform: rotate(180deg);
}
/* Dropdown menu */
.header-nav li.has-dropdown {
position: relative;
}
.header-nav .dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
min-width: 240px;
background: var(--bg-primary);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-radius: var(--radius-md);
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all var(--duration-slow) ease;
z-index: 1000;
display: flex;
flex-direction: column;
padding: 0;
list-style: none;
}
.header-nav li.has-dropdown:hover .dropdown,
.header-nav li.has-dropdown.touch-open .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.header-nav .dropdown li {
display: block;
width: 100%;
border-bottom: 1px solid var(--border-color);
}
.header-nav .dropdown li:last-child {
border-bottom: none;
}
.header-nav .dropdown a {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
padding: 14px 24px;
font-size: 14px;
font-weight: 500;
color: var(--secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--duration-normal) ease;
box-sizing: border-box;
white-space: nowrap;
}
.header-nav .dropdown a img,
.header-nav .dropdown a .dropdown-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.header-nav .dropdown a:hover {
color: var(--secondary);
background: var(--bg-secondary);
padding-left: 28px;
}
/* Main content - no margin (hero section handles its own offset) */
.site-main,
main {
margin-top: 0;
}
/* Sticky header handles spacing - no manual offset needed */
/* Header Actions (Cart, etc.) - flex-based layout for responsive behavior */
.header-actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
padding-left: 18px;
}
.header-action-item {
position: relative;
}
.cart-action {
display: flex;
align-items: center;
}
.cart-action[data-cart-count="0"] {
display: none;
}
.header-actions:has(> .cart-action[data-cart-count="0"]) {
display: none;
}
.header-container:has(.cart-action[data-cart-count="0"]) .header-nav > ul > li:last-child > a {
padding-right: 0;
}
/* Font Awesome Icons - Base Styles */
.fa-solid,
.fa-brands,
.fa-regular {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* Cart icon wrapper */
.cart-icon-wrapper {
position: relative;
cursor: pointer;
padding: 10px 0;
}
.cart-icon-wrapper .cart-icon {
font-size: 18px;
color: var(--primary);
transition: color var(--duration-normal) ease;
}
.cart-icon-wrapper:hover .cart-icon {
color: var(--secondary);
}
/* FrontKit trigger - nevidno ampak klikabilno */
.cart-icon-wrapper .fk-cart-trigger {
cursor: pointer;
}
/* FrontKit Cart Icon Override */
/* Sidebar cart ikona - sredinska poravnava */
/* Fallback cart icon link (when FrontKit not active) */
.cart-icon-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--primary) !important;
background: transparent !important;
border: none !important;
font-size: 20px !important;
padding: 10px 0 !important;
transition: color var(--duration-slow) ease !important;
}
.cart-icon-link:hover {
color: var(--secondary) !important;
}
.cart-icon-link .fa-solid {
font-size: 18px;
color: var(--primary);
transition: color var(--duration-normal) ease;
}
.cart-icon-link:hover .fa-solid {
color: var(--secondary);
}
.cart-count {
position: absolute;
top: -5px;
right: -8px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: 600;
line-height: 16px;
text-align: center;
color: var(--erkon-white);
background: var(--secondary);
border-radius: 50%;
}
/* Mobile menu toggle */
.menu-toggle {
display: none;
background: none;
border: none;
padding: 10px;
cursor: pointer;
position: relative;
z-index: 1001;
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background: var(--text);
margin: 4px 0;
transition: all var(--duration-slow) ease;
border-radius: var(--radius-sm);
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
body.menu-open {
overflow: hidden;
}
/* =========================================
HEADER RESPONSIVE
========================================= */
/* ===========================================
25. WOOCOMMERCE STYLES
Base WooCommerce styles moved to css/woocommerce.css
Loaded conditionally when WooCommerce is active.
=========================================== */
/* ===========================================
26. BLOG & POSTS
=========================================== */
.single-post-wrapper {
max-width: 800px;
margin: 0 auto;
padding: 60px 1rem;
background: var(--erkon-white);
}
.entry-header {
margin-bottom: 1.5rem;
}
.entry-title {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 0.5rem;
}
.entry-content {
line-height: 1.7; /* prose content */
}
.entry-content p {
margin-bottom: 1.5rem;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.entry-content img {
border-radius: var(--radius);
margin: 1.5rem 0;
}
.entry-content blockquote {
border-left: 4px solid var(--primary);
padding-left: 1.5rem;
margin: 1.5rem 0;
font-style: italic;
color: var(--text-muted);
}
.entry-thumbnail img {
width: 100%;
border-radius: var(--radius);
}
.post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.post-card {
background: var(--erkon-white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.post-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.post-navigation {
display: flex;
justify-content: space-between;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.comments-area {
margin-top: 3rem;
}
.comment-list {
list-style: none;
padding: 0;
}
.comment-body {
padding: 1rem;
margin-bottom: 1rem;
background: var(--bg-light);
border-radius: var(--radius);
}
.comment-content {
margin-top: 0.5rem;
}
.comment-reply-title {
margin-top: 2rem;
margin-bottom: 1rem;
}
/* ===========================================
27. CUSTOM COMPONENTS
=========================================== */
.hero-section {
position: relative;
min-height: 55vh;
min-height: 55dvh; /* Modern viewport unit for mobile browsers */
padding-top: 140px;
padding-bottom: var(--section-py-compact); /* 80px */
display: flex;
align-items: flex-start; /* Start content from top (after padding) */
background-color: var(--erkon-primary);
background-size: cover;
background-position: center;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
}
.hero-services {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 40px;
}
/* Premium Hero Service Cards - Glassmorphism */
.hero-service-row {
display: flex;
align-items: center;
width: 350px;
gap: 8px;
padding: 10px 14px;
margin-bottom: 8px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
transition: all var(--duration-slower) cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
cursor: pointer;
}
/* Subtle gradient shine on hover */
.hero-service-row::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.08),
transparent
);
transition: left 0.6s ease;
}
.hero-service-row:hover::before {
left: 100%;
}
.hero-service-row:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
transform: translateX(12px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25),
0 4px 12px rgba(var(--erkon-secondary-rgb), 0.15);
}
/* Icon container - WCAG 44px minimum tap target */
.hero-service-icon {
width: 44px;
height: 44px;
min-width: var(--touch-target-min, 44px);
min-height: var(--touch-target-min, 44px);
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
flex-shrink: 0;
transition: all var(--duration-slow) ease;
}
.hero-service-row:hover .hero-service-icon {
background: rgba(255, 255, 255, 0.18);
transform: scale(1.05);
}
.hero-service-icon img {
width: 24px;
height: 24px;
object-fit: contain;
filter: brightness(1.1);
}
.hero-service-text {
padding-left: 0;
}
.hero-service-text a {
font-family: 'Libre Franklin', sans-serif;
font-size: clamp(0.875rem, 1.5vw, 0.9375rem); /* 14px-15px fluid */
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.2px;
color: var(--erkon-white);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all var(--duration-slow) ease;
}
.hero-service-row:hover .hero-service-text a {
color: var(--erkon-prezracevanje);
}
/* Stretched link - makes entire card clickable */
.hero-service-text a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Icon Feature Block - Stats sekcija */
.icon-feature-block {
background: var(--bg-primary);
padding: var(--space-3xl) var(--container-px);
}
.icon-feature-wrapper {
max-width: 1170px;
margin: 0 auto;
}
.icon-feature-wrapper .grid-row {
justify-content: center;
}
.icon-feature-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
padding: 0 30px;
position: relative;
}
/* Vertikalne črte med elementi */
.icon-feature-wrapper .col-lg-3:not(:last-child) .icon-feature-item::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 1px;
background: var(--border-default);
}
.icon-feature-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-feature-icon img {
width: 60px;
height: 60px;
object-fit: contain;
}
.icon-feature-heading {
font-family: 'Libre Franklin', sans-serif;
font-size: 48px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
margin: 0;
}
.icon-feature-content {
font-family: 'Work Sans', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
}
@media (max-width: 1024px) {
.icon-feature-wrapper .col-lg-3:not(:last-child) .icon-feature-item::after {
display: none;
}
.icon-feature-heading {
font-size: 36px;
}
}
/* Hero services tablet layout */
@media (max-width: 1024px) {
.hero-services {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 50px;
padding-left: 0;
}
.hero-service-row {
flex-direction: column;
text-align: center;
margin-bottom: 0;
width: 150px;
}
.hero-service-row:hover {
transform: none;
}
.hero-service-icon,
.hero-service-text {
flex: none;
text-align: center;
}
.hero-service-text {
padding-left: 0;
margin-top: 10px;
}
.hero-service-text a {
font-size: 18px;
line-height: 28px;
}
}
/* Mobile 2x2 grid adjustments */
@media (max-width: 639px) {
.icon-feature-wrapper .grid-row {
row-gap: 24px;
}
.icon-feature-item {
gap: 4px;
padding: 0;
justify-content: center;
}
.icon-feature-icon,
.icon-feature-icon img {
width: 44px;
height: 44px;
}
.icon-feature-heading {
font-size: 26px;
line-height: 1;
}
.icon-feature-content {
font-size: 11px;
margin-top: 2px;
}
}
.icon-stats-wrapper {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.icon-stat-item {
text-align: center;
flex: 1;
min-width: 150px;
}
.icon-stat-icon {
margin-bottom: 0.5rem;
}
.icon-stat-value,
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1.2;
}
.icon-stat-label {
font-size: 0.875rem;
color: var(--text-muted);
}
.icon-list-widget,
.icon-list-block {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.icon-list-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.icon-list-icon {
flex-shrink: 0;
color: var(--primary);
}
.icon-list-text {
color: var(--text);
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-info-item,
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.category-grid-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.category-grid-item {
background: var(--erkon-white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.category-grid-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.category-grid-item-image img {
width: 100%;
height: 150px;
object-fit: cover;
}
.category-grid-item-title {
padding: 1rem;
font-weight: 600;
text-align: center;
}
/* ===========================================
PARTNERS SECTION
padding: 25px, background: var(--bg-secondary)
=========================================== */
.partners {
padding: var(--section-py-small) var(--container-px); /* 24px 32px - standardizirano */
background-color: var(--bg-secondary);
}
.partners-container {
max-width: 1170px;
margin: 0 auto;
}
.partners-grid {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--gap-md);
}
.partners-track {
display: contents;
}
.partners-grid img {
height: 45px;
width: auto;
filter: grayscale(0%);
opacity: 1;
}
/* 8.2 Partners Infinite Marquee (JS-powered) */
@media (min-width: 768px) {
.partners-grid {
justify-content: flex-start;
flex-wrap: nowrap;
gap: 0;
}
.partners-track {
display: flex;
align-items: center;
gap: 48px;
flex-shrink: 0;
padding-right: 48px;
}
.partners-container {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
}
/* Accessibility: Pause animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.partners-grid,
[class*="animate"],
[class*="animation"] {
animation: none !important;
transition: none !important;
}
}
/* Responsive */
/* ===========================================
KNOWLEDGE BASE - Premium Design System
=========================================== */
.knowledge-base-wrapper {
padding: 0;
overflow-x: hidden;
}
/* ========================================
KB HERO SECTION
======================================== */
.kb-hero {
position: relative;
padding: var(--space-16) 0 var(--space-12);
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a3a6e 50%, var(--erkon-secondary) 100%);
overflow: hidden;
}
.kb-hero-bg {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(196, 154, 108, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(var(--erkon-secondary-rgb), 0.2) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 30%);
pointer-events: none;
}
.kb-hero-bg::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
animation: kb-float 20s ease-in-out infinite;
}
.kb-hero-bg::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(196, 154, 108, 0.1) 0%, transparent 70%);
animation: kb-float 15s ease-in-out infinite reverse;
}
@keyframes kb-float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -30px) rotate(5deg); }
66% { transform: translate(-20px, 20px) rotate(-5deg); }
}
.kb-hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.kb-hero-label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-6);
}
.kb-hero-label svg,
.kb-hero-label i {
opacity: 0.8;
}
.kb-hero-title {
font-size: var(--text-5xl);
font-weight: var(--font-bold);
color: var(--erkon-white);
line-height: var(--leading-tight);
margin-bottom: var(--space-4);
letter-spacing: var(--tracking-tight);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.kb-hero-subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.8);
line-height: var(--leading-relaxed);
max-width: 600px;
margin: 0 auto var(--space-8);
}
.kb-hero-stats {
display: inline-flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-4) var(--space-6);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-2xl);
}
.kb-stat {
text-align: center;
}
.kb-stat-number {
display: block;
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--erkon-white);
line-height: 1;
}
.kb-stat-label {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-top: var(--space-1);
}
.kb-stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
}
/* ========================================
KB SECTION HEADERS
======================================== */
.kb-section-header {
margin-bottom: var(--space-8);
}
.kb-section-header-content {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* .kb-section-label replaced by .subtitle .subtitle--secondary .subtitle--icon */
.kb-section-title {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--text-brand);
letter-spacing: var(--tracking-tight);
margin: 0;
}
/* ========================================
KB FEATURED SECTION
======================================== */
.kb-featured-section {
padding: var(--space-16) 0;
background: var(--surface-muted);
position: relative;
}
.kb-featured-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-default), transparent);
}
.kb-featured-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
/* Featured Card - Premium */
.kb-featured-card {
position: relative;
background: var(--surface-default);
border-radius: var(--radius-2xl);
overflow: hidden;
border: 1px solid var(--border-default);
box-shadow: var(--shadow-sm);
transition: all var(--duration-slow) var(--ease-out);
display: flex;
flex-direction: column;
}
.kb-featured-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(var(--erkon-primary-rgb), 0.25);
border-color: transparent;
}
/* .kb-featured-badge replaced by .subtitle .subtitle--featured .subtitle--icon */
.kb-featured-image {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.kb-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slower) var(--ease-out);
}
.kb-featured-card:hover .kb-featured-image img {
transform: scale(1.08);
}
.kb-featured-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(var(--erkon-primary-rgb), 0.6) 100%);
pointer-events: none;
}
.kb-featured-content {
padding: var(--space-6);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.kb-featured-meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.kb-featured-category {
display: inline-flex;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--erkon-secondary);
background: rgba(var(--erkon-secondary-rgb), 0.1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
}
.kb-featured-reading-time {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.kb-featured-reading-time svg {
opacity: 0.6;
}
.kb-featured-title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--text-brand);
line-height: var(--leading-snug);
margin-bottom: var(--space-3);
}
.kb-featured-title a {
color: inherit;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.kb-featured-title a:hover {
color: var(--erkon-secondary);
}
.kb-featured-excerpt {
font-size: var(--text-base);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
flex-grow: 1;
margin-bottom: var(--space-4);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kb-featured-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-4);
border-top: 1px solid var(--border-muted);
}
.kb-featured-date {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.kb-featured-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--erkon-secondary);
text-decoration: none;
transition: all var(--duration-fast) var(--ease-out);
}
.kb-featured-link:hover {
color: var(--erkon-primary);
gap: var(--space-3);
}
.kb-featured-link svg {
transition: transform var(--duration-fast) var(--ease-out);
}
.kb-featured-link:hover svg {
transform: translateX(4px);
}
/* ========================================
KB ARTICLES SECTION
======================================== */
.kb-articles-section {
padding: var(--space-16) 0 var(--space-20);
}
/* Filters */
.kb-filters-wrapper {
margin-bottom: var(--space-8);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--border-default);
}
.kb-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.kb-filter-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
background: var(--surface-default);
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
.kb-filter-btn svg {
opacity: 0.5;
transition: opacity var(--duration-fast);
}
.kb-filter-btn:hover {
color: var(--erkon-secondary);
border-color: var(--erkon-secondary);
background: rgba(var(--erkon-secondary-rgb), 0.05);
}
.kb-filter-btn:hover svg {
opacity: 0.8;
}
.kb-filter-btn.active {
color: var(--text-inverse);
background: linear-gradient(135deg, var(--erkon-primary), #1a3a6e);
border-color: transparent;
box-shadow: 0 4px 12px rgba(var(--erkon-primary-rgb), 0.3);
}
.kb-filter-btn.active svg {
opacity: 1;
}
.kb-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-1);
font-size: 10px;
font-weight: var(--font-semibold);
background: rgba(0, 0, 0, 0.08);
border-radius: var(--radius-full);
}
.kb-filter-btn.active .kb-filter-count {
background: rgba(255, 255, 255, 0.2);
}
/* Articles Grid */
.kb-articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
/* Article Card */
.kb-article-card {
position: relative;
background: var(--surface-default);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-default);
transition: all var(--duration-normal) var(--ease-out);
}
.kb-article-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -12px rgba(var(--erkon-primary-rgb), 0.2);
border-color: transparent;
}
.kb-article-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.kb-article-image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, var(--surface-muted), var(--surface-subtle));
}
.kb-article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.kb-article-card:hover .kb-article-image img {
transform: scale(1.08);
}
.kb-article-body {
padding: var(--space-5);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.kb-article-category {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--erkon-secondary);
margin-bottom: var(--space-2);
}
.kb-article-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-brand);
line-height: var(--leading-snug);
margin-bottom: var(--space-2);
transition: color var(--duration-fast) var(--ease-out);
}
.kb-article-card:hover .kb-article-title {
color: var(--erkon-secondary);
}
.kb-article-excerpt {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-4);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kb-article-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--border-muted);
}
.kb-article-date {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.kb-article-read-more {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--erkon-secondary);
transition: gap var(--duration-fast) var(--ease-out);
}
.kb-article-card:hover .kb-article-read-more {
gap: var(--space-2);
}
.kb-article-read-more svg {
transition: transform var(--duration-fast) var(--ease-out);
}
.kb-article-card:hover .kb-article-read-more svg {
transform: translateX(3px);
}
/* Article Meta */
.kb-article-meta {
display: flex;
align-items: center;
gap: var(--space-3);
}
.kb-article-reading-time {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.kb-article-reading-time svg {
opacity: 0.6;
}
/* Article Image Placeholder */
.kb-article-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
color: var(--gray-400);
}
.kb-article-image-placeholder svg {
opacity: 0.5;
}
/* No Results */
.kb-no-results {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-16);
text-align: center;
color: var(--text-tertiary);
}
.kb-no-results svg {
opacity: 0.4;
}
.kb-no-results p {
font-size: var(--text-lg);
margin: 0;
}
/* ========================================
KB LOAD MORE
======================================== */
.kb-load-more-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-10);
}
.kb-load-more {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: var(--space-4) var(--space-8);
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--erkon-primary);
background: transparent;
border: 2px solid var(--erkon-primary);
border-radius: var(--radius-full);
cursor: pointer;
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
}
.kb-load-more::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--erkon-primary), #1a3a6e);
opacity: 0;
transition: opacity var(--duration-normal);
}
.kb-load-more:hover {
color: var(--text-inverse);
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 10px 30px -10px rgba(var(--erkon-primary-rgb), 0.4);
}
.kb-load-more:hover::before {
opacity: 1;
}
.kb-load-more-content,
.load-more-loading {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.load-more-loading {
display: none;
}
.kb-load-more.loading .kb-load-more-content {
display: none;
}
.kb-load-more.loading .load-more-loading {
display: inline-flex;
}
.load-more-loading svg {
animation: kb-spin 1s linear infinite;
}
@keyframes kb-spin {
to { transform: rotate(360deg); }
}
.kb-load-more-arrow {
transition: transform var(--duration-fast);
}
.kb-load-more:hover .kb-load-more-arrow {
transform: translateY(3px);
}
.kb-load-more-info {
font-size: var(--text-sm);
color: var(--text-tertiary);
margin: 0;
}
.kb-load-more-info span {
font-weight: var(--font-semibold);
color: var(--text-secondary);
}
/* ========================================
KB RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.kb-hero {
padding: var(--space-12) 0 var(--space-10);
}
.kb-hero-title {
font-size: var(--text-4xl);
}
.kb-featured-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.kb-articles-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
}
@media (max-width: 768px) {
.kb-hero {
padding: var(--space-10) 0 var(--space-8);
}
.kb-hero-title {
font-size: var(--text-3xl);
}
.kb-hero-subtitle {
font-size: var(--text-base);
}
.kb-hero-stats {
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
}
.kb-stat-divider {
width: 60px;
height: 1px;
}
.kb-section-title {
font-size: var(--text-2xl);
}
.kb-featured-section,
.kb-articles-section {
padding: var(--space-10) 0;
}
.kb-filters-wrapper {
margin: 0 calc(-1 * var(--space-4));
padding: 0 var(--space-4) var(--space-4);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.kb-filters {
flex-wrap: nowrap;
padding-bottom: var(--space-2);
}
.kb-filter-btn {
white-space: nowrap;
flex-shrink: 0;
}
.kb-articles-grid {
grid-template-columns: 1fr;
}
.kb-featured-content {
padding: var(--space-5);
}
.kb-load-more {
width: 100%;
max-width: 300px;
}
}
.job-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
.jobs-empty {
text-align: center;
padding: 3rem;
color: var(--text-muted);
}
/* ===========================================
28. ANIMATIONS
=========================================== */
.reveal,
[data-reveal] {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible,
[data-reveal].visible {
opacity: 1;
transform: translateY(0);
}
.fade {
transition: opacity var(--duration-fast) linear;
}
.fade:not(.show) {
opacity: 0;
}
.show {
opacity: 1;
}
.hover-shadow {
transition: box-shadow var(--duration-slow) ease;
}
.hover-shadow:hover {
box-shadow: var(--shadow);
}
.hover-shadow-lg:hover {
box-shadow: var(--shadow-lg);
}
.hover-border-erkon-blue:hover {
border-color: var(--erkon-blue);
}
.cursor-pointer {
cursor: pointer;
}
.transition-all {
transition: all var(--duration-slow) ease;
}
/* ===========================================
29. UTILITIES - MISC
=========================================== */
.align-text-top { vertical-align: text-top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.img-fluid {
max-width: 100%;
height: auto;
}
/* ==========================================================================
THANK YOU PAGE - PREMIUM REDESIGN
========================================================================== */
.erkon-divider {
height: 1px;
background: var(--border-default);
border: none;
margin: var(--space-8) 0;
}
.erkon-thankyou-wrapper {
max-width: 900px;
margin: 0 auto;
padding: var(--space-12) var(--space-4);
}
/* --- Success Hero --- */
.erkon-success-hero {
text-align: center;
padding: var(--space-12) var(--space-4);
margin-bottom: var(--space-8);
}
.erkon-success-icon {
width: 120px;
height: 120px;
margin: 0 auto var(--space-8);
display: flex;
align-items: center;
justify-content: center;
background: var(--color-success-light);
border-radius: var(--radius-full);
box-shadow: 0 0 0 12px rgba(22, 163, 74, 0.08);
animation: erkonSuccessPulse 2.5s ease-in-out infinite;
}
.erkon-success-icon i {
font-size: 56px;
color: var(--color-success);
}
@keyframes erkonSuccessPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 12px rgba(22, 163, 74, 0.08);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 0 20px rgba(22, 163, 74, 0.12);
}
}
.erkon-success-title {
font-size: var(--text-4xl);
font-family: var(--font-heading);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-3);
line-height: var(--leading-tight);
}
.erkon-success-subtitle {
font-size: var(--text-xl);
color: var(--text-secondary);
font-weight: var(--font-normal);
line-height: var(--leading-relaxed);
}
/* --- Order Status Timeline --- */
.erkon-order-timeline {
display: flex;
align-items: center;
justify-content: center;
max-width: 720px;
margin: 0 auto var(--space-12);
padding: var(--space-8);
background: var(--surface-muted);
border-radius: var(--radius-xl);
}
.erkon-timeline-step {
display: flex;
align-items: center;
gap: var(--space-3);
}
.erkon-timeline-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--surface-default);
border: 2px solid var(--border-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--duration-normal) ease;
}
.erkon-timeline-icon i {
font-size: 16px;
color: var(--text-disabled);
}
.erkon-timeline-step--completed .erkon-timeline-icon {
background: var(--color-success);
border-color: var(--color-success);
}
.erkon-timeline-step--completed .erkon-timeline-icon i {
color: var(--erkon-white);
}
.erkon-timeline-step--active .erkon-timeline-icon {
background: var(--erkon-secondary);
border-color: var(--erkon-secondary);
animation: iconPulse 3s ease-in-out infinite;
}
.erkon-timeline-step--active .erkon-timeline-icon i {
color: var(--erkon-white);
}
.erkon-timeline-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.erkon-timeline-label {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--text-primary);
}
.erkon-timeline-step--completed .erkon-timeline-label {
color: var(--color-success-dark);
}
.erkon-timeline-step--active .erkon-timeline-label {
color: var(--erkon-secondary);
}
.erkon-timeline-time {
font-size: var(--text-xs);
color: var(--text-secondary);
}
.erkon-timeline-connector {
width: 60px;
height: 2px;
background: var(--border-muted);
margin: 0 var(--space-4);
flex-shrink: 0;
}
.erkon-timeline-connector--active {
background: linear-gradient(to right, var(--color-success) 0%, var(--erkon-secondary) 100%);
}
/* --- Order Card --- */
.erkon-order-card {
background: var(--surface-default);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: var(--space-12);
margin-bottom: var(--space-12);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-slow) var(--ease-out);
}
.erkon-order-card:hover {
box-shadow: var(--shadow-md);
}
.erkon-order-badge {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.erkon-order-badge .subtitle {
margin-bottom: 0;
}
.erkon-order-number {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--text-primary);
}
/* --- Email Notice (alert-info design system) --- */
.erkon-email-notice {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
background: #cff4fc;
border: 1px solid #b6effb;
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
font-size: var(--text-sm);
color: #055160;
line-height: var(--leading-relaxed);
}
.erkon-email-notice .erkon-notice-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: rgba(8, 145, 178, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.erkon-email-notice .erkon-notice-icon i {
font-size: 18px;
color: #0891b2;
}
/* --- Section Titles --- */
.erkon-details-section,
.erkon-items-section,
.erkon-totals-section {
margin-bottom: 0;
}
.erkon-section-title {
font-size: var(--text-xl);
font-family: var(--font-heading);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-6);
}
/* --- Customer Details Grid --- */
.erkon-customer-details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.erkon-detail-col {
position: relative;
}
.erkon-detail-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
background: var(--surface-muted);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
}
.erkon-detail-icon i {
font-size: 20px;
color: var(--erkon-secondary);
}
.erkon-detail-col h4 {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.erkon-detail-col address,
.erkon-detail-col p {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
font-style: normal;
}
/* --- BACS Bank Details (payment gateway hook output) --- */
.erkon-order-card .woocommerce-bacs-bank-details {
margin-top: var(--space-8);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid #ffecb5;
background: var(--surface-default);
}
.erkon-order-card .wc-bacs-bank-details-heading {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-base);
font-family: var(--font-heading);
font-weight: var(--font-semibold);
color: #664d03;
background: #fff3cd;
border-bottom: 1px solid #ffecb5;
padding: var(--space-4) var(--space-6);
margin: 0;
}
/* Warning icon before heading */
.erkon-order-card .wc-bacs-bank-details-heading::before {
content: "\f071";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: rgba(102, 77, 3, 0.12);
flex-shrink: 0;
}
.erkon-order-card .wc-bacs-bank-details-account-name {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--erkon-secondary);
margin: 0;
padding: var(--space-5) var(--space-6) var(--space-2);
}
.erkon-order-card .wc-bacs-bank-details.order_details {
list-style: none;
padding: var(--space-2) var(--space-6) var(--space-6);
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.erkon-order-card .wc-bacs-bank-details.order_details li {
font-size: var(--text-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--space-3) var(--space-4);
background: var(--surface-muted);
border-radius: var(--radius-md);
}
.erkon-order-card .wc-bacs-bank-details.order_details li strong {
display: block;
color: var(--text-primary);
font-weight: var(--font-semibold);
margin-top: var(--space-1);
font-size: var(--text-base);
text-transform: none;
letter-spacing: normal;
}
/* IBAN field — larger monospace for easy reading/copying */
.erkon-order-card .wc-bacs-bank-details.order_details li.iban strong {
font-size: var(--text-lg);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
letter-spacing: 0.03em;
word-break: break-all;
}
.erkon-order-card .wc-bacs-bank-details.order_details::before {
content: none;
}
/* BACS instruction paragraph (wpautop output above the bank details) */
.erkon-order-card .woocommerce-bacs-bank-details ~ .woocommerce-thankyou-bacs-instructions,
.erkon-order-card .woocommerce-bacs-bank-details p:first-child {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
/* --- Products List --- */
.erkon-products-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.erkon-product-item {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-5);
background: var(--surface-muted);
border: 1px solid var(--border-muted);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
}
.erkon-product-item:hover {
background: var(--surface-default);
border-color: var(--border-emphasis);
transform: translateX(4px);
}
.erkon-product-image {
position: relative;
flex: 0 0 80px;
width: 80px;
height: 80px;
min-width: 80px;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--gray-50);
border: 1px solid var(--gray-100);
}
.erkon-product-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
object-fit: cover;
object-position: center;
display: block;
}
.erkon-product-details {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.erkon-product-name {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--text-primary);
line-height: var(--leading-snug);
margin: 0;
}
.erkon-product-quantity {
font-size: var(--text-sm);
color: var(--text-secondary);
}
.erkon-product-price {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
}
.erkon-product-unit-price {
font-size: var(--text-sm);
color: var(--text-secondary);
}
.erkon-product-total {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
}
/* --- Order Totals Table --- */
.erkon-totals-table {
width: 100%;
border-collapse: collapse;
max-width: 500px;
margin-left: auto;
}
.erkon-total-row th,
.erkon-total-row td {
padding: var(--space-3) 0;
font-size: var(--text-base);
border-bottom: 1px solid var(--border-muted);
}
.erkon-total-row th {
text-align: left;
font-weight: var(--font-normal);
color: var(--text-secondary);
}
.erkon-total-row td {
text-align: right;
color: var(--text-primary);
font-weight: var(--font-medium);
}
.erkon-total-row--order_total th,
.erkon-total-row--order_total td {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
padding-top: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: none;
border-top: 2px solid var(--border-emphasis);
}
/* --- Next Steps Section --- */
.erkon-next-steps {
padding: var(--space-10);
background: var(--surface-muted);
border-radius: var(--radius-xl);
margin-bottom: var(--space-12);
}
.erkon-next-steps > h3 {
font-size: var(--text-2xl);
font-family: var(--font-heading);
font-weight: var(--font-semibold);
color: var(--text-primary);
text-align: center;
margin-bottom: var(--space-8);
}
.erkon-next-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.erkon-next-step {
text-align: center;
padding: var(--space-8) var(--space-6);
background: var(--surface-default);
border: 1px solid var(--border-muted);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
}
.erkon-next-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--erkon-secondary);
}
.erkon-next-step i {
font-size: 24px;
color: var(--erkon-secondary);
margin-bottom: var(--space-4);
display: block;
}
.erkon-next-step h4 {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.erkon-next-step p {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin: 0;
}
/* --- Action Buttons --- */
.erkon-thankyou-actions {
display: flex;
gap: var(--space-4);
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.erkon-thankyou-actions .btn {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-width: 200px;
justify-content: center;
}
/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
.erkon-thankyou-wrapper {
padding: var(--space-8) var(--space-4);
}
.erkon-success-hero {
padding: var(--space-8) var(--space-4);
}
.erkon-success-icon {
width: 100px;
height: 100px;
}
.erkon-success-icon i {
font-size: 44px;
}
.erkon-success-title {
font-size: var(--text-3xl);
}
.erkon-order-timeline {
flex-direction: column;
align-items: stretch;
padding: var(--space-6);
}
.erkon-timeline-step {
flex-direction: row;
gap: var(--space-4);
}
.erkon-timeline-content {
flex: 1;
}
.erkon-timeline-connector {
width: 2px;
height: 32px;
margin: var(--space-2) 0 var(--space-2) 23px;
}
.erkon-timeline-connector--active {
background: linear-gradient(to bottom, var(--color-success) 0%, var(--erkon-secondary) 100%);
}
.erkon-order-card {
padding: var(--space-8);
}
.erkon-customer-details-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.erkon-next-steps {
padding: var(--space-8) var(--space-6);
}
.erkon-next-steps-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* --- Responsive: Mobile (639px) --- */
@media (max-width: 639px) {
.erkon-order-card {
padding: var(--space-6);
}
.erkon-section-title {
font-size: var(--text-lg);
}
.erkon-email-notice {
flex-direction: column;
text-align: center;
gap: var(--space-3);
}
.erkon-order-card .wc-bacs-bank-details-heading {
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
}
.erkon-order-card .wc-bacs-bank-details-account-name {
padding: var(--space-4) var(--space-4) var(--space-2);
}
.erkon-order-card .wc-bacs-bank-details.order_details {
padding: var(--space-2) var(--space-4) var(--space-4);
grid-template-columns: 1fr;
}
.erkon-order-card .wc-bacs-bank-details.order_details li.iban strong {
font-size: var(--text-base);
}
.erkon-product-item {
flex-wrap: wrap;
}
.erkon-product-details {
flex: 1 1 calc(100% - 100px);
}
.erkon-product-price {
flex: 1 1 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: calc(80px + var(--space-5));
}
.erkon-thankyou-actions {
flex-direction: column;
}
.erkon-thankyou-actions .btn {
width: 100%;
}
}
/* ==========================================================================
VIEW ORDER PAGE
Extends Thank-You page classes with order-specific components.
========================================================================== */
.erkon-view-order-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
/* --- Order Info Row (status pill + date, inside card) --- */
.erkon-order-info-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.erkon-order-info-row .subtitle i {
font-size: 14px;
}
.erkon-order-date {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.erkon-order-date i {
font-size: 14px;
color: var(--text-tertiary);
}
/* --- Subtitle status variants --- */
.subtitle--success {
color: var(--color-success-dark);
background: var(--color-success-light);
border-color: transparent;
}
.subtitle--danger {
color: #991b1b;
background: var(--color-error-light);
border-color: transparent;
}
/* --- Order Notes --- */
.erkon-notes-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.erkon-note-item {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background: var(--surface-muted);
border-radius: var(--radius-lg);
border: 1px solid var(--border-muted);
}
.erkon-note-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--erkon-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.erkon-note-icon i {
color: var(--erkon-white);
}
.erkon-note-content {
flex: 1;
}
.erkon-note-date {
display: block;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--erkon-secondary);
margin-bottom: var(--space-2);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.erkon-note-text {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
.erkon-note-text p:last-child {
margin-bottom: 0;
}
/* --- Product Purchase Note --- */
.erkon-product-note {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(var(--erkon-secondary-rgb), 0.05);
border-left: 3px solid var(--erkon-secondary);
border-radius: var(--radius-md);
margin-top: calc(-1 * var(--space-2));
font-size: var(--text-sm);
color: var(--text-secondary);
}
.erkon-product-note i {
color: var(--erkon-secondary);
flex-shrink: 0;
margin-top: 2px;
}
.erkon-product-note p:last-child {
margin-bottom: 0;
}
/* --- Order Actions (Pay / Cancel) --- */
.erkon-order-actions {
display: flex;
gap: var(--space-4);
justify-content: center;
margin-top: var(--space-8);
padding-top: var(--space-8);
border-top: 1px solid var(--border-default);
flex-wrap: wrap;
}
/* --- Customer Details Grid Modifiers --- */
.erkon-customer-details-grid--two-col {
grid-template-columns: repeat(2, 1fr);
}
.erkon-customer-details-grid--three-col {
grid-template-columns: repeat(3, 1fr);
}
/* --- View Order: spacing between cards --- */
.erkon-view-order-wrapper .woocommerce-order-details,
.erkon-view-order-wrapper .woocommerce-customer-details {
margin-top: 0;
}
.erkon-view-order-wrapper .erkon-order-card + .erkon-order-card,
.erkon-view-order-wrapper .woocommerce-customer-details {
margin-top: var(--space-8);
}
/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
.erkon-customer-details-grid--two-col,
.erkon-customer-details-grid--three-col {
grid-template-columns: 1fr;
gap: var(--space-6);
}
}
/* --- Responsive: Mobile (639px) --- */
@media (max-width: 639px) {
.erkon-order-info-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.erkon-note-item {
flex-direction: column;
align-items: flex-start;
}
.erkon-order-actions {
flex-direction: column;
}
.erkon-order-actions .btn {
width: 100%;
}
}
/* Mobile display utilities */
.d-mhidden { display: none; }
.d-mflex { display: flex; }
@media (min-width: 768px) {
.d-mhidden { display: block; }
.d-mflex { display: none; }
}
/* Hover utilities */
.hover-bg-light:hover {
background-color: var(--gray-50);
}
/* Pricing highlight */
.bg-warm-highlight {
background-color: rgb(240, 247, 255);
border-left: 3px solid var(--erkon-secondary);
}
/* Pricing table cell labels - visible only on mobile */
.pricing-row .cell-label {
display: inline;
font-weight: 600;
margin-right: 0.5rem;
}
@media (min-width: 768px) {
.pricing-row .cell-label {
display: none;
}
}
/* ==========================================================================
404 ERROR PAGE
========================================================================== */
.error-404-section {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
color: white;
padding: var(--section-py) 0;
}
.error-code {
display: block;
font-family: var(--font-heading);
font-size: clamp(6rem, 20vw, 12rem);
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, 0.15);
margin-bottom: var(--space-lg);
}
.error-404-section h1 {
font-size: var(--text-4xl);
font-weight: 600;
margin-bottom: var(--space-md);
}
.error-404-section .lead {
color: rgba(255, 255, 255, 0.8);
max-width: 500px;
margin: 0 auto var(--space-xl);
}
/* ==========================================================================
ARCHIVE PAGES (Category, Tag, Date Archives)
========================================================================== */
.archive-hero {
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
color: white;
padding: var(--space-3xl) 0 var(--space-2xl);
text-align: center;
}
.archive-hero-content {
max-width: 700px;
margin: 0 auto;
}
.archive-hero-label {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-md);
}
.archive-hero-label svg,
.archive-hero-label i {
opacity: 0.7;
}
.archive-hero-title {
font-size: var(--text-4xl);
font-weight: 700;
margin-bottom: var(--space-md);
line-height: 1.2;
color: white;
}
.archive-hero-description {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-md);
line-height: 1.6;
}
.archive-hero-count {
display: inline-block;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
padding: var(--space-xs) var(--space-md);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-3xl);
}
.archive-articles-section {
padding: var(--section-py) 0;
background: var(--bg-secondary);
}
/* ==========================================================================
AUTHOR PAGE
========================================================================== */
.author-hero {
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
color: white;
padding: var(--space-3xl) 0 var(--space-2xl);
}
.author-profile-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-lg);
}
@media (min-width: 768px) {
.author-profile-card {
flex-direction: row;
text-align: left;
gap: var(--space-xl);
}
}
.author-avatar img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.2);
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-name {
font-size: var(--text-3xl);
font-weight: 700;
margin-bottom: var(--space-sm);
color: white;
}
.author-bio {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-md);
line-height: 1.6;
}
.author-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
justify-content: center;
}
@media (min-width: 768px) {
.author-meta {
justify-content: flex-start;
}
}
.author-post-count,
.author-website {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
}
.author-website {
color: var(--erkon-secondary);
text-decoration: none;
transition: color var(--duration-normal) ease;
}
.author-website:hover {
color: white;
}
.author-articles-section {
padding: var(--section-py) 0;
background: var(--bg-secondary);
}
/* ==========================================================================
SEARCH PAGE
========================================================================== */
.search-hero {
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
color: white;
padding: var(--space-3xl) 0 var(--space-2xl);
text-align: center;
}
.search-hero-content {
max-width: 700px;
margin: 0 auto;
}
.search-hero-label {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-md);
}
.search-hero-title {
font-size: var(--text-3xl);
font-weight: 700;
margin-bottom: var(--space-lg);
line-height: 1.3;
color: white;
}
.search-hero-title .search-term {
color: var(--erkon-secondary);
}
.search-hero-form {
display: flex;
max-width: 500px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.search-hero-input {
flex: 1;
padding: var(--space-md) var(--space-lg);
border: none;
background: transparent;
color: white;
font-size: 1rem;
}
.search-hero-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.search-hero-input:focus {
outline: none;
}
.search-hero-button {
padding: var(--space-md) var(--space-lg);
background: var(--erkon-secondary);
border: none;
color: white;
cursor: pointer;
transition: background var(--duration-normal) ease;
}
.search-hero-button:hover {
background: #0091d5;
}
.search-results-section {
padding: var(--section-py) 0;
background: var(--bg-secondary);
}
.search-no-results-section {
padding: var(--space-2xl) 0;
}
.search-recommended-section {
padding: var(--section-py) 0;
background: white;
}
/* ==========================================================================
JOB SINGLE PAGE
========================================================================== */
.job-hero {
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
color: white;
padding: var(--space-3xl) 0 var(--space-2xl);
}
.job-hero-content {
max-width: 800px;
}
.job-hero-label {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--space-md);
}
.job-hero-title {
font-size: var(--text-4xl);
font-weight: 700;
margin-bottom: var(--space-md);
line-height: 1.2;
color: white;
}
.job-hero-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
}
.job-meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
}
.job-content-section {
padding: var(--section-py) 0;
background: var(--bg-secondary);
}
.single-job-article {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
}
.job-thumbnail {
margin-bottom: var(--space-xl);
border-radius: var(--radius-lg);
overflow: hidden;
}
.job-thumbnail img {
width: 100%;
height: auto;
display: block;
}
.job-entry-content {
font-size: var(--text-lg);
line-height: 1.8;
}
.job-entry-content h2,
.job-entry-content h3,
.job-entry-content h4 {
margin-top: var(--space-xl);
margin-bottom: var(--space-md);
}
.job-entry-content ul,
.job-entry-content ol {
margin-bottom: var(--space-lg);
padding-left: var(--space-xl);
}
.job-entry-content li {
margin-bottom: var(--space-sm);
}
.job-cta-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
text-align: center;
position: sticky;
top: 100px;
}
.job-cta-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
color: white;
}
.job-cta-title {
font-size: var(--text-xl);
font-weight: 600;
margin-bottom: var(--space-md);
color: var(--text-dark);
}
.job-cta-text {
color: var(--text-muted);
margin-bottom: var(--space-md);
line-height: 1.6;
}
.job-cta-email {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--erkon-secondary);
color: white;
text-decoration: none;
border-radius: var(--radius-lg);
font-weight: 600;
transition: all var(--duration-normal) ease;
margin-bottom: var(--space-md);
}
.job-cta-email:hover {
background: #0091d5;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--erkon-secondary-rgb), 0.3);
}
.job-cta-additional {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
}
.job-cta-additional a {
color: var(--erkon-secondary);
text-decoration: none;
}
.job-cta-additional a:hover {
text-decoration: underline;
}
/* ==========================================================================
NO RESULTS SECTION
========================================================================== */
.no-results-section {
padding: var(--space-3xl) 0;
text-align: center;
}
.no-results-content {
max-width: 500px;
margin: 0 auto;
}
.no-results-icon {
width: 100px;
height: 100px;
background: var(--bg-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-xl);
color: var(--text-muted);
}
.no-results-title {
font-size: var(--text-2xl);
font-weight: 600;
margin-bottom: var(--space-md);
color: var(--text-dark);
}
.no-results-text {
color: var(--text-muted);
margin-bottom: var(--space-lg);
line-height: 1.6;
}
.no-results-search-form {
display: flex;
max-width: 400px;
margin: 0 auto var(--space-lg);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-color);
}
.no-results-search-input {
flex: 1;
padding: var(--space-md) var(--space-lg);
border: none;
background: transparent;
font-size: 1rem;
}
.no-results-search-input:focus {
outline: none;
}
.no-results-search-button {
padding: var(--space-md) var(--space-lg);
background: var(--erkon-primary);
border: none;
color: white;
cursor: pointer;
transition: background var(--duration-normal) ease;
}
.no-results-search-button:hover {
background: #1a2d5c;
}
.no-results-cta {
margin-top: var(--space-lg);
}
.active {
font-weight: 600;
}
/* ==========================================================================
SUBTITLE TAG COMPONENT
Unified label/tag element for section headers, badges, and category indicators.
========================================================================== */
.subtitle {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-heading, 'Libre Franklin', sans-serif);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: var(--radius-base);
border: 1px solid transparent;
background: transparent;
margin-bottom: 8px;
line-height: 1.4;
transition: all var(--duration-slow) ease;
}
.subtitle::before {
display: none;
}
/* --- Color Variants --- */
.subtitle--primary {
color: var(--erkon-primary);
background: rgba(var(--erkon-primary-rgb), 0.08);
border-color: rgba(var(--erkon-primary-rgb), 0.15);
}
.subtitle--secondary {
color: var(--erkon-secondary);
background: rgba(var(--erkon-secondary-rgb), 0.08);
border-color: rgba(var(--erkon-secondary-rgb), 0.15);
}
.subtitle--muted {
color: var(--text-secondary);
background: var(--bg-light);
border-color: var(--gray-200);
}
.subtitle--light {
color: var(--erkon-white);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
/* --- Service Color Variants --- */
.subtitle--prezracevanje {
color: var(--erkon-prezracevanje);
background: rgba(13, 202, 240, 0.1);
border-color: var(--erkon-prezracevanje);
}
.subtitle--hlajenje {
color: var(--erkon-hlajenje);
background: rgba(30, 58, 138, 0.1);
border-color: var(--erkon-hlajenje);
}
.subtitle--ogrevanje {
color: var(--erkon-ogrevanje);
background: rgba(129, 20, 45, 0.1);
border-color: var(--erkon-ogrevanje);
}
/* --- Icon Modifier (flex layout for SVG + text) --- */
.subtitle--icon {
display: inline-flex;
align-items: center;
gap: 4px;
}
.subtitle--icon svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* --- Feature Pill Variant (O nas page) --- */
.subtitle--pill {
border-radius: var(--radius-full);
background: var(--erkon-white);
border-color: var(--border-muted);
color: var(--text-primary);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
padding: var(--space-2) var(--space-4);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.subtitle--pill:hover {
border-color: var(--erkon-secondary);
background: rgba(var(--erkon-secondary-rgb), 0.04);
transform: translateY(-2px);
}
.subtitle--pill svg {
width: 16px;
height: 16px;
color: var(--erkon-secondary);
flex-shrink: 0;
}
/* --- Blog Category Badge Variant --- */
.subtitle--category {
background: var(--category-color, var(--erkon-primary));
color: var(--erkon-white);
border-color: transparent;
text-decoration: none;
margin-bottom: 24px;
}
.subtitle--category:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--erkon-primary-rgb), 0.35);
color: var(--erkon-white);
}
/* --- Blog Tag Variant --- */
.subtitle--tag {
background: var(--erkon-white);
color: var(--erkon-primary);
border-color: rgba(var(--erkon-primary-rgb), 0.15);
text-decoration: none;
font-size: 0.75rem;
}
.subtitle--tag:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
border-color: var(--erkon-primary);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--erkon-primary-rgb), 0.2);
}
.article-hero--with-image .subtitle--tag {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
color: var(--erkon-white);
backdrop-filter: blur(8px);
}
.article-hero--with-image .subtitle--tag:hover {
background: rgba(255, 255, 255, 0.3);
color: var(--erkon-white);
}
/* --- Featured Badge Variant --- */
.subtitle--featured {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 10;
background: linear-gradient(135deg, var(--erkon-accent), #d4a574);
color: var(--erkon-white);
border-color: transparent;
box-shadow: 0 2px 8px rgba(196, 154, 108, 0.4);
}
/* --- WooCommerce Sale Badge Variants --- */
.subtitle--sale {
background: var(--primary);
color: var(--erkon-white);
border-color: transparent;
font-weight: 700;
}
.subtitle--sale-detail {
font-weight: 400;
padding-left: 0;
color: var(--primary);
border-color: transparent;
background: transparent;
}
.subtitle--sale-detail svg {
margin: 0 4px;
}
.subtitle--new {
background: var(--secondary);
color: var(--erkon-white);
border-color: transparent;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
/* ===========================================
32. RESPONSIVE ADJUSTMENTS
=========================================== */
.sticky {
font-size: inherit;
}
#wrapper-footer-full {
background-color: #161616;
}
.wp-caption {
font-size: inherit;
}
.wp-caption-text {
font-size: inherit;
}
.screen-reader-text {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.screen-reader-text:not(caption) {
position: absolute !important;
}
img.wp-post-image,
article img,
figure,
img,
#secondary img {
max-width: 100%;
height: auto;
}
.navbar h1, .navbar .h1 {
font-weight: 400;
}
.gallery {
margin-bottom: 1.5em;
}
.woocommerce-order h2, .woocommerce-order .h2 {
font-size: 28px;
font-weight: 600;
}
.woocommerce-order p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
font-size: 24px;
}
.woocommerce .woocommerce-order ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
padding-left: 50px !important;
}
.woocommerce .woocommerce-order .woocommerce-bacs-bank-details ul.order_details::before {
content: none;
}
/* h2 sizing handled per-component in My Account section below */
.woocommerce-variation-availability,
.stock.out-of-stock {
display: none !important;
}
.erkon-megamenu-holder {
background-color: white;
margin-top: 1px;
}
.erkon-search-toggler {
cursor: pointer;
}
.wc-block-checkout__shipping-method-option {
padding: 10px !important;
}
.has-blue-color,
.has-blue-color:visited {
color: #0d6efd;
}
.has-blue-background-color {
background-color: #0d6efd;
border-color: #0d6efd;
}
.has-indigo-color,
.has-indigo-color:visited {
color: #6610f2;
}
.has-indigo-background-color {
background-color: #6610f2;
border-color: #6610f2;
}
.has-purple-color,
.has-purple-color:visited {
color: #6f42c1;
}
.has-purple-background-color {
background-color: #6f42c1;
border-color: #6f42c1;
}
.has-pink-color,
.has-pink-color:visited {
color: #d63384;
}
.has-pink-background-color {
background-color: #d63384;
border-color: #d63384;
}
.has-red-color,
.has-red-color:visited {
color: #dc3545;
}
.has-red-background-color {
background-color: #dc3545;
border-color: #dc3545;
}
.has-orange-color,
.has-orange-color:visited {
color: #fd7e14;
}
.has-orange-background-color {
background-color: #fd7e14;
border-color: #fd7e14;
}
.has-yellow-color,
.has-yellow-color:visited {
color: #ffc107;
}
.has-yellow-background-color {
background-color: #ffc107;
border-color: #ffc107;
}
.has-green-color,
.has-green-color:visited {
color: #198754;
}
.has-green-background-color {
background-color: #198754;
border-color: #198754;
}
.has-teal-color,
.has-teal-color:visited {
color: #20c997;
}
.has-teal-background-color {
background-color: #20c997;
border-color: #20c997;
}
.has-cyan-color,
.has-cyan-color:visited {
color: #2f8ac8;
}
.has-cyan-background-color {
background-color: #2f8ac8;
border-color: #2f8ac8;
}
.has-black-color,
.has-black-color:visited {
color: #000;
}
.has-black-background-color {
background-color: #000;
border-color: #000;
}
.has-white-color,
.has-white-color:visited {
color: var(--erkon-white);
}
.has-white-background-color {
background-color: var(--erkon-white);
border-color: var(--erkon-white);
}
.has-gray-color,
.has-gray-color:visited {
color: #6c757d;
}
.has-gray-background-color {
background-color: #6c757d;
border-color: #6c757d;
}
.has-gray-dark-color,
.has-gray-dark-color:visited {
color: #343a40;
}
.has-gray-dark-background-color {
background-color: #343a40;
border-color: #343a40;
}
.has-primary-color,
.has-primary-color:visited {
color: var(--erkon-primary);
}
.has-primary-background-color {
background-color: var(--erkon-primary);
border-color: var(--erkon-primary);
}
.has-secondary-color,
.has-secondary-color:visited {
color: #6c757d;
}
.has-secondary-background-color {
background-color: #6c757d;
border-color: #6c757d;
}
.has-success-color,
.has-success-color:visited {
color: #198754;
}
.has-success-background-color {
background-color: #198754;
border-color: #198754;
}
.has-info-color,
.has-info-color:visited {
color: #2f8ac8;
}
.has-info-background-color {
background-color: #2f8ac8;
border-color: #2f8ac8;
}
.has-warning-color,
.has-warning-color:visited {
color: #ffc107;
}
.has-warning-background-color {
background-color: #ffc107;
border-color: #ffc107;
}
.has-danger-color,
.has-danger-color:visited {
color: #dc3545;
}
.has-danger-background-color {
background-color: #dc3545;
border-color: #dc3545;
}
.has-light-color,
.has-light-color:visited {
color: #f8f9fa;
}
.has-light-background-color {
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.has-dark-color,
.has-dark-color:visited {
color: #212529;
}
.has-dark-background-color {
background-color: #212529;
border-color: #212529;
}
/*--------------------------------------------------------------
Functions
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Admin bar
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Alerts
--------------------------------------------------------------*/
.alert-icon, .wc-stripe-error, .woocommerce-message,
.woocommerce-thankyou-order-details, .woocommerce-info,
.woocommerce-noreviews, .woocommerce-error {
padding-left: 3.25rem;
}
.alert-icon::before, .wc-stripe-error::before, .woocommerce-message::before,
.woocommerce-thankyou-order-details::before, .woocommerce-info::before,
.woocommerce-noreviews::before, .woocommerce-error::before {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translate(0, -50%);
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
mask-image: var(--alert-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 16px;
-webkit-mask-image: var(--alert-icon);
width: 16px;
height: 16px;
background-color: currentColor;
}
.alert-danger-icon::before, .wc-stripe-error::before, .woocommerce-error::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
}
.alert-warning-icon::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
}
.alert-info-icon::before, .woocommerce-info::before,
.woocommerce-noreviews::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}
.alert-success-icon::before, .woocommerce-message::before,
.woocommerce-thankyou-order-details::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}
/* Alert links - poenostavljeno */
.alert a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.wc-stripe-error a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.woocommerce-message a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.woocommerce-thankyou-order-details a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.woocommerce-info a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.woocommerce-noreviews a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.woocommerce-error a:not([class*="btn"]):not([class*="button"]):not(#wp-submit),
.must-log-in a:not([class*="btn"]):not([class*="button"]):not(#wp-submit) {
color: inherit;
font-weight: 700;
}
.must-log-in {
margin-top: 1rem;
}
/*--------------------------------------------------------------
Breadcrumb
--------------------------------------------------------------*/
.overflow-x-auto {
scrollbar-color: rgba(0, 0, 0, 0.16) transparent;
}
.overflow-x-auto .breadcrumb-item.active {
padding-right: 1rem;
}
.overflow-x-auto .breadcrumb-item + .breadcrumb-item::before {
float: none;
}
/*--------------------------------------------------------------
Colors
--------------------------------------------------------------*/
::-moz-selection {
color: var(--erkon-white);
background-color: var(--primary);
}
::selection {
color: var(--erkon-white);
background-color: var(--primary);
}
pre {
background-color: var(--bg-secondary);
}
/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/
ul.comment-list {
list-style: none;
padding: 0;
}
ul.comment-list li {
list-style: none;
}
.comment-list ul.children {
padding-left: 96px;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;
}
.comment-content {
width: calc(100% - 96px);
}
.comment-content a {
word-wrap: break-word;
}
.comment-content .card p:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
Deprecated
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
html {
height: 100%;
}
#page {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
#footer-menu li a {
padding-left: 0;
}
/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
:root {
--valid-icon: url("data:image/svg+xml,");
--invalid-icon: url("data:image/svg+xml,");
}
/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Loop
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Markups
--------------------------------------------------------------*/
pre {
max-width: 100%;
padding: 1rem;
border-radius: var(--radius-base);
}
img {
height: auto;
max-width: 100%;
}
iframe {
max-width: 100%;
}
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
}
.gallery {
margin-bottom: 1.5em;
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
overflow: auto;
padding: 0.5rem;
font-size: 1rem;
background: rgba(0, 0, 0, 0.5);
}
/*--------------------------------------------------------------
Password protected form
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Single page-*.php and post-*.php
--------------------------------------------------------------*/
.wp-post-image {
width: 100%;
}
[rel=prev]:before {
content: "« ";
}
[rel=next]:after {
content: " »";
}
/*--------------------------------------------------------------
Tables
--------------------------------------------------------------*/
.table-responsive .table {
white-space: nowrap;
}
/*--------------------------------------------------------------
To top button
--------------------------------------------------------------*/
.top-button {
right: 5%;
bottom: 30px;
opacity: 0;
visibility: hidden;
transition: visibility 0s linear 0.3s, opacity var(--duration-slow);
}
.top-button.visible {
opacity: 1;
transition: visibility 0s linear 0s, opacity var(--duration-slow);
}
/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/
/*
Add width-100 class to element to stretch it to the entire width
of the screen when element is in .container.
Based on width-height-classes pattern
*/
.cursor-pointer {
cursor: pointer;
}
.d-tl-none {
display: none;
}
/*--------------------------------------------------------------
Widgets
--------------------------------------------------------------*/
.widget .menu {
padding: 0;
list-style: none;
margin-bottom: 0;
}
/*--------------------------------------------------------------
Block Widgets
--------------------------------------------------------------*/
.bs-list-group .list-group-item-action a {
color: var(--text);
}
.bs-list-group .list-group-item-action:hover a {
color: var(--title);
}
.bs-list-group .list-group-item-action.active a {
color: var(--erkon-white);
}
.card .bs-list-group.list-group-flush .list-group-item:last-child {
border-bottom-left-radius: calc(0 - (1px));
border-bottom-right-radius: calc(0 - (1px));
}
/*!
* Erkon WooCommerce Styles
*/
/*--------------------------------------------------------------
Ajax Cart
--------------------------------------------------------------*/
#offcanvas-cart .cart-list {
height: 100%;
}
#offcanvas-cart .widget_shopping_cart_content {
height: 100%;
display: flex;
flex-direction: column;
}
#offcanvas-cart .woocommerce-mini-cart {
flex: 1;
overflow-y: auto;
}
#offcanvas-cart .woocommerce-message:first-child,
#offcanvas-cart .woocommerce-error:first-child {
margin-top: 1rem;
}
#offcanvas-cart .woocommerce-message,
#offcanvas-cart .woocommerce-error,
#offcanvas-cart .woocommerce-info {
margin-right: 1rem;
margin-left: 1rem;
}
#offcanvas-cart span.quantity {
display: block;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
#offcanvas-cart dl.variation {
display: flex;
color: var(--text-muted);
font-size: 0.875em;
margin-bottom: 0;
}
#offcanvas-cart dl.variation dt {
font-weight: normal;
margin-right: 0.25rem;
}
#offcanvas-cart dl.variation dd,
#offcanvas-cart dl.variation p {
margin-bottom: 0;
}
#offcanvas-cart .cart-footer strong {
font-weight: inherit;
}
.alert .button.wc-forward, .wc-stripe-error .button.wc-forward, .woocommerce-message .button.wc-forward,
.woocommerce-thankyou-order-details .button.wc-forward, .woocommerce-info .button.wc-forward,
.woocommerce-noreviews .button.wc-forward, .woocommerce-error .button.wc-forward, .must-log-in .button.wc-forward {
display: none;
}
.woocommerce a.added_to_cart,
a.added_to_cart {
display: none;
}
.single_add_to_cart_button,
.ajax_add_to_cart {
position: relative;
}
.single_add_to_cart_button .btn-loader,
.ajax_add_to_cart .btn-loader {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
background-color: var(--primary);
border-radius: var(--radius);
}
.single_add_to_cart_button.loading .btn-loader,
.ajax_add_to_cart.loading .btn-loader {
display: flex;
}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
display: none;
}
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
padding-left: 0;
padding-right: 0;
}
/*--------------------------------------------------------------
WooCommerce Alerts
--------------------------------------------------------------*/
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
.wc-stripe-error::before {
color: inherit;
}
.wc-stripe-error {
margin-top: 1rem;
}
.woocommerce-error a.woocommerce-Button.button,
.woocommerce-info a.woocommerce-Button.button,
.woocommerce-message a.woocommerce-Button.button {
display: none;
}
/*--------------------------------------------------------------
WooCommerce Breadcrumb
--------------------------------------------------------------*/
.wc-breadcrumb .breadcrumb-item:last-child {
color: var(--text-muted);
padding-right: 1rem;
}
/*--------------------------------------------------------------
WooCommerce Cart
--------------------------------------------------------------*/
.woocommerce a.remove {
position: relative;
text-indent: -9999px;
border: 0;
}
.woocommerce a.remove:hover {
background: none;
}
.woocommerce a.remove::before {
content: " ";
text-indent: 0;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
width: 1rem;
height: 1rem;
background-color: var(--danger);
}
/* Legacy coupon input-group styles removed — redesigned in cart section (lines ~6134-6179) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
width: 100%;
}
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled[disabled] {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
transform: none;
box-shadow: none;
color: var(--erkon-primary);
}
.cross-sells {
margin-top: var(--space-2xl);
margin-bottom: var(--space-lg);
padding-top: var(--space-xl);
border-top: 1px solid var(--gray-100);
}
.cross-sells h4,
.cross-sells .custom-heading-spacer {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.25rem;
color: var(--erkon-primary);
margin-bottom: var(--space-lg);
letter-spacing: -0.01em;
}
.cross-sells .products {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.cross-sells .product {
border-radius: var(--radius-xl);
border: 1px solid var(--gray-100);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.cross-sells .product:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
border-color: var(--gray-200);
}
/* ==========================================================================
WOOCOMMERCE PAGE SECTION SPACING
Consistent spacing between navbar and content on all WC pages
========================================================================== */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
padding-top: var(--section-py);
padding-bottom: 0;
}
@media (max-width: 768px) {
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
padding-top: var(--section-py-compact);
padding-bottom: 0;
}
}
/* ==========================================================================
WOOCOMMERCE CART PAGE - REDESIGN
========================================================================== */
/* ---- Cart Page Header ---- */
.cart-page-header {
margin-bottom: var(--space-2xl);
}
.cart-page-header p {
max-width: 480px;
line-height: 1.7;
}
/* ---- Cart Table ---- */
body.woocommerce-cart .shop_table.cart {
border: none !important;
border-radius: 0;
border-collapse: collapse;
}
body.woocommerce-cart .shop_table.cart thead th {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-600);
font-weight: 600;
font-family: var(--font-body);
border-bottom: 2px solid var(--gray-100);
padding: 12px 16px;
background: transparent;
vertical-align: middle;
}
body.woocommerce-cart .shop_table.cart tbody td {
vertical-align: middle;
padding: 20px 16px;
border-bottom: 1px solid var(--gray-100);
background: transparent;
}
body.woocommerce-cart .shop_table.cart tbody tr:last-of-type:not(.woocommerce-cart-form__cart-item) td {
border-bottom: none;
}
body.woocommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item:last-of-type td {
border-bottom: 1px solid var(--gray-100);
}
body.woocommerce-cart .shop_table.cart td.actions {
border-bottom: none;
padding-top: 24px;
padding-bottom: 0;
}
/* ---- Product Cell ---- */
.product-cell-wrapper {
display: flex;
align-items: center;
gap: 16px;
}
.p-thumb {
position: relative;
width: 80px;
height: 80px;
min-width: 80px;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gray-50);
border: 1px solid var(--gray-100);
}
.p-thumb a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.p-thumb img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
object-fit: cover;
object-position: center;
display: block;
transition: transform var(--duration-slow, 0.4s) ease;
}
.p-thumb:hover img {
transform: scale(1.05);
}
.p-info {
flex: 1;
min-width: 0;
}
.p-info > a {
font-weight: 600;
color: var(--erkon-primary);
text-decoration: none;
font-size: 0.9375rem;
line-height: 1.4;
transition: color var(--duration-normal, 0.2s) ease;
display: inline-block;
}
.p-info > a:hover {
color: var(--erkon-secondary);
}
.p-info .variation {
margin-top: 4px;
}
.p-info .variation dt,
.p-info .variation dd {
font-size: 0.8125rem;
color: var(--gray-600);
}
.p-remove {
margin-top: 6px;
}
.p-remove .remove {
font-size: 0;
text-indent: -9999px;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--gray-600) !important;
text-decoration: none;
font-weight: 500;
opacity: 0.6;
transition: all var(--duration-normal, 0.2s) ease;
position: relative;
width: 20px;
height: 20px;
}
/* Uses existing .woocommerce a.remove::before trash icon */
.p-remove .remove:hover {
opacity: 1;
color: var(--color-error, #dc2626) !important;
background: none !important;
}
/* ---- Cart Actions Row ---- */
.cart-actions-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* Coupon row styling — high specificity to override WooCommerce plugin CSS */
body.woocommerce-cart table.cart td.actions .coupon {
display: flex !important;
gap: 12px !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: auto !important;
max-width: 700px;
}
/* Input: matches .cf7-input standards */
body.woocommerce-cart table.cart td.actions .coupon .input-text {
float: none !important;
flex: 1 !important;
width: auto !important;
min-width: 0 !important;
height: 52px !important;
padding: 0 16px !important;
margin: 0 !important;
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-primary);
background-color: #f8f9fa !important;
border: 1px solid #e2e5e9 !important;
border-radius: var(--radius-xl) !important;
box-sizing: border-box;
transition: all var(--transition);
}
body.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
outline: none;
border-color: var(--erkon-secondary) !important;
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
background-color: var(--erkon-white) !important;
}
body.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder {
color: #9ca3af;
}
/* Button: matches .btn .btn-primary standards */
body.woocommerce-cart table.cart td.actions .coupon .button {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
min-height: 46px;
padding: 0 1.375rem;
font-family: var(--font-heading, 'Libre Franklin', sans-serif);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
color: var(--erkon-white);
background-color: var(--erkon-primary);
border: 2px solid var(--erkon-primary);
border-radius: var(--radius-md, 6px) !important;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
cursor: pointer;
transition: all var(--transition);
transform: translateY(0);
}
body.woocommerce-cart table.cart td.actions .coupon .button:hover {
background-color: #1a2d5a;
border-color: #1a2d5a;
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
transform: translateY(-2px);
}
/* Update cart button */
body.woocommerce-cart .cart-actions-row > button[name="update_cart"] {
background: transparent;
color: var(--gray-600);
border: none;
padding: 8px 16px;
font-weight: 500;
font-size: 0.875rem;
min-height: auto;
box-shadow: none;
transition: all var(--duration-normal, 0.2s) ease;
}
body.woocommerce-cart .cart-actions-row > button[name="update_cart"]:hover {
color: var(--erkon-secondary);
background: rgba(var(--erkon-secondary-rgb), 0.06);
border-radius: var(--radius-lg);
transform: none;
box-shadow: none;
}
body.woocommerce-cart .cart-actions-row > button[name="update_cart"]:disabled {
opacity: 0.4;
transform: none;
box-shadow: none;
}
/* ---- Cart Help Text ---- */
.cart-help-text {
margin-top: 24px;
padding: 20px;
background: var(--gray-50);
border-radius: var(--radius-xl);
font-size: 0.875rem;
color: var(--gray-600);
line-height: 1.65;
border: 1px solid var(--gray-100);
}
/* ---- Cart Sidebar ---- */
.cart-sidebar-sticky {
position: sticky;
top: 170px;
}
/* ---- Cart Totals Card ---- */
.cart-totals-card {
background: var(--erkon-white);
border-radius: var(--radius-2xl);
border: 1px solid var(--border-default, var(--gray-200));
padding: 28px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}
.cart-totals-card__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.25rem;
color: var(--erkon-primary);
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid var(--gray-100);
}
/* Totals table clean styling */
.cart-totals-table {
border: none !important;
border-radius: 0 !important;
}
.cart-totals-table th,
.cart-totals-table td {
padding: 12px 0;
border-bottom: 1px solid var(--gray-100);
background: transparent !important;
}
.cart-totals-table th {
font-weight: 500;
color: var(--gray-600);
font-size: 0.875rem;
text-align: left;
}
.cart-totals-table td {
font-weight: 600;
text-align: right;
color: var(--gray-900);
font-size: 0.9375rem;
}
.cart-totals-table .order-total th,
.cart-totals-table .order-total td {
border-top: 2px solid var(--erkon-primary);
border-bottom: none;
padding-top: 16px;
font-size: 1.125rem;
}
.cart-totals-table .order-total th {
font-weight: 700;
color: var(--erkon-primary);
}
.cart-totals-table .order-total td {
font-weight: 800;
color: var(--erkon-primary);
}
/* ---- Checkout Button ---- */
.cart-totals-card__checkout {
margin-top: 24px;
padding: 0;
}
.cart-totals-card__checkout .btn {
width: 100%;
}
/* ---- Free Shipping Progress Bar ---- */
.cart-free-shipping {
margin-top: 20px;
padding: 16px 20px;
background: var(--gray-50);
border-radius: var(--radius-xl);
border: 1px solid var(--gray-100);
}
.cart-free-shipping .fs-content-wrapper {
width: 100%;
}
.cart-free-shipping .fs-text {
text-align: center;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--gray-600);
margin-bottom: 10px;
}
.cart-free-shipping .fs-text strong {
color: var(--erkon-primary);
}
.cart-free-shipping .fs-text .label-content {
font-weight: 400;
}
.cart-free-shipping .fs-text .value-content {
color: var(--erkon-secondary);
font-weight: 700;
font-size: 0.9375rem;
}
.fs-progress-bar-container {
width: 100%;
height: 6px;
background: var(--gray-200);
border-radius: 3px;
overflow: hidden;
}
.fs-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--erkon-secondary) 0%, #22c55e 100%);
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---- Security Section ---- */
.cart-security-section {
margin-top: 24px;
}
.cart-security-label {
display: block;
font-size: 0.8125rem;
color: var(--gray-600);
margin-bottom: 12px;
font-weight: 500;
text-align: center;
}
.cart-payment-logos {
background: var(--gray-50);
border-radius: var(--radius-xl);
padding: 20px;
text-align: center;
border: 1px solid var(--gray-100);
}
.cart-payment-logos img {
max-height: 32px;
width: auto;
object-fit: contain;
}
.cart-secure-logos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 16px;
}
.cart-secure-logos__item {
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gray-100);
transition: all var(--duration-normal, 0.2s) ease;
}
.cart-secure-logos__item img {
max-height: 28px;
width: auto;
object-fit: contain;
filter: grayscale(0.3);
transition: filter var(--duration-normal, 0.2s) ease;
}
.cart-secure-logos__item:hover {
border-color: var(--gray-200);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.cart-secure-logos__item:hover img {
filter: grayscale(0);
}
body.woocommerce-cart .woocommerce {
margin-bottom: 0;
}
body.woocommerce-cart .woocommerce-cart-form {
margin-bottom: 0;
}
body.woocommerce-cart .cart-collaterals {
margin-bottom: 0;
}
/* ==========================================================================
WOOCOMMERCE CART PAGE - RESPONSIVE
========================================================================== */
@media (max-width: 991px) {
.cart-sidebar-sticky {
position: static;
}
/* Tablet: tighter table cells */
body.woocommerce-cart .shop_table.cart tbody td {
padding: 16px 10px;
}
body.woocommerce-cart .shop_table.cart thead th {
padding: 10px;
font-size: 0.6875rem;
}
.p-thumb {
width: 64px;
height: 64px;
min-width: 64px;
}
body.woocommerce-cart .quantity .input-group .input-group-text {
width: 30px;
min-width: 30px;
height: 34px;
font-size: 0.875rem;
}
body.woocommerce-cart .quantity .input-group .qty {
width: 40px;
min-width: 40px;
height: 34px;
font-size: 0.8125rem;
}
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
font-size: 0.875rem;
}
}
@media (max-width: 768px) {
.cart-page-header {
margin-bottom: var(--space-xl);
}
/* Mobile: convert table to block layout */
body.woocommerce-cart .shop_table.cart,
body.woocommerce-cart .shop_table.cart tbody {
display: block !important;
width: 100% !important;
}
/* Mobile: hide table header */
body.woocommerce-cart .shop_table.cart thead {
display: none;
}
/* Mobile: card-style rows — stacked vertically */
body.woocommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
display: block !important;
padding: 16px 0 !important;
}
body.woocommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
border-bottom: none !important;
padding: 6px 0 !important;
background: transparent !important;
text-align: right !important;
float: none !important;
}
body.woocommerce-cart .shop_table.cart tbody td.product-name {
display: block !important;
order: 1;
padding-bottom: 12px !important;
}
body.woocommerce-cart .shop_table.cart tbody td.product-price {
order: 2;
font-size: 0.9375rem;
}
body.woocommerce-cart .shop_table.cart tbody td.product-quantity {
order: 3;
}
body.woocommerce-cart .shop_table.cart tbody td.product-subtotal {
order: 4;
font-weight: 700;
color: var(--erkon-primary);
}
/* Row separator */
body.woocommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
border-bottom: 1px solid var(--gray-100);
}
body.woocommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item:last-of-type {
border-bottom: none;
}
/* Smaller thumbnails */
.p-thumb {
width: 64px;
height: 64px;
min-width: 64px;
}
/* Stack coupon/actions */
.cart-actions-row {
flex-direction: column;
align-items: stretch;
}
body.woocommerce-cart table.cart td.actions .coupon {
max-width: 100%;
flex-direction: column !important;
align-items: stretch !important;
}
body.woocommerce-cart table.cart td.actions .coupon .input-text {
flex: 0 0 auto !important;
max-width: none !important;
width: 100% !important;
}
body.woocommerce-cart table.cart td.actions .coupon .button {
width: 100%;
justify-content: center;
white-space: normal;
}
body.woocommerce-cart .cart-actions-row > button[name="update_cart"] {
text-align: center;
border-radius: var(--radius-lg);
background: var(--gray-50);
padding: 12px;
}
/* Totals card */
.cart-totals-card {
padding: 20px;
border-radius: var(--radius-xl);
}
/* Security logos 2 columns on mobile */
.cart-secure-logos {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.product-cell-wrapper {
gap: 12px;
}
.p-thumb {
width: 56px;
height: 56px;
min-width: 56px;
}
.p-info > a {
font-size: 0.875rem;
}
.cart-totals-card__checkout .btn {
font-size: 0.875rem;
}
}
/* ==========================================================================
CART PAGE - REFINEMENTS & POLISH
========================================================================== */
/* ---- Compact Quantity Selector (Cart Context) ---- */
body.woocommerce-cart .quantity .input-group {
border-radius: var(--radius-lg);
border-color: var(--gray-200);
}
body.woocommerce-cart .quantity .input-group .input-group-text {
width: 34px;
min-width: 34px;
height: 36px;
font-size: 0.9375rem;
}
body.woocommerce-cart .quantity .input-group .minus {
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
body.woocommerce-cart .quantity .input-group .plus {
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
body.woocommerce-cart .quantity .input-group .qty {
width: 44px;
min-width: 44px;
height: 36px;
font-size: 0.8125rem;
}
/* ---- Price Column Formatting ---- */
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
body.woocommerce-cart td.product-price .woocommerce-Price-amount {
color: var(--gray-600);
font-weight: 500;
font-size: 0.9375rem;
}
body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
font-weight: 700;
color: var(--erkon-primary);
font-size: 1rem;
}
/* ---- Row Hover Effect ---- */
body.woocommerce-cart .shop_table.cart tr.woocommerce-cart-form__cart-item td {
transition: background-color var(--duration-normal, 200ms) ease;
}
body.woocommerce-cart .shop_table.cart tr.woocommerce-cart-form__cart-item:hover td {
background-color: rgba(var(--erkon-secondary-rgb), 0.02);
}
/* ---- Remove Button Refinement ---- */
.p-remove .remove {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: all var(--duration-normal, 200ms) ease;
}
.p-remove .remove::before {
width: 14px;
height: 14px;
transition: transform var(--duration-normal, 200ms) ease;
}
.p-remove .remove:hover {
background: rgba(220, 38, 38, 0.06) !important;
}
.p-remove .remove:hover::before {
transform: translate(0, -50%) scale(1.1);
}
/* ---- Cart Totals: Shipping Refinements ---- */
.cart-totals-table .shipping td {
text-align: left;
font-size: 0.8125rem;
line-height: 1.5;
vertical-align: top;
}
.cart-totals-table .shipping th {
vertical-align: top;
}
.cart-totals-table .shipping td .woocommerce-shipping-methods {
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.cart-totals-table .shipping td .woocommerce-shipping-methods li {
padding: 6px 0 !important;
font-size: 0.8125rem;
margin-bottom: 0;
}
.cart-totals-table .shipping td .woocommerce-shipping-methods li label {
font-weight: 500;
color: var(--gray-900);
}
.cart-totals-table .shipping td .shipping-calculator-button {
display: inline-block;
margin-top: 8px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--erkon-secondary);
text-decoration: none;
border-bottom: 1px dashed rgba(var(--erkon-secondary-rgb), 0.4);
padding-bottom: 1px;
transition: all var(--duration-normal, 200ms) ease;
}
.cart-totals-table .shipping td .shipping-calculator-button:hover {
color: var(--erkon-primary);
border-bottom-color: var(--erkon-primary);
border-bottom-style: solid;
}
/* ---- Empty Cart State ---- */
.cart-empty-state {
text-align: center;
padding: var(--space-3xl) var(--space-xl);
max-width: 480px;
margin: 0 auto;
}
.cart-empty-state__icon {
width: 120px;
height: 120px;
margin: 0 auto var(--space-xl);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(
145deg,
rgba(var(--erkon-secondary-rgb), 0.06) 0%,
rgba(var(--erkon-primary-rgb), 0.04) 100%
);
position: relative;
}
.cart-empty-state__icon::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px dashed var(--gray-200);
animation: cart-empty-rotate 30s linear infinite;
}
@keyframes cart-empty-rotate {
to { transform: rotate(360deg); }
}
.cart-empty-state__icon svg {
width: 48px;
height: 48px;
color: var(--erkon-secondary);
opacity: 0.7;
}
.cart-empty-state__title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--erkon-primary);
margin-bottom: var(--space-md);
letter-spacing: -0.02em;
}
.cart-empty-state__text {
color: var(--gray-600);
font-size: 1rem;
line-height: 1.7;
margin-bottom: var(--space-xl);
}
.cart-empty-state__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
background: linear-gradient(135deg, var(--erkon-primary) 0%, var(--erkon-secondary) 100%);
color: var(--erkon-white);
border-radius: var(--radius-xl);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
border: none;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
transition: all var(--duration-slow, 300ms) ease;
}
.cart-empty-state__cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(var(--erkon-secondary-rgb), 0.3);
color: var(--erkon-white);
}
.cart-empty-state__cta:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(var(--erkon-primary-rgb), 0.15);
}
.cart-empty-state__cta svg {
width: 18px;
height: 18px;
transition: transform var(--duration-normal, 200ms) ease;
}
.cart-empty-state__cta:hover svg {
transform: translateX(3px);
}
/* ==========================================================================
CART PAGE - MOBILE REFINEMENTS
========================================================================== */
@media (max-width: 768px) {
/* Mobile data-title labels */
body.woocommerce-cart .shop_table.cart tbody td[data-title]::before {
content: attr(data-title) ": ";
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-600);
font-family: var(--font-heading);
display: inline !important;
float: none !important;
margin-right: 4px;
}
body.woocommerce-cart .shop_table.cart tbody td.product-name::before {
display: none;
}
/* Compact quantity on mobile */
body.woocommerce-cart .quantity .input-group .input-group-text {
width: 32px;
min-width: 32px;
height: 36px;
font-size: 0.9375rem;
}
body.woocommerce-cart .quantity .input-group .qty {
width: 42px;
min-width: 42px;
height: 36px;
font-size: 0.8125rem;
}
/* Cross-sells: 2-column on mobile */
.cross-sells .products {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
/* Empty cart: tighter padding */
.cart-empty-state {
padding: var(--space-2xl) var(--space-md);
}
.cart-empty-state__icon {
width: 100px;
height: 100px;
}
.cart-empty-state__icon svg {
width: 40px;
height: 40px;
}
.cart-empty-state__title {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
body.woocommerce-cart .quantity .input-group .input-group-text {
width: 30px;
min-width: 30px;
height: 34px;
}
body.woocommerce-cart .quantity .input-group .qty {
width: 38px;
min-width: 38px;
height: 34px;
}
.cross-sells .products {
grid-template-columns: 1fr;
}
.cart-empty-state__cta {
width: 100%;
padding: 14px 24px;
}
}
/*--------------------------------------------------------------
WooCommerce Buttons
--------------------------------------------------------------*/
.woocommerce div.product form.cart .button,
.woocommerce button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt,
.woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
min-height: 46px;
padding: 0 1.375rem;
font-family: var(--font-heading, 'Libre Franklin', sans-serif);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
border: 2px solid transparent;
border-radius: var(--radius-md, 6px);
cursor: pointer;
user-select: none;
transition: all var(--transition);
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt {
min-height: 52px;
padding: 0 1.75rem;
font-size: 1rem;
}
.woocommerce .shop_table a.button,
.woocommerce .shop_table a.woocommerce-MyAccount-downloads-file.button.alt {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: var(--radius-sm);
}
.woocommerce div.product form.cart .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button {
color: var(--erkon-white);
background-color: var(--erkon-secondary);
border-color: var(--erkon-secondary);
box-shadow: 0 4px 14px rgba(var(--erkon-secondary-rgb), 0.2);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button:hover {
color: var(--erkon-white);
background-color: #0369a1;
border-color: #0369a1;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.3);
}
.woocommerce button.button,
.woocommerce .shop_table a.button,
.woocommerce .shop_table a.woocommerce-MyAccount-downloads-file.button.alt {
color: var(--primary);
background-color: transparent;
border-color: var(--primary);
}
.woocommerce button.button:hover,
.woocommerce .shop_table a.button:hover,
.woocommerce .shop_table a.woocommerce-MyAccount-downloads-file.button.alt:hover {
color: var(--erkon-white);
background-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.25);
}
.woocommerce button.button:disabled[disabled]:hover {
color: var(--primary);
background: transparent;
}
/*--------------------------------------------------------------
WooCommerce Checkout
--------------------------------------------------------------*/
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
border: none;
padding: 0;
margin: 0;
}
table.shop_table.woocommerce-checkout-review-order-table tr {
vertical-align: top;
}
.woocommerce-checkout #payment {
background: var(--erkon-white);
border: 1px solid rgba(0, 0, 0, 0.175);
border-radius: 0;
padding: 1rem 1rem;
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid var(--border-color);
padding: 0;
margin: 0 0 1rem;
list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods::after {
margin-top: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
line-height: inherit;
padding-left: 0;
}
.woocommerce-checkout #payment ul.payment_methods li input {
margin-right: 0.5em;
margin-left: 0;
margin-top: 0.25em;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child div.payment_box {
margin-bottom: 0;
}
.woocommerce-checkout #payment ul.payment_methods div.payment_box {
border-radius: var(--radius-md);
font-size: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods .payment_method_paypal img,
.woocommerce-checkout #payment ul.payment_methods .payment_method_paypal .about_paypal {
display: none;
}
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info {
margin-bottom: 0;
}
.woocommerce-checkout #payment div.form-row {
padding: 0;
margin: 0;
}
.woocommerce-checkout #payment #place_order {
width: 100%;
margin-bottom: 0 !important;
}
.woocommerce form .form-row .input-checkbox {
margin-left: 0 !important;
margin-right: 0 !important;
}
.woocommerce .woocommerce-terms-and-conditions,
.woocommerce-page .woocommerce-terms-and-conditions {
border: none;
box-shadow: none;
border-radius: var(--radius-md);
margin-bottom: 1rem;
padding: 1rem;
}
.woocommerce-SavedPaymentMethods.wc-saved-payment-methods {
padding-left: 0;
}
.woocommerce-SavedPaymentMethods.wc-saved-payment-methods li {
padding-left: 0;
}
.woocommerce-SavedPaymentMethods.wc-saved-payment-methods li input {
width: 1em !important;
margin-top: 0.25em !important;
margin-right: 0.5em !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
padding: 0.375rem 0.75rem !important;
background-color: var(--bg-primary) !important;
border-radius: var(--radius-md);
border: 1px solid var(--border-color) !important;
}
.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated input {
width: 1em !important;
}
.woocommerce-SavedPaymentMethods-saveNew label {
padding-left: 1.5em;
display: block !important;
}
.woocommerce form .form-row label.checkbox {
display: inline-block;
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea, .woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
background-repeat: no-repeat;
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea, .woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea {
padding-right: calc(1.5em + 0.75rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-invalid input.input-text {
background-position: right calc(0.375em + 0.1875rem) center;
}
.woocommerce form .form-row.woocommerce-validated select, .woocommerce form .form-row.woocommerce-invalid select {
padding-right: 4.125rem;
background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.woocommerce form .form-row.woocommerce-validated textarea, .woocommerce form .form-row.woocommerce-invalid textarea {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea {
background-image: var(--valid-icon);
}
.woocommerce form .form-row.woocommerce-validated select {
--form-select-bg-icon: var(--valid-icon);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated select {
border-color: var(--success);
}
.woocommerce form .form-row.woocommerce-validated input.input-text:focus,
.woocommerce form .form-row.woocommerce-validated textarea:focus,
.woocommerce form .form-row.woocommerce-validated select:focus {
box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.woocommerce form .form-row.woocommerce-validated input#terms {
border-color: var(--success);
background-color: var(--success);
}
.woocommerce form .form-row.woocommerce-validated input#terms:focus {
box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.woocommerce form .form-row.woocommerce-validated .woocommerce-terms-and-conditions-checkbox-text {
color: var(--success);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea {
background-image: var(--invalid-icon);
}
.woocommerce form .form-row.woocommerce-invalid select {
--form-select-bg-icon: var(--invalid-icon);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select {
border-color: var(--danger);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text:focus,
.woocommerce form .form-row.woocommerce-invalid textarea:focus,
.woocommerce form .form-row.woocommerce-invalid select:focus {
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.woocommerce form .form-row.woocommerce-invalid label {
color: var(--text);
}
.woocommerce form .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text {
color: var(--danger);
}
.woocommerce form .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox input {
border-color: var(--danger);
}
.woocommerce form .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox input:focus {
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
/*--------------------------------------------------------------
WooCommerce Comments
--------------------------------------------------------------*/
#woo-comments .star-rating {
float: right;
margin: 0;
}
.woocommerce #reviews h3, .woocommerce #reviews .h3 {
margin-bottom: 0.5rem;
}
/*--------------------------------------------------------------
WooCommerce Form Login
--------------------------------------------------------------*/
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
display: block;
margin-bottom: 1rem;
}
/*--------------------------------------------------------------
WooCommerce Forms
--------------------------------------------------------------*/
.woocommerce form .form-row {
padding: 0;
margin: 0 0 1rem;
}
.woocommerce form .form-row label {
line-height: 1.5;
margin-bottom: 0.5rem;
}
.woocommerce-page form .show-password-input {
top: 0.5em;
}
.woocommerce form .form-row-first {
width: 50%;
padding-right: 0.5rem;
}
.woocommerce form .form-row-last {
width: 50%;
padding-left: 0.5rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
display: block;
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--text);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--erkon-white);
background-clip: padding-box;
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
color: var(--text);
background-color: var(--erkon-white);
border-color: var(--erkon-primary);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--erkon-primary-rgb), 0.25);
}
.woocommerce form .form-row textarea,
.woocommerce #reviews #comment {
height: 7rem;
}
.woocommerce form .form-row .input-checkbox {
margin: 0.25em 0 0 0;
}
.checkbox,
.woocommerce-form-login__rememberme,
.woocommerce-SavedPaymentMethods-saveNew {
display: block;
min-height: 1.5rem;
padding-left: 0;
margin-bottom: 0.125rem;
}
.checkbox input,
.woocommerce-form-login__rememberme input,
.woocommerce-SavedPaymentMethods-saveNew input {
float: left;
margin-left: -1.5em;
--form-check-bg: var(--bg-primary);
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--form-check-bg);
background-image: var(--form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid var(--border-color);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.checkbox input[type=checkbox],
.woocommerce-form-login__rememberme input[type=checkbox],
.woocommerce-SavedPaymentMethods-saveNew input[type=checkbox] {
border-radius: var(--radius-base);
}
.checkbox input:active,
.woocommerce-form-login__rememberme input:active,
.woocommerce-SavedPaymentMethods-saveNew input:active {
filter: brightness(90%);
}
.checkbox input:focus,
.woocommerce-form-login__rememberme input:focus,
.woocommerce-SavedPaymentMethods-saveNew input:focus {
border-color: var(--erkon-primary);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--erkon-primary-rgb), 0.25);
}
.checkbox input:checked,
.woocommerce-form-login__rememberme input:checked,
.woocommerce-SavedPaymentMethods-saveNew input:checked {
background-color: var(--erkon-primary);
border-color: var(--erkon-primary);
}
.checkbox input:checked[type=checkbox],
.woocommerce-form-login__rememberme input:checked[type=checkbox],
.woocommerce-SavedPaymentMethods-saveNew input:checked[type=checkbox] {
--form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.woocommerce-shipping-methods {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-shipping-methods li {
font-weight: normal;
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
.woocommerce-shipping-methods li input {
float: left;
margin-left: -1.5em;
--form-check-bg: var(--bg-primary);
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--form-check-bg);
background-image: var(--form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid var(--border-color);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.woocommerce-shipping-methods li input[type=radio] {
border-radius: 50%;
}
.woocommerce-shipping-methods li input:active {
filter: brightness(90%);
}
.woocommerce-shipping-methods li input:focus {
border-color: var(--erkon-primary);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--erkon-primary-rgb), 0.25);
}
.woocommerce-shipping-methods li input:checked {
background-color: var(--erkon-primary);
border-color: var(--erkon-primary);
}
.woocommerce-shipping-methods li input:checked[type=radio] {
--form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
/*--------------------------------------------------------------
WooCommerce Loader
--------------------------------------------------------------*/
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.5em;
margin-top: -0.5em;
content: "";
background: none;
line-height: 1;
text-align: center;
font-size: 2em;
}
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.13em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border 0.75s linear infinite;
}
/*--------------------------------------------------------------
WooCommerce Loop
--------------------------------------------------------------*/
.woocommerce .card a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
text-decoration: none;
}
.woocommerce .card a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover {
text-decoration: none;
}
.woocommerce .card .woocommerce-loop-product__title {
font-size: 1.25rem;
}
.woocommerce .card .star-rating {
float: none;
margin: 1rem auto;
}
.woocommerce .card .star-rating span::before {
text-align: left;
}
.woocommerce .card .price {
display: block;
margin-bottom: 1rem;
}
.product-category .card-body a {
margin-top: auto;
}
.product-category .card img,
.product.card img {
border-top-left-radius: calc(0 - (1px));
border-top-right-radius: calc(0 - (1px));
width: 100%;
}
/*--------------------------------------------------------------
WooCommerce My Account
--------------------------------------------------------------*/
/* WooCommerce float override */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: 100%;
}
/* Customer address on order/checkout pages */
.woocommerce .woocommerce-customer-details address {
background: var(--erkon-white);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
/* -------------------------------------------------------------------------
1. LOGIN / REGISTER PAGE (logged out)
------------------------------------------------------------------------- */
.myaccount-login-section {
background: var(--gray-50);
}
/* Tab switcher — clean underline style */
.myaccount-form-tabs {
display: flex;
border-bottom: 2px solid var(--border-default);
}
.myaccount-tab {
position: relative;
flex: 1;
padding: var(--space-4) var(--space-6);
font-family: var(--font-heading);
font-size: 1rem;
font-weight: var(--font-semibold);
color: var(--text-tertiary);
background: none;
border: none;
cursor: pointer;
text-align: center;
transition: color var(--duration-normal) ease;
}
.myaccount-tab::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: transparent;
transition: background var(--duration-slow) ease;
}
.myaccount-tab:hover {
color: var(--text-primary);
}
.myaccount-tab.active {
color: var(--erkon-primary);
}
.myaccount-tab.active::after {
background: linear-gradient(90deg, var(--erkon-primary), var(--erkon-secondary));
}
/* Panel visibility */
.myaccount-form-panel {
display: none;
}
.myaccount-form-panel.active {
display: block;
}
/* Remember me */
.myaccount-remember {
cursor: pointer;
}
.myaccount-remember input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(--gray-300);
border-radius: var(--radius-sm);
background: var(--erkon-white);
cursor: pointer;
transition: all var(--duration-normal) ease;
flex-shrink: 0;
}
.myaccount-remember input[type="checkbox"]:hover {
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 3px rgba(var(--erkon-secondary-rgb), 0.1);
}
.myaccount-remember input[type="checkbox"]:checked {
background-color: var(--erkon-primary);
border-color: var(--erkon-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.myaccount-remember input[type="checkbox"]:focus-visible {
outline: 2px solid var(--erkon-accent);
outline-offset: 2px;
}
/* Lost password link */
.myaccount-lost-password {
position: relative;
display: inline-block;
color: var(--erkon-secondary);
text-decoration: none;
font-weight: var(--font-medium);
transition: color var(--duration-normal) ease;
}
.myaccount-lost-password::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--erkon-secondary), var(--erkon-primary));
transition: width var(--duration-slow) ease;
}
.myaccount-lost-password:hover {
color: var(--erkon-primary);
text-decoration: none;
}
.myaccount-lost-password:hover::after {
width: 100%;
}
/* -------------------------------------------------------------------------
2. DASHBOARD SECTION (logged in)
------------------------------------------------------------------------- */
.myaccount-dashboard-section {
background: var(--gray-50);
}
/* -------------------------------------------------------------------------
2a. Navigation Card
------------------------------------------------------------------------- */
.myaccount-nav-card {
background: var(--erkon-white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
overflow: hidden;
border: 1px solid var(--border-muted);
}
/* Navy gradient header */
.myaccount-nav-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
color: var(--erkon-white);
font-family: var(--font-heading);
font-weight: var(--font-semibold);
font-size: 1rem;
}
.myaccount-nav-header svg {
opacity: 0.85;
flex-shrink: 0;
}
/* Nav list */
.myaccount-nav-list {
list-style: none;
padding: var(--space-2) 0;
margin: 0;
}
.myaccount-nav-item {
margin: 0;
}
.myaccount-nav-item a {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-6);
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: var(--font-medium);
color: var(--text-secondary);
text-decoration: none;
border-left: 3px solid transparent;
transition: all var(--duration-normal) ease;
}
.myaccount-nav-item a svg {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.55;
transition: opacity var(--duration-normal) ease, color var(--duration-normal) ease;
}
.myaccount-nav-item a:hover {
color: var(--erkon-primary);
background: rgba(var(--erkon-primary-rgb), 0.04);
border-left-color: rgba(var(--erkon-secondary-rgb), 0.3);
}
.myaccount-nav-item a:hover svg {
opacity: 1;
}
/* Active state */
.myaccount-nav-item.is-active a {
color: var(--erkon-primary);
background: rgba(var(--erkon-primary-rgb), 0.06);
border-left-color: var(--erkon-secondary);
font-weight: var(--font-semibold);
}
.myaccount-nav-item.is-active a svg {
opacity: 1;
color: var(--erkon-secondary);
}
/* Logout — visually separated */
.myaccount-nav-item--logout {
margin-top: var(--space-1);
border-top: 1px solid var(--border-muted);
padding-top: var(--space-1);
}
.myaccount-nav-item--logout a {
color: var(--color-error);
}
.myaccount-nav-item--logout a svg {
color: var(--color-error);
opacity: 0.65;
}
.myaccount-nav-item--logout a:hover {
color: var(--color-error-dark);
background: rgba(220, 38, 38, 0.04);
border-left-color: rgba(220, 38, 38, 0.3);
}
/* Flex overflow fix — allow content column to shrink below intrinsic width */
.myaccount-dashboard-section .col-lg-9,
.myaccount-dashboard-section .col-md-8 {
min-width: 0;
}
/* -------------------------------------------------------------------------
2b. Content Card
------------------------------------------------------------------------- */
.myaccount-content-card {
background: var(--erkon-white);
padding: var(--space-8) var(--space-10);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-muted);
min-height: 300px;
overflow: hidden;
}
/* Typography */
.myaccount-content-card h2,
.myaccount-content-card h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.myaccount-content-card h3 {
font-size: 1.125rem;
}
.myaccount-content-card p {
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
/* Links */
.myaccount-content-card a:not(.button):not(.btn):not(.edit) {
color: var(--erkon-secondary);
text-decoration: none;
font-weight: var(--font-medium);
transition: color var(--duration-normal) ease;
}
.myaccount-content-card a:not(.button):not(.btn):not(.edit):hover {
color: var(--erkon-primary);
text-decoration: underline;
}
/* -------------------------------------------------------------------------
3. ADDRESSES PAGE — two-column layout fix
------------------------------------------------------------------------- */
/* Flex container overrides WooCommerce col2-set default */
.myaccount-content-card .woocommerce-Addresses {
display: flex;
gap: var(--space-6);
}
/* CRITICAL: override Erkon grid .col-1 (8.33%) / .col-2 (16.67%) inside addresses */
.myaccount-content-card .woocommerce-Addresses .col-1,
.myaccount-content-card .woocommerce-Addresses .col-2,
.myaccount-content-card .woocommerce-Addresses .u-column1,
.myaccount-content-card .woocommerce-Addresses .u-column2 {
flex: 1 1 0;
max-width: none;
width: auto;
min-width: 0;
}
/* Individual address card */
.myaccount-content-card .woocommerce-Address {
background: var(--gray-50);
padding: var(--space-6);
border-radius: var(--radius-xl);
border: 1px solid var(--border-default);
transition: border-color var(--duration-normal) ease,
box-shadow var(--duration-normal) ease;
}
.myaccount-content-card .woocommerce-Address:hover {
border-color: rgba(var(--erkon-secondary-rgb), 0.25);
box-shadow: 0 2px 12px rgba(var(--erkon-secondary-rgb), 0.06);
}
/* Address header — h2 + .edit link on same row */
.myaccount-content-card .woocommerce-Address-title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-default);
}
.myaccount-content-card .woocommerce-Address-title h2,
.myaccount-content-card .woocommerce-Address-title h3 {
font-size: 0.9375rem;
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0;
flex: 1;
min-width: 0;
}
/* Edit/Add link — Erkon button style */
.myaccount-content-card .woocommerce-Address-title .edit {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--erkon-white);
font-size: 0.8125rem;
font-weight: var(--font-semibold);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
padding: 6px 16px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
box-shadow: 0 2px 8px rgba(var(--erkon-primary-rgb), 0.2);
transition: all var(--duration-slow) ease;
}
.myaccount-content-card .woocommerce-Address-title .edit:hover {
background: linear-gradient(135deg, var(--erkon-secondary) 0%, #0369a1 100%);
box-shadow: 0 4px 14px rgba(var(--erkon-secondary-rgb), 0.3);
transform: translateY(-1px);
color: var(--erkon-white);
text-decoration: none;
}
/* Address content */
.myaccount-content-card .woocommerce-Address address {
font-style: normal;
line-height: 1.8;
color: var(--text-secondary);
font-size: 0.9375rem;
}
/* -------------------------------------------------------------------------
4. TABLES (orders, downloads)
------------------------------------------------------------------------- */
.myaccount-content-card .woocommerce-orders-table,
.myaccount-content-card .shop_table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-default);
}
.myaccount-content-card .woocommerce-orders-table thead th,
.myaccount-content-card .shop_table thead th {
background: var(--gray-50);
padding: var(--space-4) var(--space-5);
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: var(--font-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
border-bottom: 1px solid var(--border-default);
text-align: left;
}
.myaccount-content-card .woocommerce-orders-table td,
.myaccount-content-card .shop_table td {
padding: var(--space-4) var(--space-5);
font-size: 0.9375rem;
color: var(--text-primary);
border-bottom: 1px solid var(--border-muted);
vertical-align: middle;
}
.myaccount-content-card .woocommerce-orders-table tr:last-child td,
.myaccount-content-card .shop_table tbody tr:last-child td {
border-bottom: none;
}
.myaccount-content-card .woocommerce-orders-table tbody tr:hover td,
.myaccount-content-card .shop_table tbody tr:hover td {
background: var(--gray-50);
}
/* Orders table action buttons — match theme .btn-secondary standard */
.myaccount-content-card .woocommerce-orders-table a.button {
min-height: 46px;
padding: 0 1.375rem;
font-size: 0.9375rem;
border-radius: var(--radius-md, 6px);
color: var(--erkon-primary);
background-color: transparent;
border: 2px solid var(--erkon-primary);
}
.myaccount-content-card .woocommerce-orders-table a.button:hover {
color: var(--erkon-white);
background-color: var(--erkon-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
/* -------------------------------------------------------------------------
5. FORMS (edit-account, edit-address)
Matches CF7 input pattern: 52 px, gray-50 bg, radius-xl, blue focus ring
------------------------------------------------------------------------- */
.myaccount-content-card .woocommerce-EditAccountForm .form-row,
.myaccount-content-card .woocommerce-address-fields .form-row {
margin-bottom: var(--space-5);
}
.myaccount-content-card .woocommerce-EditAccountForm label,
.myaccount-content-card .woocommerce-address-fields label {
display: block;
font-size: 0.875rem;
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
/* Checkbox rows — override .woocommerce form .form-row .input-checkbox (0-3-1) */
.woocommerce .myaccount-content-card form .form-row .input-checkbox {
margin-left: 0 !important;
float: none !important;
margin-right: var(--space-2);
vertical-align: middle;
}
.myaccount-content-card .form-row label.checkbox {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-left: 0;
}
.myaccount-content-card .woocommerce-EditAccountForm input.input-text,
.myaccount-content-card .woocommerce-address-fields input.input-text,
.myaccount-content-card .woocommerce-EditAccountForm select,
.myaccount-content-card .woocommerce-address-fields select {
width: 100%;
height: 52px;
padding: 0 var(--space-4);
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-primary);
background-color: var(--gray-50);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
transition: all var(--duration-normal) ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.myaccount-content-card .woocommerce-EditAccountForm input.input-text:focus,
.myaccount-content-card .woocommerce-address-fields input.input-text:focus,
.myaccount-content-card .woocommerce-EditAccountForm select:focus,
.myaccount-content-card .woocommerce-address-fields select:focus {
outline: none;
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
background-color: var(--erkon-white);
}
/* Fieldset (password change) */
.myaccount-content-card fieldset {
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin-top: var(--space-6);
}
.myaccount-content-card fieldset legend {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: var(--font-semibold);
color: var(--text-primary);
padding: 0 var(--space-2);
}
/* Submit button — gradient pattern */
.myaccount-content-card button[type="submit"],
.myaccount-content-card input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: var(--font-semibold);
color: var(--erkon-white);
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
border: none;
border-radius: var(--radius-xl);
cursor: pointer;
transition: all var(--duration-slow) ease;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.25);
margin-top: var(--space-4);
}
.myaccount-content-card button[type="submit"]:hover,
.myaccount-content-card input[type="submit"]:hover {
background: linear-gradient(135deg, var(--erkon-secondary) 0%, #0369a1 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.35);
}
.myaccount-content-card button[type="submit"]:active,
.myaccount-content-card input[type="submit"]:active {
transform: translateY(0);
}
/* -------------------------------------------------------------------------
6. NOTICES inside content card
------------------------------------------------------------------------- */
.myaccount-content-card .woocommerce-message,
.myaccount-content-card .woocommerce-info,
.myaccount-content-card .woocommerce-error {
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
/* -------------------------------------------------------------------------
7. OFFCANVAS ACCOUNT (mobile slide-out menu)
------------------------------------------------------------------------- */
#offcanvas-user .woocommerce-MyAccount-content p:last-child {
display: none;
}
#offcanvas-user .col-md-4,
#offcanvas-user .col-md-8 {
width: 100%;
}
#offcanvas-user .col-md-8 {
order: -1;
}
/* -------------------------------------------------------------------------
8. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Content card */
.myaccount-content-card {
padding: var(--space-5) var(--space-4);
border-radius: var(--radius-xl);
}
/* Nav card */
.myaccount-nav-card {
border-radius: var(--radius-xl);
}
.myaccount-nav-header {
padding: var(--space-3) var(--space-4);
font-size: 0.875rem;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
/* Horizontal scrollable pill nav on mobile */
.myaccount-nav-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: var(--space-3);
gap: var(--space-2);
scrollbar-width: none;
}
.myaccount-nav-list::-webkit-scrollbar {
display: none;
}
.myaccount-nav-item {
flex: 0 0 auto;
}
.myaccount-nav-item a {
border-left: none;
border-radius: 999px;
padding: var(--space-2) var(--space-4);
font-size: 0.8125rem;
white-space: nowrap;
background: var(--gray-50);
border: 1px solid var(--border-default);
}
.myaccount-nav-item a svg {
display: none;
}
.myaccount-nav-item a:hover {
background: var(--gray-100);
border-left-color: transparent;
}
.myaccount-nav-item.is-active a {
background: var(--erkon-primary);
color: var(--erkon-white);
border-color: var(--erkon-primary);
font-weight: var(--font-semibold);
}
.myaccount-nav-item--logout {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.myaccount-nav-item--logout a {
background: transparent;
border-color: rgba(220, 38, 38, 0.2);
color: var(--color-error);
}
/* Tables scroll */
.myaccount-content-card .woocommerce-orders-table,
.myaccount-content-card .shop_table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Login tabs */
.myaccount-tab {
padding: var(--space-3) var(--space-4);
font-size: 0.9375rem;
}
/* Fieldset tighter on mobile */
.myaccount-content-card fieldset {
padding: var(--space-4);
}
}
/* Address cards stack on tablets — not enough horizontal space for two */
@media (max-width: 1024px) {
.myaccount-content-card .woocommerce-Addresses {
flex-direction: column;
}
}
/*--------------------------------------------------------------
WooCommerce Quantity Input (max="1" single-product fallback)
--------------------------------------------------------------*/
.quantity:has([max="1"]) .input-group-text {
pointer-events: none;
}
/*--------------------------------------------------------------
WooCommerce Prices
--------------------------------------------------------------*/
ins {
text-decoration: none;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
font-weight: normal;
}
.woocommerce-price-suffix {
display: block;
font-size: 0.875rem;
}
/*--------------------------------------------------------------
WooCommerce Product Page
--------------------------------------------------------------*/
.woocommerce-product-gallery__image,
.woocommerce div.product div.images .flex-control-thumbs img {
border-radius: var(--radius);
}
.woocommerce div.product div.images .flex-control-thumbs {
display: flex;
margin-top: 0.5rem;
gap: 6px;
flex-wrap: wrap;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 120px;
}
.woocommerce div.product p.stock {
font-size: 0.75em;
font-weight: 700;
color: var(--erkon-white);
padding: 0.35em 0.65em;
border-radius: var(--radius);
background-color: var(--danger);
display: inline-block;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
.product_meta .sku_wrapper::after,
.product_meta .posted_in::after {
content: "\a";
white-space: pre;
}
/*--------------------------------------------------------------
WooCommerce Grouped Product
--------------------------------------------------------------*/
.woocommerce-grouped-product-list a.button {
width: 100%;
}
/*--------------------------------------------------------------
WooCommerce Variable Product
--------------------------------------------------------------*/
.woocommerce div.product form.cart .variations {
margin-bottom: 20px;
}
.woocommerce div.product form.cart .variations select {
margin-right: 0;
}
form.variations_form.cart {
flex-direction: column;
}
.woocommerce-variation-add-to-cart.variations_button {
display: flex;
}
.woocommerce button.disabled.button,
.woocommerce div.product form.cart button.disabled.button {
pointer-events: auto;
cursor: inherit;
}
.woocommerce-variation-price {
margin: 0;
}
/*--------------------------------------------------------------
WooCommerce Deprecated
--------------------------------------------------------------*/
/*--------------------------------------------------------------
WooCommerce Sale Badge
--------------------------------------------------------------*/
.woocommerce span.onsale {
background-color: var(--danger);
min-height: inherit;
min-width: inherit;
top: 1rem;
left: 1rem;
}
/*--------------------------------------------------------------
WooCommerce Shipping
--------------------------------------------------------------*/
.shipping-calculator-form button {
width: 100%;
}
/*--------------------------------------------------------------
WooCommerce Shop Page
--------------------------------------------------------------*/
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
float: none;
}
.woocommerce .woocommerce-ordering {
margin: 0;
}
/*--------------------------------------------------------------
WooCommerce Tables
--------------------------------------------------------------*/
.woocommerce table {
vertical-align: top;
}
.woocommerce table.shop_table {
border: 1px solid var(--border-color);
}
.woocommerce table.shop_table td {
border-top: 1px solid var(--border-color);
}
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th {
border-top: 1px solid var(--border-color);
}
.woocommerce table.shop_table {
border-radius: var(--radius-md);
}
/*--------------------------------------------------------------
WooCommerce Single Product Tabs
--------------------------------------------------------------*/
.tab-scroller {
white-space: nowrap;
scrollbar-width: none;
}
.tab-scroller .nav {
flex-wrap: nowrap;
}
.tab-scroller::-webkit-scrollbar {
display: none;
}
/*--------------------------------------------------------------
WooCommerce Thank You Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
WooCommerce Widgets
--------------------------------------------------------------*/
.woocommerce ul.product_list_widget li .star-rating {
float: none;
margin: 0.5rem 0;
}
/*--------------------------------------------------------------
WooCommerce Colors
--------------------------------------------------------------*/
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.card .price {
color: var(--text-muted);
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
ins {
color: var(--danger);
}
.woocommerce form .form-row .required {
color: var(--danger);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
opacity: 1;
}
.card a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
color: currentColor;
}
.woocommerce-cart .cart-collaterals .cart_totals table small,
.woocommerce-cart .cart-collaterals .cart_totals table .small,
.woocommerce-checkout .cart-collaterals .cart_totals table small,
.woocommerce-checkout .cart-collaterals .cart_totals table .small {
color: var(--text-muted);
}
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background-color: var(--bg-secondary);
color: currentColor;
}
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--bg-secondary);
}
.woocommerce-terms-and-conditions {
background: var(--bg-secondary);
}
.woocommerce div.product .out-of-stock {
color: var(--danger);
}
.woocommerce .blockUI.blockOverlay,
.woocommerce .loader,
#offcanvas-cart .blockUI.blockOverlay,
#offcanvas-cart .loader {
background-color: var(--bg-primary) !important;
opacity: 1 !important;
}
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
color: var(--primary);
}
.woocommerce-invalid #terms {
outline: none;
outline-offset: 0;
}
/*--------------------------------------------------------------
WooCommerce Block Widgets
--------------------------------------------------------------*/
.list-group-flush .bs-list-group {
border-radius: 0;
}
.list-group-flush .bs-list-group > .list-group-item {
border-width: 0 0 1px;
}
.list-group-flush .bs-list-group > .list-group-item:last-child {
border-bottom-left-radius: calc(var(--radius) - (1px));
border-bottom-right-radius: calc(var(--radius) - (1px));
border-bottom-width: 0;
}
.wc-cat-img img {
max-width: 28px;
}
.wc-block-product-categories .form-select, .wc-block-product-categories select {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.wc-block-product-categories__dropdown:has(.form-select:focus, select:focus) {
z-index: 5;
}
/* FAQ Archive Styles */
.faq-item {
background: var(--erkon-white);
border-radius: var(--radius-lg);
margin-bottom: 10px;
}
.faq-item .faq-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
cursor: pointer;
position: relative;
padding: 36px;
padding-right: 40px;
}
.faq-item .faq-toggle {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--erkon-primary);
transition: transform var(--duration-slow) ease;
}
.faq-item.active .faq-toggle {
transform: rotate(180deg);
}
.faq-item.loading {
opacity: 0.5;
pointer-events: none;
}
/*
******************************************************************************************************
Single Post Styles - Premium Editorial Design
******************************************************************************************************
*/
/* ==========================================================================
ARTICLE HERO
========================================================================== */
.article-hero {
position: relative;
padding: 80px 0 60px;
background: #EDEAE6;
overflow: hidden;
}
.article-hero--with-image {
padding: 120px 0 80px;
min-height: 500px;
display: flex;
align-items: flex-end;
}
.article-hero__backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.article-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.article-hero__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to top,
rgba(var(--erkon-primary-rgb), 0.95) 0%,
rgba(var(--erkon-primary-rgb), 0.7) 40%,
rgba(var(--erkon-primary-rgb), 0.3) 100%
);
}
.article-hero__content {
position: relative;
z-index: 2;
}
.article-hero--with-image .article-hero__content {
color: var(--erkon-white);
}
/* .article-category-badge replaced by .subtitle .subtitle--category */
/* Hero Title */
.article-hero__title {
font-family: 'Libre Franklin', sans-serif;
font-size: clamp(32px, 5vw, 52px);
font-weight: 700;
line-height: 1.15;
color: var(--erkon-primary);
margin: 0 0 32px;
max-width: 900px;
}
.article-hero--with-image .article-hero__title {
color: var(--erkon-white);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
/* Article Meta */
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
margin-bottom: 24px;
}
.article-meta__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
color: #4a5568;
}
.article-hero--with-image .article-meta__item {
color: rgba(255, 255, 255, 0.9);
}
.article-meta__icon {
opacity: 0.7;
flex-shrink: 0;
}
.article-meta__separator {
display: none;
}
/* Article Tags */
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* .article-tag replaced by .subtitle .subtitle--tag */
/* ==========================================================================
ARTICLE CONTENT
========================================================================== */
.article-content {
padding: 64px 0;
background: var(--erkon-white);
}
.article-body {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
line-height: 1.85;
color: #2d3748;
}
.article-body > *:first-child {
margin-top: 0;
}
.article-body > *:last-child {
margin-bottom: 0;
}
.article-body p {
margin-bottom: 1.75em;
}
.article-body h2 {
font-family: 'Libre Franklin', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--erkon-primary);
margin: 2.5em 0 1em;
line-height: 1.3;
}
.article-body h3 {
font-family: 'Libre Franklin', sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--erkon-primary);
margin: 2em 0 0.75em;
line-height: 1.4;
}
.article-body h4 {
font-family: 'Libre Franklin', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--erkon-primary);
margin: 1.5em 0 0.5em;
}
.article-body a {
color: var(--erkon-secondary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--duration-normal) ease;
}
.article-body a:hover {
color: #2C4482;
}
.article-body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-xl);
margin: 2em 0;
box-shadow: 0 4px 24px rgba(var(--erkon-primary-rgb), 0.1);
}
.article-body blockquote {
position: relative;
margin: 2.5em 0;
padding: 32px 32px 32px 40px;
background: #EDEAE6;
border-left: 4px solid #2C4482;
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
font-size: 19px;
font-style: italic;
color: #4a5568;
line-height: 1.7;
}
.article-body blockquote p:last-child {
margin-bottom: 0;
}
.article-body ul,
.article-body ol {
margin: 1.5em 0;
padding-left: 1.5em;
}
.article-body li {
margin-bottom: 0.75em;
padding-left: 0.5em;
}
.article-body ul li::marker {
color: var(--erkon-secondary);
}
.article-body ol li::marker {
color: #2C4482;
font-weight: 600;
}
/* ==========================================================================
ARTICLE FOOTER
========================================================================== */
.article-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid rgba(var(--erkon-primary-rgb), 0.1);
}
.article-back-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
background: transparent;
color: var(--erkon-primary);
font-family: 'Work Sans', sans-serif;
font-size: 15px;
font-weight: 600;
border: 2px solid var(--erkon-primary);
border-radius: var(--radius-lg);
text-decoration: none;
transition: all var(--duration-slow) var(--ease-in-out);
}
.article-back-link:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--erkon-primary-rgb), 0.2);
}
.article-back-link svg {
transition: transform var(--duration-slow) ease;
}
.article-back-link:hover svg {
transform: translateX(-4px);
}
.article-footer__related {
display: flex;
align-items: center;
gap: 12px;
}
.article-footer__label {
font-family: 'Work Sans', sans-serif;
font-size: 14px;
color: #718096;
}
.article-footer__category {
display: inline-flex;
padding: 8px 16px;
background: #EDEAE6;
color: var(--erkon-primary);
font-family: 'Work Sans', sans-serif;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--duration-slow) ease;
}
.article-footer__category:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
}
/* ==========================================================================
RESPONSIVE - ARTICLE
========================================================================== */
@media (max-width: 1024px) {
.article-hero {
padding: 60px 0 48px;
}
.article-hero--with-image {
padding: 100px 0 60px;
min-height: 420px;
}
}
@media (max-width: 768px) {
.article-hero {
padding: 48px 0 40px;
}
.article-hero--with-image {
padding: 80px 0 48px;
min-height: 380px;
}
.article-hero__title {
font-size: 28px;
}
.article-meta {
gap: 8px 16px;
}
.article-meta__item {
font-size: 14px;
}
.article-content {
padding: 48px 0;
}
.article-body {
font-size: 17px;
}
.article-body h2 {
font-size: 24px;
}
.article-body h3 {
font-size: 20px;
}
.article-body blockquote {
padding: 24px;
font-size: 17px;
}
.article-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* ==========================================================================
LEGACY SINGLE POST STYLES (keeping for backwards compatibility)
========================================================================== */
.back-to-blog {
margin-bottom: 20px;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--erkon-primary);
font-size: 18px;
font-weight: 400;
}
.single-header {
padding: 50px 0 60px;
background: #EDEAE6;
}
/* Featured image in hero */
.single-hero-image {
margin-bottom: 32px;
border-radius: var(--radius-xl);
overflow: hidden;
}
.single-hero-image img {
width: 100%;
height: auto;
display: block;
}
.single-header .post-thumbnail {
width: 100%;
height: 400px;
border-radius: var(--radius-lg);
overflow: hidden;
}
.single-header .post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.single-header .bottom-meta {
display: flex;
gap: 60px;
align-items: flex-start;
margin-top: 48px;
}
/* Keywords section - standalone */
.single-keywords {
margin-top: 32px;
}
.single-keywords .keywords-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: var(--erkon-primary);
}
.single-keywords .keywords-list {
margin: 0;
}
.single-keywords .keyword-tag {
display: inline-block;
background: var(--erkon-white);
color: var(--erkon-primary);
padding: 10px 16px;
line-height: 1;
border-radius: var(--radius-md);
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: all var(--duration-slow) ease;
border: 1px solid rgba(var(--erkon-primary-rgb), 0.2);
}
.single-keywords .keyword-tag:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
border-color: var(--erkon-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--erkon-primary-rgb), 0.15);
}
/* Legacy .single-header .single-keywords for backwards compatibility */
.single-header .single-keywords {
flex-grow: 1;
width: 365px;
flex-shrink: 0;
}
.single-header .single-keywords .keywords-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.single-header .single-keywords .keywords-list {
margin: 0;
}
.single-header .single-keywords .keyword-tag {
display: inline-block;
background: var(--erkon-white);
color: #000;
padding: 12px 12px;
line-height: 1;
border-radius: var(--radius-base);
font-size: 18px;
font-weight: 400;
text-decoration: none;
transition: all var(--duration-slow) ease;
border: 1px solid #3D3D3D;
}
.single-header .single-keywords .keyword-tag:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
border-color: var(--erkon-primary);
}
.single-header .intro-content {
width: 70%;
flex-grow: 1;
padding-top: 32px;
font-size: 20px;
line-height: 32px;
font-weight: 700;
}
.single-header .intro-content p:last-child {
margin: 0;
}
.single-title {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 32px;
color: var(--erkon-primary);
}
.single-meta {
font-size: 18px;
background: var(--erkon-white);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 24px;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: rgba(76, 49, 27, 0.3);
}
.single-category {
display: inline-block;
background: var(--erkon-primary);
color: var(--erkon-white);
padding: 7px 14px;
border-radius: var(--radius-base);
font-size: 16px;
font-weight: 400;
text-decoration: none;
transition: all var(--duration-slow) ease;
}
.single-category:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--erkon-primary-rgb), 0.2);
color: var(--erkon-white);
}
.single-date,
.single-authors {
display: inline-flex;
align-items: center;
gap: 6px;
}
.single-date a,
.single-authors a {
color: var(--erkon-primary);
text-decoration: none;
transition: color var(--duration-normal) ease;
}
.single-date a:hover,
.single-authors a:hover {
color: #bf7655;
text-decoration: underline;
}
.single-featured-image img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
}
.rounded img {
border-radius: var(--radius-md);
overflow: hidden;
}
.single-post-wrapper .entry-content h2, .single-post-wrapper .entry-content .h2 {
font-size: 28px;
}
.single-post-wrapper .entry-content h3, .single-post-wrapper .entry-content .h3 {
font-size: 24px;
}
.single-post-wrapper .entry-content p {
margin-bottom: 36px;
}
.single-post-wrapper .entry-content ul, .single-post-wrapper .entry-content ol {
margin-bottom: 36px;
padding-left: 25px;
}
.single-post-wrapper .entry-content li {
margin-bottom: 8px;
}
.single-post-wrapper .entry-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
}
.single-post-wrapper .entry-content blockquote {
border-left: 5px solid var(--erkon-primary);
padding: 12px 24px;
margin: 36px 0;
background: #EDEAE6;
font-style: italic;
font-size: 18px;
line-height: 32px;
width: 65%;
}
.post-collaborators {
margin-top: 40px;
}
.post-collaborators .section-subtitle {
font-size: 18px;
font-weight: 700;
line-height: 1;
color: var(--erkon-primary);
margin-bottom: 20px;
}
.collaborators-grid {
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: center;
}
.collaborator-item {
display: block;
}
.collaborator-item img {
max-height: 93px;
width: auto;
max-width: 140px;
object-fit: contain;
transition: opacity var(--duration-normal) ease;
}
.collaborator-item:hover img {
opacity: 0.8;
}
.post-meta-sections {
border-top: 1px solid #4C311B;
border-bottom: 1px solid #4C311B;
padding: 27px 24px;
display: flex;
gap: 60px;
align-items: center;
}
.post-meta-sections .section-subtitle {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
.attachments-list,
.further-reading-list {
list-style: none;
padding: 0;
margin: 0;
}
.attachments-list li,
.further-reading-list li {
display: flex;
}
.attachment-link,
.reading-link {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--erkon-primary);
text-decoration: none;
font-size: 18px;
font-weight: 700;
transition: color var(--duration-normal) ease, gap var(--duration-normal) ease;
}
.attachment-link svg,
.reading-link svg {
width: 24px;
flex-shrink: 0;
}
.tag-archive-wrapper .kb-page-title span {
color: var(--erkon-primary);
}
/*
******************************************************************************************************
Info Block Styles
******************************************************************************************************
*/
.info-block {
margin: 40px 0;
}
.info-block-inner {
display: flex;
align-items: center;
gap: 26px;
padding: 32px;
background: #EDEAE6;
border: 3px solid var(--erkon-primary);
border-radius: var(--radius-lg);
}
.info-block-icon {
flex-shrink: 0;
}
.info-block-icon img {
max-width: 48px;
height: auto;
display: block;
}
.info-block-content {
flex: 1;
font-size: 24px;
line-height: 1;
font-weight: 700;
}
.info-block-content p {
margin-bottom: 10px;
}
.info-block-content p:last-child {
margin-bottom: 0;
}
/*
******************************************************************************************************
Icon Stats Shortcode Styles
******************************************************************************************************
*/
.icon-stats-shortcode {
margin: 40px 0;
}
.icon-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 24px;
justify-content: center;
}
.icon-stat-item {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid #EDEAE6;
border-radius: var(--radius-lg);
padding: 18px;
}
.erkon-checkout-flow .icon-stat-item {
padding: 17px 14px;
}
.erkon-checkout-flow .icon-stat-item:nth-child(n+5) {
display: none;
}
.icon-stat-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-stat-icon img {
max-width: 100%;
height: auto;
display: block;
}
.icon-stat-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.icon-stat-value {
font-size: 36px;
font-weight: 700;
line-height: 1;
}
.icon-stat-label {
font-size: 16px;
line-height: 1;
}
/*
******************************************************************************************************
Accordion Block Styles
******************************************************************************************************
*/
.accordion-block .accordion-block-heading {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
text-align: left;
}
.accordion-block-heading {
font-size: 28px;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
.accordion .accordion-item {
border: none;
margin-bottom: 10px;
border-radius: var(--radius-base);
overflow: hidden;
}
.accordion .accordion-item:last-child {
margin-bottom: 0;
}
.accordion .accordion-header {
margin-bottom: 0;
}
.accordion .accordion-button {
background: transparent;
border: none;
padding: 18px 24px;
font-size: 16px;
font-weight: 700;
text-align: left;
width: 100%;
position: relative;
transition: all var(--duration-slow) ease;
}
.accordion .accordion-button:focus {
box-shadow: none;
outline: none;
}
.accordion .accordion-button:not(.collapsed) {
background: transparent;
box-shadow: none;
}
.accordion .accordion-button::after {
content: "";
width: 12px;
height: 12px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(45deg);
transition: transform var(--duration-slow) ease;
flex-shrink: 0;
background-image: none;
margin-left: auto;
}
.accordion .accordion-button:not(.collapsed)::after {
transform: rotate(-135deg);
}
.accordion .accordion-button:hover {
color: var(--erkon-primary);
}
.accordion .accordion-button:hover::after {
border-color: var(--erkon-primary);
}
.accordion .accordion-collapse {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.accordion .accordion-body {
padding: 24px;
}
.accordion .accordion-body .accordion-body {
display: none;
}
.accordion-content {
font-size: 18px;
line-height: 32px;
}
.accordion-content p {
margin-bottom: 15px;
}
.accordion-content p:last-child {
margin-bottom: 0;
}
.accordion-content ul, .accordion-content ol,
.woocommerce-Tabs-panel ul, .woocommerce-Tabs-panel ol,
.product-short-description ul, .product-short-description ol {
list-style: none;
padding: 0;
margin: 0 0 15px;
}
.accordion-content ul li, .accordion-content ol li,
.woocommerce-Tabs-panel ul li, .woocommerce-Tabs-panel ol li,
.product-short-description ul li, .product-short-description ol li {
position: relative;
padding: 14px 0 14px 32px;
border-bottom: 1px solid var(--border-default);
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
transition: all var(--duration-normal) ease;
}
.accordion-content ul li:last-child, .accordion-content ol li:last-child,
.woocommerce-Tabs-panel ul li:last-child, .woocommerce-Tabs-panel ol li:last-child,
.product-short-description ul li:last-child, .product-short-description ol li:last-child {
border-bottom: none;
}
.accordion-content ul li::before, .accordion-content ol li::before,
.woocommerce-Tabs-panel ul li::before, .woocommerce-Tabs-panel ol li::before,
.product-short-description ul li::before, .product-short-description ol li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--erkon-secondary);
border-radius: 50%;
transition: all var(--duration-normal) ease;
}
.accordion-content ul li:hover, .accordion-content ol li:hover,
.woocommerce-Tabs-panel ul li:hover, .woocommerce-Tabs-panel ol li:hover,
.product-short-description ul li:hover, .product-short-description ol li:hover {
color: var(--text-primary);
padding-left: 36px;
}
.accordion-content ul li:hover::before, .accordion-content ol li:hover::before,
.woocommerce-Tabs-panel ul li:hover::before, .woocommerce-Tabs-panel ol li:hover::before,
.product-short-description ul li:hover::before, .product-short-description ol li:hover::before {
transform: translateY(-50%) scale(1.2);
}
@media (max-width: 768px) {
.accordion-content ul li, .accordion-content ol li,
.woocommerce-Tabs-panel ul li, .woocommerce-Tabs-panel ol li,
.product-short-description ul li, .product-short-description ol li {
padding-left: 20px;
}
.accordion-content ul li:hover, .accordion-content ol li:hover,
.woocommerce-Tabs-panel ul li:hover, .woocommerce-Tabs-panel ol li:hover,
.product-short-description ul li:hover, .product-short-description ol li:hover {
padding-left: 24px;
}
}
.accordion-content strong {
font-weight: 700;
}
.accordion-content a {
color: var(--erkon-primary);
text-decoration: underline;
}
.accordion-content a:hover {
color: var(--erkon-primary);
}
.accordion-cta {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.accordion-cta-link {
display: inline-block;
padding: 8px 12px;
padding-right: 20px;
position: relative;
background: var(--erkon-primary);
color: var(--erkon-white);
text-decoration: none;
border-radius: var(--radius-base);
font-weight: 400;
font-size: 16px;
line-height: 1;
transition: all var(--duration-slow) ease;
}
.accordion-cta-link:after {
width: 30px;
height: 30px;
position: absolute;
content: "";
background: url("../src/icons/mushroom.svg") no-repeat;
left: 100%;
top: 50%;
transform: translateX(-14px) translateY(-50%);
}
.product-sidebar-wrapper .accordion .accordion-button.collapsed::after {
transform: rotate(-45deg);
}
.product-sidebar-wrapper .accordion .accordion-button:not(.collapsed) {
background: rgba(237, 234, 230, 0.2509803922);
}
.product-sidebar-wrapper .accordion .accordion-button:not(.collapsed)::after {
transform: rotate(45deg);
}
.product-sidebar-wrapper .accordion .accordion-collapse {
border-top: 0;
}
.product-sidebar-wrapper .accordion .show .accordion-body, .product-sidebar-wrapper .accordion .collapsing .accordion-body {
background: rgba(237, 234, 230, 0.2509803922);
}
.product-sidebar-wrapper .accordion .accordion-body h2, .product-sidebar-wrapper .accordion .accordion-body .h2 {
display: none;
}
.product-sidebar-wrapper .accordion .accordion-button, .product-sidebar-wrapper .accordion .accordion-body {
padding: 12px;
}
.product-sidebar-wrapper .accordion .accordion-button {
text-transform: uppercase;
font-weight: 400;
font-size: 18px;
}
.product-sidebar-wrapper .accordion .accordion-item {
margin: 0;
border-bottom: 1px solid #3D3D3D;
border-radius: 0;
}
.product-sidebar-wrapper .accordion .accordion-item:first-child .accordion-header {
border-top: 1px solid #3D3D3D;
}
/* Product description/tabs section wrapper */
.product-tabs-section {
padding: 1.5rem;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.product-tabs-section {
padding: 2.5rem;
margin-top: 2.5rem;
}
}
/* Remove top margin on first heading inside tab panels */
.woocommerce-Tabs-panel > h2:first-child,
.woocommerce-Tabs-panel > h3:first-child,
.accordion-body > h2:first-child,
.accordion-body > h3:first-child {
margin-top: 0;
}
/* Tighter heading spacing inside tab panels */
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 {
margin-top: 1.25rem;
margin-bottom: 0.75rem;
}
/*
******************************************************************************************************
Category Grid Block Styles
Context-specific overrides for .category-grid block wrapper
Base styles are in CUSTOM COMPONENTS section
******************************************************************************************************
*/
.category-grid {
padding: 60px 0;
}
.category-grid .category-grid-heading {
font-size: 2rem;
font-weight: 700;
margin-bottom: 30px;
color: #000;
}
/* Block-specific grid: fixed 2 columns (base uses auto-fill) */
.category-grid .category-grid-items {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
/* Block-specific item styles */
.category-grid .category-grid-item {
position: relative;
border-radius: var(--radius-base);
background: #f5f5f5;
}
.category-grid .category-grid-item:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.category-grid .category-grid-item-link {
display: block;
text-decoration: none;
color: inherit;
}
.category-grid .category-grid-item-image {
aspect-ratio: 16/9;
background: #e0e0e0;
}
.category-grid .category-grid-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) ease;
}
.category-grid .category-grid-item:hover .category-grid-item-image img {
transform: scale(1.05);
}
.category-grid .category-grid-item-title {
padding: 20px;
font-size: 1.125rem;
margin: 0;
color: #000;
}
.category-grid-footer {
text-align: left;
margin-top: 20px;
}
.category-grid-see-more {
display: inline-block;
font-size: 1rem;
font-weight: 600;
color: var(--erkon-primary);
text-decoration: none;
transition: color var(--duration-slow) ease;
}
.category-grid-see-more:hover {
color: var(--erkon-primary);
text-decoration: underline;
}
.jobs-board {
padding: clamp(3rem, 6vw, 5rem) 0;
background: var(--erkon-white);
}
.jobs-board .job-item {
width: 100%;
text-align: left;
background: transparent;
padding: 20px;
font-weight: 700;
border-radius: var(--radius-lg);
margin-bottom: 0.5rem;
font-family: inherit;
cursor: pointer;
transition: color var(--duration-normal) ease;
display: block;
border: 1px solid #B8AC9B;
color: #3D3D3D;
}
.jobs-board .job-item.is-active {
color: #ED5924;
background: rgba(76, 49, 27, 0.1019607843);
}
.jobs-board .job-item .job-title {
font-size: 16px;
display: block;
}
.jobs-board.is-loading .jobs-content {
opacity: 0.6;
pointer-events: none;
}
.icon-list-widget {
list-style: none;
padding: 0;
margin: 0;
}
.icon-list-widget .icon-list-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.icon-list-widget .icon-list-item:last-child {
margin-bottom: 0;
}
.icon-list-widget .icon-list-item .icon-svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.icon-list-widget .icon-list-item a {
display: flex;
align-items: center;
gap: 12px;
color: inherit;
text-decoration: none;
transition: color var(--duration-normal) ease;
}
.icon-list-widget .icon-list-item a:hover {
opacity: 0.8;
}
.social-icons-widget {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.social-icons-widget .social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: all var(--duration-slow) ease;
}
.social-icons-widget .social-icon img {
filter: brightness(0) invert(1);
}
.image-grid-widget {
display: flex;
gap: 32px;
align-items: flex-start;
}
.image-grid-widget .image-grid-item {
text-align: center;
}
.image-grid-widget .image-grid-item img {
max-width: 135px;
height: auto;
}
.image-grid-widget .image-grid-item a {
display: block;
}
/**
* Single Product Page - Modern Design Styles
*/
.product-gallery-thumbs .col-3 > div {
transition: all var(--duration-normal) ease;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
.product-gallery-thumbs .col-3 > div:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.product-gallery-thumbs .col-3 > div.border-primary {
border-color: rgba(var(--erkon-primary-rgb), 0.35) !important;
box-shadow: 0 0 0 1px rgba(var(--erkon-primary-rgb), 0.15);
}
.product-gallery-thumbs .product-thumb-image {
cursor: pointer;
transition: opacity var(--duration-normal) ease;
max-height: 100%;
object-fit: contain;
}
.product-gallery-thumbs .product-thumb-image:hover {
opacity: 0.8;
}
@media (max-width: 639px) {
.product-gallery-thumbs .col-3 {
width: 50%;
flex: 0 0 50%;
}
}
.product-main-image {
transition: all var(--duration-slow) ease;
}
/* Sticky product gallery on desktop */
@media (min-width: 1024px) {
.product-gallery-sticky {
position: sticky;
top: 100px;
align-self: flex-start;
}
}
/* Spacing between gallery elements (image, thumbnails, PDF) */
.product-gallery-sticky > * + * {
margin-top: 1.5rem;
}
/* Product page guarantee info box */
.product-guarantee {
background-color: rgba(var(--erkon-secondary-rgb), 0.08);
border-left: 4px solid var(--erkon-secondary);
border-radius: var(--radius-xl);
padding: var(--space-4);
color: var(--text-primary);
}
.product-guarantee__icon {
color: var(--erkon-secondary);
}
.product-regulation-notice {
background-color: rgba(var(--erkon-primary-rgb), 0.06);
border-left: 4px solid var(--erkon-primary);
border-radius: var(--radius-xl);
padding: var(--space-4);
color: var(--text-primary);
}
.product-regulation-notice__icon {
color: var(--erkon-primary);
}
.product-regulation-notice a {
color: var(--erkon-secondary);
text-decoration: underline;
font-weight: 600;
}
.product-regulation-notice a:hover {
color: var(--erkon-primary);
}
.product-add-to-cart-wrapper .product-variations-wrapper .form-select:focus, .product-add-to-cart-wrapper .product-variations-wrapper select:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--erkon-primary-rgb), 0.15);
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper {
flex-wrap: wrap;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .variation-price-container {
flex: 1;
min-width: 200px;
}
.default-price-display {
display: none;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .variation-price-container .woocommerce-variation .woocommerce-variation-price {
margin-bottom: 0;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .variation-price-container .woocommerce-variation .woocommerce-variation-price .price {
font-size: calc(1.375rem + 1.5vw);
font-weight: 800;
color: var(--primary);
line-height: 1.2;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .variation-price-container .woocommerce-variation .woocommerce-variation-price .price .amount {
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .variation-price-container .woocommerce-variation .woocommerce-variation-description {
margin-top: 0.5rem;
font-size: 0.875rem;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .woocommerce-variation-add-to-cart {
flex-shrink: 0;
}
.single_add_to_cart_button:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}
/* Simple Product - Add to Cart Layout */
.simple-add-to-cart {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--gap-md);
flex-wrap: wrap;
}
.simple-add-to-cart__price {
flex: 1;
min-width: 180px;
}
.simple-add-to-cart__actions {
display: flex;
align-items: center;
gap: var(--gap-sm);
flex-shrink: 0;
}
.transition-all {
transition: all var(--duration-slow) ease;
}
.cursor-pointer {
cursor: pointer;
}
.hover-shadow:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.hover-shadow-lg:hover {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
/**
* Columns
*/
.wc-block-price-filter {
margin-bottom: 0;
}
.text-secondary a {
color: #6c757d;
}
.wc-block-components-price-slider__label {
display: none;
}
/* .container-fluid - see LAYOUT section */
#filter-form {
margin-bottom: 14px;
}
.rating-wrapper {
margin: 15px 0 20px 0;
}
.erkon-no-rating {
display: flex;
gap: 8px;
align-items: center;
}
.erkon-no-rating * {
float: none;
white-space: nowrap;
}
.erkon-no-rating .star-rating {
width: auto;
overflow: visible;
float: none;
display: flex;
line-height: 17px;
flex-direction: row;
}
.erkon-no-rating .star-rating:before {
color: #D6A756;
float: none;
font-size: 24px;
top: -3px;
letter-spacing: 4px;
position: relative;
}
.erkon-no-rating .custom-tooltip {
position: relative;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--erkon-white);
background-color: var(--erkon-primary);
margin-left: 5px;
border-radius: var(--radius-full);
}
.erkon-no-rating .custom-tooltip .tooltiptext {
visibility: hidden;
width: 320px;
background-color: #000;
color: var(--erkon-white);
font-size: 12px !important;
line-height: 18px !important;
font-weight: 400 !important;
text-align: center;
border-radius: var(--radius-md);
padding: 5px 0;
position: absolute;
z-index: 50;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 1s;
white-space: normal;
}
.erkon-no-rating .custom-tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.erkon-no-rating .erkon-izenaci-ceno {
font-weight: 700;
display: flex;
color: var(--erkon-primary);
cursor: pointer;
}
.erkon-no-rating .erkon-izenaci-ceno:before {
content: "/";
color: var(--erkon-primary);
display: block;
margin-right: 10px;
font-weight: 700;
cursor: auto;
}
.erkon-no-rating span, .erkon-no-rating .erkon-izenaci-ceno {
font-size: 18px;
}
/* AJAX Load More Button Styles */
.woocommerce-load-more-wrapper {
margin-top: 48px;
}
/* Product fade-in animation for load more */
.custom-products-archive-wrapper .product {
animation: fadeInProduct 0.6s ease-in-out;
}
@keyframes fadeInProduct {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Loading spinner styles */
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.125rem;
}
/* Smooth transitions */
.custom-products-archive-wrapper {
transition: all var(--duration-slow) ease;
}
.home figure {
margin: 0;
}
.single-product-brands-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 34px;
}
.single-product-brands-categories .single-product-brands, .single-product-brands-categories .single-product-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.single-product-brands-categories .brand-cat-name {
font-size: 14px;
padding: 8px 12px;
line-height: 1;
border-radius: 0;
color: var(--erkon-white);
text-decoration: none;
}
.single-product-brands-categories .brand-name {
background: #3D3D3D;
}
.single-product-brands-categories .category-name {
background: var(--erkon-primary);
}
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--erkon-primary) !important;
color: var(--erkon-white) !important;
}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
padding: 6px 11px !important;
}
.woocommerce nav.woocommerce-pagination ul {
border: 0 !important;
}
.btn, .wc-block-components-checkout-place-order-button, #wp-submit {
border-radius: var(--radius-md) !important;
font-weight: 700 !important;
font-size: 16px !important;
max-width: 100%;
text-decoration: none !important;
letter-spacing: 0.7px;
position: relative;
line-height: 1;
transition: var(--duration-slow) ease-in-out;
}
.btn.wide, .wide.wc-block-components-checkout-place-order-button, .wide#wp-submit {
min-width: 300px !important;
}
.btn.btn-primary, .btn-primary.wc-block-components-checkout-place-order-button, .btn-primary#wp-submit, #wp-submit.frm_button_submit.frm_final_submit {
color: var(--erkon-white) !important;
background: var(--erkon-primary) !important;
border-color: var(--erkon-primary) !important;
}
.btn.btn-primary:active, .btn-primary.wc-block-components-checkout-place-order-button:active, .btn-primary#wp-submit:active, #wp-submit.frm_button_submit.frm_final_submit:active, .btn.btn-primary:focus, .btn-primary.wc-block-components-checkout-place-order-button:focus, .btn-primary#wp-submit:focus, #wp-submit.frm_button_submit.frm_final_submit:focus, .btn.btn-primary:hover, .btn-primary.wc-block-components-checkout-place-order-button:hover, .btn-primary#wp-submit:hover, #wp-submit.frm_button_submit.frm_final_submit:hover {
color: var(--erkon-white) !important;
outline: 0 !important;
background: #1a2d5a !important;
border-color: #1a2d5a !important;
text-decoration: none !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
.btn.btn-primary.white, .btn-primary.white.wc-block-components-checkout-place-order-button, .btn-primary.white#wp-submit {
border-color: var(--erkon-white);
color: #2B2B2B !important;
background-color: var(--erkon-white) !important;
}
.btn.btn-primary.white:active, .btn-primary.white.wc-block-components-checkout-place-order-button:active, .btn-primary.white#wp-submit:active, .btn.btn-primary.white:focus, .btn-primary.white.wc-block-components-checkout-place-order-button:focus, .btn-primary.white#wp-submit:focus, .btn.btn-primary.white:hover, .btn-primary.white.wc-block-components-checkout-place-order-button:hover, .btn-primary.white#wp-submit:hover {
color: #2B2B2B !important;
background: #f2f2f2;
}
.btn.btn-outline-primary, .btn-outline-primary.wc-block-components-checkout-place-order-button, .btn-outline-primary.frm_button_submit.frm_final_submit, .btn-outline-primary#wp-submit {
border-color: #D9D9D9 !important;
}
.btn.btn-outline-primary:hover, .btn-outline-primary.wc-block-components-checkout-place-order-button:hover, .btn-outline-primary.frm_button_submit.frm_final_submit:hover, .btn-outline-primary#wp-submit:hover {
color: var(--erkon-white) !important;
background-color: var(--erkon-primary) !important;
border-color: var(--erkon-primary) !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
.btn.btn-secondary, .wc-block-components-checkout-place-order-button, .btn-secondary.frm_button_submit.frm_final_submit, #wp-submit {
color: #2B2B2B;
background: transparent;
border-color: #2B2B2B;
}
.btn.btn-secondary:active, .wc-block-components-checkout-place-order-button:active, .btn-secondary.frm_button_submit.frm_final_submit:active, #wp-submit:active, .btn.btn-secondary:focus, .wc-block-components-checkout-place-order-button:focus, .btn-secondary.frm_button_submit.frm_final_submit:focus, #wp-submit:focus, .btn.btn-secondary:hover, .wc-block-components-checkout-place-order-button:hover, .btn-secondary.frm_button_submit.frm_final_submit:hover, #wp-submit:hover {
outline: 0;
color: var(--erkon-white) !important;
background: #2B2B2B !important;
border-color: #2B2B2B !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(43, 43, 43, 0.3) !important;
}
.btn.btn-secondary.white, .btn-secondary.white.frm_button_submit.frm_final_submit {
border-color: var(--erkon-white) !important;
color: var(--erkon-white);
background-color: transparent !important;
}
.btn.btn-secondary.white:active, .btn-secondary.white.frm_button_submit.frm_final_submit:active, .btn.btn-secondary.white:focus, .btn-secondary.white.frm_button_submit.frm_final_submit:focus, .btn.btn-secondary.white:hover, .btn-secondary.white.frm_button_submit.frm_final_submit:hover {
color: #2B2B2B !important;
background: var(--erkon-white) !important;
border-color: var(--erkon-white) !important;
}
.btn.btn-gray, .btn-gray.wc-block-components-checkout-place-order-button, .btn-gray.frm_button_submit.frm_final_submit, .btn-gray#wp-submit {
background-color: #f2f2f2 !important;
color: #3D3D3D !important;
border: 0;
}
.btn.btn-gray:hover, .btn-gray.wc-block-components-checkout-place-order-button:hover, .btn-gray.frm_button_submit.frm_final_submit:hover, .btn-gray#wp-submit:hover, .btn.btn-gray:active, .btn-gray.wc-block-components-checkout-place-order-button:active, .btn-gray.frm_button_submit.frm_final_submit:active, .btn-gray#wp-submit:active, .btn.btn-gray:focus, .btn-gray.wc-block-components-checkout-place-order-button:focus, .btn-gray.frm_button_submit.frm_final_submit:focus, .btn-gray#wp-submit:focus {
background-color: #d9d9d9 !important;
color: #3D3D3D !important;
outline: 0 !important;
}
.btn.bg-neon, .bg-neon.wc-block-components-checkout-place-order-button, .bg-neon.frm_button_submit.frm_final_submit, .bg-neon#wp-submit {
background-color: #DFFE00 !important;
color: #000 !important;
}
.btn.bg-neon:hover, .bg-neon.wc-block-components-checkout-place-order-button:hover, .bg-neon.frm_button_submit.frm_final_submit:hover, .bg-neon#wp-submit:hover, .btn.bg-neon:active, .bg-neon.wc-block-components-checkout-place-order-button:active, .bg-neon.frm_button_submit.frm_final_submit:active, .bg-neon#wp-submit:active, .btn.bg-neon:focus, .bg-neon.wc-block-components-checkout-place-order-button:focus, .bg-neon.frm_button_submit.frm_final_submit:focus, .bg-neon#wp-submit:focus {
background-color: #DFFE00 !important;
color: #000 !important;
}
.btn-min, .btn-expand-collapse.text-button {
text-transform: none;
font-weight: 600 !important;
font-size: 1rem !important;
color: var(--erkon-primary) !important;
text-decoration: underline !important;
background-color: transparent !important;
padding: 0 !important;
line-height: 1 !important;
display: block;
border: 0 !important;
}
.btn-min:hover, .btn-expand-collapse.text-button:hover {
color: var(--erkon-primary) !important;
text-decoration: none !important;
}
.btn-min.white {
color: var(--erkon-white) !important;
}
.btn-min.white:hover {
color: var(--erkon-white) !important;
}
#wp-submit {
font-size: 18px;
}
.btn-user {
cursor: pointer;
}
.btn-expand-collapse {
width: 20px;
height: 20px;
border: 0;
font-family: FontAwesome;
color: var(--erkon-primary);
display: flex;
-moz-align-items: center;
align-items: center;
-moz-justify-content: center;
justify-content: center;
cursor: pointer;
background: transparent;
}
.btn-expand-collapse:before {
content: "\f067";
}
.btn-expand-collapse[aria-expanded=true]:before {
content: "\f068";
}
.btn-expand-collapse:focus, .btn-expand-collapse:active {
outline: 0;
}
.btn-expand-collapse.text-button {
width: auto;
height: auto;
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
text-transform: none;
color: var(--erkon-primary) !important;
}
.btn-expand-collapse.text-button:hover {
color: var(--erkon-primary);
}
.btn-expand-collapse.text-button:hover span {
color: var(--erkon-primary);
}
.btn-expand-collapse.text-button .when-hidden {
display: block;
}
.btn-expand-collapse.text-button .when-visible {
display: none;
}
.btn-expand-collapse.text-button:before {
content: none;
}
.btn-expand-collapse.text-button[aria-expanded=true] .when-hidden {
display: none;
}
.btn-expand-collapse.text-button[aria-expanded=true] .when-visible {
display: block;
}
.btn-expand-collapse.text-button[aria-expanded=true]:before {
content: none;
}
.wc-block-components-checkout-place-order-button {
font-weight: 700 !important;
font-size: 20px !important;
}
.erkon-btn {
display: inline-block;
padding: 13px 24px;
padding-right: 36px;
position: relative;
background: var(--erkon-primary);
color: var(--erkon-white);
text-decoration: none;
border-radius: var(--radius-base);
font-weight: 400;
font-size: 22px;
line-height: 1;
transition: all var(--duration-slow) ease;
}
.erkon-btn:after {
width: 42px;
height: 48px;
position: absolute;
content: "";
background: url("../src/icons/mushroom.svg") no-repeat;
background-size: contain;
left: 100%;
top: 50%;
transform: translateX(-20px) translateY(-50%);
}
.hero-btn {
background: var(--erkon-white) !important;
}
/* Old top-bar styles removed - see section 23 for current styles */
.top-bar .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.top-bar .swiper-slide i {
display: block;
}
.top-bar .swiper-slide i img {
width: 24px;
}
.top-bar a:hover {
text-decoration: underline;
}
.top-bar a.top-bar-phone:hover,
.top-bar a.top-bar-email:hover,
.top-bar-social a:hover {
text-decoration: none;
}
.top-bar .swiper-wrapper {
transition-timing-function: linear !important;
}
.top-bar p {
margin: 0;
}
.top-bar p:after {
content: " / ";
padding: 0 7px;
}
.top-bar p:last-of-type:after {
content: "";
padding: 0;
}
.top-bar a {
text-decoration: none;
}
.top-bar .erkon-top-bar {
display: flex;
}
.erkon-top-bar-mobile-menu {
display: none;
padding: 40px 12px;
font-size: 1.1rem;
line-height: 1;
}
.dropdown-toggle.btn-min, .dropdown-toggle.btn-expand-collapse.text-button {
color: #000 !important;
}
.breadcrumb-wrapper {
background: #EDEAE6;
display: flex;
justify-content: center;
font-size: 14px;
line-height: 1;
}
.breadcrumb-wrapper p {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.breadcrumb-wrapper a {
text-decoration: none;
}
#ajax-search-results {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #f7f7f7;
z-index: 2;
display: flex;
flex-direction: column;
}
#ajax-search-results:empty {
display: none;
}
#ajax-search-results * {
color: #000;
text-decoration: none;
}
#ajax-search-results a {
padding: 5px 8px;
border-bottom: 1px solid #eee;
}
.top-right-navbar-inner {
display: none;
}
.header-action-item > a {
min-width: 40px;
min-height: 40px;
background-color: var(--erkon-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
transform: translateY(0);
transition: all var(--ease-in) 0.25s;
}
.mega-menu-container {
position: fixed;
top: 0;
left: 0;
width: auto;
height: 100%;
background: var(--erkon-white);
display: none;
z-index: 9999;
overflow-y: auto;
}
.mega-menu-container.active {
display: block;
}
.mega-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.mega-menu-header .mega-menu-logo a {
display: block;
}
.mega-menu-header .mega-menu-logo a img {
max-height: 80px;
width: auto;
}
.mega-menu-header .mega-menu-close {
background: none;
border: none;
cursor: pointer;
color: var(--erkon-primary);
padding: 8px;
transition: color var(--duration-slow) ease;
flex-shrink: 0;
}
.mega-menu-header .mega-menu-close:hover {
color: var(--erkon-primary);
}
.mega-menu-header .mega-menu-close svg {
width: 24px;
height: 24px;
}
.mega-menu-content {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.mega-menu-content .mega-menu-left {
width: 390px;
padding: 24px 36px;
border: 1px solid #EDEAE6;
display: flex;
flex-direction: column;
}
.mega-menu-content .mega-menu-right {
width: 390px;
padding: 48px;
transform: translateX(-100%);
display: none;
}
.mega-menu-content .mega-menu-right.has-content {
transform: translateX(0);
display: block;
}
.mega-menu-content .mega-menu-right .mega-submenu-parent {
margin-bottom: 50px;
}
.mega-menu-content .mega-menu-right .mega-submenu-parent .parent-link {
display: inline-block;
font-size: 20px;
font-weight: 700;
color: #3D3D3D;
text-decoration: none;
transition: color var(--duration-normal) ease;
}
.mega-menu-content .mega-menu-right .mega-submenu-parent .parent-link:hover {
color: var(--erkon-primary);
}
.mega-menu-content .mega-menu-right.has-content .sub-menu {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.mega-menu-content .mega-menu-right.has-content .sub-menu li a {
color: #3D3D3D;
font-size: 16px;
text-decoration: none;
}
.mega-menu-content .mega-menu-right.has-content .sub-menu li a:hover {
color: var(--erkon-primary);
}
.mega-menu-nav {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.mega-menu-nav > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
color: #3D3D3D;
text-decoration: none;
font-size: 16px;
line-height: 1;
position: relative;
font-weight: 700;
border-radius: var(--radius-base);
transition: all var(--duration-normal) ease;
}
.mega-menu-nav > li > a:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
}
.mega-menu-nav > li.menu-item-has-children > a::after {
content: "";
width: 7px;
height: 12px;
transition: transform var(--duration-slow) ease;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: url("../src/icons/menu-caret-right-orange.svg") no-repeat center center;
}
.mega-menu-nav > li.menu-item-has-children:hover > a::after {
background: url("../src/icons/menu-caret-right.svg") no-repeat center center;
}
.mega-menu-nav > li.menu-item-has-children.active > a {
background: var(--erkon-primary);
color: var(--erkon-white);
}
.mega-menu-nav > li.menu-item-has-children.active > a:after {
background: url("../src/icons/menu-caret-right.svg") no-repeat center center;
}
.mega-menu-nav > li.menu-item-has-children.submenu-open > a::after {
transform: rotate(90deg);
}
.mega-menu-nav > li .sub-menu {
list-style: none;
padding: 8px 0 0 20px;
margin: 0;
display: none;
}
.mega-menu-nav > li .sub-menu li {
margin-bottom: 8px;
}
.mega-menu-nav > li .sub-menu li a {
display: block;
padding: 8px 12px;
color: #3D3D3D;
text-decoration: none;
font-size: 14px;
transition: color var(--duration-normal) ease;
}
.mega-menu-nav > li .sub-menu li a:hover {
color: var(--erkon-primary);
}
.mega-menu-info {
margin-top: auto;
}
.mega-menu-contact .contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f5f5f5;
border-radius: var(--radius-base);
text-decoration: none;
color: #3D3D3D;
margin-bottom: 10px;
transition: all var(--duration-normal) ease;
}
.mega-menu-contact .contact-item:hover {
background: var(--erkon-primary);
color: var(--erkon-white);
}
.mega-menu-contact .contact-item:hover svg path {
fill: var(--erkon-white);
}
.mega-menu-contact .contact-item svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.mega-menu-contact .contact-item span {
font-size: 16px;
}
.mega-menu-trigger {
display: flex;
align-items: center;
gap: 13px;
}
.mega-menu-trigger:before {
content: "";
width: 30px;
height: 24px;
background: url("../src/icons/menu-icon.svg") no-repeat center center;
background-size: contain;
}
.mobile-menu-wrapper {
transition: all var(--duration-slow) cubic-bezier(0.94, 0.02, 0, 1.01);
background-color: #F7F5F0;
position: fixed;
top: 60px;
width: 100%;
left: 100%;
height: calc(100vh - 60px);
padding: 16px;
display: flex;
-moz-align-items: flex-start;
align-items: flex-start;
transform: translateX(0);
overflow: scroll;
flex-direction: column;
}
.mobile-menu-wrapper.active {
transform: translateX(-100%);
}
.footer-outer-wrapper {
position: relative;
background-color: #0f172a;
background-attachment: scroll;
}
.footer-outer-wrapper .sub-menu {
padding: 0;
margin-top: 10px;
font-weight: 400 !important;
}
#wrapper-footer-full {
color: var(--erkon-white);
background: #0f172a;
font-size: 16px;
line-height: 28px;
position: relative;
padding: 60px 0;
}
#wrapper-footer-full a {
color: var(--erkon-white);
transition: var(--duration-slow) ease-in-out;
}
#wrapper-footer-full a:hover {
color: var(--erkon-white);
}
#wrapper-footer-full .wp-block-image {
margin-top: 0;
}
#wrapper-footer-full .wp-block-gallery {
gap: 12px;
}
#wrapper-footer-full .wp-block-gallery figure {
width: 50px !important;
flex-grow: 0;
flex-shrink: 0;
}
#wrapper-footer-full > * {
z-index: 2;
position: relative;
}
#wrapper-footer-full th, #wrapper-footer-full td {
background: transparent;
padding: 4px 0 !important;
}
#wrapper-footer-full th {
font-weight: 400;
}
#wrapper-footer-full td {
font-weight: 700;
}
#wrapper-footer-full a {
text-decoration: none;
}
#wrapper-footer-full .widget-title {
margin: 0 0 12px 0;
font-size: 20px;
font-weight: 700;
font-style: normal;
color: var(--erkon-white);
}
#wrapper-footer-full .menu {
padding: 0;
margin: 0;
}
#wrapper-footer-full .menu li {
margin-bottom: 14px;
list-style-type: none;
line-height: 1;
}
#wrapper-footer-full .menu li:last-child {
margin: 0;
}
#wrapper-footer-full .menu a {
font-size: 16px;
font-style: normal;
text-decoration: none;
line-height: 1;
}
#wrapper-bottom-footer {
font-size: 14px;
color: var(--erkon-white);
}
#wrapper-bottom-footer .wrapper-bottom-footer-inner {
padding: 32px 0;
display: flex;
justify-content: center;
gap: 60px;
}
#wrapper-bottom-footer .wrapper-bottom-footer-inner a {
text-decoration: none;
color: var(--erkon-white);
}
.top-footer-wrapper {
padding-bottom: 32px;
margin-bottom: 32px;
border-bottom: 1px solid var(--erkon-white);
}
ul.footer-nav {
display: flex;
-moz-align-items: center;
align-items: center;
flex-wrap: wrap;
-moz-justify-content: flex-end;
justify-content: flex-end;
margin-bottom: 0;
padding-left: 0;
list-style-type: none;
gap: 24px;
}
ul.footer-nav li {
list-style-type: none;
}
ul.footer-nav li a {
text-transform: none;
}
ul.footer-nav li a:hover {
text-decoration: none;
}
.wp-block-woocommerce-checkout-order-summary-block {
background: var(--erkon-white);
}
.author {
text-align: center;
}
* {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.has-inline-color {
padding: 0;
}
.badges-wrapper {
display: flex;
align-items: center;
gap: 6px;
}
/* .custom-badge replaced by .subtitle .subtitle--sale/--sale-detail/--new */
.badges-wrapper .product-sale-wrapper {
display: flex;
border: 1px solid #E19A75;
border-radius: var(--radius-base);
}
.badges-wrapper .product-sale-wrapper .subtitle {
border-radius: 0;
}
#main .products {
grid-column-gap: 24px !important;
grid-row-gap: 32px !important;
}
/* Card container - white with subtle shadow */
#main .products .product {
background: var(--erkon-white);
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
box-shadow: 0 2px 8px rgba(var(--erkon-primary-rgb), 0.04);
transition: transform var(--duration-slow) ease,
box-shadow var(--duration-slow) ease,
border-color var(--duration-slow) ease;
}
#main .products .product:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(var(--erkon-primary-rgb), 0.12);
border-color: rgba(var(--erkon-primary-rgb), 0.15);
}
#main .products .product .badges-wrapper {
position: absolute;
top: var(--space-3);
left: var(--space-3);
flex-direction: column;
align-items: flex-start;
z-index: 2;
}
#main .products .product a {
text-decoration: none;
}
#main .products .product .card-body {
padding: var(--space-6);
}
/* Product image - gradient background with scale on hover */
#main .products .product .product-header {
background: linear-gradient(135deg, var(--gray-50) 0%, var(--erkon-white) 100%);
aspect-ratio: 4 / 3;
transition: background var(--duration-slow) ease;
border: none;
border-bottom: 1px solid var(--border-muted);
border-radius: var(--radius-card) var(--radius-card) 0 0;
width: 100%;
padding: var(--space-6);
overflow: hidden;
}
#main .products .product:hover .product-header {
background: linear-gradient(135deg, var(--erkon-white) 0%, var(--gray-50) 100%);
}
#main .products .product .product-header img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
transition: transform var(--duration-slow) ease;
}
#main .products .product:hover .product-header img {
transform: scale(1.03);
}
/* Title - larger, hover color transition */
#main .products .product .woocommerce-loop-product__title {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
color: var(--text-primary);
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: var(--space-3);
transition: color var(--duration-normal) ease;
}
#main .products .product:hover .woocommerce-loop-product__title {
color: var(--erkon-primary);
}
#main .products .product .card-body .subtitle {
margin-bottom: var(--space-3);
}
/* Brand - uppercase refined label */
#main .products .product .loop-brand {
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-weight: var(--font-medium);
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-4);
line-height: var(--leading-none);
transition: color var(--duration-normal) ease;
}
#main .products .product .loop-brand:after {
display: none;
}
#main .products .product:hover .loop-brand {
color: var(--erkon-secondary);
}
/* Excerpt */
#main .products .product .product-excerpt {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: var(--space-5);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
/* Link container */
#main .products .product .woocommerce-LoopProduct-link {
margin-bottom: 0;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#main .products .product .woocommerce-LoopProduct-link .price {
margin-top: auto;
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-5);
align-self: stretch;
}
/* Add to cart button - filled with improved hover */
#main .products .product .add-to-cart-container {
position: relative;
padding: 0 var(--space-6) var(--space-6);
}
#main .products .product .add-to-cart-container .btn-primary {
font-size: var(--text-sm) !important;
font-weight: var(--font-bold) !important;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5) !important;
width: 100%;
background-color: var(--erkon-primary) !important;
border-color: var(--erkon-primary) !important;
border-radius: var(--radius-lg) !important;
transition: all var(--duration-normal) ease !important;
}
#main .products .product .add-to-cart-container .btn-primary:hover {
background-color: #1a2d5a !important;
border-color: #1a2d5a !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
/* Price - prominent focal point */
#main .products .product .price {
color: var(--erkon-primary);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-none);
margin-top: var(--space-2);
margin-bottom: var(--space-2);
}
#main .products .product .price del {
font-weight: var(--font-normal);
font-size: var(--text-base);
display: block;
line-height: var(--leading-none);
color: var(--text-tertiary);
order: 2;
}
#main .products .product .price ins {
color: var(--erkon-primary);
display: block;
line-height: var(--leading-none);
font-weight: var(--font-bold);
}
body.prevent-scroll {
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
body .overlay {
transition: all var(--duration-slow);
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
}
body.overlay-active .overlay {
opacity: 1;
visibility: visible;
}
@supports (grid-area: auto) {
.post-grid > div, .post-grid > article {
float: left;
margin: 0 0 30px 30px;
width: calc(100% / 2 - (30px));
}
.post-grid > div:nth-of-type(2n+1), .post-grid > article:nth-of-type(2n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.post-grid {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
.post-grid > div, .post-grid > article {
margin: 0 !important;
width: 100% !important;
}
}
}
.post-grid article a {
color: #3D3D3D;
text-decoration: none !important;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.post-grid article a .inner-body {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
}
.post-grid article a:hover {
text-decoration: none;
}
.post-grid article a .gallery-icon {
width: 100%;
height: 232px;
position: relative;
}
.blog .post-grid article a .gallery-icon {
height: 314px;
}
.post-grid article a .gallery-icon img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.post-grid article a .entry-title {
font-size: 20px;
font-weight: 900;
font-style: normal;
line-height: 1.33;
text-align: left;
text-decoration: none;
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
color: #6c757d;
}
.post-grid article .read-more {
color: var(--erkon-primary);
letter-spacing: 0;
font-size: 16px;
font-weight: 900;
display: table;
line-height: 1;
margin-top: 20px;
text-decoration: none;
}
.post-grid article .entry-meta {
margin-bottom: 10px;
display: flex;
}
.post-grid article .entry-meta .entry-date {
font-size: 18px;
font-weight: 600;
display: block;
line-height: 1;
}
.post-grid article .entry-footer i {
color: var(--erkon-primary);
}
.post-grid article .entry-footer .btn-min, .post-grid article .entry-footer .btn-expand-collapse.text-button, .post-grid article .entry-footer .post-meta-footer span {
text-transform: none !important;
font-weight: 600;
font-style: normal;
padding-right: 0 !important;
text-decoration: none !important;
font-size: 16px !important;
color: var(--erkon-primary) !important;
}
.post-grid article .entry-content {
color: #a1a1a1;
line-height: 1.76;
}
.post-grid article .entry-content p {
margin: 0;
}
.grid .card .card-img-top {
height: 200px;
}
.grid .card .card-img-top img {
height: 100%;
width: 100%;
object-fit: cover;
margin: 0;
}
.card:not(.no-shadow) {
border-radius: 0;
border: 0;
}
.card .card-body {
padding: 24px 32px;
}
.card.widget {
margin-bottom: 40px;
}
.card.widget:last-child {
margin: 0;
}
.card .excerpt p:last-of-type {
margin: 0;
}
.search-results-grid {
grid-gap: 0 !important;
}
.search-results-grid article {
border-top: 2px solid #f1f2f2;
}
.search-results-grid article a {
padding-top: 25px;
padding-bottom: 25px;
display: flex;
flex-direction: column;
color: #3D3D3D;
text-decoration: none;
}
.search-results-grid article h4, .search-results-grid article .h4 {
font-size: 20px;
font-weight: 600;
font-style: normal;
letter-spacing: 0.8px;
display: block;
}
.search-results-grid article:last-child {
border-bottom: 2px solid #f1f2f2;
}
.search-results-grid article:last-child a {
padding-bottom: 25px;
}
#content .brand-logos {
display: flex;
align-items: center;
gap: 60px;
margin: 0;
}
#content .brand-logos .wp-block-image {
width: 200px !important;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
}
.product-category-nav {
row-gap: 50px !important;
}
.product-category-nav .product-category-nav-item {
display: flex;
align-items: center;
text-decoration: none;
font-weight: 600;
background: #F5F5F5;
border: 1px solid #D9D9D9;
transition: var(--duration-slow) ease-in-out;
position: relative;
padding: 12px 12px 12px 90px;
border-radius: var(--radius-base);
}
.product-category-nav .product-category-nav-item.no-thumb {
padding-left: 12px;
}
.product-category-nav .product-category-nav-item.active, .product-category-nav .product-category-nav-item:hover {
background: #D9D9D9;
}
.product-category-nav .product-category-nav-item .product-category-name {
display: block;
line-height: 1;
}
.product-category-nav .product-category-nav-item .img-wrapper {
width: 80px;
height: 80px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* ==========================================================================
SHOP CATEGORY NAVIGATION
========================================================================== */
.shop-category-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
flex: 1;
}
.shop-category-nav-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-xl);
text-decoration: none;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
background: var(--gray-100);
border: 1px solid transparent;
transition: all var(--duration-normal) ease;
white-space: nowrap;
}
.shop-category-nav-item:hover {
background: rgba(var(--erkon-primary-rgb), 0.08);
color: var(--erkon-primary);
border-color: rgba(var(--erkon-primary-rgb), 0.15);
}
.shop-category-nav-item.active {
background: var(--erkon-primary);
color: var(--erkon-white);
border-color: var(--erkon-primary);
}
.shop-category-nav-item.active .count {
opacity: 0.75;
}
.shop-category-nav-item .count {
font-size: var(--text-xs);
opacity: 0.6;
}
.wc-above-loop-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: 15px;
}
.wc-above-loop-wrapper .wc-orderby-wrapper {
width: 300px;
}
.product-subtitle {
font-size: 20px;
font-weight: 500;
margin: 20px 0 30px 0;
color: var(--erkon-primary);
}
.single-product .single-product-price-wrapper .iworks-omnibus {
font-size: 16px;
}
.single-product .single-product-price-wrapper p:empty {
display: none;
}
.single-product .badges-wrapper:not(:empty) {
margin-bottom: 20px;
}
.single-product .product_meta {
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #D9D9D9;
}
.single-product .product_meta > span {
font-weight: 600;
}
.single-product .product_meta > span span, .single-product .product_meta > span a {
font-weight: 400;
text-decoration: none;
}
.single-product .product_meta .posted_in {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
white-space: nowrap;
}
.single-product .product_meta .posted_in a {
border: 1px solid #000000;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-base);
line-height: 1;
font-weight: 600;
}
.single-product h1.entry-title, .single-product .entry-title.h1 {
margin-bottom: 10px;
font-size: 48px;
font-weight: 700;
line-height: 1;
}
.single-product .woocommerce-product-gallery__wrapper img {
border: 1px solid #D9D9D9;
border-radius: var(--radius-base);
}
.single-product .woocommerce-product-gallery .flex-control-nav li {
border: 1px solid #D9D9D9;
border-radius: var(--radius-base);
}
.single-product .entry-summary .product-buttons-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.single-product .entry-summary .product-buttons-wrapper .single_variation {
width: 100%;
}
.single-product .entry-summary .product-buttons-wrapper .woocommerce-variation-add-to-cart {
flex: 1;
}
.single-product .entry-summary .price .woocommerce-Price-amount.amount {
font-weight: 700;
color: var(--erkon-primary);
font-size: 32px;
}
.single-product .entry-summary .price del .woocommerce-Price-amount.amount {
font-weight: 400;
color: #000;
font-size: 20px;
}
.single-product-content-wrapper .accordion-header .accordion-button {
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
border-top: 1px solid #000;
}
.single-product-content-wrapper .accordion-header .accordion-button:after {
transform: rotate(-90deg);
}
.single-product-content-wrapper .accordion-header .accordion-button:not(.collapsed) {
background-color: transparent;
box-shadow: none;
}
.single-product-content-wrapper .accordion-header .accordion-button:not(.collapsed):after {
transform: rotate(0);
}
.single-product-content-wrapper .accordion-item:last-child .accordion-header .accordion-button {
border-bottom: 1px solid #000;
}
.woocommerce .woocommerce-ordering {
display: flex;
white-space: nowrap;
gap: 8px;
align-items: center;
}
.wc-above-loop-wrapper .wc-nav-wrapper {
margin-top: 0;
}
body .icon-list-block {
grid-gap: 8px;
}
body .icon-list-block a {
display: flex;
align-items: center;
}
body .icon-list-block a img {
width: 20px;
}
body .icon-list-block.social-icons {
grid-gap: 22px;
display: flex;
}
body .icon-list-block.social-icons a img {
width: 36px;
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
width: 40%;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
width: 58%;
overflow: visible !important;
flex: 1;
padding-left: 20px;
max-width: unset !important;
}
.product-main-content-wrapper {
padding-top: 50px;
margin-top: 50px;
background: #F6F6F6;
}
/* ==========================================================================
WOOCOMMERCE QUANTITY SELECTOR - PREMIUM STYLING (Product Page)
========================================================================== */
.quantity .input-group {
display: inline-flex;
align-items: stretch;
flex-wrap: nowrap;
width: auto;
background: transparent;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid #e2e5e9;
}
.quantity .input-group .input-group-text {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
padding: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
background-color: #f8f9fa;
border: none;
cursor: pointer;
transition: all var(--duration-normal) ease;
user-select: none;
}
.quantity .input-group .input-group-text:hover {
background-color: var(--erkon-secondary);
color: var(--erkon-white);
}
.quantity .input-group .input-group-text:active {
transform: scale(0.95);
}
.quantity .input-group .minus {
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.quantity .input-group .plus {
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.quantity .input-group .qty {
width: 56px;
min-width: 56px;
height: 48px;
padding: 0 8px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
text-align: center;
color: var(--text-primary);
background-color: var(--erkon-white);
border: none;
border-left: 1px solid #e2e5e9;
border-right: 1px solid #e2e5e9;
appearance: textfield;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
.quantity .input-group .qty::-webkit-outer-spin-button,
.quantity .input-group .qty::-webkit-inner-spin-button {
display: none;
margin: 0;
}
.quantity .input-group .qty:focus {
outline: none;
background-color: #f0f9ff;
}
/* Disabled state (variation not selected) */
.woocommerce-variation-add-to-cart-disabled .quantity .input-group .input-group-text {
pointer-events: none;
opacity: 0.5;
}
.woocommerce-variation-add-to-cart-disabled .quantity .input-group .qty {
background-color: #f3f4f6;
pointer-events: none;
}
/**
Woocommerce doesn't allow for this to be filtered out or removed via an action and both the price and description
are bundled together into a single JS file. Bad practice, but required.
*/
.woocommerce-variation-description {
display: none !important;
}
.layout-grid-1 > div, .layout-grid-1 > article {
float: left;
margin: 0 0 20px 20px;
width: calc(100% / 1 - (20px));
}
.layout-grid-1 > div:nth-of-type(1n+1), .layout-grid-1 > article:nth-of-type(1n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.layout-grid-1 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(1, 1fr);
}
.layout-grid-1 > div, .layout-grid-1 > article {
margin: 0 !important;
width: 100% !important;
}
}
.layout-grid-2 > div, .layout-grid-2 > article {
float: left;
margin: 0 0 20px 20px;
width: calc(100% / 2 - (20px));
}
.layout-grid-2 > div:nth-of-type(2n+1), .layout-grid-2 > article:nth-of-type(2n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.layout-grid-2 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
.layout-grid-2 > div, .layout-grid-2 > article {
margin: 0 !important;
width: 100% !important;
}
}
.layout-grid-3 > div, .layout-grid-3 > article {
float: left;
margin: 0 0 20px 20px;
width: calc(100% / 3 - (20px));
}
.layout-grid-3 > div:nth-of-type(3n+1), .layout-grid-3 > article:nth-of-type(3n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.layout-grid-3 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.layout-grid-3 > div, .layout-grid-3 > article {
margin: 0 !important;
width: 100% !important;
}
}
.layout-grid-4 > div, .layout-grid-4 > article {
float: left;
margin: 0 0 20px 20px;
width: calc(100% / 4 - (20px));
}
.layout-grid-4 > div:nth-of-type(4n+1), .layout-grid-4 > article:nth-of-type(4n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.layout-grid-4 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
.layout-grid-4 > div, .layout-grid-4 > article {
margin: 0 !important;
width: 100% !important;
}
}
.layout-grid-5 > div, .layout-grid-5 > article {
float: left;
margin: 0 0 20px 20px;
width: calc(100% / 5 - (20px));
}
.layout-grid-5 > div:nth-of-type(5n+1), .layout-grid-5 > article:nth-of-type(5n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.layout-grid-5 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr);
}
.layout-grid-5 > div, .layout-grid-5 > article {
margin: 0 !important;
width: 100% !important;
}
}
.layout-grid-6 > div, .layout-grid-6 > article {
float: left;
margin: 0 0 20px 20px;
width: calc(100% / 6 - (20px));
}
.layout-grid-6 > div:nth-of-type(6n+1), .layout-grid-6 > article:nth-of-type(6n+1) {
clear: both;
margin-left: 0;
}
@supports (grid-area: auto) {
.layout-grid-6 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, 1fr);
}
.layout-grid-6 > div, .layout-grid-6 > article {
margin: 0 !important;
width: 100% !important;
}
}
.woocommerce-products-header .wpc-custom-selected-terms {
display: none;
}
.loop-brand {
color: #3D3D3D;
margin-bottom: 16px;
font-size: 14px;
line-height: 1;
position: relative;
transition: var(--duration-slow) ease-in-out;
display: inline-flex;
}
.loop-brand:hover {
color: var(--erkon-primary);
}
.loop-brand:after {
content: "";
width: 100%;
bottom: -2px;
height: 1px;
background: var(--erkon-primary);
position: absolute;
left: 0;
}
.bg-grey {
background: rgba(237, 234, 230, 0.5019607843);
}
.products.layout-grid-5 {
gap: 48px 24px;
}
/*--------------------------------------------------------------
Product Meta
---------------------------------------------------------------- */
.erkon-product-meta {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 16px;
margin-bottom: 12px;
}
.erkon-instock,
.erkon-outstock {
display: flex;
align-items: center;
gap: 15px;
}
.erkon-instock::before {
content: "";
width: 21px;
height: 21px;
background: url("../src/icons/instock.svg") no-repeat center center;
}
.erkon-outstock::after {
content: "";
width: 16px;
height: 16px;
background-color: #990000;
border-radius: 50%;
display: block;
}
.wc-tabs.nav-tabs {
border-color: var(--erkon-primary);
}
.wc-tabs.nav-tabs .nav-link {
border: 0;
background: transparent;
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--erkon-primary);
position: relative;
font-size: 16px;
font-weight: 900;
}
.wc-tabs.nav-tabs .nav-link.active:after {
content: "";
width: 100%;
bottom: 0;
height: 2px;
background: var(--erkon-primary);
position: absolute;
left: 0;
}
#main .products.list-view .product {
display: flex;
flex-direction: row;
}
#main .products.list-view .product .add-to-cart-container {
position: relative !important;
top: 0 !important;
transform: none !important;
left: 0 !important;
display: flex !important;
}
#main .products.list-view .product .alg-wc-wl-thumb-btn-loop {
display: flex !important;
bottom: 10px !important;
transform: none !important;
right: 10px !important;
top: unset !important;
}
#main .products.list-view .card-body {
width: 65%;
flex-grow: 0;
flex-shrink: 0;
}
#main .products.list-view .card-body .woocommerce-loop-product__link:first-of-type {
width: 100%;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
#main .products.list-view .woocommerce-loop-product__link:first-of-type {
width: 35%;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
#main .products.list-view .product-header {
display: flex;
width: 420px;
}
#main .products.list-view .product-header img {
height: 280px;
object-fit: contain;
object-position: center center;
width: 100%;
}
.latest-posts-header {
margin-bottom: 24px;
}
.hero-heading {
font-size: 52px;
}
.icon-feature-item h3, .icon-feature-item .h3 {
margin: 0;
font-size: 36px;
}
.icon-feature-item .icon-feature-icon {
width: 100px;
flex-grow: 0;
flex-shrink: 0;
}
.icon-feature-item .icon-feature-icon img {
margin: 0;
border-radius: 0;
}
.widget_wpc_filters_widget, .shop-categories-widget {
background: var(--erkon-white);
padding: 12px;
border-radius: var(--radius-base);
}
.single-product .faq-section-wrapper, .single-product .reviews-section-wrapper {
background: #EDEAE6;
}
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
margin-bottom: 26px;
}
.woocommerce div.product form.cart div.quantity {
float: none;
margin-right: 10px;
}
.woocommerce div.product form.cart .button {
flex-grow: 1;
}
.woocommerce div.product form.cart .button:hover {
color: var(--erkon-white);
}
.wc-above-loop-wrapper .wc-nav-wrapper {
display: none;
}
.filter-collapse-control {
display: flex;
justify-content: space-between;
align-items: center;
background: #EDEAE6;
padding: 12px;
cursor: pointer;
border-radius: var(--radius-base);
}
.filter-collapse-control h4, .filter-collapse-control .h4 {
margin: 0;
}
.filter-collapse-control i svg {
transition: transform var(--duration-slow) ease;
}
.filter-collapse-control i svg.rotated {
transform: rotate(90deg);
}
/* CTA Section Responsive */
body.single-product {
background: var(--erkon-white);
}
/*
******************************************************************************************************
Job Listings & Single Job Styles
******************************************************************************************************
*/
.job-listings-grid .job-listing-card {
background: var(--erkon-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
display: flex;
flex-direction: column;
height: 100%;
}
.job-listings-grid .job-listing-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.job-listings-grid .job-listing-card .job-thumbnail img {
width: 100%;
height: 200px;
object-fit: cover;
}
.job-listings-grid .job-listing-card .job-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.job-listings-grid .job-listing-card .job-content .job-title {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.job-listings-grid .job-listing-card .job-content .job-title a {
color: inherit;
text-decoration: none;
}
.job-listings-grid .job-listing-card .job-content .job-title a:hover {
color: var(--primary);
}
.job-listings-grid .job-listing-card .job-content .btn, .job-listings-grid .job-listing-card .job-content #wp-submit, .job-listings-grid .job-listing-card .job-content .wc-block-components-checkout-place-order-button {
align-self: flex-start;
margin-top: auto;
}
.single-job .entry-header {
margin-bottom: 2rem;
}
.single-job .entry-header .entry-title {
font-size: 2.5rem;
font-weight: 700;
}
.single-job .entry-thumbnail {
border-radius: var(--radius-lg);
overflow: hidden;
}
.single-job .entry-content {
font-size: 1.1rem;
line-height: 1.7; /* prose content */
}
#job-sidebar .job-cta-card {
background: linear-gradient(135deg, var(--erkon-primary) 0%, var(--erkon-secondary) 100%);
color: var(--erkon-white);
border-radius: var(--radius-2xl);
padding: 2rem;
box-shadow: 0 8px 30px rgba(var(--erkon-secondary-rgb), 0.25);
position: sticky;
top: 140px;
}
#job-sidebar .job-cta-card a {
color: var(--erkon-white);
font-weight: 600;
}
#job-sidebar .job-cta-card .job-cta-content h3, #job-sidebar .job-cta-card .job-cta-content .h3 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--erkon-white);
}
#job-sidebar .job-cta-card .job-cta-content .job-cta-text {
font-size: 1.1rem;
margin-bottom: 1rem;
}
#job-sidebar .job-cta-card .job-cta-content .job-cta-email {
font-size: 1.25rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
text-align: center;
}
#job-sidebar .job-cta-card .job-cta-content .job-cta-email strong {
word-break: break-all;
}
#job-sidebar .job-cta-card .job-cta-content .job-cta-additional {
font-size: 1rem;
margin-bottom: 0;
opacity: 0.9;
}
/* Brand Colors utility classes */
.text-erkon-blue {
color: var(--erkon-blue) !important;
}
.text-erkon-accent {
color: var(--erkon-accent) !important;
}
.bg-erkon-dark {
background-color: var(--erkon-dark) !important;
}
.bg-erkon-blue {
background-color: var(--erkon-blue) !important;
}
.bg-erkon-gray {
background-color: var(--erkon-gray) !important;
}
/* Buttons - see COMPONENTS section for .btn-erkon-primary */
/* Header Tweaks - old top-bar style removed, see section 23 */
.navbar-nav .nav-link {
font-weight: 500;
color: #334155;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
color: var(--erkon-blue);
}
.navbar-nav .nav-link.active {
font-weight: 700;
border-bottom: 2px solid var(--erkon-blue);
}
/* Hero Section - see CUSTOM COMPONENTS section for main .hero-section styles */
.hero-section .lead {
max-width: 600px;
}
.hero-section.hero-home-block {
padding-bottom: 130px;
min-height: auto;
align-items: flex-start; /* Content starts from top after padding */
}
.hero-shape-1 {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
transform: skewX(12deg);
transform-origin: top right;
}
.hero-shape-2 {
position: absolute;
bottom: 0;
left: 0;
width: 33%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
transform: skewX(-12deg);
transform-origin: bottom left;
}
/* Process Section Steps */
/* Job Table */
/* ===========================================
CONTACT MAP SECTION - B2B Premium Style
=========================================== */
/* Feature icon wrappers - premium gradient */
.feature-icon-wrapper {
width: 52px;
height: 52px;
border-radius: var(--radius-2xl);
background: linear-gradient(135deg, var(--erkon-secondary) 0%, var(--erkon-primary) 100%);
box-shadow: 0 8px 24px rgba(var(--erkon-secondary-rgb), 0.25);
transition: all var(--duration-slow) ease;
}
.col-sm-6:hover .feature-icon-wrapper {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(var(--erkon-secondary-rgb), 0.35);
}
/* Mobile: Horizontal layout for feature boxes */
@media (max-width: 639px) {
.section-padding .grid-row.g-3 > .col-sm-6 {
display: flex;
align-items: flex-start;
gap: 16px;
}
.section-padding .grid-row.g-3 .feature-text {
flex: 1;
min-width: 0;
}
.section-padding .grid-row.g-3 .feature-icon-wrapper {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: var(--radius-xl);
margin-bottom: 0;
}
.section-padding .grid-row.g-3 .col-sm-6 h6 {
margin-bottom: 4px;
font-size: 0.95rem;
}
.section-padding .grid-row.g-3 .col-sm-6 p {
margin-bottom: 0;
}
.section-padding .col-lg-5 h3.display-5 {
font-size: 1.75rem;
margin-bottom: 24px !important;
}
.section-padding .col-lg-5 .grid-row.g-3 {
margin-bottom: 24px !important;
}
}
/* Contact Map Section background */
.section-padding.bg-white {
background: linear-gradient(180deg, var(--erkon-white) 0%, #f8fafc 100%);
}
/* h6.text-erkon-blue "ZAKAJ MI?" replaced by .subtitle .subtitle--secondary */
/* Feature text hover */
.section-padding h6.fw-bold {
font-size: 1rem;
color: var(--erkon-primary);
transition: color var(--duration-slow) ease;
}
.col-sm-6:hover h6.fw-bold {
color: var(--erkon-secondary);
}
/* Map card premium styling */
.card.border-0.shadow-sm {
border-radius: var(--radius-3xl) !important;
box-shadow: 0 20px 60px rgba(var(--erkon-primary-rgb), 0.12),
0 8px 24px rgba(0, 0, 0, 0.06) !important;
overflow: hidden;
}
.card-header.bg-light {
background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-bottom: 1px solid rgba(var(--erkon-secondary-rgb), 0.08) !important;
padding: 16px 20px !important;
}
.card-footer.bg-light {
background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-top: 1px solid rgba(var(--erkon-secondary-rgb), 0.08) !important;
}
/* Contact info box premium */
.section-padding .bg-light.p-4.rounded-4 {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
border: 1px solid rgba(var(--erkon-secondary-rgb), 0.08) !important;
box-shadow: 0 4px 16px rgba(var(--erkon-primary-rgb), 0.04);
}
/* Contact links hover effect */
.section-padding a.text-erkon-blue {
position: relative;
transition: all var(--duration-slow) ease;
}
.section-padding a.text-erkon-blue:hover {
color: var(--erkon-primary) !important;
transform: translateX(4px);
}
/* Consultation CTA Block */
/* 8.6 Consultation CTA - Glass Card Effect */
.consultation-cta-section {
padding: var(--section-py-compact) var(--container-px);
}
.consultation-cta-section .bg-white {
padding: var(--card-padding);
border-radius: var(--radius-3xl);
position: relative;
overflow: hidden;
}
/* Decorative gradient corner */
.consultation-cta-section .bg-white::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(
circle at top right,
rgba(var(--erkon-secondary-rgb), 0.08) 0%,
transparent 70%
);
pointer-events: none;
}
/* Shield icon pulse */
.consultation-cta-section .consultation-main-icon {
width: 100px;
height: 100px;
animation: iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Feature items hover */
.consultation-cta-section .flex.items-center {
transition: transform var(--duration-normal) ease;
}
.consultation-cta-section .flex.items-center:hover {
transform: translateX(4px);
}
/* Tablet - center content and make features horizontal */
@media (max-width: 1023px) {
.consultation-cta-section .grid-row {
text-align: center;
}
.consultation-cta-section .col-lg-6 {
text-align: center;
}
.consultation-cta-section .col-lg-4 {
display: flex;
justify-content: center;
}
.consultation-cta-section .col-lg-4 .flex.flex-col {
flex-direction: column;
gap: 12px;
border-left: 1px solid var(--border-color);
padding-left: 1.5rem;
margin-top: 24px;
}
}
@media (max-width: 768px) {
.consultation-cta-section {
padding: var(--space-12) var(--space-4);
}
.consultation-cta-section .bg-white {
padding: var(--space-6);
}
}
@media (max-width: 639px) {
.consultation-cta-section .col-lg-4 .flex.flex-col {
flex-direction: column;
gap: 12px;
}
}
/* ==========================================================================
PRODUCTS SHOWCASE SECTION
Premium product display matching consultation-cta design
========================================================================== */
.products-showcase-section {
padding: var(--section-py-compact) var(--container-px);
}
.products-showcase-card {
padding: var(--card-padding);
border-radius: var(--radius-3xl);
}
/* Decorative gradient corner */
.products-showcase-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(
circle at top right,
rgba(30, 58, 138, 0.08) 0%,
transparent 70%
);
pointer-events: none;
}
/* Main icon with pulse animation */
.products-main-icon {
width: 100px;
height: 100px;
animation: iconPulse 3s ease-in-out infinite;
}
/* Products grid spacing */
.products-showcase-grid {
gap: 24px;
}
/* Trust badges hover */
.products-showcase-section .flex.items-center {
transition: transform var(--duration-normal) ease;
}
.products-showcase-section .flex.items-center:hover {
transform: translateX(4px);
}
/* Text color for hlajenje */
.text-hlajenje {
color: var(--erkon-hlajenje) !important;
}
/* Responsive */
@media (max-width: 1023px) {
.products-showcase-section .grid-row {
text-align: center;
}
.products-showcase-section .col-lg-6 {
text-align: center;
}
.products-showcase-section .col-lg-4 {
display: flex;
justify-content: center;
}
.products-showcase-section .col-lg-4 .flex.flex-col {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
border-left: none;
padding-left: 0;
margin-top: 24px;
}
}
@media (max-width: 768px) {
.products-showcase-section {
padding: var(--space-12) var(--space-4);
}
.products-showcase-card {
padding: var(--space-6);
}
.products-main-icon {
width: 80px;
height: 80px;
}
}
@media (max-width: 639px) {
.products-showcase-section .col-lg-4 .flex.flex-col {
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
.products-showcase-section .col-lg-4 .flex.items-center {
justify-content: center;
width: 100%;
}
}
/* ==========================================================================
SWIPER PRODUCT SLIDER - HLAJENJE
========================================================================== */
.products-swiper {
position: relative;
}
.products-swiper .swiper-slide {
height: auto;
display: flex;
}
/* Simplified product card */
.product-card-simple {
display: flex;
flex-direction: column;
width: 100%;
background: var(--erkon-white);
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.product-card-simple:hover {
box-shadow: 0 8px 24px rgba(var(--erkon-primary-rgb), 0.1);
border-color: rgba(var(--erkon-primary-rgb), 0.15);
}
.product-card-simple__image {
background: linear-gradient(135deg, var(--gray-50) 0%, var(--erkon-white) 100%);
aspect-ratio: 4 / 3;
padding: var(--space-4);
overflow: hidden;
border-bottom: 1px solid var(--border-muted);
}
.product-card-simple__image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--duration-slow) ease;
}
.product-card-simple:hover .product-card-simple__image img {
transform: scale(1.03);
}
.product-card-simple__info {
padding: var(--space-4) var(--space-5);
}
.product-card-simple__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
color: var(--text-primary);
margin: 0 0 var(--space-2) 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card-simple__price {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--erkon-hlajenje);
}
/* Slider wrapper - positions nav elements outside swiper overflow */
.products-slider-wrapper {
position: relative;
}
/* Navigation arrows */
.products-slider-prev,
.products-slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--erkon-white);
border: 1px solid var(--gray-300);
border-radius: var(--radius-full);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
}
.products-slider-prev::after,
.products-slider-next::after {
font-family: swiper-icons;
font-size: 16px;
font-weight: 700;
color: var(--erkon-hlajenje);
}
.products-slider-prev::after {
content: 'prev';
}
.products-slider-next::after {
content: 'next';
}
.products-slider-prev:hover,
.products-slider-next:hover {
background-color: var(--erkon-hlajenje);
border-color: var(--erkon-hlajenje);
box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
}
.products-slider-prev:hover::after,
.products-slider-next:hover::after {
color: #fff;
}
.products-slider-prev {
left: -22px;
}
.products-slider-next {
right: -22px;
}
/* Pagination dots - below cards */
.products-slider-pagination {
display: flex;
justify-content: center;
gap: 6px;
margin-top: var(--space-5);
}
.products-slider-pagination .swiper-pagination-bullet {
width: 6px;
height: 6px;
background-color: var(--gray-300);
border-radius: var(--radius-full);
opacity: 0.5;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
}
.products-slider-pagination .swiper-pagination-bullet-active {
background-color: var(--erkon-hlajenje);
opacity: 1;
transform: scale(1.4);
}
/* Responsive - tablet */
@media (max-width: 1023px) {
.products-slider-prev,
.products-slider-next {
width: 38px;
height: 38px;
}
.products-slider-prev::after,
.products-slider-next::after {
font-size: 14px;
}
.products-slider-prev {
left: -18px;
}
.products-slider-next {
right: -18px;
}
}
/* Responsive - mobile: hide arrows, swipe only */
@media (max-width: 639px) {
.products-slider-prev,
.products-slider-next {
display: none;
}
.products-slider-pagination {
margin-top: var(--space-4);
}
}
/* CTA Box */
/* Job Table */
.hero-text-limit {
max-width: 600px;
}
.badge-bg-circle {
width: 150%;
height: 150%;
}
.badge-card {
min-width: 180px;
}
.fs-07 {
font-size: 0.7rem;
}
.fs-065 {
font-size: 0.65rem;
}
.input-icon {
width: 18px;
height: 18px;
color: #6c757d;
opacity: 0.5;
}
.floating-image-wrapper {
height: 400px;
}
.floating-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feature-floater {
bottom: -30px;
left: -30px;
max-width: 280px;
}
.feature-floater svg {
width: 60px;
height: 60px;
}
.contact-form-wrapper .input-group, .service-contact-block .input-group {
flex-wrap: nowrap;
}
b,
strong {
font-weight: 700;
}
.bg-tertiary {
background: #EDEAE6;
}
/* Page wrappers - common styles */
body #page-wrapper,
body #single-wrapper,
body #archive-wrapper,
body #search-wrapper,
body #author-wrapper,
body #tag-wrapper,
body #single-job-wrapper {
position: relative;
width: 100%;
z-index: 2;
min-height: 70vh;
}
body #page-wrapper .entry-content a:hover, body #single-wrapper .entry-content a:hover, body #archive-wrapper .entry-content a:hover {
text-decoration: none;
}
body #page-wrapper .entry-content ul:not(.nav), body #page-wrapper .entry-content ol:not(.nav), body #page-wrapper .entry-content dl:not(.nav), body #single-wrapper .entry-content ul:not(.nav), body #single-wrapper .entry-content ol:not(.nav), body #single-wrapper .entry-content dl:not(.nav), body #archive-wrapper .entry-content ul:not(.nav), body #archive-wrapper .entry-content ol:not(.nav), body #archive-wrapper .entry-content dl:not(.nav) {
padding-left: 20px;
}
body #page-wrapper .entry-content ul:not(.simple-links-inner) li, body #page-wrapper .entry-content ol:not(.simple-links-inner) li, body #page-wrapper .entry-content dl:not(.simple-links-inner) li, body #single-wrapper .entry-content ul:not(.simple-links-inner) li, body #single-wrapper .entry-content ol:not(.simple-links-inner) li, body #single-wrapper .entry-content dl:not(.simple-links-inner) li, body #archive-wrapper .entry-content ul:not(.simple-links-inner) li, body #archive-wrapper .entry-content ol:not(.simple-links-inner) li, body #archive-wrapper .entry-content dl:not(.simple-links-inner) li {
margin-bottom: 10px;
position: relative;
}
body #page-wrapper .entry-content ul:not(.simple-links-inner) li:last-child, body #page-wrapper .entry-content ol:not(.simple-links-inner) li:last-child, body #page-wrapper .entry-content dl:not(.simple-links-inner) li:last-child, body #single-wrapper .entry-content ul:not(.simple-links-inner) li:last-child, body #single-wrapper .entry-content ol:not(.simple-links-inner) li:last-child, body #single-wrapper .entry-content dl:not(.simple-links-inner) li:last-child, body #archive-wrapper .entry-content ul:not(.simple-links-inner) li:last-child, body #archive-wrapper .entry-content ol:not(.simple-links-inner) li:last-child, body #archive-wrapper .entry-content dl:not(.simple-links-inner) li:last-child {
margin-bottom: 0;
}
body #single-wrapper a:hover {
text-decoration: none;
}
/* Override padding-top when wrapper follows breadcrumbs */
body .breadcrumb-wrapper + #archive-wrapper,
body .breadcrumb-wrapper + #search-wrapper,
body .breadcrumb-wrapper + #author-wrapper,
body .breadcrumb-wrapper + #tag-wrapper,
body .breadcrumb-wrapper + #single-job-wrapper {
padding-top: 0;
}
body iframe {
max-width: 100%;
}
a:focus-visible {
outline: 2px solid var(--erkon-accent, #c49a6c);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.gallery {
margin-bottom: 40px;
}
img .wp-post-image, div .wp-post-image, figure .wp-post-image {
display: block;
}
img .wp-post-image.attachment-thumb, div .wp-post-image.attachment-thumb, figure .wp-post-image.attachment-thumb {
float: left;
margin: 1em 1em 2em 0;
}
figure {
max-width: 100%;
height: auto;
margin: 1em 0;
}
.widget-title {
font-size: 20px;
font-weight: 700;
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1;
margin-bottom: 40px;
}
.icon-box-widget-inner {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
font-size: 18px;
letter-spacing: 0.02em; /* premium - subtilno */
}
.icon-box-widget-inner li {
color: #2C2E30;
display: flex;
flex-direction: row;
-moz-align-items: flex-start;
align-items: flex-start;
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.02em; /* premium - subtilno */
}
.icon-box-widget-inner li:last-child {
margin: 0;
}
.icon-box-widget-inner li .icon-wrapper {
display: flex;
-moz-align-items: center;
align-items: center;
-moz-justify-content: center;
justify-content: center;
margin-right: 25px;
width: 30px;
padding-top: 5px;
}
body .text-left .gform_heading, body .text-left .partial_entry_warning {
text-align: left !important;
}
.form-row {
margin-bottom: 15px;
}
/* ==========================================================================
Stack Menu - Mobile Navigation
========================================================================== */
.stack-menu {
background-color: transparent;
border-radius: var(--radius-md);
overflow: hidden;
}
.stack-menu--active {
display: block;
}
.stack-menu__list {
margin: 0;
padding: 0;
list-style-type: none;
display: none;
}
.stack-menu__list--active {
display: flex;
flex-direction: column;
gap: 4px;
}
.stack-menu__item--hidden {
display: none;
}
.stack-menu__link {
padding: 6px 0;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
position: relative;
color: #000;
font-size: 16px;
border-radius: var(--radius-base);
transition: color var(--transition), background-color var(--transition), padding var(--transition);
}
.stack-menu__link:hover {
color: var(--secondary);
background-color: rgba(60, 36, 21, 0.2);
padding: 6px 16px;
}
.stack-menu__link--hidden {
display: none;
}
.stack-menu__link--parent,
.stack-menu__link--back {
background-size: 6px 12px;
background-repeat: no-repeat;
}
.stack-menu__link--parent {
background-position: center right 0;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M.087 1.656L1.232.318l4.681 5.026-1.145 1.338z'/%3E%3Cpath d='M4.768 5.318l1.145 1.338-4.68 5.026-1.146-1.338z'/%3E%3C/g%3E%3C/svg%3E");
}
.stack-menu__link--parent:hover {
background-position: center right 16px;
}
.stack-menu__link--back {
background-position: center left 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.843063 6.28898L6.50006 0.631985L7.91406 2.04598L2.96406 6.99599L7.91406 11.946L6.50006 13.36L0.843063 7.70299C0.655592 7.51546 0.550276 7.26115 0.550276 6.99599C0.550276 6.73082 0.655592 6.47651 0.843063 6.28898Z' fill='%234c311b'/%3E%3C/svg%3E");
padding: 0 20px;
margin-bottom: 6px;
font-size: 22px;
color: var(--primary);
line-height: 36px;
}
.stack-menu__link--back:hover {
padding: 0 20px;
background-color: transparent;
color: var(--primary);
}
/* ============================================
CTA Banner Block (1:1 from primer-dobre-prakse)
============================================ */
/* 8.5 CTA Banner - Premium Gradient */
.cta-banner {
position: relative;
padding: var(--section-py-compact) var(--container-px);
background: linear-gradient(
135deg,
var(--erkon-primary) 0%,
#1a3a6e 25%,
var(--erkon-secondary) 75%,
#0099cc 100%
);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
overflow: hidden;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Decorative circles */
.cta-banner::before,
.cta-banner::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.cta-banner::before {
width: 300px;
height: 300px;
top: -150px;
left: -100px;
}
.cta-banner::after {
width: 200px;
height: 200px;
bottom: -100px;
right: -50px;
}
.cta-container {
max-width: 1170px;
margin: 0 auto;
display: flex;
align-items: center;
gap: var(--gap-md);
}
.cta-icon {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.cta-icon img {
width: 36px;
max-width: 36px;
height: auto;
display: block;
}
.cta-icon svg {
width: 50px;
height: 50px;
color: var(--bg-primary, var(--erkon-white));
}
.cta-text {
flex: 1 1 0;
min-width: 200px;
}
.cta-text p {
font-family: 'Work Sans', sans-serif;
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
font-weight: 500;
color: var(--bg-primary, var(--erkon-white));
margin: 0;
}
.cta-button {
flex: 0 0 auto;
text-align: right;
}
.cta-button .btn {
color: var(--primary);
background-color: var(--bg-primary, var(--erkon-white));
border: none;
}
.cta-button .btn:hover {
color: var(--bg-primary, var(--erkon-white));
background-color: var(--erkon-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.3);
}
/* CTA Banner Responsive - Tablet */
/* CTA Banner Responsive - Mobile */
/* ===========================================
TYPOGRAPHY OVERRIDES - SENIOR LEVEL
Poenotena tipografija za premium videz
=========================================== */
/* Base prose - vsi odstavki v vsebini */
section p,
article p,
.entry-content p,
[class*="description"] p,
.wp-block-paragraph {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: var(--text);
letter-spacing: -0.01em;
}
/* Service/Feature descriptions - NE modra! */
[class*="service"] p,
[class*="feature"] p {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: var(--text) !important;
}
/* Intro/Lead paragrafi */
.lead,
.intro,
[class*="intro"] {
font-size: 17px;
font-weight: 400;
line-height: 1.45;
color: var(--subtitle);
}
/* Hero descriptions - beli tekst */
.hero-section p,
.hero-description,
[class*="hero"] p {
font-size: 17px;
font-weight: 400;
line-height: 1.45;
color: rgba(255, 255, 255, 0.9);
}
/* Cards & boxes */
.card p,
[class*="card"] p,
[class*="box"] p {
font-size: 14px;
font-weight: 400;
line-height: 1.45;
color: var(--text);
}
/* Naslovi - tight tracking */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
letter-spacing: -0.02em;
line-height: 1.2;
}
h1, .h1 { font-size: 2.25rem; font-weight: 700; }
h2, .h2 { font-size: 1.75rem; font-weight: 600; }
h3, .h3 { font-size: 1.375rem; font-weight: 600; }
h4, .h4 { font-size: 1.125rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; }
/* Display headings - extra tight */
.display-4, .display-5, .display-6 {
letter-spacing: -0.03em;
line-height: 1.1;
}
/* Buttons - consistent weight */
.btn,
[class*="btn-"] {
font-weight: 500;
letter-spacing: 0;
}
/* Lists v vsebini */
section ul li,
section ol li,
article ul li,
article ol li {
font-size: 15px;
line-height: 1.5;
color: var(--text);
}
/* Blockquotes */
blockquote,
.blockquote {
font-size: 17px;
font-weight: 400;
line-height: 1.5;
color: var(--subtitle);
font-style: italic;
}
/* Small/caption text */
small,
.small,
.caption {
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--text-muted);
}
/* ==========================================================================
CONSOLIDATED MEDIA QUERIES
========================================================================== */
/* Small screens and up (640px+) */
@media (min-width: 640px) {
.col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
.col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Medium screens and up (768px+) */
@media (min-width: 768px) {
.col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.g-md-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; row-gap: var(--gutter-y); margin-left: calc(var(--gutter-x) * -0.5); margin-right: calc(var(--gutter-x) * -0.5); }
.g-md-4 > [class*="col-"] { padding-left: calc(var(--gutter-x) * 0.5); padding-right: calc(var(--gutter-x) * 0.5); }
.mt-md-0 { margin-top: 0 !important; }
.mt-md-5 { margin-top: 3rem !important; }
.mb-md-0 { margin-bottom: 0 !important; }
.ms-md-2 { margin-left: 0.5rem !important; }
.ms-md-auto { margin-left: auto !important; }
.p-md-5 { padding: 3rem !important; }
.py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.ps-md-4 { padding-left: 1.5rem !important; }
.flex-md { display: flex !important; }
.block-md { display: block !important; }
.hidden-md { display: none !important; }
.flex-row-md { flex-direction: row !important; }
.flex-col-md { flex-direction: column !important; }
.justify-start-md { justify-content: flex-start !important; }
.justify-end-md { justify-content: flex-end !important; }
.justify-center-md { justify-content: center !important; }
.justify-between-md { justify-content: space-between !important; }
.items-center-md { align-items: center !important; }
.text-md-start { text-align: left !important; }
.text-md-end { text-align: right !important; }
.text-md-center { text-align: center !important; }
.border-md-start { border-left: 1px solid var(--border-color) !important; }
.w-md-auto { width: auto !important; }
}
@media (min-width: 768px) {
.woocommerce-MyAccount-downloads-file {
width: 100%;
}
}
@media (min-width: 1024px) {
.col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
.g-lg-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; row-gap: var(--gutter-y); margin-left: calc(var(--gutter-x) * -0.5); margin-right: calc(var(--gutter-x) * -0.5); }
.g-lg-4 > [class*="col-"] { padding-left: calc(var(--gutter-x) * 0.5); padding-right: calc(var(--gutter-x) * 0.5); }
.g-lg-5 { --gutter-x: 3rem; --gutter-y: 3rem; row-gap: var(--gutter-y); margin-left: calc(var(--gutter-x) * -0.5); margin-right: calc(var(--gutter-x) * -0.5); }
.g-lg-5 > [class*="col-"] { padding-left: calc(var(--gutter-x) * 0.5); padding-right: calc(var(--gutter-x) * 0.5); }
.mt-lg-0 { margin-top: 0 !important; }
.mb-lg-0 { margin-bottom: 0 !important; }
.p-lg-5 { padding: 3rem !important; }
.ps-lg-4 { padding-left: 1.5rem !important; }
.flex-lg { display: flex !important; }
.block-lg { display: block !important; }
.hidden-lg { display: none !important; }
.flex-row-lg { flex-direction: row !important; }
.items-center-lg { align-items: center !important; }
.justify-start-lg { justify-content: flex-start !important; }
.justify-end-lg { justify-content: flex-end !important; }
.text-lg-start { text-align: left !important; }
.text-lg-end { text-align: right !important; }
.text-lg-center { text-align: center !important; }
}
@media (min-width: 1024px) {
#wrapper-bottom-footer .wrapper-bottom-footer-inner .copyright, #wrapper-bottom-footer .wrapper-bottom-footer-inner .menu-item {
line-height: 1;
}
.layout-grid-3.product-categories-grid {
display: flex !important;
justify-content: center;
}
.layout-grid-3.product-categories-grid .product-category-item {
width: 30% !important;
}
#main .products .product .product-header img {
padding: 20px;
}
.post-grid {
-moz-column-gap: 15px !important;
column-gap: 15px !important;
row-gap: 30px !important;
}
.single-product .single-product-price-wrapper {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 30px;
flex-direction: column;
}
.single-product .single-product-price-wrapper p {
margin: 0;
line-height: 1;
}
.single-product .single-product-price-wrapper p del {
margin-right: 20px;
}
.wc-nav-wrapper {
margin-top: 40px;
}
.filter-collapse-control {
display: none;
}
}
@media (min-width: 1024px) {
.comment-list ul.children ul.children ul.children {
padding-left: 0;
}
.card-img-lg-start {
border-top-left-radius: calc(var(--radius) - 1px);
border-bottom-left-radius: calc(var(--radius) - 1px);
object-fit: cover;
height: 100%;
}
#main .products {
grid-template-columns: repeat(3, 1fr) !important;
}
/* Single post desktop styles */
.single-title {
font-size: 42px;
}
.single-hero-image {
margin-bottom: 32px;
}
}
@media (min-width: 1280px) {
.col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
.col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xl-6 { flex: 0 0 50%; max-width: 50%; }
.col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xl-9 { flex: 0 0 75%; max-width: 75%; }
.col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 1280px) {
.table-responsive-xxl .table {
white-space: nowrap;
}
.table-responsive-xl .table {
white-space: nowrap;
}
.header-nav > ul > li > a {
padding: 10px 12px;
font-size: 15px;
}
}
@media (max-width: 1024px) {
.comment-list ul.children ul.children {
padding-left: 0;
}
.card-img-lg-start {
border-top-left-radius: calc(var(--radius) - 1px);
border-top-right-radius: calc(var(--radius) - 1px);
}
.table-responsive-lg .table {
white-space: nowrap;
}
#main .products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 1024px) {
.cta-container {
flex-wrap: wrap;
justify-content: center;
}
.cta-icon {
flex: 0 0 100%;
margin-bottom: 15px;
}
.cta-icon img {
width: 36px;
max-width: 36px;
}
.cta-text {
flex: 1 1 100%;
text-align: center;
margin-bottom: 15px;
}
.cta-button {
flex: 0 0 auto;
text-align: center;
}
}
@media (max-width: 639px) {
.cta-icon img {
width: 32px;
max-width: 32px;
}
}
@media (max-width: 1024px) {
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
z-index: 10 !important;
}
}
@media (max-width: 1024px) {
.table-responsive-md .table {
white-space: nowrap;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 118px;
}
li.woocommerce-order-overview__order.order,
li.woocommerce-order-overview__date.date,
li.woocommerce-order-overview__email.email {
margin-bottom: 1rem;
}
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background-color: var(--bg-secondary);
}
.faq-item .faq-header {
padding: 24px;
}
.single-header .bottom-meta {
flex-direction: column;
margin-top: 20px;
}
.single-header .single-keywords {
width: 100%;
}
.single-header .intro-content {
width: 100%;
}
.single-post-wrapper .entry-content blockquote {
width: 100%;
}
.attachments-list li,
.further-reading-list li {
margin-bottom: 12px;
}
.info-block {
margin: 0;
}
.info-block-content {
text-align: center;
}
.icon-stats-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.home .accordion-block .accordion-block-heading {
text-align: center;
}
.category-grid {
padding: 40px 0;
}
.category-grid-heading {
font-size: 1.5rem;
margin-bottom: 20px;
}
.category-grid-items {
grid-template-columns: 1fr;
gap: 15px;
}
.category-grid-item-title {
padding: 15px;
font-size: 1rem;
}
.image-grid-widget {
flex-wrap: wrap;
}
.image-grid-widget .image-grid-item img {
max-width: 80px;
}
.erkon-no-rating {
flex-wrap: wrap;
}
.breadcrumb-wrapper p {
flex-wrap: wrap;
line-height: 1.4;
}
.dropdown-toggle::after {
position: absolute;
right: 0;
}
.submenu-open .mega-menu-nav > li .sub-menu {
display: block;
}
#wrapper-footer-full {
padding: 0;
margin-top: 0;
}
#wrapper-footer-full td {
text-align: right;
}
#wrapper-bottom-footer .wrapper-bottom-footer-inner {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
ul.footer-nav {
display: block;
text-align: left;
gap: 6px;
}
.copyright {
text-align: center;
}
.author {
text-align: left;
order: 3;
}
.badges-wrapper {
flex-direction: row !important;
}
.badges-wrapper .subtitle--sale-detail {
display: none !important;
}
#main .products .product .woocommerce-loop-product__title {
font-size: var(--text-lg);
}
#main .products .product .product-excerpt {
font-size: 16px;
}
#main .products .product .woocommerce-LoopProduct-link .price {
gap: 4px;
}
#main .products .product .price {
font-size: var(--text-xl);
}
#main .products .product .card-body {
padding: var(--space-5);
}
#main .products .product .add-to-cart-container {
padding: 0 var(--space-5) var(--space-5);
}
#main .products .product .product-header {
padding: var(--space-4);
}
.post-grid > div, .post-grid > article {
width: calc(100% / 2 - (30px));
}
.post-grid {
grid-template-columns: repeat(2, 1fr);
}
.post-grid article a .entry-title {
font-size: 18px;
}
.product-category-nav {
row-gap: 8px !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.product-category-nav .product-category-nav-item {
padding: 12px 12px 12px 12px;
}
.product-category-nav .product-category-nav-item .img-wrapper {
display: none;
}
.shop-category-nav {
gap: var(--space-1);
}
.shop-category-nav-item {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
}
.wc-above-loop-wrapper {
flex-direction: column;
align-items: flex-start;
margin-top: 30px;
}
.wc-above-loop-wrapper .shop-category-nav {
margin-bottom: var(--space-2);
}
.wc-above-loop-wrapper .wc-nav-wrapper {
margin-top: 20px !important;
margin-left: auto;
}
.wc-above-loop-wrapper .wc-orderby-wrapper {
width: 100%;
}
.single-product h1.entry-title, .single-product .entry-title.h1 {
font-size: 36px;
}
.woocommerce .woocommerce-ordering {
gap: 70px;
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
width: 100%;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
width: 100%;
}
.product-main-content-wrapper {
padding-top: 40px;
margin-top: 40px;
}
.layout-grid-1 > div, .layout-grid-1 > article {
width: calc(100% / 2 - (20px));
}
.layout-grid-1 {
grid-template-columns: repeat(2, 1fr);
}
.layout-grid-2 > div, .layout-grid-2 > article {
width: calc(100% / 2 - (20px));
}
.layout-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.layout-grid-3 > div, .layout-grid-3 > article {
width: 100%;
}
.layout-grid-3 {
grid-template-columns: repeat(1, 1fr);
}
.layout-grid-4 > div, .layout-grid-4 > article {
width: calc(100% / 2 - (20px));
}
.layout-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.layout-grid-5 > div, .layout-grid-5 > article {
width: calc(100% / 2 - (20px));
}
.layout-grid-5 {
grid-template-columns: repeat(2, 1fr);
}
.layout-grid-6 > div, .layout-grid-6 > article {
width: calc(100% / 2 - (20px));
}
.layout-grid-6 {
grid-template-columns: repeat(2, 1fr);
}
.post-grid {
row-gap: 30px;
}
.woocommerce-checkout #page-wrapper {
padding: 30px 0 0 0;
}
.woocommerce-checkout #page-wrapper .wp-block-woocommerce-checkout {
padding-top: 0;
}
.icon-box-widget-inner li {
letter-spacing: normal;
flex-direction: column;
-moz-align-items: center;
align-items: center;
text-align: center;
}
.icon-box-widget-inner li .icon-wrapper {
margin-top: 0;
margin-right: 0;
margin-bottom: 15px;
}
}
@media (max-width: 1024px) {
.partners-track {
gap: 24px;
padding-right: 24px;
}
.partners-grid img {
height: 40px;
}
}
@media (max-width: 1280px) {
.top-bar {
padding: 8px 15px;
}
.top-bar-container {
width: 100%;
max-width: 100%;
}
.header {
top: auto;
padding: 12px 15px;
}
.header-container {
width: 100%;
max-width: 100%;
justify-content: space-between;
}
.header-logo {
flex: 0 0 auto;
}
.header-logo img {
width: 160px;
}
.header-nav {
display: none;
flex: none;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
margin-right: 10px;
flex-shrink: 0;
}
.menu-toggle {
display: block;
flex-shrink: 0;
z-index: 1051;
}
.site-main > .wrapper {
margin-top: 0 !important;
}
/* Mobile nav active state */
.header-nav.active {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 100px 30px 30px;
overflow-y: auto;
z-index: 1050;
}
.header-nav.active ul {
flex-direction: column;
align-items: stretch;
}
.header-nav.active > ul > li > a {
padding: 15px 0;
font-size: 20px;
font-weight: 500;
border-bottom: 1px solid var(--border);
}
.header-nav.active > ul > li > a::after {
display: none;
}
/* Mobile dropdown */
.header-nav.active .dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
box-shadow: none;
padding: 0;
padding-left: 20px;
background: transparent;
}
.header-nav.active .dropdown li {
border-bottom: none;
}
.header-nav.active .dropdown a {
justify-content: flex-start;
padding: 12px 0;
font-size: 16px;
text-transform: none;
}
.header-nav.active .dropdown a:hover {
padding-left: 10px;
background: transparent;
}
/* Hide dropdown arrow on mobile - always expanded */
.header-nav.active .dropdown-arrow {
display: none;
}
/* Higher specificity to ensure mobile dropdown stays visible */
.header-nav.active .has-dropdown .dropdown,
.header-nav.active li.has-dropdown > .dropdown {
position: static !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
.display-4 { font-size: 2.5rem; }
.display-5 { font-size: 2rem; }
.display-6 { font-size: 1.75rem; }
.container {
padding-left: 20px;
padding-right: 20px;
}
.hero-section {
min-height: 50vh;
min-height: 50dvh; /* Modern viewport unit for mobile browsers */
/* padding-top je definiran zgoraj z !important (vrstica 2945) */
}
.single-post-wrapper {
padding: 40px 0;
}
.single-title {
font-size: 36px;
}
.single-hero-image {
margin-bottom: 24px;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper {
flex-direction: column;
align-items: flex-start !important;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .variation-price-container {
width: 100%;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .woocommerce-variation-add-to-cart {
width: 100%;
}
.product-add-to-cart-wrapper .single_variation_wrap .variation-price-cart-wrapper .woocommerce-variation-add-to-cart .single_add_to_cart_button {
width: 100%;
}
#job-sidebar .job-cta-card {
position: relative;
top: 0;
margin-top: 2rem;
}
.consultation-cta-section .consultation-main-icon {
width: 80px;
height: 80px;
}
.consultation-cta-section .consultation-main-icon svg {
width: 36px;
height: 36px;
}
}
@media (max-width: 768px) {
.product-gallery-sticky > .position-relative.bg-light {
padding: 0.5rem !important;
}
.g-5 {
--gutter-x: 1.5rem;
--gutter-y: 1.5rem;
}
.woocommerce form.checkout_coupon .form-row-first,
.woocommerce form.login .form-row-first,
.woocommerce form.register .form-row-first {
padding-right: 0;
}
.woocommerce form.checkout_coupon .form-row-last,
.woocommerce form.login .form-row-last,
.woocommerce form.register .form-row-last {
padding-left: 0;
}
.simple-add-to-cart {
flex-direction: column;
align-items: stretch;
}
.simple-add-to-cart__price {
min-width: 0;
}
.simple-add-to-cart__actions {
width: 100%;
flex-shrink: 1;
flex-wrap: wrap;
}
.simple-add-to-cart__actions .quantity,
.simple-add-to-cart__actions .single_add_to_cart_button {
width: 100%;
}
.woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.woocommerce-variation-add-to-cart .quantity,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
width: 100%;
}
.single_add_to_cart_button {
white-space: normal;
}
}
@media (max-width: 768px) {
#main .products {
grid-template-columns: repeat(1, 1fr) !important;
}
/* Show top-bar on mobile - compact version */
.top-bar {
padding: 6px 15px;
font-size: 12px;
}
.top-bar-contact {
gap: 15px;
}
.header {
padding: 15px;
}
.header-logo img {
width: 140px;
}
.header-nav.active {
padding: 80px 20px 20px;
}
.header-nav.active > ul > li > a {
font-size: 18px;
padding: 12px 0;
}
.site-main > .wrapper {
margin-top: 0 !important;
}
.partners {
padding: var(--space-4); /* 16px - standardizirano */
}
.partners-grid img {
height: 35px;
}
.woocommerce-cart-form .product-quantity .quantity .input-group {
margin-left: auto;
}
.shop_table.cart .actions button:not(.input-group button) {
width: 100%;
}
.woocommerce .cart-collaterals ul#shipping_method,
.woocommerce .cart-collaterals .shipping.recurring-total ul {
clear: both;
text-align: left;
margin-top: 2rem;
}
.woocommerce .cart-collaterals .woocommerce-shipping-destination,
.woocommerce .cart-collaterals .woocommerce-shipping-calculator,
.woocommerce .cart-collaterals .woocommerce-shipping-contents,
.woocommerce .cart-collaterals .first-payment-date {
text-align: left;
}
.shop_table.cart td.actions {
border-bottom-right-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.cta-banner {
padding: var(--space-12) var(--space-4); /* 48px 16px - standardizirano */
}
.cta-text p {
font-size: 18px;
line-height: 28px;
}
.cta-container {
gap: 15px;
}
.cta-text,
.cta-button {
flex: 0 0 100%;
text-align: center;
}
}
@media (max-width: 768px) {
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
.display-4 { font-size: 2rem; }
.display-5 { font-size: 1.75rem; }
.display-6 { font-size: 1.5rem; }
.container {
padding-left: 15px;
padding-right: 15px;
}
.hero-section {
min-height: 45vh;
min-height: 45dvh; /* Modern viewport unit for mobile browsers */
/* padding-top je definiran zgoraj z !important (vrstica 2951) */
}
.products {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.post-grid {
grid-template-columns: 1fr;
}
.single-post-wrapper {
padding: 30px 0;
}
.single-title {
font-size: 28px;
}
.single-header {
padding: 30px 0 40px;
}
.single-hero-image {
margin-bottom: 20px;
}
.single-meta {
padding: 16px 20px;
font-size: 14px;
}
.single-category {
font-size: 13px;
padding: 6px 12px;
}
.single-keywords .keyword-tag {
padding: 8px 12px;
font-size: 14px;
}
.single-post-footer {
padding: 32px 0 40px;
}
.back-link {
font-size: 14px;
padding: 10px 16px;
}
.single-post-wrapper .entry-content h2, .single-post-wrapper .entry-content .h2 {
font-size: 24px;
}
.single-post-wrapper .entry-content h3, .single-post-wrapper .entry-content .h3 {
font-size: 20px;
}
.info-block-inner {
flex-direction: column;
gap: 15px;
padding: 20px;
}
.info-block-icon img {
max-width: 40px;
}
.icon-stats-shortcode {
margin: 30px 0;
}
.accordion-block .accordion-block-heading {
font-size: 24px;
margin-bottom: 20px;
}
.accordion-block-heading {
font-size: 24px;
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
a:hover {
text-decoration: none !important;
}
}
@media (max-width: 639px) {
.layout-grid-4 {
grid-template-columns: repeat(1, 1fr) !important;
}
.home .layout-grid-6.products {
grid-template-columns: repeat(2, 1fr) !important;
}
#main .products .product .product-header {
padding: var(--space-3);
}
#main .products .product .card-body {
padding: var(--space-4);
}
#main .products .product .add-to-cart-container {
padding: 0 var(--space-4) var(--space-4);
}
}
@media (max-width: 639px) {
.btn {
min-height: 44px;
padding: 0 1.25rem;
font-size: 0.9375rem;
}
.btn-lg {
min-height: 52px;
padding: 0 1.75rem;
font-size: 1rem;
}
.table-responsive-sm .table {
white-space: nowrap;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 32%;
}
.erkon-top-bar-mobile-menu {
display: block;
}
.badges-wrapper .subtitle {
font-size: 14px;
font-weight: 400;
padding: 6px 4px;
}
.post-grid {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
.layout-grid-1 {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
.layout-grid-2 {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
.layout-grid-3 {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
.layout-grid-4 {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
.layout-grid-5 {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
.layout-grid-6 {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
}
@media (max-width: 639px) {
body {
font-size: 0.9375rem;
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.375rem; }
.btn {
padding: 0.625rem 1.25rem;
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.icon-stat-item {
gap: 12px;
}
.icon-stat-value {
font-size: 18px;
}
.icon-stat-label {
font-size: 14px;
}
.g-5 {
--gutter-x: 1rem;
--gutter-y: 1.5rem;
}
.woocommerce div.product div:has(> .product-add-to-cart-wrapper) {
padding: 1rem !important;
}
}
@media (max-width: 480px) {
.top-bar-email {
display: none;
}
.simple-add-to-cart__actions {
flex-wrap: wrap;
}
.simple-add-to-cart__actions .quantity {
width: 100%;
}
.simple-add-to-cart__actions .single_add_to_cart_button {
width: 100%;
}
.partners-grid {
gap: 15px;
}
.partners-grid img {
height: 30px;
}
/* Hero services 2x2 grid on small mobile */
.hero-services {
gap: 15px;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
.hero-service-row {
width: 150px;
}
}
@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;
}
.reveal,
[data-reveal] {
opacity: 1;
transform: none;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
transition: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
transition: none;
}
}
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.d-print-none {
display: none !important;
}
.d-print-block {
display: block !important;
}
}
/* ==========================================================================
SERVICE SECTION BLOCK
Prenos iz primer-dobre-prakse - vanilla CSS
========================================================================== */
/* Base styles */
.service-section {
position: relative;
padding: var(--section-py) var(--container-px); /* 96px 32px - standardizirano */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
container-type: inline-size; /* Enable container queries */
container-name: service;
}
/* Container query for service content */
@container service (max-width: 600px) {
.service-content h2 {
font-size: var(--text-2xl);
}
.service-content p:not(.subtitle) {
font-size: 0.9375rem;
}
}
.service-container {
max-width: 1170px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 48px;
}
.service-container.reverse {
flex-direction: row-reverse;
}
/* Image */
.service-image {
flex: 0 0 50%;
overflow: hidden;
border-radius: var(--radius-lg);
}
.service-image img {
width: 100%;
height: 100%;
aspect-ratio: 4/3; /* Prevents layout shift */
object-fit: cover;
border-radius: 0;
transition: transform 0.5s ease;
}
.service-image:hover img {
transform: scale(1.03);
}
/* Content */
.service-content {
flex: 0 0 50%;
padding-right: 24px;
}
.service-container.reverse .service-content {
padding-right: 0;
padding-left: 24px;
}
.service-content h2 {
font-family: var(--font-heading, 'Libre Franklin', sans-serif);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
color: var(--erkon-secondary);
margin-bottom: 0;
}
.service-content .subtitle {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-heading, 'Libre Franklin', sans-serif);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: var(--radius-base);
border: 1px solid transparent;
background: transparent;
line-height: 1.4;
margin-top: 12px;
margin-bottom: 12px;
}
.service-content p:not(.subtitle) {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 1rem;
line-height: 1.625;
color: #3B3B3B;
margin-top: var(--space-6);
margin-bottom: 0;
}
.service-content .btn {
margin-top: var(--space-6);
color: var(--erkon-secondary);
background-color: transparent;
border: 2px solid var(--erkon-secondary);
}
.service-content .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Rdeč gumb - service sekcija */
.btn-red,
.btn-red:link,
.btn-red:visited {
color: #81142d;
border-color: #81142d;
background-color: transparent;
}
.btn-red:hover {
color: var(--erkon-white);
background-color: #5a0d1f;
border-color: #5a0d1f;
}
/* Service Grid Cards - Storitve page */
.service-card {
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(var(--erkon-primary-rgb), 0.15);
}
/* Feature Cards - Service detail pages */
.feature-card {
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(var(--erkon-primary-rgb), 0.12);
}
/* Staggered reveal for feature grid */
.col-lg-3.reveal[data-reveal-delay="100"] {
transition-delay: 0.1s;
}
.col-lg-3.reveal[data-reveal-delay="200"] {
transition-delay: 0.2s;
}
.col-lg-3.reveal[data-reveal-delay="300"] {
transition-delay: 0.3s;
}
/* Staggered reveal for service grid */
.col-lg-4.reveal[data-reveal-delay="100"] {
transition-delay: 0.1s;
}
.col-lg-4.reveal[data-reveal-delay="200"] {
transition-delay: 0.2s;
}
/* VARIANT: White background */
.service-section--white {
background-color: var(--erkon-white);
background-image: url('../assets/img/services/ozadje-belo.webp');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* VARIANT: Blue card */
.service-section--blue-card {
background-color: rgba(217, 234, 255, 1);
padding: var(--section-py) var(--container-px);
}
.service-section--blue-card .service-card {
background: var(--erkon-white);
border-radius: var(--radius-2xl);
box-shadow: 0 4px 16px rgba(var(--erkon-primary-rgb), 0.08);
max-width: 1170px;
margin: 0 auto;
overflow: hidden;
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.service-section--blue-card .service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(var(--erkon-primary-rgb), 0.12);
}
.service-section--blue-card .service-container {
padding: var(--card-padding); /* 48px - standardizirano */
}
.service-section--blue-card .service-content h2 {
color: #2B2B2B;
}
.service-section--blue-card .service-content .btn {
color: var(--erkon-hlajenje);
border-color: var(--erkon-hlajenje);
}
.service-section--blue-card .service-content .btn:hover {
background-color: rgba(30, 58, 138, 0.1);
color: var(--erkon-hlajenje);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 58, 138, 0.15);
}
/* Prezračevanje button colors */
.service-section--prezracevanje .service-content .btn {
color: var(--erkon-prezracevanje);
border-color: var(--erkon-prezracevanje);
background-color: transparent;
}
.service-section--prezracevanje .service-content .btn:hover {
background-color: rgba(13, 202, 240, 0.1);
color: var(--erkon-prezracevanje);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(13, 202, 240, 0.15);
}
/* Ogrevanje button colors */
.service-section--ogrevanje .service-content .btn {
color: var(--erkon-ogrevanje);
border-color: var(--erkon-ogrevanje);
background-color: transparent;
}
.service-section--ogrevanje .service-content .btn:hover {
background-color: rgba(129, 20, 45, 0.1);
color: var(--erkon-ogrevanje);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(129, 20, 45, 0.15);
}
/* VARIANT: White with warm colors (ogrevanje) */
.service-section--white-warm {
background-color: var(--erkon-white);
}
.service-section--white-warm .service-content h2 {
color: var(--erkon-secondary);
}
.service-section--white-warm .service-content .subtitle {
color: var(--erkon-secondary);
}
.service-section--white-warm .service-content .btn {
color: var(--erkon-secondary);
border-color: var(--erkon-secondary);
}
.service-section--white-warm .service-content .btn:hover {
background-color: var(--erkon-secondary);
color: var(--erkon-white);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.3);
}
/* Service Color Modifiers */
.service-section--prezracevanje .service-content h2,
.service-section--prezracevanje .service-content .subtitle {
color: var(--erkon-prezracevanje);
}
.service-section--hlajenje .service-content h2,
.service-section--hlajenje .service-content .subtitle {
color: var(--erkon-hlajenje);
}
.service-section--ogrevanje .service-content h2,
.service-section--ogrevanje .service-content .subtitle {
color: var(--erkon-ogrevanje);
}
/* 8.3 Service Sections - Visual Depth */
/* Service content positioning */
.service-section .service-content {
position: relative;
}
/* ::before accent lines REMOVED per user request */
/* Service subtitle colors */
.service-section--prezracevanje .service-content .subtitle {
color: var(--erkon-prezracevanje) !important;
background: rgba(13, 202, 240, 0.1) !important;
border: 1px solid var(--erkon-prezracevanje) !important;
}
.service-section--hlajenje .service-content .subtitle {
color: var(--erkon-hlajenje) !important;
background: rgba(30, 58, 138, 0.1) !important;
border: 1px solid var(--erkon-hlajenje) !important;
}
.service-section--ogrevanje .service-content .subtitle {
color: var(--erkon-ogrevanje) !important;
background: rgba(129, 20, 45, 0.1) !important;
border: 1px solid var(--erkon-ogrevanje) !important;
}
/* Scroll Reveal animation */
.service-section .reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.service-section .reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* 8.8 Staggered reveal for service sections */
.service-section .reveal .service-image {
opacity: 0;
transform: translateX(-30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-section .reveal .service-content {
opacity: 0;
transform: translateX(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.service-section .reveal.visible .service-image,
.service-section .reveal.visible .service-content {
opacity: 1;
transform: translateX(0);
}
/* Reverse direction for .reverse */
.service-section .reveal.reverse .service-image {
transform: translateX(30px);
}
.service-section .reveal.reverse .service-content {
transform: translateX(-30px);
}
.service-section .reveal.reverse.visible .service-image,
.service-section .reveal.reverse.visible .service-content {
opacity: 1;
transform: translateX(0);
}
/* Responsive - Large tablets (keep side-by-side with tighter spacing) */
@media (max-width: 1024px) {
.service-section {
padding: var(--space-16) var(--space-5);
}
.service-container {
gap: var(--gap-md);
}
.service-image,
.service-content {
flex: 0 0 48%;
}
.service-content h2 {
font-size: clamp(1.5rem, 4vw, 2rem);
}
}
/* Mobile - stack to column */
@media (max-width: 767px) {
.service-section {
padding: var(--space-12) var(--space-4);
}
.service-container,
.service-container.reverse {
flex-direction: column;
}
.service-image,
.service-content {
flex: 0 0 100%;
padding-left: 0;
padding-right: 0;
}
.service-container {
gap: var(--gap-md);
}
.service-content h2 {
font-size: 1.75rem;
line-height: 1.3;
}
.service-section--blue-card .service-container {
padding: var(--space-8);
}
}
@media (max-width: 480px) {
.service-section--blue-card .service-container {
padding: var(--space-4); /* 16px - standardizirano */
}
}
/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.service-section .reveal {
opacity: 1;
transform: none;
transition: none;
}
.service-image img {
transition: none;
}
.service-image:hover img {
transform: none;
}
.service-content .btn {
transition: none;
}
.service-content .btn:hover {
transform: none;
}
}
/* ===========================================
UTILITY CLASSES - Inline Style Replacements
=========================================== */
/* Map Container */
.map-container {
min-height: 400px;
}
.map-iframe {
border: 0;
min-height: 400px;
}
/* Pricing Table Pattern */
.pricing-pattern {
background-image: radial-gradient(rgb(226, 232, 240) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
pointer-events: none;
}
/* Max Width Containers */
.max-w-700 {
max-width: 700px;
}
.max-w-800 {
max-width: 800px;
}
/* Font Awesome Icon Sizes */
.fa-icon-12 { font-size: 12px; }
.fa-icon-14 { font-size: 14px; }
.fa-icon-16 { font-size: 16px; }
.fa-icon-18 { font-size: 18px; }
.fa-icon-20 { font-size: 20px; }
.fa-icon-24 { font-size: 24px; }
.fa-icon-28 { font-size: 28px; }
.fa-icon-32 { font-size: 32px; }
.fa-icon-48 { font-size: 48px; }
.fa-icon-64 { font-size: 64px; }
/* Product/Image Utilities */
.img-contain-180 {
max-height: 180px;
object-fit: contain;
}
.img-contain-400 {
max-height: 400px;
object-fit: contain;
}
.brand-logo-overlay {
max-width: 80px;
max-height: 60px;
object-fit: contain;
}
.cert-image {
max-width: 240px;
height: auto;
}
/* Text Clamp - 2 lines */
.text-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Small Font Sizes */
.text-xs {
font-size: 0.75rem;
}
.text-sm-custom {
font-size: 0.9rem;
}
/* Icon/Badge Sizes */
.icon-48 {
width: 48px;
height: auto;
max-height: 48px;
object-fit: contain;
}
.icon-24 {
width: 24px;
height: 24px;
}
.icon-16 {
width: 16px;
height: 16px;
line-height: 14px;
font-size: 10px;
}
.icon-8 {
width: 8px;
height: 8px;
}
/* Circle icon containers with explicit sizing */
.icon-circle-sm {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.icon-circle-md {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
}
.icon-circle-lg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
}
/* Service-specific icon colors for features grid */
.icon-circle-lg.text-prezracevanje svg { color: #2f8ac8; }
.icon-circle-lg.text-hlajenje svg { color: #1e3a8a; }
.icon-circle-lg.text-ogrevanje svg { color: #81142d; }
/* Letter Spacing */
.tracking-wide {
letter-spacing: 0.05em;
}
/* Hero Overlay */
/* ===========================================
PREMIUM DESIGN IMPROVEMENTS
=========================================== */
/* 8.1 Hero Section - Premium Upgrade */
.hero-overlay {
background: linear-gradient(
135deg,
rgba(var(--erkon-primary-rgb), 0.85) 0%,
rgba(var(--erkon-secondary-rgb), 0.6) 50%,
rgba(var(--erkon-primary-rgb), 0.75) 100%
);
}
/* Hero slogan with shimmer effect */
.hero-section h1 .text-info,
.hero-home-block h1 .text-info {
display: block;
font-family: 'Work Sans', sans-serif;
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
line-height: 1.4;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--erkon-accent);
margin-top: 15px;
background: linear-gradient(
90deg,
var(--erkon-secondary) 0%,
#5cb8e4 50%,
var(--erkon-secondary) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 0% center; }
50% { background-position: 100% center; }
}
/* Hero Service Cards - glassmorphism (overrides) */
/* Main styles defined in section 23 - these are legacy overrides */
/* Premium Button Glow */
.hero-section .btn-light,
.hero-home-block .btn-light {
position: relative;
overflow: hidden;
}
.hero-section .btn-light::before,
.hero-home-block .btn-light::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.5s ease;
}
.hero-section .btn-light:hover::before,
.hero-home-block .btn-light:hover::before {
left: 100%;
}
/* Stats Box Offset */
.stats-box-offset {
margin-bottom: -20px;
}
/* Product Info Box */
.product-info-box {
min-width: 100px;
}
/* ==========================================================================
PRODUCT CATALOGUE CARD
PDF download card on single product page.
========================================================================== */
/* Product Main Image */
.product-main-image {
max-height: 500px;
width: 100%;
object-fit: contain;
}
.product-catalogue-card {
margin-top: var(--space-10);
}
.product-catalogue-card__inner {
display: flex;
align-items: stretch;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* Preview / Thumbnail Area - clean, no frame */
.product-catalogue-card__preview {
position: relative;
flex: 0 0 180px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.product-catalogue-card__image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: var(--space-4);
}
/* Fallback placeholder when no thumbnail */
.product-catalogue-card__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6);
}
.product-catalogue-card__placeholder-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
background: rgba(var(--erkon-primary-rgb), 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--erkon-primary);
}
.product-catalogue-card__placeholder-label {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--font-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
/* Content Area */
.product-catalogue-card__content {
flex: 1;
padding: var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
justify-content: center;
}
.product-catalogue-card__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0 0 var(--space-2) 0;
line-height: var(--leading-tight);
}
.product-catalogue-card__desc {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-5) 0;
}
.product-catalogue-card__link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
text-decoration: none;
transition: color var(--duration-normal) var(--ease-out);
}
.product-catalogue-card__link:hover {
color: var(--erkon-secondary);
}
.product-catalogue-card__link svg {
transition: transform var(--duration-normal) var(--ease-out);
}
.product-catalogue-card__link:hover svg {
transform: translateY(1px);
}
/* Responsive: stack vertically on mobile */
@media (max-width: 575.98px) {
.product-catalogue-card__inner {
flex-direction: column;
}
.product-catalogue-card__preview {
flex: 0 0 auto;
min-height: 120px;
max-height: 180px;
}
.product-catalogue-card__image {
width: auto;
height: auto;
max-width: 100%;
max-height: 160px;
}
.product-catalogue-card__content {
padding: var(--space-5) var(--space-6);
}
}
/* Placeholder Image */
.placeholder-image {
background: #f5f5f5;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-image span {
color: #999;
}
/* WooCommerce Block UI */
.blockUI.blockOverlay,
.cart-item-loading {
z-index: 1000;
border: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
opacity: 0.6;
cursor: wait;
position: absolute;
}
/* Decorative Icon - Careers Page */
.decorative-icon-wrapper {
transform: translate(50%, -50%);
}
.decorative-icon-large {
font-size: 300px;
}
/* Cart Trigger Overlay */
.fk-cart-trigger {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
/* ===========================================
TEAM SECTION
=========================================== */
.team-section {
padding: 0 25px;
background: var(--bg-primary);
}
.team-container {
max-width: 1170px;
margin: 0 auto;
text-align: center;
}
.team-image {
max-width: 850px;
margin: 0 auto;
display: inline-block;
}
.team-image img {
width: 100%;
display: block;
}
/* ===========================================
STATS SECTION
=========================================== */
/* 8.4 Stats Section - Premium */
.stats-section {
background: linear-gradient(180deg, var(--gray-50) 0%, var(--surface-default) 100%);
padding: var(--space-2xl) var(--container-px);
position: relative;
}
/* Team photo centering - reduced spacing */
.stats-section figure {
display: flex;
justify-content: center;
margin: 0 auto var(--space-5);
}
.stats-section figure img {
max-width: 100%;
height: auto;
}
/* Remove extra margin from stats grid */
.stats-section .grid-row.mt-4 {
margin-top: 0 !important;
}
/* Tighter icon feature block */
.stats-section .icon-feature-block {
padding: var(--space-lg) 0;
}
/* Vertical dividers between stats */
@media (min-width: 1024px) {
.icon-feature-wrapper .col-lg-3:not(:last-child) .icon-feature-item::after {
content: '';
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60px;
background: linear-gradient(180deg, transparent, var(--gray-300), transparent);
}
}
/* No hover effect on stats - they are not links */
.stats-container {
max-width: 1170px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 0;
}
.stat-item {
text-align: left;
flex: 1 1 0;
min-width: 0;
padding: 0 20px;
position: relative;
}
/* Vertikalne črte med elementi */
.stat-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 1px;
background: var(--border);
}
.stat-icon {
margin-bottom: 15px;
}
.stat-icon img {
width: 60px;
height: 60px;
object-fit: contain;
}
.stat-number {
font-family: 'Libre Franklin', sans-serif;
font-size: var(--text-5xl);
font-weight: 700;
color: var(--title);
line-height: 1.2;
}
.stat-label {
font-family: 'Work Sans', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--text);
margin-top: 5px;
}
/* ===========================================
FOOTER - Dodatni stili
=========================================== */
.footer {
position: relative;
background-color: rgba(23, 7, 51, 1);
color: var(--erkon-white);
padding: 96px 25px 48px;
}
.footer-shape {
display: none;
}
.footer-shape svg {
display: block;
width: 100%;
height: 450px;
fill: rgba(255, 255, 255, 0.03);
}
.footer-container {
position: relative;
max-width: 1170px;
margin: 0 auto;
}
.footer-grid {
display: flex;
gap: var(--gap-lg);
padding-bottom: 60px;
}
.footer-col {
flex: 1;
}
.footer-col:first-child {
flex: 1.5;
}
.footer-col h4,
.footer-col h5 {
font-family: 'Libre Franklin', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--erkon-white);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-col h4:not(:first-child),
.footer-col h5:not(:first-child) {
margin-top: 24px;
}
.footer-logo img {
height: 45px;
margin-bottom: 20px;
}
.footer-col p {
font-family: 'Work Sans', sans-serif;
font-size: 14px;
color: var(--text-inverse);
line-height: 1.8;
margin-bottom: 8px;
}
.footer-col a {
color: var(--text-inverse);
transition: color var(--duration-slow);
}
.footer-col a:hover {
color: var(--secondary);
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-storitve-menu {
list-style: none;
margin: 0;
padding: 0;
}
.footer-storitve-menu li {
margin-bottom: 10px;
}
.footer-storitve-menu a::before {
content: "• ";
}
.footer-col .accent {
color: var(--secondary);
}
.footer-social-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.footer-social-row .footer-social {
margin-top: 0;
}
.footer-badge {
background: white;
border-radius: var(--radius-base);
padding: 6px 8px;
}
.footer-badge img {
height: 60px;
width: auto;
display: block;
}
.footer-social {
display: flex;
gap: 12px;
margin-top: 20px;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--erkon-white);
font-size: 16px;
transition: all var(--duration-slow);
}
.footer-social a:hover {
background: var(--secondary);
}
/* EU Funding Disclosure */
.footer-eu {
margin-top: var(--space-6);
}
.footer-eu__link {
display: flex;
align-items: center;
gap: var(--space-4);
text-decoration: none;
padding: var(--space-3) var(--space-4);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
transition: background var(--duration-slow) var(--ease-in-out),
border-color var(--duration-slow) var(--ease-in-out);
}
.footer-eu__link:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
}
.footer-eu__link:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.footer-eu__logo {
width: 100px;
height: auto;
border-radius: var(--radius-md);
flex-shrink: 0;
object-fit: contain;
}
.footer-eu__text {
color: var(--text-inverse);
font-family: var(--font-body);
font-size: var(--text-xs);
line-height: var(--leading-normal);
opacity: 0.65;
}
.footer-eu__text strong {
opacity: 1;
font-weight: var(--font-semibold);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 24px 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: baseline;
gap: 48px;
line-height: 1.6;
}
.footer-bottom p {
color: var(--text-inverse);
font-size: 13px;
margin: 0;
}
.footer-bottom a {
color: var(--text-inverse);
transition: color var(--duration-slow);
}
.footer-bottom a:hover {
color: var(--secondary);
}
.footer-links {
display: flex;
gap: 24px;
flex-shrink: 0;
justify-content: flex-end;
}
.footer-links a {
color: var(--text-inverse);
font-size: 13px;
}
.footer-links-menu {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
/* ===========================================
STATS & FOOTER RESPONSIVE
=========================================== */
@media (max-width: 1280px) {
.footer-grid {
flex-wrap: wrap;
}
.footer-col {
flex: 0 0 calc(33.333% - 32px);
}
.footer-col:first-child {
flex: 0 0 100%;
}
}
@media (max-width: 1024px) {
.footer-grid {
gap: var(--gap-md);
}
.footer-col {
flex: 0 0 calc(50% - 16px);
}
}
@media (max-width: 768px) {
.stat-item {
padding: 0 15px;
}
.stat-number {
font-size: 36px;
}
}
@media (max-width: 639px) {
.stats-container {
flex-wrap: wrap;
}
.stat-item {
flex: 0 0 50%;
margin-bottom: 30px;
}
.stat-item:not(:last-child)::after {
display: none;
}
}
@media (max-width: 480px) {
.stat-item {
flex: 0 0 100%;
}
}
@media (max-width: 639px) {
.footer {
padding: 60px 15px 0;
}
.footer-grid {
flex-direction: column;
gap: 40px;
}
.footer-col,
.footer-col:first-child {
flex: 0 0 100%;
}
.footer-bottom {
flex-direction: column;
gap: 15px;
text-align: center;
}
.footer-links {
justify-content: center;
}
.footer-links-menu {
justify-content: center;
}
.footer-eu__link {
width: 100%;
gap: var(--space-3);
padding: var(--space-3);
}
.footer-eu__logo {
width: 72px;
}
}
/* ==========================================================================
SERVIS PAGE - Premium Styles
========================================================================== */
/* Service contact icon hover effect */
.service-contact-feature {
transition: transform var(--duration-slow) ease;
}
.service-contact-feature:hover .service-icon-circle {
transform: scale(1.08);
box-shadow: var(--shadow-md);
}
.service-icon-circle {
width: 56px;
height: 56px;
min-width: 56px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
/* Pricing row hover effect */
.pricing-row {
transition: all var(--duration-normal) ease;
}
.pricing-row:hover {
background-color: var(--gray-50);
transform: translateX(4px);
}
/* Highlighted pricing rows should not have additional hover bg change */
.pricing-row.bg-warm-highlight:hover {
background-color: rgb(240, 247, 255);
}
/* Form card decorative corner gradient */
.service-form-card {
position: relative;
}
.service-form-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(circle at top right, rgba(var(--erkon-secondary-rgb), 0.06), transparent 70%);
pointer-events: none;
border-radius: 0 var(--radius-xl) 0 0;
}
/* ==========================================================================
CONTACT FORM 7 - Premium Styles
========================================================================== */
/* Base form styling */
.wpcf7-form {
font-family: var(--font-body);
}
/* Response messages */
.wpcf7-response-output {
margin-top: 16px !important;
padding: 16px !important;
border-radius: var(--radius-lg) !important;
font-family: var(--font-body);
font-size: 0.875rem;
}
.wpcf7-form.sent .wpcf7-response-output {
background-color: #dcfce7;
border-color: #22c55e !important;
color: #166534;
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
background-color: #fee2e2;
border-color: #dc2626 !important;
color: #991b1b;
}
/* Spinner */
.wpcf7 .wpcf7-spinner {
margin-left: 8px;
}
/* ==========================================================================
CF7 SERVIS FORM - Premium Styles (Refined Professional Trust)
========================================================================== */
/* -------------------------------------------------------------------------
Form Container & Grid Fixes
------------------------------------------------------------------------- */
/* Ensure form card contains all content properly */
.service-form-card {
overflow: visible;
}
.service-form-card .wpcf7-form {
font-family: var(--font-body);
}
/* Fix grid-row inside form - proper containment */
.service-form-card .grid-row {
margin-left: -12px;
margin-right: -12px;
}
.service-form-card .grid-row > [class*="col-"] {
padding-left: 12px;
padding-right: 12px;
margin-bottom: 20px;
/* Ensure content stays within column */
min-width: 0;
overflow: visible;
}
/* Last row items no margin */
.service-form-card .grid-row > [class*="col-"]:last-child {
margin-bottom: 0;
}
/* -------------------------------------------------------------------------
Labels
------------------------------------------------------------------------- */
.cf7-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
/* -------------------------------------------------------------------------
Input Groups (Icon + Input) - FIXED ERROR POSITIONING
------------------------------------------------------------------------- */
/* Wrapper for the entire field including error */
.service-form-card [class*="col-"] > div:has(.cf7-input-group) {
position: relative;
}
/* Input group container - isolated from error */
.cf7-input-group {
display: flex;
align-items: flex-start;
position: relative;
width: 100%;
}
/* Prevent wpcf7-form-control-wrap from breaking layout */
.cf7-input-group .wpcf7-form-control-wrap {
flex: 1;
min-width: 0;
display: block;
}
/* Input must fill the wrapper width */
.cf7-input-group .wpcf7-form-control-wrap .cf7-input {
width: 100%;
display: block;
}
/* Error message INSIDE input group - below the input */
.cf7-input-group .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
display: block;
width: 100%;
padding-left: 0;
margin-top: 6px;
text-align: left;
}
.cf7-input-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
min-width: 52px;
height: 52px;
background-color: #f8f9fa;
border: 1px solid #e2e5e9;
border-right: none;
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
color: #6b7280;
transition: all var(--duration-normal) ease;
flex-shrink: 0;
}
.cf7-input-icon svg {
width: 20px;
height: 20px;
transition: transform var(--duration-normal) ease;
}
/* Input field */
.cf7-input {
flex: 1;
width: 100%;
min-width: 0;
height: 52px;
padding: 0 16px;
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-primary);
background-color: #f8f9fa;
border: 1px solid #e2e5e9;
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
transition: all var(--transition);
box-sizing: border-box;
}
.cf7-input:focus {
outline: none;
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
background-color: var(--erkon-white);
}
/* Icon animations on focus */
.cf7-input-group:focus-within .cf7-input-icon {
border-color: var(--erkon-secondary);
color: var(--erkon-secondary);
background-color: rgba(var(--erkon-secondary-rgb), 0.04);
}
.cf7-input-group:focus-within .cf7-input-icon svg {
transform: scale(1.1);
}
/* -------------------------------------------------------------------------
Error Messages - BELOW field, no layout break
------------------------------------------------------------------------- */
/* Base error style */
.wpcf7-not-valid-tip {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: #dc2626;
margin-top: 6px;
line-height: 1.4;
}
/* Error for textarea (no icon) */
.wpcf7-form-control-wrap:has(.cf7-textarea) .wpcf7-not-valid-tip {
padding-left: 0;
}
/* Invalid input styling */
.cf7-input.wpcf7-not-valid {
border-color: #dc2626;
background-color: var(--erkon-white);
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}
/* Icon error state */
.cf7-input-group:has(.wpcf7-not-valid) .cf7-input-icon {
border-color: #dc2626;
color: #dc2626;
background-color: rgba(220, 38, 38, 0.04);
}
/* -------------------------------------------------------------------------
Textarea
------------------------------------------------------------------------- */
.cf7-textarea {
width: 100%;
min-height: 140px;
padding: 16px;
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-primary);
background-color: #f8f9fa;
border: 1px solid #e2e5e9;
border-radius: var(--radius-xl);
resize: vertical;
transition: all var(--transition);
}
.cf7-textarea:focus {
outline: none;
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
background-color: var(--erkon-white);
}
.cf7-textarea.wpcf7-not-valid {
border-color: #dc2626;
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}
/* Placeholder */
.cf7-input::placeholder,
.cf7-textarea::placeholder {
color: #9ca3af;
}
/* -------------------------------------------------------------------------
File Upload - MODERN SUCCESS STATE (Prominent Visual Feedback)
------------------------------------------------------------------------- */
.cf7-file-upload {
border: 2px dashed #d1d5db;
border-radius: var(--radius-2xl);
padding: 40px 24px;
text-align: center;
transition: all var(--duration-slower) var(--ease-in-out);
cursor: pointer;
background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%);
position: relative;
overflow: hidden;
}
/* Decorative background pattern */
.cf7-file-upload::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 20% 80%, rgba(var(--erkon-secondary-rgb), 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(var(--erkon-secondary-rgb), 0.03) 0%, transparent 50%);
pointer-events: none;
transition: opacity var(--transition-slow);
}
.cf7-file-upload:hover {
border-color: var(--erkon-secondary);
background: linear-gradient(135deg, rgba(var(--erkon-secondary-rgb), 0.02) 0%, rgba(var(--erkon-secondary-rgb), 0.06) 100%);
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(var(--erkon-secondary-rgb), 0.12);
}
.cf7-file-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
cursor: pointer;
margin: 0;
position: relative;
z-index: 1;
}
.cf7-file-label > svg {
color: var(--erkon-secondary);
opacity: 0.5;
transition: all var(--duration-slower) var(--ease-in-out);
width: 48px;
height: 48px;
}
.cf7-file-upload:hover .cf7-file-label > svg {
opacity: 1;
transform: translateY(-6px) scale(1.05);
}
.cf7-file-input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.cf7-file-text {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
transition: all var(--duration-slow) ease;
}
.cf7-file-hint {
font-size: 0.8125rem;
color: #6b7280;
line-height: 1.5;
}
/* ==========================================================================
SUCCESS STATE - PROMINENT VISUAL FEEDBACK
========================================================================== */
.cf7-file-upload.has-file {
border: 2px solid #22c55e;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.15) 100%);
padding: 32px 24px 48px;
box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2),
inset 0 0 0 1px rgba(34, 197, 94, 0.1);
}
.cf7-file-upload.has-file::before {
background-image: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.15) 0%, transparent 60%);
opacity: 1;
}
.cf7-file-upload.has-file:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(34, 197, 94, 0.25),
inset 0 0 0 1px rgba(34, 197, 94, 0.15);
}
/* Hide default upload icon when file selected */
.cf7-file-upload.has-file .cf7-file-label > svg:first-of-type {
display: none;
}
/* Success indicator badge - green circle in corner (no animation) */
.cf7-file-upload.has-file::after {
content: '✓';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
color: white;
font-size: 18px;
font-weight: 700;
z-index: 3;
}
/* Transform text for success state - replace with "Datoteka uspešno naložena" */
.cf7-file-upload.has-file .cf7-file-text {
color: #166534;
font-size: 1.0625rem;
/* Hide original text, show via pseudo-elements */
font-size: 0;
}
.cf7-file-upload.has-file .cf7-file-text::before {
content: '📄 Datoteka';
font-size: 1.0625rem;
font-weight: 600;
}
.cf7-file-upload.has-file .cf7-file-text::after {
content: ' uspešno naložena';
font-size: 1.0625rem;
font-weight: 400;
color: #15803d;
}
/* Transform hint for success state - replace with click to change */
.cf7-file-upload.has-file .cf7-file-hint {
color: #16a34a;
font-weight: 500;
/* Hide original text */
font-size: 0;
}
.cf7-file-upload.has-file .cf7-file-hint::before {
content: 'Kliknite za zamenjavo datoteke';
font-size: 0.8125rem;
}
/* Hide the wpcf7-form-control-wrap completely - it only contains the hidden input */
.cf7-file-upload .wpcf7-form-control-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
/* Ensure input covers entire area for click */
z-index: 2;
}
/* -------------------------------------------------------------------------
Checkbox / GDPR - VERTICALLY CENTERED
------------------------------------------------------------------------- */
.cf7-checkbox {
display: block;
}
.cf7-checkbox .wpcf7-acceptance {
display: block;
}
.cf7-checkbox .wpcf7-list-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0;
}
.cf7-checkbox .wpcf7-list-item input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
margin: 0;
accent-color: var(--erkon-primary);
cursor: pointer;
flex-shrink: 0;
border-radius: var(--radius-base);
/* Poravnaj s prvo vrstico teksta */
position: relative;
top: 2px;
}
.cf7-checkbox .wpcf7-list-item-label {
font-size: 0.875rem;
color: #6b7280;
line-height: 1.6;
flex: 1;
padding-top: 0;
}
/* Zmanjšaj razmik med textarea in GDPR */
.service-form-card .grid-row > .col-12:has(.cf7-checkbox) {
margin-top: -8px;
}
/* Checkbox error */
.cf7-checkbox .wpcf7-not-valid-tip {
padding-left: 36px;
margin-top: 12px;
}
/* -------------------------------------------------------------------------
Submit Button
------------------------------------------------------------------------- */
.service-form-card .btn.btn-primary,
.service-form-card button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 36px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--erkon-white);
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
border: none;
border-radius: var(--radius-xl);
cursor: pointer;
transition: all var(--duration-slow) ease;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.25);
}
.service-form-card .btn.btn-primary:hover,
.service-form-card button[type="submit"]:hover {
background: linear-gradient(135deg, var(--erkon-secondary) 0%, #0369a1 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.35);
}
.service-form-card .btn.btn-primary:active,
.service-form-card button[type="submit"]:active {
transform: translateY(0);
}
.service-form-card .btn.btn-primary svg,
.service-form-card button[type="submit"] svg {
transition: transform var(--duration-slow) ease;
}
.service-form-card .btn.btn-primary:hover svg,
.service-form-card button[type="submit"]:hover svg {
transform: translateX(4px);
}
/* -------------------------------------------------------------------------
Response Messages
------------------------------------------------------------------------- */
.service-form-card .wpcf7-response-output {
margin-top: 24px !important;
padding: 16px 20px !important;
border-radius: var(--radius-xl) !important;
font-size: 0.9375rem;
font-weight: 500;
}
.service-form-card .wpcf7-form.sent .wpcf7-response-output {
background-color: rgba(34, 197, 94, 0.1);
border-color: #22c55e !important;
color: #166534;
}
.service-form-card .wpcf7-form.failed .wpcf7-response-output,
.service-form-card .wpcf7-form.invalid .wpcf7-response-output {
background-color: rgba(220, 38, 38, 0.08);
border-color: #dc2626 !important;
color: #991b1b;
}
/* Spinner */
.service-form-card .wpcf7-spinner {
margin-left: 12px;
}
/* text-end utility */
.text-end {
text-align: right;
}
/* ==========================================================================
ZAPOSLITEV PAGE - Premium Job Cards & Benefits
========================================================================== */
/* -------------------------------------------------------------------------
Job Card - Premium Component
------------------------------------------------------------------------- */
.job-card {
background: var(--erkon-white);
border-radius: var(--radius-3xl);
padding: 32px;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
border: 1px solid var(--border-muted);
box-shadow: 0 4px 20px rgba(var(--erkon-primary-rgb), 0.06);
transition: all var(--duration-slower) var(--ease-in-out);
}
.job-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--erkon-secondary) 0%, var(--erkon-primary) 100%);
opacity: 0;
transition: opacity var(--duration-slow) ease;
}
.job-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(var(--erkon-primary-rgb), 0.12);
border-color: rgba(var(--erkon-secondary-rgb), 0.2);
}
.job-card:hover::before {
opacity: 1;
}
/* Job Card Header */
.job-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.job-card__icon {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: var(--radius-2xl);
background: linear-gradient(135deg, rgba(var(--erkon-secondary-rgb), 0.1) 0%, rgba(var(--erkon-primary-rgb), 0.05) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--erkon-secondary);
transition: all var(--duration-slow) ease;
}
.job-card:hover .job-card__icon {
background: linear-gradient(135deg, var(--erkon-secondary) 0%, var(--erkon-primary) 100%);
color: var(--erkon-white);
transform: scale(1.05);
}
.job-card__icon svg {
width: 28px;
height: 28px;
}
.job-card__icon i {
font-size: 28px;
}
.job-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* .job-badge replaced by .subtitle .subtitle--secondary */
/* Job Card Title */
.job-card__title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
line-height: 1.3;
}
/* Job Card Description */
.job-card__description {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 24px;
}
/* Job Card Requirements */
.job-card__requirements {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
padding: 20px;
background: var(--surface-muted);
border-radius: var(--radius-xl);
}
.job-card__requirement {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--text-secondary);
transition: all var(--duration-normal) ease;
}
.job-card__requirement:hover {
color: var(--text-primary);
transform: translateX(4px);
}
.job-card__requirement svg {
width: 16px;
height: 16px;
min-width: 16px;
color: var(--erkon-secondary);
}
/* Job Card CTA */
.job-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px 24px;
margin-top: auto;
font-size: 0.95rem;
font-weight: 600;
color: var(--erkon-white);
background: linear-gradient(135deg, var(--erkon-primary) 0%, #1a2d5c 100%);
border: none;
border-radius: var(--radius-xl);
text-decoration: none;
transition: all var(--duration-slow) ease;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
}
.job-card__cta:hover {
background: linear-gradient(135deg, var(--erkon-secondary) 0%, #0369a1 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.3);
color: var(--erkon-white);
}
.job-card__cta svg {
transition: transform var(--duration-slow) ease;
}
.job-card__cta:hover svg {
transform: translateX(4px);
}
/* Job Card Responsive */
@media (max-width: 768px) {
.job-card {
padding: 24px;
}
.job-card__header {
flex-direction: column;
align-items: flex-start;
}
.job-card__title {
font-size: 1.2rem;
}
.job-card__requirements {
padding: 16px;
}
}
/* -------------------------------------------------------------------------
Culture Benefits
------------------------------------------------------------------------- */
/* Culture benefit cards - premium micro-interactions */
.culture-benefit {
padding: 16px;
border-radius: var(--radius-xl);
transition: all var(--duration-slow) ease;
background: transparent;
}
.culture-benefit:hover .benefit-icon {
transform: scale(1.08);
box-shadow: var(--shadow-md);
}
.benefit-icon {
transition: all var(--duration-slow) ease;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
/* Staggered reveal for job cards */
.col-lg-6.reveal[data-reveal-delay="100"],
.col-lg-4.reveal[data-reveal-delay="100"] {
transition-delay: 0.1s;
}
.col-lg-6.reveal[data-reveal-delay="200"],
.col-lg-4.reveal[data-reveal-delay="200"] {
transition-delay: 0.2s;
}
/* -------------------------------------------------------------------------
Job Detail Page - Premium Styling
------------------------------------------------------------------------- */
/* Job Hero (compact version) */
.hero-job {
min-height: 280px;
padding: 100px 0 50px;
}
.job-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
opacity: 0.8;
}
.job-breadcrumb a {
color: inherit;
text-decoration: none;
transition: opacity var(--duration-normal) ease;
}
.job-breadcrumb a:hover {
opacity: 1;
text-decoration: underline;
}
.job-breadcrumb svg {
opacity: 0.6;
}
.job-hero__badges {
margin-top: 16px;
}
/* .job-badge--light replaced by .subtitle .subtitle--light */
/* Job Detail Sections */
.job-detail__section {
margin-bottom: 48px;
}
.job-detail__section:last-child {
margin-bottom: 0;
}
.job-detail__heading {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid var(--erkon-secondary);
}
.job-detail__heading svg {
color: var(--erkon-secondary);
}
.job-detail__heading--benefits {
border-bottom-color: #22c55e;
}
.job-detail__heading--benefits svg {
color: #22c55e;
}
.job-detail__list {
list-style: none;
padding: 0;
margin: 0;
}
.job-detail__list li {
position: relative;
padding: 14px 0 14px 32px;
border-bottom: 1px solid var(--border-muted);
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
transition: all var(--duration-normal) ease;
}
.job-detail__list li:last-child {
border-bottom: none;
}
.job-detail__list li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--erkon-secondary);
border-radius: 50%;
transition: all var(--duration-normal) ease;
}
.job-detail__list li:hover {
color: var(--text-primary);
padding-left: 36px;
}
.job-detail__list li:hover::before {
transform: translateY(-50%) scale(1.2);
}
.job-detail__list--benefits li::before {
background: #22c55e;
}
/* Job Sidebar */
.job-sidebar {
position: sticky;
top: 100px;
}
.job-sidebar__card {
background: var(--surface-muted);
border-radius: var(--radius-3xl);
padding: 32px;
border: 1px solid var(--border-muted);
}
.job-sidebar__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 20px;
}
.job-sidebar__info {
margin-bottom: 8px;
}
.job-sidebar__item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
color: var(--text-secondary);
font-size: 0.9rem;
border-bottom: 1px solid var(--border-muted);
}
.job-sidebar__item:last-child {
border-bottom: none;
}
.job-sidebar__item svg {
width: 20px;
height: 20px;
min-width: 20px;
color: var(--erkon-secondary);
}
.job-sidebar__item i {
font-size: 20px;
min-width: 20px;
color: var(--erkon-secondary);
}
.job-sidebar__item a {
color: inherit;
text-decoration: none;
}
.job-sidebar__item a:hover {
color: var(--erkon-secondary);
text-decoration: underline;
}
.job-sidebar__note a {
color: var(--erkon-secondary);
text-decoration: none;
}
.job-sidebar__note a:hover {
text-decoration: underline;
}
.job-sidebar__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px 24px;
margin: 24px 0 16px;
font-size: 0.95rem;
font-weight: 600;
color: var(--erkon-white);
background: linear-gradient(135deg, var(--erkon-primary) 0%, var(--erkon-secondary) 100%);
border: none;
border-radius: var(--radius-xl);
text-decoration: none;
transition: all var(--duration-slow) ease;
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
}
.job-sidebar__cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-secondary-rgb), 0.3);
color: var(--erkon-white);
}
.job-sidebar__cta svg {
transition: transform var(--duration-slow) ease;
}
.job-sidebar__cta:hover svg {
transform: translateX(4px);
}
.job-sidebar__note {
font-size: 0.85rem;
color: var(--text-muted);
text-align: center;
line-height: 1.6;
margin-bottom: 16px;
}
.job-sidebar__back {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-secondary);
text-decoration: none;
padding-top: 16px;
border-top: 1px solid var(--border-muted);
transition: color var(--duration-normal) ease;
}
.job-sidebar__back:hover {
color: var(--erkon-secondary);
}
.job-sidebar__back svg {
transition: transform var(--duration-normal) ease;
}
.job-sidebar__back:hover svg {
transform: translateX(-4px);
}
/* Job Detail Responsive */
@media (max-width: 1023px) {
.job-sidebar {
position: static;
margin-top: 48px;
}
}
@media (max-width: 768px) {
.hero-job {
min-height: 240px;
padding: 80px 0 40px;
}
.job-detail__heading {
font-size: 1.2rem;
}
.job-detail__list li {
padding-left: 20px;
}
.job-detail__list li:hover {
padding-left: 24px;
}
.job-sidebar__card {
padding: 24px;
}
}
/* ==========================================================================
ABOUT PAGE (O-NAS) - Premium Design System
========================================================================== */
/* --------------------------------------------------------------------------
Hero Stat Strip - Vertical architectural style
-------------------------------------------------------------------------- */
.hero-stat-strip {
display: flex;
flex-direction: column;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-stat-item {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background var(--transition-slow);
}
.hero-stat-item:last-child {
border-bottom: none;
}
.hero-stat-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.hero-stat-number {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-none);
color: var(--erkon-white);
}
.hero-stat-label {
font-size: 11px;
font-weight: var(--font-semibold);
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.7;
margin-top: var(--space-1);
color: var(--erkon-white);
}
/* --------------------------------------------------------------------------
About Section Base
-------------------------------------------------------------------------- */
.about-section {
padding: var(--section-py) var(--container-px);
}
.about-section--compact {
padding: var(--section-py-compact) var(--container-px);
}
.about-section--light {
background-color: var(--gray-50);
}
/* --------------------------------------------------------------------------
About Intro Section
-------------------------------------------------------------------------- */
.about-intro {
padding: var(--section-py) 0;
background-color: var(--surface-default);
}
.about-intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.about-intro__image-wrapper {
position: relative;
}
.about-intro__image {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-lg);
}
.about-intro__badge {
position: absolute;
bottom: var(--space-6);
left: var(--space-6);
background: var(--erkon-primary);
color: var(--erkon-white);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
text-align: center;
}
.about-intro__badge-number {
display: block;
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
line-height: var(--leading-none);
letter-spacing: var(--tracking-tighter);
}
.about-intro__badge-label {
font-size: 11px;
font-weight: var(--font-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.8;
margin-top: var(--space-1);
}
.about-intro__content {
max-width: 540px;
}
/* .about-intro__label replaced by .subtitle .subtitle--secondary */
.about-intro__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--text-primary);
margin-bottom: var(--space-6);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
.about-intro__text {
font-size: var(--text-base);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-6);
}
/* About Intro Quote - Oversized decorative */
.about-intro__quote {
position: relative;
padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10);
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
border-radius: 0 var(--radius-3xl) var(--radius-3xl) 0;
border-left: 3px solid var(--erkon-secondary);
margin: var(--space-8) 0;
}
.about-intro__quote::before {
content: '"';
position: absolute;
top: var(--space-4);
left: var(--space-4);
font-family: Georgia, serif;
font-size: 72px;
line-height: 1;
color: var(--erkon-secondary);
opacity: 0.15;
}
.about-intro__quote p {
margin: 0;
font-style: italic;
font-weight: var(--font-medium);
color: var(--text-primary);
padding-left: var(--space-6);
line-height: var(--leading-relaxed);
}
/* About Intro Feature Pills */
.about-intro__features {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-8);
}
/* .about-intro__feature-pill replaced by .subtitle .subtitle--pill */
/* --------------------------------------------------------------------------
About Stats Section - Overlapping bar design
-------------------------------------------------------------------------- */
.about-stats {
position: relative;
padding: var(--section-py) 0 var(--space-16) 0;
background-color: var(--surface-default);
}
.about-stats__image-container {
position: relative;
margin-bottom: calc(-1 * var(--space-12));
}
.about-stats__image {
width: 100%;
height: 450px;
object-fit: cover;
border-radius: var(--radius-3xl);
}
.about-stats__image-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, rgba(var(--erkon-primary-rgb), 0.3), transparent);
border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
pointer-events: none;
}
.about-stats__bar {
position: relative;
z-index: 10;
max-width: 900px;
margin: 0 auto;
display: flex;
justify-content: center;
background: var(--erkon-primary);
border-radius: var(--radius-2xl);
padding: var(--space-8) var(--space-10);
box-shadow: 0 20px 60px rgba(var(--erkon-primary-rgb), 0.3);
}
.about-stats__item {
flex: 1;
text-align: center;
padding: 0 var(--space-6);
position: relative;
}
.about-stats__item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 50px;
background: rgba(255, 255, 255, 0.15);
}
.about-stats__number {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-bold);
color: var(--erkon-white);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-none);
}
.about-stats__label {
font-size: 12px;
font-weight: var(--font-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-top: var(--space-2);
}
/* --------------------------------------------------------------------------
About Values Section - Bento Grid
-------------------------------------------------------------------------- */
.about-values {
padding: var(--section-py) 0;
background-color: var(--gray-50);
}
.about-values__header {
text-align: center;
max-width: 600px;
margin: 0 auto var(--space-12) auto;
}
/* .about-values__label replaced by .subtitle .subtitle--secondary */
.about-values__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--text-primary);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
.about-values__bento {
display: grid;
grid-template-columns: repeat(2, 1fr);
border: 1px solid var(--border-muted);
border-radius: var(--radius-3xl);
overflow: hidden;
background: var(--erkon-white);
}
.about-values__card {
padding: var(--space-10);
position: relative;
background: var(--erkon-white);
transition: background var(--transition-slow);
}
.about-values__card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(var(--erkon-secondary-rgb), 0.03) 100%);
opacity: 0;
transition: opacity var(--transition-slow);
pointer-events: none;
}
.about-values__card:hover::before {
opacity: 1;
}
/* Internal borders for bento grid */
.about-values__card:nth-child(1),
.about-values__card:nth-child(2) {
border-bottom: 1px solid var(--border-muted);
}
.about-values__card:nth-child(1),
.about-values__card:nth-child(3) {
border-right: 1px solid var(--border-muted);
}
.about-values__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
color: var(--erkon-secondary);
}
.about-values__icon i {
font-size: 28px;
}
.about-values__card-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-3);
color: var(--text-primary);
}
.about-values__card-desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin: 0;
}
/* ==========================================================================
CONTACT METHODS SECTION
========================================================================== */
.contact-methods {
padding: var(--section-py) 0;
background-color: var(--gray-50);
}
.contact-methods__header {
text-align: center;
max-width: 600px;
margin: 0 auto var(--space-12) auto;
}
.contact-methods__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--text-primary);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
.contact-methods__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.contact-methods__card {
background: var(--erkon-white);
border-radius: var(--radius-2xl);
padding: var(--space-10);
text-align: center;
box-shadow: 0 4px 16px rgba(var(--erkon-primary-rgb), 0.06);
transition: transform var(--duration-slow) var(--ease-in-out),
box-shadow var(--duration-slow) var(--ease-in-out);
}
.contact-methods__card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(var(--erkon-primary-rgb), 0.12);
}
.contact-methods__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5) auto;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--erkon-secondary) 0%, var(--erkon-primary) 100%);
box-shadow: 0 8px 24px rgba(var(--erkon-secondary-rgb), 0.25);
color: var(--erkon-white);
transition: transform var(--duration-slow) var(--ease-in-out),
box-shadow var(--duration-slow) var(--ease-in-out);
}
.contact-methods__card:hover .contact-methods__icon {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(var(--erkon-secondary-rgb), 0.35);
}
.contact-methods__icon svg {
width: 28px;
height: 28px;
stroke-width: 1.5;
}
.contact-methods__icon i {
font-size: 28px;
}
.contact-methods__card-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-2);
color: var(--text-primary);
}
.contact-methods__card-desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin: 0;
}
.contact-methods__card-desc a {
color: var(--erkon-secondary);
font-weight: var(--font-semibold);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-in-out);
}
.contact-methods__card-desc a:hover {
color: var(--erkon-primary);
}
/* --------------------------------------------------------------------------
Staggered Reveal Animations
-------------------------------------------------------------------------- */
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.visible > * {
opacity: 1;
transform: translateY(0);
}
/* --------------------------------------------------------------------------
About Page Responsive Styles
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.contact-methods__grid {
grid-template-columns: repeat(2, 1fr);
}
.about-intro__grid {
gap: var(--space-10);
}
.about-intro__badge {
padding: var(--space-3) var(--space-5);
}
.about-intro__badge-number {
font-size: var(--text-3xl);
}
.about-stats__bar {
padding: var(--space-6) var(--space-8);
}
.about-stats__item {
padding: 0 var(--space-4);
}
.about-stats__number {
font-size: var(--text-3xl);
}
}
@media (max-width: 767px) {
.hero-stat-strip {
flex-direction: row;
flex-wrap: wrap;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: var(--space-6);
}
.hero-stat-item {
flex: 1 1 50%;
text-align: center;
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-4);
}
.hero-stat-item:nth-child(2n) {
border-right: none;
}
.hero-stat-item:nth-child(n+3) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.about-intro__grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.about-intro__badge {
position: static;
display: inline-block;
margin-top: var(--space-4);
}
.about-intro__quote {
padding: var(--space-6);
padding-left: var(--space-8);
}
.about-intro__quote::before {
font-size: 48px;
top: var(--space-2);
left: var(--space-2);
}
.about-intro__features {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: var(--space-2);
margin-right: calc(-1 * var(--container-px));
}
.subtitle--pill {
flex-shrink: 0;
}
.about-stats__image {
height: 300px;
}
.about-stats__bar {
flex-wrap: wrap;
padding: var(--space-6);
margin: 0 var(--space-4);
}
.about-stats__item {
flex: 0 0 50%;
padding: var(--space-4);
text-align: center;
}
.about-stats__item:not(:last-child)::after {
display: none;
}
.about-stats__item:nth-child(1),
.about-stats__item:nth-child(2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.about-values__bento {
grid-template-columns: 1fr;
}
.about-values__card:nth-child(1),
.about-values__card:nth-child(3) {
border-right: none;
}
.about-values__card:nth-child(3) {
border-bottom: 1px solid var(--border-muted);
}
.about-values__card {
padding: var(--space-6);
}
.contact-methods__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.contact-methods__card {
padding: var(--space-8);
}
}
/* ==========================================================================
WOOCOMMERCE PREMIUM FORM STYLING
Unified with CF7 premium design for consistent user experience
========================================================================== */
/* -------------------------------------------------------------------------
Input Fields - Checkout, Cart, Account
------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
display: block;
width: 100%;
height: 52px;
padding: 0 16px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--text-primary);
background-color: #f8f9fa;
border: 1px solid #e2e5e9;
border-radius: var(--radius-xl);
transition: all var(--transition);
box-sizing: border-box;
}
/* Textarea - auto height */
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea,
.woocommerce #reviews #comment {
height: auto;
min-height: 120px;
padding: 16px;
}
/* Focus state - premium blue with shadow */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .quantity .qty:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus {
outline: none;
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
background-color: var(--erkon-white);
}
/* Placeholder */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
color: #9ca3af;
}
/* -------------------------------------------------------------------------
Select/Dropdown - Premium Styling
------------------------------------------------------------------------- */
.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce .woocommerce-ordering select,
.woocommerce-cart .cart-collaterals select,
select.orderby,
.woocommerce select {
display: block;
width: 100%;
height: 52px;
padding: 0 40px 0 16px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: var(--text-primary);
background-color: #f8f9fa;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px 12px;
border: 1px solid #e2e5e9;
border-radius: var(--radius-xl);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: all var(--transition);
}
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce .woocommerce-ordering select:focus,
select.orderby:focus,
.woocommerce select:focus {
outline: none;
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
background-color: var(--erkon-white);
}
/* Select hover */
.woocommerce form .form-row select:hover,
.woocommerce .woocommerce-ordering select:hover,
.woocommerce select:hover {
border-color: var(--erkon-secondary);
}
/* -------------------------------------------------------------------------
Checkboxes & Radio Buttons - Premium Styling
------------------------------------------------------------------------- */
.woocommerce form .form-row input[type="checkbox"],
.woocommerce-form-login__rememberme input[type="checkbox"],
.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
.woocommerce-shipping-methods input[type="radio"],
#payment input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
width: 20px;
height: 20px;
min-width: 20px;
margin: 0;
accent-color: var(--erkon-primary);
cursor: pointer;
flex-shrink: 0;
position: relative;
top: 0;
appearance: auto;
-webkit-appearance: auto;
-moz-appearance: auto;
}
/* Radio buttons - circle shape */
.woocommerce-shipping-methods input[type="radio"],
#payment input[type="radio"],
.woocommerce input[type="radio"] {
border-radius: 50%;
}
/* Checkbox/Radio label alignment */
.woocommerce form .form-row.terms label,
.woocommerce-form-login__rememberme,
.woocommerce-shipping-methods li label,
#payment .payment_methods li label {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9375rem;
color: var(--text-primary);
line-height: 1.6;
cursor: pointer;
}
/* Override old checkbox float layout */
.checkbox input,
.woocommerce-form-login__rememberme input,
.woocommerce-SavedPaymentMethods-saveNew input {
float: none;
margin-left: 0;
}
/* -------------------------------------------------------------------------
Quantity Selector - Premium Styling
------------------------------------------------------------------------- */
.woocommerce .quantity {
display: inline-flex;
align-items: center;
}
.woocommerce .quantity .qty {
width: 70px;
height: 48px;
text-align: center;
font-weight: 600;
border-radius: var(--radius-xl);
padding: 0 8px;
}
/* Quantity buttons (if using +/- buttons) */
.woocommerce .quantity .input-group-btn button,
.woocommerce .quantity button {
width: 40px;
height: 48px;
background-color: var(--bg-light, #f8f9fa);
border: 1px solid var(--border-color, #e2e5e9);
color: var(--text-primary);
font-size: 1.25rem;
cursor: pointer;
transition: all var(--transition);
}
.woocommerce .quantity .input-group-btn button:hover,
.woocommerce .quantity button:hover {
background-color: var(--erkon-secondary);
border-color: var(--erkon-secondary);
color: var(--erkon-white);
}
.woocommerce .quantity .input-group-btn:first-child button {
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
border-right: none;
}
.woocommerce .quantity .input-group-btn:last-child button {
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
border-left: none;
}
/* -------------------------------------------------------------------------
Validation States
------------------------------------------------------------------------- */
/* Validation success */
.woocommerce form .form-row.woocommerce-validated input.input-text {
border-color: #22c55e;
}
.woocommerce form .form-row.woocommerce-validated input.input-text:focus {
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
/* Validation error */
.woocommerce form .form-row.woocommerce-invalid input.input-text {
border-color: #dc2626;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text:focus {
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}
/* Notice styles are in woocommerce.css (loaded after theme.css) */
/* Coupon styles moved to cart redesign section (lines ~6128-6175) */
/* WooCommerce button active/disabled states handled by base WC button block above */
/* -------------------------------------------------------------------------
Form Labels - Premium Typography
------------------------------------------------------------------------- */
.woocommerce form .form-row label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.woocommerce form .form-row label .required {
color: #dc2626;
margin-left: 2px;
}
/* -------------------------------------------------------------------------
Form Row Spacing
------------------------------------------------------------------------- */
.woocommerce form .form-row {
margin-bottom: 20px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
width: calc(50% - 8px);
padding: 0;
}
.woocommerce form .form-row-wide {
width: 100%;
}
/* Single-country store — country selector not needed */
#billing_country_field,
#shipping_country_field {
display: none;
}
/* ==========================================================================
CHECKOUT PAGE - Premium Layout
========================================================================== */
/* -------------------------------------------------------------------------
Page Header
------------------------------------------------------------------------- */
.erkon-checkout-header {
padding-bottom: var(--space-8);
}
.erkon-checkout-header .subtitle {
margin-bottom: var(--space-3);
}
.erkon-checkout-title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--text-primary);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
margin: 0;
}
/* -------------------------------------------------------------------------
Main Container
------------------------------------------------------------------------- */
.erkon-checkout-container {
padding-bottom: var(--space-24);
}
/* -------------------------------------------------------------------------
Billing / Shipping Card
------------------------------------------------------------------------- */
.erkon-checkout-card {
background: var(--erkon-white);
border-radius: var(--radius-2xl);
border: 1px solid var(--border-muted);
box-shadow: var(--shadow-lg);
padding: var(--space-10);
position: relative;
overflow: hidden;
}
/* Decorative corner gradient — same pattern as .service-form-card */
.erkon-checkout-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 180px;
height: 180px;
background: radial-gradient(circle at top right, rgba(var(--erkon-secondary-rgb), 0.05), transparent 70%);
pointer-events: none;
}
/* Section headings inside card */
.erkon-checkout-card .woocommerce-billing-fields > h3,
.erkon-checkout-card .woocommerce-additional-fields > h3 {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-muted);
}
/* Shipping fields */
.erkon-checkout-card .woocommerce-shipping-fields {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.erkon-checkout-card .woocommerce-additional-fields {
margin-top: var(--space-10);
}
/* "Ship to different address?" — premium checkbox row */
.erkon-checkout-card #ship-to-different-address {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-normal);
letter-spacing: normal;
line-height: 1.5;
color: var(--text-primary);
background: none;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 0;
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--gray-100);
}
.erkon-checkout-card #ship-to-different-address:hover {
background: none;
border-color: transparent;
}
.erkon-checkout-card #ship-to-different-address label {
display: flex;
align-items: center;
gap: 0;
margin: 0;
cursor: pointer;
}
.erkon-checkout-card #ship-to-different-address input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
border: 2px solid rgba(var(--erkon-secondary-rgb), 0.3);
border-radius: 6px;
background: var(--erkon-white);
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.erkon-checkout-card #ship-to-different-address input[type="checkbox"]:hover {
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 3px rgba(var(--erkon-secondary-rgb), 0.1);
}
.erkon-checkout-card #ship-to-different-address input[type="checkbox"]:checked {
background: var(--erkon-secondary);
border-color: var(--erkon-secondary);
}
.erkon-checkout-card #ship-to-different-address input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.erkon-checkout-card #ship-to-different-address label span {
font-size: 0.9375rem;
font-weight: var(--font-medium);
color: var(--text-primary);
line-height: 1.4;
background-color: transparent !important;
}
/* -------------------------------------------------------------------------
Order Review Sidebar
------------------------------------------------------------------------- */
.erkon-checkout-sidebar {
background: var(--erkon-white);
border-radius: var(--radius-2xl);
border: 1px solid var(--border-muted);
box-shadow: var(--shadow-lg);
padding: var(--space-8);
position: sticky;
top: 170px;
}
.erkon-checkout-sidebar #order_review_heading {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-muted);
}
/* Order review table inside sidebar */
.erkon-checkout-sidebar .woocommerce-checkout-review-order {
background: transparent;
padding: 0;
border-radius: 0;
}
.erkon-checkout-sidebar .woocommerce-checkout-review-order-table {
margin-bottom: var(--space-6);
}
.erkon-checkout-sidebar .woocommerce-checkout-review-order-table th,
.erkon-checkout-sidebar .woocommerce-checkout-review-order-table td {
padding: var(--space-3) 0;
font-size: var(--text-sm);
border-bottom: 1px solid var(--border-muted);
}
.erkon-checkout-sidebar .woocommerce-checkout-review-order-table thead th {
font-weight: var(--font-semibold);
color: var(--text-secondary);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.erkon-checkout-sidebar .woocommerce-checkout-review-order-table .order-total th,
.erkon-checkout-sidebar .woocommerce-checkout-review-order-table .order-total td {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--text-primary);
border-bottom: none;
padding-top: var(--space-4);
}
/* -------------------------------------------------------------------------
Payment Methods — override existing flat styling
------------------------------------------------------------------------- */
/* FIX #5: Reduced padding on payment box */
.erkon-checkout-sidebar .woocommerce-checkout #payment,
.erkon-checkout-sidebar #payment {
background: var(--surface-muted);
border: 1px solid var(--border-muted);
border-radius: var(--radius-xl);
padding: var(--space-4);
margin-top: var(--space-4);
}
.erkon-checkout-sidebar #payment ul.payment_methods {
padding: 0;
margin: 0;
list-style: none;
border-bottom: 1px solid var(--border-default);
padding-bottom: var(--space-4);
margin-bottom: var(--space-4);
}
.erkon-checkout-sidebar #payment ul.payment_methods li {
padding: var(--space-3) 0;
}
.erkon-checkout-sidebar #payment ul.payment_methods li label {
font-weight: var(--font-medium);
}
.erkon-checkout-sidebar #payment div.payment_box {
background-color: var(--erkon-white);
border: 1px solid var(--border-muted);
border-radius: var(--radius-lg);
padding: var(--space-3);
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
.erkon-checkout-sidebar #payment div.payment_box::before {
display: none;
}
.erkon-checkout-sidebar .woocommerce-shipping-methods,
.erkon-checkout-sidebar ul.payment_methods {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.erkon-checkout-sidebar .woocommerce-shipping-methods li,
.erkon-checkout-sidebar ul.payment_methods li {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* -------------------------------------------------------------------------
Place Order Button — matches cart proceed-to-checkout pattern
------------------------------------------------------------------------- */
.erkon-checkout-sidebar #place_order,
.woocommerce-checkout #payment #place_order {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
padding: 0 1.75rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: var(--font-semibold);
color: var(--erkon-white);
background-color: var(--erkon-primary);
border: 2px solid var(--erkon-primary);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all var(--transition);
transform: translateY(0) translateZ(0);
will-change: transform, box-shadow;
letter-spacing: var(--tracking-wide);
line-height: 1;
margin-top: var(--space-4);
box-shadow: 0 4px 14px rgba(var(--erkon-primary-rgb), 0.2);
}
.erkon-checkout-sidebar #place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
color: var(--erkon-white);
background-color: #1a2d5a;
border-color: #1a2d5a;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--erkon-primary-rgb), 0.35);
}
.erkon-checkout-sidebar #place_order:active,
.woocommerce-checkout #payment #place_order:active {
transform: translateY(0);
background-color: #0a1530;
border-color: #0a1530;
box-shadow: 0 2px 8px rgba(var(--erkon-primary-rgb), 0.25);
}
/* -------------------------------------------------------------------------
Terms & Conditions inside sidebar
------------------------------------------------------------------------- */
.erkon-checkout-sidebar .woocommerce-terms-and-conditions-wrapper {
margin-top: var(--space-4);
}
.erkon-checkout-sidebar .woocommerce-terms-and-conditions-wrapper p {
font-size: var(--text-sm);
color: var(--text-secondary);
}
/* -------------------------------------------------------------------------
Coupon & Login toggle messages
FIX #1: Remove blue border-left from .woocommerce-info on checkout
FIX #2: Fix icon overlapping text
------------------------------------------------------------------------- */
.erkon-checkout-container .woocommerce-form-coupon-toggle .woocommerce-info,
.erkon-checkout-container .woocommerce-form-login-toggle .woocommerce-info {
background: var(--surface-muted);
border: 1px solid var(--border-muted);
border-left: 1px solid var(--border-muted);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-6);
padding-left: var(--space-6);
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
/* Hide the ::before icon on checkout coupon/login toggles */
.erkon-checkout-container .woocommerce-form-coupon-toggle .woocommerce-info::before,
.erkon-checkout-container .woocommerce-form-login-toggle .woocommerce-info::before {
display: none;
}
.erkon-checkout-container .woocommerce-form-coupon-toggle .woocommerce-info a,
.erkon-checkout-container .woocommerce-form-login-toggle .woocommerce-info a {
color: var(--erkon-secondary);
font-weight: var(--font-semibold);
}
/* -------------------------------------------------------------------------
Coupon form — FIX #3: Better coupon input/button layout
------------------------------------------------------------------------- */
.erkon-checkout-container .checkout_coupon {
background: var(--erkon-white);
border: 1px solid var(--border-muted);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.erkon-checkout-container .checkout_coupon .input-group {
gap: var(--space-2);
}
.erkon-checkout-container .checkout_coupon p:first-of-type {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.erkon-checkout-container .checkout_coupon .form-row {
display: flex;
gap: var(--space-3);
align-items: stretch;
margin-bottom: 0;
}
.erkon-checkout-container .checkout_coupon .form-row-first {
width: auto;
flex: 1;
margin-bottom: 0;
}
.erkon-checkout-container .checkout_coupon .form-row-last {
width: auto;
margin-bottom: 0;
}
.erkon-checkout-container .checkout_coupon .button {
padding: 12px 24px;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
background: var(--erkon-primary);
color: var(--erkon-white);
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
white-space: nowrap;
transition: all var(--duration-slow) var(--ease-in-out);
}
.erkon-checkout-container .checkout_coupon .button:hover {
background: var(--primary-light);
transform: translateY(-1px);
box-shadow: var(--shadow-primary);
}
/* -------------------------------------------------------------------------
Responsive — Tablet
------------------------------------------------------------------------- */
@media (max-width: 991px) {
.erkon-checkout-sidebar {
position: static;
}
.erkon-checkout-card {
padding: var(--space-8);
}
.erkon-checkout-sidebar {
padding: var(--space-6);
}
}
/* -------------------------------------------------------------------------
Responsive — Mobile
------------------------------------------------------------------------- */
@media (max-width: 768px) {
.erkon-checkout-header {
padding-bottom: var(--space-6);
}
.erkon-checkout-title {
font-size: var(--text-3xl);
}
.erkon-checkout-container {
padding-bottom: var(--space-12);
}
.erkon-checkout-card {
padding: var(--space-6);
border-radius: var(--radius-xl);
}
.erkon-checkout-card::before {
width: 100px;
height: 100px;
}
.erkon-checkout-card .woocommerce-billing-fields > h3,
.erkon-checkout-card .woocommerce-additional-fields > h3 {
font-size: var(--text-xl);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
}
.erkon-checkout-card .woocommerce-shipping-fields,
.erkon-checkout-card .woocommerce-additional-fields {
margin-top: var(--space-8);
}
.erkon-checkout-sidebar {
border-radius: var(--radius-xl);
padding: var(--space-5);
}
.erkon-checkout-sidebar #order_review_heading {
font-size: var(--text-xl);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
}
.erkon-checkout-sidebar #payment {
padding: var(--space-4);
}
/* Two-column form rows stack on small screens */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
width: 100%;
}
}
/* ==========================================================================
KONFIGURATOR - Channel Configurator
========================================================================== */
/* Main Section */
.konfigurator-section {
background: var(--surface-secondary, #f8f9fa);
}
/* Main Grid Layout */
.konfigurator-main {
display: grid;
grid-template-columns: clamp(260px, 22vw, 320px) 1fr 1fr;
gap: var(--space-lg, 24px);
}
/* Panel Wrapper - external title */
.konfigurator-panel-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-sm, 8px);
}
.konfigurator-panel-wrapper > .konfigurator-panel-title {
margin-bottom: 0;
padding-left: var(--space-xs, 4px);
}
/* Panel stretches to fill wrapper height - equal height panels */
.konfigurator-panel-wrapper > .konfigurator-panel {
flex: 1;
}
/* Panels */
.konfigurator-panel {
background: var(--surface-primary, var(--erkon-white));
border-radius: var(--radius-xl);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: var(--space-lg, 24px);
}
.konfigurator-panel-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: var(--space-md, 16px);
color: var(--text-primary);
}
/* View buttons at top of 2D/3D panels */
.konfigurator-2d > .konfigurator-view-buttons,
.konfigurator-3d > .konfigurator-view-buttons {
margin-bottom: var(--space-md, 16px);
}
/* Settings Panel */
.konfigurator-settings-group {
display: flex;
flex-direction: column;
gap: var(--space-md, 16px);
}
.konfigurator-input-group {
display: flex;
flex-direction: column;
gap: var(--space-xs, 4px);
}
.konfigurator-input-group label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, #6b7280);
}
.konfigurator-input-with-slider {
display: flex;
flex-direction: column;
gap: var(--space-xs, 4px);
}
.konfigurator-input-group input[type="number"],
.konfigurator-input-number {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-default, #e2e5e9);
border-radius: var(--radius-lg);
font-size: 0.9375rem;
font-family: var(--font-body);
color: var(--text-primary);
background: var(--surface-primary, var(--erkon-white));
transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.konfigurator-input-group input[type="number"]:focus,
.konfigurator-input-number:focus {
outline: none;
border-color: var(--erkon-secondary);
box-shadow: 0 0 0 4px rgba(var(--erkon-secondary-rgb), 0.1);
}
/* Range Slider */
.konfigurator-input-group input[type="range"] {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
border-radius: var(--radius-base);
cursor: pointer;
}
.konfigurator-input-group input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: var(--erkon-secondary);
border-radius: 50%;
cursor: pointer;
transition: background var(--duration-normal) ease;
}
.konfigurator-input-group input[type="range"]::-webkit-slider-thumb:hover {
background: var(--erkon-primary);
}
.konfigurator-input-group input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--erkon-secondary);
border: none;
border-radius: 50%;
cursor: pointer;
}
/* Checkbox Group */
.konfigurator-checkbox-group {
margin-top: var(--space-md, 16px);
padding-top: var(--space-md, 16px);
border-top: 1px solid var(--border-default, #e2e5e9);
}
.konfigurator-checkbox-label {
display: flex;
align-items: center;
gap: var(--space-sm, 8px);
cursor: pointer;
font-weight: 500;
font-size: 0.875rem;
color: var(--text-secondary);
}
.konfigurator-checkbox-label input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--erkon-secondary);
}
/* Flange Options */
.konfigurator-flange-options {
display: none;
flex-direction: column;
gap: var(--space-sm, 8px);
padding: var(--space-md, 16px);
background: var(--surface-secondary, #f8f9fa);
border-radius: var(--radius-lg);
margin-top: var(--space-sm, 8px);
}
.konfigurator-flange-options.visible {
display: flex;
}
.konfigurator-select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-default, #e2e5e9);
border-radius: var(--radius-lg);
font-size: 0.9375rem;
font-family: var(--font-body);
background: var(--surface-primary, var(--erkon-white));
cursor: pointer;
transition: border-color var(--duration-normal) ease;
}
.konfigurator-select:focus {
outline: none;
border-color: var(--erkon-secondary);
}
/* Color Indicators */
.konfigurator-color-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
vertical-align: middle;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.konfigurator-color-v1 {
background-color: #ff6b6b;
}
.konfigurator-color-v2 {
background-color: #9b59b6;
}
/* Calculations */
.konfigurator-calculations {
margin-top: var(--space-lg, 24px);
padding-top: var(--space-md, 16px);
border-top: 1px solid var(--border-default, #e2e5e9);
}
.konfigurator-calc-item {
display: flex;
align-items: baseline;
gap: var(--space-sm, 8px);
}
.konfigurator-calc-label {
font-size: 0.875rem;
color: var(--text-secondary);
}
.konfigurator-calc-value {
font-size: 1.5rem;
font-weight: 600;
color: var(--erkon-secondary);
}
.konfigurator-calc-unit {
font-size: 0.875rem;
color: var(--text-secondary);
}
/* 2D and 3D Panels */
.konfigurator-2d,
.konfigurator-3d {
min-height: 350px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Canvas Container */
.konfigurator-canvas-container {
flex: 1;
min-height: 280px;
background: #f8f8f8;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
width: 100%;
contain: size layout;
}
.konfigurator-canvas-container canvas {
width: 100% !important;
height: 100% !important;
display: block;
}
/* View Buttons */
.konfigurator-view-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm, 8px);
}
.konfigurator-view-btn,
.konfigurator-view-btn-3d {
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--border-default, #e2e5e9);
background: var(--surface-primary, var(--erkon-white));
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-normal) ease;
white-space: nowrap;
}
.konfigurator-view-btn:hover,
.konfigurator-view-btn-3d:hover {
border-color: var(--erkon-secondary);
color: var(--erkon-secondary);
}
.konfigurator-view-btn.active,
.konfigurator-view-btn-3d.active {
background: var(--erkon-secondary);
border-color: var(--erkon-secondary);
color: var(--erkon-white);
}
/* Zoom Controls */
.konfigurator-zoom-controls {
position: absolute;
bottom: 16px;
right: 16px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 10;
}
.konfigurator-zoom-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
background: var(--surface-primary, var(--erkon-white));
border: 1px solid var(--border-default, #e2e5e9);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-normal) ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.konfigurator-zoom-btn:hover {
border-color: var(--erkon-secondary);
color: var(--erkon-secondary);
}
/* Fullscreen Control */
.konfigurator-fullscreen-control {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
}
.konfigurator-fullscreen-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
background: var(--surface-primary, var(--erkon-white));
border: 1px solid var(--border-default, #e2e5e9);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-normal) ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.konfigurator-fullscreen-btn:hover {
border-color: var(--erkon-secondary);
color: var(--erkon-secondary);
}
.konfigurator-fullscreen-btn.active {
background: var(--erkon-secondary);
color: var(--erkon-white);
border-color: var(--erkon-secondary);
}
/* Fullscreen State */
.konfigurator-canvas-container.fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-height: none !important;
z-index: 99999 !important;
border-radius: 0 !important;
background: var(--erkon-white);
}
/* Configuration Summary (in inquiry form) */
.konfigurator-summary {
border-radius: var(--radius-xl);
}
.konfigurator-summary-grid {
display: flex;
flex-direction: column;
gap: var(--space-sm, 8px);
}
.konfigurator-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.konfigurator-summary-label {
font-size: 0.875rem;
color: var(--text-secondary);
}
.konfigurator-summary-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
}
/* -------------------------------------------------------------------------
Konfigurator - Tab Bar (hidden on desktop, visible on tablet/mobile)
------------------------------------------------------------------------- */
.konfigurator-tab-bar {
display: none;
}
.konfigurator-tab {
flex: 1;
padding: 10px 16px;
font-size: 0.875rem;
font-weight: 600;
border: 1px solid var(--border-default, #e2e5e9);
background: var(--surface-primary, var(--erkon-white));
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-normal) ease;
}
.konfigurator-tab:first-child {
border-radius: var(--radius-md) 0 0 var(--radius-md);
border-right: none;
}
.konfigurator-tab:last-child {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.konfigurator-tab:hover {
border-color: var(--erkon-secondary);
color: var(--erkon-secondary);
}
.konfigurator-tab.active {
background: var(--erkon-secondary);
border-color: var(--erkon-secondary);
color: var(--erkon-white);
}
/* -------------------------------------------------------------------------
Konfigurator - Responsive Breakpoints
Intentional custom breakpoints (1100px, 850px, 650px) tuned to
CSS Grid sidebar+canvas layout. Do not standardize to theme breakpoints.
------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.konfigurator-main {
grid-template-columns: clamp(240px, 28vw, 300px) 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"settings tabs"
"settings canvas";
}
.konfigurator-panel-wrapper:has(.konfigurator-settings) {
grid-area: settings;
}
.konfigurator-tab-bar {
display: flex;
grid-area: tabs;
align-self: end;
}
.konfigurator-panel-wrapper:has(.konfigurator-2d),
.konfigurator-panel-wrapper:has(.konfigurator-3d) {
grid-area: canvas;
}
.konfigurator-panel-wrapper:has(.konfigurator-2d):not(.tab-active),
.konfigurator-panel-wrapper:has(.konfigurator-3d):not(.tab-active) {
display: none;
}
.konfigurator-panel-wrapper:has(.konfigurator-2d) > .konfigurator-panel-title,
.konfigurator-panel-wrapper:has(.konfigurator-3d) > .konfigurator-panel-title {
display: none;
}
.konfigurator-canvas-container {
max-height: 450px;
}
}
@media (max-width: 850px) {
.konfigurator-main {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"settings"
"tabs"
"canvas";
}
}
@media (max-width: 650px) {
.konfigurator-main {
gap: var(--space-md, 16px);
}
.konfigurator-canvas-container {
max-height: 400px;
}
.konfigurator-panel {
padding: var(--space-md, 16px);
}
.konfigurator-tab {
padding: 8px 12px;
font-size: 0.8125rem;
}
}