/* PIJ Logger — Global Styles Light / dark via CSS custom properties. .dark on activates dark palette. ============================================================ */ /* ---- CSS Variables ---- */ :root { --bg: #f8f9fa; --bg-card: #ffffff; --bg-nav: #ffffff; --text: #1a1a2e; --text-muted: #6b7280; --border: #e5e7eb; --accent: #6366f1; --accent-hover: #4f46e5; --accent-light: #eef2ff; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --danger-hover: #dc2626; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 4px 16px rgba(0,0,0,0.08); --radius: 10px; --radius-sm: 6px; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; } html.dark { --bg: #0f0f1a; --bg-card: #1a1a2e; --bg-nav: #12121f; --text: #e2e8f0; --text-muted: #94a3b8; --border: #2d2d4a; --accent: #818cf8; --accent-hover: #6366f1; --accent-light: #1e1b4b; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow: 0 4px 16px rgba(0,0,0,0.4); } /* ---- Base Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; transition: background 0.2s, color 0.2s; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } /* ---- Navbar ---- */ .navbar { background: var(--bg-nav); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } .navbar__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 60px; display: flex; align-items: center; gap: 1rem; } .navbar__logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .navbar__logo:hover { text-decoration: none; } .navbar__logo-mark { flex-shrink: 0; border-radius: 8.5px; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .navbar__logo:hover .navbar__logo-mark { transform: rotate(-6deg) scale(1.06); } .navbar__logo-text { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .navbar__logo-accent { font-weight: 600; color: var(--text-muted); } /* Hamburger — hidden on desktop, shown ≤768px. */ .navbar__toggle { display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .navbar__toggle span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; } .navbar.is-open .navbar__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar.is-open .navbar__toggle span:nth-child(2) { opacity: 0; } .navbar.is-open .navbar__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .navbar__nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } .navbar__nav a { color: var(--text-muted); padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; transition: background 0.15s, color 0.15s; } .navbar__nav a:hover { background: var(--accent-light); color: var(--accent); text-decoration: none; } /* ---- Theme Toggle ---- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; transition: border-color 0.15s, background 0.15s; } .theme-toggle__icon { font-size: 1rem; line-height: 1; } .theme-toggle__label { display: none; } /* desktop: icon only */ /* Navbar groups — inline on desktop, sectioned on mobile. */ .navbar__group { display: flex; align-items: center; gap: 0.25rem; } .navbar__group--actions { gap: 0.5rem; margin-left: 0.5rem; } .theme-toggle:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; border: none; cursor: pointer; transition: background 0.15s, transform 0.1s; line-height: 1; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, #6366F1 0%, #7C3AED 100%); color: #fff; box-shadow: 0 2px 10px rgba(99, 102, 241, 0.28); transition: box-shadow 0.18s, transform 0.1s, filter 0.18s; } .btn-primary:hover { box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4); filter: brightness(1.06); transform: translateY(-1px); } .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger-hover); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; padding: 0.35rem 0.75rem; } .btn-ghost:hover { border-color: var(--border); color: var(--text); } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; } /* ---- Forms ---- */ .form-group { margin-bottom: 1.25rem; } label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.4rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 0.6rem 0.875rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.9rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } .form-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.35rem; } /* ---- Cards ---- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .card-title { font-size: 1.1rem; font-weight: 600; } /* ---- Page Layout ---- */ .page-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; } .page-header { margin-bottom: 2rem; } .page-header h1 { font-size: 1.75rem; font-weight: 700; } .page-header p { color: var(--text-muted); margin-top: 0.35rem; } /* ---- Alerts ---- */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; border: 1px solid transparent; margin-bottom: 1rem; } .alert-error { background: #fef2f2; border-color: #fecaca; color: #dc2626; } .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; } .alert-info { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } html.dark .alert-error { background: #2d0a0a; border-color: #7f1d1d; color: #fca5a5; } html.dark .alert-success { background: #052e16; border-color: #14532d; color: #4ade80; } html.dark .alert-info { background: var(--accent-light); border-color: var(--accent); } /* ---- Badge / Pill ---- */ .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .badge-live { background: #dcfce7; color: #16a34a; } .badge-staging { background: #fef9c3; color: #ca8a04; } .badge-dev { background: var(--accent-light); color: var(--accent); } html.dark .badge-live { background: #052e16; color: #4ade80; } html.dark .badge-staging { background: #422006; color: #fbbf24; } /* ---- Spinner ---- */ .spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Empty State ---- */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state__icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .empty-state__title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text); } /* ---- Tables ---- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--accent-light); } /* ---- Code block ---- */ pre, code { font-family: var(--font-mono); font-size: 0.85rem; } pre { background: #0d0d1a; color: #c9d1d9; padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); overflow-x: auto; line-height: 1.7; } code { background: var(--bg); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.85em; } pre code { background: none; padding: 0; } /* Syntax-ish colors in code blocks */ .kw { color: #ff7b72; } .str { color: #a5d6ff; } .cmt { color: #8b949e; } .fn { color: #d2a8ff; } .var { color: #ffa657; } .num { color: #79c0ff; } /* ---- Hero / Landing ---- */ .hero { position: relative; text-align: center; padding: 5.5rem 1.5rem 4rem; overflow: hidden; } /* Soft brand glow behind the hero. */ .hero::before { content: ""; position: absolute; top: -180px; left: 50%; width: 680px; height: 460px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.22), rgba(99, 102, 241, 0.10) 45%, transparent 70%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero__eyebrow { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 0.25rem 0.85rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.25rem; } .hero__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.25rem; } .hero__title .highlight { background: linear-gradient(120deg, #6366F1 0%, #7C3AED 45%, #A855F7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero__subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 560px; margin: 0 auto 2rem; line-height: 1.65; } .hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Features grid */ .features { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s; } .feature-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .feature-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #6366F1, #A855F7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } .feature-card__icon svg { width: 22px; height: 22px; } .feature-card__title { font-weight: 600; margin-bottom: 0.5rem; } .feature-card__body { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* Code showcase section */ .code-section { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; } .code-section h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; } .code-section__tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .code-tab { background: none; border: none; padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.875rem; color: var(--text-muted); transition: background 0.15s, color 0.15s; } .code-tab.active, .code-tab:hover { background: var(--accent-light); color: var(--accent); } .code-panel { display: none; } .code-panel.active { display: block; } /* Auth pages */ .auth-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .auth-card { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2.25rem; box-shadow: var(--shadow); } .auth-card__brand { display: inline-flex; margin-bottom: 1.25rem; border-radius: 12px; filter: drop-shadow(0 6px 16px rgba(124, 58, 237, 0.35)); } .auth-card__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .auth-card__sub { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.75rem; } /* Dashboard */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .project-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.75rem; transition: box-shadow 0.2s, transform 0.2s; } .project-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .project-card__name { font-weight: 600; font-size: 1.05rem; } .project-card__meta { font-size: 0.82rem; color: var(--text-muted); } .project-card__actions { display: flex; gap: 0.5rem; margin-top: auto; } /* Create project modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 460px; box-shadow: var(--shadow); } .modal-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.25rem; } .modal-footer { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; } .modal-body { color: var(--text-muted); line-height: 1.5; margin: -0.5rem 0 0; } /* Tokens page */ .token-reveal { background: #0d0d1a; color: #a5d6ff; font-family: var(--font-mono); font-size: 0.85rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); word-break: break-all; margin-top: 0.5rem; position: relative; } .token-copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; } /* Sub-navigation within project */ .subnav { display: flex; gap: 0.25rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 0; } .subnav a { color: var(--text-muted); padding: 0.6rem 1rem; font-size: 0.9rem; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; } .subnav a:hover, .subnav a.active { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; } /* Danger zone */ .danger-zone { border: 1px solid var(--danger); border-radius: var(--radius); padding: 1.5rem; margin-top: 2rem; } .danger-zone__title { color: var(--danger); font-weight: 600; margin-bottom: 0.75rem; } /* Loading placeholder */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); height: 1rem; } @keyframes shimmer { to { background-position: -200% 0; } } /* ---- Plan Badge (navbar) ---- */ .plan-badge { display: inline-block; box-sizing: border-box; /* Fixed min-width fits the longest label (BUSINESS) so the box never grows when the real plan replaces the skeleton — no header jitter / button shift. */ min-width: 5.5rem; text-align: center; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 0.25rem; transition: background 0.2s, color 0.2s; /* Default state = loading skeleton (shimmer, no visible text). loadPlanBadge() adds a .plan-badge-- class that overrides this once the plan resolves. */ color: transparent; background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* Real plan applied → stop the skeleton shimmer. */ .plan-badge--free, .plan-badge--pro, .plan-badge--business { animation: none; } .plan-badge--free { background: var(--border); color: var(--text-muted); } .plan-badge--pro { background: #dbeafe; color: #1d4ed8; } .plan-badge--business { background: #ede9fe; color: #7c3aed; } html.dark .plan-badge--free { background: #2d2d4a; color: #94a3b8; } html.dark .plan-badge--pro { background: #1e3a5f; color: #93c5fd; } html.dark .plan-badge--business { background: #2e1065; color: #c4b5fd; } /* ---- Navbar active link ---- */ .navbar__nav a.active { background: var(--accent-light); color: var(--accent); text-decoration: none; } /* ---- Toast Notifications ---- */ .toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; max-width: 360px; width: calc(100vw - 2.5rem); } .toast { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.875rem; line-height: 1.45; opacity: 0; transform: translateX(1.5rem); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: auto; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); } .toast--visible { opacity: 1; transform: translateX(0); } .toast--hiding { opacity: 0; transform: translateX(1.5rem); } .toast--success { border-color: var(--success); background: #f0fdf4; color: #15803d; } .toast--error { border-color: var(--danger); background: #fef2f2; color: #dc2626; } .toast--info { border-color: var(--accent); background: var(--accent-light); color: var(--accent); } html.dark .toast--success { background: #052e16; color: #4ade80; border-color: #14532d; } html.dark .toast--error { background: #2d0a0a; color: #fca5a5; border-color: #7f1d1d; } html.dark .toast--info { background: var(--accent-light); color: var(--accent); border-color: var(--accent); } .toast__icon { font-weight: 700; flex-shrink: 0; width: 1.1rem; text-align: center; } .toast__msg { flex: 1; } .toast__close { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: inherit; opacity: 0.6; padding: 0; flex-shrink: 0; transition: opacity 0.15s; } .toast__close:hover { opacity: 1; } /* ---- Profile Page ---- */ .profile-account-card {} .profile-account-body { display: flex; align-items: center; gap: 1.25rem; } .profile-avatar { width: 3.5rem; height: 3.5rem; border-radius: 16px; background: linear-gradient(135deg, #6366F1, #A855F7); color: #fff; font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); } .profile-email { font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; } .profile-since { font-size: 0.82rem; color: var(--text-muted); } .profile-plan-card {} .profile-plan-body {} .profile-plan-name-wrap { display: flex; align-items: center; margin-bottom: 1.25rem; } .profile-plan-name { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } .plan-name--free { color: var(--text-muted); } .plan-name--pro { color: #1d4ed8; } .plan-name--business { color: #7c3aed; } html.dark .plan-name--pro { color: #93c5fd; } html.dark .plan-name--business { color: #c4b5fd; } .badge-status--active { background: #dcfce7; color: #16a34a; } .badge-status--cancelled { background: #fee2e2; color: #dc2626; } .badge-status--trialing { background: #fef9c3; color: #ca8a04; } html.dark .badge-status--active { background: #052e16; color: #4ade80; } html.dark .badge-status--cancelled { background: #2d0a0a; color: #fca5a5; } html.dark .badge-status--trialing { background: #422006; color: #fbbf24; } .profile-plan-limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .plan-limit-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.65rem 0.875rem; display: flex; justify-content: space-between; align-items: center; } .plan-limit-label { font-size: 0.8rem; color: var(--text-muted); } .plan-limit-value { font-size: 0.875rem; font-weight: 600; color: var(--text); } /* ---- Pricing / Subscription Page ---- */ .billing-notice { display: flex; align-items: center; gap: 0.6rem; background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius-sm); padding: 0.65rem 1rem; font-size: 0.875rem; margin-bottom: 2rem; } .billing-notice__icon { font-size: 1rem; flex-shrink: 0; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .pricing-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; position: relative; } .pricing-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .pricing-card--current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.12), var(--shadow); } .pricing-card--pro { border-color: #3b82f6; } html.dark .pricing-card--pro { border-color: #2563eb; } .pricing-card--business { border-color: #8b5cf6; } html.dark .pricing-card--business { border-color: #7c3aed; } .pricing-card__header { margin-bottom: 1.5rem; } .pricing-card__name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--text); } .pricing-card__price { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: 0.4rem; } .pricing-card__desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; } .pricing-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.55rem; } .pricing-card__feature { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .pricing-card__feature:last-child { border-bottom: none; } .feature-label { color: var(--text-muted); } .feature-value { font-weight: 600; color: var(--text); text-align: right; } .pricing-card__cta { margin-top: auto; } .pricing-card__cta .btn { width: 100%; justify-content: center; } .btn-current { background: var(--bg); border-color: var(--accent); color: var(--accent); } html.dark .btn-current { background: var(--accent-light); } .subscription-actions { text-align: center; padding: 1rem 0; border-top: 1px solid var(--border); } /* ---- Improved button hover transitions ---- */ .btn { transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s, color 0.15s; } .btn-primary:hover { box-shadow: 0 4px 12px rgba(99,102,241,0.3); transform: translateY(-1px); } .btn-secondary:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.97) !important; box-shadow: none !important; } /* ---- Improved card hover ---- */ .card { transition: box-shadow 0.2s; } /* ---- Table row transitions ---- */ tr { transition: background 0.12s; } /* ---- Responsive ---- */ /* Tablet & mobile: collapse the navbar into a hamburger dropdown. */ @media (max-width: 768px) { .navbar__toggle { display: flex; } /* Dropdown panel. */ .navbar__nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: 0.5rem; background: var(--bg-nav); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .navbar.is-open .navbar__nav { display: flex; } /* Each section is a clean vertical stack; a divider separates actions. */ .navbar__group { flex-direction: column; align-items: stretch; gap: 0.15rem; margin-left: 0; } .navbar__group--actions { gap: 0.6rem; margin: 0.6rem 0 0.15rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } /* Links → full-width tappable rows. */ .navbar__group--links a { display: block; padding: 0.8rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 500; } /* Auth buttons → full-width, stacked. */ .navbar__nav .btn { width: 100%; justify-content: center; } #nav-auth-slot { display: flex; flex-direction: column; gap: 0.6rem; } /* Plan badge gets its own labelled row above the actions. */ .navbar__group--actions .plan-badge { align-self: flex-start; margin-bottom: 0.15rem; } /* Theme toggle → a settings-style row: label left, icon right. */ .theme-toggle { width: 100%; justify-content: space-between; padding: 0.8rem 0.85rem; font-size: 0.95rem; } .theme-toggle__label { display: inline; order: 1; font-weight: 500; color: var(--text); } .theme-toggle__icon { order: 2; font-size: 1.15rem; } /* Subnav (project detail) scrolls instead of clipping. */ .subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Stack two-column profile/account layouts. */ .profile-account-body { flex-direction: column; align-items: flex-start; text-align: left; } } /* Phone refinements. */ @media (max-width: 600px) { .navbar__inner { padding: 0 1rem; } .page-wrap { padding: 1.5rem 1rem; } .hero { padding: 3rem 1rem 2rem; } .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; justify-content: center; } .pricing-grid { grid-template-columns: 1fr; } .card { padding: 1.25rem; } .auth-card { padding: 1.5rem; } .toast-container { top: auto; bottom: 1rem; right: 1rem; left: 1rem; max-width: none; width: auto; } } /* Avoid horizontal overflow from any wide child (code blocks, pre, etc.). */ pre, code { max-width: 100%; } .code-block, .code-section pre { overflow-x: auto; } /* ---- Metrics dashboards ---- */ .metrics-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .metrics-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem; } .range-tabs { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .range-tab { background: none; border: none; color: var(--text-muted); padding: 0.35rem 0.75rem; border-radius: 5px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .range-tab:hover { color: var(--text); } .range-tab.active { background: var(--accent); color: #fff; } .metrics-note { background: var(--accent-light); color: var(--accent); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-bottom: 1.25rem; } .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); } .stat-card__value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; } .stat-card__label { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; } .metrics-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } .chart-box { width: 100%; } /* SVG chart internals */ .mc-grid { stroke: var(--border); stroke-width: 1; } .mc-axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); } .mc-legend { display: flex; gap: 1rem; justify-content: center; margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); } .mc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; } .mc-empty { color: var(--text-muted); text-align: center; padding: 2.5rem 1rem; font-size: 0.9rem; } .mc-bar-row { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 0.6rem; padding: 0.45rem 0; } .mc-bar-label { font-size: 0.78rem; font-weight: 700; } .mc-bar-track { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; } .mc-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s; } .mc-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--text-muted); } /* Interactive chart helpers */ .is-clickable { cursor: pointer; } /* Crosshair line rendered inside the SVG */ .mc-crosshair { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; } /* Floating tooltip */ .mc-tooltip { position: absolute; pointer-events: none; display: none; background: var(--card-bg, #1a1a2e); border: 1px solid var(--border); border-radius: 6px; padding: 0.55rem 0.75rem; font-size: 0.78rem; color: var(--text); min-width: 120px; max-width: 200px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 20; line-height: 1.5; } .mc-tooltip__hd { font-weight: 600; margin-bottom: 0.25rem; color: var(--text); } .mc-tooltip__row { font-variant-numeric: tabular-nums; } .mc-tooltip__empty { color: var(--text-muted); font-style: italic; } .mc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } /* Chart container must be position:relative so the tooltip can use position:absolute */ .chart-box { position: relative; } /* Confirmation modal for drill-down navigation */ .mc-modal__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: center; justify-content: center; } .mc-modal__dialog { background: var(--card-bg, #1a1a2e); border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem 2rem; max-width: 380px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .mc-modal__dialog h3 { margin: 0 0 0.9rem; font-size: 1rem; color: var(--text); } .mc-modal__dialog p { margin: 0.3rem 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; } .mc-modal__dialog strong { color: var(--text); } .mc-modal__note { margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-muted); font-style: italic; } .mc-modal__actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; } /* Per-project table on the overview */ .proj-table-head, .proj-row { display: grid; grid-template-columns: 1fr 90px 90px; gap: 0.5rem; } .proj-table-head { padding: 0.5rem 0.75rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .proj-table-head span:not(:first-child) { text-align: right; } .proj-row { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text); transition: background .12s; } .proj-row:last-child { border-bottom: none; } .proj-row:hover { background: var(--accent-light); text-decoration: none; } .proj-row__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proj-row__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); } .proj-row__err { color: var(--danger); } @media (max-width: 768px) { .metrics-grid { grid-template-columns: 1fr; } } /* ── Site footer ──────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 2rem 1rem; color: var(--text-muted); font-size: 0.875rem; } .site-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; } .site-footer__brand { display: flex; flex-direction: column; } .site-footer__name { font-weight: 700; color: var(--text); } .site-footer__accent { color: var(--accent); } .site-footer__tag { font-size: 0.8rem; } .site-footer__links { display: flex; gap: 1.25rem; } .site-footer__links a { color: var(--text-muted); text-decoration: none; } .site-footer__links a:hover { color: var(--text); text-decoration: underline; } .site-footer__meta { margin-left: auto; } .site-footer__meta a { color: var(--text-muted); } @media (max-width: 640px) { .site-footer__meta { margin-left: 0; width: 100%; } } /* ── Cookie notice ────────────────────────────────────────────── */ .cookie-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 300; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1.1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .cookie-notice[hidden] { display: none; } .cookie-notice__text { margin: 0; flex: 1; min-width: 220px; font-size: 0.85rem; color: var(--text-muted); } .cookie-notice__text a { color: var(--accent); } /* ── Legal pages (Terms / Privacy) ────────────────────────────── */ .legal__inner { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem; line-height: 1.6; } .legal h1 { font-size: 1.9rem; margin-bottom: 0.4rem; color: var(--text); } .legal h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; color: var(--text); } .legal p, .legal ul { color: var(--text); margin-bottom: 0.75rem; } .legal ul { padding-left: 1.25rem; } .legal li { margin-bottom: 0.35rem; } .legal a { color: var(--accent); } .legal__meta { color: var(--text-muted); font-size: 0.85rem; } .legal code { background: var(--bg); padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.9em; } /* ── Telegram Alerts section (profile page) ───────────────────── */ .tg-alerts-card { margin-bottom: 1.5rem; } .tg-alerts-body { padding: 1rem 0 0.5rem; } .tg-alerts-status { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .tg-alerts-status__name { font-weight: 600; color: var(--text); } .tg-alerts-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .tg-alerts-upsell { padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 0.9rem; } .tg-alerts-upsell a { color: var(--accent); } /* ── Telegram hint toast ──────────────────────────────────────── */ .tg-hint { position: fixed; right: 1rem; bottom: 1rem; z-index: 300; max-width: 340px; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .tg-hint[hidden] { display: none; } .tg-hint__body { flex: 1; font-size: 0.85rem; color: var(--text-muted); } .tg-hint__body a { color: var(--accent); } .tg-hint__dismiss { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 0; } /* ── Anomaly feed ─────────────────────────────────────────────── */ .anomaly-feed { display: flex; flex-direction: column; gap: 1rem; } .anomaly-empty { color: var(--text-muted); padding: 2rem 0; text-align: center; } .anomaly-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); } .anomaly-card--high { border-left: 3px solid #e53e3e; } .anomaly-card--med { border-left: 3px solid #dd6b20; } .anomaly-card--low { border-left: 3px solid #3182ce; } .anomaly-card__header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .anomaly-card__ts { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); } .anomaly-card__summary { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--text); } .anomaly-card__meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; } .anomaly-meta-label { font-weight: 600; } .anomaly-card__window { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; } .anomaly-chip { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .anomaly-chip--type { background: var(--bg); color: var(--text); border: 1px solid var(--border); } .anomaly-chip--sev.anomaly-chip--high { background: #fed7d7; color: #c53030; } .anomaly-chip--sev.anomaly-chip--med { background: #feebc8; color: #c05621; } .anomaly-chip--sev.anomaly-chip--low { background: #bee3f8; color: #2b6cb0; } .anomaly-chip--rule { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); } @media (prefers-color-scheme: dark) { .anomaly-chip--sev.anomaly-chip--high { background: #742a2a; color: #fed7d7; } .anomaly-chip--sev.anomaly-chip--med { background: #7b341e; color: #feebc8; } .anomaly-chip--sev.anomaly-chip--low { background: #2a4365; color: #bee3f8; } }