/* ============================================================================ Smart Siddur — shared stylesheet Hebrew Calendar Brand v1 · navy + gold · mobile-only This file is loaded by every tefillah page; never tefillah-specific. ============================================================================ */ /* ─── Self-hosted Heebo (Hebrew) ─── Files live at /assets/fonts/ on the Spaces bucket. Only .ttf uploaded. */ @font-face { font-family: 'Heebo'; src: url('./fonts/Heebo-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Heebo'; src: url('./fonts/Heebo-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Heebo'; src: url('./fonts/Heebo-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Heebo'; src: url('./fonts/Heebo-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } /* ─── Brand palette (verbatim from docs.hebcal.co.il/brand.html) ─── */ :root { --navy: #1a2744; --navy-dark: #111b35; --navy-light: #243358; --gold: #c9a84c; --gold-light: #e8c97a; --gold-deep: #a08232; --white: #ffffff; --cream: #f7f6f0; --border: #e1ddc8; --text: #1a2744; --muted: #5b6a8b; --soft: #8b97b3; --success: #25d366; --danger: #ff6b6b; --info: #6ab0ff; --warning: #8a5d0b; --text-soft: rgba(255,255,255,0.92); --text-muted: rgba(255,255,255,0.55); --gold-soft: rgba(201,168,76,0.12); --gold-border: rgba(201,168,76,0.25); /* Font-size scale (4 levels). JS sets data-size on . */ --prayer-size-hebrew: 19px; --prayer-size-english: 16px; --prayer-line-hebrew: 2.05; /* nikkud needs vertical room */ --prayer-line-english: 1.65; /* Layout */ --topbar-h: 56px; --content-max: 640px; --pad-x: 18px; /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --t-fast: 150ms; --t-med: 260ms; --t-slow: 400ms; } html[data-size="s"] { --prayer-size-hebrew: 16px; --prayer-size-english: 14px; } html[data-size="m"] { --prayer-size-hebrew: 19px; --prayer-size-english: 16px; } /* default */ html[data-size="l"] { --prayer-size-hebrew: 22px; --prayer-size-english: 18px; } html[data-size="xl"]{ --prayer-size-hebrew: 26px; --prayer-size-english: 21px; } /* ─── Reset + base ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.5; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; /* default theme = light, JS may flip */ background: var(--cream); color: var(--text); transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } button:focus { outline: none; } button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ─── Dark mode ─── */ body[data-theme="dark"] { background: var(--navy-dark); color: var(--text-soft); background-image: radial-gradient(ellipse at 20% 10%, rgba(201,168,76,0.07) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(26,39,68,0.9) 0%, var(--navy-dark) 100%); background-attachment: fixed; } /* ─── Language visibility (data-active-lang set on body) ─── */ /* Default: hide non-active language elements everywhere */ body[data-active-lang="he"] [data-lang]:not([data-lang="he"]) { display: none; } body[data-active-lang="translit"] [data-lang]:not([data-lang="translit"]) { display: none; } body[data-active-lang="trans"] [data-lang]:not([data-lang="trans"]) { display: none; } /* But in bilingual content modes (translit/trans), Hebrew prayer content stays visible alongside the active language. This mirrors the source pages, which always show Hebrew first then English. Chrome elements (top bar, sheets, footer) still show only the active language. */ body[data-active-lang="translit"] .prayer[data-lang="he"], body[data-active-lang="translit"] .instruction[data-lang="he"], body[data-active-lang="translit"] .subhead[data-lang="he"], body[data-active-lang="translit"] .section__title[data-lang="he"], body[data-active-lang="translit"] .variant > [data-lang="he"], body[data-active-lang="trans"] .prayer[data-lang="he"], body[data-active-lang="trans"] .instruction[data-lang="he"], body[data-active-lang="trans"] .subhead[data-lang="he"], body[data-active-lang="trans"] .section__title[data-lang="he"], body[data-active-lang="trans"] .variant > [data-lang="he"] { display: block; } /* Hebrew text is ALWAYS rendered RTL, regardless of which language mode the document is in. Critical for side-by-side modes (future) and for any spot where Hebrew appears inside an LTR document context. */ [data-lang="he"] { direction: rtl; text-align: right; unicode-bidi: isolate; } /* English content is always LTR, even if the document is RTL */ [data-lang="translit"], [data-lang="trans"] { direction: ltr; text-align: left; unicode-bidi: isolate; } /* Section titles — language-specific styling. Hebrew: centered, large, prominent (matches the visual weight of nikkud-heavy headers). English: left-aligned, smaller, more inline-bold feeling (matches source pages where "Birkot HaShachar" reads as part of the prayer flow, not a big page heading). */ .section__title[data-lang="he"] { text-align: center; } .section__title[data-lang="translit"], .section__title[data-lang="trans"] { text-align: left; font-size: 17px; letter-spacing: 0; margin-bottom: 14px; } /* In bilingual modes, Hebrew title sits right above the English title — tighten the gap */ body[data-active-lang="translit"] .section__title[data-lang="he"], body[data-active-lang="trans"] .section__title[data-lang="he"] { margin-bottom: 10px; } /* English content uses native system fonts (modern, fast, no download) */ [data-lang="translit"], [data-lang="trans"], .prayer--en, .section__title--en { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* Document direction stays RTL (inherited from ) regardless of active language, since Hebrew is always present in the content. Individual English elements opt into LTR via their [data-lang] rules above. */ /* ─── Top bar ─── */ .topbar { position: sticky; top: 0; z-index: 30; height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; gap: 8px; padding-inline: var(--pad-x); background: rgba(247, 246, 240, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(201,168,76,0.18); transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); } body[data-theme="dark"] .topbar { background: rgba(17, 27, 53, 0.78); border-bottom-color: rgba(201,168,76,0.20); } .topbar__title { flex: 1; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-theme="dark"] .topbar__title { color: var(--text-muted); } /* Progress bar (sits at very top, inside or above the topbar) */ .progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; background: transparent; z-index: 31; pointer-events: none; } .progress__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 80ms linear; } /* ─── Icon buttons (top bar items) ─── */ .iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--text); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .iconbtn:active { transform: scale(0.94); background: rgba(26,39,68,0.06); } body[data-theme="dark"] .iconbtn { color: var(--text-soft); } body[data-theme="dark"] .iconbtn:active { background: rgba(255,255,255,0.06); } .iconbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ─── Language pill (3-state nav) ─── */ .langpill { display: inline-flex; background: rgba(26,39,68,0.08); border-radius: 14px; padding: 4px; height: 44px; align-items: center; gap: 2px; /* sits centered below the topbar on its own row */ margin: 8px auto 0; width: max-content; } body[data-theme="dark"] .langpill { background: rgba(255,255,255,0.08); } .langpill__opt { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 64px; padding: 0 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; border-radius: 11px; color: var(--muted); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } body[data-theme="dark"] .langpill__opt { color: var(--text-muted); } .langpill__opt[aria-pressed="true"], .langpill__opt[aria-current="page"] { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,0.10); } body[data-theme="dark"] .langpill__opt[aria-pressed="true"], body[data-theme="dark"] .langpill__opt[aria-current="page"] { background: var(--navy-light); color: var(--gold); } /* ─── Language banner (shown to non-Hebrew browsers on the Hebrew page) ─── */ .lang-banner { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 8px var(--pad-x) 0; padding: 12px 16px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 12px; color: var(--navy-dark); font-size: 14px; flex-wrap: wrap; } .lang-banner.is-open { display: flex; } .lang-banner__text { flex: 1 1 200px; font-weight: 600; } .lang-banner__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; } .lang-banner__btn { padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; background: var(--navy); color: var(--white); text-decoration: none; border: none; cursor: pointer; transition: background var(--t-fast) var(--ease); } .lang-banner__btn:hover, .lang-banner__btn:active { background: var(--navy-dark); } .lang-banner__btn--dismiss { background: transparent; color: var(--navy-dark); border: 1px solid var(--navy-light); } body[data-theme="dark"] .lang-banner { background: rgba(212,175,55,0.10); border-color: var(--gold); color: var(--text-light); } body[data-theme="dark"] .lang-banner__btn--dismiss { color: var(--text-light); border-color: rgba(255,255,255,0.20); } /* ─── Main content ─── */ main { max-width: var(--content-max); margin: 0 auto; padding: 24px var(--pad-x) 120px; } /* ─── Prayer sections ─── */ .section { margin: 0 0 44px; scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 12px); } .section__eyebrow { display: inline-block; font-family: 'Heebo', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-deep); padding-inline-start: 12px; border-inline-start: 3px solid var(--gold); margin-bottom: 10px; } body[data-theme="dark"] .section__eyebrow { color: var(--gold); } /* Eyebrows are a design addition for the Hebrew view; English structure mirrors the source pages, which have no such markers — hide eyebrows in English modes. */ body[data-active-lang="translit"] .section__eyebrow, body[data-active-lang="trans"] .section__eyebrow { display: none; } .section__title { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--navy); margin-bottom: 22px; line-height: 1.3; } body[data-theme="dark"] .section__title { color: var(--white); } [data-lang="translit"].section__title, [data-lang="trans"].section__title, .section__title--en { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; letter-spacing: -0.5px; } /* ─── Prayer text blocks ─── */ .prayer { margin: 0 0 18px; font-size: var(--prayer-size-hebrew); line-height: var(--prayer-line-hebrew); font-weight: 400; color: var(--text); transition: background var(--t-med) var(--ease), opacity var(--t-med) var(--ease); padding: 4px 6px; border-radius: 6px; /* Hanging punctuation feels right for siddur typography */ hanging-punctuation: first allow-end last; } body[data-theme="dark"] .prayer { color: var(--text-soft); } [data-lang="translit"].prayer, [data-lang="trans"].prayer { font-size: var(--prayer-size-english); line-height: var(--prayer-line-english); } /* Emphasized opening words (the source uses ) */ .prayer strong, .prayer b { font-weight: 700; color: var(--gold-deep); } body[data-theme="dark"] .prayer strong, body[data-theme="dark"] .prayer b { color: var(--gold-light); } /* Instructional notes — small italic text from the source */ .instruction { font-size: calc(var(--prayer-size-hebrew) * 0.72); line-height: 1.55; color: var(--soft); font-style: italic; margin: 14px 0; padding-inline-start: 10px; border-inline-start: 2px solid rgba(201,168,76,0.30); } body[data-theme="dark"] .instruction { color: var(--text-muted); } [data-lang="translit"].instruction, [data-lang="trans"].instruction { font-size: calc(var(--prayer-size-english) * 0.85); } /* Sub-heading inside a section (small bold label like "ברכות התורה") */ .subhead { font-size: calc(var(--prayer-size-hebrew) * 0.85); font-weight: 800; margin: 28px 0 12px; color: var(--navy); letter-spacing: -0.1px; } body[data-theme="dark"] .subhead { color: var(--gold-light); } /* Gender variants — both visible by default with labels */ .variant { display: block; margin: 8px 0; } .variant__label { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-deep); margin-inline-end: 8px; padding: 2px 7px; border-radius: 4px; background: var(--gold-soft); vertical-align: middle; } body[data-theme="dark"] .variant__label { color: var(--gold); } body[data-gender="male"] .variant--female { opacity: 0.32; } body[data-gender="female"] .variant--male { opacity: 0.32; } /* Tachanun conditional — dimmed when "no tachanun today" */ body[data-tachanun="off"] .tachanun-section { opacity: 0.30; } body[data-tachanun="off"] .tachanun-section .prayer { font-style: italic; } /* ─── Current-line gold highlight (B2) ─── */ .prayer.is-current { background: linear-gradient( 90deg, transparent, rgba(201,168,76,0.10), transparent ); box-shadow: inset 0 0 0 1px rgba(201,168,76,0.18); } body[data-theme="dark"] .prayer.is-current { background: linear-gradient( 90deg, transparent, rgba(201,168,76,0.16), transparent ); box-shadow: inset 0 0 0 1px rgba(201,168,76,0.30); } /* ─── Resume banner (B1) ─── */ .resume { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px); z-index: 20; display: none; margin: 0 var(--pad-x) 20px; padding: 14px 16px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy-dark); border-radius: 14px; box-shadow: 0 6px 20px rgba(201,168,76,0.30); align-items: center; gap: 12px; } .resume.is-visible { display: flex; } .resume__text { flex: 1; font-size: 14px; font-weight: 600; } .resume__btn { font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 10px; background: var(--navy); color: var(--gold-light); transition: transform var(--t-fast) var(--ease); } .resume__btn:active { transform: scale(0.95); } .resume__close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); } /* ─── Pace timer per section (B5) ─── */ .section__timer { display: none; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--soft); letter-spacing: 0.5px; margin-inline-start: 10px; } body[data-timer="on"] .section__timer { display: inline-block; } body[data-theme="dark"] .section__timer { color: var(--text-muted); } /* ─── Bottom sheet (TOC + Menu) ─── */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 40; opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease), background var(--t-med) var(--ease); } .sheet-backdrop.is-open { background: rgba(0,0,0,0.40); opacity: 1; pointer-events: auto; } .sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 41; max-height: 80vh; background: var(--white); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); direction: rtl; /* sheets are always RTL for Hebrew interface */ } body[data-theme="dark"] .sheet { background: var(--navy); color: var(--text-soft); } body[data-active-lang="translit"] .sheet, body[data-active-lang="trans"] .sheet { direction: ltr; } .sheet.is-open { transform: translateY(0); } .sheet__handle { width: 40px; height: 4px; background: rgba(26,39,68,0.20); border-radius: 99px; margin: 10px auto 6px; flex: 0 0 auto; } body[data-theme="dark"] .sheet__handle { background: rgba(255,255,255,0.22); } .sheet__title { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-deep); text-align: center; padding: 6px 0 14px; flex: 0 0 auto; } body[data-theme="dark"] .sheet__title { color: var(--gold); } .sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 24px; -webkit-overflow-scrolling: touch; } /* TOC list */ .toc__item { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 12px; font-size: 16px; font-weight: 600; text-align: start; width: 100%; color: var(--text); transition: background var(--t-fast) var(--ease); } .toc__item:active { background: rgba(201,168,76,0.10); } body[data-theme="dark"] .toc__item { color: var(--text-soft); } .toc__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; font-size: 12px; font-weight: 800; color: var(--gold-deep); background: var(--gold-soft); flex: 0 0 auto; } body[data-theme="dark"] .toc__num { color: var(--gold); background: rgba(201,168,76,0.10); } /* Menu rows */ .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px; border-bottom: 1px solid rgba(26,39,68,0.06); font-size: 15px; font-weight: 600; } .menu-row:last-child { border-bottom: 0; } body[data-theme="dark"] .menu-row { border-bottom-color: rgba(255,255,255,0.06); } .menu-row__label { color: var(--text); } body[data-theme="dark"] .menu-row__label { color: var(--text-soft); } .menu-row--stack { flex-direction: column; align-items: stretch; gap: 8px; } .menu-row__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .menu-row__status { font-size: 13px; font-weight: 500; color: var(--muted); padding-inline-start: 2px; line-height: 1.3; } body[data-theme="dark"] .menu-row__status { color: var(--text-muted); } /* About sheet content */ .about-body { padding: 4px 4px 24px; max-height: 70vh; overflow-y: auto; } .about-section { padding: 14px 4px; border-bottom: 1px solid rgba(26,39,68,0.08); } .about-section:last-child { border-bottom: 0; } body[data-theme="dark"] .about-section { border-bottom-color: rgba(255,255,255,0.08); } .about-section__title { font-size: 20px; font-weight: 700; color: var(--navy-dark); margin: 2px 0; line-height: 1.3; } body[data-theme="dark"] .about-section__title { color: var(--gold); } .about-section__lede { font-size: 14px; color: var(--text-soft); margin: 6px 0 0; line-height: 1.5; } .about-section__heading { font-size: 14px; font-weight: 700; color: var(--text); margin: 10px 0 6px; text-transform: none; letter-spacing: 0; } .about-list { margin: 4px 0 12px; padding-inline-start: 4px; list-style: none; } .about-list li { font-size: 14px; line-height: 1.6; color: var(--text); margin: 4px 0; } body[data-theme="dark"] .about-list li { color: var(--text-soft); } .about-disclaimer p { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 8px 0; font-style: italic; } .about-credits p { font-size: 12px; color: var(--text-muted); text-align: center; margin: 4px 0; } body[data-theme="dark"] .about-credits p { color: var(--text-muted); } /* ─── Redirect dialog (Ashkenaz nusach pill warning) ─────────────── */ .dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9998; } .dialog-backdrop[hidden] { display: none; } .dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 80vh; overflow-y: auto; background: var(--surface); color: var(--text); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); padding: 22px; z-index: 9999; } .dialog[hidden] { display: none; } body[data-theme="dark"] .dialog { background: var(--navy-dark); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } .dialog__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; } .dialog__title [lang="he"] { color: var(--text); } .dialog__title [lang="en"] { color: var(--text-soft); font-size: 14px; font-weight: 600; } .dialog__body p { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 8px 0; } .dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .dialog__btn { padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; font-family: inherit; } .dialog__btn--cancel { background: transparent; color: var(--text-soft); border: 1px solid rgba(26, 39, 68, 0.18); } body[data-theme="dark"] .dialog__btn--cancel { border-color: rgba(255, 255, 255, 0.18); } .dialog__btn--confirm { background: var(--gold); color: var(--navy-dark); } /* Switch */ .switch { position: relative; width: 46px; height: 28px; border-radius: 99px; background: rgba(26,39,68,0.18); transition: background var(--t-fast) var(--ease); flex: 0 0 auto; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 99px; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: transform var(--t-fast) var(--ease); } .switch[aria-pressed="true"] { background: var(--gold); } .switch[aria-pressed="true"]::after { transform: translateX(18px); } body[data-active-lang="he"] .switch::after { left: auto; right: 3px; } body[data-active-lang="he"] .switch[aria-pressed="true"]::after { transform: translateX(-18px); } /* Segmented control (for font size, gender) */ .seg { display: inline-flex; background: rgba(26,39,68,0.06); border-radius: 10px; padding: 2px; } body[data-theme="dark"] .seg { background: rgba(255,255,255,0.06); } .seg__opt { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 700; border-radius: 8px; color: var(--muted); } body[data-theme="dark"] .seg__opt { color: var(--text-muted); } .seg__opt[aria-pressed="true"] { background: var(--white); color: var(--navy); } body[data-theme="dark"] .seg__opt[aria-pressed="true"] { background: var(--navy-light); color: var(--gold); } /* ─── Focus mode ─── */ body[data-focus="on"] .topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; } body[data-focus="on"] .progress { opacity: 0; } body[data-focus="on"] main { padding-top: 12px; } .focus-exit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); inset-inline-end: 16px; z-index: 35; display: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(201,168,76,0.92); color: var(--navy-dark); align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.20); } .focus-exit svg { width: 18px; height: 18px; stroke-width: 2.2; } body[data-focus="on"] .focus-exit { display: inline-flex; } /* ─── Footer (small attribution) ─── */ .foot { margin-top: 60px; padding: 24px var(--pad-x) calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--soft); text-align: center; } body[data-theme="dark"] .foot { color: var(--text-muted); } /* ─── Reduce motion ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ─── Initial page fade-in (one quiet animation) ─── */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } main > .section { animation: fade-up var(--t-slow) var(--ease) both; } main > .section:nth-child(1) { animation-delay: 0ms; } main > .section:nth-child(2) { animation-delay: 60ms; } main > .section:nth-child(3) { animation-delay: 120ms; } main > .section:nth-child(n+4) { animation-delay: 180ms; } /* ============================================================ Conditional engine — visibility driven by data-active attribute set by the engine on every . ============================================================ */ .conditional { display: none; } .conditional[data-active="true"] { display: revert; } .conditional[data-active="false"] { display: none; } /* Dev-only: visually mark active conditionals. Remove before production. */ .conditional[data-active="true"] { outline: 1px dashed rgba(255, 191, 0, 0.4); outline-offset: 4px; }