/* ========================================================================== IONRAGE — Design System Dark by default. Light theme is applied by adding .light to . Only tokens + a handful of reusable component classes live here; everything else is Tailwind utilities in the markup. ========================================================================== */ :root { --bg: #0a0a0a; --bg-2: #101012; --surface: #16171a; --surface-2: #1d1f23; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --fg: #f4f5f7; --fg-muted: #9aa0aa; --accent: #2f81f7; --accent-soft: rgba(47, 129, 247, 0.14); --glass: rgba(12, 12, 14, 0.72); --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85); } html.light { --bg: #f7f8fa; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1f3f6; --border: rgba(10, 10, 10, 0.09); --border-strong: rgba(10, 10, 10, 0.2); --fg: #0d0f12; --fg-muted: #5b636e; --accent: #1462d8; --accent-soft: rgba(20, 98, 216, 0.1); --glass: rgba(255, 255, 255, 0.78); --shadow: 0 24px 60px -30px rgba(10, 20, 40, 0.35); } html { scroll-behavior: smooth; background: var(--bg); } body { background: var(--bg); color: var(--fg); font-family: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } [x-cloak] { display: none !important; } ::selection { background: var(--accent); color: #fff; } /* Focus visibility for keyboard users ----------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* Typography ------------------------------------------------------------- */ .display { letter-spacing: -0.045em; line-height: 0.95; font-weight: 700; } .eyebrow { letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.7rem; font-weight: 600; color: var(--accent); } .text-muted { color: var(--fg-muted); } /* Surfaces --------------------------------------------------------------- */ .surface { background: var(--surface); border: 1px solid var(--border); } .glass { background: var(--glass); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--border); } .card { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--border); border-radius: 1.5rem; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease; } .card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); } .chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-muted); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.7rem; font-weight: 500; white-space: nowrap; } .badge { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; padding: 0.7rem 1.35rem; font-size: 0.875rem; font-weight: 600; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; cursor: pointer; line-height: 1; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 84%, #fff); } .btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); } .btn-wa { background: #25d366; color: #06281a; border: 1px solid #25d366; } /* Nav links with animated underline -------------------------------------- */ .nav-link { position: relative; font-size: 0.875rem; font-weight: 500; color: var(--fg-muted); transition: color 0.25s ease; } .nav-link:hover, .nav-link[aria-current="page"] { color: var(--fg); } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } /* Scroll reveal ----------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .card, .btn { transition: none !important; transform: none !important; } html { scroll-behavior: auto; } } /* Skeleton loading -------------------------------------------------------- */ .skeleton { background: linear-gradient( 90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100% ); background-size: 200% 100%; animation: ionrage-shimmer 1.4s ease-in-out infinite; border-radius: 0.75rem; } @keyframes ionrage-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Hero ------------------------------------------------------------------- */ .hero-float { animation: ionrage-float 7s ease-in-out infinite; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); } @keyframes ionrage-float { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } } .grid-lines { background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 84px 84px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%); } /* Hide scrollbar for horizontal carousels --------------------------------- */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }