/* public/styles.css * prayforday — Step 1 mock styling. * The palette is driven entirely by CSS variables set per time-of-day via the * [data-time] attribute on (app.js sets it). One coherent design that * shifts: cool-fresh morning → bright midday → golden evening → candlelit night. */ *, *::before, *::after { box-sizing: border-box; } :root { --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --maxw: 32rem; --radius: 14px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Time-of-day palettes ---------- */ html[data-time="morning"] { color-scheme: light; --bg: #e9f0ee; --surface: #ffffff; --text: #273330; --text-soft: #5b6a64; --accent: #5d8c7b; --accent-contrast: #ffffff; --border: #d6e2dd; --chip-active-text: #ffffff; --shadow: 0 14px 40px -18px rgba(40, 70, 60, 0.35); --panel: rgba(255, 255, 255, 0.76); --panel-border: rgba(255, 255, 255, 0.6); --photo: url("/img/cross-morning.jpg"); } html[data-time="midday"] { color-scheme: light; --bg: #f4f0e8; --surface: #fffdf7; --text: #2d2a23; --text-soft: #6a6256; --accent: #bf8a3d; --accent-contrast: #ffffff; --border: #e6dfd0; --chip-active-text: #ffffff; --shadow: 0 14px 40px -18px rgba(120, 90, 40, 0.3); --panel: rgba(255, 253, 247, 0.74); --panel-border: rgba(255, 255, 255, 0.55); --photo: url("/img/cross-midday.jpg"); } html[data-time="evening"] { color-scheme: light; --bg: #efe2cf; --surface: #f9f0e1; --text: #3a2d20; --text-soft: #715f48; --accent: #c2762a; --accent-contrast: #ffffff; --border: #e1d2ba; --chip-active-text: #ffffff; --shadow: 0 16px 44px -18px rgba(150, 90, 20, 0.35); --panel: rgba(249, 240, 225, 0.72); --panel-border: rgba(255, 250, 240, 0.55); --photo: url("/img/cross-evening.jpg"); } html[data-time="night"] { color-scheme: dark; --bg: #14161b; --surface: #1d2027; --text: #ece3d4; --text-soft: #a89d8b; --accent: #e0a458; --accent-contrast: #20160a; --border: #2c303a; --chip-active-text: #20160a; --shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.6); --panel: rgba(20, 22, 27, 0.55); --panel-border: rgba(255, 255, 255, 0.1); --photo: url("/img/cross-night.jpg"); } /* ---------- Base ---------- */ body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: clamp(1.25rem, 4vw, 3rem); background-color: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background 600ms var(--ease), color 600ms var(--ease); } /*
wraps the card + the (crawlable) intro copy below it. */ main { width: 100%; max-width: var(--maxw); display: flex; flex-direction: column; gap: 1.5rem; } .app { width: 100%; display: flex; flex-direction: column; gap: 2rem; padding: clamp(1.5rem, 5vw, 2.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); } /* Hero: the time-matched cross, shown in full at the top of the card. */ .hero { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45); } /* ---------- Masthead ---------- */ .masthead { text-align: center; } .greeting { margin: 0 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); } .wordmark { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 7vw, 2.6rem); letter-spacing: 0.01em; } .tagline { margin: 0.35rem 0 0; font-family: var(--serif); font-style: italic; color: var(--text-soft); } /* ---------- Views ---------- */ .view { display: flex; flex-direction: column; gap: 1.5rem; } .view[hidden] { display: none; } .view--centered { align-items: center; justify-content: center; min-height: 14rem; } /* ---------- Tag groups ---------- */ .tag-groups { display: flex; flex-direction: column; gap: 1.25rem; } /* The question is "asked" in the site's serif voice (like the wordmark/prayer), * at full text color and a touch larger — so it reads as a prompt, not as just * another sans-serif chip to pick. This is what sets questions apart from tags. */ .tag-group__label { margin: 0 0 0.7rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--text); } .tag-group__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); } .chip:hover { border-color: var(--accent); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--chip-active-text); } /* ---------- Free text ---------- */ .freetext { display: flex; flex-direction: column; gap: 0.5rem; } /* Same "asked" voice as the tag-group questions, for one consistent prompt tone. */ .freetext__label { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--text); } .muted { opacity: 0.7; } .freetext__field { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem; resize: vertical; min-height: 3.2rem; } /* ---------- Buttons ---------- */ .btn-primary { font-family: inherit; font-size: 1.05rem; color: var(--accent-contrast); background: var(--accent); border: none; border-radius: var(--radius); padding: 0.95rem 1.25rem; cursor: pointer; box-shadow: var(--shadow); transition: transform 160ms var(--ease), filter 160ms var(--ease); } .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-ghost { font-family: inherit; font-size: 0.95rem; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 1.1rem; cursor: pointer; transition: border-color 160ms var(--ease), color 160ms var(--ease); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Focus ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Loading ---------- */ /* Stacks the breathing glow + the progress ring on top of each other. The * breath is the soft pulse; the ring is the visual countdown of the wait. */ .loading-visual { position: relative; width: 120px; height: 120px; display: grid; place-items: center; } .loading-visual .ring, .loading-visual .breath { grid-area: 1 / 1; } .breath { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--accent), transparent 70%); box-shadow: 0 0 44px -6px var(--accent); animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(0.82); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 1; } } /* Progress ring: fills clockwise from 12 o'clock over the loading window. * Duration MUST match MIN_LOADING_MS in app.js (currently 6500ms). */ .ring { width: 120px; height: 120px; display: block; transform: rotate(-90deg); /* start the fill from the top */ } .ring-track { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.18; } .ring-progress { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; /* 2π × 54 ≈ 339.292 — full circumference */ stroke-dasharray: 339.292; stroke-dashoffset: 339.292; opacity: 0.85; animation: ring-fill 6500ms linear forwards; } @keyframes ring-fill { to { stroke-dashoffset: 0; } } .loading-text { margin: 0; font-family: var(--serif); font-style: italic; color: var(--text-soft); } /* Loading state grouping: the active line + two contemplative lines that fade * in to teach the rhythm — kept tighter than the view's default 1.5rem gap. */ .loading-text-group { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .loading-context { margin: 0; max-width: 22rem; text-align: center; font-family: var(--serif); font-style: italic; font-size: 0.92rem; line-height: 1.55; color: var(--text-soft); opacity: 0; animation: fade-in 1100ms ease forwards; } .loading-context--first { animation-delay: 700ms; } .loading-context--second { margin-top: 0.2rem; animation-delay: 2200ms; } /* ---------- Prayer / result ---------- * The prayer is the moment — set apart from the rest of the page. Larger * serif body, padded breathing room, and a discreet accent-coloured cross * above and below acting as little markers (like in a printed prayer book). */ .prayer { font-family: var(--serif); font-size: 1.45rem; line-height: 1.7; white-space: pre-line; text-align: center; padding: 1.5rem 0; animation: rise 900ms var(--ease) both; } .prayer::before, .prayer::after { content: "\2020"; /* † — small Latin cross */ display: block; font-size: 1.1rem; color: var(--accent); opacity: 0.4; letter-spacing: 0.05em; } .prayer::before { margin-bottom: 1.25rem; } .prayer::after { margin-top: 1.25rem; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .result-actions { display: flex; gap: 0.75rem; justify-content: center; } /* Devotional gate — replaces "Pray again" once a prayer has been received * in the current time-of-day band. Quiet serif voice, like a benediction. */ .gate { margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--text-soft); animation: fade-in 700ms ease both; animation-delay: 200ms; } /* ---------- Privacy note ---------- */ .privacy { margin: 0; text-align: center; font-size: 0.8rem; color: var(--text-soft); opacity: 0.8; } /* ---------- About / intro copy ---------- * Crawlable, human-readable. Sits below the prayer card, deliberately quiet * (no card chrome, softer color) so it doesn't compete with the experience. */ .about { padding: 0 clamp(0.5rem, 3vw, 1.5rem); color: var(--text-soft); } .about h2 { margin: 0 0 0.6rem; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--text); } .about p { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.65; } .about p:last-child { margin-bottom: 0; } /* ---------- Reduced motion ---------- * Honor the preference, but don't go lifeless. Reduced-motion is really about * avoiding scaling/sliding/parallax — gentle OPACITY changes are fine, so the * loader still "breathes" and the prayer still fades in, just without movement. */ @media (prefers-reduced-motion: reduce) { .breath { animation: breathe-soft 4s ease-in-out infinite; } .prayer { animation: fade-in 600ms ease both; } } @keyframes breathe-soft { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }