/* Two schemes, one set of names. The light look is the product's; the dark one follows the reader's system setting (Isaac asked for it, 2026-09-17), and the same variables carry both, so a screen written in these names needs nothing else. A page whose look the couple chose (the invitation, the wedding site) says data-scheme="light" on and stays out of it. Print is always light. Every pair below clears WCAG AA in both schemes; smoke.mjs checks. */ :root { color-scheme: light; --ground: #faf9f6; --surface: #ffffff; --panel: #f2f1eb; --ink: #26282c; --ink-soft: #5c5f58; --ink-faint: #8a8d84; --line: #e2e0d7; --accent: #3e6553; /* text and outlines in the product's green */ --accent-strong: color-mix(in srgb, var(--accent) 92%, white); /* a filled control with white on it: the top of a button, a ✓ */ --accent-deep: #2f4f40; /* the bottom of that gradient */ --accent-soft: #e7eee8; /* a tint to sit on */ --accent-ink: #2f4f40; /* text on the tint */ --rose: #a96a72; --rose-strong: #a96a72; /* a filled rose control with white on it */ --rose-soft: #f4e9ea; --rose-ink: #8e535b; /* an error line */ --gold-ink: #8a6d2e; /* the season-pass template chip */ --code-bg: rgba(38,40,44,.07); --toast-link: #9dc3ac; /* Undo on the toast (ink-coloured) */ } @media screen and (prefers-color-scheme: dark) { html:not([data-scheme="light"]) { color-scheme: dark; --ground: #161715; --surface: #1e201e; --panel: #262826; --ink: #e8e6df; --ink-soft: #b4b4ab; --ink-faint: #878a80; --line: #34362f; --accent: #7db496; --accent-strong: #4a7d62; --accent-deep: #2f4f40; --accent-soft: #22332a; --accent-ink: #b6d9c5; --rose: #d49aa2; --rose-strong: #a96a72; --rose-soft: #3a2a2d; --rose-ink: #e2adb4; --gold-ink: #d9be7a; --code-bg: rgba(255,255,255,.09); --toast-link: #2f4f40; } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 16px; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; } .font-display { font-family: "Fraunces", Georgia, serif; } button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; padding: 0; } input, textarea, select { font: inherit; color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(38,40,44,.05), 0 10px 30px -12px rgba(38,40,44,.12); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card-hover { cursor: pointer; } .card-hover:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 2px 4px rgba(38,40,44,.05), 0 18px 40px -14px rgba(38,40,44,.18); } .frost { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep)); color: #fff; font-weight: 500; padding: .625rem 1.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(38,40,44,.2), 0 8px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent); transition: transform .15s ease, filter .2s ease; } .btn-primary:hover { filter: brightness(1.06); } .btn-primary:active { transform: scale(.97); } .btn-quiet { display: inline-flex; align-items: center; border-radius: 9999px; padding: .375rem .875rem; font-size: .875rem; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); transition: transform .15s ease, filter .15s ease; } .btn-quiet:hover { filter: brightness(.97); } .btn-quiet:active { transform: scale(.96); } .field { border-radius: .875rem; border: 1px solid var(--line); background: var(--ground); padding: .625rem .875rem; outline: none; width: 100%; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .field:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 85%, white), var(--accent-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); user-select: none; } .avatar-rose { background: linear-gradient(135deg, color-mix(in srgb, var(--rose-strong) 80%, white), color-mix(in srgb, var(--rose-strong) 75%, black)); } .badge { border-radius: 9999px; background: var(--accent-soft); color: var(--accent-ink); padding: .25rem .75rem; font-size: .75rem; font-weight: 600; white-space: nowrap; } .eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } @keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .msg-in { animation: msg-in .28s cubic-bezier(.2,.9,.3,1.2) both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } .rise { animation: rise .45s ease both; } @keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } } .typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); margin-right: 3px; animation: blink 1.2s infinite; } .typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; } @media (prefers-reduced-motion: reduce) { .msg-in, .rise, .typing span { animation: none; } } /* ---------- layout ---------- */ #app { min-height: 100vh; min-height: 100dvh; } .screen { min-height: 100vh; min-height: 100dvh; } .center-col { max-width: 28rem; margin: 0 auto; padding: 1.5rem; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; } .hero-blob { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; z-index: 0; } .shell { display: flex; min-height: 100vh; min-height: 100dvh; } .sidebar { width: 16rem; flex-shrink: 0; border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; } .side-head { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 1rem 1.25rem; } .side-nav { flex: 1; overflow-y: auto; padding: 1rem .75rem; } .nav-label { padding: 0 .75rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; } .nav-item { display: flex; align-items: center; gap: .5rem; width: 100%; border-radius: 9999px; padding: .375rem .75rem; font-size: .875rem; color: var(--ink-soft); transition: background .15s ease, color .15s ease; text-align: left; } .nav-item:hover { background: var(--panel); color: var(--ink); } .nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; } .nav-item svg { flex-shrink: 0; color: var(--ink-faint); } .nav-item .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } /* ✦ Here has no bar; its phone menu button floats in this corner */ .main-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: .875rem 1.5rem; } .feed { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; } .feed-inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .msg { display: flex; align-items: flex-end; gap: .625rem; max-width: 100%; } .msg.mine { align-self: flex-end; flex-direction: row-reverse; } .msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .75rem; color: var(--ink-faint); margin-bottom: .125rem; } /* wraps: the tools row (Reply, Heart, Copy, Hide, Hide ) is wider than a phone */ .msg.mine .msg-meta { justify-content: flex-end; } .msg-meta b { color: var(--ink-soft); } .msg-tools { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: .25rem; opacity: 0; transition: opacity .15s; } .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; } @media (hover: none) { .msg-tools { opacity: .7; } } .msg-tools button { font: inherit; color: var(--ink-faint); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; } .msg-tools button:hover { color: var(--ink); } .msg-tools button.danger { color: var(--rose); } /* narration: the room telling you something happened — one quiet line, no avatar, no bubble (docs/HERE.md) */ .narr { align-self: center; max-width: 100%; text-align: center; font-size: .74rem; color: var(--ink-faint); line-height: 1.55; padding: 0 .5rem; border-radius: 8px; overflow-wrap: anywhere; } .narr + .narr { margin-top: -.55rem; } .narr .narr-who, .narr b { color: var(--ink-soft); font-weight: 600; } .narr .narr-body { color: var(--ink-soft); } .narr a { color: inherit; text-decoration: none; } .narr a:hover { text-decoration: underline; } .narr button.narr-more { font: inherit; color: var(--accent-ink); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; } .narr .msg-tools { margin-left: .4rem; } .narr:hover .msg-tools, .narr:focus-within .msg-tools { opacity: 1; } .msg-meta a.msg-time { color: inherit; text-decoration: none; } .msg-meta a.msg-time:hover { text-decoration: underline; } .bubble { max-width: 28rem; white-space: pre-wrap; border-radius: 1.5rem; padding: .625rem 1rem; font-size: .95rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(38,40,44,.05), 0 10px 30px -12px rgba(38,40,44,.12); overflow-wrap: break-word; } .msg.mine .bubble { border-bottom-right-radius: .375rem; color: #fff; background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep)); } .msg:not(.mine) .bubble { border-bottom-left-radius: .375rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .bubble a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; } .bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: .05em .3em; border-radius: 4px; background: var(--code-bg); } .msg.mine .bubble code { background: rgba(255,255,255,.18); } .bubble pre { margin: .35em 0; padding: .5em .75em; border-radius: .6rem; overflow-x: auto; background: var(--code-bg); white-space: pre; } .msg.mine .bubble pre { background: rgba(255,255,255,.14); } .bubble pre code { padding: 0; background: none; font-size: .82em; } .bubble blockquote { margin: .25em 0; padding: 0 0 0 .7em; border-left: 3px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink-soft); } .msg.mine .bubble blockquote { border-left-color: rgba(255,255,255,.45); color: rgba(255,255,255,.85); } .bubble ul, .bubble ol { margin: .2em 0; padding-left: 1.4em; } .bubble li { margin: .1em 0; } .bubble h4, .bubble h5, .bubble h6 { margin: .35em 0 .15em; font-size: 1em; line-height: 1.35; } .bubble h4 { font-size: 1.1em; } .bubble hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); margin: .5em 0; } .msg.mine .bubble hr { border-top-color: rgba(255,255,255,.4); } .composer { position: sticky; bottom: 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 1rem 1.5rem; } .composer-inner { max-width: 48rem; margin: 0 auto; display: flex; align-items: flex-end; gap: .75rem; } .composer textarea { resize: none; border-radius: 1.5rem; padding-left: 1rem; padding-right: 1rem; max-height: 10rem; min-height: 2.75rem; overflow-y: auto; } .composer.dropping { outline: 2px dashed var(--accent); outline-offset: -.5rem; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); } .page-scroll { flex: 1; overflow-y: auto; padding: 2rem 1.5rem; } .page-inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; } .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--ground); font-size: .875rem; font-weight: 500; padding: .625rem 1.25rem; border-radius: 9999px; box-shadow: 0 10px 30px -8px rgba(38,40,44,.4); z-index: 100; animation: rise .3s ease both; } .edit { outline: none; border-radius: 4px; cursor: text; padding: 0 2px; margin: 0 -2px; transition: background .12s ease, box-shadow .12s ease; } .edit:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); } .edit:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); } .edit:empty:before { content: attr(data-ph); color: var(--ink-faint); font-style: italic; } @media print { .edit:empty:before { content: ""; } } @media print { .edit:hover, .edit:focus { background: none; box-shadow: none; } } @media (max-width: 640px) { .demo-pill { display: none } } .demo-pill { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-faint); background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); border-radius: 9999px; padding: .3rem .8rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .menu-btn { display: none; } @media print { .sidebar, .scrim, .demo-pill, .toast, .no-print { display: none !important; } .shell, .main { display: block; min-height: 0; } .page-scroll { padding: 0; overflow: visible; } .print-sheet .card { border: none; box-shadow: none; border-radius: 0; padding: 0; } body { background: #fff; } } @media (max-width: 760px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .25s ease; background: var(--surface); box-shadow: 0 0 60px rgba(38,40,44,.15); } .sidebar.open { transform: translateX(0); } .menu-btn { display: inline-flex; } .scrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--ink) 25%, transparent); } } /* a preview's way back: fixed top-left, above everything; on a phone the explanation goes, so the badge at top-right never covers it */ .preview-back { position: fixed; top: 1rem; left: 1rem; z-index: 40; border-radius: 9999px; padding: .4rem 1rem; font-size: .8rem; font-weight: 600; background: #26282C; color: #FAF9F6; cursor: pointer; } @media (max-width: 640px) { .preview-back-note { display: none; } } /* the day-of sheet's "who to call" on a phone: one contact per block, never a sideways scroll */ @media (max-width: 640px) { .call-head { display: none !important; } .call-row { flex-direction: column !important; align-items: stretch !important; gap: .15rem !important; } .call-row > * { width: auto !important; text-align: left !important; } .call-row > button { align-self: flex-end; } }