@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css'); /* Axxonet shared theme tokens + base. data-theme lives on . Light is default. */ :root, :root[data-theme="light"]{ --bg:#FFFFFF; --surface:#F5F7FA; --card:#FFFFFF; --border:#E4E9F1; --hover:#F6F8FC; --text:#0B0E14; --muted:#57616E; --accent:#E0303A; --accent-strong:color-mix(in oklab,var(--accent),#000 16%); --accent-soft:#FCECEE; --cyan:#0093C4; --feat-bg:#0A0C12; --feat-surface:#10131C; --feat-text:#FFFFFF; --feat-muted:#B9C0CE; --feat-border:rgba(255,255,255,.12); --feat-accent:#8CA9FF; --footer-bg:#07090E; --teal:#00A651; --green:#00843F; --red:#D31920; --chip-bg:#0B0E14; --chip-text:#FFFFFF; /* frosted light navigation bar */ --nav-bg:rgba(255,255,255,.85); --nav-solid:#FFFFFF; --nav-text:#0B0E14; --nav-muted:#4C5665; --nav-border:rgba(11,16,32,.09); --nav-hover:rgba(224,48,58,.06); /* soft section tint + restrained multi-hue accents (bg tint / solid fg) */ --tint:#F3F5FA; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --shadow-card:0 1px 2px rgba(15,35,95,.05), 0 6px 16px -10px rgba(15,35,95,.10), 0 18px 38px -22px rgba(15,35,95,.10); --shadow-pop:0 2px 6px rgba(15,35,95,.06), 0 12px 26px -12px rgba(15,35,95,.12), 0 30px 60px -30px rgba(15,35,95,.16); --ax-grid:rgba(11,16,32,.045); /* Xshala family: indigo, green, amber, info blue, violet. Primary red (--accent) stays outside this set. */ --c1-bg:#E9ECFB; --c1-fg:#3546C8; --c2-bg:#DDF2E6; --c2-fg:#17794A; --c3-bg:#FBF0D9; --c3-fg:#9A6206; --c4-bg:#E1F0FA; --c4-fg:#1B6FAE; --c5-bg:#EFEAFB; --c5-fg:#5B3FA8; /* ink to draw ON a --cN-fg fill (icon chips): white in light, dark in dark */ --c-ink:#FFFFFF; /* page-head rhythm: gap under the sticky header, and under the breadcrumb. Absolute units so the rhythm is identical on every page and viewport. */ --hero-top:4mm; --crumb-gap:4mm; } :root[data-theme="dark"]{ --bg:#070910; --surface:#0E111A; --card:#0E111A; --border:rgba(255,255,255,.10); --hover:#151A26; --text:#EEF1F6; --muted:#9AA3B4; --accent:#F0626B; --accent-strong:color-mix(in oklab,var(--accent),#000 14%); --accent-soft:rgba(240,98,107,.16); --cyan:#4FC8EC; --feat-bg:#05070C; --feat-surface:#0E111A; --feat-text:#FFFFFF; --feat-muted:#B4BCC9; --feat-border:rgba(255,255,255,.10); --feat-accent:#8CA9FF; --footer-bg:#04060A; --teal:#3FD9A0; --green:#35C97A; --red:#FF4D57; --chip-bg:#1A2030; --chip-text:#FFFFFF; --nav-bg:rgba(14,18,28,.86); --nav-solid:#0E121C; --nav-text:#FFFFFF; --nav-muted:#9BA6BC; --nav-border:rgba(255,255,255,.09); --nav-hover:rgba(255,255,255,.08); --tint:#0B0E18; --shadow-card:0 1px 2px rgba(0,0,0,.30), 0 8px 20px -12px rgba(0,0,0,.45), 0 22px 44px -26px rgba(0,0,0,.45); --shadow-pop:0 2px 8px rgba(0,0,0,.35), 0 14px 30px -14px rgba(0,0,0,.5), 0 34px 66px -32px rgba(0,0,0,.55); --ax-grid:rgba(255,255,255,.035); /* Xshala family, dark theme */ --c1-bg:rgba(53,70,200,.28); --c1-fg:#A9B4F5; --c2-bg:rgba(23,121,74,.26); --c2-fg:#6FD79E; --c3-bg:rgba(154,98,6,.28); --c3-fg:#E8BE6A; --c4-bg:rgba(27,111,174,.26); --c4-fg:#7FC3EE; --c5-bg:rgba(91,63,168,.30); --c5-fg:#BCA6F0; --c-ink:#0E121C; } /* ---- Palettes: modern professional monotone accents (colourful c1–c5 boxes preserved). 'axxonet' is the default (base tokens above, no data-palette attribute). ---- */ :root[data-palette="navy"]{--accent:#1D4ED8;--accent-soft:color-mix(in srgb,#1D4ED8 9%,#fff);--nav-hover:color-mix(in srgb,#1D4ED8 8%,transparent);} :root[data-palette="navy"][data-theme="dark"]{--accent:#3B6BF5;--accent-soft:color-mix(in srgb,#3B6BF5 16%,transparent);} :root[data-palette="emerald"]{--accent:#0B7A5E;--accent-soft:color-mix(in srgb,#0B7A5E 10%,#fff);--nav-hover:color-mix(in srgb,#0B7A5E 8%,transparent);} :root[data-palette="emerald"][data-theme="dark"]{--accent:#0FA678;--accent-soft:color-mix(in srgb,#0FA678 16%,transparent);} :root[data-palette="violet"]{--accent:#6D28D9;--accent-soft:color-mix(in srgb,#6D28D9 9%,#fff);--nav-hover:color-mix(in srgb,#6D28D9 8%,transparent);} :root[data-palette="violet"][data-theme="dark"]{--accent:#8257F0;--accent-soft:color-mix(in srgb,#8257F0 16%,transparent);} :root[data-palette="amber"]{--accent:#B45309;--accent-soft:color-mix(in srgb,#B45309 10%,#fff);--nav-hover:color-mix(in srgb,#B45309 8%,transparent);} :root[data-palette="amber"][data-theme="dark"]{--accent:#D07A00;--accent-soft:color-mix(in srgb,#D07A00 16%,transparent);} :root[data-palette="slate"]{--accent:#334155;--accent-soft:color-mix(in srgb,#334155 8%,#fff);--nav-hover:color-mix(in srgb,#334155 8%,transparent);} :root[data-palette="slate"][data-theme="dark"]{--accent:#5B6B7F;--accent-soft:color-mix(in srgb,#5B6B7F 18%,transparent);} /* ---- Contrast levels: deepen text/muted/border for high-contrast reading ---- */ :root[data-contrast="high"]{--text:#000000;--muted:#3B4551;--border:#CBD4E1;} :root[data-contrast="high"][data-theme="dark"]{--text:#FFFFFF;--muted:#C2CAD8;--border:rgba(255,255,255,.22);} :root[data-contrast="max"]{--text:#000000;--muted:#242C36;--border:#AAB6C6;} :root[data-contrast="max"][data-theme="dark"]{--text:#FFFFFF;--muted:#DCE3EF;--border:rgba(255,255,255,.40);} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--bg);color:var(--text);font-size:16px; font-family:'IBM Plex Sans','Noto Sans Arabic','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Kannada','Noto Sans SC',system-ui,sans-serif; -webkit-font-smoothing:antialiased;transition:background .35s ease,color .35s ease;} /* ---- Craft polish (StyleSeed / UI-Craft judgment · palette-preserving) ---- */ h1,h2,h3,h4{text-wrap:balance;} p{text-wrap:pretty;} /* Tabular figures wherever numbers update or align — no width jitter (StyleSeed) */ [data-countup],[data-herostats],[data-tnum],.ax-num,[style*="IBM Plex Mono"]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} ::selection{background:var(--accent);color:#fff;} @keyframes axMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes axTrace{from{stroke-dashoffset:1200;}to{stroke-dashoffset:0;}} @keyframes axFadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}} input,textarea,button,select{font-family:inherit;} [dir="rtl"] .ax-flip{transform:scaleX(-1);} /* blueprint grid overlay (theme-aware) */ [data-gridlines]{background-image:linear-gradient(var(--ax-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ax-grid) 1px,transparent 1px);background-size:72px 72px;} a{color:inherit;} /* ---- UI/UX polish (accessibility · motion · touch · anchors) ---- */ a,button,input,select,textarea,[role="button"]{touch-action:manipulation;} :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px;} :focus:not(:focus-visible){outline:none;} [id]{scroll-margin-top:84px;} img{max-width:100%;} /* Scroll reveals. anim.js owns these two attributes; the default state is VISIBLE, so nothing is stranded if the script fails to load, and React re-renders cannot wipe the state (it lives outside the style attribute). */ [data-reveal][data-ax-anim]{transition:opacity 600ms cubic-bezier(.2,.7,.2,1),transform 600ms cubic-bezier(.2,.7,.2,1);} [data-reveal][data-ax-out]{opacity:0;transform:translateY(18px);} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} [data-reveal]{opacity:1 !important;transform:none !important;} }