/* ===================================================== 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', 'Space Grotesk', sans-serif; /* 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"] { /* Neutral ramp inverted */ --navy-900: #f4f6fb; /* page background */ --navy-800: #ffffff; /* card / panel background */ --navy-700: #eef2f8; /* raised surface, table headers */ --navy-600: #e2e8f0; /* hover surface, deepest */ --slate-500: #64748b; /* tertiary text */ --slate-400: #475569; /* secondary text */ --slate-300: #1e293b; /* primary body text */ --slate-200: #334155; --white: #0f172a; /* heading / display text */ /* Gradients reworked for light surfaces */ --gradient-dark: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%); --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(241,245,249,0.96) 100%); /* Glass → light frosted */ --glass-bg: rgba(15,23,42,0.03); --glass-border: rgba(15,23,42,0.1); --nav-mobile-bg: rgba(244,246,251,0.82); /* Shadows → real elevation on light */ --shadow-sm: 0 2px 8px rgba(15,23,42,0.06); --shadow-md: 0 4px 20px rgba(15,23,42,0.08); --shadow-lg: 0 8px 40px rgba(15,23,42,0.10); --shadow-xl: 0 20px 60px rgba(15,23,42,0.12); /* Surface tints flip white washes → dark washes */ --tint-02: rgba(15,23,42,0.025); --tint-03: rgba(15,23,42,0.035); --tint-04: rgba(15,23,42,0.04); --tint-05: rgba(15,23,42,0.045); --tint-06: rgba(15,23,42,0.055); --tint-07: rgba(15,23,42,0.06); --tint-08: rgba(15,23,42,0.070); --tint-10: rgba(15,23,42,0.10); --tint-12: rgba(15,23,42,0.12); --tint-14: rgba(15,23,42,0.13); --tint-15: rgba(15,23,42,0.14); --tint-18: rgba(15,23,42,0.15); --tint-20: rgba(15,23,42,0.16); --tint-25: rgba(15,23,42,0.19); --tint-30: rgba(15,23,42,0.22); } /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: var(--font-secondary); background: var(--navy-900); color: var(--slate-300); line-height: 1.6; overflow-x: hidden; } 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.6s ease, visibility 0.6s ease; } .preloader.hidden { opacity: 0; visibility: hidden; } /* 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; } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; transition: all 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: all var(--transition-normal); } /* ===================================================== THEME TOGGLE (light / dark switch — ported & rethemed from the DME Reporting Tool; real