/* Datatrax — shared styles Aesthetic: technical/dev-focused SaaS. Geist + Geist Mono. Tokens support light + dark themes via [data-theme="dark"] on . */ :root { --bg: oklch(0.985 0.004 85); --bg-alt: oklch(0.965 0.006 85); --bg-elev: oklch(1 0 0); --fg: oklch(0.18 0.012 250); --fg-muted: oklch(0.45 0.012 250); --fg-subtle: oklch(0.62 0.012 250); --border: oklch(0.9 0.006 85); --border-strong: oklch(0.82 0.008 85); --accent: oklch(0.62 0.13 200); --accent-fg: oklch(0.99 0 0); --accent-soft: oklch(0.95 0.04 200); --danger: oklch(0.6 0.18 25); --success: oklch(0.62 0.14 150); --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 0 oklch(0.18 0.012 250 / 0.04), 0 1px 2px oklch(0.18 0.012 250 / 0.04); --shadow: 0 1px 0 oklch(0.18 0.012 250 / 0.04), 0 8px 24px oklch(0.18 0.012 250 / 0.06); --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --container: 1200px; } [data-theme="dark"] { --bg: oklch(0.16 0.012 250); --bg-alt: oklch(0.2 0.014 250); --bg-elev: oklch(0.22 0.014 250); --fg: oklch(0.97 0.004 85); --fg-muted: oklch(0.72 0.012 250); --fg-subtle: oklch(0.55 0.012 250); --border: oklch(0.28 0.014 250); --border-strong: oklch(0.36 0.016 250); --accent: oklch(0.72 0.14 200); --accent-fg: oklch(0.16 0.012 250); --accent-soft: oklch(0.28 0.06 200); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; } h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; } h3 { font-size: 1.25rem; line-height: 1.3; } p { text-wrap: pretty; } .mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-muted); } .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg), transparent 20%); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; } .logo-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--fg); position: relative; overflow: hidden; } .logo-mark::before, .logo-mark::after { content: ""; position: absolute; background: var(--bg); } .logo-mark::before { left: 4px; right: 4px; top: 6px; height: 2px; } .logo-mark::after { left: 4px; right: 4px; top: 11px; height: 2px; box-shadow: 0 5px 0 var(--bg); } .nav { display: flex; align-items: center; gap: 28px; } .nav a { font-size: 0.92rem; color: var(--fg-muted); } .nav a:hover { color: var(--fg); } .nav a[aria-current="page"] { color: var(--fg); font-weight: 500; } .nav-cta { display: flex; align-items: center; gap: 12px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms, transform 120ms; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--fg); color: var(--fg); } .btn-ghost { background: transparent; color: var(--fg-muted); border-color: transparent; } .btn-ghost:hover { color: var(--fg); } .btn-lg { height: 48px; padding: 0 24px; font-size: 0.98rem; } .btn-block { width: 100%; } /* ---------- Sections ---------- */ section { padding: 96px 0; } section.tight { padding: 64px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .section-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-bottom: 56px; max-width: 720px; } .section-head h2 + p { color: var(--fg-muted); font-size: 1.1rem; margin: 0; max-width: 620px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 48px 0; color: var(--fg-muted); font-size: 0.88rem; } .site-footer .inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .site-footer nav { display: flex; gap: 24px; } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .field label { font-size: 0.82rem; font-weight: 500; color: var(--fg); } .field .hint { font-size: 0.78rem; color: var(--fg-subtle); } .input, .select, .textarea { font: inherit; width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elev); color: var(--fg); transition: border-color 120ms, box-shadow 120ms; } .textarea { height: auto; padding: 12px 14px; min-height: 110px; resize: vertical; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 78%); } .auth-card { max-width: 440px; margin: 80px auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); } .auth-card h1 { font-size: 1.6rem; margin-bottom: 8px; letter-spacing: -0.02em; } .auth-card .sub { color: var(--fg-muted); margin: 0 0 28px; font-size: 0.95rem; } .auth-card .footer-line { font-size: 0.88rem; color: var(--fg-muted); text-align: center; margin-top: 20px; } .auth-card .footer-line a { color: var(--accent); font-weight: 500; } /* ---------- Utilities ---------- */ .row { display: flex; gap: 16px; align-items: center; } .row-tight { display: flex; gap: 8px; align-items: center; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } .nav { display: none; } section { padding: 72px 0; } } /* ================================================================ HOME PAGE ================================================================ */ .hero { padding: 80px 0 96px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } } .hero h1 { margin-top: 20px; margin-bottom: 24px; } .hero h1 .accent { color: var(--accent); font-style: normal; } .hero .lede { font-size: 1.18rem; color: var(--fg-muted); max-width: 560px; margin: 0 0 32px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero-meta { margin-top: 28px; display: flex; gap: 24px; flex-wrap: wrap; color: var(--fg-subtle); font-size: 0.86rem; } .hero-meta span::before { content: "✓"; margin-right: 8px; color: var(--accent); font-weight: 600; } /* Mock product UI */ .mock { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; font-family: var(--font-mono); font-size: 0.78rem; } .mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); } .mock-bar .dots { display: flex; gap: 6px; } .mock-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: inline-block; } .mock-bar .url { flex: 1; text-align: center; color: var(--fg-subtle); font-size: 0.74rem; } .mock-body { display: grid; grid-template-columns: 180px 1fr; min-height: 380px; } .mock-side { background: var(--bg-alt); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .mock-side .group { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--fg-subtle); text-transform: uppercase; padding: 8px 8px 4px; } .mock-side .item { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--fg-muted); } .mock-side .item.active { background: var(--accent-soft); color: var(--fg); font-weight: 500; } .mock-main { padding: 18px 22px; } .mock-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .mock-h .title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--fg); } .mock-h .pill { padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.7rem; font-weight: 600; } .mock-rows { display: grid; grid-template-columns: 1fr 16px 1fr; gap: 10px 12px; align-items: center; } .mock-row-h { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 16px 1fr; gap: 12px; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--fg-subtle); text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 4px; } .mock-cell { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--fg); } .mock-cell.matched { border-color: var(--accent); } .arrow { text-align: center; color: var(--fg-subtle); } .mock-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--fg-muted); } .mock-foot .pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; box-shadow: 0 0 0 3px color-mix(in oklch, var(--success), transparent 80%); } /* Logo strip */ .logos { padding: 48px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); } .logos .label { text-align: center; color: var(--fg-subtle); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; } .logos-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .logo-placeholder { font-family: var(--font-mono); font-size: 0.95rem; color: var(--fg-subtle); letter-spacing: 0.05em; opacity: 0.7; } /* Features grid */ .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } @media (max-width: 760px) { .features-grid { grid-template-columns: 1fr; } } .feature { background: var(--bg); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; } .feature .num { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); letter-spacing: 0.1em; } .feature h3 { font-size: 1.15rem; letter-spacing: -0.015em; } .feature p { color: var(--fg-muted); margin: 0; font-size: 0.96rem; } /* How it works */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; } } .step { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); position: relative; } .step .step-num { position: absolute; top: -14px; left: 24px; background: var(--fg); color: var(--bg); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; } .step h3 { margin: 12px 0 8px; font-size: 1.05rem; } .step p { color: var(--fg-muted); margin: 0; font-size: 0.92rem; } /* Benefits */ .benefits { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 800px) { .benefits-grid { grid-template-columns: 1fr; } } .benefit { display: flex; flex-direction: column; gap: 12px; } .benefit .stat { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 500; color: var(--fg); letter-spacing: -0.03em; line-height: 1; } .benefit .stat .unit { color: var(--accent); } .benefit h3 { font-size: 1.1rem; } .benefit p { color: var(--fg-muted); margin: 0; } /* Pricing preview (home page) */ .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto; } @media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } } .price-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; } .price-card.featured { border-color: var(--fg); box-shadow: var(--shadow); position: relative; } .price-card.featured::after { content: attr(data-badge); position: absolute; top: -12px; right: 24px; background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; } .price-card .tier { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .price-card .price { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .price-card .price small { font-size: 0.95rem; font-weight: 400; color: var(--fg-muted); letter-spacing: 0; } .price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .price-card li { font-size: 0.94rem; color: var(--fg-muted); padding-left: 22px; position: relative; } .price-card li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); } .price-card .btn { margin-top: auto; } /* FAQ */ .faq { max-width: 820px; margin: 0 auto; } details { border-bottom: 1px solid var(--border); padding: 20px 0; } details summary { cursor: pointer; font-weight: 500; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; font-family: var(--font-mono); color: var(--fg-muted); font-size: 1.2rem; transition: transform 200ms; } details[open] summary::after { content: "−"; } details p { margin: 12px 0 0; color: var(--fg-muted); max-width: 700px; } /* CTA strip */ .cta-strip { padding: 80px 0; text-align: center; border-top: 1px solid var(--border); } .cta-strip h2 { margin-bottom: 16px; } .cta-strip p { color: var(--fg-muted); margin: 0 auto 28px; max-width: 540px; } .cta-strip .actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ================================================================ PRICING PAGE ================================================================ */ .price-hero { padding: 80px 0 32px; text-align: center; } .price-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); } .price-hero p { color: var(--fg-muted); max-width: 620px; margin: 18px auto 0; font-size: 1.08rem; } .compare { max-width: 920px; margin: 80px auto 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .compare table { width: 100%; border-collapse: collapse; } .compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 0.94rem; } .compare th { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); background: var(--bg-alt); font-weight: 500; } .compare td:not(:first-child) { text-align: center; color: var(--fg-muted); } .compare tr:last-child td { border-bottom: none; } .check { color: var(--accent); } .enterprise { max-width: 920px; margin: 64px auto 0; padding: 36px 40px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .enterprise h3 { font-size: 1.2rem; margin-bottom: 6px; } .enterprise p { color: var(--fg-muted); margin: 0; max-width: 520px; } /* ================================================================ DEMO PAGE ================================================================ */ .demo-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; padding: 64px 0 96px; } @media (max-width: 900px) { .demo-wrap { grid-template-columns: 1fr; gap: 32px; padding-bottom: 64px; } } .demo-side h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 16px; } .demo-side p.lede { color: var(--fg-muted); font-size: 1.05rem; max-width: 460px; } .demo-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); } .demo-card h2 { font-size: 1.4rem; margin-bottom: 6px; } .demo-card .sub { color: var(--fg-muted); font-size: 0.94rem; margin: 0 0 28px; } .agenda { margin-top: 32px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; } .agenda li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); } .agenda li:last-child { border-bottom: 1px solid var(--border); } .agenda .t { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); } .agenda strong { display: block; font-weight: 500; margin-bottom: 4px; } .agenda span { color: var(--fg-muted); font-size: 0.92rem; } /* Honeypot — visually removed; real users never see it */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* Math captcha */ .captcha-field { margin-top: 8px; } .captcha-label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: 2px; } .captcha-eq { display: inline-block; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: var(--radius-sm); margin-bottom: 8px; } .captcha-input { max-width: 120px; } /* Flash messages */ .flash { padding: 12px 20px; font-size: 0.92rem; text-align: center; } .flash-notice { background: var(--success); color: #fff; } .flash-alert { background: var(--danger); color: #fff; } /* Form validation errors */ .form-errors { border: 1px solid var(--danger); border-radius: 8px; overflow: hidden; margin-bottom: 20px; } .form-error-item { padding: 10px 14px; font-size: 0.88rem; color: var(--danger); border-bottom: 1px solid color-mix(in oklch, var(--danger), transparent 80%); background: color-mix(in oklch, var(--danger), transparent 94%); } .form-error-item:last-child { border-bottom: none; } /* Inline callout banners */ .callout { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 16px; font-size: 0.94rem; color: var(--fg); } .callout a { color: var(--accent); font-weight: 500; } /* Auth pages (login / signup) */ .auth-wrap { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 60px 24px; } .auth-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px 44px; width: 100%; max-width: 460px; } @media (max-width: 520px) { .auth-card { padding: 28px 20px; } } .auth-header { text-align: center; margin-bottom: 32px; } .auth-header h1 { font-size: 1.5rem; margin: 16px 0 8px; } .auth-header p { color: var(--fg-muted); font-size: 0.94rem; margin: 0; } .auth-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.1rem; color: var(--fg); text-decoration: none; } .auth-footer { text-align: center; font-size: 0.88rem; color: var(--fg-subtle); margin-top: 20px; margin-bottom: 0; } .auth-footer a { color: var(--accent); } .field-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .field-row label { margin-bottom: 0; } .field-link { font-size: 0.85rem; color: var(--accent); } .field-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 20px; } .field-check input[type="checkbox"] { width: auto; margin: 0; } .field-hint { font-size: 0.82rem; color: var(--fg-subtle); margin-left: 6px; } /* ─── Portal layout ──────────────────────────────────────────────────────── */ .portal-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } /* Sidebar */ .sidebar { background: var(--bg-alt); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 8px; padding: 20px 18px 16px; font-size: 1rem; font-weight: 600; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border); } .sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; color: var(--fg-muted); text-decoration: none; transition: background 0.12s, color 0.12s; } .sidebar-nav a:hover { background: var(--bg-elev); color: var(--fg); } .sidebar-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; } .sidebar-trial { display: block; margin: 0 10px 8px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent); text-decoration: none; transition: opacity 0.15s; } .sidebar-trial:hover { opacity: 0.85; } .sidebar-trial--warning { background: oklch(0.95 0.08 80); border-color: oklch(0.75 0.14 80); } .sidebar-trial--urgent { background: oklch(0.95 0.06 25); border-color: var(--danger); } .sidebar-trial-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 2px; } .sidebar-trial--warning .sidebar-trial-label { color: oklch(0.55 0.14 80); } .sidebar-trial--urgent .sidebar-trial-label { color: var(--danger); } .sidebar-trial-days { font-size: 0.95rem; font-weight: 600; color: var(--fg); margin-bottom: 4px; } .sidebar-trial-cta { font-size: 0.78rem; color: var(--accent); } .sidebar-trial--warning .sidebar-trial-cta { color: oklch(0.55 0.14 80); } .sidebar-trial--urgent .sidebar-trial-cta { color: var(--danger); } [data-theme="dark"] .sidebar-trial--warning { background: oklch(0.28 0.08 80); border-color: oklch(0.65 0.14 80); } [data-theme="dark"] .sidebar-trial--warning .sidebar-trial-label, [data-theme="dark"] .sidebar-trial--warning .sidebar-trial-cta { color: oklch(0.75 0.14 80); } [data-theme="dark"] .sidebar-trial--urgent { background: oklch(0.28 0.08 25); border-color: var(--danger); } .sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 0.85rem; } .sidebar-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sidebar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-user-name { font-weight: 500; color: var(--fg); line-height: 1.3; } .sidebar-user-email { color: var(--fg-subtle); font-size: 0.78rem; } .sidebar-footer a { color: var(--fg-muted); text-decoration: none; font-size: 0.85rem; } .sidebar-footer a:hover { color: var(--danger); } /* Portal main */ .portal-main { background: var(--bg); min-height: 100vh; overflow-y: auto; } .portal-content { padding: 36px 40px; max-width: 1400px; } .portal-page-header { margin-bottom: 28px; } .portal-page-header h1 { font-size: 1.4rem; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em; } .portal-page-header p { color: var(--fg-muted); font-size: 0.94rem; margin: 0; } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 20px; } .stat-card .stat-label { font-size: 0.8rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .stat-card .stat-value { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; color: var(--fg); } /* Data table */ .data-table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; overflow-y: visible; margin-bottom: 24px; position: relative; z-index: 2; } .data-table-header { border-radius: 10px 10px 0 0; } .data-table-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .data-table-header h2 { font-size: 0.95rem; font-weight: 600; margin: 0; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .data-table th { text-align: left; padding: 10px 12px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); border-bottom: 1px solid var(--border); } .data-table th:first-child, .data-table td:first-child { padding-left: 20px; } .data-table th:last-child, .data-table td:last-child { padding-right: 20px; } .data-table td { padding: 12px 12px; color: var(--fg); border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .org-name-display { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--bg-alt); } /* Status badges */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; } .badge-queued { background: var(--bg-alt); color: var(--fg-muted); border: 1px solid var(--border); } .badge-processing { background: oklch(0.95 0.06 200); color: oklch(0.4 0.12 200); } .badge-complete { background: oklch(0.94 0.06 150); color: oklch(0.38 0.12 150); } .badge-failed { background: oklch(0.95 0.06 25); color: oklch(0.45 0.15 25); } .badge-error { background: oklch(0.95 0.06 25); color: oklch(0.45 0.15 25); } [data-theme="dark"] .badge-processing { background: oklch(0.28 0.08 200); color: oklch(0.75 0.14 200); } [data-theme="dark"] .badge-complete { background: oklch(0.26 0.08 150); color: oklch(0.72 0.14 150); } [data-theme="dark"] .badge-failed, [data-theme="dark"] .badge-error { background: oklch(0.28 0.08 25); color: oklch(0.75 0.15 25); } /* Empty state */ .empty-state { padding: 48px 20px; text-align: center; color: var(--fg-muted); } .empty-state h3 { font-size: 1rem; font-weight: 500; margin: 0 0 6px; color: var(--fg); } .empty-state p { font-size: 0.9rem; margin: 0; } /* Settings sections */ .account-form-hidden { display: none !important; } .settings-section { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 24px; overflow: hidden; } .settings-section-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 0.95rem; font-weight: 600; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .settings-row:last-child { border-bottom: none; } .settings-row-label { color: var(--fg-muted); } .settings-row-value { color: var(--fg); font-weight: 500; } /* Action menu dropdown */ .action-menu { position: relative; display: inline-block; } .action-menu-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 0.82rem; color: var(--fg-muted); cursor: pointer; white-space: nowrap; } .action-menu-btn:hover { border-color: var(--border-strong); color: var(--fg); } .action-menu-items { display: none; position: fixed; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 140px; z-index: 1000; overflow: hidden; } .action-menu-items.open { display: block; } .action-menu-item { display: block; width: 100%; padding: 9px 14px; font-size: 0.88rem; color: var(--fg); text-align: left; background: none; border: none; cursor: pointer; text-decoration: none; box-sizing: border-box; } .action-menu-item:hover { background: var(--bg-alt); } .action-menu-item.danger { color: var(--danger); } /* Inline org name edit form */ .org-name-form { display: none; flex-direction: column; gap: 6px; } .org-name-form input { width: 100%; padding: 5px 9px; font-size: 0.88rem; box-sizing: border-box; } .org-name-form .form-actions { display: flex; gap: 6px; } .org-name-form .form-actions input[type="submit"], .org-name-form .form-actions button { padding: 4px 10px; font-size: 0.8rem; } /* Billing page */ .billing-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px; margin-bottom: 28px; } .billing-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .billing-plan-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 6px; } .billing-plan-name { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; } .billing-plan-meta { font-size: 0.88rem; color: var(--fg-muted); margin-top: 4px; } .billing-portal-note { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--fg-muted); } .billing-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 28px; } .billing-plan-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 12px; } .billing-plan-card--current { border-color: var(--accent); } .billing-plan-card-header { display: flex; align-items: center; justify-content: space-between; } .billing-plan-card-name { font-weight: 600; font-size: 1rem; } .billing-plan-card-price { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; } .billing-plan-card-price span { font-size: 0.95rem; font-weight: 400; color: var(--fg-muted); } .billing-plan-card-desc { font-size: 0.88rem; color: var(--fg-muted); margin: 0; } .billing-plan-card-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .billing-plan-card-features li { font-size: 0.88rem; color: var(--fg-muted); padding-left: 18px; position: relative; } .billing-plan-card-features li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); } /* Portal responsive */ @media (max-width: 768px) { .portal-layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .portal-content { padding: 20px; } }