/* Trekko Developers — shared brand stylesheet.
Mirrors the trekko.co design system: Public Sans, light theme, purple accent.
Load order in each page:
*/
:root{
/* Backgrounds */
--bg-app:#F6F9FC; --bg-surface:#FFFFFF; --bg-subtle:#F8FAFC; --bg-code:#0A0E19;
/* Text */
--text:#1a1f36; --muted:#697386; --tertiary:#8898aa;
/* Accent (Trekko purple) */
--accent:#635BFF; --accent-hover:#4f46e5; --accent-2:#2359FF;
--accent-tint:rgba(99,91,255,.06); --accent-ring:rgba(99,91,255,.12);
/* Status */
--ok:#059669; --ok-bg:#f0fdf4; --ok-border:#86efac;
--warn:#d97706; --warn-bg:#fffbeb; --warn-border:#fcd34d;
--bad:#dc2626; --bad-bg:#fef2f2; --bad-border:#fca5a5;
/* Lines + radii + shadow */
--line:#e3e8ef; --line-strong:#d6dde8; --line-soft:#f1f5f9;
--r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
--shadow:0 1px 4px rgba(16,31,54,.05); --shadow-lg:0 10px 30px rgba(16,31,54,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--bg-app); color:var(--text);
font:400 15px/1.6 "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px}
.wrap.narrow{max-width:880px}
/* ── Nav ───────────────────────────────────────────────────────────────── */
header.nav{display:flex; align-items:center; justify-content:space-between;
padding:18px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px;
letter-spacing:-.02em; color:var(--text)}
.logo span{color:var(--accent)}
.logo svg{display:block}
header.nav nav{display:flex; flex-wrap:wrap; gap:22px}
header.nav nav a{color:var(--muted); font-weight:600; font-size:14px}
header.nav nav a:hover{color:var(--text); text-decoration:none}
/* ── Typography ────────────────────────────────────────────────────────── */
h1{font-size:44px; line-height:1.08; letter-spacing:-.025em; font-weight:800; margin:.1em 0 .3em}
h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
font-weight:700; margin:0 0 18px}
h3{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px}
h3.big{font-size:24px; letter-spacing:-.02em; text-transform:none; color:var(--text); margin:0 0 8px}
.lead{font-size:19px; line-height:1.55; color:var(--muted); max-width:720px; margin:0 0 26px}
.eyebrow{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:.06em; color:var(--accent)}
.muted{color:var(--muted); font-size:13px}
code.inline,td code,p code,li code{background:var(--bg-subtle); border:1px solid var(--line-soft);
padding:2px 7px; border-radius:var(--r-sm); font-size:.85em;
font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace}
/* ── Sections + hero ──────────────────────────────────────────────────── */
section{padding:34px 0; border-top:1px solid var(--line)}
.hero{padding:64px 0 34px; border:0}
.pill{display:inline-block; font-size:12px; font-weight:700; color:var(--accent);
background:var(--accent-tint); border:1px solid var(--accent-ring);
padding:6px 13px; border-radius:var(--r-pill); margin-bottom:18px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.stats{display:flex; gap:34px; flex-wrap:wrap; margin-top:40px; color:var(--muted); font-size:14px}
.stats b{display:block; color:var(--text); font-size:22px; font-weight:800}
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-block; padding:11px 20px; border-radius:var(--r-md); font-weight:700;
font-size:15px; cursor:pointer; border:1px solid transparent; transition:all .15s ease;
font-family:inherit; line-height:1.2}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(99,91,255,.18)}
.btn.primary:hover{background:var(--accent-hover); transform:translateY(-1px);
box-shadow:0 6px 16px rgba(99,91,255,.28); text-decoration:none}
.btn.ghost{background:var(--bg-surface); color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
/* ── Cards + grids ────────────────────────────────────────────────────── */
.card{background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-lg);
box-shadow:var(--shadow); padding:22px 24px; display:block}
a.card{color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s}
a.card:hover{border-color:var(--line-strong); box-shadow:var(--shadow-lg);
transform:translateY(-2px); text-decoration:none}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted); font-size:14px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){.two,.three{grid-template-columns:1fr} h1{font-size:34px}}
/* ── Badges ───────────────────────────────────────────────────────────── */
.badge{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px;
border-radius:var(--r-pill); vertical-align:middle;
font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace}
.badge.test,.badge.live{font-family:inherit}
.badge.live{color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-border)}
.badge.test{color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-ring)}
/* ── Code blocks ──────────────────────────────────────────────────────── */
pre{background:var(--bg-code); color:#dfe6f5; border:1px solid #1b2236; border-radius:var(--r-lg);
padding:16px 18px; overflow:auto; margin:14px 0 0;
font:13.5px/1.6 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
pre .c{color:#6b7689} pre .k{color:#8fb6ff} pre .s{color:#5fd3a0}
/* ── Tables ───────────────────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
tbody tr:hover{background:var(--accent-tint)}
/* ── Forms ────────────────────────────────────────────────────────────── */
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:12px 0 5px}
input,select,textarea{width:100%; padding:10px 13px; border-radius:var(--r-md);
border:1px solid var(--line); background:var(--bg-surface); color:var(--text);
font-size:14px; font-family:inherit; transition:border-color .12s, box-shadow .12s}
input:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-ring)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:620px){.row{grid-template-columns:1fr}}
/* ── Steps ────────────────────────────────────────────────────────────── */
.step{display:flex; gap:14px; margin-bottom:14px}
.step .n{flex:0 0 28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px}
.steps{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 8px; font-size:13px; color:var(--muted)}
.steps b{color:var(--text)}
/* ── Notes / callouts ─────────────────────────────────────────────────── */
.note{font-size:13.5px; color:var(--muted); background:var(--bg-subtle);
border:1px solid var(--line); border-left:3px solid var(--accent);
padding:12px 16px; border-radius:var(--r-md); margin-top:16px}
.note.ok{border-left-color:var(--ok); background:var(--ok-bg)}
.note.warn{border-left-color:var(--warn); background:var(--warn-bg)}
.note.bad{border-left-color:var(--bad); background:var(--bad-bg)}
.note b{color:var(--text)}
/* ── Console-specific (key/value rows, copy, meter) ───────────────────── */
.kv{display:flex; align-items:center; gap:10px; background:var(--bg-subtle);
border:1px solid var(--line); border-radius:var(--r-md); padding:9px 12px; margin-top:8px;
font:13px ui-monospace,Menlo,Consolas,monospace; word-break:break-all}
.kv b{color:var(--muted); font:600 11px/1 "Public Sans",sans-serif; text-transform:uppercase;
letter-spacing:.05em; flex:0 0 84px}
.copy{margin-left:auto; flex:0 0 auto; font:600 12px/1 "Public Sans",sans-serif; color:var(--accent);
background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-sm);
padding:6px 10px; cursor:pointer}
.copy:hover{border-color:var(--accent)}
.meter{height:9px; background:var(--bg-subtle); border:1px solid var(--line);
border-radius:var(--r-pill); overflow:hidden; margin:10px 0 4px}
.meter > div{height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent))}
/* ── Footer ───────────────────────────────────────────────────────────── */
footer{padding:40px 0; color:var(--muted); font-size:13px; border-top:1px solid var(--line); margin-top:8px}
footer nav{display:flex; flex-wrap:wrap; gap:16px}