/* ── סידור · גיליון עיצוב ───────────────────────────────────────── שפה אחת לכל האפליקציה. הערכות מחליפות אסימונים בלבד — לא פריסה. ערכת מסך → data-theme על ערכת הדפסה → data-print על ------------------------------------------------------------------ */ :root { --ink: #23201b; --ink-soft: #6b6155; --paper: #f7f2e7; --paper-2: #efe7d6; --rule: #ddd2bb; --accent: #8c6d2f; --accent-2: #b8973f; --flag: #a8442a; --shadow: 0 1px 2px rgba(35,32,27,.06), 0 8px 24px rgba(35,32,27,.06); --f-pray: "Frank Ruhl Libre", "David Libre", Georgia, serif; --f-ui: "Assistant", "Heebo", system-ui, sans-serif; --pray-size: 1.22rem; --pray-lh: 2.05; --radius: 14px; --wrap: 46rem; } /* ── ערכות מסך ─────────────────────────────────────────────────── */ :root[data-theme="klaf"] { } /* ברירת מחדל — קלף */ :root[data-theme="dyo"] { --ink:#1a1a1c; --ink-soft:#5f6470; --paper:#ffffff; --paper-2:#f2f4f8; --rule:#dfe3ea; --accent:#1f4f8f; --accent-2:#3a72bd; --flag:#b3261e; --shadow:0 1px 2px rgba(20,25,40,.05), 0 8px 24px rgba(20,25,40,.07); } :root[data-theme="layla"] { --ink:#e8e3d7; --ink-soft:#9c968a; --paper:#14161a; --paper-2:#1c1f25; --rule:#2c313a; --accent:#d0a94f; --accent-2:#e5c877; --flag:#e08a6e; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); } :root[data-theme="tchelet"] { --ink:#152a3d; --ink-soft:#55707f; --paper:#f2f8fb; --paper-2:#e2eff6; --rule:#c9dfea; --accent:#1a6b8f; --accent-2:#3d95bb; --flag:#a8442a; } :root[data-theme="zahav"] { --ink:#f0e6cd; --ink-soft:#a89873; --paper:#191510; --paper-2:#221c14; --rule:#3a3025; --accent:#c9a227; --accent-2:#e3c25c; --flag:#dd8f5f; --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4); } :root[data-theme="naki"] { --ink:#000; --ink-soft:#444; --paper:#fff; --paper-2:#f4f4f4; --rule:#c8c8c8; --accent:#000; --accent-2:#333; --flag:#9c1f10; --pray-size:1.34rem; --pray-lh:2.15; --shadow:none; } /* ── יסודות ────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin:0; padding:0; } body { background: var(--paper); color: var(--ink); font-family: var(--f-ui); direction: rtl; -webkit-text-size-adjust: 100%; transition: background .25s ease, color .25s ease; } button, select, input { font-family: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; } /* ── סרגל עליון ───────────────────────────────────────────────── */ .top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .top-in { display:flex; align-items:center; gap:.5rem; height:3.4rem; } .brand { font-family: var(--f-pray); font-size:1.15rem; font-weight:700; letter-spacing:.01em; } .brand small { display:block; font-family:var(--f-ui); font-size:.66rem; font-weight:600; color: var(--ink-soft); letter-spacing:.08em; } .spacer { flex:1; } .iconbtn { width:2.35rem; height:2.35rem; border-radius:10px; display:grid; place-items:center; color: var(--ink-soft); font-size:1.1rem; } .iconbtn:hover { background: var(--paper-2); color: var(--ink); } /* ── ניווט תחתון ──────────────────────────────────────────────── */ .tabs { position: sticky; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); } .tab { padding:.55rem 0 .6rem; font-size:.72rem; font-weight:600; color: var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:.18rem; } .tab i { font-style:normal; font-size:1.15rem; line-height:1; } .tab[aria-selected="true"] { color: var(--accent); } /* ── כרטיסים ──────────────────────────────────────────────────── */ .card { background: var(--paper-2); border:1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.05rem; margin: .85rem 0; box-shadow: var(--shadow); } .card h2 { margin:0 0 .5rem; font-family:var(--f-pray); font-size:1.05rem; } .eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.12em; color: var(--accent); text-transform:none; margin-bottom:.3rem; } /* כרטיס "עכשיו" — האלמנט החתימתי */ .now { position:relative; overflow:hidden; padding:1.15rem 1.1rem 1.2rem; } .now::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background: linear-gradient(var(--accent), var(--accent-2)); } .now-title { font-family:var(--f-pray); font-size:1.75rem; font-weight:700; line-height:1.2; margin:.1rem 0 .2rem; } .now-sub { color: var(--ink-soft); font-size:.86rem; } .now-time { font-variant-numeric: tabular-nums; font-weight:700; color: var(--accent); } .adds { list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; } .adds li { font-size:.76rem; padding:.28rem .6rem; border-radius:999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); } .btn { display:inline-flex; align-items:center; gap:.4rem; justify-content:center; padding:.6rem 1rem; border-radius:10px; font-weight:600; font-size:.9rem; background: var(--accent); color: var(--paper); border:1px solid transparent; } .btn.ghost { background:transparent; color:var(--accent); border-color: var(--rule); } .btn.block { width:100%; } .btnrow { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; } /* ── רשימות ניווט ─────────────────────────────────────────────── */ .list { list-style:none; margin:0; padding:0; } .list li + li { border-top:1px solid var(--rule); } .row { width:100%; text-align:start; padding:.8rem .3rem; display:flex; align-items:center; gap:.6rem; } .row .t { flex:1; font-size:.98rem; } .row .n { font-size:.74rem; color: var(--ink-soft); font-variant-numeric:tabular-nums; } .row:hover .t { color: var(--accent); } .group-h { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--ink-soft); margin:1.3rem 0 .3rem; padding-inline-start:.3rem; } /* ── טקסט התפילה ────────────────────────────────────────────────── חמישה סגנונות תצוגה. ההבדל ביניהם הוא פריסה וטיפוגרפיה — לא צבע. הצבע הוא ציר נפרד (data-theme). data-layout: sefer | pasuk | ratzif | gadol | turim ------------------------------------------------------------------ */ .reader { padding-bottom: 3rem; } .reader h1 { font-family:var(--f-pray); font-size:1.6rem; margin:.9rem 0 .2rem; font-weight:700; } .reader .crumb { font-size:.78rem; color: var(--ink-soft); margin-bottom:1rem; } /* כותרת רצה — כמו בראש עמוד בסידור מודפס */ .runhead { display:flex; align-items:baseline; justify-content:space-between; font-family:var(--f-pray); font-size:.82rem; color:var(--ink-soft); border-bottom:3px double var(--rule); padding-bottom:.3rem; margin:0 0 1.1rem; } .runhead .pg { font-variant-numeric:tabular-nums; letter-spacing:.02em; } .p { font-family: var(--f-pray); font-size: var(--pray-size); line-height: var(--pray-lh); margin: 0 0 1.05rem; text-align: start; } .i { font-family: var(--f-ui); font-size: .87rem; line-height: 1.65; color: var(--ink-soft); background: color-mix(in srgb, var(--accent) 7%, transparent); border-inline-start: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: .5rem .7rem; border-radius: 0 8px 8px 0; margin: 0 0 1.05rem; } /* מילת פתיחה ושם ה' — נגזרים מהטקסט עצמו */ .open { font-size: 1.55em; font-weight: 700; line-height: 1; } .shem { font-weight: 700; letter-spacing: .01em; } /* פסוק — יחידת השורה בסגנונות שמפרקים לשורות */ .v { display: block; } /* ── 1 · ספר ─────────────────────────────────────────────────── */ :root[data-layout="sefer"] .p:last-child { text-align-last: center; } :root[data-layout="sefer"] .open { font-size: 1.6em; color: var(--accent); } :root[data-layout="sefer"] .shem { color: var(--accent); } /* יישור לשני הצדדים רק כשיש מספיק רוחב — במסך צר הוא מותח את השורות */ @media (min-width: 30rem) { :root[data-layout="sefer"] .p { text-align: justify; text-justify: inter-word; } } /* ── 2 · פסוק בשורה ──────────────────────────────────────────── */ :root[data-layout="pasuk"] .v { padding-inline-start: 1.4rem; text-indent: -1.4rem; margin-bottom: .28rem; } :root[data-layout="pasuk"] .p { line-height: 1.85; } :root[data-layout="pasuk"] .open { color: var(--accent); } :root[data-layout="pasuk"] .v:nth-child(odd) { background: color-mix(in srgb, var(--accent) 4%, transparent); border-radius: 5px; } /* ── 3 · רציף ────────────────────────────────────────────────── */ :root[data-layout="ratzif"] { --pray-lh: 1.6; } :root[data-layout="ratzif"] .p { margin-bottom: .6rem; } :root[data-layout="ratzif"] .i { padding:.3rem .55rem; font-size:.8rem; margin-bottom:.6rem; } :root[data-layout="ratzif"] .open { font-size: 1.15em; } :root[data-layout="ratzif"] .runhead { display:none; } /* ── 4 · אות גדולה ───────────────────────────────────────────── */ :root[data-layout="gadol"] { --pray-size: 1.75rem; --pray-lh: 2.25; } :root[data-layout="gadol"] .v { display:block; margin-bottom:.75rem; } :root[data-layout="gadol"] .i { font-size: 1.02rem; padding:.7rem .8rem; } :root[data-layout="gadol"] .open { font-size: 1.35em; color: var(--accent); } :root[data-layout="gadol"] .reader h1 { font-size: 2.1rem; } /* ── 5 · שני טורים ───────────────────────────────────────────── */ :root[data-layout="turim"] .open { font-weight:700; color: var(--accent); } @media (min-width: 46rem) { :root[data-layout="turim"] .p, :root[data-layout="ratzif"] .p { text-align: justify; } :root[data-layout="turim"] .colwrap { column-count: 2; column-gap: 2.4rem; column-rule: 1px solid var(--rule); } :root[data-layout="turim"] .p, :root[data-layout="turim"] .i { break-inside: avoid; } :root[data-layout="turim"] { --wrap: 62rem; } } /* מצב ניקוד וסימון חשודים */ :root[data-nikud="off"] .p { letter-spacing: .005em; } .sus { background: color-mix(in srgb, var(--flag) 20%, transparent); border-radius:4px; padding:0 .1em; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--flag) 55%, transparent); } :root:not([data-sus="on"]) .sus { background:none; box-shadow:none; padding:0; } /* ── הגדרות ───────────────────────────────────────────────────── */ .field { margin: .9rem 0; } .field > label { display:block; font-size:.82rem; font-weight:700; margin-bottom:.4rem; } .hint { font-size:.78rem; color: var(--ink-soft); line-height:1.55; margin-top:.35rem; } select, input[type=range] { width:100%; } select { padding:.55rem .6rem; border-radius:10px; border:1px solid var(--rule); background: var(--paper); font-size:.92rem; } .swatches { display:flex; gap:.5rem; flex-wrap:wrap; } .sw { width:3.1rem; height:3.1rem; border-radius:12px; border:2px solid var(--rule); display:grid; place-items:end center; padding-bottom:.2rem; font-size:.6rem; font-weight:700; } .sw[aria-pressed="true"] { border-color: var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .toggle { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--rule); } .toggle .lab { font-size:.92rem; font-weight:600; } .sw-track { width:3rem; height:1.7rem; border-radius:999px; background:var(--rule); position:relative; flex:none; } .sw-track[aria-pressed="true"] { background: var(--accent); } .sw-track::after { content:""; position:absolute; top:.2rem; inset-inline-end:.2rem; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--paper); transition:.18s; } .sw-track[aria-pressed="true"]::after { inset-inline-end: calc(100% - 1.5rem); } /* ── מודל ─────────────────────────────────────────────────────── */ .modal { position:fixed; inset:0; z-index:60; display:none; } .modal[open] { display:block; } .modal .veil { position:absolute; inset:0; background:rgba(0,0,0,.45); } .modal .box { position:absolute; inset-inline:0; bottom:0; max-height:88vh; overflow:auto; background:var(--paper); border-radius:18px 18px 0 0; padding:1.1rem 1.1rem 2rem; box-shadow:0 -8px 40px rgba(0,0,0,.28); } @media (min-width: 40rem) { .modal .box { inset:auto 50% auto 50%; top:50%; transform:translate(50%,-50%); width:min(34rem, 92vw); border-radius:18px; max-height:84vh; } } .modal h2 { margin:.1rem 0 .7rem; font-family:var(--f-pray); } /* ── מסך "מה כולל הנוסח" ───────────────────────────────────────── */ .cover-l { list-style:none; margin:.6rem 0; padding:0; } .cover-l li { display:flex; align-items:center; gap:.55rem; padding:.42rem 0; font-size:.92rem; } .mark { width:1.3rem; text-align:center; font-weight:700; } .yes .mark { color: var(--accent); } .no { color: var(--ink-soft); } .no .mark { color: var(--flag); } /* ── התאמה למכשיר ─────────────────────────────────────────────── */ @media (min-width: 48rem) { :root { --pray-size: 1.3rem; --wrap: 50rem; } .p { text-align: justify; text-justify: inter-word; } .tabs { position:static; grid-template-columns:repeat(4,auto); justify-content:center; gap:1.4rem; border-top:0; } .top-in { height:4rem; } } @media (min-width: 72rem) { :root { --wrap: 58rem; --pray-size: 1.36rem; } } @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } } /* ── הדפסה ──────────────────────────────────────────────────────── חמש ערכות הדפסה, נבחרות בנפרד מסגנון המסך. data-print: sefer | pasuk | hesech | gadol | oved ------------------------------------------------------------------ */ @media print { .top, .tabs, .noprint, .modal { display:none !important; } body { background:#fff; color:#000; } .wrap { max-width:none; padding:0; } .p { font-size:11.5pt; line-height:1.8; margin:0 0 .5rem; orphans:3; widows:3; font-family:"Frank Ruhl Libre", Georgia, serif; text-align:justify; } .i { font-size:9pt; color:#333; background:none; border:0; border-inline-start:2px solid #999; padding:.15rem .5rem; margin:0 0 .5rem; font-family:"Assistant", sans-serif; } .v { display:block; } .open { font-weight:700; } .shem { font-weight:700; } .sus { background:none !important; box-shadow:none !important; } .print-sec { break-inside:auto; } .print-sec h2 { break-after:avoid; font-size:13pt; margin:.9rem 0 .35rem; font-family:"Frank Ruhl Libre", serif; } .print-ch { break-before:page; } .print-ch:first-of-type { break-before:auto; } .print-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:3px double #000; padding-bottom:.15rem; margin-bottom:.6rem; font-size:9pt; font-family:"Frank Ruhl Libre", serif; } @page { size:A4; margin:16mm 15mm; } /* 1 · ספר — מילת פתיחה גדולה, שורה אחרונה ממורכזת */ :root[data-print="sefer"] .open { font-size:1.9em; float:inline-start; line-height:.95; margin-inline-end:.1em; } :root[data-print="sefer"] .p:last-child { text-align-last:center; } :root[data-print="sefer"] .print-sec h2 { text-align:center; font-size:14pt; border-bottom:1px solid #000; padding-bottom:.15rem; } /* 2 · פסוק בשורה */ :root[data-print="pasuk"] .p { text-align:start; line-height:1.7; } :root[data-print="pasuk"] .v { padding-inline-start:12pt; text-indent:-12pt; margin-bottom:1.5pt; } :root[data-print="pasuk"] .print-head { display:none; } /* 3 · חסכוני — שני טורים, אות קטנה */ :root[data-print="hesech"] .cols { column-count:2; column-gap:9mm; column-rule:.5pt solid #bbb; } :root[data-print="hesech"] .p { font-size:9.5pt; line-height:1.5; margin:0 0 .3rem; } :root[data-print="hesech"] .i { font-size:8pt; } :root[data-print="hesech"] .print-sec h2 { font-size:11pt; } :root[data-print="hesech"] .print-ch { break-before:auto; } :root[data-print="hesech"] @page { margin:12mm 11mm; } /* 4 · אות גדולה */ :root[data-print="gadol"] .p { font-size:16pt; line-height:2.05; } :root[data-print="gadol"] .v { display:block; margin-bottom:4pt; } :root[data-print="gadol"] .i { font-size:11.5pt; } :root[data-print="gadol"] .print-sec h2 { font-size:19pt; } /* 5 · עובד — לעריכה והגהה, שוליים רחבים לצד */ :root[data-print="oved"] .p { font-family:"Assistant", sans-serif; font-size:11pt; line-height:2.1; text-align:start; } :root[data-print="oved"] .i { font-style:italic; border:0; } :root[data-print="oved"] .print-sec h2 { font-family:"Assistant", sans-serif; font-weight:800; } :root[data-print="oved"] .sus { background:#eee !important; box-shadow:inset 0 -1.5pt 0 #999 !important; } :root[data-print="oved"] { } }