/* ============================================================ TEFILOT — folha de estilo principal Estética: manuscrito iluminado contemporâneo Paleta clara: pergaminho + ouro velho + tinta sépia Paleta escura: azul-noite + ouro morno + creme ============================================================ */ /* ---------- VARIÁVEIS DE TEMA ---------- */ :root { /* Paleta clara (default) */ --bg: #f5efe2; --bg-elev: #fdf8ec; --bg-soft: #ede4cf; --ink: #2a1f15; --ink-soft: #5a4632; --ink-mute: #8a7960; --gold: #a07434; --gold-soft: #c9a468; --accent: #6b3410; --line: #d6c8a8; --line-soft: #e8dcc0; --shadow: 0 1px 0 rgba(70,40,15,0.04), 0 8px 24px -12px rgba(70,40,15,0.18); --shadow-lg: 0 2px 0 rgba(70,40,15,0.05), 0 24px 48px -20px rgba(70,40,15,0.28); /* Tipografia */ --font-display: "Cormorant Garamond", "Georgia", serif; --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif; --font-hebrew: "Frank Ruhl Libre", "David", "Times New Roman", serif; /* Escala de tamanhos (ajustável por usuário) */ --fs-base: 16px; --fs-hebrew: 1.6rem; --fs-translit: 1.05rem; --fs-translation: 1rem; /* Métricas */ --header-h: 64px; --bottom-h: 68px; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; /* Animação */ --ease: cubic-bezier(.4,.0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* Modo escuro */ [data-theme="dark"] { --bg: #14110d; --bg-elev: #1f1a13; --bg-soft: #2a2218; --ink: #f0e4cc; --ink-soft: #d4c4a3; /* mais claro: melhor contraste sobre bg-elev escuro */ --ink-mute: #a89878; /* antes #8a7960 — passa AA em parágrafos secundários */ --gold: #e0bc73; /* ouro mais luminoso para CTAs e destaques */ --gold-soft: #c69e58; --accent: #e8b568; --line: #4a3d2a; /* linhas mais visíveis */ --line-soft: #322817; --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6); --shadow-lg: 0 2px 0 rgba(0,0,0,0.5), 0 24px 48px -20px rgba(0,0,0,0.8); } /* Tamanhos de fonte ajustáveis — aplicados no para que a cascata alcance todo o documento (body, nav, botões, etc.) via var(--fs-base) */ html[data-font-size="small"] { --fs-base:15px; --fs-hebrew:1.4rem; --fs-translit:.95rem; --fs-translation:.9rem; } html[data-font-size="medium"] { --fs-base:16px; --fs-hebrew:1.6rem; --fs-translit:1.05rem; --fs-translation:1rem; } html[data-font-size="large"] { --fs-base:18px; --fs-hebrew:2rem; --fs-translit:1.2rem; --fs-translation:1.15rem; } html[data-font-size="xlarge"] { --fs-base:20px; --fs-hebrew:2.4rem; --fs-translit:1.35rem; --fs-translation:1.3rem; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--line-soft); } ::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--fs-base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; padding-top: var(--header-h); padding-bottom: var(--bottom-h); transition: background-color .4s var(--ease), color .4s var(--ease); /* textura sutil de pergaminho */ background-image: radial-gradient(circle at 20% 10%, rgba(160,116,52,0.04) 0%, transparent 40%), radial-gradient(circle at 80% 90%, rgba(107,52,16,0.03) 0%, transparent 50%); } [data-theme="dark"] body { background-image: radial-gradient(circle at 20% 10%, rgba(217,176,99,0.04) 0%, transparent 40%), radial-gradient(circle at 80% 90%, rgba(217,176,99,0.02) 0%, transparent 50%); } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } input, textarea, select { font: inherit; color: inherit; } /* ---------- SPLASH ---------- */ .splash { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity .6s var(--ease), visibility .6s var(--ease); } .splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .splash-mark { text-align: center; animation: fadeUp .8s var(--ease-out); } .splash-mark .hebrew-mark { font-family: var(--font-hebrew); font-size: 3.5rem; font-weight: 700; color: var(--gold); display: block; letter-spacing: .04em; } .splash-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--ink-soft); letter-spacing: .15em; display: block; margin-top: .8rem; } @keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes slideUpFade { from { opacity:0; transform: translateY(10px) scale(0.98); } to { opacity:1; transform: translateY(0) scale(1); } } /* ---------- CABEÇALHO ---------- */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: color-mix(in srgb, var(--bg-elev) 90%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: .5rem; padding: 0 1rem; z-index: 100; transition: background .3s var(--ease), border-color .3s var(--ease); } .brand { display: flex; align-items: center; gap: .55rem; flex: 1; justify-content: center; user-select: none; cursor: pointer; } .brand-mark { font-family: var(--font-hebrew); font-weight: 700; color: var(--gold); font-size: 1.5rem; line-height: 1; transform: translateY(-1px); } .brand-name { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; letter-spacing: .12em; color: var(--ink); } .header-actions { display: flex; gap: .25rem; } .icon-btn { background: transparent; border: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background .2s var(--ease), transform .2s var(--ease); } .icon-btn:hover { background: var(--bg-soft); } .icon-btn:active { transform: scale(.94); } /* ---------- BUSCA ---------- */ .search-bar { position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--bg-elev); border-bottom: 1px solid var(--line-soft); padding: .6rem 1rem; display: flex; align-items: center; gap: .5rem; z-index: 99; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .25s var(--ease); } .search-bar.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .search-bar input { flex: 1; background: var(--bg); border: 1px solid var(--line); padding: .65rem 1rem; border-radius: var(--radius); outline: none; transition: border-color .2s var(--ease); } .search-bar input:focus { border-color: var(--gold); } .search-results { position: absolute; top: 100%; left: 1rem; right: 1rem; max-height: 60vh; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); } .search-result { padding: .8rem 1rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .15s var(--ease); } .search-result:hover { background: var(--bg-soft); } .search-result:last-child { border-bottom: 0; } .search-result-title { font-weight: 600; color: var(--ink); } .search-result-meta { font-size: .85rem; color: var(--ink-mute); margin-top: .15rem; } /* ---------- SIDEBAR ---------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; background: var(--bg-elev); border-right: 1px solid var(--line); z-index: 200; transform: translateX(-100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .sidebar-header { padding: 2rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line-soft); text-align: center; } .sidebar-mark { font-family: var(--font-hebrew); font-size: 2.2rem; color: var(--gold); font-weight: 700; letter-spacing: .04em; } .sidebar-sub { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); margin: .4rem 0 0; letter-spacing: .12em; font-size: .95rem; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0; } .nav-item { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.5rem; color: var(--ink-soft); font-weight: 500; border-left: 3px solid transparent; transition: all .2s var(--ease); } .nav-item:hover { background: var(--bg-soft); color: var(--ink); } .nav-item.active { color: var(--ink); border-left-color: var(--gold); background: var(--bg-soft); } .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--gold); font-size: 1.1rem; } .overlay { position: fixed; inset: 0; background: rgba(20,15,10,0.5); z-index: 150; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); } .overlay.open { opacity: 1; visibility: visible; } /* ---------- BARRA INFERIOR (mobile) ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-h); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid var(--line-soft); display: flex; justify-content: space-around; align-items: center; z-index: 90; padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem; color: var(--ink-mute); font-size: .7rem; transition: color .2s var(--ease); } .bottom-item.active, .bottom-item:hover { color: var(--gold); } .bottom-item svg { transition: transform .2s var(--ease); } .bottom-item.active svg { transform: scale(1.1); } /* ---------- PRINCIPAL ---------- */ .app-main { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; animation: fadeIn .35s var(--ease-out); } /* ---------- TIPOGRAFIA DE PÁGINA ---------- */ .page-header { margin: .5rem 0 2rem; } .page-eyebrow { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: .95rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .4rem; } .page-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; margin: 0; color: var(--ink); letter-spacing: -.01em; } .page-sub { color: var(--ink-soft); margin-top: .6rem; font-size: 1.05rem; max-width: 60ch; } .section-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin: 2.5rem 0 1rem; color: var(--ink); display: flex; align-items: center; gap: .8rem; } .section-title::before { content: ""; width: 24px; height: 1px; background: var(--gold); } /* ---------- HOME — oração do dia ---------- */ .daily-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow); } .daily-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-soft)); } .daily-eyebrow { display: flex; align-items: center; gap: .5rem; color: var(--gold); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem; } .daily-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line) 0%, transparent 100%); } .daily-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .3rem; font-weight: 500; } .daily-hebrew { font-family: var(--font-hebrew); font-size: 1.6rem; color: var(--gold); font-weight: 500; direction: rtl; } .daily-excerpt { color: var(--ink-soft); margin: 1rem 0 1.5rem; font-style: italic; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; max-width: 50ch; } .daily-actions { display: flex; gap: .8rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border: 0; border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: .95rem; transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } .btn-primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--bg-soft); } .btn:active { transform: scale(.97); } /* ---------- GRADE DE CATEGORIAS ---------- */ .category-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: 1.5rem; } .category-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.25rem; cursor: pointer; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); position: relative; overflow: hidden; } .category-card:hover { transform: translateY(-2px); border-color: var(--gold-soft); box-shadow: var(--shadow-lg); } .category-symbol { font-size: 1.8rem; color: var(--gold); display: block; margin-bottom: .8rem; font-family: var(--font-hebrew); } .category-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; margin: 0 0 .15rem; } .category-name-he { font-family: var(--font-hebrew); color: var(--ink-mute); font-size: .95rem; direction: rtl; } .category-count { font-size: .8rem; color: var(--ink-mute); margin-top: .5rem; letter-spacing: .05em; } /* ---------- LISTA DE ORAÇÕES ---------- */ .prayer-list { list-style: none; padding: 0; margin: 0; } .prayer-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .65rem; cursor: pointer; transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .prayer-item:hover { border-color: var(--gold-soft); transform: translateX(2px); } .prayer-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: var(--font-hebrew); font-size: 1.3rem; font-weight: 700; } .prayer-info { flex: 1; min-width: 0; } .prayer-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; margin: 0; color: var(--ink); } .prayer-name-he { font-family: var(--font-hebrew); direction: rtl; color: var(--ink-soft); font-size: .9rem; margin-top: .1rem; } .prayer-fav { flex-shrink: 0; background: transparent; border: 0; color: var(--ink-mute); padding: .4rem; font-size: 1.2rem; transition: color .2s var(--ease), transform .2s var(--ease); } .prayer-fav.active { color: var(--gold); } .prayer-fav:hover { transform: scale(1.15); } /* ---------- DETALHE DE ORAÇÃO ---------- */ .prayer-detail .page-header { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; } .audio-player { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5rem 0; display: flex; align-items: center; gap: 1rem; } .audio-play { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--bg); border: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s var(--ease); } .audio-play:hover { transform: scale(1.05); } .audio-meta { flex: 1; min-width: 0; } .audio-title { font-weight: 500; font-size: .95rem; } .audio-status { font-size: .8rem; color: var(--ink-mute); margin-top: .15rem; } .audio-controls { display: flex; align-items: center; gap: .25rem; } .prayer-controls { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; padding: .8rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); } .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--ink-soft); font-weight: 500; transition: all .2s var(--ease); } .chip:hover { border-color: var(--gold-soft); color: var(--ink); } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* Texto da oração — colunas paralelas */ .prayer-body { margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem; } .verse { padding: 1.5rem 1.25rem; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--radius); border-left: 3px solid var(--gold); transition: box-shadow .2s var(--ease); } .verse:hover { box-shadow: var(--shadow); } .verse-hebrew { font-family: var(--font-hebrew); direction: rtl; text-align: right; font-size: var(--fs-hebrew); line-height: 1.85; color: var(--ink); font-weight: 500; margin: 0 0 .85rem; } .verse-translit { font-family: var(--font-display); font-style: italic; font-size: var(--fs-translit); color: var(--accent); line-height: 1.6; margin: 0 0 .85rem; } .verse-translation { font-size: var(--fs-translation); color: var(--ink-soft); line-height: 1.7; margin: 0; } .verse-number { display: inline-block; font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: .85rem; margin-bottom: .5rem; letter-spacing: .1em; text-transform: uppercase; } /* Toggles de visibilidade do texto */ .prayer-body[data-show-hebrew="false"] .verse-hebrew { display: none; } .prayer-body[data-show-translit="false"] .verse-translit { display: none; } .prayer-body[data-show-translation="false"] .verse-translation { display: none; } /* ---------- SALMOS — busca por intenção ---------- */ .intentions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; } .psalm-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); margin-top: 1.5rem; } .psalm-cell { aspect-ratio: 1; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); cursor: pointer; transition: all .15s var(--ease); position: relative; } .psalm-cell:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); transform: scale(1.05); } .psalm-cell.featured { border-color: var(--gold); color: var(--gold); } .psalm-cell .psalm-num { font-weight: 600; font-size: 1.1rem; line-height: 1; } /* ---------- CALENDÁRIO ---------- */ .calendar-list { list-style: none; padding: 0; margin: 1.5rem 0 0; } .calendar-event { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; } .calendar-date { flex-shrink: 0; width: 64px; text-align: center; background: var(--bg-soft); border-radius: var(--radius-sm); padding: .5rem; } .calendar-date .day { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--gold); line-height: 1; } .calendar-date .month { display: block; font-size: .7rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .15em; margin-top: .3rem; } .calendar-info { flex: 1; } .calendar-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin: 0 0 .15rem; } .calendar-name-he { font-family: var(--font-hebrew); color: var(--ink-mute); font-size: .95rem; } .calendar-desc { color: var(--ink-soft); font-size: .9rem; margin-top: .4rem; } .cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; transition: all .2s var(--ease); gap: 1px; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } .cal-day:hover { transform: scale(1.05); box-shadow: var(--shadow); z-index: 2; } .cal-day:active { transform: scale(0.95); } .cal-day::after { content: ""; position: absolute; inset: 0; background: var(--gold); opacity: 0; transition: opacity .2s var(--ease); border-radius: 8px; z-index: -1; } .cal-day:hover::after { opacity: 0.08; } .cal-day.today::after { display: none; } /* ---------- MEDITAÇÃO / TIMER ---------- */ .meditation-card { text-align: center; padding: 3rem 1.5rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); } .timer-display { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 400; color: var(--ink); letter-spacing: -.02em; margin: 1rem 0; font-variant-numeric: tabular-nums; } .timer-ring { width: 220px; height: 220px; margin: 1rem auto 2rem; position: relative; } .timer-ring svg { transform: rotate(-90deg); } .timer-ring circle { fill: none; stroke-width: 4; } .timer-ring .ring-track { stroke: var(--line); } .timer-ring .ring-progress { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .3s linear; } .timer-controls { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .timer-presets { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* ---------- SHABBAT GUIDE ---------- */ .steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: steps; } .step { position: relative; padding: 1.5rem 1.5rem 1.5rem 4rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; counter-increment: steps; } .step::before { content: counter(steps); position: absolute; top: 1.4rem; left: 1.5rem; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .step-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin: 0 0 .4rem; } .step-text { color: var(--ink-soft); margin: 0; font-size: .95rem; } /* ---------- CONFIGURAÇÕES ---------- */ .settings-group { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-soft); } .settings-row:last-child { border-bottom: 0; } .settings-label { display: flex; flex-direction: column; gap: .15rem; } .settings-label .label-title { font-weight: 500; } .settings-label .label-desc { font-size: .82rem; color: var(--ink-mute); } /* Toggle switch */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s var(--ease); cursor: pointer; } .switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--bg); border-radius: 50%; transition: transform .25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .switch input:checked + .slider { background: var(--gold); } .switch input:checked + .slider::before { transform: translateX(20px); } .select-input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .8rem; outline: none; cursor: pointer; color: var(--ink); } .select-input:focus { border-color: var(--gold); } /* Calendar selects: always opaque, properly themed */ #calMonthSelect, #calYearSelect { background: var(--bg) !important; color: var(--ink) !important; border: 1.5px solid var(--border, #ddd) !important; -webkit-appearance: auto; appearance: auto; opacity: 1 !important; } [data-theme="dark"] #calMonthSelect, [data-theme="dark"] #calYearSelect { background: var(--bg) !important; color: var(--ink) !important; border-color: var(--gold, #c8a84b) !important; } /* ---------- TOAST ---------- */ .toast { position: fixed; bottom: calc(var(--bottom-h) + 1rem); left: 50%; transform: translateX(-50%) translateY(100px); background: var(--ink); color: var(--bg); padding: .8rem 1.4rem; border-radius: 999px; font-size: .9rem; font-weight: 500; z-index: 300; opacity: 0; pointer-events: none; transition: transform .35s var(--ease-out), opacity .25s var(--ease); box-shadow: var(--shadow-lg); white-space: nowrap; max-width: 90vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- ESTADO VAZIO ---------- */ .empty { text-align: center; padding: 3rem 1rem; color: var(--ink-mute); } .empty-icon { font-size: 3rem; color: var(--gold-soft); display: block; margin-bottom: 1rem; } .empty-text { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; } /* ---------- ABOUT ---------- */ .about-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; } .about-card .hebrew-mark { font-family: var(--font-hebrew); font-size: 3rem; color: var(--gold); display: block; margin-bottom: .5rem; } .about-card p { color: var(--ink-soft); max-width: 50ch; margin: 1rem auto; } /* ---------- HISTÓRICO ---------- */ .history-item { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.2rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; } .history-time { font-size: .8rem; color: var(--ink-mute); } /* ---------- DESKTOP — sidebar fixa ---------- */ @media (min-width: 960px) { body { padding-bottom: 0; } .menu-toggle { display: none; } .bottom-nav { display: none; } .sidebar { transform: translateX(0); position: fixed; box-shadow: none; } .sidebar + .overlay { display: none; } .app-header { padding-left: 300px; } .app-main { padding-left: 300px; max-width: 1180px; } .search-bar { left: 280px; } .toast { bottom: 1.5rem; } } @media (max-width: 480px) { .daily-card { padding: 1.5rem 1.25rem; } .verse { padding: 1.2rem 1rem; } .category-grid { grid-template-columns: repeat(2, 1fr); } .psalm-grid { grid-template-columns: repeat(5, 1fr); } } /* ---------- ACESSIBILIDADE ---------- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- DATA HEBRAICA (home + calendário) ---------- */ .hebrew-date { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 1rem; padding: .5rem .9rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; } .hebrew-date-he { font-family: var(--font-hebrew); font-size: 1.15rem; color: var(--gold); font-weight: 500; direction: rtl; } .hebrew-date-translit { color: var(--ink-soft); font-style: italic; font-size: .9rem; } /* ---------- PRÓXIMO FERIADO (home) ---------- */ .upcoming-holiday { background: linear-gradient(135deg, var(--bg-elev), var(--bg-soft)); border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 0 0 2rem; position: relative; box-shadow: var(--shadow); } .upcoming-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .5rem; } .upcoming-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .upcoming-text { flex: 1; min-width: 0; } .upcoming-name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; margin: 0; color: var(--ink); } .upcoming-name-he { font-family: var(--font-hebrew); font-size: 1.1rem; color: var(--gold); margin-top: .15rem; direction: rtl; } .upcoming-date { font-size: .85rem; color: var(--ink-mute); margin-top: .35rem; } .upcoming-btn { flex-shrink: 0; } /* ---------- CONTAGEM DE RESULTADOS (filtros) ---------- */ .results-count { margin: -0.3rem 0 1rem; font-size: .85rem; color: var(--ink-mute); font-style: italic; } /* ---------- TOGGLE DE IDIOMA DO ÁUDIO ---------- */ .audio-lang-toggle { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .65rem; width: auto; height: auto; font-size: .75rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); background: transparent; transition: all .2s var(--ease); } .audio-lang-toggle:hover { border-color: var(--gold-soft); color: var(--ink); } .audio-lang-toggle .audio-lang-text { font-family: var(--font-hebrew); font-size: .85rem; line-height: 1; } .audio-lang-toggle[data-lang="portuguese"] .audio-lang-text { font-family: var(--font-body); font-size: .75rem; } /* ---------- ESTADO PLAYING DO PLAY BUTTON ---------- */ .audio-play.playing { background: var(--gold); color: var(--bg); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 144, 64, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(192, 144, 64, 0); } } [data-theme="dark"] .audio-play.playing { box-shadow: 0 0 0 0 rgba(224, 188, 115, 0.4); } /* ---------- AUDIO PLAYER — pequenos ajustes p/ comportar o lang toggle ---------- */ .audio-tag-lang { /* span dentro de .audio-title, se usado */ font-size: .8rem; color: var(--ink-mute); font-weight: 400; margin-left: .3rem; } /* ---------- RESPONSIVIDADE — mobile estreito ---------- */ @media (max-width: 480px) { .audio-player { flex-wrap: wrap; gap: .8rem; padding: .9rem 1rem; } .audio-meta { flex-basis: 100%; order: 3; } .audio-controls { order: 2; } .upcoming-row { flex-direction: column; align-items: flex-start; } .upcoming-btn { align-self: stretch; text-align: center; } .prayer-controls { padding: .6rem; } .chip { padding: .4rem .8rem; font-size: .8rem; } .hebrew-date { font-size: .9rem; padding: .4rem .75rem; } .hebrew-date-he { font-size: 1.05rem; } } /* ---------- DARK MODE — refinamentos pontuais de contraste ---------- */ [data-theme="dark"] .verse { background: var(--bg-elev); border-color: var(--line); } [data-theme="dark"] .verse-translation { color: var(--ink-soft); } [data-theme="dark"] .audio-status { color: var(--ink-soft); } [data-theme="dark"] .results-count { color: var(--ink-soft); } [data-theme="dark"] .calendar-desc { color: var(--ink-soft); } [data-theme="dark"] .page-sub { color: var(--ink-soft); } [data-theme="dark"] .audio-play { background: var(--gold); color: #1a1410; } [data-theme="dark"] .btn-primary { background: var(--gold); color: #1a1410; } [data-theme="dark"] .chip.active { background: var(--gold); color: #1a1410; border-color: var(--gold); } [data-theme="dark"] .switch input:checked + .slider { background: var(--gold); } [data-theme="dark"] .nav-item.active { color: var(--gold); } [data-theme="dark"] .upcoming-holiday { background: linear-gradient(135deg, var(--bg-elev), #2a2014); border-color: var(--gold); } [data-theme="dark"] .toast { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); } /* ========================================================== */ /* PLANO DIÁRIO (home) */ /* ========================================================== */ .daily-plan-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.3rem; margin: 0 0 2rem; box-shadow: var(--shadow); } .daily-plan-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; } .daily-plan-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .daily-plan-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin: .25rem 0 0; font-style: italic; } .progress-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; } .progress-ring svg { display: block; } .progress-ring .ring-track { stroke: var(--line); } .progress-ring .ring-bar { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .4s var(--ease); } .progress-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--ink); } .plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .plan-item { display: flex; align-items: stretch; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: all .25s var(--ease); } .plan-item:hover { border-color: var(--gold-soft); } .plan-item.checked { background: linear-gradient(90deg, rgba(160,116,52,0.08), transparent); border-color: var(--gold-soft); } .plan-check { flex-shrink: 0; width: 56px; background: transparent; border: 0; border-right: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--ease); } .plan-check:hover { background: var(--bg-soft); } .plan-check-box { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: transparent; transition: all .2s var(--ease); } .plan-item.checked .plan-check-box, .plan-check.checked .plan-check-box { background: var(--gold); border-color: var(--gold); color: var(--bg); } .plan-info { flex: 1; min-width: 0; background: transparent; border: 0; text-align: left; padding: .75rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; } .plan-info:hover { background: var(--bg-soft); } .plan-name { font-weight: 500; font-size: 1rem; color: var(--ink); } .plan-item.checked .plan-name { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; } .plan-note { font-size: .8rem; color: var(--ink-mute); } /* Streak (sequência de dias) */ .streak-pill { display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .35rem .85rem; background: linear-gradient(90deg, rgba(160,116,52,0.12), rgba(160,116,52,0.04)); border: 1px solid var(--gold-soft); border-radius: 999px; font-size: .85rem; color: var(--ink); } .streak-flame { font-size: 1.1rem; } /* ========================================================== */ /* CHECK DIÁRIO (na view de detalhe da oração) */ /* ========================================================== */ .prayer-status { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; } .prayer-check-card { flex: 1; min-width: 200px; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; background: var(--bg-elev); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: all .25s var(--ease); font: inherit; color: var(--ink); text-align: left; } .prayer-check-card:hover { border-color: var(--gold-soft); background: var(--bg-soft); } .prayer-check-card.checked { border-color: var(--gold); background: linear-gradient(135deg, rgba(160,116,52,0.12), rgba(160,116,52,0.02)); } .prayer-check-box { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: transparent; flex-shrink: 0; transition: all .2s var(--ease); } .prayer-check-card.checked .prayer-check-box { background: var(--gold); border-color: var(--gold); color: var(--bg); } .prayer-check-label { font-weight: 500; font-size: .95rem; } .prayer-progress-tag { display: flex; flex-direction: column; align-items: center; padding: .6rem 1.2rem; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--radius); min-width: 90px; } .prayer-progress-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--gold); line-height: 1; } .prayer-progress-label { font-size: .7rem; color: var(--ink-mute); letter-spacing: .05em; margin-top: .2rem; text-transform: uppercase; } /* ========================================================== */ /* BOTÃO VOLTAR (consistente em telas de detalhe) */ /* ========================================================== */ .back-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; margin-bottom: 1rem; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--ink-soft); cursor: pointer; transition: all .2s var(--ease); } .back-btn:hover { border-color: var(--gold-soft); color: var(--ink); background: var(--bg-soft); } /* ========================================================== */ /* VELOCIDADE DO ÁUDIO */ /* ========================================================== */ .audio-speed { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: -.5rem 0 1.5rem; padding: .5rem .8rem; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--radius); font-size: .8rem; } .audio-speed-label { color: var(--ink-mute); margin-right: .3rem; } .chip-mini { padding: .25rem .65rem; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; color: var(--ink-soft); font-weight: 500; transition: all .2s var(--ease); cursor: pointer; } .chip-mini:hover { border-color: var(--gold-soft); color: var(--ink); } .chip-mini.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } [data-theme="dark"] .chip-mini.active { background: var(--gold); color: #1a1410; border-color: var(--gold); } /* ========================================================== */ /* BÚSSOLA */ /* ========================================================== */ .compass-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; margin: 0 0 2rem; text-align: center; } .compass-status { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.5rem; font-style: italic; min-height: 1.4em; } .compass-stage { position: relative; width: 280px; height: 280px; max-width: 80vw; max-height: 80vw; margin: 0 auto 1.5rem; } .compass-dial { position: absolute; inset: 0; border: 2px solid var(--line); border-radius: 50%; background: radial-gradient(circle, var(--bg) 60%, var(--bg-soft) 100%); transition: transform .25s var(--ease-out, ease-out); } .dial-mark { position: absolute; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--gold); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .dial-n { top: 8px; left: 50%; transform: translateX(-50%); color: var(--accent); font-size: 1.4rem; } .dial-e { right: 8px; top: 50%; transform: translateY(-50%); } .dial-s { bottom: 8px; left: 50%; transform: translateX(-50%); } .dial-w { left: 8px; top: 50%; transform: translateY(-50%); } .compass-arrow { position: absolute; top: 50%; left: 50%; transform-origin: center bottom; display: flex; align-items: flex-end; justify-content: center; color: var(--gold); transition: transform .3s var(--ease-out, ease-out); pointer-events: none; margin-left: -30px; margin-top: -120px; width: 60px; height: 120px; } .compass-arrow svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } .compass-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg); border: 2px solid var(--gold); border-radius: 50%; width: 70px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow); z-index: 2; } .compass-hebrew { font-family: var(--font-hebrew); font-size: 1.15rem; font-weight: 700; color: var(--gold); line-height: 1; } .compass-center-label { font-size: .7rem; color: var(--ink-mute); margin-top: .2rem; } .compass-readings { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0 1.5rem; } .compass-reading { display: flex; flex-direction: column; padding: .8rem 1.2rem; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); min-width: 110px; } .reading-label { font-size: .7rem; color: var(--ink-mute); letter-spacing: .08em; text-transform: uppercase; } .reading-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-top: .15rem; } .compass-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; } .compass-manual { margin-top: 1rem; padding: 1rem; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); } .manual-help { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .8rem; } .manual-cities { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; } .compass-note { font-size: .8rem; color: var(--ink-mute); font-style: italic; margin-top: 1rem; line-height: 1.5; } /* ========================================================== */ /* RESPONSIVIDADE — mobile estreito */ /* ========================================================== */ @media (max-width: 480px) { .compass-stage { width: 240px; height: 240px; } .compass-arrow { width: 48px; height: 100px; margin-left: -24px; margin-top: -100px; } .compass-arrow svg { width: 48px; height: 100px; } .compass-readings { gap: .5rem; } .compass-reading { padding: .6rem .9rem; min-width: 90px; } .reading-value { font-size: 1rem; } .prayer-status { flex-direction: column; } .prayer-progress-tag { flex-direction: row; gap: .6rem; min-width: 0; } .prayer-progress-num { font-size: 1.2rem; } .daily-plan-header { flex-direction: column; align-items: flex-start; } .daily-plan-progress { align-self: flex-end; } } /* Refinamentos dark mode dos novos componentes */ [data-theme="dark"] .plan-item { background: var(--bg-soft); } [data-theme="dark"] .plan-item.checked { background: linear-gradient(90deg, rgba(224,188,115,0.10), transparent); } [data-theme="dark"] .prayer-check-card.checked { background: linear-gradient(135deg, rgba(224,188,115,0.14), rgba(224,188,115,0.04)); } [data-theme="dark"] .compass-dial { background: radial-gradient(circle, var(--bg-soft) 60%, var(--bg) 100%); } [data-theme="dark"] .compass-center { background: var(--bg-soft); } @media print { .app-header, .sidebar, .bottom-nav, .overlay, .audio-player, .prayer-controls, .prayer-fav { display: none !important; } body { padding: 0; background: white; } .verse { page-break-inside: avoid; box-shadow: none; } } /* Timer de meditação — botões de preset */ [data-minutes].active { background: var(--gold, #c8a84b) !important; color: #fff !important; border-color: var(--gold, #c8a84b) !important; }