/* * Aegis User Guide — Brand Book v7 design system. * Document chrome uses Euraika v7 tokens. The shield logo keeps its own palette * (handled by the asset itself, never restyled here). British English throughout. */ :root { /* Aegis brand palette (mirrors src/app/globals.css). Variable NAMES are kept for historical reasons — every rule below references them — but the VALUES are the Aegis tokens so the guide matches the app chrome. */ --euraika-blue: #0b3a63; /* --aegis-blue — primary: headings, links */ --euraika-gold: #f2c94c; /* --eu-gold — accent / CTA highlight only */ --euraika-charcoal: #0f1e2b; /* --aegis-dark — body text, headings, wordmark */ --euraika-teal: #0f1e2b; /* --aegis-dark — dark sidebar / chrome */ --euraika-mist: #4f8cc9; /* --soft-blue — secondary accent */ --euraika-night-black: #0a0c10; --euraika-steel: #4b5563; /* secondary text, borders */ --euraika-cloud: #9ca3af; /* dividers, subtle UI (not body text) */ --euraika-offwhite: #f9fafb; /* app content background (--bg-secondary) */ --euraika-white: #ffffff; --euraika-surface-cool: #f3f4f6; /* table headers, code blocks, doc panels (--bg-tertiary) */ --euraika-flow-gradient: linear-gradient(35deg, #0b3a63 0%, #0f1e2b 55%, #f2c94c 100%); /* Semantic / status only — Aegis success/warning/error/info */ --info: #4f8cc9; --info-bg: #eaf2fa; --info-border: #9dc2e6; --success: #3a8e4f; --success-bg: #e8f5e9; --success-border: #a5d6a7; --warning: #f59e0b; --warning-bg: #fef3c7; --warning-border: #fbbf6b; --warning-ink: #92400e; --error: #dc2626; --error-bg: #fee2e2; --error-border: #f1a8a2; --neutral: #4b5563; --neutral-bg: #f3f4f6; --neutral-border: #d1d5db; /* Spacing scale (8px base) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; /* Radius */ --r-card: 12px; --r-control: 8px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --sidebar-w: 288px; --content-max: 65ch; /* Guide sidebar — theme-aware to match the Aegis app chrome. Light mode: white panel, Aegis-blue wordmark, charcoal links, blue active accent — the same treatment as the app's sidebar. Dark overrides live in the two dark blocks below. */ --guide-sidebar-bg: #ffffff; --guide-sidebar-border: #d1d5db; --guide-sidebar-wordmark: #0b3a63; --guide-sidebar-fg: #4b5563; --guide-sidebar-fg-strong: #0f1e2b; --guide-sidebar-muted: #6b7280; --guide-sidebar-hover: #f3f4f6; --guide-sidebar-active-bg: rgba(11, 58, 99, 0.1); --guide-sidebar-active-fg: #0b3a63; --guide-sidebar-accent: #0b3a63; --guide-sidebar-field-bg: #ffffff; --guide-sidebar-field-border: #d1d5db; --guide-sidebar-field-fg: #0f1e2b; --guide-sidebar-field-ph: #9ca3af; } /* Dark mode — mirrors the Aegis app dark palette (src/app/globals.css `.dark`). The in-app /help embed sets `data-theme="dark"` on this guide's to match the app's theme (class-based toggle, so it can't be detected via a media query); `prefers-color-scheme` is the fallback for standalone viewing. Values-only override of the same :root tokens, so all rules re-theme. */ html[data-theme="dark"] { --euraika-blue: #5ba3d9; /* links + h1 accent — bright on dark */ --euraika-charcoal: #e5e7eb; /* body text + h2–h4 */ --euraika-teal: #0b2236; /* sidebar (kept dark) */ --euraika-mist: #4f8cc9; --euraika-steel: #9ca3af; /* secondary text, captions */ --euraika-cloud: #374151; /* borders, dividers */ --euraika-offwhite: #0f1e2b; /* page background + zebra-odd rows */ --euraika-white: #1a2937; /* elevated surfaces: cards, zebra-even rows, badges */ --euraika-surface-cool: #243545; /* table headers, code blocks, doc panels */ --info: #4f8cc9; --info-bg: #16293c; --info-border: #2e5a82; --success: #5fb570; --success-bg: #15301d; --success-border: #2e7d43; --warning: #f59e0b; --warning-bg: #332408; --warning-border: #92400e; --warning-ink: #fde68a; --error: #f87171; --error-bg: #331717; --error-border: #b91c1c; --neutral: #9ca3af; --neutral-bg: #243545; --neutral-border: #374151; /* Dark sidebar — navy panel, white wordmark, soft-blue active accent (mirrors the app's dark sidebar). */ --guide-sidebar-bg: #0f1e2b; --guide-sidebar-border: #1a2937; --guide-sidebar-wordmark: #ffffff; --guide-sidebar-fg: rgba(255, 255, 255, 0.85); --guide-sidebar-fg-strong: #ffffff; --guide-sidebar-muted: rgba(255, 255, 255, 0.55); --guide-sidebar-hover: rgba(255, 255, 255, 0.08); --guide-sidebar-active-bg: rgba(79, 140, 201, 0.2); --guide-sidebar-active-fg: #4f8cc9; --guide-sidebar-accent: #4f8cc9; --guide-sidebar-field-bg: rgba(255, 255, 255, 0.06); --guide-sidebar-field-border: rgba(255, 255, 255, 0.14); --guide-sidebar-field-fg: #ffffff; --guide-sidebar-field-ph: rgba(255, 255, 255, 0.55); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5); color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --euraika-blue: #5ba3d9; --euraika-charcoal: #e5e7eb; --euraika-teal: #0b2236; --euraika-mist: #4f8cc9; --euraika-steel: #9ca3af; --euraika-cloud: #374151; --euraika-offwhite: #0f1e2b; --euraika-white: #1a2937; --euraika-surface-cool: #243545; --info: #4f8cc9; --info-bg: #16293c; --info-border: #2e5a82; --success: #5fb570; --success-bg: #15301d; --success-border: #2e7d43; --warning: #f59e0b; --warning-bg: #332408; --warning-border: #92400e; --warning-ink: #fde68a; --error: #f87171; --error-bg: #331717; --error-border: #b91c1c; --neutral: #9ca3af; --neutral-bg: #243545; --neutral-border: #374151; --guide-sidebar-bg: #0f1e2b; --guide-sidebar-border: #1a2937; --guide-sidebar-wordmark: #ffffff; --guide-sidebar-fg: rgba(255, 255, 255, 0.85); --guide-sidebar-fg-strong: #ffffff; --guide-sidebar-muted: rgba(255, 255, 255, 0.55); --guide-sidebar-hover: rgba(255, 255, 255, 0.08); --guide-sidebar-active-bg: rgba(79, 140, 201, 0.2); --guide-sidebar-active-fg: #4f8cc9; --guide-sidebar-accent: #4f8cc9; --guide-sidebar-field-bg: rgba(255, 255, 255, 0.06); --guide-sidebar-field-border: rgba(255, 255, 255, 0.14); --guide-sidebar-field-fg: #ffffff; --guide-sidebar-field-ph: rgba(255, 255, 255, 0.55); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5); color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--euraika-charcoal); background: var(--euraika-offwhite); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Typography scale ───────────────────────────────────────── */ .page-title { font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--euraika-blue); margin: 0 0 var(--s-3); letter-spacing: -0.02em; } h1 { font-size: 36px; font-weight: 600; line-height: 1.15; color: var(--euraika-blue); margin: var(--s-6) 0 var(--s-2); letter-spacing: -0.01em; } h2 { font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--euraika-charcoal); margin: var(--s-6) 0 var(--s-2); } h3 { font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--euraika-charcoal); margin: var(--s-4) 0 var(--s-1); } h4 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--euraika-charcoal); margin: var(--s-3) 0 var(--s-1); } p, li { font-size: 16px; max-width: var(--content-max); } .lead { font-size: 19px; line-height: 1.5; color: var(--euraika-charcoal); margin-top: 0; } small, .small { font-size: 14px; } .caption { font-size: 12px; color: var(--euraika-steel); } a { color: var(--euraika-blue); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: var(--euraika-blue); } strong { font-weight: 600; } /* ── Layout: sidebar + content ──────────────────────────────── */ .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--guide-sidebar-bg); color: var(--guide-sidebar-fg); border-right: 1px solid var(--guide-sidebar-border); padding: var(--s-3) var(--s-2); position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } .sidebar .brand { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); border: 0; } .sidebar .brand .wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--guide-sidebar-wordmark); } .sidebar nav a { display: block; color: var(--guide-sidebar-fg); border: 0; padding: 6px var(--s-1); border-radius: var(--r-control); font-size: 14px; line-height: 1.4; } .sidebar nav a:hover { background: var(--guide-sidebar-hover); color: var(--guide-sidebar-fg-strong); } .sidebar nav a.active { background: var(--guide-sidebar-active-bg); color: var(--guide-sidebar-active-fg); box-shadow: inset 3px 0 0 var(--guide-sidebar-accent); font-weight: 600; } .sidebar .nav-group { margin: var(--s-2) 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--guide-sidebar-muted); } .content { padding: var(--s-6) var(--s-6) var(--s-8); min-width: 0; } .content > * { max-width: 820px; } /* search */ .search input { width: 100%; padding: 8px 12px; border-radius: var(--r-control); border: 1px solid var(--guide-sidebar-field-border); background: var(--guide-sidebar-field-bg); color: var(--guide-sidebar-field-fg); font-size: 14px; margin-bottom: var(--s-2); } .search input::placeholder { color: var(--guide-sidebar-field-ph); } /* ── Hero / cover ───────────────────────────────────────────── */ .hero { background: var(--euraika-flow-gradient); color: #fff; border-radius: var(--r-card); padding: var(--s-8) var(--s-6); margin-bottom: var(--s-6); } .hero .page-title { color: #fff; } .hero p { color: rgba(255, 255, 255, 0.92); } /* ── Cards ──────────────────────────────────────────────────── */ .card { background: var(--euraika-white); border: 1px solid var(--euraika-cloud); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--s-3); margin: var(--s-3) 0; } .card-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 100%; } /* ── Tables ─────────────────────────────────────────────────── */ table { border-collapse: collapse; width: 100%; max-width: 100%; margin: var(--s-3) 0; font-size: 15px; } thead th { background: var(--euraika-surface-cool); color: var(--euraika-blue); font-weight: 600; text-align: left; } th, td { padding: 12px 16px; border-bottom: 1px solid var(--euraika-surface-cool); vertical-align: top; } tbody tr:nth-child(odd) { background: var(--euraika-offwhite); } tbody tr:nth-child(even) { background: var(--euraika-white); } /* ── Callouts / alerts ──────────────────────────────────────── */ .callout { border-left: 4px solid var(--neutral-border); background: var(--neutral-bg); border-radius: var(--r-control); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; } .callout .title { font-weight: 600; margin-bottom: 4px; } .callout p { margin: 0; } .callout.info { border-color: var(--info-border); background: var(--info-bg); } .callout.info .title { color: var(--info); } .callout.success { border-color: var(--success-border); background: var(--success-bg); } .callout.success .title { color: var(--success); } .callout.warning { border-color: var(--warning-border); background: var(--warning-bg); } .callout.warning .title, .callout.warning .icon { color: var(--warning-ink); } /* Warning Ink on yellow, never gold */ .callout.error { border-color: var(--error-border); background: var(--error-bg); } .callout.error .title { color: var(--error); } /* ── Step list (numbers match annotation callouts) ──────────── */ .steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s-3) 0; } .steps li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: var(--s-2); min-height: 28px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--euraika-blue); color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; } /* ── Figure (annotated screenshot + caption) ────────────────── */ .figure { margin: var(--s-4) 0; } .figure img { display: block; width: 100%; height: auto; border: 1px solid var(--euraika-cloud); border-radius: var(--r-card); box-shadow: var(--shadow-card); } .figure figcaption { font-size: 12px; color: var(--euraika-steel); margin-top: var(--s-1); } .figure.placeholder .ph { border: 2px dashed var(--euraika-cloud); border-radius: var(--r-card); background: var(--euraika-surface-cool); color: var(--euraika-steel); padding: var(--s-6) var(--s-3); text-align: center; font-size: 14px; } .figure.placeholder .ph code { background: #fff; } /* ── Badges / role badges ───────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--euraika-cloud); color: var(--euraika-charcoal); background: var(--euraika-white); } .role-badge { color: #fff; border: 0; } .role-badge.admin { background: var(--euraika-blue); } .role-badge.manager { background: var(--euraika-teal); } .role-badge.contributor { background: var(--euraika-mist); } .role-badge.viewer { background: var(--euraika-steel); } /* ── Code ───────────────────────────────────────────────────── */ code { font-family: var(--font-mono); font-size: 0.9em; background: var(--euraika-surface-cool); color: var(--euraika-blue); padding: 1px 6px; border-radius: 4px; } pre { background: var(--euraika-surface-cool); border-radius: var(--r-control); padding: var(--s-2); overflow-x: auto; } pre code { background: none; padding: 0; color: var(--euraika-charcoal); } /* ── Glossary term ──────────────────────────────────────────── */ .glossary-term { font-weight: 600; color: var(--euraika-blue); } dl.glossary dt { font-weight: 600; color: var(--euraika-blue); margin-top: var(--s-2); } dl.glossary dd { margin: 0 0 var(--s-1); } /* ── Focus ring ─────────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--euraika-teal); outline-offset: 2px; border-radius: 4px; } /* ── Responsive ─────────────────────────────────────────────── */ @media screen and (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .content { padding: var(--s-3); } } /* ── Print / PDF ────────────────────────────────────────────── */ @media print { .sidebar, .search, .no-print { display: none !important; } .layout { display: block; } .content { padding: 0; } .content > * { max-width: none; } h1, h2, h3 { break-after: avoid; } .figure, .card, table, .callout { break-inside: avoid; } a { color: var(--euraika-charcoal); border: 0; } .page-break { break-before: page; } }