/* ===================================================== ARK FORTUNE - Premium IT Consulting Website World-Class Design System v2.0 Multi-Page Version ===================================================== */ /* CSS Variables */ :root { interpolate-size: allow-keywords; /* Primary Colors — ARK Fortune deep royal purple (var names kept for compatibility) */ --primary-blue: #6D4AE6; /* deep royal violet — the signature */ --primary-blue-light: #8B6BF0; /* lighter accent / hover */ --primary-blue-dark: #5938C9; /* deep pressed/active */ --royal-blue: #4B2FA8; /* deepest royal */ /* Accent Colors */ --gold: #f59e0b; --gold-light: #fbbf24; --gold-dark: #d97706; /* Neutral Colors */ --navy-900: #0a0f1a; --navy-800: #0f172a; --navy-700: #1e293b; --navy-600: #334155; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --white: #ffffff; /* Gradients */ --gradient-primary: linear-gradient(135deg, #6D4AE6 0%, #8B6BF0 100%); --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --gradient-dark: linear-gradient(180deg, #0a0f1a 0%, #1e293b 100%); --gradient-card: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%); --gradient-glow: radial-gradient(circle, rgba(109, 74, 230, 0.3) 0%, transparent 70%); /* Glass Effect */ --glass-bg: var(--tint-05); --glass-border: var(--tint-10); --glass-blur: blur(20px); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 40px rgba(109, 74, 230, 0.4); --shadow-gold: 0 0 30px rgba(245, 158, 11, 0.3); /* Typography — site-wide system: General Sans (display/headings) + Inter (body). General Sans = the geometric-humanist display font (Fontshare). Space Grotesk kept only as a fallback while General Sans loads. Single source of truth. */ --font-secondary: 'Inter', sans-serif; --font-display: 'General Sans', var(--font-display); /* Spacing */ --section-padding: 100px; --container-padding: 24px; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; --transition-elastic: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* Theme surface tints — translucent white washes used throughout the dark UI (glass fills, hairline borders, highlight overlays). Each dark value is byte-identical to the literal it replaces, so dark mode renders unchanged. In light mode these flip to dark washes. Definitions are written WITHOUT internal spaces so the literal-replacement pass can't match them. */ :root { --tint-02: rgba(255,255,255,0.02); --tint-03: rgba(255,255,255,0.03); --tint-04: rgba(255,255,255,0.04); --tint-05: rgba(255,255,255,0.05); --tint-06: rgba(255,255,255,0.06); --tint-07: rgba(255,255,255,0.07); --tint-08: rgba(255,255,255,0.08); --tint-10: rgba(255,255,255,0.1); --tint-12: rgba(255,255,255,0.12); --tint-14: rgba(255,255,255,0.14); --tint-15: rgba(255,255,255,0.15); --tint-18: rgba(255,255,255,0.18); --tint-20: rgba(255,255,255,0.2); --tint-25: rgba(255,255,255,0.25); --tint-30: rgba(255,255,255,0.3); /* Text that always sits on a colored/accent fill — stays light in both themes */ --on-accent: #ffffff; /* Mobile slide-out menu backdrop (frosted) */ --nav-mobile-bg: rgba(10,15,26,0.6); } /* ===================================================== LIGHT THEME ([data-theme="light"] on ) Opt-in. Dark remains the default brand identity. Brand accents (blue / gold / purple) are intentionally unchanged across themes. ===================================================== */ [data-theme="light"] { /* ============================================================ ENTERPRISE LIGHT PALETTE (§2 of the light-theme audit). Single source of truth for the crisp, Stripe/Linear-grade light theme. Named --l-* below, then wired into the legacy --navy-*/--slate-*/--white ramp so every existing rule that reads those vars cascades to the new palette with no markup changes. Rolls to the other 4 pages later by design. ============================================================ */ /* WARM enterprise off-white (workless.ai-inspired, 2026-07-01). Was a cold blue-white (#FBFBFD / #F4F5F8 / #E6E8EE) that read clinical + let the hero aurora bleed grey. Nudged into a RESTRAINED warm neutral: warm + premium, but subtle enough to still read professional B2B (not a cream event site). Whole light theme is now cohesively warm — no warm-hero / cool-body clash. */ --l-page: #F8F5EF; /* app canvas — warm off-white (restrained) */ --l-surface: #FFFDFA; /* card / panel — faintest warm white (lifts off base) */ --l-surface-2: #F2EDE4; /* raised surface, table headers, tint band — warm neutral */ --l-border: #E7E1D6; /* hairline dividers + card borders — warm-neutral */ --l-ink: #0E1220; /* primary heading / display ink */ --l-ink-2: #4A5163; /* secondary body ink */ --l-ink-3: #656B7A; /* tertiary / muted / captions (AA 4.5:1 on surface-2) */ /* ============================================================ LIGHT-MODE ACCENT = FERN / MONEY GREEN (client-approved 2026-07-01, "this looks better" — replaces the purple accent in LIGHT MODE ONLY). Dark mode is UNTOUCHED and stays royal purple. Two greens, split by WCAG AA contrast on the warm paper/white/tint: • #2F8F4E (fern) — passes AA-LARGE (3:1) only → use for FILLS & white-text-on-green buttons (--gradient-primary below). NOT for small text. • #24713D (deep) — passes AA-BODY (4.5:1 → ~5.1–5.9:1) on paper, white, AND the tint → the safe default for ALL accent text/icons/lines/dots, small or large. So --l-accent uses the DEEP green: nothing that reads it can ever fall below AA, whatever the size. Verified: #24713D on #F8F5EF=5.51, on #FFFDFA=5.90, on #E4F1E8=5.15 (all ≥4.5). ============================================================ */ --l-accent: #24713D; /* accent text/icons/lines/dots — deep fern, AA-body everywhere */ --l-accent-fill: #2F8F4E; /* bright fern for FILLS / white-text buttons (AA-large) */ --l-accent-hover: #24713D; /* deeper hover / pressed */ --l-accent-tint: #E4F1E8; /* chip / active-card ground — deep-green ink sits on THIS */ --l-positive: #0E7C5A; /* success / positive metric */ /* Re-point the legacy purple accent ramp to GREEN in light mode only. Every rule that reads --primary-blue* / --royal-blue / --gradient-primary / --gradient-glow cascades to fern here with no per-rule edits. */ --primary-blue: #2F8F4E; /* was #6D4AE6 — fern fill/large-accent */ --primary-blue-light: #3EA85F; /* was #8B6BF0 — lighter fern (hover/glow) */ --primary-blue-dark: #24713D; /* was #5938C9 — deep pressed fern */ --royal-blue: #24713D; /* was #4B2FA8 — deepest fern */ --gradient-primary: linear-gradient(135deg, #2F8F4E 0%, #3EA85F 100%); --gradient-glow: radial-gradient(circle, rgba(47,143,78,0.30) 0%, transparent 70%); /* Shared white-card style — one elevation system, reused everywhere. Hairline border + two-layer soft shadow = real enterprise depth. */ --l-card-border: 1px solid var(--l-border); --l-card-shadow: 0 1px 2px rgba(16,18,32,0.04), 0 8px 24px -12px rgba(16,18,32,0.10); /* Legacy ramp wired to the new palette (compat cascade) */ --navy-900: var(--l-page); /* page background */ --navy-800: var(--l-surface); /* card / panel background */ --navy-700: var(--l-surface-2); /* raised surface, table headers */ --navy-600: var(--l-border); /* hover surface / deepest chrome */ --slate-500: var(--l-ink-3); /* tertiary text */ --slate-400: var(--l-ink-2); /* secondary text */ --slate-300: var(--l-ink); /* primary body text (AA on white) */ --slate-200: var(--l-ink-2); --white: var(--l-ink); /* heading / display text */ /* Gradients reworked for light surfaces */ --gradient-dark: linear-gradient(180deg, var(--l-surface) 0%, var(--l-surface-2) 100%); --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(244,245,248,0.96) 100%); /* Glass → light frosted */ --glass-bg: rgba(14,18,32,0.03); --glass-border: var(--l-border); --nav-mobile-bg: rgba(251,251,253,0.82); /* Shadows → real elevation on light (tuned to the card system) */ --shadow-sm: 0 1px 2px rgba(16,18,32,0.04); --shadow-md: 0 4px 16px rgba(16,18,32,0.08); --shadow-lg: 0 8px 24px -12px rgba(16,18,32,0.10); --shadow-xl: 0 20px 48px -16px rgba(16,18,32,0.14); /* Surface tints flip white washes → dark ink washes (on the new ink #0E1220) */ --tint-02: rgba(14,18,32,0.025); --tint-03: rgba(14,18,32,0.035); --tint-04: rgba(14,18,32,0.04); --tint-05: rgba(14,18,32,0.045); --tint-06: rgba(14,18,32,0.055); --tint-07: rgba(14,18,32,0.06); --tint-08: rgba(14,18,32,0.070); --tint-10: rgba(14,18,32,0.10); --tint-12: rgba(14,18,32,0.12); --tint-14: rgba(14,18,32,0.13); --tint-15: rgba(14,18,32,0.14); --tint-18: rgba(14,18,32,0.15); --tint-20: rgba(14,18,32,0.16); --tint-25: rgba(14,18,32,0.19); --tint-30: rgba(14,18,32,0.22); } /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; overflow-x: clip; /* clip ≠ scroll container — keeps position:sticky alive */ } body { font-family: var(--font-secondary); background: var(--navy-900); color: var(--slate-300); line-height: 1.6; overflow-x: hidden; overflow-x: clip; /* clip ≠ scroll container — keeps position:sticky alive */ } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--container-padding); } /* ===================================================== PRELOADER - IT CONSULTING THEME ===================================================== */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--navy-900); display: flex; align-items: center; justify-content: center; z-index: 10002; transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.75s cubic-bezier(0.4, 0, 0.2, 1); } .preloader.hidden { opacity: 0; visibility: hidden; } /* Seamless hand-off: the loader content gently lifts + fades as the panel dissolves to reveal the page underneath (instead of a flat cut). */ .preloader-content { transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .preloader.hidden .preloader-content { opacity: 0; transform: translateY(-14px) scale(0.985); } @media (prefers-reduced-motion: reduce) { .preloader-content { transition: opacity 0.4s ease; } .preloader.hidden .preloader-content { transform: none; } } /* Circuit Background */ .preloader-circuit { position: absolute; inset: 0; overflow: hidden; } .circuit-svg { width: 100%; height: 100%; opacity: 0.6; } .circuit-path { fill: none; stroke: rgba(109, 74, 230, 0.15); stroke-width: 1; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawCircuit 3s ease forwards; } .circuit-path.v { animation-delay: 0.5s; } @keyframes drawCircuit { to { stroke-dashoffset: 0; } } .circuit-nodes .node { fill: rgba(109, 74, 230, 0.3); animation: nodeGlow 2s ease-in-out infinite; } .circuit-nodes .node:nth-child(odd) { animation-delay: 0.5s; } .circuit-nodes .node:nth-child(3n) { animation-delay: 1s; } @keyframes nodeGlow { 0%, 100% { opacity: 0.3; r: 4; } 50% { opacity: 1; r: 6; } } .data-pulses .pulse { fill: var(--primary-blue); filter: drop-shadow(0 0 8px var(--primary-blue)); } /* Floating Tech Icons */ .preloader-icons { position: absolute; inset: 0; pointer-events: none; } .tech-icon { position: absolute; width: 50px; height: 50px; background: rgba(109, 74, 230, 0.1); border: 1px solid rgba(109, 74, 230, 0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary-blue); font-size: 1.2rem; animation: floatIcon 6s ease-in-out infinite; } .icon-1 { top: 15%; left: 10%; animation-delay: 0s; } .icon-2 { top: 20%; right: 15%; animation-delay: 1s; } .icon-3 { bottom: 25%; left: 8%; animation-delay: 2s; } .icon-4 { bottom: 20%; right: 12%; animation-delay: 0.5s; } .icon-5 { top: 50%; left: 5%; animation-delay: 1.5s; } .icon-6 { top: 45%; right: 8%; animation-delay: 2.5s; } @keyframes floatIcon { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; } 50% { transform: translateY(-20px) rotate(5deg); opacity: 1; } } /* Main Content */ .preloader-content { position: relative; z-index: 10; text-align: center; } /* Code Brackets Animation */ .code-brackets { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; } .bracket { font-family: 'Space Grotesk', monospace; font-size: 3rem; font-weight: 700; color: var(--primary-blue); text-shadow: 0 0 30px var(--primary-blue); } .bracket.left { animation: bracketLeft 2s ease-in-out infinite; } .bracket.slash { animation: bracketSlash 2s ease-in-out infinite; animation-delay: 0.3s; } .bracket.right { animation: bracketRight 2s ease-in-out infinite; animation-delay: 0.6s; } @keyframes bracketLeft { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(-10px); opacity: 1; } } @keyframes bracketSlash { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes bracketRight { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(10px); opacity: 1; } } .preloader-logo { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; margin-bottom: 15px; } .preloader-logo .logo-ark { color: var(--white); } .preloader-logo .logo-fortune { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Tagline */ .preloader-tagline { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 40px; } .tagline-text { font-size: 0.9rem; font-weight: 500; color: var(--slate-400); text-transform: uppercase; letter-spacing: 2px; animation: fadeInTag 1s ease forwards; opacity: 0; } .tagline-text:nth-child(1) { animation-delay: 0.5s; } .tagline-text:nth-child(3) { animation-delay: 0.7s; } .tagline-text:nth-child(5) { animation-delay: 0.9s; } @keyframes fadeInTag { to { opacity: 1; } } .tagline-divider { color: var(--primary-blue); font-size: 1.2rem; } .preloader-bar { width: 280px; height: 4px; background: var(--navy-700); border-radius: 2px; overflow: hidden; margin: 0 auto 20px; position: relative; } .preloader-bar::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 10px, var(--tint-03) 10px, var(--tint-03) 20px); } .preloader-progress { width: 0%; height: 100%; background: var(--gradient-primary); border-radius: 2px; animation: preloaderProgress 2.2s ease forwards; box-shadow: 0 0 20px var(--primary-blue); } @keyframes preloaderProgress { to { width: 100%; } } /* Status Text */ .preloader-status { height: 24px; } .status-text { color: var(--slate-400); font-size: 0.85rem; letter-spacing: 1px; font-family: 'Space Grotesk', monospace; transition: opacity 0.28s ease; } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal), box-shadow var(--transition-normal); } .navbar.scrolled { background: rgba(10, 15, 26, 0.95); backdrop-filter: var(--glass-blur); padding: 15px 0; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } [data-theme="light"] .navbar.scrolled { background: rgba(244, 246, 251, 0.9); box-shadow: 0 4px 30px rgba(15, 23, 42, 0.08); } .nav-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--container-padding); display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; display: flex; gap: 8px; } .nav-logo .logo-ark { color: var(--white); } .nav-logo .logo-fortune { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; align-items: center; gap: 40px; } .nav-link { font-size: 0.95rem; font-weight: 500; color: var(--slate-300); position: relative; padding: 8px 0; transition: color var(--transition-fast); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient-primary); transition: width var(--transition-normal); } .nav-link:hover, .nav-link.active { color: var(--white); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.nav-cta { background: var(--gradient-primary); padding: 12px 24px; border-radius: 50px; color: var(--white); display: flex; align-items: center; gap: 8px; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .nav-link.nav-cta::after { display: none; } .nav-link.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .nav-toggle { display: none; flex-direction: column; gap: 6px; padding: 10px; cursor: pointer; } .nav-toggle span { width: 28px; height: 2px; background: var(--white); transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal), box-shadow var(--transition-normal); } /* ===================================================== THEME TOGGLE (light / dark switch — ported & rethemed from the DME Reporting Tool; real