/* ═══════════════════════════════════════════════════════════════════ AQUIPLEX PLATFORM DESIGN SYSTEM — v1 Scope: all classes prefixed `px-` so this file can coexist with legacy styles.css during migration. Pages opting fully in add class="px-page" to . Palette: ink charcoal / warm paper. Single steel-aqua accent. Type: Inter (UI) + Newsreader (display). ═══════════════════════════════════════════════════════════════════ */ :root { /* ink (dark) — default */ --px-bg: #0b0e12; --px-surface: #11151b; --px-surface-2: #171c24; --px-line: rgba(255,255,255,0.07); --px-line-strong: rgba(255,255,255,0.12); --px-text: #e8ecf1; --px-text-2: #9aa4b2; --px-text-3: #667085; --px-accent: #4fa3b8; --px-accent-strong: #6fbdd0; --px-accent-ink: #0b0e12; --px-danger: #e5726b; --px-success: #6fbf8f; --px-warning: #d8a35a; --px-radius-sm: 6px; --px-radius: 10px; --px-radius-lg: 14px; --px-shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --px-shadow: 0 8px 30px rgba(0,0,0,0.35); --px-shadow-lg: 0 24px 60px rgba(0,0,0,0.45); --px-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --px-font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --px-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --px-w-content: 1120px; --px-w-narrow: 720px; /* fluid spacing scale (8px system, scales with viewport) */ --px-gutter: clamp(20px, 4.5vw, 24px); --px-space-sec: clamp(64px, 10vw, 96px); /* between major sections */ --px-space-blk: clamp(32px, 6vw, 48px); /* between blocks in a page */ --px-space-el: clamp(20px, 4vw, 28px); /* inside/around elements */ --px-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --px-t-fast: 120ms; --px-t: 180ms; } .px-light { --px-bg: #fafaf8; --px-surface: #ffffff; --px-surface-2: #f3f3f0; --px-line: #e8e6e1; --px-line-strong: #d8d5cf; --px-text: #17191d; --px-text-2: #5c6470; --px-text-3: #8a919c; --px-accent: #106b7e; --px-accent-strong: #0d5967; --px-accent-ink: #ffffff; --px-shadow-sm: 0 1px 2px rgba(23,25,29,0.06); --px-shadow: 0 8px 30px rgba(23,25,29,0.08); --px-shadow-lg: 0 24px 60px rgba(23,25,29,0.12); } /* ── Base (opt-in pages only) ─────────────────────────────────────── */ body.px-page { margin: 0; background: var(--px-bg); color: var(--px-text); font-family: var(--px-font-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-top: 0; } body.px-page *, body.px-page *::before, body.px-page *::after { box-sizing: border-box; } body.px-page a:not(.px-btn) { color: inherit; text-decoration: none; } body.px-page ::selection { background: rgba(79,163,184,0.28); } body.px-page img, body.px-page svg { max-width: 100%; height: auto; } body.px-page.px-menu-open { overflow: hidden; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* one visible, consistent focus ring for every interactive element */ body.px-page a:focus-visible, body.px-page button:focus-visible, body.px-page summary:focus-visible, body.px-page [tabindex]:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; border-radius: var(--px-radius-sm); } body.px-page h1, body.px-page h2, body.px-page h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } @media (prefers-reduced-motion: reduce) { .px-page *, .px-page *::before, .px-page *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Layout primitives ────────────────────────────────────────────── */ .px-container { max-width: var(--px-w-content); margin: 0 auto; padding: 0 var(--px-gutter); } .px-narrow { max-width: var(--px-w-narrow); margin: 0 auto; padding: 0 var(--px-gutter); } .px-section { padding: var(--px-space-sec) 0; } .px-section + .px-section { border-top: 1px solid var(--px-line); } .px-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--px-text-3); margin-bottom: 16px; } .px-display { font-family: var(--px-font-display); font-weight: 500; letter-spacing: -0.015em; } /* signature: waterline — a hairline that carries a single slow light pass */ .px-waterline { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent 0%, var(--px-line-strong) 20%, var(--px-line-strong) 80%, transparent 100%); position: relative; overflow: hidden; } .px-waterline::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--px-accent), transparent); animation: px-waterline-pass 7s var(--px-ease) infinite; opacity: 0.7; } @keyframes px-waterline-pass { 0%, 60% { left: -30%; } 100% { left: 130%; } } /* ── Buttons ──────────────────────────────────────────────────────── */ .px-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--px-radius-sm); border: 1px solid transparent; font-family: var(--px-font-sans); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background var(--px-t-fast) var(--px-ease), border-color var(--px-t-fast) var(--px-ease), color var(--px-t-fast) var(--px-ease), transform var(--px-t-fast) var(--px-ease); user-select: none; } .px-btn:active { transform: scale(0.985); } .px-btn:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; } .px-btn.px-btn-primary { background: var(--px-text); color: var(--px-bg); } .px-btn.px-btn-primary:hover { background: var(--px-text-2); } .px-light .px-btn.px-btn-primary { background: #17191d; color: #fff; } .px-light .px-btn.px-btn-primary:hover { background: #2b2f36; } .px-btn.px-btn-accent { background: var(--px-accent); color: var(--px-accent-ink); } .px-btn.px-btn-accent:hover { background: var(--px-accent-strong); } .px-btn.px-btn-secondary { background: transparent; border-color: var(--px-line-strong); color: var(--px-text); } .px-btn.px-btn-secondary:hover { border-color: var(--px-text-3); background: var(--px-surface-2); } .px-btn.px-btn-ghost { background: transparent; color: var(--px-text-2); } .px-btn.px-btn-ghost:hover { color: var(--px-text); background: var(--px-surface-2); } .px-btn { min-height: 36px; } .px-btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--px-radius-sm); min-height: 44px; } .px-btn-sm { padding: 6px 12px; font-size: 13px; min-height: 30px; } .px-btn[disabled], .px-btn.is-loading { opacity: 0.55; pointer-events: none; } /* loading state — inline spinner, label stays for layout stability */ .px-btn.is-loading::before { content: ''; width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: px-btn-spin 0.7s linear infinite; } @keyframes px-btn-spin { to { transform: rotate(360deg); } } /* full-width helper (mobile CTAs, card actions) */ .px-btn-block { width: 100%; } /* centered/stacking action rows — replaces ad-hoc inline flex rows */ .px-btn-row { display: flex; gap: 12px; flex-wrap: wrap; } .px-btn-row.center { justify-content: center; } @media (max-width: 480px) { .px-btn-row { flex-direction: column; align-items: stretch; } .px-btn-row .px-btn { width: 100%; } } /* touch devices: every control meets the 44px target without changing desktop */ @media (pointer: coarse) { .px-btn { min-height: 44px; } .px-btn-sm { min-height: 40px; } .px-nav-burger { width: 44px; height: 44px; } .px-nav-avatar-btn { width: 36px; height: 36px; } } /* ── Cards ────────────────────────────────────────────────────────── */ .px-card { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); transition: border-color var(--px-t) var(--px-ease); } .px-card-hover:hover { border-color: var(--px-line-strong); } .px-card-pad { padding: clamp(18px, 3.5vw, 24px); } /* mobile density — one rule set so every card tightens identically */ @media (max-width: 600px) { .px-founder { padding: 22px 20px; } .pack-card { padding: 22px 20px; } .px-stat { padding: 15px 16px; } .px-feature { padding: 24px 20px; } .px-free-callout { padding: 20px; } } /* ── Inputs ───────────────────────────────────────────────────────── */ .px-input, .px-select, .px-textarea { width: 100%; background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-sm); color: var(--px-text); font-family: var(--px-font-sans); font-size: 14px; padding: 10px 12px; transition: border-color var(--px-t-fast) var(--px-ease), box-shadow var(--px-t-fast) var(--px-ease); } .px-input::placeholder, .px-textarea::placeholder { color: var(--px-text-3); } .px-input:focus, .px-select:focus, .px-textarea:focus { outline: none; border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(79,163,184,0.18); } .px-label { display: block; font-size: 13px; font-weight: 500; color: var(--px-text-2); margin-bottom: 6px; } /* ── Badges ───────────────────────────────────────────────────────── */ .px-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--px-line-strong); color: var(--px-text-2); background: var(--px-surface); } .px-badge-accent { border-color: rgba(79,163,184,0.4); color: var(--px-accent-strong); } .px-light .px-badge-accent { color: var(--px-accent); } .px-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--px-success); } /* ── Tables ───────────────────────────────────────────────────────── */ .px-table { width: 100%; border-collapse: collapse; font-size: 14px; } .px-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--px-text-3); padding: 10px 16px; border-bottom: 1px solid var(--px-line-strong); } .px-table td { padding: 12px 16px; border-bottom: 1px solid var(--px-line); color: var(--px-text-2); } .px-table td:first-child { color: var(--px-text); } .px-table tr:last-child td { border-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════ NAV — self-contained, safe on legacy pages ═══════════════════════════════════════════════════════════════════ */ .px-nav { position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 9999; background: color-mix(in srgb, var(--px-bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--px-line); font-family: var(--px-font-sans); font-size: 14px; } body:not(.px-page) .px-nav { /* legacy pages: keep dark ink even if page bg differs */ --px-bg: #0b0e12; } .px-nav-inner { max-width: var(--px-w-content); margin: 0 auto; height: 100%; padding: 0 max(var(--px-gutter), env(safe-area-inset-right)) 0 max(var(--px-gutter), env(safe-area-inset-left)); display: flex; align-items: center; gap: 28px; } .px-nav-logo { display: flex; align-items: center; gap: 9px; color: var(--px-text) !important; text-decoration: none !important; flex-shrink: 0; } .px-nav-logo img { width: 22px; height: 22px; object-fit: contain; } .px-nav-wordmark { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; } .px-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; } .px-nav-link { padding: 6px 11px; border-radius: var(--px-radius-sm); color: var(--px-text-2) !important; text-decoration: none !important; font-weight: 450; transition: color var(--px-t-fast) var(--px-ease), background var(--px-t-fast) var(--px-ease); } .px-nav-link:hover { color: var(--px-text) !important; background: var(--px-surface-2); } .px-nav-more { position: relative; } .px-nav-more > button { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; font: inherit; padding: 6px 11px; border-radius: var(--px-radius-sm); color: var(--px-text-2); cursor: pointer; } .px-nav-more > button:hover { color: var(--px-text); background: var(--px-surface-2); } .px-nav-more svg { transition: transform var(--px-t-fast) var(--px-ease); } .px-nav-more.open svg { transform: rotate(180deg); } .px-nav-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius); box-shadow: var(--px-shadow); padding: 6px; display: none; } .px-nav-more.open .px-nav-dropdown { display: block; animation: px-pop var(--px-t) var(--px-ease); } @keyframes px-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .px-nav-dropdown a { display: block; padding: 8px 11px; border-radius: var(--px-radius-sm); color: var(--px-text-2) !important; text-decoration: none !important; font-size: 13.5px; } .px-nav-dropdown a:hover { color: var(--px-text) !important; background: var(--px-surface-2); } .px-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .px-nav-plan { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--px-line-strong); color: var(--px-text-2) !important; text-decoration: none !important; } .px-nav-plan:hover { border-color: var(--px-text-3); color: var(--px-text) !important; } .px-nav-plan.plan-pro, .px-nav-plan.plan-team, .px-nav-plan.plan-starter { border-color: rgba(79,163,184,0.45); color: var(--px-accent-strong) !important; } .px-nav-avatar-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--px-line-strong); background: var(--px-surface-2); color: var(--px-text); font-size: 12px; font-weight: 600; font-family: var(--px-font-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--px-t-fast) var(--px-ease); } .px-nav-avatar-btn:hover { border-color: var(--px-accent); } .px-nav-user { position: relative; } .px-nav-user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius); box-shadow: var(--px-shadow); padding: 6px; display: none; } .px-nav-user-dropdown.open { display: block; animation: px-pop var(--px-t) var(--px-ease); } .px-nav-user-meta { padding: 9px 11px 4px; } .px-nav-user-email { font-size: 12.5px; color: var(--px-text-2); word-break: break-all; } .px-nav-user-planrow { padding: 4px 11px 9px; } .px-nav-divider { height: 1px; background: var(--px-line); margin: 6px 4px; } .px-nav-item { display: block; padding: 8px 11px; border-radius: var(--px-radius-sm); color: var(--px-text-2) !important; text-decoration: none !important; font-size: 13.5px; } .px-nav-item:hover { color: var(--px-text) !important; background: var(--px-surface-2); } .px-nav-burger { display: none; background: none; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-sm); width: 34px; height: 34px; color: var(--px-text); cursor: pointer; align-items: center; justify-content: center; } .px-nav-mobile { display: none; position: fixed; top: 60px; left: 0; right: 0; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--px-bg); border-bottom: 1px solid var(--px-line-strong); padding: 16px var(--px-gutter) calc(24px + env(safe-area-inset-bottom)); z-index: 9998; } body:not(.px-page) .px-nav-mobile { background: #0b0e12; } .px-nav-mobile.open { display: block; animation: px-pop var(--px-t) var(--px-ease); } .px-nav-mobile a:not(.px-btn) { display: flex; align-items: center; min-height: 44px; color: var(--px-text-2) !important; text-decoration: none !important; font-size: 15px; border-radius: var(--px-radius-sm); padding: 0 8px; } .px-nav-mobile a:not(.px-btn):hover { color: var(--px-text) !important; background: var(--px-surface-2); } .px-nav-mobile .px-btn { width: 100%; margin-bottom: 8px; min-height: 44px; } .px-nav-mobile-divider { height: 1px; background: var(--px-line); margin: 12px 0; } @media (max-width: 860px) { .px-nav-links { display: none; } .px-nav-actions .px-nav-plan { display: none; } .px-nav-actions .px-btn { display: none; } .px-nav-burger { display: inline-flex; } .px-nav-inner { gap: 12px; justify-content: space-between; } } /* legacy pages have body padding-top:70px for the old 70px header; new header is 60px — compensate visually is unnecessary; safe. */ /* ═══════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════ */ .px-footer { border-top: 1px solid var(--px-line); padding: clamp(40px, 7vw, 56px) 0 calc(40px + env(safe-area-inset-bottom)); font-family: var(--px-font-sans); font-size: 13.5px; background: var(--px-bg); } body:not(.px-page) .px-footer { --px-bg: #0b0e12; color: #9aa4b2; } .px-footer-grid { max-width: var(--px-w-content); margin: 0 auto; padding: 0 var(--px-gutter); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .px-footer-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .px-footer-brand img { width: 20px; height: 20px; } .px-footer-brand span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--px-text); } .px-footer-tagline { color: var(--px-text-3); max-width: 260px; line-height: 1.55; } .px-footer h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-text-3); } .px-footer-col a { display: block; color: var(--px-text-2) !important; text-decoration: none !important; padding: 4px 0; transition: color var(--px-t-fast) var(--px-ease); } .px-footer-col a:hover { color: var(--px-text) !important; } .px-footer-bottom { max-width: var(--px-w-content); margin: 40px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--px-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--px-text-3); } .px-footer-socials { display: flex; gap: 14px; } .px-footer-socials a { color: var(--px-text-3) !important; display: inline-flex; } .px-footer-socials a:hover { color: var(--px-text) !important; } @media (max-width: 760px) { .px-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .px-footer-grid > div:first-child { grid-column: 1 / -1; } .px-footer-col a { padding: 6px 0; } .px-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; } } /* ═══════════════════════════════════════════════════════════════════ AUTH ═══════════════════════════════════════════════════════════════════ */ .px-auth-wrap { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(84px, 14vw, 100px) var(--px-gutter) clamp(40px, 8vw, 60px); } .px-auth-card { width: 100%; max-width: 380px; } .px-auth-card h1 { font-size: 22px; margin-bottom: 6px; } .px-auth-sub { color: var(--px-text-2); font-size: 14px; margin: 0 0 28px; } .px-auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 0; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-sm); background: var(--px-surface); color: var(--px-text) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; transition: border-color var(--px-t-fast) var(--px-ease), background var(--px-t-fast) var(--px-ease); } .px-auth-google:hover { border-color: var(--px-text-3); background: var(--px-surface-2); } .px-auth-google img { width: 16px; height: 16px; } .px-auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--px-text-3); font-size: 12px; } .px-auth-divider::before, .px-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--px-line); } .px-auth-form { display: flex; flex-direction: column; gap: 12px; } .px-auth-error { background: color-mix(in srgb, var(--px-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--px-danger) 35%, transparent); color: var(--px-danger); border-radius: var(--px-radius-sm); padding: 9px 12px; font-size: 13px; margin-bottom: 14px; } .px-auth-switch { margin-top: 24px; font-size: 13.5px; color: var(--px-text-2); text-align: center; } .px-auth-switch a { color: var(--px-accent-strong) !important; font-weight: 500; } .px-light .px-auth-switch a { color: var(--px-accent) !important; } /* ═══════════════════════════════════════════════════════════════════ LANDING ═══════════════════════════════════════════════════════════════════ */ .px-hero { padding: clamp(116px, 18vw, 168px) 0 clamp(56px, 10vw, 88px); text-align: center; } .px-hero h1 { font-family: var(--px-font-display); font-size: clamp(33px, 6.5vw, 68px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; max-width: 820px; margin: 0 auto 22px; } .px-hero-sub { font-size: clamp(15px, 2.2vw, 17px); color: var(--px-text-2); max-width: 560px; margin: 0 auto clamp(28px, 5vw, 36px); line-height: 1.65; } .px-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } @media (max-width: 480px) { .px-hero-ctas { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; } .px-hero-ctas .px-btn { width: 100%; } } .px-hero-note { font-size: 13px; color: var(--px-text-3); } /* product frame */ .px-frame-wrap { padding: 40px 0 0; } .px-frame { max-width: 960px; margin: 0 auto; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-lg); background: var(--px-surface); box-shadow: var(--px-shadow-lg); overflow: hidden; text-align: left; } .px-frame-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--px-line); background: var(--px-surface-2); } .px-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--px-line-strong); } .px-frame-url { margin-left: 10px; font-size: 12px; color: var(--px-text-3); font-family: var(--px-font-mono); } .px-frame-body { display: grid; grid-template-columns: 200px 1fr; min-height: 380px; } .px-frame-side { border-right: 1px solid var(--px-line); padding: 16px 12px; font-size: 12.5px; color: var(--px-text-3); background: var(--px-surface); } .px-frame-side-item { padding: 7px 10px; border-radius: var(--px-radius-sm); margin-bottom: 2px; } .px-frame-side-item.active { background: var(--px-surface-2); color: var(--px-text); } .px-frame-main { padding: 28px 32px; } .px-frame-msg { max-width: 460px; margin-bottom: 18px; } .px-frame-msg-user { margin-left: auto; background: var(--px-surface-2); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 10px 14px; font-size: 13.5px; color: var(--px-text); width: fit-content; } .px-frame-msg-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-text-3); margin-bottom: 8px; } .px-frame-msg-body { font-size: 13.5px; color: var(--px-text-2); line-height: 1.7; } .px-frame-step { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .px-frame-check { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--px-success) 18%, transparent); color: var(--px-success); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 720px) { .px-frame-body { grid-template-columns: 1fr; min-height: 0; } .px-frame-side { display: none; } .px-frame-main { padding: 20px 18px; } .px-frame-msg { max-width: 100%; } } /* trust strip */ .px-trust { padding: 48px 0; border-top: 1px solid var(--px-line); } .px-trust p { text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-text-3); margin: 0 0 24px; } .px-trust-row { display: flex; justify-content: center; align-items: center; gap: clamp(22px, 5vw, 48px) clamp(24px, 5vw, 48px); flex-wrap: wrap; opacity: 0.55; } .px-trust-row span { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--px-text-2); } /* section headers */ .px-sec-head { max-width: 640px; margin-bottom: clamp(36px, 6.5vw, 56px); } .px-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .px-sec-head h2 { font-family: var(--px-font-display); font-size: clamp(28px, 3.6vw, 38px); font-weight: 500; margin-bottom: 14px; } .px-sec-head p { color: var(--px-text-2); font-size: 15.5px; margin: 0; line-height: 1.65; } /* features */ .px-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--px-line); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); overflow: hidden; } .px-feature { background: var(--px-bg); padding: 32px 28px; transition: background var(--px-t) var(--px-ease); } .px-feature:hover { background: var(--px-surface); } .px-feature-icon { width: 34px; height: 34px; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--px-accent-strong); margin-bottom: 18px; } .px-light .px-feature-icon { color: var(--px-accent); } .px-feature h3 { font-size: 15.5px; margin-bottom: 8px; font-weight: 600; } .px-feature p { font-size: 13.5px; color: var(--px-text-2); line-height: 1.65; margin: 0; } @media (max-width: 900px) { .px-feature-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .px-feature-grid { grid-template-columns: 1fr; } } /* how it works — a real sequence, numbering earns its place */ .px-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .px-step-num { font-family: var(--px-font-mono); font-size: 12px; color: var(--px-text-3); margin-bottom: 14px; display: block; } .px-step h3 { font-size: 16px; margin-bottom: 8px; } .px-step p { font-size: 14px; color: var(--px-text-2); line-height: 1.65; margin: 0; } @media (max-width: 760px) { .px-steps { grid-template-columns: 1fr; gap: 32px; } } /* FAQ */ .px-faq { max-width: 720px; margin: 0 auto; } .px-faq details { border-bottom: 1px solid var(--px-line); padding: 4px 0; } .px-faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .px-faq summary::-webkit-details-marker { display: none; } .px-faq summary::after { content: '+'; color: var(--px-text-3); font-size: 18px; font-weight: 300; transition: transform var(--px-t) var(--px-ease); } .px-faq details[open] summary::after { transform: rotate(45deg); } .px-faq details p { margin: 0; padding: 0 0 20px; color: var(--px-text-2); font-size: 14px; line-height: 1.7; max-width: 620px; } /* CTA */ .px-cta { text-align: center; padding: clamp(72px, 12vw, 120px) 0; } .px-cta h2 { font-family: var(--px-font-display); font-size: clamp(26px, 4vw, 44px); font-weight: 500; margin-bottom: 16px; } .px-cta p { color: var(--px-text-2); margin: 0 0 32px; } /* scroll reveal */ .px-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--px-ease), transform 0.55s var(--px-ease); } .px-reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .px-reveal { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════ DASHBOARD (home) ═══════════════════════════════════════════════════════════════════ */ .px-dash { padding: clamp(84px, 13vw, 108px) 0 clamp(56px, 10vw, 80px); } .px-dash-head { margin-bottom: clamp(20px, 5vw, 36px); } .px-dash-head h1 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; } .px-dash-head p { color: var(--px-text-2); margin: 0; font-size: 14.5px; line-height: 1.5; } @media (max-width: 480px) { .px-dash-head h1 { font-size: 21px; } .px-dash-head p { font-size: 13.5px; } } .px-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: var(--px-space-blk); } .px-quick { display: block; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); padding: 22px; text-decoration: none !important; color: var(--px-text) !important; transition: border-color var(--px-t) var(--px-ease), transform var(--px-t) var(--px-ease), box-shadow var(--px-t) var(--px-ease); } .px-quick:hover { border-color: var(--px-line-strong); transform: translateY(-1px); box-shadow: var(--px-shadow-sm); } .px-quick:active { transform: translateY(0); } .px-quick-icon { width: 32px; height: 32px; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--px-accent-strong); background: color-mix(in srgb, var(--px-accent) 8%, transparent); margin-bottom: 14px; transition: background var(--px-t) var(--px-ease); } .px-quick:hover .px-quick-icon { background: color-mix(in srgb, var(--px-accent) 14%, transparent); } .px-light .px-quick-icon { color: var(--px-accent); } .px-quick h3 { font-size: 15px; margin-bottom: 5px; } .px-quick p { font-size: 13px; color: var(--px-text-2); margin: 0; line-height: 1.55; } @media (max-width: 760px) { .px-quick-grid { grid-template-columns: 1fr; gap: 10px; } .px-quick { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; } .px-quick-icon { margin-bottom: 0; flex-shrink: 0; } .px-quick h3 { margin-bottom: 2px; } } .px-dash-sec { margin-bottom: clamp(20px, 4vw, 28px); } .px-dash-sec:last-child { margin-bottom: 0; } .px-dash-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .px-dash-sec-head.px-mb-lg { margin-bottom: 14px; } .px-dash-sec-head h2 { font-size: 16px; font-weight: 600; } .px-dash-sec-head a { font-size: 13px; color: var(--px-text-2) !important; } .px-dash-sec-head a:hover { color: var(--px-text) !important; } .px-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .px-tool { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 18px; display: block; text-decoration: none !important; color: var(--px-text) !important; transition: border-color var(--px-t) var(--px-ease); } .px-tool:hover { border-color: var(--px-line-strong); } .px-tool-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .px-tool-logo { width: 28px; height: 28px; border-radius: var(--px-radius-sm); object-fit: cover; background: var(--px-surface-2); border: 1px solid var(--px-line); } .px-tool h3 { font-size: 14px; font-weight: 550; margin: 0; } .px-tool p { font-size: 12.5px; color: var(--px-text-2); margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 980px) { .px-tool-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .px-tool-grid { grid-template-columns: 1fr; } } .px-pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .px-pill { padding: 6px 14px; border: 1px solid var(--px-line-strong); border-radius: 999px; font-size: 13px; color: var(--px-text-2) !important; text-decoration: none !important; transition: border-color var(--px-t-fast) var(--px-ease), color var(--px-t-fast) var(--px-ease); } .px-pill:hover { border-color: var(--px-text-3); color: var(--px-text) !important; } /* ═══════════════════════════════════════════════════════════════════ PRICING ═══════════════════════════════════════════════════════════════════ */ .px-pricing-hero { padding: clamp(104px, 16vw, 148px) 0 clamp(40px, 7vw, 56px); text-align: center; } .px-pricing-hero h1 { font-family: var(--px-font-display); font-size: clamp(30px, 5vw, 52px); font-weight: 500; margin: 18px 0 16px; } .px-pricing-hero p { color: var(--px-text-2); font-size: 16px; max-width: 480px; margin: 0 auto; line-height: 1.65; } .px-free-callout { max-width: 680px; margin: 48px auto 0; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; } .px-free-callout h3 { font-size: 15px; margin-bottom: 4px; } .px-free-callout p { font-size: 13.5px; color: var(--px-text-2); margin: 0; } @media (max-width: 600px) { .px-free-callout { flex-direction: column; align-items: flex-start; } } .pack-card { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); padding: 28px 24px; position: relative; transition: border-color var(--px-t) var(--px-ease), transform var(--px-t) var(--px-ease); } .pack-card:hover { border-color: var(--px-line-strong); transform: translateY(-2px); } .pack-card.popular { border-color: var(--px-accent); } .popular-badge, .best-deal-badge { position: absolute; top: 16px; right: 16px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .popular-badge { background: var(--px-accent); color: var(--px-accent-ink); } .best-deal-badge { border: 1px solid var(--px-line-strong); color: var(--px-text-2); } .pack-price { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; } .pack-credits-line { color: var(--px-text-2); font-size: 14px; margin: 4px 0 2px; } .pack-name { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--px-text-3); margin-bottom: 14px; } .pack-meta { font-size: 12.5px; color: var(--px-text-3); margin-bottom: 20px; } .btn-pack { width: 100%; padding: 10px 0; border-radius: var(--px-radius-sm); border: 1px solid var(--px-line-strong); background: transparent; color: var(--px-text); font-family: var(--px-font-sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--px-t-fast) var(--px-ease), border-color var(--px-t-fast) var(--px-ease); } .btn-pack:hover { background: var(--px-surface-2); border-color: var(--px-text-3); } .pack-card.popular .btn-pack { background: var(--px-accent); border-color: var(--px-accent); color: var(--px-accent-ink); } .pack-card.popular .btn-pack:hover { background: var(--px-accent-strong); } .btn-pack[disabled] { opacity: 0.6; cursor: default; } .packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: var(--px-w-content); margin: 0 auto; padding: 0 var(--px-gutter); } .px-credit-table-sec { max-width: 640px; margin: clamp(56px, 10vw, 88px) auto clamp(64px, 11vw, 96px); padding: 0 var(--px-gutter); } .px-credit-table-sec h2 { font-family: var(--px-font-display); font-size: 26px; font-weight: 500; text-align: center; margin-bottom: 28px; } /* toast */ .toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; max-width: calc(100vw - 2 * var(--px-gutter)); transform: translate(-50%, 12px); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius); box-shadow: var(--px-shadow); color: var(--px-text); font-family: var(--px-font-sans); font-size: 13.5px; padding: 11px 18px; opacity: 0; pointer-events: none; transition: opacity var(--px-t) var(--px-ease), transform var(--px-t) var(--px-ease); z-index: 10000; } .toast.success, .toast.error { opacity: 1; transform: translate(-50%, 0); } .toast.error { border-color: color-mix(in srgb, var(--px-danger) 45%, transparent); color: var(--px-danger); } /* ═══════════════════════════════════════════════════════════════════ PLATFORM v1.1 — workspace, account, blog, project engine components ═══════════════════════════════════════════════════════════════════ */ /* ── Workspace dashboard ─────────────────────────────────────────── */ .px-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .px-dash-grid { grid-template-columns: 1fr; } } .px-continue { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); padding: clamp(20px, 3vw, 26px) clamp(22px, 3.5vw, 28px); margin-bottom: clamp(16px, 3vw, 24px); flex-wrap: wrap; } .px-continue h2 { font-size: 18px; margin-bottom: 6px; } .px-continue p { color: var(--px-text-2); font-size: 14px; line-height: 1.55; margin: 0; max-width: 460px; } .px-continue-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } /* tablet: text stays on its own line, but the two actions still sit naturally side by side beneath it rather than each stretching full-width */ @media (max-width: 900px) { .px-continue { flex-direction: column; align-items: flex-start; } .px-continue-actions { width: 100%; } } /* phone: actions drop to a single full-width column */ @media (max-width: 600px) { .px-continue-actions { flex-direction: column; } .px-continue-actions .px-btn { width: 100%; } } .px-list { display: flex; flex-direction: column; } .px-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; border-radius: var(--px-radius-sm); transition: background var(--px-t-fast) var(--px-ease); } .px-list-row:hover { background: var(--px-surface-2); } .px-list-row + .px-list-row { border-top: 1px solid var(--px-line); } .px-list-title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--px-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .px-list-sub { font-size: 12.5px; line-height: 1.3; color: var(--px-text-3); white-space: nowrap; } .px-empty { padding: 24px 14px; text-align: center; color: var(--px-text-3); font-size: 13.5px; } .px-empty a { color: var(--px-accent-strong) !important; } .px-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } @media (max-width: 480px) { .px-stat-grid { gap: 10px; } } .px-stat { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 18px 20px; } /* variants used when a .px-stat sits inside a card that already has its own border (e.g. the Usage card) — avoids the double-border/nested-box look without falling back to inline styles */ .px-stat--plain { border: 0; background: transparent; border-radius: 0; padding: 0 0 16px; } .px-stat--divided { border: 0; background: transparent; border-radius: 0; border-top: 1px solid var(--px-line); padding: 16px 0 0; } .px-stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--px-text-3); margin-bottom: 8px; } .px-stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .px-stat-value--sm { font-size: 16px; } .px-stat-sub { font-size: 12.5px; color: var(--px-text-3); margin-top: 4px; } .px-mt-lg { margin-top: 20px; } .px-bar-track { height: 5px; background: var(--px-surface-2); border-radius: 999px; overflow: hidden; margin-top: 12px; } .px-bar-fill { height: 100%; background: var(--px-accent); border-radius: 999px; transition: width 400ms var(--px-ease); } .px-bar-fill.warning { background: var(--px-warning); } .px-bar-fill.full { background: var(--px-danger); } /* ── Account pages (wallet / billing) ────────────────────────────── */ .px-account { padding: clamp(84px, 13vw, 108px) 0 clamp(64px, 11vw, 96px); } .px-account .px-dash-head { margin-bottom: clamp(22px, 4vw, 28px); } .px-usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .px-usage-item { border: 1px solid var(--px-line); border-radius: var(--px-radius-sm); padding: 13px 15px; background: var(--px-bg); } .px-usage-item .u-label { font-size: 12.5px; font-weight: 550; margin-bottom: 5px; } .px-usage-item .u-val { font-size: 13px; color: var(--px-text-2); } .px-usage-item .u-bar { height: 4px; background: var(--px-surface-2); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; } .px-usage-item .u-fill { height: 100%; background: var(--px-accent); border-radius: 999px; } .px-usage-item .u-fill.full { background: var(--px-danger); } .px-usage-item .u-note { font-size: 11.5px; color: var(--px-text-3); } .status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--px-line-strong); color: var(--px-text-2); } .status-pill.completed, .status-pill.success { border-color: color-mix(in srgb, var(--px-success) 45%, transparent); color: var(--px-success); } .status-pill.pending { border-color: color-mix(in srgb, var(--px-warning) 45%, transparent); color: var(--px-warning); } .status-pill.failed { border-color: color-mix(in srgb, var(--px-danger) 45%, transparent); color: var(--px-danger); } .px-skel { display: inline-block; height: 14px; width: 90px; border-radius: 6px; background: linear-gradient(90deg, var(--px-surface-2) 25%, var(--px-surface) 50%, var(--px-surface-2) 75%); background-size: 300% 100%; animation: px-shimmer 1.4s ease infinite; } .px-skel.wide { width: 100%; height: 52px; display: block; margin-bottom: 8px; border-radius: var(--px-radius-sm); } @keyframes px-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .px-txn-credit { color: var(--px-success); font-variant-numeric: tabular-nums; } .px-txn-debit { color: var(--px-danger); font-variant-numeric: tabular-nums; } /* ── State blocks (errors / empty) ───────────────────────────────── */ .px-state { text-align: center; padding: 36px 20px; color: var(--px-text-2); font-size: 14px; line-height: 1.65; } .px-state .px-btn { margin-top: 14px; } /* ── Blog ─────────────────────────────────────────────────────────── */ .px-blog-list { display: grid; grid-template-columns: 1fr; gap: 0; max-width: var(--px-w-narrow); margin: 0 auto; } .px-blog-item { display: block; padding: 26px 4px; border-bottom: 1px solid var(--px-line); transition: opacity var(--px-t-fast) var(--px-ease); } .px-blog-item:hover h2 { color: var(--px-accent-strong); } .px-blog-item h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; transition: color var(--px-t-fast) var(--px-ease); } .px-blog-item p { color: var(--px-text-2); font-size: 14px; line-height: 1.65; margin: 0 0 10px; } .px-blog-meta { font-size: 12.5px; color: var(--px-text-3); } .px-prose { max-width: var(--px-w-narrow); margin: 0 auto; } .px-prose h1 { font-family: var(--px-font-display); font-size: clamp(28px, 4.5vw, 40px); font-weight: 500; line-height: 1.15; margin-bottom: 14px; } .px-prose-body { font-size: 16px; line-height: 1.8; color: var(--px-text-2); white-space: pre-wrap; } .px-prose-body p { margin: 0 0 18px; } /* ── Page hero (about / founders / blog index) ────────────────────── */ .px-page-hero { padding: clamp(104px, 16vw, 148px) 0 clamp(44px, 8vw, 64px); } .px-page-hero.center { text-align: center; } .px-page-hero h1 { font-family: var(--px-font-display); font-size: clamp(29px, 5vw, 48px); font-weight: 500; margin: 14px 0 16px; letter-spacing: -0.01em; } .px-page-hero p { color: var(--px-text-2); font-size: 16px; line-height: 1.7; max-width: 560px; margin: 0; } .px-page-hero.center p { margin: 0 auto; } .px-founder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 860px; margin: 0 auto; } .px-founder { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-lg); padding: 30px 28px; } .px-founder .name { font-size: 17px; font-weight: 600; margin-bottom: 3px; } .px-founder .role { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--px-accent-strong); margin-bottom: 16px; } .px-founder .desc { font-size: 14px; color: var(--px-text-2); line-height: 1.7; margin-bottom: 18px; } .px-founder .links { display: flex; gap: 14px; } .px-founder .links a { font-size: 13px; color: var(--px-text-2) !important; border-bottom: 1px solid var(--px-line-strong); padding-bottom: 1px; } .px-founder .links a:hover { color: var(--px-text) !important; border-color: var(--px-text-3); } /* ── Error pages ──────────────────────────────────────────────────── */ .px-error-wrap { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px var(--px-gutter); } .px-error-code { font-family: var(--px-font-display); font-size: clamp(72px, 14vw, 120px); font-weight: 500; line-height: 1; color: var(--px-text); margin: 0 0 10px; } .px-error-wrap h1 { font-size: 19px; margin-bottom: 8px; } .px-error-wrap p { color: var(--px-text-2); font-size: 14.5px; max-width: 380px; margin: 0 0 26px; line-height: 1.65; }