{"id":2643,"date":"2026-02-12T17:19:33","date_gmt":"2026-02-12T19:19:33","guid":{"rendered":"https:\/\/nea.codes\/?page_id=2643"},"modified":"2026-02-12T17:24:43","modified_gmt":"2026-02-12T19:24:43","slug":"design-preview","status":"publish","type":"page","link":"https:\/\/nea.codes\/lv\/design-preview\/","title":{"rendered":"design-preview"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n E-lekcijas Design System<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n \/* Accent Colors - consistent across themes *\/\n --accent-red: #cd5454;\n --accent-blue: #5454ff;\n \n \/* Gradients *\/\n --gradient-primary: linear-gradient(135deg, #cd5454 0%, #5454ff 100%);\n --gradient-red: linear-gradient(135deg, #cd5454 0%, #e57373 100%);\n --gradient-blue: linear-gradient(135deg, #5454ff 0%, #7c7cff 100%);\n \n \/* Transitions *\/\n --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n \n \/* Spacing *\/\n --space-xs: 4px;\n --space-sm: 8px;\n --space-md: 16px;\n --space-lg: 24px;\n --space-xl: 32px;\n --space-2xl: 48px;\n \n \/* Border Radius *\/\n --radius-sm: 12px;\n --radius-md: 20px;\n --radius-lg: 28px;\n --radius-xl: 36px;\n }\n\n \/* DARK THEME (default) *\/\n [data-theme=\"dark\"] {\n --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\n --bg-secondary: #1a1a2e;\n \n --glass-bg: rgba(255, 255, 255, 0.08);\n --glass-border: rgba(255, 255, 255, 0.18);\n --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n \n --text-primary: rgba(255, 255, 255, 0.95);\n --text-secondary: rgba(255, 255, 255, 0.7);\n --text-muted: rgba(255, 255, 255, 0.5);\n \n --input-bg: rgba(0, 0, 0, 0.3);\n --input-border: rgba(255, 255, 255, 0.2);\n --input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);\n \n --card-bg: rgba(255, 255, 255, 0.05);\n --hover-bg: rgba(255, 255, 255, 0.12);\n \n --skeleton-base: rgba(255, 255, 255, 0.05);\n --skeleton-highlight: rgba(255, 255, 255, 0.1);\n \n --overlay-bg: rgba(0, 0, 0, 0.7);\n \n --nav-bg: rgba(26, 26, 46, 0.8);\n }\n\n \/* LIGHT THEME *\/\n [data-theme=\"light\"] {\n --bg-primary: #e5e8f3;\n --bg-secondary: #d1d8e8;\n \n --glass-bg: rgba(255, 255, 255, 0.6);\n --glass-border: rgba(255, 255, 255, 0.8);\n --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);\n \n --text-primary: #1a1a2e;\n --text-secondary: #4a4a6a;\n --text-muted: #7a7a9a;\n \n --input-bg: rgba(255, 255, 255, 0.8);\n --input-border: rgba(0, 0, 0, 0.1);\n --input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);\n \n --card-bg: rgba(255, 255, 255, 0.7);\n --hover-bg: rgba(255, 255, 255, 0.9);\n \n --skeleton-base: rgba(0, 0, 0, 0.05);\n --skeleton-highlight: rgba(0, 0, 0, 0.1);\n \n --overlay-bg: rgba(26, 26, 46, 0.5);\n \n --nav-bg: rgba(229, 232, 243, 0.8);\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: var(--bg-primary);\n min-height: 100vh;\n color: var(--text-primary);\n line-height: 1.6;\n padding: 40px 20px;\n transition: background var(--transition-slow), color var(--transition-base);\n }\n\n .container {\n max-width: 1400px;\n margin: 0 auto;\n }\n\n h1 {\n font-size: 3rem;\n font-weight: 700;\n margin-bottom: var(--space-xl);\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n h2 {\n font-size: 1.5rem;\n margin: var(--space-2xl) 0 var(--space-lg);\n color: var(--text-primary);\n font-weight: 600;\n }\n\n h3, h4 {\n color: var(--text-primary);\n }\n\n p {\n color: var(--text-secondary);\n }\n\n .section {\n margin-bottom: var(--space-2xl);\n }\n\n \/* THEME TOGGLE BUTTON *\/\n .theme-toggle {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 1001;\n width: 60px;\n height: 32px;\n background: var(--glass-bg);\n backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 4px;\n box-shadow: var(--glass-shadow);\n transition: all var(--transition-base);\n }\n\n .theme-toggle:hover {\n transform: scale(1.05);\n box-shadow: 0 12px 40px rgba(84, 84, 255, 0.2);\n }\n\n .theme-toggle-slider {\n width: 24px;\n height: 24px;\n background: var(--gradient-primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--transition-base);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n font-size: 14px;\n }\n\n [data-theme=\"dark\"] .theme-toggle-slider {\n transform: translateX(0);\n }\n\n [data-theme=\"light\"] .theme-toggle-slider {\n transform: translateX(28px);\n }\n\n .theme-icon {\n filter: brightness(0) invert(1);\n }\n\n \/* BENTO GRID *\/\n .bento-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: var(--space-lg);\n margin-bottom: var(--space-xl);\n }\n\n .bento-item {\n background: var(--glass-bg);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n padding: var(--space-xl);\n box-shadow: var(--glass-shadow);\n transition: all var(--transition-base);\n position: relative;\n overflow: hidden;\n }\n\n .bento-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n }\n\n [data-theme=\"light\"] .bento-item::before {\n background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);\n }\n\n .bento-item:hover {\n transform: translateY(-4px) scale(1.01);\n box-shadow: 0 20px 60px rgba(31, 38, 135, 0.4);\n border-color: var(--accent-blue);\n background: var(--hover-bg);\n }\n\n [data-theme=\"light\"] .bento-item:hover {\n box-shadow: 0 20px 60px rgba(31, 38, 135, 0.15);\n }\n\n .bento-item.large {\n grid-column: span 2;\n }\n\n .bento-item.small {\n grid-column: span 1;\n }\n\n \/* CARDS *\/\n .card {\n background: var(--glass-bg);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-md);\n padding: var(--space-lg);\n box-shadow: var(--glass-shadow);\n transition: all var(--transition-base);\n position: relative;\n }\n\n .card::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--radius-md);\n padding: 1px;\n background: var(--gradient-primary);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0;\n transition: opacity var(--transition-base);\n }\n\n .card:hover::after {\n opacity: 1;\n }\n\n .card:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(84, 84, 255, 0.3);\n background: var(--hover-bg);\n }\n\n [data-theme=\"light\"] .card:hover {\n box-shadow: 0 12px 40px rgba(84, 84, 255, 0.15);\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n margin-bottom: var(--space-md);\n }\n\n .card-icon {\n width: 48px;\n height: 48px;\n background: var(--gradient-primary);\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.3);\n }\n\n \/* BUTTONS *\/\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: 14px 28px;\n border: none;\n border-radius: var(--radius-sm);\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--transition-base);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n }\n\n .btn-primary {\n background: var(--gradient-primary);\n color: white;\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.4), \n inset 0 1px 0 rgba(255,255,255,0.2);\n }\n\n [data-theme=\"light\"] .btn-primary {\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.3), \n inset 0 1px 0 rgba(255,255,255,0.3);\n }\n\n .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n transition: left 0.5s;\n }\n\n .btn-primary:hover::before {\n left: 100%;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(205, 84, 84, 0.5), \n inset 0 1px 0 rgba(255,255,255,0.3);\n }\n\n [data-theme=\"light\"] .btn-primary:hover {\n box-shadow: 0 8px 25px rgba(205, 84, 84, 0.4);\n }\n\n .btn-primary:active {\n transform: translateY(0);\n box-shadow: 0 2px 10px rgba(205, 84, 84, 0.4);\n }\n\n .btn-secondary {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n color: var(--text-primary);\n border: 1px solid var(--glass-border);\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);\n }\n\n .btn-secondary:hover {\n background: var(--hover-bg);\n border-color: var(--accent-blue);\n transform: translateY(-2px);\n }\n\n .btn-secondary:active {\n transform: translateY(0);\n }\n\n .btn-ghost {\n background: transparent;\n color: var(--text-primary);\n border: 1px solid transparent;\n }\n\n .btn-ghost:hover {\n background: var(--glass-bg);\n border-color: var(--glass-border);\n }\n\n .btn-gradient-red {\n background: var(--gradient-red);\n color: white;\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.4);\n }\n\n .btn-gradient-blue {\n background: var(--gradient-blue);\n color: white;\n box-shadow: 0 4px 15px rgba(84, 84, 255, 0.4);\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none !important;\n }\n\n \/* FORM ELEMENTS *\/\n .form-group {\n margin-bottom: var(--space-lg);\n }\n\n .form-label {\n display: block;\n margin-bottom: var(--space-sm);\n color: var(--text-secondary);\n font-size: 0.875rem;\n font-weight: 500;\n transition: color var(--transition-fast);\n }\n\n .form-input {\n width: 100%;\n padding: 14px 18px;\n background: var(--input-bg);\n border: 1px solid var(--input-border);\n border-radius: var(--radius-sm);\n color: var(--text-primary);\n font-size: 1rem;\n transition: all var(--transition-base);\n backdrop-filter: blur(10px);\n box-shadow: var(--input-shadow);\n }\n\n .form-input::placeholder {\n color: var(--text-muted);\n }\n\n .form-input:hover {\n border-color: var(--accent-blue);\n background: var(--hover-bg);\n }\n\n .form-input:focus {\n outline: none;\n border-color: var(--accent-blue);\n box-shadow: 0 0 0 3px rgba(84, 84, 255, 0.2),\n var(--input-shadow);\n background: var(--hover-bg);\n }\n\n .form-input:focus + .form-label,\n .form-group:focus-within .form-label {\n color: var(--accent-blue);\n }\n\n .form-input.error {\n border-color: var(--accent-red);\n box-shadow: 0 0 0 3px rgba(205, 84, 84, 0.2);\n }\n\n .form-input.success {\n border-color: #4caf50;\n box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);\n }\n\n \/* Custom Select *\/\n .select-wrapper {\n position: relative;\n }\n\n .select-wrapper::after {\n content: '\u25bc';\n position: absolute;\n right: 18px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-muted);\n font-size: 0.75rem;\n pointer-events: none;\n transition: transform var(--transition-fast);\n }\n\n .select-wrapper:focus-within::after {\n transform: translateY(-50%) rotate(180deg);\n color: var(--accent-blue);\n }\n\n .form-select {\n appearance: none;\n cursor: pointer;\n }\n\n \/* Textarea *\/\n .form-textarea {\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n }\n\n \/* Checkbox & Radio *\/\n .checkbox-wrapper,\n .radio-wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n padding: var(--space-sm) 0;\n }\n\n .checkbox-input,\n .radio-input {\n appearance: none;\n width: 22px;\n height: 22px;\n border: 2px solid var(--input-border);\n border-radius: 6px;\n background: var(--input-bg);\n cursor: pointer;\n position: relative;\n transition: all var(--transition-fast);\n box-shadow: var(--input-shadow);\n }\n\n .radio-input {\n border-radius: 50%;\n }\n\n .checkbox-input:hover,\n .radio-input:hover {\n border-color: var(--accent-blue);\n }\n\n .checkbox-input:checked {\n background: var(--gradient-primary);\n border-color: transparent;\n }\n\n .radio-input:checked {\n background: var(--accent-blue);\n border-color: var(--accent-blue);\n }\n\n .checkbox-input:checked::after {\n content: '\u2713';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: 14px;\n font-weight: bold;\n }\n\n .radio-input:checked::after {\n content: '';\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .checkbox-label,\n .radio-label {\n color: var(--text-primary);\n font-size: 0.95rem;\n user-select: none;\n }\n\n \/* Toggle Switch *\/\n .toggle-wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n }\n\n .toggle-input {\n appearance: none;\n width: 52px;\n height: 28px;\n background: var(--input-bg);\n border-radius: 14px;\n position: relative;\n cursor: pointer;\n transition: all var(--transition-base);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\n border: 1px solid var(--input-border);\n }\n\n .toggle-input::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 22px;\n height: 22px;\n background: white;\n border-radius: 50%;\n transition: all var(--transition-base);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n .toggle-input:checked {\n background: var(--gradient-primary);\n border-color: transparent;\n }\n\n .toggle-input:checked::after {\n left: 26px;\n }\n\n \/* NAVIGATION *\/\n .nav-glass {\n background: var(--nav-bg);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--glass-border);\n padding: var(--space-md) var(--space-xl);\n position: sticky;\n top: 0;\n z-index: 100;\n border-radius: 0 0 var(--radius-md) var(--radius-md);\n margin: -40px -20px 40px;\n transition: background var(--transition-slow);\n }\n\n .nav-content {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .nav-logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .nav-links {\n display: flex;\n gap: var(--space-xl);\n list-style: none;\n }\n\n .nav-link {\n color: var(--text-secondary);\n text-decoration: none;\n font-weight: 500;\n transition: all var(--transition-fast);\n position: relative;\n padding: var(--space-sm) 0;\n }\n\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--gradient-primary);\n transition: width var(--transition-base);\n }\n\n .nav-link:hover {\n color: var(--text-primary);\n }\n\n .nav-link:hover::after {\n width: 100%;\n }\n\n .nav-link.active {\n color: var(--text-primary);\n }\n\n .nav-link.active::after {\n width: 100%;\n }\n\n \/* COURSE CARD SPECIFIC *\/\n .course-card {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .course-image {\n width: 100%;\n height: 180px;\n background: linear-gradient(135deg, rgba(205, 84, 84, 0.1) 0%, rgba(84, 84, 255, 0.1) 100%);\n border-radius: var(--radius-sm);\n margin-bottom: var(--space-md);\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n border: 1px solid var(--glass-border);\n }\n\n .course-badge {\n position: absolute;\n top: var(--space-sm);\n right: var(--space-sm);\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n padding: var(--space-xs) var(--space-md);\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid var(--glass-border);\n color: var(--text-primary);\n }\n\n .course-title {\n font-size: 1.25rem;\n font-weight: 600;\n margin-bottom: var(--space-sm);\n color: var(--text-primary);\n }\n\n .course-meta {\n display: flex;\n gap: var(--space-md);\n color: var(--text-secondary);\n font-size: 0.875rem;\n margin-bottom: var(--space-md);\n }\n\n .course-price {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-top: auto;\n }\n\n \/* PROGRESS BAR *\/\n .progress-container {\n background: var(--input-bg);\n border-radius: 10px;\n height: 8px;\n overflow: hidden;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n border: 1px solid var(--input-border);\n }\n\n .progress-bar {\n height: 100%;\n background: var(--gradient-primary);\n border-radius: 10px;\n transition: width var(--transition-slow);\n position: relative;\n overflow: hidden;\n }\n\n .progress-bar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n animation: shimmer 2s infinite;\n }\n\n @keyframes shimmer {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n \/* TAGS *\/\n .tag {\n display: inline-flex;\n align-items: center;\n padding: 6px 14px;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n font-size: 0.875rem;\n color: var(--text-primary);\n transition: all var(--transition-fast);\n cursor: pointer;\n backdrop-filter: blur(10px);\n }\n\n .tag:hover {\n background: var(--hover-bg);\n transform: translateY(-1px);\n border-color: var(--accent-blue);\n }\n\n .tag.active {\n background: var(--gradient-primary);\n border-color: transparent;\n color: white;\n }\n\n \/* MODAL\/OVERLAY *\/\n .modal-overlay {\n position: fixed;\n inset: 0;\n background: var(--overlay-bg);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: all var(--transition-base);\n z-index: 1000;\n }\n\n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .modal-content {\n background: var(--glass-bg);\n backdrop-filter: blur(30px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n padding: var(--space-2xl);\n max-width: 500px;\n width: 90%;\n transform: scale(0.9) translateY(20px);\n transition: all var(--transition-base);\n box-shadow: var(--glass-shadow);\n color: var(--text-primary);\n }\n\n .modal-overlay.active .modal-content {\n transform: scale(1) translateY(0);\n }\n\n \/* SEARCH BAR *\/\n .search-container {\n position: relative;\n max-width: 400px;\n }\n\n .search-input {\n width: 100%;\n padding: 14px 20px 14px 48px;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-xl);\n color: var(--text-primary);\n font-size: 1rem;\n transition: all var(--transition-base);\n backdrop-filter: blur(10px);\n }\n\n .search-input:focus {\n outline: none;\n border-color: var(--accent-blue);\n box-shadow: 0 0 0 3px rgba(84, 84, 255, 0.2);\n background: var(--hover-bg);\n }\n\n .search-icon {\n position: absolute;\n left: 18px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-muted);\n transition: color var(--transition-fast);\n }\n\n .search-input:focus + .search-icon {\n color: var(--accent-blue);\n }\n\n \/* LOADING STATES *\/\n .skeleton {\n background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);\n background-size: 200% 100%;\n animation: loading 1.5s infinite;\n border-radius: var(--radius-sm);\n }\n\n @keyframes loading {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n \/* TOOLTIP *\/\n .tooltip {\n position: relative;\n }\n\n .tooltip::before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-8px);\n padding: var(--space-sm) var(--space-md);\n background: var(--text-primary);\n color: var(--bg-secondary);\n font-size: 0.875rem;\n border-radius: var(--radius-sm);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition: all var(--transition-fast);\n pointer-events: none;\n font-weight: 500;\n }\n\n [data-theme=\"light\"] .tooltip::before {\n background: var(--text-primary);\n color: white;\n }\n\n .tooltip:hover::before {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(-4px);\n }\n\n \/* DIVIDER *\/\n .divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--glass-border), transparent);\n margin: var(--space-xl) 0;\n }\n\n \/* ALERTS *\/\n .alert {\n padding: var(--space-md) var(--space-lg);\n border-radius: var(--radius-sm);\n border: 1px solid;\n margin-bottom: var(--space-md);\n display: flex;\n align-items: center;\n gap: var(--space-md);\n backdrop-filter: blur(10px);\n }\n\n .alert-info {\n background: rgba(84, 84, 255, 0.1);\n border-color: rgba(84, 84, 255, 0.3);\n color: var(--accent-blue);\n }\n\n [data-theme=\"light\"] .alert-info {\n background: rgba(84, 84, 255, 0.05);\n }\n\n .alert-success {\n background: rgba(76, 175, 80, 0.1);\n border-color: rgba(76, 175, 80, 0.3);\n color: #4caf50;\n }\n\n .alert-warning {\n background: rgba(255, 152, 0, 0.1);\n border-color: rgba(255, 152, 0, 0.3);\n color: #ff9800;\n }\n\n .alert-error {\n background: rgba(205, 84, 84, 0.1);\n border-color: rgba(205, 84, 84, 0.3);\n color: var(--accent-red);\n }\n\n \/* DEMO GRID *\/\n .demo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: var(--space-lg);\n }\n\n .demo-item {\n padding: var(--space-lg);\n }\n\n \/* RESPONSIVE *\/\n @media (max-width: 768px) {\n .bento-item.large {\n grid-column: span 1;\n }\n \n .nav-links {\n display: none;\n }\n \n h1 {\n font-size: 2rem;\n }\n\n .theme-toggle {\n top: 10px;\n right: 10px;\n }\n }\n\n \/* FOCUS VISIBLE \u0434\u043b\u044f accessibility *\/\n *:focus-visible {\n outline: 2px solid var(--accent-blue);\n outline-offset: 2px;\n }\n\n button:focus-visible,\n a:focus-visible {\n outline: 2px solid var(--accent-blue);\n outline-offset: 4px;\n }\n\n \/* Smooth theme transition for all elements *\/\n *, *::before, *::after {\n transition: background-color var(--transition-base),\n border-color var(--transition-base),\n color var(--transition-base),\n box-shadow var(--transition-base);\n }\n <\/style>\n<\/head>\n<body>\n <!-- Theme Toggle -->\n <button class=\"theme-toggle\" id=\"themeToggle\" aria-label=\"P\u0101rsl\u0113gt t\u0113mu\">\n <div class=\"theme-toggle-slider\">\n <span id=\"themeIcon\">\ud83c\udf19<\/span>\n <\/div>\n <\/button>\n\n <!-- Navigation -->\n <nav class=\"nav-glass\">\n <div class=\"nav-content\">\n <div class=\"nav-logo\">E-lekcijas.lv<\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Kursi<\/a><\/li>\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Par mums<\/a><\/li>\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">K\u0101 tas darbojas<\/a><\/li>\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Kontakti<\/a><\/li>\n <\/ul>\n <button class=\"btn btn-secondary\" style=\"padding: 10px 20px; font-size: 0.875rem;\">Ien\u0101kt<\/button>\n <\/div>\n <\/nav>\n\n <div class=\"container\">\n <h1>Design System<\/h1>\n\n <!-- Bento Grid Section -->\n <div class=\"section\">\n <h2>Bento Grid Layout<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item large\">\n <h3 style=\"font-size: 1.5rem; margin-bottom: var(--space-md);\">Featured Course<\/h3>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-lg);\">Complete endocrinology program for medical professionals seeking certification.<\/p>\n <div style=\"display: flex; gap: var(--space-md);\">\n <button class=\"btn btn-primary\">Uzzin\u0101t vair\u0101k<\/button>\n <button class=\"btn btn-secondary\">Skat\u012bties preview<\/button>\n <\/div>\n <\/div>\n <div class=\"bento-item small\">\n <div class=\"card-icon\" style=\"margin-bottom: var(--space-md);\">\ud83d\udcca<\/div>\n <h4 style=\"margin-bottom: var(--space-sm); color: var(--text-primary);\">Progress<\/h4>\n <div class=\"progress-container\" style=\"margin-bottom: var(--space-sm);\">\n <div class=\"progress-bar\" style=\"width: 75%;\"><\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.875rem;\">75% completed<\/p>\n <\/div>\n <div class=\"bento-item small\">\n <div style=\"font-size: 2.5rem; margin-bottom: var(--space-sm);\">\ud83c\udfc6<\/div>\n <h4 style=\"color: var(--accent-red);\">12<\/h4>\n <p style=\"color: var(--text-secondary);\">Sertifik\u0101ti ieg\u016bti<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Buttons Section -->\n <div class=\"section\">\n <h2>Buttons<\/h2>\n <div class=\"demo-grid\">\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Primary<\/h4>\n <button class=\"btn btn-primary\">Maks\u0101t \u20ac299<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Secondary<\/h4>\n <button class=\"btn btn-secondary\">Saglab\u0101t<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Ghost<\/h4>\n <button class=\"btn btn-ghost\">Atcelt<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Gradient Red<\/h4>\n <button class=\"btn btn-gradient-red\">Dz\u0113st<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Gradient Blue<\/h4>\n <button class=\"btn btn-gradient-blue\">Lejupiel\u0101d\u0113t<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Disabled<\/h4>\n <button class=\"btn btn-primary\" disabled>Apstr\u0101d\u0101...<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Form Elements -->\n <div class=\"section\">\n <h2>Form Elements<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Text Inputs<\/h4>\n <div class=\"form-group\">\n <label class=\"form-label\">V\u0101rds<\/label>\n <input type=\"text\" class=\"form-input\" placeholder=\"Ievadiet v\u0101rdu\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">E-pasts<\/label>\n <input type=\"email\" class=\"form-input\" placeholder=\"verts@example.com\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Parole<\/label>\n <input type=\"password\" class=\"form-input\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <\/div>\n \n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">States<\/h4>\n <div class=\"form-group\">\n <label class=\"form-label\">Error state<\/label>\n <input type=\"text\" class=\"form-input error\" value=\"invalid-email\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Success state<\/label>\n <input type=\"text\" class=\"form-input success\" value=\"valid@email.com\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Disabled<\/label>\n <input type=\"text\" class=\"form-input\" disabled value=\"Nevar redi\u0123\u0113t\">\n <\/div>\n <\/div>\n\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Select & Textarea<\/h4>\n <div class=\"form-group\">\n <label class=\"form-label\">Specialit\u0101te<\/label>\n <div class=\"select-wrapper\">\n <select class=\"form-input form-select\">\n <option>Endokrinolo\u0123ija<\/option>\n <option>Kardiolo\u0123ija<\/option>\n <option>Neirologija<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Zi\u0146ojums<\/label>\n <textarea class=\"form-input form-textarea\" placeholder=\"J\u016bsu zi\u0146ojums...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Checkboxes & Radios -->\n <div class=\"section\">\n <h2>Checkboxes, Radios & Toggles<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Checkboxes<\/h4>\n <label class=\"checkbox-wrapper\">\n <input type=\"checkbox\" class=\"checkbox-input\" checked>\n <span class=\"checkbox-label\">Piekr\u012btu noteikumiem<\/span>\n <\/label>\n <label class=\"checkbox-wrapper\">\n <input type=\"checkbox\" class=\"checkbox-input\">\n <span class=\"checkbox-label\">Sa\u0146emt jaunumus<\/span>\n <\/label>\n <\/div>\n \n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Radio Buttons<\/h4>\n <label class=\"radio-wrapper\">\n <input type=\"radio\" name=\"payment\" class=\"radio-input\" checked>\n <span class=\"radio-label\">Stripe<\/span>\n <\/label>\n <label class=\"radio-wrapper\">\n <input type=\"radio\" name=\"payment\" class=\"radio-input\">\n <span class=\"radio-label\">Mollie<\/span>\n <\/label>\n <\/div>\n\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Toggle Switch<\/h4>\n <label class=\"toggle-wrapper\">\n <input type=\"checkbox\" class=\"toggle-input\" checked>\n <span class=\"checkbox-label\">Autom\u0101tiskie atg\u0101din\u0101jumi<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Course Cards -->\n <div class=\"section\">\n <h2>Course Cards<\/h2>\n <div class=\"bento-grid\">\n <div class=\"card course-card\">\n <div class=\"course-image\">\ud83c\udfa5\n <span class=\"course-badge\">Jauns<\/span>\n <\/div>\n <h3 class=\"course-title\">Endokrinolo\u0123ijas pamati<\/h3>\n <div class=\"course-meta\">\n <span>\u23f1 12h<\/span>\n <span>\ud83d\udcda 8 nodarb\u012bbas<\/span>\n <span>\ud83c\udfaf Ies\u0101c\u0113jiem<\/span>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 0.9rem;\">Pamatzin\u0101\u0161anas par endokr\u012bno sist\u0113mu un slim\u012bb\u0101m.<\/p>\n <div class=\"course-price\">\u20ac149<\/div>\n <\/div>\n\n <div class=\"card course-card\">\n <div class=\"course-image\" style=\"background: linear-gradient(135deg, rgba(205, 84, 84, 0.1) 0%, rgba(84, 84, 255, 0.1) 100%);\">\ud83c\udfa5\n <span class=\"course-badge\" style=\"background: var(--gradient-red); color: white; border: none;\">Popul\u0101rs<\/span>\n <\/div>\n <h3 class=\"course-title\">Diab\u0113ta mened\u017ements<\/h3>\n <div class=\"course-meta\">\n <span>\u23f1 24h<\/span>\n <span>\ud83d\udcda 15 nodarb\u012bbas<\/span>\n <span>\ud83c\udfaf Vid\u0113js<\/span>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 0.9rem;\">Padzi\u013cin\u0101ts kurss par 1. un 2. tipa diab\u0113tu.<\/p>\n <div class=\"course-price\">\u20ac299<\/div>\n <\/div>\n\n <div class=\"card course-card\">\n <div class=\"course-image\">\ud83c\udfa5\n <span class=\"course-badge\">Dr\u012bzum\u0101<\/span>\n <\/div>\n <h3 class=\"course-title\">Vairogdziedzera \u0137irur\u0123ija<\/h3>\n <div class=\"course-meta\">\n <span>\u23f1 18h<\/span>\n <span>\ud83d\udcda 12 nodarb\u012bbas<\/span>\n <span>\ud83c\udfaf Ekspertiem<\/span>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 0.9rem;\">Operat\u012bv\u0101s tehnikas un postoperat\u012bv\u0101 apr\u016bpe.<\/p>\n <div class=\"course-price\">\u20ac399<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Tags & Search -->\n <div class=\"section\">\n <h2>Tags & Search<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Filter Tags<\/h4>\n <div style=\"display: flex; flex-wrap: wrap; gap: var(--space-sm);\">\n <span class=\"tag active\">Visi<\/span>\n <span class=\"tag\">Endokrinolo\u0123ija<\/span>\n <span class=\"tag\">Kardiolo\u0123ija<\/span>\n <span class=\"tag\">Neirologija<\/span>\n <span class=\"tag\">Ies\u0101c\u0113jiem<\/span>\n <span class=\"tag\">Vid\u0113js<\/span>\n <span class=\"tag\">Ekspertiem<\/span>\n <\/div>\n <\/div>\n \n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Search<\/h4>\n <div class=\"search-container\">\n <span class=\"search-icon\">\ud83d\udd0d<\/span>\n <input type=\"text\" class=\"search-input\" placeholder=\"Mekl\u0113t kursus...\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Alerts -->\n <div class=\"section\">\n <h2>Alerts<\/h2>\n <div class=\"alert alert-info\">\n <span>\u2139\ufe0f<\/span>\n <span>Jauns kurss pieejams no n\u0101kam\u0101s ned\u0113\u013cas!<\/span>\n <\/div>\n <div class=\"alert alert-success\">\n <span>\u2713<\/span>\n <span>Maks\u0101jums veiksm\u012bgi apstr\u0101d\u0101ts. Piek\u013cuve atv\u0113rta.<\/span>\n <\/div>\n <div class=\"alert alert-warning\">\n <span>\u26a0<\/span>\n <span>Sertifik\u0101ts j\u0101atjauno l\u012bdz 31.12.2025.<\/span>\n <\/div>\n <div class=\"alert alert-error\">\n <span>\u2715<\/span>\n <span>K\u013c\u016bda apstr\u0101d\u0101jot maks\u0101jumu. L\u016bdzu, m\u0113\u0123iniet v\u0113lreiz.<\/span>\n <\/div>\n <\/div>\n\n <!-- Modal Demo -->\n <div class=\"section\">\n <h2>Modal<\/h2>\n <button class=\"btn btn-primary\" onclick=\"document.getElementById('demoModal').classList.add('active')\">Atv\u0113rt mod\u0101lo logu<\/button>\n <\/div>\n\n <div class=\"divider\"><\/div>\n\n <div style=\"text-align: center; color: var(--text-secondary); padding: var(--space-xl);\">\n <p>E-lekcijas.lv Design System 2026<\/p>\n <\/div>\n <\/div>\n\n <!-- Modal -->\n <div id=\"demoModal\" class=\"modal-overlay\" onclick=\"if(event.target === this) this.classList.remove('active')\">\n <div class=\"modal-content\">\n <h3 style=\"margin-bottom: var(--space-md); color: var(--text-primary);\">Apstiprin\u0101t maks\u0101jumu<\/h3>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-lg);\">Vai tie\u0161\u0101m v\u0113laties ieg\u0101d\u0101ties kursu \"Endokrinolo\u0123ijas pamati\" par \u20ac149?<\/p>\n <div style=\"display: flex; gap: var(--space-md); justify-content: flex-end;\">\n <button class=\"btn btn-secondary\" onclick=\"document.getElementById('demoModal').classList.remove('active')\">Atcelt<\/button>\n <button class=\"btn btn-primary\" onclick=\"document.getElementById('demoModal').classList.remove('active')\">Apstiprin\u0101t<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n\/\/ Theme Toggle Functionality\nconst themeToggle = document.getElementById('themeToggle');\nconst themeIcon = document.getElementById('themeIcon');\nconst html = document.documentElement;\n\n\/\/ Check for saved theme preference or default to LIGHT\nconst currentTheme = localStorage.getItem('theme') || 'light';\nhtml.setAttribute('data-theme', currentTheme);\nupdateThemeIcon(currentTheme);\n\nthemeToggle.addEventListener('click', () => {\n const currentTheme = html.getAttribute('data-theme');\n const newTheme = currentTheme === 'light' ? 'dark' : 'light';\n \n html.setAttribute('data-theme', newTheme);\n localStorage.setItem('theme', newTheme);\n updateThemeIcon(newTheme);\n});\n\nfunction updateThemeIcon(theme) {\n themeIcon.textContent = theme === 'light' ? '\u2600\ufe0f' : '\ud83c\udf19';\n}\n\n \/\/ Interactive states demonstration\n document.querySelectorAll('.tag').forEach(tag => {\n tag.addEventListener('click', function() {\n this.classList.toggle('active');\n });\n });\n\n \/\/ Form validation simulation\n document.querySelectorAll('.form-input').forEach(input => {\n input.addEventListener('blur', function() {\n if (this.value.includes('@') && this.value.includes('.')) {\n this.classList.remove('error');\n this.classList.add('success');\n } else if (this.value && this.type === 'email') {\n this.classList.remove('success');\n this.classList.add('error');\n }\n });\n });\n\n \/\/ Ripple effect for buttons\n document.querySelectorAll('.btn').forEach(button => {\n button.addEventListener('click', function(e) {\n const rect = this.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n const ripple = document.createElement('span');\n ripple.style.cssText = `\n position: absolute;\n background: rgba(255,255,255,0.3);\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 0.6s linear;\n pointer-events: none;\n width: 100px;\n height: 100px;\n left: ${x - 50}px;\n top: ${y - 50}px;\n `;\n \n this.style.position = 'relative';\n this.style.overflow = 'hidden';\n this.appendChild(ripple);\n \n setTimeout(() => ripple.remove(), 600);\n });\n });\n\n \/\/ Add ripple animation\n const style = document.createElement('style');\n style.textContent = `\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>E-lekcijas Design System \ud83c\udf19 E-lekcijas.lv Kursi Par mums K\u0101 tas darbojas Kontakti Ien\u0101kt Design System Bento Grid Layout Featured Course Complete endocrinology program for medical professionals seeking certification. Uzzin\u0101t vair\u0101k Skat\u012bties preview \ud83d\udcca Progress 75% completed \ud83c\udfc6 12 Sertifik\u0101ti ieg\u016bti Buttons Primary Maks\u0101t \u20ac299 Secondary Saglab\u0101t Ghost Atcelt Gradient Red Dz\u0113st Gradient Blue Lejupiel\u0101d\u0113t Disabled … <a title=\"design-preview\" class=\"read-more\" href=\"https:\/\/nea.codes\/lv\/design-preview\/\" aria-label=\"Read more about design-preview\">Las\u012bt t\u0101l\u0101k<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2643","page","type-page","status-publish"],"acf":[],"rankMath":{"parentDomain":"nea.codes","noFollowDomains":[],"noFollowExcludeDomains":[],"noFollowExternalLinks":false,"featuredImageNotice":"The featured image should be at least 200 by 200 pixels to be picked up by Facebook and other social media sites.","pluginReviewed":false,"postSettings":{"linkSuggestions":true,"useFocusKeyword":false},"frontEndScore":false,"postName":"design-preview","permalinkFormat":"https:\/\/nea.codes\/lv\/%pagename%\/","showLockModifiedDate":true,"assessor":{"focusKeywordLink":"https:\/\/nea.codes\/wp-admin\/edit.php?focus_keyword=%focus_keyword%&post_type=%post_type%","hasTOCPlugin":true,"primaryTaxonomy":false,"serpData":{"title":"","description":"","focusKeywords":"","pillarContent":false,"canonicalUrl":"","breadcrumbTitle":"","advancedRobots":{"max-snippet":"-1","max-video-preview":"-1","max-image-preview":"large"},"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":"","facebookHasOverlay":false,"facebookImageOverlay":"","facebookAuthor":"","twitterCardType":"","twitterUseFacebook":true,"twitterTitle":"","twitterDescription":"","twitterImage":"","twitterImageID":"","twitterHasOverlay":false,"twitterImageOverlay":"","twitterPlayerUrl":"","twitterPlayerSize":"","twitterPlayerStream":"","twitterPlayerStreamCtype":"","twitterAppDescription":"","twitterAppIphoneName":"","twitterAppIphoneID":"","twitterAppIphoneUrl":"","twitterAppIpadName":"","twitterAppIpadID":"","twitterAppIpadUrl":"","twitterAppGoogleplayName":"","twitterAppGoogleplayID":"","twitterAppGoogleplayUrl":"","twitterAppCountry":"","robots":{"index":true},"twitterAuthor":"username","primaryTerm":0,"authorName":"eugene.novikoff","titleTemplate":"%title% %sep% %sitename%","descriptionTemplate":"%excerpt%","showScoreFrontend":true,"lockModifiedDate":false},"powerWords":[],"diacritics":{"A":"[\\u0041\\u24B6\\uFF21\\u00C0\\u00C1\\u00C2\\u1EA6\\u1EA4\\u1EAA\\u1EA8\\u00C3\\u0100\\u0102\\u1EB0\\u1EAE\\u1EB4\\u1EB2\\u0226\\u01E0\\u00C4\\u01DE\\u1EA2\\u00C5\\u01FA\\u01CD\\u0200\\u0202\\u1EA0\\u1EAC\\u1EB6\\u1E00\\u0104\\u023A\\u2C6F]","AA":"[\\uA732]","AE":"[\\u00C6\\u01FC\\u01E2]","AO":"[\\uA734]","AU":"[\\uA736]","AV":"[\\uA738\\uA73A]","AY":"[\\uA73C]","B":"[\\u0042\\u24B7\\uFF22\\u1E02\\u1E04\\u1E06\\u0243\\u0182\\u0181]","C":"[\\u0043\\u24B8\\uFF23\\u0106\\u0108\\u010A\\u010C\\u00C7\\u1E08\\u0187\\u023B\\uA73E]","D":"[\\u0044\\u24B9\\uFF24\\u1E0A\\u010E\\u1E0C\\u1E10\\u1E12\\u1E0E\\u0110\\u018B\\u018A\\u0189\\uA779]","DZ":"[\\u01F1\\u01C4]","Dz":"[\\u01F2\\u01C5]","E":"[\\u0045\\u24BA\\uFF25\\u00C8\\u00C9\\u00CA\\u1EC0\\u1EBE\\u1EC4\\u1EC2\\u1EBC\\u0112\\u1E14\\u1E16\\u0114\\u0116\\u00CB\\u1EBA\\u011A\\u0204\\u0206\\u1EB8\\u1EC6\\u0228\\u1E1C\\u0118\\u1E18\\u1E1A\\u0190\\u018E]","F":"[\\u0046\\u24BB\\uFF26\\u1E1E\\u0191\\uA77B]","G":"[\\u0047\\u24BC\\uFF27\\u01F4\\u011C\\u1E20\\u011E\\u0120\\u01E6\\u0122\\u01E4\\u0193\\uA7A0\\uA77D\\uA77E]","H":"[\\u0048\\u24BD\\uFF28\\u0124\\u1E22\\u1E26\\u021E\\u1E24\\u1E28\\u1E2A\\u0126\\u2C67\\u2C75\\uA78D]","I":"[\\u0049\\u24BE\\uFF29\\u00CC\\u00CD\\u00CE\\u0128\\u012A\\u012C\\u0130\\u00CF\\u1E2E\\u1EC8\\u01CF\\u0208\\u020A\\u1ECA\\u012E\\u1E2C\\u0197]","J":"[\\u004A\\u24BF\\uFF2A\\u0134\\u0248]","K":"[\\u004B\\u24C0\\uFF2B\\u1E30\\u01E8\\u1E32\\u0136\\u1E34\\u0198\\u2C69\\uA740\\uA742\\uA744\\uA7A2]","L":"[\\u004C\\u24C1\\uFF2C\\u013F\\u0139\\u013D\\u1E36\\u1E38\\u013B\\u1E3C\\u1E3A\\u0141\\u023D\\u2C62\\u2C60\\uA748\\uA746\\uA780]","LJ":"[\\u01C7]","Lj":"[\\u01C8]","M":"[\\u004D\\u24C2\\uFF2D\\u1E3E\\u1E40\\u1E42\\u2C6E\\u019C]","N":"[\\u004E\\u24C3\\uFF2E\\u01F8\\u0143\\u00D1\\u1E44\\u0147\\u1E46\\u0145\\u1E4A\\u1E48\\u0220\\u019D\\uA790\\uA7A4]","NJ":"[\\u01CA]","Nj":"[\\u01CB]","O":"[\\u004F\\u24C4\\uFF2F\\u00D2\\u00D3\\u00D4\\u1ED2\\u1ED0\\u1ED6\\u1ED4\\u00D5\\u1E4C\\u022C\\u1E4E\\u014C\\u1E50\\u1E52\\u014E\\u022E\\u0230\\u00D6\\u022A\\u1ECE\\u0150\\u01D1\\u020C\\u020E\\u01A0\\u1EDC\\u1EDA\\u1EE0\\u1EDE\\u1EE2\\u1ECC\\u1ED8\\u01EA\\u01EC\\u00D8\\u01FE\\u0186\\u019F\\uA74A\\uA74C]","OI":"[\\u01A2]","OO":"[\\uA74E]","OU":"[\\u0222]","P":"[\\u0050\\u24C5\\uFF30\\u1E54\\u1E56\\u01A4\\u2C63\\uA750\\uA752\\uA754]","Q":"[\\u0051\\u24C6\\uFF31\\uA756\\uA758\\u024A]","R":"[\\u0052\\u24C7\\uFF32\\u0154\\u1E58\\u0158\\u0210\\u0212\\u1E5A\\u1E5C\\u0156\\u1E5E\\u024C\\u2C64\\uA75A\\uA7A6\\uA782]","S":"[\\u0053\\u24C8\\uFF33\\u1E9E\\u015A\\u1E64\\u015C\\u1E60\\u0160\\u1E66\\u1E62\\u1E68\\u0218\\u015E\\u2C7E\\uA7A8\\uA784]","T":"[\\u0054\\u24C9\\uFF34\\u1E6A\\u0164\\u1E6C\\u021A\\u0162\\u1E70\\u1E6E\\u0166\\u01AC\\u01AE\\u023E\\uA786]","TZ":"[\\uA728]","U":"[\\u0055\\u24CA\\uFF35\\u00D9\\u00DA\\u00DB\\u0168\\u1E78\\u016A\\u1E7A\\u016C\\u00DC\\u01DB\\u01D7\\u01D5\\u01D9\\u1EE6\\u016E\\u0170\\u01D3\\u0214\\u0216\\u01AF\\u1EEA\\u1EE8\\u1EEE\\u1EEC\\u1EF0\\u1EE4\\u1E72\\u0172\\u1E76\\u1E74\\u0244]","V":"[\\u0056\\u24CB\\uFF36\\u1E7C\\u1E7E\\u01B2\\uA75E\\u0245]","VY":"[\\uA760]","W":"[\\u0057\\u24CC\\uFF37\\u1E80\\u1E82\\u0174\\u1E86\\u1E84\\u1E88\\u2C72]","X":"[\\u0058\\u24CD\\uFF38\\u1E8A\\u1E8C]","Y":"[\\u0059\\u24CE\\uFF39\\u1EF2\\u00DD\\u0176\\u1EF8\\u0232\\u1E8E\\u0178\\u1EF6\\u1EF4\\u01B3\\u024E\\u1EFE]","Z":"[\\u005A\\u24CF\\uFF3A\\u0179\\u1E90\\u017B\\u017D\\u1E92\\u1E94\\u01B5\\u0224\\u2C7F\\u2C6B\\uA762]","a":"[\\u0061\\u24D0\\uFF41\\u1E9A\\u00E0\\u00E1\\u00E2\\u1EA7\\u1EA5\\u1EAB\\u1EA9\\u00E3\\u0101\\u0103\\u1EB1\\u1EAF\\u1EB5\\u1EB3\\u0227\\u01E1\\u00E4\\u01DF\\u1EA3\\u00E5\\u01FB\\u01CE\\u0201\\u0203\\u1EA1\\u1EAD\\u1EB7\\u1E01\\u0105\\u2C65\\u0250]","aa":"[\\uA733]","ae":"[\\u00E6\\u01FD\\u01E3]","ao":"[\\uA735]","au":"[\\uA737]","av":"[\\uA739\\uA73B]","ay":"[\\uA73D]","b":"[\\u0062\\u24D1\\uFF42\\u1E03\\u1E05\\u1E07\\u0180\\u0183\\u0253]","c":"[\\u0063\\u24D2\\uFF43\\u0107\\u0109\\u010B\\u010D\\u00E7\\u1E09\\u0188\\u023C\\uA73F\\u2184]","d":"[\\u0064\\u24D3\\uFF44\\u1E0B\\u010F\\u1E0D\\u1E11\\u1E13\\u1E0F\\u0111\\u018C\\u0256\\u0257\\uA77A]","dz":"[\\u01F3\\u01C6]","e":"[\\u0065\\u24D4\\uFF45\\u00E8\\u00E9\\u00EA\\u1EC1\\u1EBF\\u1EC5\\u1EC3\\u1EBD\\u0113\\u1E15\\u1E17\\u0115\\u0117\\u00EB\\u1EBB\\u011B\\u0205\\u0207\\u1EB9\\u1EC7\\u0229\\u1E1D\\u0119\\u1E19\\u1E1B\\u0247\\u025B\\u01DD]","f":"[\\u0066\\u24D5\\uFF46\\u1E1F\\u0192\\uA77C]","g":"[\\u0067\\u24D6\\uFF47\\u01F5\\u011D\\u1E21\\u011F\\u0121\\u01E7\\u0123\\u01E5\\u0260\\uA7A1\\u1D79\\uA77F]","h":"[\\u0068\\u24D7\\uFF48\\u0125\\u1E23\\u1E27\\u021F\\u1E25\\u1E29\\u1E2B\\u1E96\\u0127\\u2C68\\u2C76\\u0265]","hv":"[\\u0195]","i":"[\\u0069\\u24D8\\uFF49\\u00EC\\u00ED\\u00EE\\u0129\\u012B\\u012D\\u00EF\\u1E2F\\u1EC9\\u01D0\\u0209\\u020B\\u1ECB\\u012F\\u1E2D\\u0268\\u0131]","j":"[\\u006A\\u24D9\\uFF4A\\u0135\\u01F0\\u0249]","k":"[\\u006B\\u24DA\\uFF4B\\u1E31\\u01E9\\u1E33\\u0137\\u1E35\\u0199\\u2C6A\\uA741\\uA743\\uA745\\uA7A3]","l":"[\\u006C\\u24DB\\uFF4C\\u0140\\u013A\\u013E\\u1E37\\u1E39\\u013C\\u1E3D\\u1E3B\\u017F\\u0142\\u019A\\u026B\\u2C61\\uA749\\uA781\\uA747]","lj":"[\\u01C9]","m":"[\\u006D\\u24DC\\uFF4D\\u1E3F\\u1E41\\u1E43\\u0271\\u026F]","n":"[\\u006E\\u24DD\\uFF4E\\u01F9\\u0144\\u00F1\\u1E45\\u0148\\u1E47\\u0146\\u1E4B\\u1E49\\u019E\\u0272\\u0149\\uA791\\uA7A5]","nj":"[\\u01CC]","o":"[\\u006F\\u24DE\\uFF4F\\u00F2\\u00F3\\u00F4\\u1ED3\\u1ED1\\u1ED7\\u1ED5\\u00F5\\u1E4D\\u022D\\u1E4F\\u014D\\u1E51\\u1E53\\u014F\\u022F\\u0231\\u00F6\\u022B\\u1ECF\\u0151\\u01D2\\u020D\\u020F\\u01A1\\u1EDD\\u1EDB\\u1EE1\\u1EDF\\u1EE3\\u1ECD\\u1ED9\\u01EB\\u01ED\\u00F8\\u01FF\\u0254\\uA74B\\uA74D\\u0275]","oi":"[\\u01A3]","ou":"[\\u0223]","oo":"[\\uA74F]","p":"[\\u0070\\u24DF\\uFF50\\u1E55\\u1E57\\u01A5\\u1D7D\\uA751\\uA753\\uA755]","q":"[\\u0071\\u24E0\\uFF51\\u024B\\uA757\\uA759]","r":"[\\u0072\\u24E1\\uFF52\\u0155\\u1E59\\u0159\\u0211\\u0213\\u1E5B\\u1E5D\\u0157\\u1E5F\\u024D\\u027D\\uA75B\\uA7A7\\uA783]","s":"[\\u0073\\u24E2\\uFF53\\u015B\\u1E65\\u015D\\u1E61\\u0161\\u1E67\\u1E63\\u1E69\\u0219\\u015F\\u023F\\uA7A9\\uA785\\u1E9B]","ss":"[\\u00DF]","t":"[\\u0074\\u24E3\\uFF54\\u1E6B\\u1E97\\u0165\\u1E6D\\u021B\\u0163\\u1E71\\u1E6F\\u0167\\u01AD\\u0288\\u2C66\\uA787]","tz":"[\\uA729]","u":"[\\u0075\\u24E4\\uFF55\\u00F9\\u00FA\\u00FB\\u0169\\u1E79\\u016B\\u1E7B\\u016D\\u00FC\\u01DC\\u01D8\\u01D6\\u01DA\\u1EE7\\u016F\\u0171\\u01D4\\u0215\\u0217\\u01B0\\u1EEB\\u1EE9\\u1EEF\\u1EED\\u1EF1\\u1EE5\\u1E73\\u0173\\u1E77\\u1E75\\u0289]","v":"[\\u0076\\u24E5\\uFF56\\u1E7D\\u1E7F\\u028B\\uA75F\\u028C]","vy":"[\\uA761]","w":"[\\u0077\\u24E6\\uFF57\\u1E81\\u1E83\\u0175\\u1E87\\u1E85\\u1E98\\u1E89\\u2C73]","x":"[\\u0078\\u24E7\\uFF58\\u1E8B\\u1E8D]","y":"[\\u0079\\u24E8\\uFF59\\u1EF3\\u00FD\\u0177\\u1EF9\\u0233\\u1E8F\\u00FF\\u1EF7\\u1E99\\u1EF5\\u01B4\\u024F\\u1EFF]","z":"[\\u007A\\u24E9\\uFF5A\\u017A\\u1E91\\u017C\\u017E\\u1E93\\u1E95\\u01B6\\u0225\\u0240\\u2C6C\\uA763]"},"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasRedirection":false,"hasBreadcrumb":true},"homeUrl":"https:\/\/nea.codes\/lv","objectID":2643,"objectType":"post","locale":"lv","localeFull":"lv","overlayImages":{"play":{"name":"Play icon","url":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","path":"\/home\/u646275238\/domains\/nea.codes\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","position":"middle_center"},"gif":{"name":"GIF icon","url":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","path":"\/home\/u646275238\/domains\/nea.codes\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","position":"middle_center"}},"defautOgImage":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/social-placeholder.jpg","customPermalinks":true,"isUserRegistered":true,"autoSuggestKeywords":true,"connectSiteUrl":"https:\/\/rankmath.com\/auth?site=https%3A%2F%2Fnea.codes%2Flv&r=https%3A%2F%2Fnea.codes%2Flv%2Fwp-json%2Fwp%2Fv2%2Fpages%2F2643%3Fnonce%3D7089174d38&pro=1","maxTags":100,"trendsIcon":"<svg viewBox=\"0 0 610 610\"><path d=\"M18.85,446,174.32,290.48l58.08,58.08L76.93,504a14.54,14.54,0,0,1-20.55,0L18.83,466.48a14.54,14.54,0,0,1,0-20.55Z\" style=\"fill:#4285f4\"\/><path d=\"M242.65,242.66,377.59,377.6l-47.75,47.75a14.54,14.54,0,0,1-20.55,0L174.37,290.43l47.75-47.75A14.52,14.52,0,0,1,242.65,242.66Z\" style=\"fill:#ea4335\"\/><polygon points=\"319.53 319.53 479.26 159.8 537.34 217.88 377.61 377.62 319.53 319.53\" style=\"fill:#fabb05\"\/><path d=\"M594.26,262.73V118.61h0a16.94,16.94,0,0,0-16.94-16.94H433.2a16.94,16.94,0,0,0-12,28.92L565.34,274.71h0a16.94,16.94,0,0,0,28.92-12Z\" style=\"fill:#34a853\"\/><rect width=\"610\" height=\"610\" style=\"fill:none\"\/><\/svg>","showScore":true,"siteFavIcon":"https:\/\/nea.codes\/wp-content\/uploads\/2025\/01\/NEA-Favicon-512-150x150.png","canUser":{"general":false,"advanced":false,"snippet":false,"social":false,"analysis":false,"analytics":false,"content_ai":false},"isPro":true,"is_front_page":false,"trendsUpgradeLink":"https:\/\/rankmath.com\/pricing\/?utm_source=Plugin&utm_medium=CE%20General%20Tab%20Trends&utm_campaign=WP","trendsUpgradeLabel":"Upgrade","trendsPreviewImage":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/trends-preview.jpg","currentEditor":false,"homepageData":{"assessor":{"powerWords":[],"diacritics":true,"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasBreadcrumb":true,"serpData":{"title":"%sitename% %page% %sep% %sitedesc%","description":"","titleTemplate":"%sitename% %page% %sep% %sitedesc%","descriptionTemplate":"","focusKeywords":"","breadcrumbTitle":"Home","robots":{"index":true},"advancedRobots":{"max-snippet":"-1","max-video-preview":"-1","max-image-preview":"large"},"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":""}}},"isAnalyticsConnected":true,"tocTitle":"Table of Contents","tocExcludeHeadings":[],"listStyle":"ul"},"_links":{"self":[{"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/pages\/2643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/comments?post=2643"}],"version-history":[{"count":10,"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/pages\/2643\/revisions"}],"predecessor-version":[{"id":2653,"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/pages\/2643\/revisions\/2653"}],"wp:attachment":[{"href":"https:\/\/nea.codes\/lv\/wp-json\/wp\/v2\/media?parent=2643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}