.elementor-1402 .elementor-element.elementor-element-f49124f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1402 .elementor-element.elementor-element-aea64cb{--display:flex;}.elementor-1402 .elementor-element.elementor-element-2382ede{--display:flex;}.elementor-1402 .elementor-element.elementor-element-f36a0f1{--display:flex;}.elementor-1402 .elementor-element.elementor-element-2faeb7f{--display:flex;}.elementor-1402 .elementor-element.elementor-element-79772c2{--display:flex;}.elementor-1402 .elementor-element.elementor-element-7ac35e2{--display:flex;}.elementor-1402 .elementor-element.elementor-element-0fafd60{--display:flex;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1402 .elementor-element.elementor-element-f49124f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1402 .elementor-element.elementor-element-41142c9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-41142c9 *//* ============================================ iGettv Design System - Design Tokens ============================================ HOW TO USE: 1. WordPress Admin → Elementor → Custom Code 2. Add New → Name: "iGettv Design Tokens" 3. Location: 4. Paste this entire code 5. Save and Publish This file must be loaded BEFORE all other components. ============================================ */ /* Google Fonts - Inter */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ============================================ CSS CUSTOM PROPERTIES (Design Tokens) ============================================ */ :root { /* =================== COLOR SYSTEM =================== */ /* Primary - Actions, Links, Key Elements */ --ig-primary: #0066FF; --ig-primary-hover: #0052CC; --ig-primary-light: rgba(0, 102, 255, 0.12); --ig-primary-glow: rgba(0, 102, 255, 0.4); /* Secondary - Gradients, Highlights */ --ig-secondary: #00D4FF; --ig-secondary-light: rgba(0, 212, 255, 0.12); /* Accent - Badges, Urgency, Attention */ --ig-accent-yellow: #FFD600; --ig-accent-yellow-light: rgba(255, 214, 0, 0.12); /* Success - Trust, Confirmations, Checkmarks */ --ig-success: #00E676; --ig-success-light: rgba(0, 230, 118, 0.12); /* Warning & Error */ --ig-warning: #FF9500; --ig-error: #FF3B30; /* Backgrounds */ --ig-bg-primary: #000000; --ig-bg-surface: #0A0A0F; --ig-bg-surface-light: #141419; --ig-bg-surface-hover: #1A1A21; --ig-bg-elevated: #1E1E26; /* Text */ --ig-text-primary: #FFFFFF; --ig-text-secondary: #8A8A9A; --ig-text-tertiary: #5C5C6D; --ig-text-disabled: #3A3A45; /* Borders */ --ig-border: rgba(255, 255, 255, 0.08); --ig-border-light: rgba(255, 255, 255, 0.04); --ig-border-hover: rgba(255, 255, 255, 0.15); --ig-border-focus: rgba(0, 102, 255, 0.5); /* Gradients */ --ig-gradient-primary: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%); --ig-gradient-logo: linear-gradient(135deg, #0066FF 0%, #00D4FF 40%, #00E676 70%, #FFD600 100%); --ig-gradient-dark: linear-gradient(180deg, #0A0A0F 0%, #000000 100%); --ig-gradient-radial: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.15) 0%, transparent 70%); /* =================== TYPOGRAPHY =================== */ --ig-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; /* Font Sizes - Desktop */ --ig-text-xs: 0.75rem; /* 12px */ --ig-text-sm: 0.875rem; /* 14px */ --ig-text-base: 1rem; /* 16px */ --ig-text-lg: 1.125rem; /* 18px */ --ig-text-xl: 1.25rem; /* 20px */ --ig-text-2xl: 1.5rem; /* 24px */ --ig-text-3xl: 1.875rem; /* 30px */ --ig-text-4xl: 2.25rem; /* 36px */ --ig-text-5xl: 3rem; /* 48px */ --ig-text-6xl: 3.75rem; /* 60px */ --ig-text-7xl: 4.5rem; /* 72px */ /* Font Weights */ --ig-font-regular: 400; --ig-font-medium: 500; --ig-font-semibold: 600; --ig-font-bold: 700; /* Line Heights */ --ig-leading-none: 1; --ig-leading-tight: 1.15; --ig-leading-snug: 1.3; --ig-leading-normal: 1.5; --ig-leading-relaxed: 1.65; /* Letter Spacing */ --ig-tracking-tight: -0.02em; --ig-tracking-normal: 0; --ig-tracking-wide: 0.02em; --ig-tracking-wider: 0.05em; /* =================== SPACING SYSTEM =================== */ --ig-space-1: 0.25rem; /* 4px */ --ig-space-2: 0.5rem; /* 8px */ --ig-space-3: 0.75rem; /* 12px */ --ig-space-4: 1rem; /* 16px */ --ig-space-5: 1.25rem; /* 20px */ --ig-space-6: 1.5rem; /* 24px */ --ig-space-8: 2rem; /* 32px */ --ig-space-10: 2.5rem; /* 40px */ --ig-space-12: 3rem; /* 48px */ --ig-space-16: 4rem; /* 64px */ --ig-space-20: 5rem; /* 80px */ --ig-space-24: 6rem; /* 96px */ --ig-space-32: 8rem; /* 128px */ /* =================== LAYOUT =================== */ --ig-container-sm: 640px; --ig-container-md: 768px; --ig-container-lg: 1024px; --ig-container-xl: 1280px; --ig-container-2xl: 1440px; --ig-section-padding: var(--ig-space-24); --ig-section-padding-mobile: var(--ig-space-16); /* =================== BORDER RADIUS =================== */ --ig-radius-sm: 6px; --ig-radius-md: 8px; --ig-radius-lg: 12px; --ig-radius-xl: 16px; --ig-radius-2xl: 20px; --ig-radius-3xl: 24px; --ig-radius-full: 9999px; /* =================== SHADOWS =================== */ --ig-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ig-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --ig-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --ig-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --ig-shadow-glow: 0 0 40px var(--ig-primary-glow); --ig-shadow-glow-sm: 0 0 20px var(--ig-primary-glow); /* =================== TRANSITIONS =================== */ --ig-transition-fast: 150ms ease; --ig-transition-base: 200ms ease; --ig-transition-slow: 300ms ease; --ig-transition-slower: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* =================== Z-INDEX SCALE =================== */ --ig-z-base: 0; --ig-z-raised: 10; --ig-z-dropdown: 100; --ig-z-sticky: 200; --ig-z-overlay: 300; --ig-z-modal: 400; --ig-z-toast: 500; } /* ============================================ BASE RESET & DEFAULTS ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--ig-font-family); font-size: var(--ig-text-base); font-weight: var(--ig-font-regular); line-height: var(--ig-leading-normal); color: var(--ig-text-primary); background-color: var(--ig-bg-primary); } /* ============================================ TYPOGRAPHY CLASSES ============================================ */ /* Headings */ .ig-h1 { font-size: clamp(var(--ig-text-4xl), 6vw, var(--ig-text-7xl)); font-weight: var(--ig-font-bold); line-height: var(--ig-leading-tight); letter-spacing: var(--ig-tracking-tight); color: var(--ig-text-primary); } .ig-h2 { font-size: clamp(var(--ig-text-3xl), 4vw, var(--ig-text-5xl)); font-weight: var(--ig-font-semibold); line-height: var(--ig-leading-tight); letter-spacing: var(--ig-tracking-tight); color: var(--ig-text-primary); } .ig-h3 { font-size: clamp(var(--ig-text-xl), 3vw, var(--ig-text-2xl)); font-weight: var(--ig-font-semibold); line-height: var(--ig-leading-snug); color: var(--ig-text-primary); } .ig-h4 { font-size: var(--ig-text-lg); font-weight: var(--ig-font-semibold); line-height: var(--ig-leading-snug); color: var(--ig-text-primary); } /* Body Text */ .ig-body { font-size: var(--ig-text-base); line-height: var(--ig-leading-relaxed); color: var(--ig-text-secondary); } .ig-body-lg { font-size: var(--ig-text-lg); line-height: var(--ig-leading-relaxed); color: var(--ig-text-secondary); } .ig-body-sm { font-size: var(--ig-text-sm); line-height: var(--ig-leading-normal); color: var(--ig-text-secondary); } /* Labels & Captions */ .ig-label { font-size: var(--ig-text-xs); font-weight: var(--ig-font-medium); letter-spacing: var(--ig-tracking-wider); text-transform: uppercase; color: var(--ig-text-tertiary); } .ig-caption { font-size: var(--ig-text-sm); color: var(--ig-text-tertiary); } /* Special Text */ .ig-gradient-text { background: var(--ig-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ LAYOUT CLASSES ============================================ */ .ig-container { width: 100%; max-width: var(--ig-container-xl); margin: 0 auto; padding: 0 var(--ig-space-6); } @media (max-width: 640px) { .ig-container { padding: 0 var(--ig-space-4); } } .ig-section { padding: var(--ig-section-padding) 0; } @media (max-width: 768px) { .ig-section { padding: var(--ig-section-padding-mobile) 0; } } /* Flex Utilities */ .ig-flex { display: flex; } .ig-flex-col { flex-direction: column; } .ig-items-center { align-items: center; } .ig-items-start { align-items: flex-start; } .ig-justify-center { justify-content: center; } .ig-justify-between { justify-content: space-between; } .ig-gap-1 { gap: var(--ig-space-1); } .ig-gap-2 { gap: var(--ig-space-2); } .ig-gap-3 { gap: var(--ig-space-3); } .ig-gap-4 { gap: var(--ig-space-4); } .ig-gap-6 { gap: var(--ig-space-6); } .ig-gap-8 { gap: var(--ig-space-8); } /* Grid Utilities */ .ig-grid { display: grid; } .ig-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .ig-grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .ig-grid-cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .ig-grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .ig-grid-cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ig-grid-cols-4, .ig-grid-cols-3, .ig-grid-cols-2 { grid-template-columns: 1fr; } } /* Text Alignment */ .ig-text-center { text-align: center; } .ig-text-left { text-align: left; } .ig-text-right { text-align: right; } /* ============================================ COMPONENT BASE CLASSES ============================================ */ /* Buttons */ .ig-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ig-space-2); padding: var(--ig-space-3) var(--ig-space-6); font-family: var(--ig-font-family); font-size: var(--ig-text-sm); font-weight: var(--ig-font-semibold); line-height: 1; text-decoration: none; border: none; border-radius: var(--ig-radius-lg); cursor: pointer; transition: all var(--ig-transition-base); white-space: nowrap; } .ig-btn-lg { padding: var(--ig-space-4) var(--ig-space-8); font-size: var(--ig-text-base); border-radius: var(--ig-radius-xl); } .ig-btn-primary { background: var(--ig-gradient-primary); color: var(--ig-text-primary); box-shadow: var(--ig-shadow-glow-sm); } .ig-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ig-shadow-glow); } .ig-btn-primary:active { transform: translateY(0); } .ig-btn-secondary { background: transparent; color: var(--ig-text-primary); border: 1px solid var(--ig-border-hover); } .ig-btn-secondary:hover { background: var(--ig-bg-surface-hover); border-color: var(--ig-text-tertiary); } .ig-btn-ghost { background: transparent; color: var(--ig-text-secondary); } .ig-btn-ghost:hover { color: var(--ig-text-primary); background: var(--ig-bg-surface-light); } /* Cards */ .ig-card { background: var(--ig-bg-surface); border: 1px solid var(--ig-border); border-radius: var(--ig-radius-2xl); padding: var(--ig-space-6); transition: all var(--ig-transition-slow); } .ig-card:hover { border-color: var(--ig-border-hover); background: var(--ig-bg-surface-light); } .ig-card-elevated { background: var(--ig-bg-surface-light); box-shadow: var(--ig-shadow-lg); } /* Badges */ .ig-badge { display: inline-flex; align-items: center; gap: var(--ig-space-1); padding: var(--ig-space-1) var(--ig-space-3); font-size: var(--ig-text-xs); font-weight: var(--ig-font-medium); letter-spacing: var(--ig-tracking-wide); border-radius: var(--ig-radius-full); background: var(--ig-primary-light); color: var(--ig-primary); } .ig-badge-success { background: var(--ig-success-light); color: var(--ig-success); } .ig-badge-warning { background: var(--ig-accent-yellow-light); color: var(--ig-accent-yellow); } /* Dividers */ .ig-divider { height: 1px; background: var(--ig-border); border: none; } .ig-divider-gradient { height: 1px; background: linear-gradient(90deg, transparent, var(--ig-border-hover), transparent); border: none; } /* ============================================ ICON SYSTEM (Lucide-compatible) ============================================ */ .ig-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; } .ig-icon-sm { width: 20px; height: 20px; } .ig-icon-lg { width: 28px; height: 28px; } .ig-icon-xl { width: 32px; height: 32px; } /* Icon containers */ .ig-icon-box { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ig-radius-lg); background: var(--ig-primary-light); color: var(--ig-primary); } .ig-icon-box-lg { width: 56px; height: 56px; border-radius: var(--ig-radius-xl); } /* ============================================ ANIMATION CLASSES ============================================ */ /* Fade in on scroll (use with JS IntersectionObserver) */ .ig-animate { opacity: 0; transform: translateY(20px); transition: opacity var(--ig-transition-slower), transform var(--ig-transition-slower); } .ig-animate.is-visible { opacity: 1; transform: translateY(0); } /* Stagger delays */ .ig-delay-1 { transition-delay: 100ms; } .ig-delay-2 { transition-delay: 200ms; } .ig-delay-3 { transition-delay: 300ms; } .ig-delay-4 { transition-delay: 400ms; } .ig-delay-5 { transition-delay: 500ms; } /* Hover lift effect */ .ig-hover-lift { transition: transform var(--ig-transition-base); } .ig-hover-lift:hover { transform: translateY(-4px); } /* ============================================ UTILITY CLASSES ============================================ */ /* Spacing */ .ig-mt-0 { margin-top: 0; } .ig-mt-4 { margin-top: var(--ig-space-4); } .ig-mt-6 { margin-top: var(--ig-space-6); } .ig-mt-8 { margin-top: var(--ig-space-8); } .ig-mt-12 { margin-top: var(--ig-space-12); } .ig-mt-16 { margin-top: var(--ig-space-16); } .ig-mb-0 { margin-bottom: 0; } .ig-mb-2 { margin-bottom: var(--ig-space-2); } .ig-mb-4 { margin-bottom: var(--ig-space-4); } .ig-mb-6 { margin-bottom: var(--ig-space-6); } .ig-mb-8 { margin-bottom: var(--ig-space-8); } .ig-mb-12 { margin-bottom: var(--ig-space-12); } /* Visibility */ .ig-hidden { display: none; } .ig-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 768px) { .ig-hidden-mobile { display: none; } } @media (min-width: 769px) { .ig-hidden-desktop { display: none; } } /* Width */ .ig-w-full { width: 100%; } .ig-max-w-md { max-width: var(--ig-container-md); } .ig-max-w-lg { max-width: var(--ig-container-lg); } /* ============================================ FOCUS STATES (Accessibility) ============================================ */ *:focus-visible { outline: 2px solid var(--ig-primary); outline-offset: 2px; } /* ============================================ SELECTION STYLING ============================================ */ ::selection { background: var(--ig-primary); color: var(--ig-text-primary); } /* ============================================ SCROLLBAR STYLING ============================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ig-bg-surface); } ::-webkit-scrollbar-thumb { background: var(--ig-text-tertiary); border-radius: var(--ig-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--ig-text-secondary); }/* End custom CSS */