/* css/global-tech.css */ /* ========================================= 1. CORE VARIABLES (Keep these, they don't break anything) ========================================= */ :root { --tanics-bg-dark: #050505; --tanics-bg-card: #121212; --tanics-primary-red: #ff2e2e; --tanics-text-main: #ffffff; --tanics-font-main: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* ========================================= 2. UTILITIES (Only affect elements with these classes) ========================================= */ /* Use this class on the ONLY if you want the full dark theme */ .tech-body { background-color: var(--tanics-bg-dark); color: var(--tanics-text-main); background-image: radial-gradient(circle, #333 1px, transparent 1px); background-size: 40px 40px; font-family: var(--tanics-font-main); margin: 0; } .tech-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Typography Overrides (Only for .t- classes) */ .t-heading { font-weight: 800; text-transform: uppercase; margin-bottom: 1rem; } .t-text-accent { color: var(--tanics-primary-red) !important; } /* Buttons */ .btn-tech { display: inline-block; background-color: transparent; border: 1px solid var(--tanics-primary-red); color: var(--tanics-primary-red); padding: 12px 30px; text-transform: uppercase; font-weight: 700; transition: all 0.3s ease; text-decoration: none; } .btn-tech:hover { background: var(--tanics-primary-red); color: #fff; box-shadow: 0 0 15px rgba(255, 46, 46, 0.4); } /* ========================================= 3. HEADER ISOLATION (Self-Contained Styles) ========================================= */ .tech-header { /* Force the header to have its own background/text styles */ background: rgba(5, 5, 5, 0.95); backdrop-filter: blur(15px); border-bottom: 1px solid #333; font-family: var(--tanics-font-main); z-index: 1050; /* Reset link colors inside header so they don't inherit weird page styles */ } .tech-header .nav-link { color: #ffffff !important; font-weight: 500; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; } .tech-header .nav-link:hover, .tech-header .nav-link.active { color: var(--tanics-primary-red) !important; } /* ========================================= 4. SIDE PANEL (Self-Contained) ========================================= */ .offcanvas-tech { background-color: #000000 !important; color: #ffffff !important; border-right: 1px solid #333 !important; } .offcanvas-tech a { text-decoration: none; } /* ========================================= 5. SECTIONS (Only affect .tech-section) ========================================= */ .tech-page-hero { /* Add padding here since we removed it from body */ padding-top: 140px; padding-bottom: 80px; background: linear-gradient(180deg, #050505 0%, #111 100%); text-align: center; color: #fff; } .tech-section { padding: 80px 0; background-color: var(--tanics-bg-dark); /* Default to dark if used */ color: #fff; } .tech-section-white { background-color: #ffffff; color: #333; } .tech-section-white h1, .tech-section-white h2, .tech-section-white p { color: #000; }