/* ============================================================ GLOBAL CORPORATION AI SOLUTIONS — COMMON STYLESHEET common.css | Shared across all pages ============================================================ */ /* ── GOOGLE FONTS are loaded per-page in ── */ /* ── RESET & ROOT VARIABLES ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --deep-navy: #0A1628; --charcoal: #1A1F2E; --electric-blue: #3B82F6; --purple-accent: #8B5CF6; --white: #FFFFFF; --off-white: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-600: #475569; --gray-800: #1E293B; --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); --gradient-dark: linear-gradient(135deg, #0A1628 0%, #1A1F2E 100%); --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Plus Jakarta Sans', sans-serif; --section-padding: 70px; --container-width: 1280px; --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.2s ease; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-primary); background: var(--white); color: var(--gray-800); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── TYPOGRAPHY — JUSTIFIED TEXT ── */ p { text-align: justify; text-justify: inter-word; } /* Centre-aligned contexts should NOT justify */ .hero p, .hero-content p, .cta-section p, .section-description, .page-hero p, .legal-hero p, .contact-card-content p, .stat-label, .stat-card .label, .footer-brand p, .value-card p, .mv-card p { text-align: center; text-justify: unset; } /* Left-aligned specific contexts */ .footer-brand p, .philosophy-content p, .philosophy-highlight p, .leader-detail .bio p, .tech-list li, .form-note, .hours-list li, .service-features li { text-align: left; text-justify: unset; } /* Sections that are layout-justified already */ .footer-bottom p { text-align: left; } /* ── CONTAINER ── */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } /* ── SECTION SHARED ── */ .section { padding: var(--section-padding) 0; } .section-header { text-align: center; max-width: 800px; margin: 0 auto 60px; } .section-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); padding: 6px 16px; border-radius: 20px; color: var(--electric-blue); font-size: 13px; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; } .section-title { font-size: 48px; font-weight: 800; color: var(--gray-800); margin-bottom: 20px; font-family: var(--font-display); line-height: 1.2; text-align: center; } .section-description { font-size: 18px; color: var(--gray-600); line-height: 1.8; text-align: center; } .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── NAVIGATION ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: var(--transition-smooth); background: transparent; } .navbar.scrolled, .navbar.solid { background: rgba(10, 22, 40, 0.95); backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0,0,0,0.1); padding: 16px 0; } .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .logo { text-decoration: none; display: flex; align-items: center; gap: 12px; transition: var(--transition-fast); line-height: 1; } .logo:hover { opacity: 0.9; } .logo-icon { width: 40px; height: 40px; background: var(--gradient-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--white); } .nav-menu { display: flex; list-style: none; gap: 40px; align-items: center; } .nav-menu a { color: var(--white); text-decoration: none; font-weight: 500; font-size: 15px; transition: var(--transition-fast); position: relative; padding: 8px 0; } .nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--electric-blue); transition: var(--transition-fast); } .nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; } .nav-menu a:hover, .nav-menu a.active { color: var(--electric-blue); } /* Contact Us nav button */ .btn-nav-primary { background: var(--gradient-primary) !important; color: var(--white) !important; padding: 11px 26px; border-radius: 50px; font-weight: 700; font-size: 14px; text-decoration: none; transition: var(--transition-fast); box-shadow: 0 4px 20px rgba(59,130,246,0.45); white-space: nowrap; } .btn-nav-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(59,130,246,0.65); } .btn-nav-primary::after, .btn-nav-primary.active::after { display: none !important; } /* hide Industries from nav */ .nav-item-industries { display: none !important; } /* ── MOBILE MENU TOGGLE ── */ .mobile-menu-toggle { display: none; background: none; border: none; color: var(--white); font-size: 26px; cursor: pointer; padding: 4px; line-height: 1; } /* ── MOBILE MENU DRAWER ── */ .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .mobile-menu-overlay.open { display: flex !important; } /* Dark backdrop */ .mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(5, 12, 28, 0.75); backdrop-filter: blur(4px); animation: backdropIn 0.3s ease forwards; } @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } } /* Slide-in drawer from left */ .mobile-menu-drawer { position: relative; z-index: 1; width: 280px; max-width: 82vw; height: 100%; background: #0d1e38; border-right: 1px solid rgba(59,130,246,0.2); display: flex; flex-direction: column; overflow-y: auto; animation: drawerIn 0.32s cubic-bezier(0.16,1,0.3,1) forwards; box-shadow: 4px 0 32px rgba(0,0,0,0.4); } @keyframes drawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* Drawer header */ .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; min-height: 62px; background: #0a1628; } .mobile-menu-logo { display: block; height: 54px; width: auto; max-width: 170px; object-fit: contain; } .mobile-menu-close { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #fff; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; transition: all 0.2s ease; flex-shrink: 0; } .mobile-menu-close:hover { background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.5); color: #3B82F6; } /* Nav items */ .mobile-menu-nav { display: flex; flex-direction: column; padding: 12px 0; flex: 1; overflow-y: auto; } .mobile-menu-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 20px; color: rgba(255,255,255,0.72); text-decoration: none; font-size: 15px; font-weight: 500; border-left: 3px solid transparent; transition: all 0.18s ease; white-space: nowrap; } .mobile-menu-nav a i { width: 18px; text-align: center; font-size: 14px; color: rgba(255,255,255,0.35); transition: color 0.18s ease; flex-shrink: 0; } .mobile-menu-nav a:hover { color: #fff; background: rgba(59,130,246,0.1); border-left-color: #3B82F6; } .mobile-menu-nav a:hover i { color: #3B82F6; } .mobile-menu-nav a.active { color: #3B82F6; background: rgba(59,130,246,0.1); border-left-color: #3B82F6; font-weight: 600; } .mobile-menu-nav a.active i { color: #3B82F6; } .mobile-menu-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 8px 20px; } /* CTA footer button */ .mobile-menu-footer { padding: 16px 18px; border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; background: #0a1628; } .mobile-menu-footer a { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 20px; background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #fff; text-decoration: none; border-radius: 10px; font-size: 15px; font-weight: 700; transition: all 0.2s ease; box-shadow: 0 4px 18px rgba(59,130,246,0.35); white-space: nowrap; } .mobile-menu-footer a:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(59,130,246,0.5); } /* ── PAGE HERO (inner pages) ── */ .page-hero { padding: 160px 0 80px; background: var(--gradient-dark); text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.15) 0%, transparent 70%); pointer-events: none; } .page-hero h1 { font-size: 52px; font-weight: 800; color: var(--white); font-family: var(--font-display); margin-bottom: 16px; line-height: 1.2; text-align: center; } .page-hero p { font-size: 20px; color: var(--gray-300); max-width: 700px; margin: 0 auto; line-height: 1.8; text-align: center; } /* ── BUTTONS ── */ .btn-primary { background: var(--gradient-primary); color: var(--white); padding: 16px 40px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; transition: var(--transition-smooth); display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 40px rgba(59,130,246,0.3); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(59,130,246,0.5); } .btn-secondary { background: rgba(255,255,255,0.1); color: var(--white); padding: 16px 40px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; transition: var(--transition-smooth); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); } .btn-secondary:hover { background: rgba(255,255,255,0.15); transform: translateY(-3px); } .btn-white { background: var(--white); color: var(--electric-blue); padding: 16px 40px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; transition: var(--transition-smooth); box-shadow: 0 10px 40px rgba(0,0,0,0.2); } .btn-white:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(0,0,0,0.3); } /* ── CTA SECTION ── */ .cta-section { background: var(--gradient-primary); padding: 100px 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,'); opacity: 0.3; pointer-events: none; } .cta-content { position: relative; z-index: 10; max-width: 800px; margin: 0 auto; } .cta-section h2 { font-size: 48px; font-weight: 800; color: var(--white); margin-bottom: 20px; font-family: var(--font-display); text-align: center; } .cta-section p { font-size: 20px; color: rgba(255,255,255,0.9); margin-bottom: 40px; text-align: center; } .cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* ── FOOTER ── */ .footer { background: var(--deep-navy); padding: 80px 0 30px; color: var(--gray-300); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; } .footer-brand h3 { font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 16px; font-family: var(--font-display); } .footer-brand p { font-size: 15px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-300); text-align: left; } .social-links { display: flex; gap: 12px; } .social-link { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: var(--transition-smooth); } .social-link:hover { background: var(--electric-blue); transform: translateY(-3px); } .footer-column h4 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-links a { color: var(--gray-300); text-decoration: none; font-size: 14px; transition: var(--transition-fast); display: flex; align-items: center; gap: 8px; } .footer-links a:hover { color: var(--electric-blue); padding-left: 8px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; } .footer-bottom p { font-size: 13px; color: var(--gray-300); flex: 0 0 auto; text-align: left; } .footer-legal { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; } .footer-legal a { color: var(--gray-300); text-decoration: none; font-size: 13px; transition: color 0.2s; white-space: nowrap; } .footer-legal a:hover { color: var(--electric-blue); } /* ── SCROLL ANIMATIONS ── */ [data-animate] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } [data-animate].animated { opacity: 1; transform: translateY(0); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%,100% { transform: translate(0,0); } 25% { transform: translate(100px,-100px); } 50% { transform: translate(-50px,50px); } 75% { transform: translate(50px,100px); } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } .loading { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; } /* ── VALUES GRID (shared between index + about) ── */ .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .value-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: 16px; padding: 32px; text-align: center; transition: var(--transition-smooth); } .value-card:hover { border-color: var(--electric-blue); box-shadow: 0 15px 50px rgba(59,130,246,0.1); transform: translateY(-8px); } .value-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--white); font-size: 24px; box-shadow: 0 8px 24px rgba(59,130,246,0.3); } .value-card h4 { font-size: 18px; font-weight: 700; color: var(--gray-800); margin-bottom: 10px; font-family: var(--font-display); } .value-card p { font-size: 14px; color: var(--gray-600); line-height: 1.7; } /* ── LEGAL PAGES ── */ .legal-hero { padding: 160px 0 70px; background: var(--gradient-dark); text-align: center; color: var(--white); } .legal-hero h1 { font-size: 52px; font-weight: 800; margin-bottom: 14px; font-family: var(--font-display); text-align: center; } .legal-hero .date { font-size: 15px; color: var(--gray-300); } .legal-content { padding: 70px 0; } .legal-section { margin-bottom: 52px; } .legal-section h2 { font-size: 28px; font-weight: 700; color: var(--gray-800); margin-bottom: 18px; font-family: var(--font-display); padding-bottom: 12px; border-bottom: 2px solid var(--gray-200); } .legal-section h3 { font-size: 20px; font-weight: 600; color: var(--electric-blue); margin-bottom: 14px; margin-top: 28px; } .legal-section p { font-size: 16px; color: var(--gray-600); line-height: 1.9; margin-bottom: 18px; text-align: justify; text-justify: inter-word; } .legal-section ul, .legal-section ol { margin: 16px 0; padding-left: 24px; } .legal-section li { font-size: 16px; color: var(--gray-600); line-height: 1.9; margin-bottom: 10px; } .highlight-box { background: var(--gray-100); border-left: 4px solid var(--electric-blue); padding: 24px 32px; border-radius: 10px; margin: 32px 0; } .highlight-box p { margin-bottom: 0; font-weight: 500; color: var(--gray-800); text-align: left; } .contact-box { background: var(--gradient-primary); color: var(--white); padding: 48px; border-radius: 20px; text-align: center; margin-top: 60px; } .contact-box h3 { font-size: 28px; font-weight: 700; margin-bottom: 16px; color: var(--white); font-family: var(--font-display); } .contact-box p { color: rgba(255,255,255,0.9); margin-bottom: 10px; font-size: 16px; text-align: center; } .contact-box a { color: var(--white); text-decoration: underline; } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { :root { --section-padding: 60px; } .footer-grid { grid-template-columns: repeat(2,1fr); } .section-title { font-size: 40px; } .page-hero h1 { font-size: 42px; } .values-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { .nav-menu { display: none !important; } .mobile-menu-toggle { display: block !important; } .section-title { font-size: 32px; } .cta-section h2 { font-size: 30px; } .page-hero h1 { font-size: 32px; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-legal { justify-content: flex-start; gap: 12px; } .legal-hero h1 { font-size: 30px; } /* Keep justify on tablets, only disable below 480px for very small screens */ } @media (max-width: 480px) { .values-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } /* On very small screens, left-align is more readable than justify */ p { text-align: left; text-justify: unset; } .legal-section p { text-align: left; text-justify: unset; } .product-description { text-align: left; text-justify: unset; } } /* ============================================================ PRO SAAS HERO ANIMATIONS ============================================================ */ to { transform: translate(-80px,-60px) scale(1.2); } } /* ── Floating orbs ── */ .hero-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: 0; animation: orbFloat var(--orb-duration, 8s) ease-in-out infinite; animation-delay: var(--orb-delay, 0s); } .hero-orb-1 { width: 6px; height: 6px; background: #3B82F6; top: 20%; left: 15%; --orb-duration: 9s; --orb-delay: 0s; animation-name: orbFloat1; } .hero-orb-2 { width: 4px; height: 4px; background: #8B5CF6; top: 60%; left: 80%; --orb-duration: 11s; --orb-delay: 1.5s; animation-name: orbFloat2; } .hero-orb-3 { width: 8px; height: 8px; background: #06B6D4; top: 35%; left: 70%; --orb-duration: 13s; --orb-delay: 3s; animation-name: orbFloat1; } .hero-orb-4 { width: 3px; height: 3px; background: #A78BFA; top: 75%; left: 25%; --orb-duration: 10s; --orb-delay: 0.8s; animation-name: orbFloat2; } .hero-orb-5 { width: 5px; height: 5px; background: #60A5FA; top: 45%; left: 45%; --orb-duration: 14s; --orb-delay: 2s; animation-name: orbFloat1; } .hero-orb-6 { width: 4px; height: 4px; background: #C084FC; top: 15%; left: 60%; --orb-duration: 12s; --orb-delay: 4s; animation-name: orbFloat2; } .hero-orb-7 { width: 6px; height: 6px; background: #38BDF8; top: 80%; left: 55%; --orb-duration: 10s; --orb-delay: 1s; animation-name: orbFloat1; } .hero-orb-8 { width: 3px; height: 3px; background: #818CF8; top: 50%; left: 10%; --orb-duration: 16s; --orb-delay: 2.5s; animation-name: orbFloat2; } @keyframes orbFloat1 { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 0.7; } 50% { transform: translate(40px,-70px); opacity: 0.9; } 90% { opacity: 0.6; } 100% { transform: translate(-20px,40px); opacity: 0; } } @keyframes orbFloat2 { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 0.6; } 50% { transform: translate(-50px,30px); opacity: 0.8; } 90% { opacity: 0.5; } 100% { transform: translate(30px,-50px); opacity: 0; } } to { opacity: 1; } } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ── Content entrance animations ── */ .hero-anim-1 { animation: heroSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s both; } .hero-anim-2 { animation: heroSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s both; } .hero-anim-3 { animation: heroSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both; } .hero-anim-4 { animation: heroSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.55s both; } .hero-badge-anim { animation: heroBadgePop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.05s both; } @keyframes heroSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroBadgePop { from { opacity: 0; transform: scale(0.7) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } 50% { opacity: 0; } } /* ── Page hero (inner pages) — floating badge ── */ .page-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); padding: 8px 20px; border-radius: 50px; color: var(--electric-blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; animation: heroBadgePop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.05s both; } /* ── Counter animation helper ── */ .hero-counter { display: inline-block; animation: countUp 1.5s cubic-bezier(0.16,1,0.3,1) forwards; } 40%,100% { left: 150%; } } /* ── Hero section ensure content above animations ── */ .hero .hero-content, .page-hero .container, .products-hero .hero-content { position: relative; z-index: 10; }