Spaces:
Sleeping
Sleeping
| :root { | |
| --primary: #9f1d20; | |
| --frame: #2b0f12; | |
| --glow: #f2c9b8; | |
| --bg: #fbf6f4; | |
| --ink: #241512; | |
| --border: #ead9d6; | |
| --muted: #8c6e69; | |
| --tint: #fbebea; | |
| --serif: Charter, Georgia, "Iowan Old Style", serif; | |
| --sans: -apple-system, "Segoe UI", system-ui, sans-serif; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| height: 100%; | |
| } | |
| body { | |
| background: var(--frame); | |
| font-family: var(--serif); | |
| color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| button { font: inherit; cursor: pointer; } | |
| input { font: inherit; } | |
| /* The arched window. Full-bleed on phones, a framed card above that. */ | |
| .shell { | |
| height: 100%; | |
| max-width: 414px; | |
| margin: 0 auto; | |
| background: var(--bg); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| @media (min-width: 480px) and (min-height: 700px) { | |
| body { padding: 12px; } | |
| .shell { | |
| height: calc(100% - 24px); | |
| max-height: 900px; | |
| border-radius: 56px 56px 10px 10px; | |
| box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); | |
| } | |
| .masthead { border-radius: 46px 46px 0 0; } | |
| } | |
| /* Header */ | |
| .masthead { | |
| position: relative; | |
| background: var(--primary); | |
| padding: 34px 24px 22px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| gap: 6px; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| } | |
| .masthead__glow { | |
| position: absolute; | |
| top: -70px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 240px; | |
| height: 240px; | |
| border-radius: 999px; | |
| background: var(--glow); | |
| filter: blur(38px); | |
| opacity: 0.55; | |
| } | |
| .masthead__eyebrow { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--sans); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| color: rgba(255, 255, 255, 0.8); | |
| text-transform: uppercase; | |
| } | |
| .masthead h1 { | |
| position: relative; | |
| margin: 2px 0 0; | |
| font-size: 30px; | |
| font-weight: 700; | |
| color: #fff; | |
| } | |
| .masthead__sub { | |
| position: relative; | |
| font-size: 14px; | |
| font-style: italic; | |
| color: rgba(255, 255, 255, 0.88); | |
| max-width: 300px; line-height: 1.4; | |
| } | |
| /* Scrolling body */ | |
| .scroll { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| background: var(--bg); | |
| overscroll-behavior: contain; | |
| } | |
| .card { | |
| background: #fff; | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 16px; | |
| font-family: var(--sans); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| /* Disclosures */ | |
| .disclosure { border: 1px solid var(--border); border-radius: 12px; background: #fff; } | |
| .disclosure__summary { | |
| width: 100%; | |
| background: none; | |
| border: 0; | |
| border-radius: 12px; | |
| padding: 14px 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| font-family: var(--sans); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| text-align: left; | |
| } | |
| .disclosure__summary svg { flex-shrink: 0; transition: transform 0.18s ease; } | |
| .disclosure[open] .disclosure__summary svg { transform: rotate(180deg); } | |
| .disclosure__body { | |
| padding: 0 16px 16px; | |
| font-family: var(--sans); | |
| font-size: 13.5px; | |
| line-height: 1.55; | |
| color: var(--ink); | |
| } | |
| .disclosure__body p { margin: 0 0 10px; } | |
| .disclosure__body p:last-child { margin-bottom: 0; } | |
| .disclosure__body ol, .disclosure__body ul { margin: 0 0 10px; padding-left: 20px; } | |
| .disclosure__body li { margin-bottom: 6px; } | |
| .section-label { | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| margin-top: 6px; | |
| } | |
| /* Starters */ | |
| .starters { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .starter { | |
| background: var(--tint); | |
| border: 1px solid var(--primary); | |
| border-radius: 14px; | |
| padding: 12px; | |
| text-align: left; | |
| font-family: var(--sans); | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--primary); | |
| line-height: 1.3; | |
| } | |
| .starter:hover { background: #f8e0de; } | |
| .scripture { | |
| width: 100%; | |
| background: transparent; | |
| border: 1px dashed var(--muted); | |
| border-radius: 14px; | |
| padding: 12px 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-family: var(--sans); | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| text-align: left; | |
| } | |
| .scripture:hover { border-color: var(--primary); color: var(--primary); } | |
| .scripture:hover svg { stroke: var(--primary); } | |
| .optional { display: flex; flex-direction: column; gap: 8px; } | |
| /* Stays reachable once the conversation is underway. */ | |
| .optional--docked { | |
| position: sticky; | |
| top: -1px; | |
| z-index: 1; | |
| background: var(--bg); | |
| padding: 6px 0; | |
| } | |
| .optional--docked .scripture { | |
| font-size: 12.5px; | |
| padding: 9px 13px; | |
| } | |
| .hint { | |
| text-align: center; | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin: 4px 0; | |
| } | |
| /* Transcript */ | |
| .thread { display: flex; flex-direction: column; gap: 8px; } | |
| .bubble { | |
| max-width: 82%; | |
| padding: 10px 14px; | |
| font-family: var(--sans); | |
| font-size: 14px; | |
| line-height: 1.45; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| .bubble--them { | |
| align-self: flex-start; | |
| background: #fff; | |
| border: 1px solid var(--border); | |
| border-radius: 16px 16px 16px 4px; | |
| color: var(--ink); | |
| } | |
| .bubble--you { | |
| align-self: flex-end; | |
| background: var(--primary); | |
| border-radius: 16px 16px 4px 16px; | |
| color: #fff; | |
| } | |
| .bubble--notice { | |
| align-self: stretch; | |
| max-width: 100%; | |
| background: var(--tint); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| color: var(--ink); | |
| font-size: 13px; | |
| } | |
| /* Typing indicator */ | |
| .typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; } | |
| .typing span { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: var(--muted); | |
| animation: bob 1.1s infinite ease-in-out; | |
| } | |
| .typing span:nth-child(2) { animation-delay: 0.15s; } | |
| .typing span:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes bob { | |
| 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } | |
| 30% { opacity: 1; transform: translateY(-3px); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .typing span { animation: none; opacity: 0.55; } | |
| .disclosure__summary svg { transition: none; } | |
| } | |
| /* Composer */ | |
| .composer { | |
| flex-shrink: 0; | |
| background: #fff; | |
| border-top: 1px solid var(--border); | |
| padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); | |
| display: flex; | |
| gap: 8px; | |
| align-items: flex-end; | |
| } | |
| .composer textarea { | |
| flex-grow: 1; | |
| border: 1px solid var(--border); | |
| border-radius: 22px; | |
| padding: 11px 16px; | |
| font-family: var(--sans); | |
| font-size: 14px; | |
| line-height: 1.4; | |
| color: var(--ink); | |
| background: var(--bg); | |
| resize: none; | |
| max-height: 120px; | |
| outline: none; | |
| } | |
| .composer textarea:focus { border-color: var(--primary); } | |
| .send { | |
| flex-shrink: 0; | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 999px; | |
| border: none; | |
| background: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .send:disabled { opacity: 0.4; cursor: default; } | |
| .footnote { | |
| flex-shrink: 0; | |
| background: #fff; | |
| padding: 0 16px 10px; | |
| font-family: var(--sans); | |
| font-size: 11px; | |
| line-height: 1.4; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .footnote a { color: var(--muted); } | |
| .visually-hidden { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| } | |
| /* Intro card copy */ | |
| .card p { margin: 0 0 8px; } | |
| .card__lead { | |
| font-family: var(--serif); | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .text-link { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| font-family: var(--sans); | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--primary); | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| .text-link--quiet { font-size: 11px; font-weight: 400; color: var(--muted); } | |
| .disclosure__body a, .sheet a { color: var(--primary); text-underline-offset: 2px; } | |
| .stories { list-style: none; padding-left: 0; } | |
| .stories li { | |
| padding: 8px 0; | |
| border-top: 1px solid var(--border); | |
| margin: 0; | |
| } | |
| .stories li:last-child { border-bottom: 1px solid var(--border); } | |
| .stories a { font-weight: 600; } | |
| /* "How this space works" sheet */ | |
| .sheet { | |
| width: min(414px, 100vw); | |
| max-width: 100vw; | |
| max-height: min(88dvh, 820px); | |
| margin: auto auto 0; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 24px 24px 0 0; | |
| background: var(--bg); | |
| color: var(--ink); | |
| box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25); | |
| } | |
| .sheet::backdrop { background: rgba(43, 15, 18, 0.55); } | |
| @media (min-width: 480px) { | |
| .sheet { margin: auto; border-radius: 20px; } | |
| } | |
| .sheet__inner { | |
| padding: 20px 22px 28px; | |
| font-family: var(--sans); | |
| font-size: 14px; | |
| line-height: 1.55; | |
| } | |
| .sheet__head { | |
| position: sticky; | |
| top: -20px; | |
| margin: -20px -22px 8px; | |
| padding: 18px 22px 12px; | |
| background: var(--bg); | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .sheet h2 { margin: 0; font-family: var(--serif); font-size: 21px; } | |
| .sheet h3 { | |
| margin: 20px 0 6px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .sheet p { margin: 0 0 10px; } | |
| .sheet ul { margin: 0 0 10px; padding-left: 18px; } | |
| .sheet li { margin-bottom: 6px; } | |
| .sheet__close { | |
| flex-shrink: 0; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: #fff; | |
| color: var(--ink); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .sheet__crisis { | |
| margin-top: 18px ; | |
| padding: 12px 14px; | |
| background: var(--tint); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| } | |
| .card__small { font-size: 12.5px; color: var(--muted); } | |
| .afterthought { font-size: 12.5px; color: var(--muted); font-style: italic; } | |
| .sheet__lede { font-family: var(--serif); font-size: 16px; line-height: 1.5; margin-top: 4px ; } | |
| [hidden] { display: none ; } | |
| .scripture--practice { color: var(--primary); border-color: var(--primary); border-style: solid; background: var(--tint); } | |
| /* Practice path — a quiet progress trail, not a score. */ | |
| .path { | |
| position: sticky; | |
| top: -1px; | |
| z-index: 1; | |
| background: var(--bg); | |
| padding: 8px 0 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .path__steps { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| grid-template-columns: repeat(6, minmax(0, 1fr)); | |
| position: relative; | |
| } | |
| /* The line the dots sit on. */ | |
| .path__steps::before { | |
| content: ""; | |
| position: absolute; | |
| top: 7px; | |
| left: 8%; | |
| right: 8%; | |
| height: 2px; | |
| background: var(--border); | |
| } | |
| .path__steps li { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 5px; | |
| font-family: var(--sans); | |
| font-size: 10.5px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .path__dot { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 999px; | |
| background: var(--bg); | |
| border: 2px solid var(--border); | |
| transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease; | |
| } | |
| .path__steps li.is-done .path__dot { background: var(--glow); border-color: var(--primary); } | |
| .path__steps li.is-current .path__dot { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| transform: scale(1.15); | |
| box-shadow: 0 0 0 5px var(--tint); | |
| } | |
| .path__steps li.is-current .path__label { color: var(--primary); font-weight: 700; } | |
| .path__stop { | |
| display: block; | |
| margin: 10px auto 0; | |
| background: none; | |
| border: 0; | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| color: var(--muted); | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| /* Intro and closing cards in the thread. */ | |
| .pcard { | |
| background: #fff; | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 16px; | |
| font-family: var(--sans); | |
| font-size: 13.5px; | |
| line-height: 1.5; | |
| } | |
| .pcard p { margin: 0 0 10px; } | |
| .pcard__title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--primary); } | |
| .pcard__steps { margin: 0 0 10px; padding-left: 20px; } | |
| .pcard__steps li { margin-bottom: 5px; } | |
| .pcard__note { font-size: 12.5px; color: var(--muted); } | |
| .pcard__note a { color: var(--muted); } | |
| .pcard--started { opacity: 0.75; } | |
| .pcard__begin { | |
| width: 100%; | |
| margin-top: 4px; | |
| padding: 12px; | |
| border: 0; | |
| border-radius: 12px; | |
| background: var(--primary); | |
| color: #fff; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .pcard--done { background: var(--tint); border-color: var(--glow); } | |
| .pcard__label { | |
| font-size: 11px ; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| margin-bottom: 6px ; | |
| } | |
| .pcard__quote { | |
| margin: 0 0 8px; | |
| padding: 10px 14px; | |
| background: #fff; | |
| border-left: 3px solid var(--primary); | |
| border-radius: 0 10px 10px 0; | |
| font-family: var(--serif); | |
| font-size: 15px; | |
| white-space: pre-wrap; | |
| } | |
| /* Steady step: an optional breathing pace, about 5 breaths a minute. */ | |
| .breathe { | |
| align-self: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 0 4px; | |
| } | |
| .breathe__circle { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle, var(--glow), var(--tint)); | |
| border: 1px solid var(--glow); | |
| animation: breathe 11s ease-in-out infinite; | |
| } | |
| .breathe__cue { margin: 0; font-family: var(--sans); font-size: 12px; color: var(--muted); } | |
| @keyframes breathe { | |
| 0%, 100% { transform: scale(0.7); } | |
| 45%, 55% { transform: scale(1.15); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .breathe__circle { animation: none; } | |
| .path__dot { transition: none; } | |
| } | |
| /* Once the conversation is underway, the optional doors shrink to a row of chips. */ | |
| .scripture .short { display: none; } | |
| .optional--docked { flex-direction: row; flex-wrap: wrap; gap: 6px; } | |
| .optional--docked .scripture { | |
| width: auto; | |
| padding: 6px 11px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| gap: 5px; | |
| } | |
| .optional--docked .scripture svg { width: 13px; height: 13px; } | |
| .optional--docked .scripture .long { display: none ; } | |
| .optional--docked .scripture .short { display: inline; } | |
| /* Stick flush with the scroll area's top edge so no message peeks above. */ | |
| .path, .optional--docked { top: -20px; padding-top: 20px; } | |
| /* Ways-to-use label and two-line option buttons. */ | |
| .optional__label { | |
| margin: 0 0 2px; | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| line-height: 1.4; | |
| color: var(--muted); | |
| } | |
| .optional__label .short { display: none; } | |
| .scripture .long { display: flex; flex-direction: column; gap: 2px; text-align: left; } | |
| .scripture .long strong { font-weight: 700; } | |
| .scripture .long small { font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--muted); } | |
| .scripture--practice .long small { color: var(--primary); opacity: 0.85; } | |
| .scripture svg { flex-shrink: 0; } | |
| /* Docked: one quiet row, labelled so it reads as "add to this chat," not tabs. */ | |
| .optional--docked .optional__label { width: 100%; margin: 0; font-size: 11px; } | |
| .optional--docked .optional__label .long { display: none; } | |
| .optional--docked .optional__label .short { display: inline; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } | |
| .optional:not(.optional--docked) .scripture { align-items: flex-start; } | |
| .optional:not(.optional--docked) .scripture svg { margin-top: 2px; } | |