/* * styles.css — katab V2 * Design language: "Sacred Terminal" * Dark mineral palette · monospaced precision · invisible UI * * IMPORTANT: LINE_HEIGHTS in engine.js must match the heights defined here * for separator elements (sep-verse: 8px, sep-chapter: 24px, sep-book: 48px) * and text lines (--line-h: 36px). The virtual scroller uses those constants * for arithmetic positioning — if CSS and JS values diverge, line overlap occurs. */ /* ─── Design tokens ───────────────────────────────────────────────────────── */ :root { /* Surface layers */ --bg-void: #040406; --bg-deep: #080810; --bg-surface: #0c0c16; --bg-raised: #111120; --bg-hover: #181828; /* Text scale */ --text-primary: #d8d8e8; --text-secondary: #8888a8; --text-muted: #4a4a68; --text-accent: #9d88ff; /* Accent purple */ --accent: #7c62ff; --accent-soft: rgba(124, 98, 255, 0.15); --accent-glow: rgba(124, 98, 255, 0.35); --accent-border: rgba(124, 98, 255, 0.40); /* Separator intensities (verse < chapter < book) */ --verse-sep: rgba(124, 98, 255, 0.08); --chapter-sep: rgba(124, 98, 255, 0.18); --book-sep: rgba(124, 98, 255, 0.35); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.10); /* Fonts */ --font-mono: "IBM Plex Mono", "Courier New", monospace; --font-text: "Noto Sans Phoenician", "Noto Sans Hebrew", sans-serif; /* Layout metrics */ --line-h: 58px; /* MUST match LINE_HEIGHTS.text in engine.js */ --script-h: 36px; /* MUST match LINE_HEIGHTS.script in engine.js */ --font-sz: 17px; --hud-h: 56px; } /* ─── Light theme overrides ───────────────────────────────────────────────── */ /* * Applied when is set. * All other rules use the tokens defined in :root — only the tokens change, * never the structural or layout rules. This means the light theme is * automatically consistent with any new component that uses CSS variables. */ [data-theme="light"] { /* Surface layers — warm off-white stack */ --bg-void: #f4f4f8; --bg-deep: #ededf3; --bg-surface: #f8f8fc; --bg-raised: #ffffff; --bg-hover: #eeeef6; /* Text — near-black with slight blue tint */ --text-primary: #1a1a2e; --text-secondary: #4a4a72; --text-muted: #8888aa; --text-accent: #5a3ee8; /* Accent — slightly deeper purple for contrast on light */ --accent: #5a3ee8; --accent-soft: rgba(90, 62, 232, 0.10); --accent-glow: rgba(90, 62, 232, 0.25); --accent-border: rgba(90, 62, 232, 0.35); /* Separator intensities */ --verse-sep: rgba(90, 62, 232, 0.10); --chapter-sep: rgba(90, 62, 232, 0.22); --book-sep: rgba(90, 62, 232, 0.40); /* Borders */ --border-subtle: rgba(0, 0, 0, 0.07); --border-mid: rgba(0, 0, 0, 0.12); } /* Light-mode HUD glass needs a lighter base */ [data-theme="light"] .hud-panel { background: rgba(248, 248, 252, 0.97); box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(90,62,232,0.08); } /* Pane scrollbar in light mode */ [data-theme="light"] .pane::-webkit-scrollbar-thumb { background: var(--text-muted); } /* ─── Papyrus theme — aged parchment ──────────────────────────────────────── */ [data-theme="papyrus"] { --bg-void: #e8dcc8; --bg-deep: #e2d4bc; --bg-surface: #ede3d0; --bg-raised: #f4ead6; --bg-hover: #ddd0b8; --text-primary: #2c2416; --text-secondary: #5c4e38; --text-muted: #9a8b70; --text-accent: #6b4423; --accent: #8b5e34; --accent-soft: rgba(139, 94, 52, 0.12); --accent-glow: rgba(139, 94, 52, 0.25); --accent-border: rgba(139, 94, 52, 0.35); --verse-sep: rgba(139, 94, 52, 0.10); --chapter-sep: rgba(139, 94, 52, 0.22); --book-sep: rgba(139, 94, 52, 0.40); --border-subtle: rgba(100, 70, 30, 0.12); --border-mid: rgba(100, 70, 30, 0.18); } /* Paper texture via CSS — no external images */ [data-theme="papyrus"] html, [data-theme="papyrus"] body { background: /* Subtle grain noise */ repeating-conic-gradient(#d4c4a8 0% 25%, transparent 0% 50%) 0 0 / 3px 3px, /* Fiber streaks */ linear-gradient(175deg, transparent 45%, rgba(180,160,120,0.08) 46%, transparent 47%), linear-gradient( 3deg, transparent 48%, rgba(160,140,100,0.06) 49%, transparent 50%), /* Warm parchment base */ linear-gradient(180deg, #ead8be 0%, #e2d0b4 30%, #dcc8a8 70%, #d8c4a2 100%); } [data-theme="papyrus"] .pane { background: /* Fine fiber texture */ repeating-linear-gradient( 87deg, transparent, transparent 12px, rgba(180,155,110,0.04) 12px, rgba(180,155,110,0.04) 13px ), /* Aged stain — subtle warm spot */ radial-gradient(ellipse at 30% 20%, rgba(190,160,100,0.08) 0%, transparent 60%), radial-gradient(ellipse at 75% 70%, rgba(170,140,90,0.06) 0%, transparent 50%), var(--bg-void); } [data-theme="papyrus"] .pane::-webkit-scrollbar-thumb { background: #b8a480; } [data-theme="papyrus"] .hud-panel { background: rgba(237, 227, 208, 0.96); box-shadow: 0 12px 40px rgba(80,60,20,0.15), 0 0 0 1px rgba(139,94,52,0.12); } [data-theme="papyrus"] #status-bar { background: #ddd0b8; border-top-color: rgba(100,70,30,0.15); } /* ─── Codex theme — dark leather study desk ───────────────────────────────── */ [data-theme="codex"] { --bg-void: #1a150e; --bg-deep: #201a12; --bg-surface: #261f16; --bg-raised: #30271c; --bg-hover: #3a3024; --text-primary: #d4c8a8; --text-secondary: #a0936e; --text-muted: #6a5e44; --text-accent: #c8a84b; --accent: #c8a84b; --accent-soft: rgba(200, 168, 75, 0.12); --accent-glow: rgba(200, 168, 75, 0.25); --accent-border: rgba(200, 168, 75, 0.35); --verse-sep: rgba(200, 168, 75, 0.08); --chapter-sep: rgba(200, 168, 75, 0.18); --book-sep: rgba(200, 168, 75, 0.35); --border-subtle: rgba(200, 168, 75, 0.08); --border-mid: rgba(200, 168, 75, 0.14); } [data-theme="codex"] html, [data-theme="codex"] body { background: /* Leather grain */ repeating-conic-gradient(#18120a 0% 25%, transparent 0% 50%) 0 0 / 4px 4px, linear-gradient(180deg, #1a150e 0%, #16110a 50%, #1a150e 100%); } [data-theme="codex"] .pane { background: /* Subtle wear pattern */ radial-gradient(ellipse at 20% 30%, rgba(200,168,75,0.03) 0%, transparent 50%), radial-gradient(ellipse at 80% 60%, rgba(160,130,50,0.02) 0%, transparent 40%), var(--bg-void); } [data-theme="codex"] .pane::-webkit-scrollbar-thumb { background: #6a5e44; } [data-theme="codex"] .hud-panel { background: rgba(38, 31, 22, 0.97); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,168,75,0.1); } [data-theme="codex"] #status-bar { background: #201a12; border-top-color: rgba(200,168,75,0.1); } /* ─── OLED theme — true black ─────────────────────────────────────────────── */ [data-theme="oled"] { --bg-void: #000000; --bg-deep: #050505; --bg-surface: #0a0a0a; --bg-raised: #111111; --bg-hover: #1a1a1a; --text-primary: #e0e0e0; --text-secondary: #999999; --text-muted: #555555; --text-accent: #8b7cff; --accent: #6c52ff; --accent-soft: rgba(108, 82, 255, 0.15); --accent-glow: rgba(108, 82, 255, 0.35); --accent-border: rgba(108, 82, 255, 0.40); --verse-sep: rgba(108, 82, 255, 0.10); --chapter-sep: rgba(108, 82, 255, 0.20); --book-sep: rgba(108, 82, 255, 0.40); --border-subtle: rgba(255, 255, 255, 0.08); --border-mid: rgba(255, 255, 255, 0.15); } [data-theme="oled"] .hud-panel { background: rgba(5, 5, 5, 0.98); box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05); } [data-theme="oled"] #status-bar { background: #000000; border-top-color: rgba(255,255,255,0.05); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; background: var(--bg-void); color: var(--text-primary); font-family: var(--font-mono); overflow: hidden; /* Critical for immersive full-screen layout */ user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── App shell ───────────────────────────────────────────────────────────── */ #app-shell { position: fixed; inset: 0; left: var(--tab-w); /* content starts after full tab width — tabs animate beneath */ right: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; --split-pos: 50%; transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1); /* Removed grid transitions to allow smooth dragging */ } #app-shell.split-v { grid-template-columns: var(--split-pos) 4px 1fr; } #app-shell.split-h { grid-template-rows: var(--split-pos) 4px 1fr; grid-template-columns: 1fr; } /* ─── Panes ───────────────────────────────────────────────────────────────── */ .pane { position: relative; overflow-y: auto; overflow-x: hidden; height: 100%; scroll-behavior: smooth; } .pane + .pane { border-left: none; } /* Replaced by gutter */ .gutter { background: var(--border-subtle); z-index: 100; transition: background 0.2s, opacity 0.2s; } .gutter.hidden { display: none; } #app-shell.split-v .gutter { cursor: col-resize; width: 4px; height: 100%; } #app-shell.split-h .gutter { cursor: row-resize; height: 4px; width: 100%; } .gutter:hover, .gutter.dragging { background: var(--accent); } .pane::-webkit-scrollbar { width: 4px; } .pane::-webkit-scrollbar-track { background: transparent; } .pane::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; } /* Virtual scroll helpers */ .pane-spacer { width: 1px; pointer-events: none; } .pane-content { position: absolute; top: 0; left: 0; width: 100%; } /* ─── Text lines ──────────────────────────────────────────────────────────── */ /* * .text-line is applied by the virtual scroller to every rendered content line. * Height (--line-h) MUST match LINE_HEIGHTS.text in engine.js. */ .text-line { display: block; padding: 0 52px 0 80px; min-height: var(--line-h); line-height: 36px; /* centers script in 36px, not full 58px */ font-size: var(--font-sz); color: var(--text-primary); white-space: pre-wrap; word-break: break-word; user-select: text; cursor: text; position: relative; transition: background 0.1s; z-index: 0; } .text-line:hover { background: rgba(255, 255, 255, 0.015); } .verse-ref { position: absolute; left: 0; top: 10px; width: 60px; text-align: right; padding-right: 8px; font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-muted); opacity: 0.45; user-select: none; pointer-events: none; letter-spacing: 0.5px; } .latin-line { display: block; padding: 2px 52px 6px 80px; font-family: var(--font-mono); font-size: 0.78em; color: var(--text-muted); line-height: 1.4; user-select: text; cursor: text; direction: ltr; text-align: left; position: absolute; left: 0; width: 100%; transition: background 0.1s; z-index: 1; /* above .text-line (z-index:0) so it receives clicks in its zone */ } .latin-line:hover { background: rgba(255,255,255,0.015); } .latin-line[contenteditable="true"] { box-shadow: inset 0 0 0 1px var(--accent-border), 0 0 0 3px var(--accent-soft); background: rgba(124, 98, 255, 0.06) !important; caret-color: var(--accent); outline: none; } /* ─── Structural separators ───────────────────────────────────────────────── */ /* * Separators are standalone
elements (NOT text-line). * Heights MUST match LINE_HEIGHTS.verse/chapter/book in engine.js. * They are absolutely positioned by the scroller (style.top = offset[i]). */ .sep-verse { position: absolute; left: 0; width: 100%; height: 8px; /* LINE_HEIGHTS.verse */ border-top: 1px solid var(--verse-sep); } .sep-chapter { position: absolute; left: 0; width: 100%; height: 24px; /* LINE_HEIGHTS.chapter */ border-top: 2px solid var(--chapter-sep); } .sep-book { position: absolute; left: 0; width: 100%; height: 48px; /* LINE_HEIGHTS.book */ border-top: 3px solid var(--book-sep); display: flex; align-items: center; justify-content: center; } .sep-book::before { content: '✦'; color: var(--accent); font-size: 0.7em; letter-spacing: 4px; opacity: 0.6; } /* ─── Text direction helpers ──────────────────────────────────────────────── */ .dir-rtl { direction: rtl; text-align: right; } .dir-ltr { direction: ltr; text-align: left; } /* ─── Script font assignments ─────────────────────────────────────────────── */ .s-original { font-family: var(--font-mono); color: var(--text-secondary); font-size: 0.92em; letter-spacing: 0.3px; } .s-hebrew { font-family: "Noto Sans Hebrew", sans-serif; } .s-rashi { font-family: "Noto Rashi Hebrew", serif; } .s-phoenician { font-family: "Noto Sans Phoenician", sans-serif; } .s-aramaic { font-family: "Noto Sans Imperial Aramaic", sans-serif; } .s-samaritan { font-family: "Noto Sans Samaritan", sans-serif; } .s-nabataean { font-family: "Noto Sans Nabataean", sans-serif; } .s-musnad { font-family: "Noto Sans Old South Arabian", sans-serif; } .s-manichaean { font-family: "Noto Sans Manichaean", sans-serif; } .s-hatran { font-family: "Noto Sans Hatran", sans-serif; } .s-mandaic { font-family: "Noto Sans Mandaic", sans-serif; } .s-sogdian { font-family: "Noto Sans Sogdian", sans-serif; } .s-avestan { font-family: "Noto Sans Avestan", sans-serif; } .s-pahlavi { font-family: "Noto Sans Inscriptional Pahlavi", sans-serif; } .s-hanifi { font-family: "Noto Sans Hanifi Rohingya", sans-serif; } .s-chorasmian { font-family: "Noto Sans Chorasmian", sans-serif; } .s-ugaritic { font-family: "Noto Sans Ugaritic", sans-serif; font-size: 1.25em; } .s-syriac { font-family: "Noto Sans Syriac", sans-serif; } .s-arabic { font-family: "Amiri", serif; font-size: 1.15em; } .s-ethiopic { font-family: "Noto Sans Ethiopic", sans-serif; } .s-cuneiform { font-family: "Noto Sans Cuneiform", sans-serif; font-size: 1.2em; } /* Proto-Sinaitic uses Egyptian Hieroglyphs — each letter is the actual * hieroglyph ancestor per Gardiner/Albright reconstruction (aleph=ox head, * beth=house, mem=water, etc.). Unicode has no dedicated Proto-Sinaitic block. */ .s-protosinaitic { font-family: "Noto Sans Egyptian Hieroglyphs", sans-serif; font-size: 1.3em; } /* ─── HUD (Heads-Up Display) ──────────────────────────────────────────────── */ /* * The HUD is invisible by default. * On desktop: revealed by hovering the 8px trigger strip at the very top. * On mobile: revealed by tapping the trigger strip (JS sets inline transform). */ #hud-trigger { position: fixed; top: 0; left: 0; width: 100%; height: 8px; z-index: 500; } /* Pulse animation on trigger — invites user to hover at top edge */ .hud-trigger-pulse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--accent-glow) 0%, transparent 100%); animation: hud-pulse 3s ease-in-out infinite; pointer-events: none; } @keyframes hud-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.70; } } /* Pulse stops once user has interacted with HUD */ .hud-trigger-pulse.hud-seen::after { animation: none; opacity: 0; } /* "▲ hover for controls" hint text */ #hud-hint { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 2px; color: var(--text-muted); pointer-events: none; z-index: 498; opacity: 0.7; transition: opacity 0.5s; white-space: nowrap; } #hud-hint.hud-seen { opacity: 0; } /* ─── Status bar ──────────────────────────────────────────────────────────── */ #status-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 20px; background: rgba(8, 8, 16, 0.92); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); z-index: 400; backdrop-filter: blur(8px); letter-spacing: 0.5px; } [data-theme="light"] #status-bar { background: rgba(248, 248, 252, 0.95); } #status-lines { color: var(--text-secondary); white-space: nowrap; } .status-flex { flex: 1; } #status-hash { color: #c8a84b; white-space: nowrap; letter-spacing: 0.8px; opacity: 0.85; cursor: default; user-select: all; font-size: 0.62rem; } /* ── Integrity dot por línea ────────────────────────────────────────────────── */ .integrity-dot { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #4caf50; opacity: 0.5; cursor: pointer; pointer-events: auto; transition: all 0.3s ease; z-index: 2; } .integrity-dot:hover { opacity: 1; transform: translateY(-50%) scale(1.5); } /* States */ .integrity-dot[data-state="pristine"] { background: #4caf50; } .integrity-dot[data-state="self"] { background: #f5c542; width: 8px; height: 8px; opacity: 0.75; } .integrity-dot[data-state="remote"] { background: #e53935; width: 8px; height: 8px; opacity: 0.85; } .integrity-dot[data-state="accepted"] { background: #5c8abf; width: 7px; height: 7px; opacity: 0.6; } @keyframes dot-pulse { 0% { box-shadow: 0 0 6px 2px rgba(245,197,66,0.7); transform: translateY(-50%) scale(1.6); } 60% { box-shadow: 0 0 3px 1px rgba(245,197,66,0.3); transform: translateY(-50%) scale(1.2); } 100% { box-shadow: none; transform: translateY(-50%) scale(1); } } .integrity-dot.just-changed { animation: dot-pulse 2s ease-out forwards; } /* Hash bubble */ .hash-bubble { background: var(--bg-raised, #1e1e2e); border: 1px solid var(--border-mid, #3a3a4a); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); white-space: nowrap; } .hb-label { font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; } .hb-hash { font-family: var(--font-mono); font-size: 0.62rem; color: #c8a84b; letter-spacing: 0.3px; user-select: all; } .hb-copy { width: 24px !important; height: 24px !important; font-size: 0.85rem; padding: 0 !important; cursor: pointer; } /* Shrink pane area to leave room for status bar */ #app-shell { bottom: 26px; } /* status bar height */ #hud { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: center; transform: translateY(-100%); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); z-index: 499; pointer-events: none; } /* CSS-only reveal on desktop hover */ #hud-trigger:hover ~ #hud, #hud:hover { transform: translateY(0); pointer-events: auto; } .hud-panel { background: rgba(8, 8, 16, 0.97); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--border-mid); border-top: none; border-radius: 0 0 14px 14px; padding: 0 16px; height: var(--hud-h); display: flex; align-items: center; gap: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(124,98,255,0.08); } .hud-logo { font-family: "Noto Sans Phoenician", sans-serif; color: var(--accent); font-size: 1.1rem; letter-spacing: 2px; flex-shrink: 0; margin-right: 6px; } .hud-spacer { flex: 1; } /* ─── Shared button & input styles ─────────────────────────────────────────── */ .ibtn { background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; font-family: var(--font-mono); padding: 6px; border-radius: 6px; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; } /* SVG inside ibtn — inherits stroke colour from currentColor */ .ibtn svg { width: 18px; height: 18px; flex-shrink: 0; pointer-events: none; } .ibtn:hover { color: var(--text-accent); border-color: var(--accent-border); background: var(--accent-soft); } .ibtn.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); } /* ─── Script picker (replaces