/* ECXSystems — shared theme.css (extracted & de-duplicated from updated_website) Design system + shared components. Assets referenced externally. */ /* ECXSystems brand theme - shared component styles Generated from the canonical page styles; brand tokens per Brand Guide v2.x. Fonts/images are referenced as external assets (deduplicated). */ /* ─── WINNER SANS — Internal use only, web license pending ── */ @font-face { font-family: 'WinnerSans'; src: url('../fonts/WinnerSans-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } /* ─── BRAND TOKENS — Brand Guide v2.0 exact ────────────── */ :root { --navy: #003b71; /* Navy Blue — Primary */ --navy-deep: #001d3d; /* hero gradient end */ --navy-dark: #010d1a; /* Near Black — Collateral BG */ --navy-mid: #0a2d5a; /* section gradient */ --navy-step: #1a5490; /* section gradient end */ --light-blue: #3e78ae; /* Secondary — glows, hover, ghost borders */ --orange: #ff7a31; /* Accent — CTAs, key highlights */ --white: #ffffff; --off-white: #f4f5f7; /* Foreground on dark — non-negotiable values from brand guide */ --fg-100: #ffffff; --fg-68: rgba(255,255,255,0.68); --fg-55: rgba(255,255,255,0.55); --fg-40: rgba(255,255,255,0.40); /* Foreground on light */ --lf-head: #003b71; --lf-body: #1f1f1f; --lf-support: #556; /* Typography */ --f-head: 'Barlow','Gill Sans',system-ui,sans-serif; --f-impact: 'WinnerSans','Barlow','Gill Sans',system-ui,sans-serif; --f-body: 'Source Sans 3','Segoe UI',sans-serif; /* Transitions */ --ease: cubic-bezier(0.4,0,0.2,1); --spring: cubic-bezier(0.34,1.56,0.64,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--navy-dark);color:var(--fg-100);font-family:var(--f-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* ─── AMBIENT ORBS (brand guide spec) ───────────────────── o1: orange 10% blur 120 top-left o2: light-blue 10% blur 130 bottom-right o3: navy 18% blur 100 center-offset */ .ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .orb{position:absolute;border-radius:50%} .o1{width:600px;height:600px;top:-150px;left:-150px;filter:blur(100px);background:rgba(255,122,49,0.10);animation:d1 9s ease-in-out infinite alternate} .o2{width:700px;height:700px;bottom:-200px;right:-200px;filter:blur(110px);background:rgba(62,120,174,0.10);animation:d2 11s ease-in-out infinite alternate} .o3{width:400px;height:400px;top:40%;left:35%;filter:blur(90px);background:rgba(0,59,113,0.18);animation:d1 13s ease-in-out infinite alternate-reverse} @keyframes d1{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.08)}} @keyframes d2{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,-25px) scale(1.06)}} #grain{position:fixed;inset:0;pointer-events:none;z-index:1} #grain canvas{position:absolute;inset:0;width:100%;height:100%} /* ─── NAV ──────────────────────────────────────────────────*/ nav{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:0 5%;height:70px; background:rgba(0,59,113,0.90); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.08); transition:background-color 380ms var(--ease),border-color 380ms var(--ease); } /* Nav color themes — set via data-theme on