pguzman
663fde3909
Full source for loveandrosary.com: slide-based Rosary/novena/Divine Mercy Chaplet presentation tool with multi-user roles, SVG bead ring, audio uploads, donate strip, and public session profiles. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
533 lines
13 KiB
CSS
533 lines
13 KiB
CSS
/* =========================================================
|
||
present.css — Full-screen presentation styles
|
||
========================================================= */
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #0a0a1a;
|
||
--text: #f0f0f0;
|
||
--gold: #FFD700;
|
||
--blue: #87CEEB;
|
||
--mystery: #c8a84b;
|
||
--dim: rgba(255,255,255,0.35);
|
||
--nav-bg: rgba(0,0,0,0.55);
|
||
--font-prayer: Georgia, 'Times New Roman', serif;
|
||
--font-ui: system-ui, -apple-system, sans-serif;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--font-prayer);
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Rosary overlay
|
||
---------------------------------------------------------------- */
|
||
#rosary-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
#rosary-overlay svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Presenter wrapper
|
||
---------------------------------------------------------------- */
|
||
#presenter {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 48px 72px 80px; /* space for bead ring */
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Slide content area
|
||
---------------------------------------------------------------- */
|
||
#slide-content {
|
||
width: 100%;
|
||
max-width: 1100px;
|
||
flex: 1;
|
||
min-height: 0; /* CRITICAL: without this, flex:1 never shrinks below
|
||
content height, so overflow-y:auto never activates */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
/* Thin, dark scrollbar — unobtrusive on a presentation screen */
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(255,255,255,0.15) transparent;
|
||
-webkit-overflow-scrolling: touch; /* iOS momentum scroll */
|
||
}
|
||
#slide-content::-webkit-scrollbar { width: 4px; }
|
||
#slide-content::-webkit-scrollbar-track { background: transparent; }
|
||
#slide-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
|
||
|
||
/* ----------------------------------------------------------------
|
||
Cover slide
|
||
---------------------------------------------------------------- */
|
||
.cover-slide {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 18px;
|
||
}
|
||
|
||
#cover-photo-wrap {
|
||
max-height: 38vh;
|
||
overflow: hidden;
|
||
border-radius: 6px;
|
||
position: relative;
|
||
}
|
||
#cover-photo {
|
||
max-height: 38vh;
|
||
max-width: 60vw;
|
||
border-radius: 6px;
|
||
display: block;
|
||
object-fit: cover;
|
||
/* Vignette effect */
|
||
mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||
-webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||
}
|
||
#cover-photo-wrap.no-photo {
|
||
display: none;
|
||
}
|
||
|
||
#cover-title {
|
||
font-size: 2.6rem;
|
||
font-weight: normal;
|
||
letter-spacing: 0.08em;
|
||
color: var(--gold);
|
||
text-shadow: 0 0 20px rgba(255,215,0,0.4);
|
||
}
|
||
|
||
#cover-body {
|
||
font-size: 1.5rem;
|
||
line-height: 1.7;
|
||
white-space: pre-line;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Prayer slide
|
||
---------------------------------------------------------------- */
|
||
#prayer-slide {
|
||
width: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
#slide-title {
|
||
font-size: 1.1rem;
|
||
font-family: var(--font-ui);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--dim);
|
||
font-weight: 400;
|
||
}
|
||
|
||
#slide-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 22px;
|
||
}
|
||
|
||
#leader-wrap, #all-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.label {
|
||
font-family: var(--font-ui);
|
||
font-size: 0.85rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.leader-label { color: var(--gold); }
|
||
.all-label { color: var(--blue); }
|
||
|
||
#leader-text, #all-text,
|
||
#litany-leader, #litany-all {
|
||
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
|
||
line-height: 1.65;
|
||
white-space: pre-line;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* When only one section is present, increase size */
|
||
.single-section #leader-text,
|
||
.single-section #all-text,
|
||
.single-section #litany-leader,
|
||
.single-section #litany-all {
|
||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Mystery slide
|
||
---------------------------------------------------------------- */
|
||
#mystery-slide {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.mystery-number {
|
||
font-family: var(--font-ui);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2em;
|
||
color: var(--mystery);
|
||
}
|
||
|
||
#mystery-slide h2 {
|
||
font-size: 2.4rem;
|
||
font-weight: normal;
|
||
color: var(--gold);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
#mystery-fruit {
|
||
font-size: 1.5rem;
|
||
color: var(--blue);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Litany slide
|
||
---------------------------------------------------------------- */
|
||
#litany-slide {
|
||
width: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
#litany-title {
|
||
font-size: 1.1rem;
|
||
font-family: var(--font-ui);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--dim);
|
||
font-weight: 400;
|
||
}
|
||
|
||
#litany-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 22px;
|
||
align-items: center;
|
||
}
|
||
|
||
#litany-leader-wrap, #litany-all-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Closing slide
|
||
---------------------------------------------------------------- */
|
||
#closing-slide {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
#closing-photo-wrap {
|
||
max-height: 34vh;
|
||
overflow: hidden;
|
||
border-radius: 6px;
|
||
}
|
||
#closing-photo {
|
||
max-height: 34vh;
|
||
max-width: 55vw;
|
||
border-radius: 6px;
|
||
display: block;
|
||
object-fit: cover;
|
||
mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||
-webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||
}
|
||
|
||
.closing-cross {
|
||
font-size: 2.8rem;
|
||
color: var(--gold);
|
||
text-shadow: 0 0 30px rgba(255,215,0,0.5);
|
||
}
|
||
|
||
#closing-slide h2 {
|
||
font-size: 1.9rem;
|
||
font-weight: normal;
|
||
color: var(--gold);
|
||
}
|
||
|
||
#closing-subtitle {
|
||
font-size: 1.1rem;
|
||
color: var(--dim);
|
||
font-style: italic;
|
||
}
|
||
|
||
#closing-body {
|
||
font-size: clamp(1.5rem, 3vw, 2.2rem);
|
||
line-height: 1.75;
|
||
white-space: pre-line;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Navigation bar
|
||
---------------------------------------------------------------- */
|
||
#presenter-nav {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
background: var(--nav-bg);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: 40px;
|
||
padding: 10px 24px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
z-index: 20;
|
||
}
|
||
|
||
/* Thin vertical divider inside the nav pill */
|
||
.nav-sep {
|
||
width: 1px;
|
||
height: 18px;
|
||
background: rgba(255,255,255,0.18);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Exit button — smaller and muted vs the main nav buttons */
|
||
.nav-exit {
|
||
font-size: 1.1rem;
|
||
color: rgba(255,255,255,0.4);
|
||
padding: 6px 10px;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-exit:hover:not(:disabled) {
|
||
background: rgba(255,255,255,0.08);
|
||
color: rgba(255,255,255,0.85);
|
||
}
|
||
|
||
/* Audio toggle button */
|
||
.nav-audio {
|
||
font-size: 1.1rem;
|
||
color: rgba(255,255,255,0.4);
|
||
padding: 6px 10px;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-audio:hover:not(:disabled) {
|
||
background: rgba(255,255,255,0.08);
|
||
color: rgba(255,255,255,0.85);
|
||
}
|
||
.nav-audio.audio-on {
|
||
color: #c9973d;
|
||
}
|
||
|
||
.nav-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text);
|
||
font-size: 1.4rem;
|
||
cursor: pointer;
|
||
padding: 6px 14px;
|
||
border-radius: 6px;
|
||
transition: background 0.15s;
|
||
line-height: 1;
|
||
}
|
||
.nav-btn:hover:not(:disabled) {
|
||
background: rgba(255,255,255,0.12);
|
||
}
|
||
.nav-btn:disabled {
|
||
opacity: 0.3;
|
||
cursor: default;
|
||
}
|
||
|
||
#slide-counter {
|
||
font-family: var(--font-ui);
|
||
font-size: 0.9rem;
|
||
color: var(--dim);
|
||
min-width: 100px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Resume toast — auto-fades after resume
|
||
---------------------------------------------------------------- */
|
||
#resume-toast {
|
||
position: fixed;
|
||
top: 14px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(255,215,0,0.12);
|
||
border: 1px solid rgba(255,215,0,0.3);
|
||
color: var(--gold);
|
||
font-family: var(--font-ui);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.06em;
|
||
padding: 5px 18px;
|
||
border-radius: 20px;
|
||
z-index: 30;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
#resume-toast.visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Keyboard hint
|
||
---------------------------------------------------------------- */
|
||
#key-hint {
|
||
position: fixed;
|
||
top: 12px;
|
||
right: 16px;
|
||
font-family: var(--font-ui);
|
||
font-size: 0.7rem;
|
||
color: rgba(255,255,255,0.2);
|
||
z-index: 20;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Slide transitions
|
||
---------------------------------------------------------------- */
|
||
#slide-content > div {
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Fullscreen state — hide nav hint
|
||
---------------------------------------------------------------- */
|
||
:fullscreen #key-hint,
|
||
:-webkit-full-screen #key-hint {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Repeat-run badge — shows "2 of 3" when same content repeats.
|
||
Lives inside the slide panel, above the title (inline, not fixed).
|
||
---------------------------------------------------------------- */
|
||
.repeat-badge {
|
||
display: block;
|
||
align-self: center;
|
||
background: rgba(255, 215, 0, 0.12);
|
||
border: 1px solid rgba(255, 215, 0, 0.35);
|
||
color: var(--gold);
|
||
font-family: var(--font-ui);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
padding: 4px 14px;
|
||
border-radius: 20px;
|
||
pointer-events: none;
|
||
animation: badgePulse 0.4s ease;
|
||
}
|
||
|
||
@keyframes badgePulse {
|
||
from { opacity: 0; transform: scale(0.85); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Mobile — tablets and phones (≤ 768 px)
|
||
---------------------------------------------------------------- */
|
||
@media (max-width: 768px) {
|
||
/* Tighter inset: beads sit 28 px from edge (center) + 10 px radius = 38 px.
|
||
48 px padding gives 10 px clearance on all sides. */
|
||
#presenter {
|
||
padding: 44px 48px 68px;
|
||
}
|
||
|
||
/* Shrink fixed-size text that doesn't use clamp() */
|
||
#cover-title { font-size: 1.9rem; }
|
||
#cover-body { font-size: 1.25rem; }
|
||
#mystery-slide h2 { font-size: 1.8rem; }
|
||
#mystery-fruit { font-size: 1.15rem; }
|
||
#closing-slide h2 { font-size: 1.5rem; }
|
||
#closing-body { font-size: 1.1rem; }
|
||
|
||
/* Compact nav pill */
|
||
#presenter-nav {
|
||
padding: 8px 14px;
|
||
gap: 8px;
|
||
bottom: 14px;
|
||
}
|
||
.nav-exit { font-size: 1rem; padding: 6px 8px; }
|
||
|
||
/* WCAG 2.5.5 minimum 44 × 44 px touch target */
|
||
.nav-btn {
|
||
font-size: 1.4rem;
|
||
padding: 6px 14px;
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
}
|
||
|
||
#slide-counter {
|
||
min-width: 76px;
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
/* Keyboard hint is irrelevant on touch devices */
|
||
#key-hint { display: none; }
|
||
|
||
/* Cover photo — a bit smaller on portrait phones */
|
||
#cover-photo-wrap,
|
||
#cover-photo { max-height: 32vh; }
|
||
|
||
#closing-photo-wrap,
|
||
#closing-photo { max-height: 28vh; }
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Mobile — phones (≤ 480 px)
|
||
---------------------------------------------------------------- */
|
||
@media (max-width: 480px) {
|
||
#presenter {
|
||
padding: 44px 40px 66px;
|
||
}
|
||
|
||
#cover-title { font-size: 1.4rem; }
|
||
#mystery-slide h2 { font-size: 1.4rem; }
|
||
#mystery-fruit { font-size: 1.05rem; }
|
||
|
||
/* Slightly smaller slide title label */
|
||
#slide-title,
|
||
#litany-title { font-size: 0.9rem; }
|
||
}
|