/* otzar — Raycast/Cloudflare-Mix layout (M3.43+). * * Design notes: * - Near-black background, layered card surfaces (bg / soft / card / elev). * - Cyan→Indigo gradient as identity color (Sigle-Blocks, accent rails). * - Three font families: Inter (UI), JetBrains Mono (codes), Gentium Plus (Greek/Heb). * - Three-column layout for pericopes (Tree | Doc | Mini-TOC). * - Sticky top-bar with central Cmd+K palette + action icons. * - Lots of breathing room; subtle 1px rules; rounded corners 6-14px. */ :root { /* Surface scale — 4 layers from deepest to most elevated */ --bg: #08070a; --bg-soft: #0e0d12; --bg-card: #14131a; --bg-elev: #1a1922; --bg-code: #1a1922; /* Text scale — 4 contrasts */ --fg: #e6e6e8; /* body */ --fg-strong: #ffffff; /* headings */ --fg-soft: #9ea0a6; /* captions, secondary nav (alias muted) */ --fg-muted: #9ea0a6; --muted: #9ea0a6; --fg-faint: #61626b; /* tertiary, mono-codes */ /* Rules + accents */ --rule: #25232b; --rule-soft: #1f1e26; --accent: #6366f1; /* Indigo — primary identity */ --accent-2: #00d4aa; /* Cyan — counts, eyebrow */ --accent-3: #6366f1; /* alias for clarity in newer code */ --gradient: linear-gradient(135deg, #00d4aa 0%, #6366f1 100%); /* Misc */ --kbd-bg: #2b2a32; --link: #6366f1; --link-hov: #818cf8; --pill-bd: rgba(255,255,255,0.18); --pill-bg: rgba(255,255,255,0.04); --pill-bg-h: rgba(255,255,255,0.10); --max-w: 78rem; --pad-x: 2rem; /* Font stacks */ --serif: "Gentium Plus", "Cardo", "EB Garamond", "Linux Libertine", Georgia, serif; --sans: "Inter", -apple-system, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace; } /* Light-Mode-Overrides — aktiviert via data-theme="light" auf . * Hellgrau, Indigo-Akzent, gedaempfte Regeln. Konsistent mit dunklem Schema * — gleicher Indigo-Identitaetston, anderes Surface. */ :root[data-theme="light"] { --bg: #fafaf7; --bg-soft: #f3f2ef; --bg-card: #ffffff; --bg-elev: #ffffff; --bg-code: #f5f5f3; --fg: #1a1a1c; --fg-strong: #000000; --fg-soft: #5a5a5c; --fg-muted: #6a6a6c; --muted: #6a6a6c; --fg-faint: #9a9a9c; --rule: #e0dfdb; --rule-soft: #ecebe7; --accent: #4f46e5; /* dunkleres Indigo fuer Light */ --accent-2: #0891b2; /* dunkleres Cyan */ --accent-3: #4f46e5; --gradient: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%); --kbd-bg: #ecebe7; --link: #4f46e5; --link-hov: #312e81; --pill-bd: rgba(0,0,0,0.18); --pill-bg: rgba(0,0,0,0.03); --pill-bg-h: rgba(0,0,0,0.08); } * { box-sizing: border-box; } html { font-size: 17px; background: var(--bg); color: var(--fg); } body { margin: 0; font-family: var(--sans); font-feature-settings: "ss01" on, "kern" on; line-height: 1.55; background: var(--bg); color: var(--fg); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Headerausweich-Polster — siehe fixed header weiter unten. */ padding-top: var(--header-h, 4.25rem); } /* Greek/Hebrew-Texte verwenden Gentium Plus (siehe --serif). */ [lang="grc"], [lang="el"], [lang="he"] { font-family: var(--serif); font-feature-settings: "liga" 1, "kern" 1; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease, color 120ms ease; } a:hover { color: var(--link-hov); border-bottom-color: var(--fg-soft); } ::selection { background: var(--accent); color: var(--bg); } /* ---------------- Header (fixed + Apple Liquid-Glass) ---------------- * * Festgelegt 2026-05-08 (siehe Memory `feedback_liquid_glass_header.md`): * - position: fixed oben, ueber den ganzen Viewport. * - Hintergrund halbtransparent + backdrop-filter blur+saturate gibt * den iOS/macOS „Liquid Glass"-Effekt. * - Hauchduenne Border-Bottom + ein Highlight-Streifen oben simulieren * die typische Apple-Glas-Kante. * - body bekommt entsprechendes padding-top (siehe oben). * * Print-Stylesheet versteckt header global ueber `display: none !important`. */ :root { --header-h: 4.25rem; /* Stronger glass: more opacity so scrolled-under content reads as * a soft blur, not as ghost letters bleeding through. */ --glass-bg: rgba(22, 22, 24, 0.85); --glass-rule: rgba(255, 255, 255, 0.08); --glass-shine: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] { --glass-bg: rgba(250, 250, 247, 0.85); --glass-rule: rgba(0, 0, 0, 0.08); --glass-shine: rgba(255, 255, 255, 0.55); } /* WICHTIG: nur der Top-Level-Header (direkter body-child) bekommt das * Liquid-Glass-Treatment — niemals die
* innerhalb der Sections (sonst stapeln die sich alle als fixed oben * uebereinander und maskieren den eigentlichen Header). */ body > header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); padding: 0; background: var(--glass-bg); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border-bottom: 1px solid var(--glass-rule); box-shadow: inset 0 1px 0 0 var(--glass-shine), 0 10px 32px -16px rgba(0, 0, 0, 0.7); } /* Browser ohne backdrop-filter: vollopaker Fallback, kein Bleed-Through. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body > header { background: rgba(22, 22, 24, 0.98); } :root[data-theme="light"] body > header { background: rgba(250, 250, 247, 0.98); } } /* Druck: der fixierte Liquid-Glass-Header wird ausgeblendet, damit * Browser-Ausdrucke (Strg+P) sauber bleiben — kein durchscheinendes * Glas, kein doppelter Kopf auf jeder Seite. Das WeasyPrint-PDF nutzt * zusaetzlich static/print.css; diese Regel deckt das Browser-Drucken * der normalen HTML-Seiten ab. */ @media print { body > header { display: none !important; } /* Headerausweich-Polster ist auf Papier unnoetig. */ body { padding-top: 0 !important; } } .otzar-topbar { max-width: var(--max-w); margin: 0 auto; padding: 0.85rem var(--pad-x); height: 100%; display: flex; align-items: center; gap: 2rem; } .otzar-logo { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.04em; line-height: 0.95; color: var(--fg); border: none; text-transform: uppercase; font-size: 0.7rem; } .otzar-logo .l1 { display: block; } .otzar-logo .l2 { display: block; font-family: "Noto Sans Hebrew", "David", system-ui, sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0; color: var(--fg-soft); text-transform: none; margin-top: 0.1rem; } .otzar-logo:hover { border: none; color: var(--accent); } .otzar-nav { display: flex; gap: 1.5rem; margin-left: 1rem; } .otzar-nav a { color: var(--fg-soft); font-size: 0.9rem; font-weight: 500; border: none; padding: 0.4rem 0; } .otzar-nav a:hover { color: var(--fg); } .otzar-nav .caret { font-size: 0.65rem; margin-left: 0.25rem; opacity: 0.7; transition: transform 0.15s ease, opacity 0.15s ease; } /* --- Mega-Menue: Hover-Untermenue der Hauptnavigation --- */ .otzar-nav-item { position: relative; display: flex; align-items: center; } .otzar-nav-item > a { display: inline-flex; align-items: center; } .otzar-nav-item:hover > a, .otzar-nav-item:focus-within > a { color: var(--fg); } .otzar-nav-item:hover .caret, .otzar-nav-item:focus-within .caret { transform: rotate(180deg); opacity: 1; } .otzar-mega { position: absolute; top: 100%; left: 0; margin-top: 0.55rem; min-width: 13rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.05rem; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 80; } /* unsichtbare Bruecke ueber dem Spalt, damit der Hover nicht abreisst */ .otzar-mega::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; } .otzar-nav-item:hover .otzar-mega, .otzar-nav-item:focus-within .otzar-mega { opacity: 1; visibility: visible; transform: translateY(0); } .otzar-mega .mega-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); padding: 0.3rem 0.55rem 0.45rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--rule); } .otzar-mega a { border: none; padding: 0.45rem 0.55rem; border-radius: 6px; color: var(--fg-soft); font-size: 0.86rem; font-weight: 500; white-space: nowrap; } .otzar-mega a:hover { background: var(--bg-card); color: var(--fg); } /* RTL (Hebraeisch): Panel rechtsbuendig oeffnen */ [dir="rtl"] .otzar-mega { left: auto; right: 0; } /* schmale Viewports: kein Hover-Panel — die Trigger bleiben Links */ @media (max-width: 880px) { .otzar-mega { display: none; } } /* --- Cmd+K palette button (top-bar center) --- */ .otzar-cmdk { margin-left: auto; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 6px; padding: 0.4rem 0.8rem; min-width: 280px; color: var(--fg-muted); font-size: 0.86rem; font-family: var(--sans); cursor: pointer; transition: border-color 0.12s, background 0.12s; } .otzar-cmdk:hover { border-color: var(--accent); background: var(--bg-elev); } .otzar-cmdk-text { flex: 1; text-align: left; } .otzar-cmdk-kbd { background: var(--kbd-bg); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: var(--mono); font-size: 0.72rem; color: var(--fg); } /* --- Top-bar action icons (page-specific: PDF, Permalink, Git, Graph) --- */ .otzar-topbar-actions { display: flex; gap: 0.15rem; padding: 0 0.4rem; border-left: 1px solid var(--rule); margin-left: 0.5rem; } .top-action { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; cursor: pointer; color: var(--fg-muted); text-decoration: none; position: relative; transition: background 0.12s, color 0.12s; border-bottom: none; /* override generic a:hover border */ } .top-action:hover { background: var(--bg-card); color: var(--accent); } .top-action svg { width: 16px; height: 16px; } .top-action::after { content: attr(data-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--bg-elev); color: var(--fg); padding: 0.3rem 0.55rem; border-radius: 4px; font-size: 0.74rem; white-space: nowrap; border: 1px solid var(--rule); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100; } .top-action:hover::after { opacity: 1; } .otzar-actions { display: flex; align-items: center; gap: 0.85rem; } /* --- Globe + Dropdown language menu (top-bar) --- */ .otzar-lang-menu { position: relative; font-family: "JetBrains Mono", "Source Code Pro", monospace; } .otzar-lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; background: transparent; user-select: none; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .otzar-lang-menu summary::-webkit-details-marker { display: none; } .otzar-lang-menu summary:hover { color: var(--fg); border-color: var(--fg); } .otzar-lang-menu[open] summary { color: var(--fg); border-color: var(--fg); background: var(--bg-soft); } .otzar-lang-menu .globe-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .otzar-lang-menu .otzar-lang-current { font-weight: 600; letter-spacing: 0.08em; } .otzar-lang-menu .caret { font-size: 0.65rem; opacity: 0.7; } .otzar-lang-list { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 50; min-width: 12rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .otzar-lang-list li { padding: 0; } .otzar-lang-list a { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 4px; color: var(--muted); text-decoration: none; border: none; transition: background 0.1s ease, color 0.1s ease; } .otzar-lang-list a:hover { background: var(--bg); color: var(--fg); } .otzar-lang-list a.active { color: var(--fg); background: var(--bg); } .otzar-lang-list a.active::after { content: "●"; margin-left: auto; font-size: 0.55rem; color: var(--accent); align-self: center; } .otzar-lang-list .lang-code { font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 600; width: 1.5rem; flex-shrink: 0; } .otzar-lang-list .lang-name { font-family: "Inter", system-ui, sans-serif; font-size: 0.92rem; letter-spacing: 0; } [dir="rtl"] .otzar-lang-list { right: auto; left: 0; } /* Top-level language picker (otzar/) */ .otzar-langpicker { max-width: 42rem; margin: 0 auto; padding: 6rem 2rem; text-align: center; } .otzar-langpicker-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; } .otzar-langpicker-lead { color: var(--fg-soft); font-size: 1.1rem; margin: 0 0 3rem; } .otzar-langpicker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .otzar-langpicker-grid li { background: var(--bg); } .otzar-langpicker-grid a { display: block; padding: 1.5rem 1rem; border: none; color: var(--fg); text-align: center; transition: background 150ms ease; } .otzar-langpicker-grid a:hover { background: var(--bg-soft); } .otzar-langpicker-grid .code { display: block; font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.4rem; } .otzar-langpicker-grid .name { display: block; font-size: 1rem; font-weight: 500; } .pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border: 1px solid var(--pill-bd); border-radius: 999px; background: var(--pill-bg); color: var(--fg); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; } .pill:hover { background: var(--pill-bg-h); border-color: var(--accent); color: var(--accent); } .pill .ico { display: inline-block; width: 0.9rem; height: 0.9rem; border: 1px solid currentColor; border-radius: 50%; position: relative; flex-shrink: 0; } .pill .ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; transform: scale(0.45); } /* ---------------- Main / Hero ---------------- */ main { max-width: var(--max-w); margin: 0 auto; padding: 1rem var(--pad-x) 4rem; } .otzar-hero { padding: 4rem 0 6rem; position: relative; } .otzar-hero h1 { font-size: clamp(2.5rem, 7.5vw, 5rem); line-height: 1.02; margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); } .otzar-hero .lead { font-size: clamp(1rem, 1.6vw, 1.25rem); margin-top: 1.5rem; color: var(--fg-soft); max-width: 36rem; } .otzar-hero .scroll-arrow { display: inline-block; margin-top: 3.5rem; font-size: 1.5rem; color: var(--fg-soft); border: 1px solid var(--rule); width: 2.6rem; height: 2.6rem; line-height: 2.5rem; text-align: center; border-radius: 50%; text-decoration: none; } .otzar-hero .scroll-arrow:hover { border-color: var(--accent); color: var(--accent); } /* --- Hero CTA pair (Streamline-style primary + secondary) --- */ .hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; } .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.85rem 1.4rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.005em; border-radius: 999px; text-decoration: none; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .btn-primary { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--rule); } .btn-secondary:hover { border-color: var(--fg); } /* --- Numbered home sections (Streamline 01/02/03 pattern) --- */ .home-section { padding: 4rem 0; border-top: 1px solid var(--rule); } .home-section:first-of-type { border-top: none; } .home-section-header { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; gap: 1.5rem; margin-bottom: 1.75rem; } .home-section-num { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0.12em; } .home-section-header h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; letter-spacing: -0.015em; font-weight: 600; color: var(--fg); } .home-section .otzar-index { margin-left: 6.5rem; } .home-section-empty, .home-section-text { margin-left: 6.5rem; color: var(--fg-soft); } .home-section-link { color: var(--fg); border-bottom: 1px solid transparent; text-decoration: none; } .home-section-link:hover { border-bottom-color: var(--accent); } @media (max-width: 720px) { .home-section-header { grid-template-columns: 1fr; gap: 0.5rem; } .home-section .otzar-index, .home-section-empty, .home-section-text { margin-left: 0; } } /* ---------------- Sections / lists ---------------- */ section { padding: 2rem 0; } section + section { border-top: 1px solid var(--rule); } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 1rem; } h2 { font-size: 1.6rem; color: var(--fg); } h3 { font-size: 1.2rem; color: var(--fg-soft); } p { margin: 0.5rem 0 1rem; } .otzar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1.5rem; margin: 2rem 0 3rem; padding: 0; border: 1px solid var(--rule); border-radius: 4px; } .otzar-stats dt { padding: 1rem 1.25rem 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .otzar-stats dd { margin: 0; padding: 0.25rem 1.25rem 1rem; font-size: 1.8rem; font-weight: 600; color: var(--fg); } .otzar-index { list-style: none; margin: 1rem 0; padding: 0; border-top: 1px solid var(--rule); } .otzar-index li { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); } .otzar-index a { color: var(--fg); font-weight: 500; border: none; } .otzar-index a:hover { color: var(--accent); } .otzar-index .summary { color: var(--muted); font-size: 0.9rem; } /* Manuscript metadata table */ .manuscript-meta { display: grid; grid-template-columns: minmax(8rem, 0.3fr) 1fr; gap: 0.75rem 1.5rem; margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .manuscript-meta dt { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; align-self: center; } .manuscript-meta dd { margin: 0; color: var(--fg); font-size: 1rem; } .manuscript-meta a { color: var(--fg-soft); } .manuscript-meta a:hover { color: var(--accent); } /* --- Manuscript hero (Streamline display style) --- */ .manuscript-hero { padding: 3.5rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .manuscript-sigle { font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: clamp(4rem, 12vw, 8rem); line-height: 0.9; font-weight: 700; color: var(--fg); letter-spacing: -0.04em; } .manuscript-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; font-weight: 500; color: var(--fg-soft); letter-spacing: -0.01em; } .manuscript-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0.4rem 0 0; } .manuscript-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 2rem 0 3rem; } .meta-cell { background: var(--bg); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; min-height: 4rem; } .meta-label { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .meta-value { font-size: 0.95rem; color: var(--fg); word-break: break-word; } .meta-value a { color: var(--accent); text-decoration: none; } .meta-value a:hover { border-bottom: 1px solid var(--accent); } /* --- Graph viewer (static SVG, dark mode) --- */ .otzar-graph { padding: 1.5rem 0 4rem; } .graph-summary { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--muted); } .graph-host { margin: 2rem 0; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 6px; display: flex; align-items: center; justify-content: center; min-height: 30rem; padding: 1rem; } .graph-svg { width: 100%; max-width: 38rem; height: auto; } .graph-edge { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; } .graph-node circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; transition: fill 0.15s ease; } .graph-node:hover circle { fill: var(--accent); } .graph-node text { font-family: "JetBrains Mono", monospace; font-size: 12px; fill: var(--fg); letter-spacing: -0.01em; pointer-events: none; } .graph-empty { font-style: italic; color: var(--muted); } .graph-load-failed::before { content: "(graph data unavailable)"; color: var(--muted); font-style: italic; } .graph-fallback { margin-top: 2rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); } .graph-fallback summary { cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; padding: 0.5rem 0; } .graph-fallback summary:hover { color: var(--fg); } .graph-fallback-note { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: var(--muted); word-break: break-all; } .dot-fallback { background: var(--bg-soft); border: 1px solid var(--rule); padding: 1rem; font-size: 0.78rem; overflow-x: auto; max-height: 30rem; } /* Baende — 12-card grid, Brockhaus-style */ .otzar-bands { padding: 2rem 0 4rem; } .otzar-bands-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .band-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.25rem; background: var(--bg); min-height: 7rem; transition: background 150ms ease; } .band-card:hover { background: var(--bg-soft); } .band-num { font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); } .band-title { font-size: 1rem; font-weight: 500; color: var(--fg); letter-spacing: -0.005em; line-height: 1.3; } /* IIIF embed in manuscript pages */ .manuscript-iiif { margin: 2.5rem 0; } .manuscript-iiif h2 { font-size: 1.1rem; letter-spacing: 0.02em; color: var(--fg-soft); margin-bottom: 0.6rem; } .iiif-note { font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: 0.78rem; color: var(--muted); word-break: break-all; margin: 0 0 1rem; } .iiif-frame { width: 100%; height: 600px; border: 1px solid var(--rule); background: var(--bg-soft); } /* Lehrpfade — curated learning paths */ .otzar-lehrpfad { padding: 2rem 0 4rem; } .otzar-lehrpfad-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .lehrpfad-step { display: grid; grid-template-columns: 4rem 1fr; gap: 1.25rem; padding: 1.25rem 1.5rem; background: var(--bg); align-items: start; transition: background 150ms ease; } .lehrpfad-step:hover { background: var(--bg-soft); } .step-num { font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: 1.5rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; } .step-body { display: flex; flex-direction: column; gap: 0.4rem; } .step-kind { font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; } .step-link { font-size: 1.1rem; font-weight: 500; color: var(--fg); border: none; letter-spacing: -0.005em; } .step-link:hover { color: var(--accent); } .step-link.unresolved { color: var(--muted); } .step-note { margin: 0; color: var(--fg-soft); font-size: 0.95rem; line-height: 1.5; } /* Apparatus */ .apparatus-lemma .lemma { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; margin: 0.5rem 0; } .apparatus-lemma .reference { color: var(--muted); font-size: 0.95rem; } .apparatus-readings table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .apparatus-readings th, .apparatus-readings td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .apparatus-readings th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .apparatus-readings td:first-child { font-weight: 500; } /* --- Apparatus eyebrow + reading list (Streamline-style) --- */ .apparatus-lemma { margin-bottom: 3rem; } .apparatus-eyebrow { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; } .apparatus-reading-list { list-style: none; margin: 1.5rem 0 0; padding: 0; } .apparatus-reading { display: grid; grid-template-columns: 4rem 1fr; column-gap: 1.25rem; padding: 1.4rem 0; border-top: 1px solid var(--rule); align-items: baseline; } .apparatus-reading:last-child { border-bottom: 1px solid var(--rule); } .reading-num { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; color: var(--muted); letter-spacing: 0.1em; align-self: baseline; } .reading-body { min-width: 0; } .reading-text { margin: 0 0 0.6rem; font-size: 1.15rem; line-height: 1.4; color: var(--fg); } .reading-witnesses { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; } .reading-witnesses-label { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.4rem; } .witness-sigle { font-family: "JetBrains Mono", "Source Code Pro", monospace; font-size: 0.85rem; padding: 0.2rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-soft); } a.witness-link { text-decoration: none; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; } a.witness-link:hover { color: var(--fg); border-color: var(--accent); background: var(--bg-soft); } .manuscript-tags { margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag-pill { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; } /* --- Lehrpfad hero + arrow on resolved step links --- */ .lehrpfad-hero { padding: 3.5rem 0 2rem; display: flex; flex-direction: column; gap: 0.6rem; } .lehrpfad-lead { max-width: 44rem; } .lehrpfad-meta-line { margin: 1rem 0 0; } .lehrpfad-step-count { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; } .step-arrow { display: inline-block; margin-left: 0.4rem; color: var(--muted); transition: transform 0.12s ease, color 0.12s ease; } a.step-link:hover .step-arrow { color: var(--accent); transform: translateX(3px); } /* --- Login stub page --- */ .otzar-login { padding: 1rem 0 4rem; max-width: 42rem; } .otzar-login .lead { color: var(--fg-soft); margin-bottom: 2rem; } .otzar-login-providers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .login-provider { background: var(--bg); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; } .login-provider-name { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--fg); } .login-provider-desc { font-size: 0.9rem; color: var(--muted); } .login-note { margin-top: 2rem; font-size: 0.85rem; color: var(--muted); font-style: italic; } /* --- Pericope (Bd 6 — Synopsis layer) --- */ .pericope-sigle { font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: -0.02em; } .manuscript-meta-grid.pericope-refs { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); } .pericope-synopsis { padding: 1rem 0 3rem; } .pericope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.5rem; } .pericope-cell { background: var(--bg); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 12rem; } .pericope-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; } .pericope-cell-evangelist { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; color: var(--fg); letter-spacing: 0.06em; text-transform: uppercase; } .pericope-cell-ref { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; } .pericope-cell-text { margin: 0; font-family: "Cardo", "EB Garamond", "Times New Roman", serif; font-size: 0.9rem; line-height: 1.55; color: var(--fg); white-space: pre-wrap; word-wrap: break-word; background: transparent; border: none; padding: 0; } .pericope-cell-empty { color: var(--muted); font-style: italic; margin: 0; } .pericope-note { padding: 1rem 0 3rem; color: var(--fg-soft); max-width: 60rem; } .pericope-actions { margin: 1.5rem 0 0; } .pdf-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; font-size: 0.85rem; font-family: "Inter", system-ui, sans-serif; letter-spacing: 0.01em; color: var(--fg); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; transition: border-color 0.12s ease, background 0.12s ease; } .pdf-button:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.08); } .pdf-icon { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 0.95rem; } /* --- Cross-Link-Button (Apparat → Synopsis und v.v.) --- */ .crosslink-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; margin-left: 0.6rem; font-size: 0.85rem; font-family: "Inter", system-ui, sans-serif; letter-spacing: 0.01em; color: var(--fg-soft); background: transparent; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .crosslink-button:hover { color: var(--fg); border-color: var(--accent); background: rgba(255, 255, 255, 0.04); } .crosslink-icon { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 0.9rem; color: var(--accent); } .pericope-apparatus-links { padding: 1rem 0 2rem; } /* --- 404 page --- */ .otzar-404 { padding: 1rem 0 4rem; max-width: 50rem; } .otzar-404 .lead { color: var(--fg-soft); font-size: 1.05rem; line-height: 1.55; margin-bottom: 2rem; } .otzar-404-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0; } /* --- Edition (ECM-Schicht, Bd 5) --- */ .edition-lemma { padding: 1.5rem 1.5rem 1rem; margin: 1.5rem 0 2rem; background: var(--bg-soft); border-left: 3px solid var(--accent); } .edition-context .ctx { color: var(--muted); font-family: "Cardo", "EB Garamond", "Times New Roman", serif; font-size: 1.05rem; } .edition-context .lemma { color: var(--fg); font-weight: 600; font-family: "Cardo", "EB Garamond", "Times New Roman", serif; font-size: 1.25rem; background: rgba(255,255,255,0.06); padding: 0.05em 0.3em; border-radius: 2px; } .edition-fontium { padding: 1rem 0 2rem; } .edition-fontium-list { list-style: none; margin: 1rem 0 0; padding: 0; } .edition-fontium-entry { padding: 0.6rem 0; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--fg-soft); } .edition-fontium-entry:last-child { border-bottom: 1px solid var(--rule); } .fontium-ref { font-family: "JetBrains Mono", monospace; font-weight: 600; color: var(--fg); margin-right: 0.4rem; } .fontium-note { color: var(--muted); } .edition-comment { padding: 1rem 0 3rem; } .edition-comment-body { margin-left: 6.5rem; max-width: 50rem; color: var(--fg-soft); line-height: 1.6; } @media (max-width: 720px) { .edition-comment-body { margin-left: 0; } } @media (max-width: 1024px) { .pericope-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pericope-grid { grid-template-columns: 1fr; } } .reading-note { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--muted); font-style: italic; } /* --- Streamline-style listing cards (manuscripts/, apparatus/, lehrpfade/) --- */ .otzar-cards { list-style: none; margin: 2rem 0; padding: 0; } .otzar-card { padding: 0; } .otzar-card-link { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1.25rem; padding: 1.5rem 0.5rem; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background 0.12s ease, padding 0.12s ease; } .otzar-card:last-child .otzar-card-link { border-bottom: 1px solid var(--rule); } .otzar-card-link:hover { background: var(--bg-soft); padding-left: 1.25rem; padding-right: 1.25rem; } .otzar-card-num { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; color: var(--muted); letter-spacing: 0.1em; } .otzar-card-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .otzar-card-title { font-size: 1.05rem; color: var(--fg); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; } .otzar-card-summary { font-size: 0.86rem; color: var(--muted); line-height: 1.5; } .otzar-card-arrow { font-size: 1.2rem; color: var(--muted); transition: color 0.12s ease, transform 0.12s ease; } .otzar-card-link:hover .otzar-card-arrow { color: var(--accent); transform: translateX(3px); } .otzar-empty { padding: 2rem 0; color: var(--muted); font-style: italic; } /* =========================================================== * M3.43 — Doc Layout (Drei-Spalten: Tree | Main | Mini-TOC) * =========================================================== * - Pericope-Detail-Seiten extenden base_doc.html. * - Tree links (sticky, 280px) mit Werk-Hierarchie. * - Main Mitte (max-width 1100px, padding generous). * - Mini-TOC rechts (fixed edge, 6 Bars vertikal). * - Toggle-Button neben Filter (Sidebar zu/auf). * - Edge-Indikator am linken Rand wenn Sidebar zu. */ /* Toggle-Checkbox versteckt (CSS-only Sidebar-Schalter) */ #otzar-toggle-tree { display: none; } /* Layout */ .otzar-doc-layout { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - var(--header-h, 4.25rem)); max-width: 1500px; margin: 0 auto; transition: grid-template-columns 0.2s ease; } #otzar-toggle-tree:not(:checked) ~ main .otzar-doc-layout, body:has(#otzar-toggle-tree:not(:checked)) .otzar-doc-layout { grid-template-columns: 1fr; } #otzar-toggle-tree:not(:checked) ~ main .otzar-doc-layout aside.otzar-tree, body:has(#otzar-toggle-tree:not(:checked)) .otzar-doc-layout aside.otzar-tree { display: none; } /* Edge-Indikator (Sidebar zu → klickbarer Pfeil am linken Rand) */ .otzar-tree-edge { display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 45; width: 18px; height: 60px; background: var(--bg-card); border: 1px solid var(--rule); border-left: none; border-radius: 0 6px 6px 0; cursor: pointer; align-items: center; justify-content: center; color: var(--fg-muted); transition: background 0.12s, color 0.12s, width 0.12s; } .otzar-tree-edge:hover { background: var(--bg-elev); color: var(--accent); width: 22px; } .otzar-tree-edge svg { width: 12px; height: 12px; } #otzar-toggle-tree:not(:checked) ~ .otzar-tree-edge { display: flex; } /* Tree (linke Sidebar) */ aside.otzar-tree { border-right: 1px solid var(--rule); padding: 1.25rem 0.75rem; overflow-y: auto; font-size: 0.88rem; background: var(--bg-soft); max-height: calc(100vh - var(--header-h, 4.25rem)); position: sticky; top: var(--header-h, 4.25rem); } .otzar-tree-search-row { display: flex; align-items: center; gap: 0.4rem; margin: 0 0.4rem 1rem; } .otzar-tree-toggle { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; cursor: pointer; color: var(--fg-muted); transition: background 0.12s, color 0.12s; flex-shrink: 0; } .otzar-tree-toggle:hover { background: var(--bg-elev); color: var(--accent); } .otzar-tree-toggle svg { width: 15px; height: 15px; } .otzar-tree-search { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 5px; padding: 0.4rem 0.65rem; color: var(--fg-faint); font-size: 0.78rem; flex: 1; min-width: 0; } .otzar-tree-section { margin-bottom: 0.5rem; } .otzar-tree-section-head { padding: 0.45rem 0.65rem; font-weight: 600; color: var(--fg-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; } .otzar-tree-section-head .count { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--fg-faint); text-transform: none; letter-spacing: 0; } aside.otzar-tree details summary { list-style: none; cursor: pointer; } aside.otzar-tree details summary::-webkit-details-marker { display: none; } aside.otzar-tree details summary::before { content: "▸"; color: var(--fg-faint); display: inline-block; width: 14px; transition: transform 0.15s; } aside.otzar-tree details[open] > summary::before { transform: rotate(90deg); } aside.otzar-tree details summary { padding: 0.35rem 0.65rem; border-radius: 4px; font-size: 0.85rem; color: var(--fg); display: flex; align-items: center; } aside.otzar-tree details summary:hover { background: var(--bg-card); } aside.otzar-tree details summary .count { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--fg-faint); } .otzar-tree-eyebrow { padding: 0.05rem 0.65rem 0.45rem 1.85rem; color: var(--fg-faint); font-size: 0.74rem; font-style: italic; } /* Verschachtelte details — eingerueckt */ aside.otzar-tree details details > summary { padding-left: 1.85rem; font-size: 0.83rem; } aside.otzar-tree details details details > summary { padding-left: 2.85rem; font-size: 0.82rem; } .otzar-tree-leaf { display: block; padding: 0.3rem 0.65rem 0.3rem 1.85rem; color: var(--fg-muted); text-decoration: none; border-radius: 4px; font-size: 0.83rem; border-bottom: none; } .otzar-tree-leaf:hover { background: var(--bg-card); color: var(--fg); border-bottom-color: transparent; } .otzar-tree-leaf.active { background: rgba(99, 102, 241, 0.12); color: var(--accent); font-weight: 500; border-left: 2px solid var(--accent); padding-left: 1.7rem; } aside.otzar-tree details details .otzar-tree-leaf { padding-left: 2.85rem; } aside.otzar-tree details details .otzar-tree-leaf.active { padding-left: 2.7rem; } aside.otzar-tree details details details .otzar-tree-leaf { padding-left: 3.85rem; font-size: 0.82rem; } aside.otzar-tree details details details .otzar-tree-leaf.active { padding-left: 3.7rem; } .otzar-tree-band { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.35rem 0.65rem 0.35rem 1.85rem; color: var(--fg); text-decoration: none; border-radius: 4px; font-size: 0.84rem; border-bottom: none; } .otzar-tree-band:hover { background: var(--bg-card); border-bottom-color: transparent; } .otzar-tree-band .bd-num { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-2); background: rgba(0, 212, 170, 0.1); padding: 0.12rem 0.45rem; border-radius: 4px; flex-shrink: 0; } .otzar-tree-band .bd-title { color: var(--fg-muted); font-size: 0.81rem; line-height: 1.3; } /* Main column (Mitte) */ .otzar-doc-main { padding: 2rem 3rem 3rem; max-width: 1100px; margin: 0 auto; width: 100%; } /* Mini-TOC (rechter Bildschirmrand, fixed) */ .otzar-mini-toc { position: fixed; top: 50%; right: 14px; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem 0; } .otzar-mini-toc a { width: 28px; height: 5px; border-radius: 3px; background: var(--rule); transition: all 0.15s; position: relative; text-decoration: none; cursor: pointer; border-bottom: none; } .otzar-mini-toc a:hover { background: var(--fg-muted); width: 34px; border-bottom-color: transparent; } .otzar-mini-toc a.active { background: var(--accent); width: 40px; box-shadow: 0 0 14px rgba(99, 102, 241, 0.45); } .otzar-mini-toc a::after { content: attr(data-label); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--bg-elev); color: var(--fg); padding: 0.35rem 0.7rem; border-radius: 5px; font-size: 0.78rem; white-space: nowrap; border: 1px solid var(--rule); font-family: var(--sans); opacity: 0; pointer-events: none; transition: opacity 0.15s; } .otzar-mini-toc a:hover::after { opacity: 1; } /* ============ Doc Hero (Pericope-Detail-Seite) ============ */ .doc-hero { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .doc-sigle { flex-shrink: 0; width: 76px; height: 76px; background: var(--gradient); border-radius: 14px; display: grid; place-items: center; font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: white; box-shadow: 0 8px 24px rgba(0, 212, 170, 0.25); } .doc-hero-meta { flex: 1; min-width: 0; } .doc-hero-eyebrow { color: var(--accent-2); font-size: 0.74rem; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; } .doc-title { font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.5rem; color: var(--fg-strong); font-weight: 700; } .doc-title-gr { color: var(--fg-muted); font-weight: 400; font-family: var(--serif); font-size: 1.4rem; margin-left: 0.4rem; } .doc-ref-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } .doc-ref-pill { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.84rem; color: var(--fg); font-family: var(--mono); } .doc-lead { font-size: 1.125rem; line-height: 1.7; color: var(--fg-muted); max-width: 780px; margin-bottom: 2.5rem; } /* ============ Doc Section (mit Anchor-IDs für Mini-TOC) ============ */ section.doc-section { margin-bottom: 3rem; scroll-margin-top: 80px; } section.doc-section > h2 { font-size: 1.4rem; color: var(--fg-strong); letter-spacing: -0.01em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-soft); margin-bottom: 1.25rem; display: flex; align-items: baseline; gap: 0.6rem; font-weight: 600; } .doc-section-badge { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; background: rgba(99, 102, 241, 0.15); color: var(--accent); padding: 0.18rem 0.55rem; border-radius: 999px; } /* ============ Synopsis 4-Spalten-Grid ============ */ .doc-synopsis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; } @media (max-width: 1100px) { .doc-synopsis-grid { grid-template-columns: repeat(2, 1fr); } } .doc-syn-col { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } .doc-syn-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.45rem; border-bottom: 1px solid var(--rule-soft); gap: 0.5rem; } .doc-syn-ev { font-weight: 700; font-size: 0.92rem; font-family: var(--mono); color: var(--fg-strong); } .doc-syn-ref { font-family: var(--mono); font-size: 0.74rem; color: var(--fg-muted); white-space: nowrap; } .doc-syn-text { font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; color: var(--fg); word-wrap: break-word; hyphens: auto; font-feature-settings: "liga" 1, "kern" 1; white-space: pre-wrap; } .doc-syn-empty { color: var(--fg-faint); font-style: italic; text-align: center; padding: 1.5rem 0; font-size: 0.9rem; } /* ============ Doc Section-Tag (M3.43, AT-Sektion-IDs) ============ */ .doc-section-tag { display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--accent); background: rgba(99, 102, 241, 0.12); padding: 0.22rem 0.6rem; border-radius: 4px; letter-spacing: 0.06em; margin-right: 0.65rem; vertical-align: middle; } /* ============ Doc Witness-Cards (M3.43) ============ */ .doc-witness-group { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.4rem; margin-bottom: 0.85rem; } .doc-witness-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-soft); margin-bottom: 0.85rem; } .doc-witness-kind { display: flex; align-items: baseline; gap: 0.65rem; font-size: 0.95rem; color: var(--fg-strong); font-weight: 600; } .doc-witness-tag { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; color: var(--accent); background: rgba(99, 102, 241, 0.12); padding: 0.2rem 0.55rem; border-radius: 4px; letter-spacing: 0.05em; } .doc-witness-count { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-2); background: rgba(0, 212, 170, 0.1); padding: 0.18rem 0.55rem; border-radius: 999px; } .doc-witness-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; } .doc-witness-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.8rem; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: var(--fg); font-size: 0.88rem; transition: all 0.12s; border-bottom: none; } .doc-witness-chip:hover { border-color: var(--accent); border-bottom-color: var(--accent); } .doc-witness-sigle { font-family: var(--mono); font-weight: 600; color: var(--fg-strong); } .doc-witness-sigle-full { color: var(--accent); border-bottom: 1px dotted var(--accent); } .doc-witness-date { color: var(--fg-muted); font-size: 0.78rem; } /* --- Pericope witnesses section (collapsible per kind) --- */ .pericope-witnesses { margin-top: 2rem; } .witness-group { margin: 0.85rem 0; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-soft); } .witness-group[open] { background: transparent; } .witness-group-summary { cursor: pointer; display: flex; align-items: baseline; gap: 0.85rem; font-weight: 500; list-style: none; } .witness-group-summary::-webkit-details-marker { display: none; } .witness-group-summary::before { content: "▸"; color: var(--muted); font-size: 0.8rem; transition: transform 0.15s ease; } .witness-group[open] .witness-group-summary::before { transform: rotate(90deg); } .witness-kind-label { font-family: "JetBrains Mono", monospace; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--fg); } .witness-count { font-size: 0.78rem; color: var(--muted); font-family: "JetBrains Mono", monospace; background: var(--bg-soft); padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule); } .witness-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; } .witness-entry { display: inline-flex; align-items: baseline; gap: 0.45rem; font-size: 0.88rem; padding: 0.25rem 0.55rem; border-radius: 4px; background: var(--bg-soft); } .witness-sigle { font-family: "JetBrains Mono", monospace; font-weight: 600; color: var(--fg); } .witness-sigle-link { text-decoration: none; border-bottom: 1px dotted var(--muted); transition: color 0.12s ease, border-color 0.12s ease; } .witness-sigle-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .witness-date, .witness-library, .witness-name, .witness-complete, .witness-note { color: var(--muted); font-size: 0.82rem; } .witness-complete { font-style: italic; } /* --- Witness cross-link to full manuscript record --- */ .witness-cross-link { margin: 1rem 0 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-soft); } .witness-cross-link-anchor { display: inline-flex; align-items: baseline; gap: 0.55rem; color: var(--accent); text-decoration: none; font-size: 0.92rem; transition: color 0.12s ease; } .witness-cross-link-anchor:hover { text-decoration: underline; } .witness-cross-link-arrow { font-size: 1.1rem; line-height: 1; } .witness-cross-link-label { font-weight: 500; } /* --- Listing index: up-link to parent route --- */ .otzar-listing-up { margin: 1rem 0 1.5rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule); } .otzar-listing-up-link { display: inline-flex; align-items: baseline; gap: 0.55rem; color: var(--muted); text-decoration: none; font-size: 0.88rem; transition: color 0.12s ease; } .otzar-listing-up-link:hover { color: var(--accent); } .otzar-listing-up-arrow { font-size: 1.1rem; line-height: 1; } .otzar-listing-up-label { font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; } .otzar-listing-up-title { color: var(--fg); font-weight: 500; } .otzar-listing-up-link:hover .otzar-listing-up-title { color: var(--accent); } /* --- Pericope detail: prev/next/up navigation --- */ .pericope-pn-nav { margin: 1.5rem 0 2rem; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.85rem; } .pericope-pn-nav-bottom { margin: 3rem 0 1.5rem; border-top: 1px solid var(--rule); } .pericope-pn-up { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; color: var(--muted); } .pericope-pn-up-label { font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; } .pericope-pn-up-link { color: var(--accent); text-decoration: none; font-weight: 500; } .pericope-pn-up-link:hover { text-decoration: underline; } .pericope-pn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .pericope-pn-link { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: 6px; color: inherit; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease; min-width: 0; } .pericope-pn-link:hover { background: var(--bg-soft); border-color: var(--accent); } .pericope-pn-prev { justify-content: flex-start; } .pericope-pn-next { justify-content: flex-end; text-align: right; } .pericope-pn-arrow { font-size: 1.5rem; color: var(--muted); flex-shrink: 0; } .pericope-pn-link:hover .pericope-pn-arrow { color: var(--accent); } .pericope-pn-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow: hidden; } .pericope-pn-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .pericope-pn-title { font-size: 0.95rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pericope-pn-placeholder { display: block; } @media (max-width: 700px) { .pericope-pn-row { grid-template-columns: 1fr; gap: 0.75rem; } } /* --- Perikopen index: two-column AT|NT layout --- */ .perikopen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1.5rem; } .perikopen-col { min-width: 0; } .perikopen-col-head { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--rule); margin-bottom: 0.5rem; } .perikopen-col-sigle { font-family: "JetBrains Mono", monospace; font-size: 0.95rem; font-weight: 600; color: var(--accent); letter-spacing: 0.05em; } .perikopen-col-title { font-size: 1.15rem; font-weight: 500; margin: 0; color: var(--fg); letter-spacing: -0.01em; } .perikopen-grid .otzar-cards { margin-top: 0.5rem; } @media (max-width: 900px) { .perikopen-grid { grid-template-columns: 1fr; gap: 2rem; } } /* Search input */ .otzar-search input[type="search"] { width: 100%; max-width: 36rem; padding: 0.85rem 1rem; font-size: 1rem; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 4px; color: var(--fg); outline: none; } .otzar-search input[type="search"]:focus { border-color: var(--accent); } .search-status { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; margin: 0.6rem 0 1rem; min-height: 1.2em; } .otzar-search-results { list-style: none; padding: 0; margin: 0; } .search-hit { padding: 0.9rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 8rem 1fr; column-gap: 1.25rem; align-items: baseline; } .search-hit:last-child { border-bottom: 1px solid var(--rule); } .search-kind { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; align-self: baseline; } .search-kind-manuscript { color: var(--accent); } .search-kind-apparatus { color: #a8c2da; } .search-kind-lehrpfad { color: #d2b48c; } .search-link { font-size: 1.05rem; color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; } .search-link:hover { border-bottom-color: var(--accent); } .search-snippet { grid-column: 2; margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--muted); line-height: 1.45; } mark { background: rgba(255,255,255,0.12); color: var(--accent); padding: 0 2px; } /* Code blocks (apparatus prose, etc.) */ pre, code { font-family: "JetBrains Mono", "Source Code Pro", Consolas, Monaco, monospace; background: var(--bg-soft); color: var(--fg); border-radius: 3px; } pre { padding: 1rem 1.25rem; overflow-x: auto; border: 1px solid var(--rule); font-size: 0.9rem; line-height: 1.5; } code { padding: 0.125rem 0.35rem; font-size: 0.9em; } blockquote { border-left: 3px solid var(--rule); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--fg-soft); margin: 1rem 0; } /* --- Footer (Streamline-style multi-column grid) --- */ .otzar-footer { border-top: 1px solid var(--rule); margin-top: 6rem; padding: 4rem var(--pad-x) 3rem; color: var(--muted); font-size: 0.9rem; text-align: left; } .otzar-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: 78rem; margin: 0 auto; } .otzar-footer-brand { display: flex; flex-direction: column; gap: 0.4rem; } .otzar-footer-brand .brand-l1 { font-family: "JetBrains Mono", monospace; font-size: 1.4rem; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; } .otzar-footer-brand .brand-l2 { font-size: 1rem; color: var(--muted); } .otzar-footer-brand .brand-tag { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); } .otzar-footer-col h4 { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.85rem; } .otzar-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .otzar-footer-col a { color: var(--fg-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.12s ease, border-color 0.12s ease; } .otzar-footer-col a:hover { color: var(--fg); border-bottom-color: var(--accent); } .otzar-footer-rule { height: 1px; background: var(--rule); margin: 3rem auto 1.5rem; max-width: 78rem; } .otzar-footer-meta { margin: 0; max-width: 78rem; margin-left: auto; margin-right: auto; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); } @media (max-width: 720px) { .otzar-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .otzar-footer-brand { grid-column: 1 / -1; } } /* RTL support */ [dir="rtl"] { text-align: right; } [dir="rtl"] .otzar-actions { margin-left: 0; margin-right: auto; } /* Date label utility */ .date { color: var(--muted); font-size: 0.85rem; margin: 0; } /* ---------- Settings / Anpassungen ---------- */ .settings-form { margin-top: 1.5rem; max-width: 36rem; } .settings-fieldset { border: 1px solid var(--rule); padding: 1.25rem 1.5rem 1.5rem; margin: 0; } .settings-legend { padding: 0 0.5rem; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; } .settings-option { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0; cursor: pointer; color: var(--fg); font-size: 1.05rem; } .settings-option input[type="radio"] { margin: 0; accent-color: var(--fg); } .settings-swatch { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 0.4rem; border: 1px solid var(--rule); flex: 0 0 auto; } .settings-swatch-dark { background: #1c1c1e; } .settings-swatch-light { background: #fafaf7; } .settings-swatch-auto { background: linear-gradient(135deg, #1c1c1e 0 50%, #fafaf7 50% 100%); } .settings-option-label { color: var(--fg); } .settings-note { color: var(--muted); font-size: 0.9rem; margin: 1rem 0 0; min-height: 1.3em; } /* ---------- AT-Synopsis (altes-testament) ---------- */ .at-row { margin-top: 1.5rem; } .at-row-he pre.at-text-he { font-family: "SBL Hebrew", "Ezra SIL", "Cardo", serif; font-size: 1.15rem; line-height: 1.9; margin: 1rem 0 0; padding: 1rem 1.25rem; background: var(--bg-soft); border: 1px solid var(--rule); white-space: pre-wrap; word-wrap: break-word; direction: rtl; color: var(--fg); } .at-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1rem; } .at-grid-2 { grid-template-columns: 1fr 1fr; } .at-cell { background: var(--bg); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 8rem; } .at-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; } .at-cell-source { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; color: var(--fg); letter-spacing: 0.06em; text-transform: uppercase; } .at-text { margin: 0; font-family: "Cardo", "EB Garamond", "Times New Roman", serif; font-size: 0.95rem; line-height: 1.6; color: var(--fg); white-space: pre-wrap; word-wrap: break-word; background: transparent; border: none; padding: 0; } .at-cell-empty { color: var(--muted); font-style: italic; margin: 0; } @media (max-width: 700px) { .at-grid-2 { grid-template-columns: 1fr; } } /* =================================================================== * Landing (Home) — Souveraen, klassisch-modern, Liquid-Glass * * Visuelle Sprache: dunkle Hero mit edler Gradient-Headline in der * Palette Gold / Silber / Royal-Blau / Crimson — die Farben alter * Folianten-Einbaende (Lapis-Decke, Goldschnitt, Silber-Initial, * roter Samt). Liquid-Glass-Schicht (backdrop-blur) trennt Inhalt * vom dunklen Lapis-Schwarz-Hintergrund. Doktrin: Memory * `feedback_otzar_landing_layout.md` + `feedback_liquid_glass_header.md`; * Mockup: `mockups/landing-raycast.html`. * * Wahl der Farben (klassisch-modern, NICHT Neon/Sci-Fi): * Gold — Goldschnitt, Verzierungen (#d4af37 / hell #f0c674) * Silber — Initialbuchstaben, Highlight (#c0c0c0 / hell #e5e7eb) * Blau — Royal/Lapis, Buchdeckel (#1e3a8a / mittel #3b82f6) * Rot — Crimson, Samt-Einband (#991b1b / mittel #dc2626) * * Liquid Glass: jede Karten-Oberflaeche ist halbtransparent mit * `backdrop-filter: blur+saturate`, Highlight-Edge ueber Pseudo-Element, * sehr ruhige Aurora-Bewegung im Hintergrund. Wenn `backdrop-filter` * nicht unterstuetzt wird, fallen die Karten auf opake `--bg-card` zurueck. * ================================================================ */ .landing { /* Palette (klassisch-modern) */ --c-gold: #d4af37; --c-gold-l: #f0c674; --c-silver: #c0c0c0; --c-silver-l: #e5e7eb; --c-blue: #1e3a8a; --c-blue-m: #3b82f6; --c-red: #991b1b; --c-red-m: #dc2626; /* Headline-Gradient: Gold → Silber → Royal-Blau → Crimson → Gold (sanft). */ --gradient-hero: linear-gradient( 100deg, var(--c-gold) 0%, var(--c-silver-l) 25%, var(--c-blue-m) 50%, var(--c-red) 75%, var(--c-gold) 100% ); /* Aurora-Layers — gedaempft, edel, Royal-Blau-dominant mit Gold + Crimson-Akzent. */ --gradient-aurora-1: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(30, 58, 138, 0.30), transparent 60%); --gradient-aurora-2: radial-gradient(ellipse 50% 40% at 85% 25%, rgba(212, 175, 55, 0.10), transparent 60%); --gradient-aurora-3: radial-gradient(ellipse 45% 35% at 50% 85%, rgba(153, 27, 27, 0.12), transparent 60%); --glass-bg: rgba(14, 18, 28, 0.55); --glass-bg-hov: rgba(20, 25, 38, 0.70); --glass-border: rgba(229, 231, 235, 0.10); /* silber, sehr leise */ --glass-border-hov: rgba(212, 175, 55, 0.40); /* gold beim Hover */ --glass-blur: blur(28px) saturate(140%); --glass-blur-strong: blur(36px) saturate(160%); } /* Aurora-Background — drei sich langsam bewegende Gradient-Bloecke + Grain-Overlay. prefers-reduced-motion deaktiviert die Animation. */ .landing::before, .landing::after { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: 0; } .landing::before { background: var(--gradient-aurora-1), var(--gradient-aurora-2), var(--gradient-aurora-3); animation: landingAurora 28s ease-in-out infinite alternate; will-change: transform; } .landing::after { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: 0.5; inset: 0; } @keyframes landingAurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1%, 0) scale(1.04); } 100% { transform: translate3d(2%, -1%, 0) scale(1.02); } } @media (prefers-reduced-motion: reduce) { .landing::before { animation: none; } } .landing-container { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } .landing-hero { padding: 6rem 0 4rem; text-align: center; } .landing-hero-eyebrow { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.78rem; color: var(--fg-muted); margin-bottom: 1.5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .landing-hero h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 1.5rem; color: var(--fg-strong); } .landing-hero h1 .grad { /* Souveraener Multi-stop-Gradient: Gold → Silber → Royal-Blau → Crimson → Gold. Schiebt sich langsam — edel, nicht aufdringlich. */ background: linear-gradient( 100deg, var(--c-gold) 0%, var(--c-gold-l) 14%, var(--c-silver-l) 28%, var(--c-blue) 50%, var(--c-red) 72%, var(--c-gold-l) 86%, var(--c-gold) 100% ); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: landingGradShift 18s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(212, 175, 55, 0.20)); } @keyframes landingGradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .landing-hero h1 .grad { animation: none; } } .landing-hero-sub { font-size: 1.2rem; color: var(--fg-muted); max-width: 620px; margin: 0 auto 3rem; line-height: 1.5; } /* Command palette demo (static) — Liquid-Glass-Kern */ .landing-palette { position: relative; max-width: 640px; margin: 0 auto; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.10); overflow: hidden; backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); isolation: isolate; } /* Highlight-Edge — Silber-Glanz oben, Gold-Schliff unten. */ .landing-palette::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(229,231,235,0.28), rgba(229,231,235,0) 40%, rgba(212,175,55,0.22) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .landing-palette-input { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); font-size: 1rem; } .landing-palette-input .icon { color: var(--fg-muted); } .landing-palette-input .query { color: var(--fg-strong); flex: 1; text-align: left; } .landing-palette-input .cursor { width: 2px; height: 1.1em; background: var(--c-gold); animation: landingCursorBlink 1s infinite; display: inline-block; vertical-align: text-bottom; } .landing-palette-input .esc { font-family: var(--mono); font-size: 0.78rem; color: var(--fg-muted); } @keyframes landingCursorBlink { 50% { opacity: 0; } } .landing-palette-results { padding: 0.5rem 0; max-height: 320px; overflow-y: auto; text-align: left; } .landing-palette-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 1.25rem; cursor: pointer; } .landing-palette-item.selected { background: rgba(30, 58, 138, 0.28); } .landing-palette-item .typ { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); background: rgba(255, 255, 255, 0.05); padding: 0.18rem 0.5rem; border-radius: 4px; min-width: 60px; text-align: center; } .landing-palette-item.selected .typ { color: var(--c-gold-l); background: rgba(212, 175, 55, 0.20); border: 1px solid rgba(212, 175, 55, 0.40); padding-block: calc(0.18rem - 1px); } .landing-palette-item .label { flex: 1; font-size: 0.92rem; color: var(--fg); } .landing-palette-item .meta { color: var(--fg-muted); font-size: 0.82rem; } .landing-palette-item .kbd { font-family: var(--mono); font-size: 0.72rem; padding: 0.15rem 0.45rem; background: rgba(255, 255, 255, 0.06); border-radius: 4px; color: var(--fg-muted); } .landing-palette-footer { display: flex; justify-content: space-between; padding: 0.6rem 1.25rem; border-top: 1px solid var(--rule); font-size: 0.78rem; color: var(--fg-muted); } .landing-palette-footer .keys { display: flex; gap: 1rem; } /* Feature grid */ .landing-features { padding: 6rem 0; } .landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .landing-feature { position: relative; padding: 2rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; isolation: isolate; overflow: hidden; } /* Highlight-Edge oben (Silber-Glanz) + diagonale Schliff-Linie (Gold-Hauch). */ .landing-feature::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(229,231,235,0.28), rgba(229,231,235,0) 45%, rgba(212,175,55,0.24) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Shimmer-Sweep beim Hover — gleitender Highlight von links nach rechts. */ .landing-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.08) 50%, transparent 65%, transparent 100% ); transform: translateX(-100%); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .landing-feature:hover { transform: translateY(-6px); background: var(--glass-bg-hov); border-color: var(--glass-border-hov); box-shadow: 0 24px 60px rgba(30, 58, 138, 0.28), 0 0 0 1px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(229, 231, 235, 0.18); } .landing-feature:hover::after { transform: translateX(100%); } @media (prefers-reduced-motion: reduce) { .landing-feature::after { transition: none; } .landing-feature:hover { transform: none; } } .landing-feature .num { display: inline-block; font-family: var(--mono); font-size: 0.78rem; color: var(--c-gold-l); margin-bottom: 1rem; padding: 0.2rem 0.6rem; background: rgba(212, 175, 55, 0.10); border-radius: 4px; letter-spacing: 0.04em; } .landing-feature h3 { font-size: 1.3rem; margin: 0 0 0.6rem; letter-spacing: -0.01em; color: var(--fg-strong); } .landing-feature p { color: var(--fg-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; } /* Bestehende Inhalts-Listen (Manuscripts, Apparatus) bleiben unterhalb der Features — verwendet die otzar-overview/home-section-Klassen, die bereits in style.css definiert sind. */ @media (max-width: 900px) { .landing-feature-grid { grid-template-columns: 1fr; } .landing-hero { padding: 4rem 0 3rem; } } /* RTL — Palette-Listen rechtsbuendig */ html[dir="rtl"] .landing-palette-results, html[dir="rtl"] .landing-palette-input .query { text-align: right; } /* =================================================================== * Landing — Tiefenschicht (Souveraen-modernes Glas) * * Conic-Mesh-Orb in Royal-Blau / Gold / Crimson, Goldschnitt-Detail * auf der Palette, Chrom-Pill fuer Feature-Nummern (Gold), Custom * Scrollbar + Selection in der Edelmetall-Palette. Alles rein-CSS, * kein JS. Respektiert prefers-reduced-motion. * ================================================================ */ /* Conic-Gradient-Mesh — gediegen, Royal-Blau-dominant, Gold + Crimson Akzent. Sehr langsam, NICHT aufdringlich. */ .landing .landing-container::before { content: ""; position: fixed; inset: -20%; background: conic-gradient( from 0deg at 50% 50%, rgba(30, 58, 138, 0.10) 0deg, rgba(212, 175, 55, 0.06) 90deg, rgba(153, 27, 27, 0.06) 180deg, rgba(192, 192, 192, 0.05) 270deg, rgba(30, 58, 138, 0.10) 360deg ); filter: blur(60px); animation: landingMeshSpin 90s linear infinite; pointer-events: none; z-index: -1; opacity: 0.85; } @keyframes landingMeshSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .landing .landing-container::before { animation: none; } } /* Palette-Cursor — Gold-Glow. */ .landing-palette-input .cursor { box-shadow: 0 0 10px rgba(212, 175, 55, 0.80); } /* Palette: subtile Royal-Innenglut auf dem ausgewaehlten Item; Akzent-Streifen links in Gold. */ .landing-palette-item.selected { background: radial-gradient(120% 200% at 0% 50%, rgba(30, 58, 138, 0.40), rgba(30, 58, 138, 0.12) 60%, transparent 100%); position: relative; } .landing-palette-item.selected::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--c-gold) 40%, var(--c-gold-l) 60%, transparent); filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.7)); } /* Feature-Nummern — Goldschnitt-Pill (klassisch, gemessen). */ .landing-feature .num { position: relative; background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06)); border: 1px solid rgba(212, 175, 55, 0.36); box-shadow: inset 0 1px 0 rgba(229, 231, 235, 0.14); } /* Hero-Eyebrow — Silber-Glanz mit Royal-Schatten. */ .landing-hero-eyebrow { background: linear-gradient(135deg, rgba(229,231,235,0.05), rgba(229,231,235,0.01)); border-color: rgba(229, 231, 235, 0.16); box-shadow: inset 0 1px 0 rgba(229, 231, 235, 0.14), 0 8px 24px rgba(30, 58, 138, 0.12); } /* Smooth-Scroll. */ html:has(body.landing) { scroll-behavior: smooth; } /* Custom-Selection — Royal-Blau, gediegen. */ body.landing ::selection { background: rgba(30, 58, 138, 0.55); color: var(--c-silver-l); } /* Custom-Scrollbar — Gold-Royal-Crimson. */ body.landing { scrollbar-color: rgba(212, 175, 55, 0.55) transparent; scrollbar-width: thin; } body.landing::-webkit-scrollbar { width: 10px; } body.landing::-webkit-scrollbar-track { background: transparent; } body.landing::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(212, 175, 55, 0.65) 0%, rgba(192, 192, 192, 0.55) 33%, rgba(30, 58, 138, 0.65) 66%, rgba(153, 27, 27, 0.55) 100%); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } body.landing::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(212, 175, 55, 0.95) 0%, rgba(229, 231, 235, 0.85) 33%, rgba(30, 58, 138, 0.95) 66%, rgba(153, 27, 27, 0.85) 100%); background-clip: padding-box; } /* Bestehende Inhalts-Sektionen unterhalb der Hero — leichte Glas-Anmutung, damit sie zur Landing-Aesthetik passen. */ body.landing .home-section { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; } body.landing .otzar-overview { position: relative; z-index: 1; padding-bottom: 6rem; }