/* "Your Ag App" shell, styled to match the Verge Ag marketing site (vergeag.com). Tokens sourced from the dev-site design system (dev-site/src/input.css). Swap these variables to try your own brand. Fonts (Poppins/Roboto) are loaded via tags in each page's , NOT via @import here: an @import is only discovered after this file is fetched and parsed, which serializes the font CSS request and makes every page navigation flash while fonts swap in. */ :root { --brand-dark: #1e242d; --brand-accent: #b803fd; --brand-accent-dark: #9602d1; --brand-accent-pale: #f5e6ff; --brand-fuchsia: #d946ef; --brand-purple: #a855f7; /* Secondary accents from the vergeag.com home-super3 palette. */ --accent-teal: #14b8a6; --accent-teal-dark: #0d9488; --accent-teal-border: #99f6e4; --accent-teal-tint: #f0fdfa; --accent-cyan: #06b6d4; --accent-cyan-border: #a5f3fc; --accent-cyan-tint: #ecfeff; --accent-blue: #3b82f6; --brand-bg: #f9fafb; --brand-surface: #ffffff; --brand-border: #e5e7eb; --brand-text: #111827; --brand-text-muted: #6b7280; --ok: #16a34a; --warn: #d97706; --error: #dc2626; --header-height: 64px; --sidebar-width: 240px; --radius: 8px; font-size: 15px; } * { box-sizing: border-box; } body { margin: 0; font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; background: var(--brand-bg); color: var(--brand-text); } h1, h2, h3 { font-family: "Poppins", "Roboto", sans-serif; font-weight: 600; } /* ---------- Shell: fixed header + sidebar ---------- */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--brand-dark); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 20px; z-index: 10; } .header .logo { font-family: "Poppins", "Roboto", sans-serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; color: #fff; text-decoration: none; } .header .logo-mark { display: inline-block; width: 26px; height: 26px; border-radius: 6px; background: var(--brand-accent); color: #fff; text-align: center; line-height: 26px; font-weight: 800; margin-right: 8px; } .header .env { margin-left: auto; font-size: 0.8rem; color: #cbd5e1; } .sidebar { position: fixed; top: var(--header-height); left: 0; bottom: 0; width: var(--sidebar-width); background: var(--brand-surface); border-right: 1px solid var(--brand-border); padding: 16px 0; display: flex; flex-direction: column; overflow-y: auto; } .sidebar nav { flex: 1; } /* ---------- "Read the source" nudge (sidebar) ---------- */ .sidebar-source { margin: 12px; padding: 12px 14px; background: linear-gradient(135deg, var(--brand-accent-pale), var(--brand-surface) 70%); border: 1px solid #e9c8ff; border-radius: var(--radius); color: var(--brand-text); font-size: 0.8rem; } .sidebar-source h3 { margin: 0 0 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-text-muted); } .sidebar-source p { margin: 0 0 8px; line-height: 1.45; color: var(--brand-text-muted); } .sidebar a.sidebar-source-link { display: block; padding: 2px 0; border-left: 0; color: var(--brand-accent); font-family: ui-monospace, monospace; font-size: 0.78rem; } .sidebar a.sidebar-source-link:hover { background: none; color: var(--brand-accent-dark); } .sidebar a { display: block; padding: 10px 20px; color: var(--brand-text); text-decoration: none; border-left: 3px solid transparent; } .sidebar a:hover { background: var(--brand-bg); } .sidebar a.active { border-left-color: var(--brand-accent); background: var(--brand-accent-pale); font-weight: 600; } .sidebar .nav-label { display: block; } .sidebar a.sidebar-back { padding: 8px 20px 12px; border-left: 0; font-size: 0.8rem; color: var(--brand-text-muted); } .sidebar a.sidebar-back:hover { background: none; color: var(--brand-accent); } /* Layout only - the visual style comes from the shared .chip class, so the sidebar badges match the mode chips on the home page. */ .sidebar .nav-hint { display: inline-block; margin-top: 3px; } .chip { font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; background: var(--brand-bg); border: 1px solid var(--brand-border); color: var(--brand-text-muted); } .chip-admin { background: var(--brand-accent-pale); border-color: #e9c8ff; color: var(--brand-accent-dark); font-weight: 600; white-space: nowrap; } main { margin: var(--header-height) 0 0 var(--sidebar-width); padding: 28px; max-width: 1100px; } /* ---------- Common elements ---------- */ h1 { margin-top: 0; font-size: 1.5rem; } h2 { font-size: 1.15rem; } p, li { line-height: 1.55; } a { color: var(--brand-accent); } .card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .callout { border: 1px solid var(--brand-border); border-left: 4px solid var(--brand-accent); background: var(--brand-surface); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; } .callout-warn { border-left-color: var(--warn); } /* ---------- Homepage hero graphic ---------- */ .hero-art { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 10px 14px 2px; margin-bottom: 20px; } .hero-art svg { display: block; width: 100%; height: auto; } /* ---------- Objective blocks and step badges ---------- */ .objective { background: linear-gradient(135deg, var(--accent-teal-tint), var(--brand-surface) 60%); border: 1px solid var(--accent-teal-border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 20px; } .objective h2 { margin: 0 0 8px; } .objective-list { margin: 8px 0; padding-left: 22px; } .objective-list li { margin-bottom: 6px; } .step-badge { display: inline-block; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: linear-gradient(to right, var(--brand-fuchsia), var(--brand-purple)); color: #fff; font-size: 0.9rem; text-align: center; line-height: 26px; vertical-align: 2px; } .step-intro { color: var(--brand-text-muted); } .section-title { margin: 28px 0 12px; } .card h2 .chip { font-weight: 500; vertical-align: 2px; margin-left: 6px; } .btn { font: inherit; display: inline-block; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--brand-border); background: var(--brand-surface); cursor: pointer; text-decoration: none; font-weight: 500; } .btn:hover { background: var(--brand-bg); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-primary { background: linear-gradient(to right, var(--brand-fuchsia), var(--brand-purple)); border-color: transparent; color: #fff; } .btn-primary:hover { background: linear-gradient(to right, #c026d3, #9333ea); } .btn-ghost { border-color: transparent; color: var(--brand-accent); padding: 4px 8px; } input[type="password"], input[type="text"], select { font: inherit; padding: 8px 10px; border: 1px solid var(--brand-border); border-radius: var(--radius); min-width: 300px; } pre { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: var(--radius); overflow-x: auto; font-size: 0.8rem; line-height: 1.5; } code { background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 4px; padding: 1px 5px; font-size: 0.85em; } table { border-collapse: collapse; width: 100%; font-size: 0.88rem; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--brand-border); vertical-align: top; } /* ---------- Wizard ---------- */ .wizard-groups { counter-reset: step; } .wizard-group { margin-bottom: 20px; } .wizard-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 1rem; } .wizard-group h3::before { content: ''; width: 12px; height: 12px; border-radius: 3px; flex: none; } .wizard-group-identity h3::before { background: linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)); } .wizard-group-land h3::before { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); } .wizard { list-style: none; margin: 0 0 16px; padding: 0; } .wizard-step { border: 1px solid var(--brand-border); border-radius: var(--radius); background: var(--brand-surface); padding: 14px 16px; margin-bottom: 12px; counter-increment: step; } /* Sequential gating: the next runnable step is highlighted and finished steps get a check. Locked steps keep full contrast on purpose - the page should be comfortably readable before anyone runs it; only their Run button is gated. */ .wizard-step.active { border-color: var(--accent-cyan-border); background: linear-gradient(135deg, var(--accent-cyan-tint), var(--brand-surface) 45%); } .wizard-step.done .wizard-step-title::after { content: ' ✓'; color: var(--accent-teal-dark); font-weight: 700; } .wizard-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .wizard-step-title::before { content: counter(step) ". "; color: var(--brand-text-muted); } .wizard-step-title { font-weight: 600; } .wizard-why { margin: 0 0 8px; color: var(--brand-text-muted); font-size: 0.9rem; } .wizard-api { margin-bottom: 8px; } .wizard-api summary { cursor: pointer; font-size: 0.82rem; color: var(--brand-accent); user-select: none; } .wizard-api[open] summary { margin-bottom: 6px; } .wizard-call { display: inline-block; margin-bottom: 8px; } .wizard-payload { max-height: 220px; overflow-y: auto; margin: 0 0 8px; } .wizard-result { font-size: 0.85rem; color: var(--brand-text-muted); } .wizard-result.ok { color: var(--ok); } .wizard-result.error { color: var(--error); } /* ---------- Log panel ---------- */ .log-panel { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 16px 20px; margin-top: 24px; } .log-header { display: flex; align-items: center; justify-content: space-between; } .log-header h3 { margin: 0; } .log-empty { color: var(--brand-text-muted); font-size: 0.88rem; padding: 12px 0; } .log-entries { list-style: none; margin: 8px 0 0; padding: 0; } .log-entry { border-top: 1px solid var(--brand-border); } .log-summary { font: inherit; display: grid; grid-template-columns: 80px 60px 1fr 55px 70px; gap: 8px; align-items: center; width: 100%; padding: 8px 4px; background: none; border: 0; cursor: pointer; text-align: left; font-size: 0.85rem; } .log-summary:hover { background: var(--brand-bg); } .log-time { color: var(--brand-text-muted); } .log-method { font-weight: 700; } .log-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; } .log-duration { color: var(--brand-text-muted); text-align: right; } .log-status { font-weight: 700; text-align: center; border-radius: 4px; padding: 1px 0; } .status-ok { color: var(--ok); background: #f0fdf4; } .status-warn { color: var(--warn); background: #fffbeb; } .status-error { color: var(--error); background: #fef2f2; } .log-detail { padding: 4px 8px 14px; } .log-detail h4 { margin: 12px 0 4px; font-size: 0.8rem; color: var(--brand-text-muted); text-transform: uppercase; } .log-detail pre { margin: 0; max-height: 260px; overflow-y: auto; } /* ---------- Embedded iframe ---------- */ .embed-frame { width: 100%; height: 640px; border: 1px solid var(--brand-border); border-radius: var(--radius); background: var(--brand-surface); } .embed-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0; } .embed-controls label { display: flex; gap: 6px; align-items: center; font-size: 0.88rem; } /* ---------- Mode cards on the home page ---------- */ .mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .card-handoff { position: relative; overflow: hidden; } .card-handoff::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--brand-fuchsia), var(--brand-purple)); } /* ---------- "Read the source" panel (home page) ---------- */ .card-source { background: linear-gradient(135deg, var(--brand-accent-pale), var(--brand-surface) 60%); border: 1px solid #e9c8ff; border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; } .card-source h2 { margin-top: 0; } .card-source a { color: var(--brand-accent); } .card-source a:hover { color: var(--brand-accent-dark); } @media (max-width: 900px) { .mode-cards { grid-template-columns: 1fr; } main { padding: 16px; } } .mermaid { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 12px; /* Diagrams render async from the CDN module; keep the page from jumping. */ min-height: 140px; }