/* ============================================================ Empyrien — Bahá'í Feast programs Shared stylesheet. No build step; plain CSS. Theme axes are data-attributes on : data-theme light | dark data-contrast normal | high data-face serif | legible data-lead normal | loose Text size rides on the --scale custom property. ============================================================ */ :root { --scale: 1; --bg: #faf8f5; --bg-elev: #ffffff; --bg-sunk: #f2ede5; --ink: #2c2420; --ink-soft: #6b5e54; --ink-faint: #9c9086; --accent: #8b6f4e; --accent-soft: #d4c4a8; --rule: #e8e0d6; --shadow: rgba(139, 111, 78, 0.09); --shadow-lift: rgba(139, 111, 78, 0.16); --focus: #8b6f4e; --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --legible: 'Atkinson Hyperlegible', 'Inter', -apple-system, sans-serif; --measure: 34rem; --lead: 1.75; } :root[data-theme="dark"] { --bg: #131110; --bg-elev: #1c1917; --bg-sunk: #0d0b0a; --ink: #ebe4d8; --ink-soft: #a2988a; --ink-faint: #7a7166; --accent: #c9a878; --accent-soft: #6d5c43; --rule: rgba(235, 228, 216, 0.13); --shadow: rgba(0, 0, 0, 0.45); --shadow-lift: rgba(0, 0, 0, 0.6); --focus: #c9a878; } /* High contrast — for low vision. Flattens tint, maximises luminance gap. */ :root[data-contrast="high"] { --bg: #ffffff; --bg-elev: #ffffff; --bg-sunk: #ffffff; --ink: #000000; --ink-soft: #000000; --ink-faint: #2a2a2a; --accent: #000000; --accent-soft: #000000; --rule: #000000; --shadow: transparent; --shadow-lift: transparent; --focus: #0044cc; } :root[data-contrast="high"][data-theme="dark"] { --bg: #000000; --bg-elev: #000000; --bg-sunk: #000000; --ink: #ffffff; --ink-soft: #ffffff; --ink-faint: #d8d8d8; --accent: #ffe08a; --accent-soft: #ffe08a; --rule: #ffffff; --focus: #ffe08a; } :root[data-lead="loose"] { --lead: 2.15; } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.35s ease, color 0.35s ease; } :root[data-face="legible"] body { font-family: var(--legible); font-weight: 400; } a { color: var(--accent); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--bg-elev); color: var(--ink); padding: 0.9rem 1.4rem; border: 2px solid var(--accent); border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ---------------------------------------------------------- masthead */ .masthead { text-align: center; padding: 3.5rem 1.5rem 2rem; background: linear-gradient(180deg, var(--bg-sunk) 0%, var(--bg) 100%); border-bottom: 1px solid var(--rule); } .eyebrow { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; } .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .eyebrow a:hover { color: var(--accent); border-bottom-color: var(--accent-soft); } .masthead h1 { font-family: var(--serif); font-weight: 500; font-size: calc(clamp(2.7rem, 8vw, 4.2rem) * var(--scale)); line-height: 1.08; color: var(--accent); letter-spacing: 0.03em; } :root[data-face="legible"] .masthead h1 { font-family: var(--legible); font-weight: 700; } .masthead .translation { font-family: var(--serif); font-style: italic; font-size: calc(1.45rem * var(--scale)); color: var(--ink-soft); margin-top: 0.2rem; } :root[data-face="legible"] .masthead .translation { font-family: var(--legible); font-style: normal; } .masthead .dateline { margin-top: 1rem; font-size: calc(0.86rem * var(--scale)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .ornament { color: var(--accent-soft); letter-spacing: 0.55em; font-size: 1.15rem; margin: 1.5rem 0 0; text-align: center; user-select: none; } .ornament[aria-hidden="true"] { pointer-events: none; } /* ---------------------------------------------------------- toolbar */ .toolbar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); } @supports not (backdrop-filter: blur(1px)) { .toolbar { background: var(--bg); } } .tool { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 999px; padding: 0.42rem 0.95rem; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; } .tool:hover { color: var(--ink); border-color: var(--accent-soft); } .tool[aria-pressed="true"], .tool[aria-expanded="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); } :root[data-contrast="high"] .tool { border-width: 2px; } .tool .glyph { font-size: 1rem; line-height: 1; } .tool-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); } .tool-primary:hover { color: var(--bg); filter: brightness(1.08); } /* accessibility panel */ .panel { width: 100%; max-width: 46rem; margin: 0.4rem auto 0.2rem; padding: 1.15rem 1.25rem; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 6px 24px var(--shadow); } .panel[hidden] { display: none; } .panel h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9rem; } .panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.5rem 0; } .panel-row + .panel-row { border-top: 1px dashed var(--rule); } .panel-row .label { flex: 0 0 8.5rem; font-size: 0.85rem; color: var(--ink-soft); } .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; } :root[data-contrast="high"] .seg { border-width: 2px; } .seg button { font: inherit; font-size: 0.82rem; padding: 0.36rem 0.85rem; background: var(--bg-elev); color: var(--ink-soft); border: 0; cursor: pointer; } .seg button + button { border-left: 1px solid var(--rule); } .seg button[aria-pressed="true"] { background: var(--accent); color: var(--bg); } .size-readout { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--ink-faint); min-width: 3.2rem; text-align: center; } input[type="range"] { accent-color: var(--accent); } /* ---------------------------------------------------------- layout */ .container { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } /* The program page runs wider so each reading can carry a pronunciation margin alongside the text without narrowing the measure. */ .container-wide { max-width: 62rem; } .section-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); text-align: center; margin: 3rem 0 1.25rem; } .section-label:first-child { margin-top: 0; } /* ---------------------------------------------------------- readings */ .reading { position: relative; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 14px; padding: 1.6rem 1.5rem 1.5rem; margin-bottom: 1.1rem; box-shadow: 0 2px 14px var(--shadow); } :root[data-contrast="high"] .reading { border-width: 2px; } /* Two-column reading: the words on the left, pronunciation notes in a quiet margin on the right. Below the breakpoint the margin drops underneath so a note never lands on top of the text being read aloud. */ .reading-body { position: relative; } @media (min-width: 60rem) { .reading-body { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1.75rem; align-items: start; } .reading-gutter { position: relative; min-height: 100%; } .reading-gutter .pron-note { position: absolute; left: 0; right: 0; } } .reading-head { display: flex; align-items: baseline; gap: 0.85rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.15rem; } .reading-num { font-family: var(--serif); font-size: calc(2rem * var(--scale)); font-weight: 600; line-height: 1; color: var(--accent); min-width: 1.9rem; text-align: center; font-variant-numeric: lining-nums; } :root[data-face="legible"] .reading-num { font-family: var(--legible); } .reading-meta { flex: 1; min-width: 0; } .present-here { align-self: center; padding: 0.3rem 0.6rem; flex: 0 0 auto; } .reading-author { font-size: calc(1rem * var(--scale)); font-weight: 500; color: var(--ink); display: block; } .reading-source { font-size: calc(0.88rem * var(--scale)); color: var(--ink-soft); display: block; margin-top: 0.1rem; } .reading-text { font-family: var(--serif); font-size: calc(1.42rem * var(--scale)); font-weight: 400; line-height: var(--lead); color: var(--ink); padding-left: 1.15rem; border-left: 2px solid var(--accent-soft); } :root[data-face="legible"] .reading-text { font-family: var(--legible); font-size: calc(1.2rem * var(--scale)); } :root[data-contrast="high"] .reading-text { border-left-width: 4px; } .reading-text p + p { margin-top: 1.1em; } /* ---------------------------------------------------------- bilingual */ /* Persian original with the English rendering set quietly beneath it, so the eye follows the Persian and the English stays available without competing. */ .bilingual { padding-left: 1.15rem; border-left: 2px solid var(--accent-soft); } :root[data-contrast="high"] .bilingual { border-left-width: 4px; } .bl-line + .bl-line { margin-top: 1.5em; } .bl-fa { direction: rtl; text-align: right; unicode-bidi: isolate; font-family: 'Noto Naskh Arabic', 'Scheherazade New', var(--serif); font-size: calc(1.5rem * var(--scale)); line-height: 2.15; color: var(--ink); } .bl-en { direction: ltr; text-align: left; unicode-bidi: isolate; font-family: var(--serif); font-size: calc(1.12rem * var(--scale)); line-height: 1.65; color: var(--ink-soft); margin-top: 0.3em; opacity: 0.92; } :root[data-face="legible"] .bl-en { font-family: var(--legible); } :root[data-contrast="high"] .bl-en { opacity: 1; } .bl-note { margin-bottom: 1.4rem; padding-left: 1.15rem; font-size: calc(0.85rem * var(--scale)); color: var(--ink-faint); line-height: 1.6; font-style: italic; } .stage-text .bilingual { border: 0; padding: 0; } .stage-text .bl-fa { font-size: 1.05em; text-align: center; line-height: 1.9; } .stage-text .bl-en { font-size: 0.66em; text-align: center; color: var(--ink-soft); } .stage-text .bl-note { display: none; } .reading-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.2rem; padding-left: 1.15rem; } .source-link { font-size: calc(0.76rem * var(--scale)); letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; } .source-link:hover { border-bottom-color: var(--accent-soft); } /* reader assignment on each card */ .assign { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--ink-faint); } .assign label { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; } .assign select { font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.7rem; max-width: 12rem; cursor: pointer; } :root[data-contrast="high"] .assign select { border-width: 2px; } .assign select.is-set { color: var(--accent); font-weight: 500; } /* ---------------------------------------------------------- readers panel */ .readers-panel .roster { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; } .readers-panel .roster:empty::after { content: "No readers added yet."; font-size: 0.85rem; color: var(--ink-faint); font-style: italic; } .chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.4rem 0.3rem 0.85rem; font-size: 0.88rem; color: var(--ink); } :root[data-contrast="high"] .chip { border-width: 2px; } .chip .count { font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .chip button { font: inherit; line-height: 1; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; } .chip button:hover { background: var(--accent); color: var(--bg); } .add-reader { display: flex; gap: 0.5rem; flex-wrap: wrap; } .add-reader input { flex: 1 1 12rem; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 1rem; } :root[data-contrast="high"] .add-reader input { border-width: 2px; } .add-reader input::placeholder { color: var(--ink-faint); } .panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule); } .hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.8rem; line-height: 1.55; } /* ---------------------------------------------------------- pronunciation */ .pron { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--accent-soft); } .pron:hover { text-decoration-color: var(--accent); } :root[data-contrast="high"] .pron { text-decoration-style: solid; text-decoration-thickness: 2px; text-decoration-color: var(--accent); } .pron[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--accent); color: var(--accent); /* a soft mark, so the word is still findable once the bubble is up */ background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); } :root[data-contrast="high"] .pron[aria-expanded="true"] { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 2px var(--accent); } /* The note itself — lives in the margin, never over the words. */ .pron-note { font-family: var(--sans); border-left: 2px solid var(--accent-soft); padding: 0.1rem 0 0.15rem 0.8rem; animation: note-in 0.18s ease-out; } :root[data-face="legible"] .pron-note { font-family: var(--legible); } :root[data-contrast="high"] .pron-note { border-left-width: 4px; border-left-color: var(--ink); } .pron-note[hidden] { display: none; } .pron-note .word { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.2rem; } .pron-note .say { font-size: 1.02rem; font-weight: 500; color: var(--accent); line-height: 1.4; overflow-wrap: anywhere; } :root[data-contrast="high"] .pron-note .say { color: var(--ink); } .pron-note .say .stress { text-transform: uppercase; letter-spacing: 0.02em; } .pron-note .gloss { margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; } @keyframes note-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* The narrow-screen bubble: pinned low, clear of the line being read. */ .pron-bubble { position: fixed; left: 0.7rem; right: 0.7rem; bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); z-index: 320; max-width: 32rem; margin: 0 auto; padding: 0.9rem 2.9rem 0.95rem 1.05rem; background: var(--bg-elev); border: 1px solid var(--accent-soft); border-radius: 16px; box-shadow: 0 10px 34px var(--shadow-lift), 0 2px 6px var(--shadow); animation: bubble-in 0.2s cubic-bezier(0.22, 1, 0.36, 1); } :root[data-contrast="high"] .pron-bubble { border-width: 2px; border-color: var(--ink); } .pron-bubble[hidden] { display: none; } /* Inside the bubble the note drops its margin rule — the bubble is the frame. */ .pron-bubble .pron-note { border-left: 0; padding: 0; animation: none; } .pron-close { position: absolute; top: 0.45rem; right: 0.45rem; width: 2rem; height: 2rem; font: inherit; font-size: 1.35rem; line-height: 1; color: var(--ink-faint); background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .pron-close:hover { background: var(--bg-sunk); color: var(--ink); } @keyframes bubble-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Pronunciation rail in present mode — opt-in, tucked below the reading. */ .stage-pron { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; margin-top: 3vh; padding-top: 1.5vh; border-top: 1px solid var(--rule); max-width: 60ch; font-family: var(--sans); font-size: clamp(0.72rem, 1.15vw, 0.98rem); color: var(--ink-faint); } :root[data-face="legible"] .stage-pron { font-family: var(--legible); } .stage-pron[hidden] { display: none; } .stage-pron b { color: var(--ink-soft); font-weight: 500; } .stage-pron .say { color: var(--accent); } /* ---------------------------------------------------------- QR panel */ .qr-panel { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; text-align: left; max-width: 46rem; margin: 0 auto 2rem; padding: 1.5rem; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 2px 14px var(--shadow); } :root[data-contrast="high"] .qr-panel { border-width: 2px; } .qr-frame { width: 8.5rem; height: 8.5rem; flex: 0 0 auto; color: var(--ink); } .qr { width: 100%; height: 100%; display: block; } .qr .qbg { fill: #ffffff; } .qr .qm rect { fill: #17130f; } .qr .qe .eo { fill: none; stroke: #17130f; stroke-width: 1px; } .qr .qe .ei { fill: #17130f; } .qr-copy { flex: 1 1 15rem; min-width: 0; } .qr-copy h2 { font-family: var(--serif); font-size: calc(1.5rem * var(--scale)); font-weight: 500; color: var(--accent); margin-bottom: 0.35rem; } :root[data-face="legible"] .qr-copy h2 { font-family: var(--legible); font-weight: 700; } .qr-copy p { font-size: calc(0.92rem * var(--scale)); color: var(--ink-soft); line-height: 1.6; } .qr-actions { margin-top: 0.85rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .qr-url { display: inline-block; margin-top: 0.6rem; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); word-break: break-all; } /* ---------------------------------------------------------- programs index */ .program-list { display: grid; gap: 1rem; } .program-card { display: block; padding: 1.6rem 1.5rem; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 2px 14px var(--shadow); text-decoration: none; color: inherit; transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s; } .program-card:hover { box-shadow: 0 8px 28px var(--shadow-lift); transform: translateY(-2px); border-color: var(--accent-soft); } :root[data-contrast="high"] .program-card { border-width: 2px; } .program-card h3 { font-family: var(--serif); font-size: calc(1.85rem * var(--scale)); font-weight: 500; color: var(--accent); line-height: 1.15; } :root[data-face="legible"] .program-card h3 { font-family: var(--legible); font-weight: 700; } .program-card .meta { font-size: calc(0.8rem * var(--scale)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.4rem; } .program-card .blurb { font-size: calc(0.95rem * var(--scale)); color: var(--ink-soft); margin-top: 0.7rem; line-height: 1.6; } .program-card.upcoming { background: transparent; border-style: dashed; box-shadow: none; cursor: default; } .program-card.upcoming:hover { transform: none; box-shadow: none; } .program-card.upcoming h3 { color: var(--ink-faint); } .prose { max-width: 34rem; margin: 0 auto; font-size: calc(1.02rem * var(--scale)); color: var(--ink-soft); line-height: 1.75; text-align: center; } .prose p + p { margin-top: 1rem; } /* ---------------------------------------------------------- footer */ .page-foot { text-align: center; padding: 2.5rem 1.25rem 3.5rem; border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: 0.82rem; line-height: 1.7; } .page-foot a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--rule); } .page-foot a:hover { color: var(--accent); } /* ---------------------------------------------------------- present mode */ .stage { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto; padding: max(2vh, 1rem) max(3vw, 1rem); } .stage[hidden] { display: none; } body.presenting { overflow: hidden; } /* The stage covers the page, so a settings panel opened from inside it has to float above, and scroll on its own if the screen is short. */ body.presenting .panel:not([hidden]) { position: fixed; z-index: 430; top: 3.6rem; left: 50%; transform: translateX(-50%); width: min(46rem, calc(100vw - 1.5rem)); max-height: min(78vh, 34rem); overflow-y: auto; box-shadow: 0 18px 50px var(--shadow-lift), 0 0 0 1px var(--rule); } .stage-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--ink-faint); font-size: clamp(0.7rem, 1.4vw, 0.95rem); letter-spacing: 0.2em; text-transform: uppercase; } /* min-width:0 on the grid rows, or a long control row widens the whole grid column and pushes the last button off the screen. */ .stage-top, .stage-foot { min-width: 0; } .stage-top > span:last-child { display: flex; gap: 0.4rem; flex: 0 0 auto; } .stage-count { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* On a phone the controls keep their icons but drop their labels, so the header stays on one line and the reading keeps the height. */ /* Narrow screens keep the icons and drop the words, so the row stays on one line and the reading keeps its height. The text-size steppers go too — they are a convenience where there is room, and the Accessibility panel one tap away has them along with everything else. */ @media (max-width: 46rem) { .stage-top { letter-spacing: 0.12em; gap: 0.5rem; } .stage-top .tool { padding: 0.35rem 0.62rem; } .stage-top .tool .text { display: none; } #stage-size-down, #stage-size-up { display: none; } } .stage-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: auto; padding: 2vh 0; scrollbar-width: thin; } .stage-reader { font-family: var(--sans); font-size: clamp(0.85rem, 1.8vw, 1.3rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2vh; } :root[data-face="legible"] .stage-reader { font-family: var(--legible); } .stage-reader:empty { display: none; } .stage-source { font-family: var(--sans); font-size: clamp(0.78rem, 1.5vw, 1.1rem); color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 3vh; } :root[data-face="legible"] .stage-source { font-family: var(--legible); } /* Width and size are both set by script: the passage takes only as much of the screen as it needs to stay large, so one reading is always one slide. */ .stage-text { font-family: var(--serif); font-weight: 400; line-height: 1.6; color: var(--ink); max-width: 86vw; margin: 0 auto; font-size: 2.6vw; text-wrap: pretty; } :root[data-face="legible"] .stage-text { font-family: var(--legible); } :root[data-lead="loose"] .stage-text { line-height: 1.9; } .stage-text.is-wide { text-align: left; } .stage-text.is-wide .bl-fa { text-align: right; } .stage-text.is-wide .bl-en { text-align: left; } /* Only reached when a long passage meets a small screen: hold a legible size and scroll rather than shrink away to nothing. */ .stage-body.is-scrolling { justify-content: flex-start; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent); } .stage-body.is-scrolling::after { content: "▼"; flex: 0 0 auto; padding-top: 0.75rem; color: var(--accent); font-size: 1rem; } .stage-text p + p { margin-top: 0.75em; } /* A faint dashed mark on the words the pronunciation rail is listing, so the eye can match them up. Only present while that rail is showing. */ .stage-mark { text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); } :root[data-contrast="high"] .stage-mark { text-decoration-thickness: 2px; text-decoration-color: var(--accent); } .stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* One row, always — a wrapping row would change the footer height and throw off the measurement the slide sizing depends on. */ .stage-dots { display: flex; flex-wrap: nowrap; gap: 0.4rem; justify-content: center; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0.2rem 0; } .stage-dots::-webkit-scrollbar { display: none; } .stage-dots button { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid var(--accent-soft); background: transparent; cursor: pointer; padding: 0; } .stage-dots button[aria-current="true"] { background: var(--accent); border-color: var(--accent); } .stage-nav { display: flex; gap: 0.5rem; } /* invisible tap zones for advancing on a phone or tablet */ .stage-tap { position: absolute; top: 12vh; bottom: 14vh; width: 22%; border: 0; background: transparent; cursor: pointer; } .stage-tap.prev { left: 0; } .stage-tap.next { right: 0; } .stage-tap:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* ---------------------------------------------------------- misc */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 500; background: var(--ink); color: var(--bg); padding: 0.65rem 1.2rem; border-radius: 999px; font-size: 0.85rem; box-shadow: 0 8px 26px var(--shadow-lift); } .toast[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .program-card:hover { transform: none; } } @media (max-width: 34rem) { .masthead { padding-top: 2.5rem; } .reading { padding: 1.25rem 1.1rem; } .reading-text { padding-left: 0.9rem; } .reading-foot { padding-left: 0.9rem; } .panel-row .label { flex-basis: 100%; } .qr-panel { justify-content: flex-start; } } /* ---------------------------------------------------------- print */ @media print { .toolbar, .panel, .qr-panel, .stage, .toast, .skip-link, .assign, .ornament, .pron-bubble { display: none !important; } body { background: #fff; color: #000; } .reading { border: 0; box-shadow: none; padding: 0; margin-bottom: 1.6rem; break-inside: avoid; } .reading-text { font-size: 12.5pt; line-height: 1.5; border-left: 1.5pt solid #999; } .masthead { border: 0; background: none; } a[href]::after { content: ""; } }