/* ============================================================================ AAKZEN TECHNOLOGIES — design tokens Every colour, size and duration in the site resolves to something declared here. Nothing downstream may hard-code a hex value. Two themes. Light is the default because the people who commission this kind of software — principals, administrators, department officers — read long pages in bright rooms and print them. Dark is the ascent theme the brand was designed around, one click away. How the switch works: 1. Light values live on :root and apply unless something overrides them. 2. A visitor whose OS prefers dark gets dark, unless they have explicitly chosen light on this site. 3. An explicit choice is written to and wins over the OS preference in both directions. The dark palette is declared once as --n-* ("night") raw values. The two blocks that switch themes only re-point the semantic tokens at them, so a colour is never written twice and the two blocks can never drift apart. ========================================================================= */ :root { /* --- Raw brand constants — identical in both themes ------------------ */ --brand-blue: #1f6bff; /* logo gradient start */ --brand-violet: #6e3af7; /* logo gradient end */ /* The two gradients have separate jobs and must not be swapped: --grad general UI — buttons, headline accents, rules --brand-grad the mark itself, the hero bloom, the pixel motif */ --grad: linear-gradient(100deg, var(--primary), var(--accent)); --brand-grad: linear-gradient(100deg, var(--brand-blue), var(--brand-violet)); --grad-soft: linear-gradient(100deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); /* --- Night palette, declared once, consumed by the dark blocks ------- */ --n-bg: #05081a; --n-bg-sunk: #04061a; --n-surface: #0d1330; --n-surface-hi: #111a3d; --n-edge: rgba(142, 172, 255, .13); --n-edge-hi: rgba(142, 172, 255, .30); --n-ink: #e9eefc; --n-ink-muted: #8c96bd; --n-ink-dim: #667099; --n-primary: #3b82f6; /* #2563eb is only 2.6:1 on near-black */ --n-primary-deep: #60a5fa; --n-primary-wash: rgba(59, 130, 246, .12); --n-accent: #38d8ff; --n-accent-text:#38d8ff; /* cyan is readable on dark, unlike on white */ --n-success: #34d399; --n-warning: #fbbf24; --n-danger: #f87171; /* --- Light theme — the default -------------------------------------- */ --bg: #ffffff; --bg-sunk: #f8fafc; /* alternating section bands */ --surface: #f1f5f9; /* cards */ --surface-hi: #ffffff; /* a raised card sitting on a sunk band */ --edge: #e2e8f0; --edge-hi: #cbd5e1; --ink: #0f172a; /* 18.1:1 on white */ --ink-muted: #475569; /* 7.5:1 */ --ink-dim: #64748b; /* 4.8:1 — the smallest text colour allowed */ --primary: #2563eb; /* 5.1:1 on white, and white is 5.1:1 on it */ --primary-deep: #1d4ed8; --primary-wash: #eff6ff; /* WARNING: --accent is 2.5:1 on white and FAILS WCAG for text. Use it for fills, icon strokes, borders and gradient stops only. When the accent colour has to carry text, use --accent-text. */ --accent: #06b6d4; --accent-text: #0e7490; /* 5.4:1 on white */ --success: #059669; --warning: #d97706; --danger: #dc2626; /* --- Elevation ------------------------------------------------------ Light uses shadow. Dark cannot — a shadow is invisible on near-black, so the dark blocks swap these for borders and a surface lift. */ --e-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); --e-2: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04); --e-3: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .05); --e-brand: 0 8px 24px rgba(37, 99, 235, .22); /* --- Type ------------------------------------------------------------ Chakra Petch is retained for the wordmark lockup only. At headline sizes on white its chamfered cuts read closer to science fiction than to enterprise, which works against the audience. */ --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Scale calibrated against the companies this site is meant to sit beside: Infosys, TCS, Accenture, IBM and Zoho all run hero type in the 40-56px range and section headings at 28-32px. An earlier pass had the hero at 76px and every section heading at 40px, which reads as a startup landing page rather than an established firm — oversized type suggests a template, and authority comes from restraint and hierarchy instead. Desktop values at 1280px: 56 / 44 / 32 / 20 / 18 / 16. */ --fs-display: clamp(2.125rem, 4.4vw, 3.5rem); --fs-h1: clamp(1.875rem, 3.4vw, 2.75rem); --fs-h2: clamp(1.5rem, 2.5vw, 2rem); --fs-h3: clamp(1.125rem, 1.3vw, 1.25rem); --fs-h4: 1.0625rem; /* Must stay clearly above --fs-body or the lede stops reading as a lede. A plain vw clamp resolved to 16px at 1280 — identical to body text — so the viewport term carries a fixed offset to keep it 17-18px throughout. */ --fs-lede: clamp(1.0625rem, .4vw + .85rem, 1.125rem); --fs-body: 1rem; /* 16px floor — never smaller for paragraphs */ --fs-sm: .9375rem; --fs-label: .75rem; --lh-tight: 1.12; --lh-head: 1.22; --lh-body: 1.7; --lh-long: 1.75; /* articles and legal pages */ --track-tight: -.02em; --track-label: .16em; /* --- Space — 4px base ----------------------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --band-y: clamp(4rem, 9vw, 7.5rem); --shell: min(1200px, 92vw); --gutter: clamp(1.25rem, 5vw, 2.5rem); /* --- Radius ---------------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* --- Motion ---------------------------------------------------------- One easing vocabulary. --ease-out for things arriving, --ease-in-out for things moving between two known states, --ease-spring for the hero and anything that should feel like it has weight. */ --t-fast: 160ms; --t-base: 240ms; --t-slow: 320ms; --t-enter: 800ms; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.16, .84, .3, 1); /* --- Depth order — every z-index in the site is named here ----------- */ --z-backdrop: 0; --z-page: 1; --z-rail: 40; --z-float: 50; /* WhatsApp, back-to-top */ --z-header: 60; --z-drawer: 70; --z-overlay: 80; /* search, modals */ --z-skip: 200; color-scheme: light; } /* --- Dark, chosen by the operating system ------------------------------- */ /* Skipped when the visitor has explicitly asked this site for light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--n-bg); --bg-sunk: var(--n-bg-sunk); --surface: var(--n-surface); --surface-hi: var(--n-surface-hi); --edge: var(--n-edge); --edge-hi: var(--n-edge-hi); --ink: var(--n-ink); --ink-muted: var(--n-ink-muted); --ink-dim: var(--n-ink-dim); --primary: var(--n-primary); --primary-deep: var(--n-primary-deep); --primary-wash: var(--n-primary-wash); --accent: var(--n-accent); --accent-text: var(--n-accent-text); --success: var(--n-success); --warning: var(--n-warning); --danger: var(--n-danger); --e-1: 0 0 0 1px rgba(255, 255, 255, .06); --e-2: 0 0 0 1px rgba(255, 255, 255, .10), 0 8px 24px rgba(0, 0, 0, .40); --e-3: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 48px rgba(0, 0, 0, .50); --e-brand: 0 8px 28px rgba(59, 130, 246, .30); color-scheme: dark; } } /* --- Dark, chosen deliberately on this site ----------------------------- */ :root[data-theme="dark"] { --bg: var(--n-bg); --bg-sunk: var(--n-bg-sunk); --surface: var(--n-surface); --surface-hi: var(--n-surface-hi); --edge: var(--n-edge); --edge-hi: var(--n-edge-hi); --ink: var(--n-ink); --ink-muted: var(--n-ink-muted); --ink-dim: var(--n-ink-dim); --primary: var(--n-primary); --primary-deep: var(--n-primary-deep); --primary-wash: var(--n-primary-wash); --accent: var(--n-accent); --accent-text: var(--n-accent-text); --success: var(--n-success); --warning: var(--n-warning); --danger: var(--n-danger); --e-1: 0 0 0 1px rgba(255, 255, 255, .06); --e-2: 0 0 0 1px rgba(255, 255, 255, .10), 0 8px 24px rgba(0, 0, 0, .40); --e-3: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 48px rgba(0, 0, 0, .50); --e-brand: 0 8px 28px rgba(59, 130, 246, .30); color-scheme: dark; } /* --------------------------------------------------------------------------- Compatibility aliases. The stylesheet written for the original dark-only site refers to --void, --panel, --blue and friends. Pointing those at the semantic tokens makes every existing rule theme-aware immediately, so the site is never broken half-way through the migration. Sections are rewritten onto the semantic names as they are touched; this block shrinks and is deleted at the end. Do not use these names in new code. ------------------------------------------------------------------------ */ :root { --void: var(--bg); --deep: var(--bg-sunk); --panel: var(--surface); --panel-2: var(--surface-hi); --blue: var(--primary); --violet: var(--brand-violet); --cyan: var(--accent); --muted: var(--ink-muted); --dim: var(--ink-dim); --radius: var(--r-lg); --step: var(--band-y); } /* --------------------------------------------------------------------------- Theme transition. Applied only after the first paint — the `theme-ready` class is added by site.js once the stored preference has been resolved. Without that guard a visitor whose stored theme is dark would watch the whole page cross-fade from white on every single load. Colour only. Never transition layout properties here. ------------------------------------------------------------------------ */ .theme-ready body, .theme-ready .hdr, .theme-ready .card, .theme-ready .backdrop { transition: background-color var(--t-slow) var(--ease-in-out), border-color var(--t-slow) var(--ease-in-out), color var(--t-slow) var(--ease-in-out); } @media (prefers-reduced-motion: reduce) { .theme-ready body, .theme-ready .hdr, .theme-ready .card, .theme-ready .backdrop { transition: none; } }