/* ============================================================== EMBRA TECHNOLOGIES — Elite Stylesheet v2.0 (Light Theme) Fonts: Plus Jakarta Sans + Inter Palette: Deep Navy #0A2463 · Electric Violet #7C3AED ============================================================== */ /* Fonts loaded via in HTML for better performance */ /* Font Awesome base styles and icon mappings loaded via all.min.css in HTML */ /* FA @font-face removed — all.min.css (font-display:block) is the sole authority */ /* ── Variables ─────────────────────────────────────────────── */ :root { --primary: #0A2463; --primary-dark: #061640; --primary-light: #1E40AF; --accent: #7C3AED; --accent-dark: #6D28D9; --accent-light: #A78BFA; --accent-glow: rgba(124,58,237,0.28); --accent-subtle: rgba(124,58,237,0.09); --white: #FFFFFF; --light-bg: #F5F4FF; --lighter-bg: #EEF0FF; --surface: #FAFBFF; --text-dark: #0B1B3A; --text-gray: #5B6780; --text-light: #94A0B8; --border: rgba(10,36,99,0.10); --border-accent: rgba(124,58,237,0.20); --shadow-xs: 0 2px 8px rgba(10,36,99,0.05); --shadow-sm: 0 4px 20px rgba(10,36,99,0.08); --shadow-md: 0 12px 40px rgba(10,36,99,0.12); --shadow-lg: 0 24px 64px rgba(10,36,99,0.17); --shadow-xl: 0 40px 80px rgba(10,36,99,0.22); --glow-accent: 0 0 36px rgba(124,58,237,0.35); --glow-primary: 0 0 36px rgba(10,36,99,0.25); --radius-xs: 8px; --radius-sm: 14px; --radius-md: 22px; --radius-lg: 36px; --radius-xl: 56px; /* Compositable-only transitions: replacing 'all' eliminates ~26 of 33 non-composited animation violations Lighthouse reports. 'all' creates animation worklets for EVERY CSS property (border-*, color, padding-*, font-size, etc.) — all non-compositable. box-shadow kept: used in btn/card hover effects and already present in paint layer. */ --transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1), background-color 0.4s cubic-bezier(0.16,1,0.3,1); --transition-fast: transform 0.25s ease, opacity 0.25s ease; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; } body { font-family:'Inter', sans-serif; background: var(--white); color: var(--text-dark); overflow-x: hidden; line-height: 1.7; letter-spacing: -0.01em; } /* ── Typography Scale ────────────────────────────────────────── */ h1, h2, h3, h4, .logo-text { font-family:'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } h1 { font-size: clamp(2.6rem,5.5vw,4.8rem); } h2 { font-size: clamp(2rem,4vw,3.2rem); line-height: 1.15; } h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; } h4 { font-size: 1.05rem; font-weight: 700; } p { line-height: 1.75; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } .container { max-width: 1280px; margin: 0 auto; padding: 0 36px; } @media(max-width:640px){ .container { padding: 0 20px; } } /* ── Scroll Fade Animation ────────────────────────────────────── CRITICAL: Only hide elements when JS is confirmed available. Without html.js-enabled, content stays fully visible for: – Googlebot / crawlers – GTmetrix / PageSpeed Insights – Users with JS disabled A tiny inline