/* Cairn — 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 { --crn-mint: #eef4ee; --crn-mist: #e3edea; --crn-sage: #a9c7ad; --crn-seafoam: #8bbcae; --crn-teal: #5f9ea6; --crn-dusty-blue: #6f93ad; --crn-slate-blue: #46617a; --crn-ink: #2f4048; --crn-ink-soft: #4a5c63; --crn-white: #fbfdfb; --crn-night-black: #0a0f14; --crn-night-blue: #16283a; --crn-night-blue-accent: #2c4a63; --crn-night-white: #f5f4ef; /* Stone-and-dusk palette: near-black warm dark grading up through earth and stone tones into moss and amber — the cairn page's visualization colors, dark-to-light. */ --crnv-void: #0c0906; --crnv-dusk: #1c1611; --crnv-earth: #241d17; --crnv-stone-dark: #3a3229; --crnv-stone-mid: #574d3e; --crnv-stone-light: #766a56; --crnv-moss: #7c8768; --crnv-amber: #c9a66b; --crnv-amber-bright: #e8c896; --crn-font: "Jost", -apple-system, "Helvetica Neue", Arial, "Segoe UI", sans-serif; --crn-space-1: 0.5rem; --crn-space-2: 1rem; --crn-space-3: 2rem; --crn-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 cairn 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(--crn-font); color: var(--crn-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--crn-slate-blue); } .crn-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. */ .crn-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- Trail page (the confession input) ---------- */ .crn-trail-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--crn-space-3); background: var(--crn-night-black); color: var(--crn-night-white); position: relative; overflow: hidden; } .crn-bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; /* The stacked stones sit at ~73% across the frame (measured from the source video), not at the true right edge — anchoring to 100% crops right past them on narrow viewports. 73% keeps the crop centered on the stones themselves, so they stay in frame at any width. */ object-position: 73% center; z-index: -1; pointer-events: none; } .crn-trail-nav { position: absolute; top: var(--crn-space-3); right: var(--crn-space-3); font-size: 0.9rem; } .crn-trail-page .crn-copyright { position: absolute; bottom: var(--crn-space-2); left: 0; right: 0; } .crn-trail-nav a { color: var(--crn-night-white); text-decoration: none; border-bottom: 1px solid transparent; } .crn-trail-nav a:hover { border-bottom-color: currentColor; } .crn-trail { width: min(640px, 100%); text-align: center; z-index: 1; } .crn-confession-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(--crn-font); font-size: 1.25rem; line-height: 1.6; color: var(--crn-night-white); text-align: left; resize: none; padding: var(--crn-space-2); transition: box-shadow 0.4s ease; } .crn-confession-input::placeholder { color: rgba(245, 244, 239, 0.55); opacity: 1; font-style: normal; } .crn-confession-input:focus { outline: none; box-shadow: 0 0 0 1px var(--crn-night-blue-accent); } .crn-trail-footer { display: flex; align-items: center; justify-content: center; gap: var(--crn-space-3); margin-top: var(--crn-space-2); } .crn-confess-btn { font-family: var(--crn-font); font-size: 1rem; color: var(--crn-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; } .crn-confess-btn:hover { background: rgba(245, 244, 239, 0.18); } .crn-confess-btn:disabled { opacity: 0.5; cursor: default; } .crn-status { min-height: 1.4rem; margin-top: var(--crn-space-2); font-size: 0.9rem; color: var(--crn-night-white); opacity: 0.85; } .crn-status[data-tone="error"] { color: #e0937a; opacity: 1; } /* Other visitors' confessions, shown one at a time below the input. */ .crn-live-feed { min-height: 1.4rem; margin: var(--crn-space-2) 0 0; font-size: 0.95rem; color: var(--crn-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 confession interrupts whatever was already showing. */ } .crn-live-feed.crn-live-feed--visible { opacity: 0.7; } .crn-live-feed.crn-live-feed--own { opacity: 0.95; } /* Set-down animation: the confession settles and fades as it "leaves the trail" */ .crn-confession-input.crn-releasing { animation: crn-drift-away 0.9s ease forwards; } @keyframes crn-drift-away { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } } /* ---------- Cairn page (the aggregate visualization) ---------- */ .crn-cairn-page { min-height: 100vh; background: var(--crnv-stone-mid); background: linear-gradient(180deg, var(--crnv-void) 0%, var(--crnv-stone-mid) 100%); color: var(--crn-night-white); padding: var(--crn-space-3) var(--crn-space-3) var(--crn-space-4); } .crn-cairn-header { text-align: center; max-width: 640px; margin: 0 auto var(--crn-space-4); } .crn-cairn-header h1 { font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--crnv-amber-bright); margin: 0 0 var(--crn-space-1); } .crn-cairn-header p { color: var(--crn-night-white); opacity: 0.75; font-size: 1rem; } .crn-cairn-nav { text-align: center; margin-bottom: var(--crn-space-2); font-size: 0.9rem; } .crn-cairn-nav a { color: var(--crn-night-white); text-decoration: none; border-bottom: 1px solid transparent; } .crn-cairn-nav a:hover { border-bottom-color: currentColor; } .crn-section { max-width: 980px; margin: 0 auto var(--crn-space-4); } .crn-section h2 { font-weight: 500; font-size: 1.3rem; color: var(--crnv-amber-bright); text-align: center; margin-bottom: var(--crn-space-3); } /* Word cloud */ .crn-word-cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.6em 1em; padding: var(--crn-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; } .crn-word { display: inline-block; animation: crn-bob 6s ease-in-out infinite; animation-delay: calc(var(--crn-delay, 0) * 1s); } @keyframes crn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .crn-empty-note { text-align: center; color: var(--crn-night-white); opacity: 0.7; font-style: italic; padding: var(--crn-space-3); } /* Clusters */ .crn-clusters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--crn-space-3); } .crn-stone { /* Slightly irregular border-radius per stone (set inline per-button in cairn.js) gives each one a settled, non-uniform silhouette instead of a perfect circle — a small nod to real stacked stones. */ display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; border: none; color: var(--crn-night-white); font-family: var(--crn-font); padding: var(--crn-space-2); transition: transform 0.3s ease; } .crn-stone:hover, .crn-stone:focus-visible { transform: scale(1.05); } .crn-stone-label { font-size: 1rem; } .crn-stone-count { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 0.2rem; } .crn-cluster-detail { max-width: 640px; margin: var(--crn-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(--crn-space-3); } .crn-cluster-detail h3 { margin-top: 0; font-weight: 500; color: var(--crnv-amber-bright); } .crn-cluster-detail blockquote { margin: 0 0 var(--crn-space-2); padding-left: var(--crn-space-2); border-left: 2px solid var(--crnv-amber); color: var(--crn-night-white); opacity: 0.8; font-style: italic; } /* Maps */ .crn-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(--crn-space-3); } .crn-map-panel--us { max-width: 640px; margin: var(--crn-space-3) auto 0; } .crn-map-subheading { font-weight: 500; font-size: 1rem; color: var(--crnv-amber-bright); text-align: center; margin: 0 0 var(--crn-space-2); } .crn-map { width: 100%; } .crn-map svg { width: 100%; height: auto; display: block; } .crn-map path { stroke: var(--crnv-void); stroke-width: 0.5; fill: rgba(166, 189, 213, 0.08); transition: fill 0.3s ease; } .crn-map path[data-count] { cursor: pointer; } .crn-map path[data-count]:hover, .crn-map path[data-count]:focus-visible { fill: var(--crnv-amber-bright) !important; } @media (max-width: 600px) { .crn-stone { width: 7.5rem !important; height: 7.5rem !important; } } .crn-copyright { text-align: center; font-size: 0.7rem; color: var(--crn-night-white); opacity: 0.4; margin: var(--crn-space-4) 0 0; }