/* Inano Company – Futuristic Theme */ /* Fonts loaded via ; keep CSS focused and performant */ :root { --bg-0: #070a10; --bg-1: #0b111a; --bg-2: #0f1624; --text-0: #f2f7ff; --text-1: #b9c7dc; --primary-0: #64f6ff; --primary-1: #2fe0f0; --accent-0: #b573ff; --accent-1: #7a5cff; --success-0: #3ddc97; --warning-0: #ffca3a; --danger-0: #ff5c8a; --surface: rgba(255, 255, 255, 0.06); --surface-strong: rgba(255, 255, 255, 0.12); --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --radius-1: 12px; --radius-2: 18px; --radius-3: 28px; --grid-color: rgba(100, 246, 255, 0.12); --grid-color-2: rgba(181, 115, 255, 0.12); } * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text-0); background: radial-gradient(1200px 800px at 10% -10%, rgba(100, 246, 255, 0.08), transparent 60%), radial-gradient(1000px 700px at 110% 20%, rgba(181,115,255,0.08), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-0) 30%, var(--bg-2)); line-height: 1.6; } /* Subtle animated grid overlay */ .bg-grid { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(transparent 31px, var(--grid-color) 32px), linear-gradient(90deg, transparent 31px, var(--grid-color-2) 32px); background-size: 32px 32px, 32px 32px; mask-image: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.8), transparent 70%); opacity: 0.35; animation: gridFloat 18s linear infinite; } @keyframes gridFloat { 0% { transform: translateY(0); } 100% { transform: translateY(32px); } } /* Layout */ .container { width: min(1120px, 92vw); margin: 0 auto; } /* Header */ header.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(10px); background: linear-gradient(180deg, rgba(10,14,22,0.8), rgba(10,14,22,0.4)); border-bottom: 1px solid rgba(255,255,255,0.08); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-0); } .brand-logo { width: 36px; height: 36px; display: inline-block; } .brand-title { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 1.2rem; letter-spacing: 0.6px; } .nav-links { display: flex; align-items: center; gap: 14px; } .nav-links a { color: var(--text-1); text-decoration: none; padding: 10px 12px; border-radius: 10px; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .nav-links a:hover { color: var(--text-0); background: var(--surface); } .nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-1), var(--accent-0)); color: #05121a; text-decoration: none; font-weight: 600; box-shadow: 0 8px 24px rgba(100, 246, 255, 0.25), 0 6px 18px rgba(181,115,255, 0.18); } .mobile-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: var(--surface); color: var(--text-0); } /* Ensure mobile menu is hidden by default on desktop */ .mobile-menu { display: none; } /* Hero */ .hero { position: relative; padding: 80px 0 40px; } .hero-grid { position: absolute; inset: 0; background: radial-gradient(800px 500px at 70% 10%, rgba(100,246,255,0.08), transparent 60%), radial-gradient(700px 400px at 20% 30%, rgba(181,115,255,0.08), transparent 60%); filter: blur(24px); z-index: -1; } .hero .container { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 32px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(100, 246, 255, 0.15), rgba(181,115,255,0.15)); border: 1px solid rgba(255,255,255,0.12); color: var(--text-1); margin-bottom: 16px; } .hero h1 { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.15; margin: 8px 0 12px 0; } .hero p { color: var(--text-1); margin: 0 0 24px 0; } .hero-cta { display: flex; align-items: center; gap: 12px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); color: var(--text-0); } .btn-primary { background: linear-gradient(135deg, var(--primary-0), var(--accent-0)); color: #061219; border-color: transparent; box-shadow: 0 12px 28px rgba(100, 246, 255, 0.25), 0 6px 18px rgba(181,115,255, 0.18); } .btn-secondary { background: var(--surface); } /* Cards */ .card-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .card { grid-column: span 6; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); padding: 18px; box-shadow: var(--shadow); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-2px); } .card h3 { margin: 10px 0 6px 0; } .card p { color: var(--text-1); margin: 0; } .card .icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, rgba(100, 246, 255, 0.25), rgba(181,115,255,0.25)); border: 1px solid rgba(255,255,255,0.14); } /* Sections */ section { padding: 44px 0; } section .section-title { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 1.6rem; margin: 0 0 12px 0; } section .section-desc { color: var(--text-1); margin: 0 0 22px 0; } /* Footer */ footer.site-footer { margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); background: linear-gradient(0deg, rgba(10,14,22,0.6), rgba(10,14,22,0.2)); } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 22px 0; } .footer-col h4 { margin: 0 0 8px 0; } .footer-col a { color: var(--text-1); text-decoration: none; display: inline-block; padding: 6px 0; } .footer-bottom { color: var(--text-1); padding: 12px 0 20px; font-size: 0.9rem; } /* Utilities */ .muted { color: var(--text-1); } .surface { background: var(--surface); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); } .reveal { opacity: 0; transform: translateY(10px); transition: all .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* Responsive */ @media (max-width: 980px) { .hero .container { grid-template-columns: 1fr; } .card { grid-column: span 12; } .footer-content { grid-template-columns: 1fr; } } @media (max-width: 760px) { .nav-links { display: none; } .mobile-toggle { display: inline-grid; place-items: center; } .mobile-menu { position: fixed; inset: 64px 12px auto 12px; background: var(--surface); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 8px; display: none; z-index: 60; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 12px; color: var(--text-0); text-decoration: none; border-radius: 10px; } .mobile-menu a:hover { background: rgba(255,255,255,0.06); } }