/* ============================================================================ SolAuth — design tokens & base layer Shared by the marketing site (landing.css) and the product (app.css) so the two never drift. Neutral surfaces, hairline borders, one restrained accent. Theme comes from [data-theme="light"|"dark"] on , written before first paint by the inline head script. Dark is the default. ========================================================================== */ :root{ /* ── Surfaces (dark, default) ───────────────────────────────────────────── */ --bg0:#0a0b0d; /* canvas */ --bg1:#0f1114; /* rails / sidebar */ --bg2:#131519; /* cards */ --bg3:#1a1d22; /* inputs / hover */ --bg4:#23272e; /* active / meters */ --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.11); --line3:rgba(255,255,255,.17); --t1:#e8eaed; /* primary text */ --t2:#a2a8b0; /* secondary */ --t3:#6b717a; /* muted */ /* One accent. No gradients, no glow. */ --brand:#3b82f6; --brand-2:#60a5fa; --brand-deep:#2563eb; --brand-soft:rgba(59,130,246,.13); --brand-line:rgba(59,130,246,.28); --on-accent:#ffffff; --ok:#22c55e; --err:#ef4444; --warn:#f59e0b; --info:#3b82f6; --code:#93c5fd; --shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.32); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --ring:rgba(59,130,246,.35); /* ── Shared, theme-independent ──────────────────────────────────────────── */ --radius:10px; --radius-sm:8px; --radius-lg:14px; --sidebar-w:248px; /* Fluid, but not sprawling. The default container tracks the viewport and stops at 1320px — past that, rows of cards start reading as billboards and text lines get uncomfortably long. */ --container:min(1320px, 92vw); /* For the pieces that genuinely want the room: the hero and its product preview, which are picture-led rather than text-led. */ --container-wide:min(1560px, 94vw); /* Gutters scale with the viewport too, so the edges never feel cramped on a phone or wastefully wide on a desktop. */ --gutter:clamp(18px, 3vw, 48px); --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Legacy aliases — older inline styles and JS still resolve these. */ --ac:var(--brand); --ac3:var(--brand-2); --gn:var(--ok); --rd:var(--err); --am:var(--warn); --t-main:var(--t1); --border:var(--line2); --b2:var(--bg3); --b4:var(--line2); --glass-bg:var(--bg3); --ac-glow:var(--ring); --ac-gradient:var(--brand); --gn-g:color-mix(in srgb,var(--ok) 12%,transparent); --gn-border:color-mix(in srgb,var(--ok) 34%,transparent); --am-g:color-mix(in srgb,var(--warn) 12%,transparent); --am-border:color-mix(in srgb,var(--warn) 34%,transparent); } :root[data-theme="light"]{ --bg0:#f6f7f9; --bg1:#ffffff; --bg2:#ffffff; --bg3:#f1f3f5; --bg4:#e6e9ee; --line:rgba(15,18,24,.09); --line2:rgba(15,18,24,.14); --line3:rgba(15,18,24,.22); --t1:#14171c; --t2:#4c525c; --t3:#818893; --brand:#2563eb; --brand-2:#3b82f6; --brand-deep:#1d4ed8; --brand-soft:rgba(37,99,235,.09); --brand-line:rgba(37,99,235,.24); --on-accent:#ffffff; --ok:#16a34a; --err:#dc2626; --warn:#d97706; --info:#2563eb; --code:#1d4ed8; --shadow:0 1px 2px rgba(16,18,22,.05), 0 8px 24px rgba(16,18,22,.07); --shadow-sm:0 1px 2px rgba(16,18,22,.06); --ring:rgba(37,99,235,.28); } /* ── Base ─────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} /* The horizontal guard lives on , not : on it makes the body a scroll box, which is what quietly breaks position:sticky headers on a long page. Body gets min-height so a short page still fills the viewport without capping a tall one. */ html{height:100%;overflow-x:hidden;scroll-behavior:smooth} body{ min-height:100%; font-family:var(--font); background:var(--bg0); color:var(--t1); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } a{color:inherit;text-decoration:none} button{font-family:inherit} img{max-width:100%} ::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:20px;border:2px solid var(--bg0)} *::-webkit-scrollbar-thumb:hover{background:var(--line3)} /* ── Theme toggle (identical on both surfaces) ────────────────────────────── */ .theme-btn{ width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer; background:transparent;border:1px solid var(--line2);color:var(--t2); display:grid;place-items:center;transition:color .14s,background .14s,border-color .14s; } .theme-btn:hover{color:var(--t1);background:var(--bg3);border-color:var(--line3)} .theme-btn svg{width:17px;height:17px} /* ── Prevent browser autofill background highlight ──────────────────────── */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg0) inset !important; -webkit-text-fill-color: var(--t1) !important; transition: background-color 5000s ease-in-out 0s; } :root[data-theme="light"] input:-webkit-autofill, :root[data-theme="light"] input:-webkit-autofill:hover, :root[data-theme="light"] input:-webkit-autofill:focus, :root[data-theme="light"] input:-webkit-autofill:active, :root[data-theme="light"] textarea:-webkit-autofill, :root[data-theme="light"] textarea:-webkit-autofill:hover, :root[data-theme="light"] textarea:-webkit-autofill:focus, :root[data-theme="light"] textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg1) inset !important; -webkit-text-fill-color: var(--t1) !important; } /* ── Status dot ───────────────────────────────────────────────────────────── */ .dot-ok{ display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok); margin-right:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent); } .pulse-dot{ width:7px;height:7px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); animation:pulseDot 2.2s ease-in-out infinite; } @keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}