/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #080f0d #28332e #eef4f1 #3c6b5e #437064 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #eef4f1; --surface: #f7faf9; --surface-2: #e3e9e6; --border: #ced4d1; --border-strong: #a9afad; --ink: #28332e; --muted: #646d69; --accent: #3c6b5e; --accent-hover: #335b50; --accent-ink: #ffffff; --accent-text: #437064; --accent-strong: #3c6b5e; --accent-soft: #d5e1dc; --accent-border: #9eb6af; --success: #15803d; --success-ink: #ffffff; --success-soft: #d4e6db; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #e7e1d5; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #e8dad7; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #080f0d; --surface: #212725; --surface-2: #141b19; --border: #2b312f; --border-strong: #525756; --ink: #eef4f1; --muted: #929896; --accent: #3c6b5e; --accent-hover: #598176; --accent-ink: #ffffff; --accent-text: #5a8277; --accent-strong: #73958c; --accent-soft: #13231f; --accent-border: #1f3831; --success: #15803d; --success-ink: #ffffff; --success-soft: #0b2818; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2e1e0c; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2f1210; --danger-strong: #d16969; } /* ==================================================================== * app.css — Silt. A calm, watery ritual: paper becomes landscape becomes * water. Soft radii, gentle depth, one accent used only where letting go * actually happens. * ==================================================================== */ :root { --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent); --shadow-raised: 0 12px 32px color-mix(in srgb, var(--ink) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent); --dur-1: 160ms; --dur-2: 320ms; } /* ---- brand -------------------------------------------------------- */ .brand { text-decoration: none; color: inherit; } .ripple-mark { transition: transform var(--dur-2) ease; } .brand:hover .ripple-mark { transform: scale(1.1); } /* ---- page furniture ------------------------------------------------ */ .ritual-tally { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: var(--t-sm); white-space: nowrap; } .ritual-tally strong { color: var(--ink); font-weight: var(--fw-semi); } .ritual-tally-sep { opacity: 0.5; } /* ---- the ritual card ------------------------------------------------ */ .ritual { overflow: visible; } .ritual-progress { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .ritual-body { display: grid; grid-template-columns: minmax(0, 420px) minmax(280px, 1fr); gap: var(--s-8); padding: var(--s-6); } @media (max-width: 860px) { .ritual-body { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-4); } } /* ---- canvas ---------------------------------------------------------- */ .ritual-canvas-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-raised); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface) 60%); } .ritual-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; background: transparent; } [data-stage-current="erosion"] .ritual-canvas, [data-stage-current="translation"] .ritual-canvas { cursor: crosshair; } .ritual-canvas.is-dissolving { animation: siltDissolve 1.6s ease forwards; } .ritual-canvas.is-archiving { animation: siltFold 0.85s ease forwards; } @keyframes siltDissolve { 0% { filter: blur(0) saturate(1); opacity: 1; transform: scale(1); } 40% { filter: blur(2px) saturate(1.1); opacity: 0.85; transform: scale(1.01); } 100% { filter: blur(16px) saturate(0.6); opacity: 0; transform: scale(1.04); } } @keyframes siltFold { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 60% { transform: scale(0.94) rotate(-1deg); opacity: 0.9; } 100% { transform: scale(0.86) rotate(-2deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ritual-canvas.is-dissolving, .ritual-canvas.is-archiving { animation: none; opacity: 0; transition: opacity 120ms linear; } } .ritual-dissolve-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .ritual-canvas-wrap.is-dissolving .ritual-dissolve-veil { opacity: 1; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 45%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent) 20%, transparent 65%); animation: siltRipple 1.6s ease forwards; } @keyframes siltRipple { 0% { opacity: 0; transform: scale(0.4); } 50% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.6); } } @media (prefers-reduced-motion: reduce) { .ritual-canvas-wrap.is-dissolving .ritual-dissolve-veil { animation: none; opacity: 0; } } /* timer, overlaid on the canvas */ .ritual-timer { position: absolute; top: var(--s-3); right: var(--s-3); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); box-shadow: var(--shadow); } .timer-ring { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); } .timer-ring-track { fill: none; stroke: var(--border); stroke-width: 2.5; } .timer-ring-fill { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .timer-value { position: relative; font-size: var(--t-xs); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: var(--ink); } /* ---- the step panel --------------------------------------------------- */ .ritual-panel { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .ritual-kicker { margin: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-wide, 0.06em); color: var(--accent-text); font-weight: var(--fw-semi); } .ritual-heading { margin: 0; font-size: var(--t-2xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); color: var(--ink); } .ritual-copy { margin: 0; color: var(--muted); line-height: var(--lh-relaxed, 1.6); max-width: 52ch; } .ritual-stage[hidden] { display: none; } .ritual-stage { animation: siltRise var(--dur-2) ease; } @keyframes siltRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ritual-stage { animation: none; } } /* ---- release choices ---------------------------------------------------- */ .release-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-2); } @media (max-width: 560px) { .release-choices { grid-template-columns: 1fr; } } .release-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); text-align: left; padding: var(--s-5); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease, border-color var(--dur-2) ease; } .release-choice:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); } .release-choice:disabled { opacity: 0.6; cursor: default; transform: none; } .release-choice-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); } .release-choice-title { font-weight: var(--fw-semi); color: var(--ink); } .release-choice-text { font-size: var(--t-sm); color: var(--muted); } .release-choice-primary { background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 75%); border-color: var(--accent-border); } .release-choice-primary .release-choice-icon { background: var(--accent-soft); color: var(--accent-strong); } .release-choice-primary:hover { border-color: var(--accent); } /* ---- archive ---------------------------------------------------------- */ .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-5); } .archive-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease; } .archive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); } .archive-card-media { display: block; width: 100%; aspect-ratio: 1 / 1; border: 0; padding: 0; background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); cursor: pointer; } .archive-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .archive-card-body { padding: var(--s-3) var(--s-4); } .archive-card-word { margin: 0; font-weight: var(--fw-medium); color: var(--ink); } .archive-card-date { margin: 2px 0 0; font-size: var(--t-xs); color: var(--muted); } .archive-card-delete { position: absolute; top: var(--s-2); right: var(--s-2); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(4px); } .archive-view-image { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); display: block; } /* ---- small screens ------------------------------------------------------ */ @media (max-width: 390px) { .ritual-heading { font-size: var(--t-xl); } .ritual-tally { font-size: var(--t-xs); padding: var(--s-1) var(--s-3); } }