/* ============================================================================ Verse — a Catholic daily-readings app for the family. Design: warm, reverent, editorial. Illuminated manuscript meets modern book typography. The accent color follows the liturgical season, as vestments do. ============================================================================ */ :root { /* editorial base — warm parchment + ink, constant across the year */ --paper: #f7f2e7; --paper-2: #fffdf8; --ink: #26221c; --ink-soft: #5a5348; --ink-faint: #8a8172; --rule: #e2d8c4; /* accent is set per season on ; green is the default */ --accent: #4e5b4b; --accent-deep:#3a4539; --accent-tint:#eef0e9; --gold: #b08d3f; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --measure: 34rem; --pad: clamp(1.25rem, 5vw, 2.75rem); } /* Liturgical color language ------------------------------------------------- */ body[data-color="green"] { --accent:#4e5b4b; --accent-deep:#354031; --accent-tint:#eceee7; } body[data-color="violet"] { --accent:#5c4a72; --accent-deep:#42345a; --accent-tint:#efeaf3; } body[data-color="white"] { --accent:#a5833a; --accent-deep:#7d6224; --accent-tint:#f6efdd; } /* white/gold */ body[data-color="red"] { --accent:#8f2f28; --accent-deep:#6d211c; --accent-tint:#f4e5e1; } /* Dark theme — a warm charcoal, not a cold black; candlelit rather than clinical. Applied by adding .dark to (theme = dark, or auto + system dark). Accents brighten and tints darken so the liturgical color still reads on a dark ground. */ body.dark { --paper:#161310; --paper-2:#211d17; --ink:#ece4d3; --ink-soft:#b6ab96; --ink-faint:#867c6a; --rule:#332d24; } body.dark[data-color="green"] { --accent:#8ba482; --accent-deep:#b9cbae; --accent-tint:#232a20; } body.dark[data-color="violet"] { --accent:#a892c4; --accent-deep:#c9b8e0; --accent-tint:#282132; } body.dark[data-color="white"] { --accent:#cba45f; --accent-deep:#e0c88a; --accent-tint:#2e2716; --gold:#d8b45f; } body.dark[data-color="red"] { --accent:#cf6a60; --accent-deep:#e39a90; --accent-tint:#2f1f1c; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* The `hidden` attribute must win over any author `display` (e.g. .picker's flex), or hidden sections stay visible. This is the toggle the app relies on. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.5; min-height: 100vh; min-height: 100dvh; transition: --accent 300ms; } /* faint paper texture: two soft radial washes, no image needed (offline-safe) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), radial-gradient(100% 60% at 50% 110%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%); } .wrap { max-width: 40rem; margin: 0 auto; padding: 0 var(--pad) 5rem; } /* ---- Masthead / the day ---------------------------------------------------- */ .masthead { text-align: center; padding: clamp(1.5rem, 7vw, 3rem) 0 1.25rem; } .date { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } .daytitle { font-family: var(--serif); font-weight: 600; color: var(--accent-deep); font-size: clamp(1.7rem, 6.5vw, 2.5rem); line-height: 1.12; margin: .5rem 0 .55rem; letter-spacing: -.01em; } .date-btn { background:none; border:0; cursor:pointer; font:inherit; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:.2rem .4rem; border-radius:8px; } .date-btn:active { background:var(--accent-tint); } .date-pick { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } @keyframes slideL { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } } @keyframes slideR { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } } .slide-l { animation:slideL .26s ease; } .slide-r { animation:slideR .26s ease; } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { animation:fadeIn .2s ease; } /* first-run hints */ .hint-scrim { position:fixed; inset:0; background:rgba(30,26,20,.55); backdrop-filter:blur(3px); z-index:60; display:flex; align-items:center; justify-content:center; padding:var(--pad); } .hint-card { background:var(--paper-2); border-radius:20px; padding:1.75rem; max-width:22rem; box-shadow:0 20px 60px -20px #000; } .hint-card h3 { font-family:var(--serif); color:var(--accent-deep); font-size:1.35rem; margin-bottom:1rem; } .hint-list { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-bottom:1.5rem; } .hint-list li { display:flex; gap:.7rem; font-size:.98rem; line-height:1.4; color:var(--ink); align-items:flex-start; } .hint-ico { flex:0 0 1.5rem; height:1.5rem; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); display:grid; place-items:center; font-size:.85rem; font-weight:700; margin-top:.05rem; } .hint-card > .btn { width:100%; } .hint-card .btn-row .btn { flex:1; } .whatsnew-pin { font-size:.86rem; line-height:1.45; color:var(--ink-soft); background:var(--accent-tint); border-radius:12px; padding:.8rem 1rem; } .daynav { display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.35rem 0 .1rem; } .daynav-arrow { width:2rem; height:2rem; border-radius:50%; border:1px solid var(--rule); background:var(--paper-2); color:var(--accent-deep); font-size:1.1rem; line-height:1; cursor:pointer; display:grid; place-items:center; } .daynav-arrow:active { background:var(--accent-tint); } .today-chip { font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--accent); background:var(--accent); color:#fff; padding:.3rem .8rem; border-radius:999px; cursor:pointer; } .today-chip[disabled] { background:transparent; color:var(--ink-faint); border-color:var(--rule); cursor:default; } .season-band { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .season-dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .cycle { color: var(--ink-faint); } .streak { margin-top:.7rem; font-size:.76rem; letter-spacing:.06em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.35rem; } .streak .flame { filter: saturate(1.1); } .fasting-notice { margin: 1rem auto 0; max-width: 24rem; padding: .7rem 1rem; border-radius: 12px; text-align: left; } .fasting-notice.obligatory { background: var(--accent-tint); border: 1px solid var(--accent); } .fasting-notice.customary { background: transparent; border: 1px dashed var(--rule); } .fasting-notice .fast-label { display:block; font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.15rem; } .fasting-notice .fast-note { display:block; font-size:.86rem; color:var(--ink-soft); line-height:1.4; } .rule { height: 1px; background: var(--rule); border: 0; margin: 1.5rem auto; max-width: 8rem; } .rule-ornate { text-align: center; color: var(--accent); font-size: 1.1rem; margin: 1.4rem 0; letter-spacing:.4em;} /* ---- Verse mode (Haylie's front door) ------------------------------------- */ .verse-hero { text-align: center; padding: 1rem 0 1.5rem; } .verse-hero .verse-text { font-family: var(--serif); font-size: clamp(1.5rem, 5.6vw, 2.15rem); line-height: 1.42; color: var(--ink); font-weight: 500; letter-spacing: -.005em; text-wrap: balance; } .verse-hero .verse-ref { margin-top: 1.25rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; } .verse-hero .verse-text[role="button"] { cursor: pointer; } .context-hint { display:inline-block; margin-top:1rem; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--accent); letter-spacing:.02em; } .context-panel { text-align:left; } .context-panel .reading-body { font-family:var(--serif); font-size:1.08rem; line-height:1.72; color:var(--ink-soft); } .v-hi { background: var(--accent-tint); color: var(--ink); box-shadow: 0 0 0 .2em var(--accent-tint); border-radius:2px; } /* ---- Readings mode (Lauren's front door) ---------------------------------- */ .reading { margin: 2rem 0; } .reading-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; } .reading-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; } .reading-cite { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .95rem; } .reading-body { font-family: var(--serif); font-size: 1.14rem; line-height: 1.72; color: var(--ink); max-width: var(--measure); } .reading-body .v { } .reading-body .vn { font-family: var(--sans); font-size: .62em; color: var(--ink-faint); vertical-align: .35em; margin: 0 .25em 0 .1em; font-weight: 600; } .reading-body p { margin: 0 0 .35rem; } .psalm .reading-body { font-style: italic; color: var(--accent-deep); } /* ---- Listen (read-aloud) --------------------------------------------------- */ .listen-bar { display:flex; justify-content:center; margin: .5rem 0 1.5rem; } .btn.listen { background:transparent; color:var(--accent-deep); border:1px solid var(--accent); } .btn.listen.on { background:var(--accent); color:#fff; } .btn.listen .ico { font-size:.8em; margin-right:.15em; } /* ---- Read-along (word highlight synced to the voice) ----------------------- */ .read-along { font-family:var(--serif); font-size:1.3rem; line-height:1.95; color:var(--ink-faint); max-width:var(--measure); padding:1rem 0; } .ra-word { transition:color .15s, background .15s; border-radius:4px; padding:0 .05em; } .ra-word.on { color:var(--ink); background:var(--accent-tint); box-shadow:0 0 0 .15em var(--accent-tint); font-weight:500; } .approx { font-size: .72rem; color: var(--ink-faint); font-style: italic; margin-top:.4rem;} /* ---- Buttons / chrome ------------------------------------------------------ */ .btn { font-family: var(--sans); font-size: .95rem; font-weight: 600; cursor: pointer; border: 1px solid var(--accent); color: #fff; background: var(--accent); padding: .7rem 1.35rem; border-radius: 999px; transition: transform .1s, background .2s; } .btn:active { transform: scale(.97); } .btn.ghost { background: transparent; color: var(--accent-deep); } .btn-row { display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; } .topbar { display:flex; justify-content:space-between; align-items:center; padding: 1rem var(--pad) .5rem; } .brand { font-family: var(--serif); font-weight:600; color: var(--accent-deep); font-size:1.7rem; letter-spacing:.01em; } /* tab row: its own line under the title, full width, scrollable with a right-edge fade cue */ .tabs-wrap { position:relative; padding: 0 var(--pad) .5rem; border-bottom:1px solid var(--rule); } .tabs-wrap::after { content:""; position:absolute; right:0; top:0; bottom:.5rem; width:2.25rem; background:linear-gradient(to left, var(--paper) 30%, transparent); pointer-events:none; opacity:0; transition:opacity .2s; } .tabs-wrap.more::after { opacity:1; } .tabs-wrap.more { } .icon-btn { background:none; border:0; color: var(--ink-soft); font-size:1.35rem; cursor:pointer; padding:.25rem .4rem; line-height:1; border-radius:8px;} .icon-btn:active { background: var(--accent-tint); } /* ---- Profile picker (first run) ------------------------------------------- */ .picker { min-height: 100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding: var(--pad); gap:.5rem;} .picker h1 { font-family:var(--serif); font-weight:600; font-size: clamp(2rem,9vw,3rem); color:var(--accent-deep);} .picker .sub { color: var(--ink-soft); margin-bottom: 2rem; max-width: 22rem; } .gate-form { display:flex; gap:.5rem; width:100%; max-width:22rem; } .gate-form .saint-search { margin-top:0; flex:1; text-align:center; } .gate-error { color:var(--accent); font-size:.85rem; margin-top:.9rem; } .people { display:grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .8rem; width:100%; max-width: 26rem;} .person { font-family: var(--sans); background: var(--paper-2); border:1px solid var(--rule); border-radius: 16px; padding: 1.15rem .75rem; cursor:pointer; transition: transform .12s, border-color .2s, box-shadow .2s; display:flex; flex-direction:column; align-items:center; gap:.55rem; } .person:active { transform: scale(.96); } .person:hover { border-color: var(--accent); box-shadow: 0 6px 22px -12px var(--accent); } .person .ring { width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:1.35rem; color:#fff; background: var(--accent); } .person .pname { font-weight:600; font-size:.95rem; color: var(--ink); } .person.other { border-style:dashed; } .person.other .ring { background:transparent; color:var(--accent); border:1.5px solid var(--accent); font-weight:400; } .name-entry { grid-column:1 / -1; display:flex; flex-direction:column; } .name-entry .saint-search { margin-top:0; text-align:center; } /* ---- Sheet (settings) ------------------------------------------------------ */ .sheet-scrim { position:fixed; inset:0; background:rgba(30,26,20,.4); backdrop-filter: blur(2px); display:none; z-index:20; } .sheet-scrim.open { display:block; } .sheet { position:fixed; left:0; right:0; bottom:0; z-index:21; background: var(--paper-2); border-radius: 20px 20px 0 0; padding: 1.5rem var(--pad) 2.5rem; box-shadow: 0 -10px 40px -20px #000; transform: translateY(100%); max-width:40rem; margin:0 auto; /* visibility:hidden when closed so iOS overscroll "bounce" can't reveal it while reading; the visibility flip is delayed until the slide-down finishes so the close still animates. */ visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; } .sheet.open { transform: translateY(0); visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s; } .sheet h2 { font-family:var(--serif); color:var(--accent-deep); margin-bottom:1rem; font-size:1.3rem;} .setting-row { display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--rule);} .setting-row:last-child { border-bottom:0; } .seg { display:inline-flex; border:1px solid var(--accent); border-radius:999px; overflow:hidden; } .seg button { font-family:var(--sans); border:0; background:transparent; color:var(--accent-deep); padding:.45rem .9rem; font-size:.85rem; cursor:pointer;} .seg button.on { background: var(--accent); color:#fff; } .home-conn { margin-top:1rem; padding-top:.5rem; } .home-conn summary { font-family:var(--sans); font-size:.9rem; color:var(--accent-deep); font-weight:600; cursor:pointer; padding:.5rem 0; } .conn-label { display:block; font-size:.8rem; color:var(--ink-soft); margin:.6rem 0; } .conn-label input { margin-top:.25rem; } .conn-status { display:block; margin-top:.5rem; font-size:.82rem; } /* ---- Family mode ----------------------------------------------------------- */ .fam-lead { text-align:center; color:var(--ink-soft); font-style:italic; margin:.5rem 0 2rem; } .fam-step { display:flex; gap:1rem; margin:1.5rem 0; align-items:flex-start; } .fam-num { flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--serif); font-weight:600; display:grid; place-items:center; margin-top:.1rem; } .fam-title { font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.35rem; } .fam-body { font-family:var(--serif); font-size:1.1rem; line-height:1.6; color:var(--ink); } .fam-body em { color:var(--accent-deep); } /* ---- Saints ---------------------------------------------------------------- */ .saint-line { display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; background:none; border:0; cursor:pointer; font-family:var(--serif); font-size:.95rem; color:var(--accent-deep); font-style:italic; } .saint-line .saint-cross { color:var(--accent); font-style:normal; } .saint-line .saint-star { color:var(--gold); font-size:.8em; } .saint-card { background:var(--paper-2); border:1px solid var(--rule); border-radius:16px; padding:1.1rem 1.25rem; margin-bottom:1rem; } .saint-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.35rem; } .saint-name { font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--accent-deep); } .saint-rank { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; white-space:nowrap; } .saint-dates { font-size:.82rem; color:var(--ink-faint); margin-bottom:.5rem; } .saint-bio { font-family:var(--serif); font-size:1.05rem; line-height:1.6; color:var(--ink); } .saint-teen { display:inline-block; margin-top:.6rem; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); } .teen-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; } .teen-chip { font-family:var(--sans); font-size:.85rem; font-weight:600; border:1px solid var(--accent); background:transparent; color:var(--accent-deep); padding:.4rem .8rem; border-radius:999px; cursor:pointer; } .teen-chip.on { background:var(--accent); color:#fff; } .saint-search { width:100%; margin-top:.75rem; padding:.7rem 1rem; border:1px solid var(--rule); border-radius:12px; font-family:var(--sans); font-size:1rem; background:var(--paper-2); color:var(--ink); } .saint-search:focus { outline:none; border-color:var(--accent); } .feast-list { display:flex; flex-direction:column; } .feast-item { display:flex; gap:1rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--rule); } .feast-item:last-child { border-bottom:0; } .feast-when { flex:0 0 5.5rem; } .feast-date { display:block; font-family:var(--serif); font-weight:600; color:var(--accent-deep); font-size:1.05rem; } .feast-away { display:block; font-size:.72rem; color:var(--ink-faint); } .feast-name { font-family:var(--serif); font-size:1.05rem; color:var(--ink); line-height:1.3; } /* ---- Journey map ----------------------------------------------------------- */ .atlas-select { margin-bottom:.6rem; } .map-select { display:flex; overflow-x:auto; scrollbar-width:none; margin-bottom:.5rem; } .map-select::-webkit-scrollbar { display:none; } .map-select button { white-space:nowrap; font-size:.8rem; } .map-blurb { font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:.95rem; margin-bottom:1rem; } .map-wrap { position:relative; background:var(--paper-2); border:1px solid var(--rule); border-radius:16px; padding:.5rem; overflow:hidden; box-shadow:inset 0 0 40px -10px color-mix(in srgb, var(--gold) 25%, transparent); } .map-expand { position:absolute; right:.6rem; top:.6rem; width:2rem; height:2rem; border-radius:8px; border:1px solid var(--rule); background:var(--paper); color:var(--accent-deep); font-size:1rem; cursor:pointer; display:grid; place-items:center; opacity:.85; } .map-expand:active { background:var(--accent-tint); } .journey-svg { display:block; width:100%; height:auto; max-height:62vh; touch-action:none; } .journey-svg .ctx circle { fill:var(--ink-faint); } .journey-svg .ctx text { fill:var(--ink-faint); font-size:2.3px; font-family:var(--sans); } .journey-svg .water-lbl { fill:color-mix(in srgb, var(--accent) 55%, var(--ink-faint)); font-size:2.4px; font-style:italic; font-family:var(--serif); } @keyframes march { to { stroke-dashoffset:-40; } } @keyframes dotpulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } } @keyframes ptIn { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } } .journey-svg .sea { fill:color-mix(in srgb, var(--accent) 14%, var(--paper-2)); } .journey-svg .river { stroke:color-mix(in srgb, var(--accent) 30%, transparent); stroke-width:.8; } .journey-svg .region { fill:var(--ink-faint); font-size:2.6px; letter-spacing:.3px; font-family:var(--sans); font-weight:700; } .journey-svg .sea-label { fill:var(--ink-faint); font-size:2.8px; font-style:italic; font-family:var(--serif); } .journey-svg .journey-path { stroke:var(--accent); stroke-linecap:round; opacity:.8; animation:march 3s linear infinite; } .journey-svg .map-point { cursor:pointer; animation:ptIn .45s ease backwards; transform-box:fill-box; transform-origin:center; } /* Solid, high-contrast markers with a white ring so they read on ANY map region (a cream fill vanished on light parchment — the sea/desert stops disappeared). */ .journey-svg .point-dot { fill:var(--accent); stroke:#fff; transform-box:fill-box; transform-origin:center; paint-order:stroke; } .journey-svg .map-point.on .point-dot { fill:var(--gold); animation:dotpulse 1.4s ease-in-out infinite; } .journey-svg .point-num { fill:#fff; font-weight:700; text-anchor:middle; font-family:var(--sans); pointer-events:none; } /* On the photographic base, give markers a soft halo so they read over any terrain. */ .journey-svg image + .journey-path { filter:drop-shadow(0 0 2px rgba(0,0,0,.4)); } .journey-svg image ~ .map-point .point-dot { filter:drop-shadow(0 0 1px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.4)); } @media (prefers-reduced-motion:reduce) { .journey-svg .journey-path, .journey-svg .map-point, .journey-svg .map-point.on .point-dot { animation:none; } } .map-info { margin-top:1rem; } .map-info.pop, .map-full-info.pop { animation:popIn .4s ease; } @keyframes popIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .stop-place { font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); } .stop-label { font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--accent-deep); margin:.15rem 0 .35rem; } .stop-note { color:var(--ink-soft); font-size:.98rem; line-height:1.5; margin-bottom:.6rem; } /* ---- Full-screen map (pan + zoom) ------------------------------------------ */ .map-full { position:fixed; inset:0; z-index:60; background:var(--paper); display:flex; flex-direction:column; animation:popIn .25s ease; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } .map-full-top { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem .4rem; border-bottom:1px solid var(--rule); } .map-full-title { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--accent-deep); } .map-full-canvas { flex:1; min-height:0; overflow:hidden; background:var(--paper-2); box-shadow:inset 0 0 60px -20px color-mix(in srgb, var(--gold) 30%, transparent); } .map-full-canvas .journey-svg { width:100%; height:100%; max-height:none; } .map-full-info { padding:.9rem 1.1rem; max-height:38vh; overflow:auto; border-top:1px solid var(--rule); } .map-hint { text-align:center; font-size:.74rem; color:var(--ink-faint); font-style:italic; padding:.35rem 1rem .5rem; } /* ---- Day-rhythm card (Morning Offering / Night Prayer on Today) ------------- */ .rhythm-card { border:1px solid var(--rule); border-radius:16px; padding:1rem 1.1rem 1.05rem; margin:0 0 1.4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 70%, transparent), transparent 90%); box-shadow:0 1px 0 color-mix(in srgb, var(--gold) 22%, transparent); animation:popIn .4s ease; } .rhythm-card.pm { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--paper-2)), transparent 95%); } .rhythm-eyebrow { font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } .rhythm-title { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--accent-deep); margin:.2rem 0 .25rem; display:flex; align-items:center; gap:.45rem; } .rhythm-ico { font-size:1.1rem; } .rhythm-line { color:var(--ink-soft); font-size:.98rem; line-height:1.5; margin-bottom:.85rem; } .rhythm-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .rhythm-alt { background:none; border:0; color:var(--accent); font-family:var(--sans); font-size:.86rem; font-weight:600; cursor:pointer; padding:.3rem 0; } .rhythm-alt:active { opacity:.6; } /* ---- Family prayer list ---------------------------------------------------- */ .add-prayer { display:flex; gap:.5rem; margin-bottom:1rem; } .add-prayer .saint-search { margin-top:0; flex:1; } .intention { padding:.85rem 0; border-bottom:1px solid var(--rule); } .intention:last-child { border-bottom:0; } .intention-text { font-family:var(--serif); font-size:1.08rem; color:var(--ink); line-height:1.4; } .intention-meta { display:flex; justify-content:space-between; align-items:center; margin-top:.4rem; font-size:.8rem; color:var(--ink-faint); } .pray-btn { font-family:var(--sans); font-size:.78rem; font-weight:600; border:1px solid var(--rule); background:transparent; color:var(--accent-deep); padding:.3rem .7rem; border-radius:999px; cursor:pointer; } .pray-btn:active { background:var(--accent-tint); } /* ---- Journal (private, on-device) ------------------------------------------ */ .journal-prompt { font-family:var(--serif); font-style:italic; color:var(--accent-deep); font-size:.95rem; margin:.6rem 0; } .journal-text { width:100%; min-height:9rem; padding:.85rem 1rem; border:1px solid var(--rule); border-radius:12px; font-family:var(--serif); font-size:1.08rem; line-height:1.6; color:var(--ink); background:var(--paper); resize:vertical; } .journal-text.past { min-height:6rem; margin-top:.5rem; } .journal-text:focus { outline:none; border-color:var(--accent); } .journal-status { min-height:1rem; font-size:.78rem; margin-top:.4rem; text-align:right; } .journal-entry summary { align-items:baseline; } .entry-peek { color:var(--ink-faint); font-family:var(--serif); font-style:italic; font-weight:400; } .tabs { display:flex; gap:.15rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; } .tabs::-webkit-scrollbar { display:none; } .tab { padding:.35rem .6rem; white-space:nowrap; } /* ---- Bible reader + search ------------------------------------------------- */ .bible-search { margin-bottom:1.25rem; } .bible-search .saint-search { margin-top:0; } .book-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(6.5rem, 1fr)); gap:.5rem; } .book-chip { font-family:var(--sans); font-size:.82rem; font-weight:600; border:1px solid var(--rule); background:var(--paper-2); color:var(--ink); padding:.55rem .4rem; border-radius:10px; cursor:pointer; text-align:center; } .book-chip:active { background:var(--accent-tint); } .bible-back { background:none; border:0; color:var(--accent-deep); font-family:var(--sans); font-weight:600; font-size:.9rem; cursor:pointer; padding:.3rem 0; margin-bottom:.5rem; } .bible-booktitle { font-family:var(--serif); color:var(--accent-deep); font-size:1.6rem; margin-bottom:.75rem; } .chapter-title { font-family:var(--serif); font-style:italic; color:var(--ink-soft); margin-bottom:1rem; } .chapter-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(3rem, 1fr)); gap:.45rem; } .chapter-chip { font-family:var(--serif); font-size:1.05rem; border:1px solid var(--rule); background:var(--paper-2); color:var(--accent-deep); padding:.6rem 0; border-radius:10px; cursor:pointer; } .chapter-chip:active { background:var(--accent-tint); } .bible-chapter { max-width:var(--measure); } .chapter-nav { display:flex; justify-content:space-between; margin:2rem 0 1rem; } .search-hit { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule); padding:.85rem 0; cursor:pointer; } .hit-ref { display:block; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.2rem; } .hit-text { display:block; font-family:var(--serif); font-size:1.02rem; color:var(--ink); line-height:1.5; } .hit-text mark, .bible-chapter mark { background:var(--accent-tint); color:var(--ink); } .tap-hint { font-size:.78rem; color:var(--ink-faint); font-style:italic; margin-bottom:.75rem; } .vtap { cursor:pointer; border-radius:3px; } .vtap.faved { background:color-mix(in srgb, var(--gold) 16%, transparent); box-shadow:0 0 0 .1em color-mix(in srgb, var(--gold) 16%, transparent); } .vtap.faved .vn::after { content:"★"; color:var(--gold); font-size:1.1em; margin-left:.1em; } .fav-list { display:flex; flex-direction:column; } .fav-item { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule); padding:.8rem 0; cursor:pointer; } .fav-ref { display:block; font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.15rem; } .fav-text { display:block; font-family:var(--serif); font-size:1.02rem; color:var(--ink); line-height:1.45; } /* ---- Reading plans --------------------------------------------------------- */ .plan-card { background:var(--paper-2); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.15rem; margin-bottom:.85rem; } .plan-head { display:flex; justify-content:space-between; align-items:baseline; } .plan-name { font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--accent-deep); } .plan-pct { font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--gold); } .plan-blurb { font-size:.9rem; color:var(--ink-soft); margin:.35rem 0 .6rem; line-height:1.4; } .plan-bar { height:5px; background:var(--accent-tint); border-radius:99px; overflow:hidden; margin:.5rem 0 .75rem; } .plan-bar span { display:block; height:100%; background:var(--accent); border-radius:99px; } .plan-day-label { font-family:var(--serif); font-size:1rem; color:var(--ink); } .plan-read, .plan-done { padding:.5rem 1.05rem; font-size:.88rem; } .offline-note { text-align:center; font-size:.72rem; color:var(--ink-faint); margin-top:2.5rem;} .muted { color: var(--ink-faint); } /* ---- Tabs (Today / Prayers) ------------------------------------------------ */ /* (tab layout consolidated above) */ .tab { font-family:var(--sans); font-size:.9rem; font-weight:600; border:0; background:none; color:var(--ink-faint); padding:.35rem .7rem; border-radius:999px; cursor:pointer; } .tab.on { color:#fff; background:var(--accent); } /* ---- Prayers --------------------------------------------------------------- */ .prayer-card { background:var(--paper-2); border:1px solid var(--rule); border-radius:16px; padding:1.1rem 1.25rem; } .prayer-title { font-family:var(--serif); color:var(--accent-deep); font-size:1.3rem; font-weight:600; margin-bottom:.6rem; } .mysteries, .steps, .examen { list-style:none; counter-reset:i; display:flex; flex-direction:column; gap:.55rem; } .mysteries li, .steps li, .examen li { counter-increment:i; position:relative; padding-left:2rem; font-family:var(--serif); font-size:1.05rem; color:var(--ink); line-height:1.5; } .mysteries li::before, .steps li::before, .examen li::before { content:counter(i); position:absolute; left:0; top:.05em; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); font-family:var(--sans); font-size:.72rem; font-weight:700; display:grid; place-items:center; } .prayer-note { color:var(--ink-soft); font-size:.9rem; font-style:italic; margin-top:.85rem; } .mystery summary { font-family:var(--serif); font-size:1.05rem; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.15rem 0; } .mystery summary::-webkit-details-marker { display:none; } .mystery summary::after { content:"+"; color:var(--ink-faint); font-size:1.1rem; } .mystery[open] summary::after { content:"–"; } .mystery-med { font-style:italic; color:var(--accent-deep); font-size:.95rem; margin:.5rem 0 .4rem; line-height:1.45; } .mystery-cite { font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; } .mystery-scripture { font-size:1rem; line-height:1.65; color:var(--ink-soft); margin-bottom:.6rem; } .novena-track { margin-top:.9rem; } .novena-day { display:block; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--accent-deep); margin-bottom:.5rem; } .novena-track .btn { margin-bottom:.6rem; } /* ---- Guided Rosary overlay ------------------------------------------------- */ .rosary-overlay { position:fixed; inset:0; z-index:70; background:var(--paper); display:flex; flex-direction:column; padding:env(safe-area-inset-top) var(--pad) env(safe-area-inset-bottom); } .rosary-overlay::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); } .rosary-top { display:flex; align-items:center; gap:1rem; padding:1rem 0 .5rem; } .rosary-progress { flex:1; height:4px; background:var(--accent-tint); border-radius:99px; overflow:hidden; } .rosary-progress span { display:block; height:100%; background:var(--accent); transition:width .3s; } .rosary-close { background:none; border:0; color:var(--ink-faint); font-size:1.3rem; cursor:pointer; padding:.2rem .4rem; } .rosary-body { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; justify-content:safe center; align-items:center; text-align:center; gap:.5rem; max-width:34rem; margin:0 auto; width:100%; padding:.5rem 0 1rem; -webkit-overflow-scrolling:touch; } .rosary-count { font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .rosary-step-title { font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--accent-deep); margin-bottom:.5rem; } .rosary-med { font-family:var(--serif); font-style:italic; color:var(--accent-deep); font-size:1.05rem; } .rosary-text { font-family:var(--serif); font-size:1.25rem; line-height:1.6; color:var(--ink); } .rosary-text.announce { font-size:1.7rem; font-weight:600; color:var(--accent-deep); } .rosary-note-sm { font-size:.85rem; color:var(--ink-soft); font-style:italic; } .rosary-beads { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.25rem; } .bead { width:.85rem; height:.85rem; border-radius:50%; background:var(--accent-tint); border:1.5px solid var(--rule); } .bead.done { background:var(--accent); border-color:var(--accent); } .bead.now { box-shadow:0 0 0 .2em var(--accent-tint); border-color:var(--accent); } .rosary-nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0 1.5rem; } .rosary-nav .btn { min-width:9rem; } .prayer { border-bottom:1px solid var(--rule); } .prayer summary { font-family:var(--sans); font-weight:600; color:var(--accent-deep); padding:.85rem 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } .prayer summary::after { content:"+"; color:var(--ink-faint); font-size:1.2rem; } .prayer[open] summary::after { content:"–"; } .prayer summary::-webkit-details-marker { display:none; } .play-prayer { margin-left:.5rem; border:1px solid var(--accent); background:transparent; color:var(--accent); width:1.7rem; height:1.7rem; border-radius:50%; font-size:.7rem; cursor:pointer; flex:0 0 auto; } .play-prayer:active { background:var(--accent-tint); } .prayer summary .play-prayer { margin-left:auto; } .prayer-play { margin-bottom:.75rem; } .prayer-body { font-family:var(--serif); font-size:1.1rem; line-height:1.65; color:var(--ink); padding:0 0 1rem; } .season-prayer { font-style:italic; color:var(--accent-deep); padding:0; } .examen .ex-title { display:block; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.15rem; } .examen .ex-body { display:block; } .verse-line { font-family:var(--serif); font-size:1.02rem; line-height:1.55; color:var(--ink); margin-bottom:.6rem; } .verse-line:last-child { margin-bottom:0; } .prayer-to { color:var(--ink-faint); font-weight:400; font-size:.85em; } .tier-seg { margin:.4rem 0 1rem; } .examine-list { list-style:none; display:flex; flex-direction:column; gap:.6rem; } .examine-list li { font-family:var(--serif); font-size:1.06rem; line-height:1.5; color:var(--ink); padding-left:1rem; border-left:2px solid var(--accent-tint); }