/* Prayer Lake — shared design system A single, deliberately fixed palette (not theme-adaptive): this is a specific art piece, not a general app, so it keeps its own quiet mood rather than following the visitor's OS light/dark setting. */ /* Self-hosted, not loaded from Google Fonts at runtime — keeps the no-tracking promise (no third-party request on every page view). */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); } @font-face { font-family: "Jost"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/jost-400-italic.woff2") format("woff2"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jost-600.woff2") format("woff2"); } :root { --pl-mint: #eef4ee; --pl-mist: #e3edea; --pl-sage: #a9c7ad; --pl-seafoam: #8bbcae; --pl-teal: #5f9ea6; --pl-dusty-blue: #6f93ad; --pl-slate-blue: #46617a; --pl-ink: #2f4048; --pl-ink-soft: #4a5c63; --pl-white: #fbfdfb; --pl-night-black: #0a0f14; --pl-night-blue: #16283a; --pl-night-blue-accent: #2c4a63; --pl-night-white: #f5f4ef; /* Sampled directly from the field page's background video (dark ocean footage) via ffmpeg palettegen + brightest-pixel extraction — the lake page's visualization colors are literally the video's own colors, dark-to-light. */ --plv-abyss: #000813; --plv-deep: #0b1b2a; --plv-navy: #152637; --plv-slate: #213347; --plv-slate-mid: #304459; --plv-slate-light: #485d74; --plv-water: #5c7189; --plv-foam: #8398b1; --plv-foam-bright: #a6bdd5; --pl-font: "Jost", -apple-system, "Helvetica Neue", Arial, "Segoe UI", sans-serif; --pl-space-1: 0.5rem; --pl-space-2: 1rem; --pl-space-3: 2rem; --pl-space-4: 3.5rem; } * { box-sizing: border-box; } /* min-height, not height: a fixed height:100% left pinned to exactly one viewport tall even when (e.g. the lake page) grows taller. Body's own background then propagates to the root canvas sized against that pinned one-viewport height and tiles/repeats for the rest of the scrollable page — a hard seam every viewport-height, not just once. min-height lets both grow with content instead. */ html, body { min-height: 100%; } body { margin: 0; font-family: var(--pl-font); color: var(--pl-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--pl-slate-blue); } .pl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Honeypot: off-screen, not display:none — some bots skip hidden fields but still fill anything positioned off-canvas. */ .pl-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- Field page ---------- */ .pl-field-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pl-space-3); background: var(--pl-night-black); color: var(--pl-night-white); position: relative; overflow: hidden; } .pl-bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; } .pl-field-nav { position: absolute; top: var(--pl-space-3); right: var(--pl-space-3); font-size: 0.9rem; } .pl-field-page .pl-copyright { position: absolute; bottom: var(--pl-space-2); left: 0; right: 0; } .pl-field-nav a { color: var(--pl-night-white); text-decoration: none; border-bottom: 1px solid transparent; } .pl-field-nav a:hover { border-bottom-color: currentColor; } .pl-field { width: min(640px, 100%); text-align: center; z-index: 1; } .pl-prayer-input { width: 100%; min-height: 3rem; background: rgba(245, 244, 239, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: none; border-radius: 0.375rem; font-family: var(--pl-font); font-size: 1.25rem; line-height: 1.6; color: var(--pl-night-white); text-align: left; resize: none; padding: var(--pl-space-2); transition: box-shadow 0.4s ease; } .pl-prayer-input::placeholder { color: rgba(245, 244, 239, 0.55); opacity: 1; font-style: normal; } .pl-prayer-input:focus { outline: none; box-shadow: 0 0 0 1px var(--pl-night-blue-accent); } .pl-field-footer { display: flex; align-items: center; justify-content: center; gap: var(--pl-space-3); margin-top: var(--pl-space-2); } .pl-release-btn { font-family: var(--pl-font); font-size: 1rem; color: var(--pl-night-white); background: rgba(245, 244, 239, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: none; border-radius: 999px; padding: 0.6rem 1.75rem; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .pl-release-btn:hover { background: rgba(245, 244, 239, 0.18); } .pl-release-btn:disabled { opacity: 0.5; cursor: default; } .pl-status { min-height: 1.4rem; margin-top: var(--pl-space-2); font-size: 0.9rem; color: var(--pl-night-white); opacity: 0.85; } .pl-status[data-tone="error"] { color: #e0937a; opacity: 1; } /* Other visitors' prayers, shown one at a time below the field. */ .pl-live-feed { min-height: 1.4rem; margin: var(--pl-space-2) 0 0; font-size: 0.95rem; color: var(--pl-night-white); opacity: 0; transition-property: opacity; transition-timing-function: ease; /* transition-duration is set per-direction in field.js: quick fade in, slow fade out, and a separate fast cutover when a visitor's own prayer interrupts whatever was already showing. */ } .pl-live-feed.pl-live-feed--visible { opacity: 0.7; } .pl-live-feed.pl-live-feed--own { opacity: 0.95; } /* Release animation: the prayer drifts up and fades as it "leaves the field" */ .pl-prayer-input.pl-releasing { animation: pl-drift-away 0.9s ease forwards; } @keyframes pl-drift-away { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } } /* ---------- Lake page ---------- */ .pl-lake-page { min-height: 100vh; background: var(--plv-slate-mid); background: linear-gradient(180deg, var(--plv-abyss) 0%, var(--plv-slate-mid) 100%); color: var(--pl-night-white); padding: var(--pl-space-3) var(--pl-space-3) var(--pl-space-4); } .pl-lake-header { text-align: center; max-width: 640px; margin: 0 auto var(--pl-space-4); } .pl-lake-header h1 { font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--plv-foam-bright); margin: 0 0 var(--pl-space-1); } .pl-lake-header p { color: var(--pl-night-white); opacity: 0.75; font-size: 1rem; } .pl-lake-nav { text-align: center; margin-bottom: var(--pl-space-2); font-size: 0.9rem; } .pl-lake-nav a { color: var(--pl-night-white); text-decoration: none; border-bottom: 1px solid transparent; } .pl-lake-nav a:hover { border-bottom-color: currentColor; } .pl-section { max-width: 980px; margin: 0 auto var(--pl-space-4); } .pl-section h2 { font-weight: 500; font-size: 1.3rem; color: var(--plv-foam-bright); text-align: center; margin-bottom: var(--pl-space-3); } /* Word cloud */ .pl-word-cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.6em 1em; padding: var(--pl-space-3); background: rgba(166, 189, 213, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(166, 189, 213, 0.15); border-radius: 1.5rem; } .pl-word { display: inline-block; animation: pl-bob 6s ease-in-out infinite; animation-delay: calc(var(--pl-delay, 0) * 1s); } @keyframes pl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .pl-empty-note { text-align: center; color: var(--pl-night-white); opacity: 0.7; font-style: italic; padding: var(--pl-space-3); } /* Clusters */ .pl-clusters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pl-space-3); } .pl-pool { border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; border: none; color: var(--pl-night-white); font-family: var(--pl-font); padding: var(--pl-space-2); transition: transform 0.3s ease; } .pl-pool:hover, .pl-pool:focus-visible { transform: scale(1.05); } .pl-pool-label { font-size: 1rem; } .pl-pool-count { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 0.2rem; } .pl-cluster-detail { max-width: 640px; margin: var(--pl-space-3) auto 0; background: rgba(166, 189, 213, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(166, 189, 213, 0.15); border-radius: 1rem; padding: var(--pl-space-3); } .pl-cluster-detail h3 { margin-top: 0; font-weight: 500; color: var(--plv-foam-bright); } .pl-cluster-detail blockquote { margin: 0 0 var(--pl-space-2); padding-left: var(--pl-space-2); border-left: 2px solid var(--plv-foam); color: var(--pl-night-white); opacity: 0.8; font-style: italic; } /* Maps */ .pl-map-panel { background: rgba(166, 189, 213, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(166, 189, 213, 0.15); border-radius: 1.5rem; padding: var(--pl-space-3); } .pl-map-panel--us { max-width: 640px; margin: var(--pl-space-3) auto 0; } .pl-map-subheading { font-weight: 500; font-size: 1rem; color: var(--plv-foam-bright); text-align: center; margin: 0 0 var(--pl-space-2); } .pl-map { width: 100%; } .pl-map svg { width: 100%; height: auto; display: block; } .pl-map path { stroke: var(--plv-abyss); stroke-width: 0.5; fill: rgba(166, 189, 213, 0.08); transition: fill 0.3s ease; } .pl-map path[data-count] { cursor: pointer; } .pl-map path[data-count]:hover, .pl-map path[data-count]:focus-visible { fill: var(--plv-foam-bright) !important; } @media (max-width: 600px) { .pl-pool { width: 7.5rem !important; height: 7.5rem !important; } } .pl-copyright { text-align: center; font-size: 0.7rem; color: var(--pl-night-white); opacity: 0.4; margin: var(--pl-space-4) 0 0; }