@import url("/vendor/fonts-lane.css"); /* SevIQ design tokens — "field journal" edition. Dark (default): warm charcoal ground, bone ink, gilt accent, vermillion seal. Light: ivory paper, ink, vermillion leads. Toggle via [data-theme="light"] on . */ :root { color-scheme: dark; --bg: #14110d; --panel: #1d1812; --panel-soft: rgba(236, 229, 216, 0.055); --border: rgba(236, 229, 216, 0.15); --border-strong: rgba(236, 229, 216, 0.32); --text: #ece5d8; --muted: rgba(236, 229, 216, 0.70); --faint: rgba(236, 229, 216, 0.48); --accent: #d9a441; --accent-soft: rgba(217, 164, 65, 0.12); --accent-border: rgba(217, 164, 65, 0.45); --verm: #c9502e; --warn: #e0b35c; --ok: #8ab86f; --wave: #ece5d8; --display: "Newsreader", Georgia, "Times New Roman", serif; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace; } [data-theme="light"] { color-scheme: light; --bg: #f2ede3; --panel: #faf7ee; --panel-soft: rgba(26, 23, 20, 0.045); --border: rgba(26, 23, 20, 0.16); --border-strong: rgba(26, 23, 20, 0.34); --text: #1a1714; --muted: rgba(26, 23, 20, 0.72); --faint: rgba(26, 23, 20, 0.52); --accent: #b02e1b; --accent-soft: rgba(176, 46, 27, 0.09); --accent-border: rgba(176, 46, 27, 0.42); --verm: #b02e1b; --warn: #9a6a12; --ok: #4e7d3a; --wave: #1a1714; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: linear-gradient(180deg, var(--accent-soft), rgba(0, 0, 0, 0) 420px), var(--bg); color: var(--text); font-family: var(--font); } body { line-height: 1.55; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .shell { width: min(1160px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 48px; } .topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 0 0 18px; border-bottom: 1px solid var(--border); } .brand { font-family: var(--display); font-weight: 560; font-size: 21px; letter-spacing: 0.01em; color: var(--text); text-decoration: none; } .brand::after { content: "."; color: var(--verm); } .nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; } .nav a, .pill, .button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; text-decoration: none; } .nav a:hover, .pill:hover, .button:hover { border-color: var(--accent-border); color: var(--accent); text-decoration: none; } .nav a[aria-current="page"] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); } /* Theme toggle injected by /theme.js into .nav */ .theme-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent-border); color: var(--accent); } .hero { display: grid; gap: 14px; padding: clamp(24px, 5vw, 54px) 0 26px; } .eyebrow { margin: 0; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } h1 { margin: 0; max-width: 900px; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 7vw, 68px); line-height: 1.0; letter-spacing: -0.01em; } h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3vw, 32px); line-height: 1.08; letter-spacing: 0; } h3 { margin: 0; font-family: var(--display); font-weight: 560; font-size: 19px; letter-spacing: 0; } p { margin: 0; color: var(--muted); } .postal-address { color: var(--muted); font-style: normal; } .lede { max-width: 760px; font-size: clamp(16px, 2vw, 19px); color: var(--muted); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } .band { margin-top: 22px; padding: 22px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); } .card { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); } .card .meta, .meta { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .button { width: fit-content; min-height: 44px; padding: 10px 14px; font-weight: 600; color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); } .button.secondary { color: var(--text); border-color: var(--border); background: var(--panel-soft); } /* Status badges — a maturity/kind signal, deliberately distinct from the plain .meta category kicker so the two never read as the same thing. */ .tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 3px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--faint); font: 600 10px/1 var(--mono); letter-spacing: 0.10em; text-transform: uppercase; } .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tag-stable { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); } .tag-live { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); } .tag-branch { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); } .tag-backlog { color: var(--faint); border-color: var(--border); background: var(--panel-soft); } .tag-draft, .tag-placeholder { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); } /* Side-branch card: a path that stands beside the core spine, not on it. */ .card.branch { border-color: var(--accent-border); background: linear-gradient(180deg, var(--accent-soft), var(--panel)); } .list { margin: 0; padding-left: 20px; color: var(--muted); } .list li + li { margin-top: 6px; } .steps { counter-reset: step; display: grid; gap: 12px; margin: 0; padding: 0; } .steps li { counter-increment: step; list-style: none; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--muted); } .steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); font: 600 12px var(--mono); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr); gap: 14px; align-items: start; } .callout { border-left: 2px solid var(--verm); padding: 13px 15px; background: var(--accent-soft); color: var(--muted); border-radius: 0 3px 3px 0; } .code { font-family: var(--mono); color: var(--warn); } footer { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; } @media (max-width: 760px) { .shell { width: min(100vw - 24px, 1160px); padding-top: 14px; } .nav { margin-left: 0; width: 100%; } .split { grid-template-columns: 1fr; } } /* Keyboard bypass past the primary navigation. Hidden until focused. */ .skip-link { position: absolute; top: -48px; left: 8px; z-index: 100; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; background: var(--panel); color: var(--text); border: 1px solid var(--accent-border); border-radius: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-decoration: none; transition: top 120ms ease; } .skip-link:focus { top: 8px; outline: 2px solid var(--accent); outline-offset: 2px; }