/* * agent-life — Shared Theme for Static Pages * * Linked by standalone HTML pages (specification, memory mappings, docs). * Mirrors the variables in assets/css/theme.css used by the Nuxt app. * * Available themes (every theme is a named [data-theme] block — no implicit fallback): * [data-theme="original"] — teal on charcoal (matches agent-life.ai) * [data-theme="midnight"] — steel-blue on navy * [data-theme="weyland"] — amber on navy * * To switch: set data-theme="" on the tag of each static page. * To add a theme: add a [data-theme="..."] block here and mirror it in assets/css/theme.css. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Roboto+Slab:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap'); /* ── Shared tokens (not theme-specific) ── */ :root { --font-sans: 'Roboto', system-ui, -apple-system, sans-serif; --font-serif: 'Roboto Slab', Georgia, serif; --font-mono: 'Roboto Mono', ui-monospace, monospace; --sidebar-width: 280px; --content-max: 1020px; --text: var(--text-primary); --border-strong: var(--border-hover); } /* ── Original theme ── * Teal accent on charcoal. This is the look on agent-life.ai. */ [data-theme="original"] { --accent: #4fb8a6; --accent-bright: #6fcebf; --accent-dim: #3a8e7f; --accent-glow: rgba(79, 184, 166, 0.10); --accent-glow-strong: rgba(79, 184, 166, 0.22); --bg-deep: #0b0e11; --bg-card: #111518; --bg-card-hover: #171c20; --bg-input: #161b1f; --bg-sidebar: #0e1215; --bg-code: #161b1f; --bg-table-head: #151a1e; --bg-table-alt: #0f1316; --text-primary: #e2e4e8; --text-secondary: #8b919a; --text-dim: #555b65; --text-sidebar: #8b919a; --text-sidebar-active: #e2e4e8; --border: rgba(79, 184, 166, 0.10); --border-hover: rgba(79, 184, 166, 0.28); --link: #4fb8a6; --link-hover: #6fcebf; --warm: #c9a25c; --warm-glow: rgba(201, 162, 92, 0.08); --color-error: #e05252; --color-error-dim: rgba(224, 82, 82, 0.12); --color-success: #4fb8a6; --color-success-dim: rgba(79, 184, 166, 0.12); --color-warning: #c9a25c; --color-warning-dim: rgba(201, 162, 92, 0.12); } /* ── Midnight theme ── */ [data-theme="midnight"] { --accent: #8bb0cf; --accent-bright: #c1e2fd; --accent-dim: #5d8bab; --accent-glow: rgba(139, 176, 207, 0.10); --accent-glow-strong: rgba(139, 176, 207, 0.22); --bg-deep: #181f2d; --bg-card: #1e2738; --bg-card-hover: #243044; --bg-input: #1e2738; --bg-sidebar: #151b28; --bg-code: #1a2233; --bg-table-head: #1e2738; --bg-table-alt: #161d2b; --text-primary: #97a8b8; --text-secondary: #6b7d8e; --text-dim: #4a5a6a; --text-sidebar: #6b7d8e; --text-sidebar-active: #97a8b8; --border: rgba(139, 176, 207, 0.10); --border-hover: rgba(139, 176, 207, 0.22); --link: #8bb0cf; --link-hover: #c1e2fd; --warm: #e8a74e; --warm-glow: rgba(232, 167, 78, 0.08); --color-error: #cf6b6b; --color-error-dim: rgba(207, 107, 107, 0.12); --color-success: #6bab9a; --color-success-dim: rgba(107, 171, 154, 0.12); --color-warning: #d4a94e; --color-warning-dim: rgba(212, 169, 78, 0.12); } /* ── Weyland theme ── */ [data-theme="weyland"] { --accent: #e8a74e; --accent-bright: #f0bf72; --accent-dim: #c48a3a; --accent-glow: rgba(232, 167, 78, 0.10); --accent-glow-strong: rgba(232, 167, 78, 0.22); --bg-deep: #181f2d; --bg-card: #1e2738; --bg-card-hover: #243044; --bg-input: #1e2738; --bg-sidebar: #151b28; --bg-code: #1a2233; --bg-table-head: #1e2738; --bg-table-alt: #161d2b; --text-primary: #97a8b8; --text-secondary: #6b7d8e; --text-dim: #4a5a6a; --text-sidebar: #6b7d8e; --text-sidebar-active: #97a8b8; --border: rgba(139, 176, 207, 0.10); --border-hover: rgba(139, 176, 207, 0.22); --link: #8bb0cf; --link-hover: #c1e2fd; --warm: #8bb0cf; --warm-glow: rgba(139, 176, 207, 0.08); --color-error: #cf6b6b; --color-error-dim: rgba(207, 107, 107, 0.12); --color-success: #6bab9a; --color-success-dim: rgba(107, 171, 154, 0.12); --color-warning: #d4a94e; --color-warning-dim: rgba(212, 169, 78, 0.12); } /* ── Base reset & body ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 52px; } body { font-family: var(--font-sans); font-size: 17px; line-height: 1.72; color: var(--text-primary); background: var(--bg-deep); min-height: 100vh; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; }