/* ===== API.MY.ID custom styles (on top of Tailwind CDN) ===== */ :root { --brand-from: #4338ca; /* indigo-700 */ --brand-to: #7c3aed; /* violet-600 */ } html { scroll-behavior: smooth; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Gradient hero background */ .hero-gradient { background: radial-gradient(1200px 600px at 80% -10%, rgba(124, 58, 237, .55), transparent 60%), linear-gradient(135deg, #312e81 0%, #4338ca 45%, #5b21b6 100%); } /* Wave divider under hero */ .wave-divider { display: block; width: 100%; height: 70px; margin-top: -1px; } /* Card hover lift */ .card-lift { transition: transform .25s ease, box-shadow .25s ease; } .card-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(67, 56, 202, .35); } /* Badge colors per product model */ .badge { font-size: .65rem; letter-spacing: .08em; font-weight: 700; padding: .25rem .6rem; border-radius: 9999px; text-transform: uppercase; } .badge-sub { background: #e0e7ff; color: #3730a3; } .badge-payg { background: #fef3c7; color: #92400e; } .badge-free { background: #d1fae5; color: #065f46; } .badge-ai { background: #ede9fe; color: #5b21b6; } .badge-special { background: #fee2e2; color: #991b1b; } /* Simple fade-up on scroll */ .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Pricing table */ .price-table th, .price-table td { padding: .9rem 1rem; } .price-table tbody tr { border-top: 1px solid #e5e7eb; } .price-table tbody tr:hover { background: #f8fafc; } /* Dashboard sidebar active item */ .dash-nav-item.active { background: #eef2ff; color: #4338ca; font-weight: 600; } /* Code block */ .code-block { background: #0f172a; color: #e2e8f0; border-radius: .75rem; padding: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.6; overflow-x: auto; } .code-block .tok-k { color: #93c5fd; } .code-block .tok-s { color: #86efac; } .code-block .tok-c { color: #64748b; } /* FAQ */ details.faq summary { cursor: pointer; list-style: none; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary .chev { transition: transform .2s ease; } details.faq[open] summary .chev { transform: rotate(180deg); } /* Usage bars in dashboard */ .usage-bar { transition: height .4s ease; } /* ============================================================ Developer theme (.dev on ) — public pages only. The dashboard keeps the original light theme. ============================================================ */ .dev { background-color: #020617; background-image: radial-gradient(circle, rgba(99, 102, 241, .08) 1px, transparent 1px); background-size: 28px 28px; } .dev ::selection { background: rgba(99, 102, 241, .4); color: #fff; } .dev input, .dev textarea, .dev select { background-color: #0f172a; color: #e2e8f0; } .dev input::placeholder, .dev textarea::placeholder { color: #475569; } /* Card hover: neon glow instead of drop shadow */ .dev .card-lift:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(99, 102, 241, .35), 0 18px 40px -18px rgba(99, 102, 241, .35); } /* Badges: dark tinted variants */ .dev .badge-sub { background: rgba(99, 102, 241, .15); color: #a5b4fc; } .dev .badge-payg { background: rgba(245, 158, 11, .15); color: #fcd34d; } .dev .badge-free { background: rgba(16, 185, 129, .15); color: #6ee7b7; } .dev .badge-ai { background: rgba(139, 92, 246, .18); color: #c4b5fd; } .dev .badge-special { background: rgba(239, 68, 68, .15); color: #fca5a5; } /* Pricing tables */ .dev .price-table tbody tr { border-top: 1px solid #1e293b; } .dev .price-table tbody tr:hover { background: rgba(30, 41, 59, .5); } /* Monospace accents */ .dev .mono, .dev .code-block, .dev .tool-input { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .dev .code-block { background: #0f172a; border: 1px solid #1e293b; } /* Terminal window (homepage hero) */ .dev .terminal { background: rgba(2, 6, 23, .85); border: 1px solid rgba(99, 102, 241, .35); border-radius: 1rem; box-shadow: 0 0 60px -12px rgba(99, 102, 241, .45); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.7; text-align: left; overflow-x: auto; } .dev .terminal-bar { display: flex; gap: .4rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid rgba(99, 102, 241, .2); } .dev .terminal-dot { width: .7rem; height: .7rem; border-radius: 9999px; } .dev .terminal pre { padding: 1.1rem 1.25rem; white-space: pre; } .dev .tk-p { color: #64748b; } /* prompt / punctuation */ .dev .tk-c { color: #38bdf8; } /* command */ .dev .tk-s { color: #86efac; } /* string / success */ .dev .tk-k { color: #c4b5fd; } /* key */ .dev .tk-n { color: #fcd34d; } /* number */ .dev .cursor { display: inline-block; width: .55em; height: 1.1em; background: #86efac; vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* "Coming soon" — the endpoint behind this product is still a 501 stub. */ .badge-soon { background: rgba(148, 163, 184, .15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, .35); }