/* Muninn — brand stylesheet. * Two modes (light parchment / dark ink) toggled via [data-theme]. * Single-toggle language via [data-lang] on ; body-wide CSS hides the * inactive language for any element with .i18n + data-tr/data-en. */ :root { --ink: #0b0d0e; --paper: #f3efe7; --accent: #b08a3e; --signal: #c2432b; --mute: #6b6660; --rule: #d8d2c5; --panel: #ffffff; --shadow: 0 1px 2px rgba(10, 10, 10, 0.05); --max: 72rem; --radius: 6px; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif; --font-head: "Instrument Serif", "EB Garamond", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } [data-theme="dark"] { --ink: #e8e3d6; --paper: #111315; --panel: #191b1e; --mute: #8b867d; --rule: #2a2c2e; --accent: #d6b36b; --signal: #e07a5f; --shadow: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } a:hover { color: var(--accent); } /* === Header === */ .top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; } .brand img { color: var(--ink); } .brand-mark { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: .35em; font-weight: 400; } .top-meta { display: flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: .78rem; color: var(--mute); } .top-meta button { background: transparent; color: inherit; border: 1px solid var(--rule); padding: .25rem .5rem; border-radius: var(--radius); cursor: pointer; font-family: var(--font-mono); font-size: .78rem; } .top-meta button:hover { border-color: var(--accent); color: var(--accent); } /* === Layout === */ .container { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } .container.single { max-width: 52rem; } h1, h2, h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.005em; margin: 0 0 .6rem 0; } h1 { font-size: 2.1rem; } h2 { font-size: 1.4rem; margin-top: 2rem; padding-bottom: .35rem; border-bottom: 1px solid var(--rule); } h3 { font-size: 1.1rem; } .hdr-link { text-decoration-color: var(--accent); } .mute { color: var(--mute); } .badge { display: inline-block; font-size: .72rem; padding: 1px 6px; border: 1px solid var(--rule); border-radius: 999px; } /* === Convergent strip === */ .convergent .conv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .conv-card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); } .conv-card h3 { margin-top: 0; } .conv-card .syn { color: var(--ink); margin: .35rem 0 .6rem 0; } .conv-card .members { margin: 0; padding-left: 1.1rem; font-size: .92rem; } .conv-card .members li { margin: .15rem 0; } /* === Regional 4x2 grid === */ .regions { margin-top: 2.5rem; } .region-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .region-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .region-grid { grid-template-columns: 1fr; } } .region-cell { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); min-height: 8rem; } .region-cell header h3 { margin: 0 0 .5rem 0; font-size: 1rem; } .region-cell header a { text-decoration: none; border-bottom: 1px solid var(--accent); } .region-cell ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; } .region-cell li { margin: .2rem 0; } /* === OSINT rail === */ .osint-rail { margin-top: 2.5rem; } .osint-rail details { border-top: 1px solid var(--rule); padding: .55rem 0; } .osint-rail details summary { cursor: pointer; font-family: var(--font-head); font-size: 1.05rem; } .osint-rail summary::marker { color: var(--accent); } .osint-rail .osint-list { list-style: none; padding: .4rem 0 0 1rem; margin: 0; column-count: 2; column-gap: 1.5rem; } .osint-rail .osint-list > li { break-inside: avoid; margin: .35rem 0; } .osint-rail .osint-sub { padding-left: 1rem; margin: .2rem 0 .4rem 0; font-size: .85rem; color: var(--mute); } .osint-rail .osint-sub a { color: var(--mute); } .osint-rail .osint-sub a:hover { color: var(--accent); } @media (max-width: 700px) { .osint-rail .osint-list { column-count: 1; } } /* === Dashboard single page === */ .dash-cat { margin: 2rem 0; } .dash-list { list-style: none; padding: 0; margin: 0; } .dash-list > li { padding: .6rem 0; border-bottom: 1px dashed var(--rule); } .dash-list ul { margin: .25rem 0 0 1rem; font-size: .9rem; } /* === Footer === */ .bottom { max-width: var(--max); margin: 2rem auto 0; padding: 1.25rem 1.25rem 2rem; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--mute); } /* === Bilingual toggle: default hides .i18n[data-en]; JS flips a class when lang switches. === */ html[data-lang="tr"] .i18n { /* default TR: nothing hidden, TR text already rendered */ } html[data-lang="en"] .i18n[data-tr] { display: none; } html[data-lang="en"] .i18n[data-en]::before { content: attr(data-en); } html[data-lang="en"] .i18n[data-en] { /* Override inner content by hiding children and injecting attr(data-en). */ font-size: inherit; } /* Practically, toggle.js just swaps textContent on lang switch so this fallback only applies if JS is off — a graceful, readable fallback. */ /* Prefers dark */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; } }