/* Tech Premium Blog Styles - Cinematic Overhaul Refined */ :root { --glass-bg: rgba(0, 0, 0, 0.8); --glass-border: rgba(0, 210, 255, 0.2); --neon-glow: 0 0 20px rgba(0, 210, 255, 0.4); } /* Base Polish - Specificity scoped to .tech-premium-refined */ .tech-premium-refined { background-color: #000000 !important; /* Keep base bg forced black */ font-family: 'Inter', sans-serif; } .tech-premium-refined h1, .tech-premium-refined h2, .tech-premium-refined h3 { font-family: var(--font-heading) !important; } .tech-premium-refined .filter-btn, .tech-premium-refined .dropdown-trigger { font-family: var(--premium-font-technical) !important; } /* Glassmorphism Filters Container */ .tech-premium-refined .blog-filters-container { background: var(--glass-bg) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid var(--glass-border) !important; padding: 0.8rem 3rem !important; /* Even tighter for a true pill look */ border-radius: 4rem !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; margin-top: -3.5rem !important; margin-bottom: 0rem !important; /* Definitive removal of bottom margin at container level */ position: relative; z-index: 40; display: block !important; /* Force block to allow inner div full width */ } /* Inner Centering Fix - REMOVED GHOST LINE (border-bottom) */ .tech-premium-refined .blog-filters-container > div { display: flex !important; justify-content: center !important; width: 100% !important; /* border-bottom removed to clean up the pill design */ } /* Filter Buttons - Premium Tiny Scale */ .tech-premium-refined .filter-btn { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 0.4rem 1.1rem !important; font-size: var(--premium-font-size-tiny) !important; font-weight: var(--premium-weight-technical) !important; text-transform: uppercase !important; letter-spacing: var(--premium-letter-spacing-technical) !important; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important; color: rgba(255, 255, 255, 0.7) !important; } .tech-premium-refined .filter-btn:hover { border-color: var(--color-accent) !important; box-shadow: 0 0 15px rgba(34, 211, 238, 0.15) !important; transform: translateY(-1px) !important; color: #fff !important; } .tech-premium-refined .filter-btn.active { background: var(--color-accent) !important; color: #000 !important; border-color: var(--color-accent) !important; box-shadow: 0 0 30px rgba(34, 211, 238, 0.6) !important; } /* Filter Tabs Centering Fix */ .tech-premium-refined .filter-tabs { flex: none !important; display: flex !important; gap: 0.5rem !important; } /* Sort Dropdown - Typography Forced Uppercase */ .tech-premium-refined .dropdown-trigger { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 0.4rem 1.2rem !important; border-radius: 2rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; cursor: pointer !important; transition: all 0.3s ease !important; /* Match filter typography EXACTLY */ font-size: var(--premium-font-size-tiny) !important; font-weight: var(--premium-weight-technical) !important; color: rgba(34, 211, 238, 0.8) !important; /* Tint for technical feel */ letter-spacing: var(--premium-letter-spacing-technical) !important; text-transform: uppercase !important; } .tech-premium-refined .dropdown-trigger .selected-value { font-family: var(--premium-font-technical) !important; text-transform: uppercase !important; /* Extra forced */ } /* Search Bar - Cinematic Width & Logic */ .tech-premium-refined .premium-search-container { width: 100%; max-width: 600px; /* Reduced for better centering balance */ margin: 0 auto; position: relative; z-index: 50; } .tech-premium-refined .premium-search-input { width: 100%; flex: 1; min-width: 0; display: block; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 99px; padding: 1.25rem 4.5rem 1.25rem 2.5rem; color: #fff; font-size: 1rem; font-family: var(--font-display); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.6); } .tech-premium-refined .premium-search-input:focus { outline: none; border-color: var(--color-accent); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 30px rgba(34, 211, 238, 0.2); } .tech-premium-refined .premium-search-icon { position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%); color: var(--color-accent); pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 10; } /* Newsletter / CTA Section - Dark Luxury Refinement */ .tech-premium-refined .newsletter-section { background: transparent !important; /* Let body bg show through */ padding-top: 4rem !important; } .tech-premium-refined .newsletter-section > div { background: linear-gradient(135deg, #000000 0%, #050505 100%) !important; border: 1px solid rgba(34, 211, 238, 0.15) !important; border-radius: 3rem !important; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important; } .tech-premium-refined .newsletter-section h2 { font-family: var(--font-heading) !important; color: #fff !important; letter-spacing: -0.02em !important; } .tech-premium-refined .newsletter-section p { color: rgba(255, 255, 255, 0.5) !important; } .tech-premium-refined .newsletter-form input { flex: 1 !important; width: 100% !important; min-width: 380px !important; /* Extremely generous to avoid any truncation */ background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; height: 4rem !important; padding: 0 2rem !important; font-family: var(--font-mono) !important; border-radius: 99px !important; } .tech-premium-refined .newsletter-form input:focus { border-color: var(--color-accent) !important; background: rgba(34, 211, 238, 0.02) !important; } .tech-premium-refined .newsletter-form .btn-premium-primary { height: 3.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; }