/* Relief — warm, soft, romantic base styles. */ :root { --bg: #fff8f6; --bg-card: #fff; --ink: #3a2a2f; --ink-soft: #7a5e66; --rose: #f5d0d6; --rose-deep: #e89aa8; --plum: #b86b8a; --gold: #e7c79b; --danger: #8a3030; --shadow: 0 8px 32px rgba(184, 107, 138, 0.12); --radius: 20px; --safe-top: env(safe-area-inset-top); --safe-bot: env(safe-area-inset-bottom); } @media (prefers-color-scheme: dark) { :root { --bg: #1a1416; --bg-card: #261c1f; --ink: #f5e6e9; --ink-soft: #c5a8af; --rose: #4a2a32; --rose-deep: #c97a8e; --plum: #d99cb6; --danger: #f08585; --shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } } /* Explicit theme override (Settings → Appearance). The data-theme attribute on wins over the OS preference because attribute selectors carry higher specificity than the @media :root block. Removing the attribute reverts to "Auto" (OS-driven). */ :root[data-theme="dark"] { --bg: #1a1416; --bg-card: #261c1f; --ink: #f5e6e9; --ink-soft: #c5a8af; --rose: #4a2a32; --rose-deep: #c97a8e; --plum: #d99cb6; --danger: #f08585; --shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } :root[data-theme="light"] { --bg: #fff8f6; --bg-card: #fff; --ink: #3a2a2f; --ink-soft: #7a5e66; --rose: #f5d0d6; --rose-deep: #e89aa8; --plum: #b86b8a; --gold: #e7c79b; --danger: #8a3030; --shadow: 0 8px 32px rgba(184, 107, 138, 0.12); } * { box-sizing: border-box; } [x-cloak] { display: none !important; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; } .app-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 16px) 20px calc(var(--safe-bot) + 16px); max-width: 560px; width: 100%; margin: 0 auto; } h1 { font-size: 28px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.02em; } h2 { font-size: 20px; font-weight: 600; margin: 24px 0 8px; } h2:first-child { margin-top: 0; } p { margin: 0 0 12px; color: var(--ink-soft); } .card { background: var(--bg-card); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 16px; padding: 16px 24px; font-size: 17px; font-weight: 600; cursor: pointer; width: 100%; min-height: 56px; transition: transform 0.08s ease, opacity 0.15s ease; -webkit-tap-highlight-color: transparent; font-family: inherit; } .btn:active:not(:disabled) { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--rose-deep), var(--plum)); color: white; } .btn-secondary { background: var(--rose); color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink-soft); } .input { display: block; width: 100%; border: 2px solid var(--rose); background: var(--bg-card); color: var(--ink); border-radius: 14px; padding: 14px 16px; font-size: 17px; font-family: inherit; margin-bottom: 12px; -webkit-appearance: none; } .input:focus { outline: none; border-color: var(--plum); } .code-input { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 22px; letter-spacing: 0.08em; text-align: center; text-transform: lowercase; } .error { background: #f8e0e0; color: #7a2030; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: 15px; } .muted { color: var(--ink-soft); font-size: 14px; } .center { text-align: center; } .row { display: flex; gap: 12px; } .row > * { flex: 1; } .couple-code-display { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 26px; letter-spacing: 0.1em; text-align: center; padding: 20px; background: var(--rose); border-radius: 14px; margin: 16px 0; color: var(--ink); user-select: all; } .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Install instructions ─── */ .install-step { display: flex; gap: 14px; margin: 18px 0; align-items: flex-start; } .install-step-num { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--rose); color: var(--ink); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 2px; } .install-step-body { flex: 1; min-width: 0; } .install-step-title { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .install-step .muted { font-size: 14px; margin: 4px 0 0; line-height: 1.45; } .ios-icon { width: 26px; height: 26px; color: var(--plum); flex-shrink: 0; } /* ─── Mood ─── */ .mood-row { display: flex; align-items: center; padding: 10px 0; gap: 12px; border-bottom: 1px solid var(--rose); } .mood-row:last-of-type { border-bottom: none; } .mood-row-label { flex: 0 0 70px; color: var(--ink-soft); font-size: 14px; font-weight: 600; } .mood-row-value { flex: 1; min-width: 0; font-size: 17px; } .mood-row-action { flex: 0 0 auto; background: var(--rose); color: var(--ink); border: none; border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; } .mood-row-action:active:not(:disabled) { transform: scale(0.96); } .mood-row-action:disabled { opacity: 0.5; } .mood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .mood-chip { background: var(--bg); color: var(--ink); border: 2px solid var(--rose); border-radius: 14px; padding: 12px 10px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; text-align: left; } .mood-chip:active:not(:disabled) { transform: scale(0.97); } .mood-chip-current { background: var(--rose); border-color: var(--plum); } .mood-chip:disabled { opacity: 0.5; } /* Proxy-mood: when one partner notes the other's mood for them, the resulting entry stays muted to make the source obvious in the UI. Italic + reduced opacity + a trailing pencil glyph make the "logged by the other side" signal unmistakable without an extra label. */ .mood-proxy { opacity: 0.5; font-style: italic; } .mood-proxy::after { content: ' ✎'; font-size: 0.85em; opacity: 0.75; margin-left: 2px; } .mood-proxy strong { font-weight: 500; } .proxy-banner { background: var(--bg-card); border: 1px dashed var(--plum); border-radius: var(--radius); padding: 12px 14px; color: var(--ink); } /* Silent-send opt-in line on send forms — small/muted because the notification path is the default and most users won't toggle it. */ .silent-send-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-soft); margin: 8px 0 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .silent-send-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; } /* ─── Landing / unauthenticated marketing page ─── */ .lp-shell { max-width: 760px; margin: 0 auto; padding: 24px 4px 48px; width: 100%; } .lp-hero { text-align: center; padding: 24px 0 40px; } .lp-hero h1 { font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; } .lp-hero .lead { font-size: 17px; color: var(--ink-soft); max-width: 540px; margin: 0 auto 24px; line-height: 1.5; } .lp-cta-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 360px; margin: 0 auto; } .lp-cta-soft { color: var(--ink-soft); font-size: 13px; margin-top: 14px; text-align: center; } .lp-section { margin: 40px 0; } .lp-section h2 { font-size: 24px; margin: 0 0 14px; letter-spacing: -0.01em; } .lp-section p, .lp-section li { color: var(--ink); font-size: 16px; line-height: 1.55; } .lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; } @media (max-width: 600px) { .lp-grid { grid-template-columns: 1fr; } .lp-hero h1 { font-size: 30px; } .lp-hero .lead { font-size: 16px; } } .lp-feature { background: var(--bg-card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .lp-feature h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .lp-feature p { color: var(--ink-soft); font-size: 14px; margin: 0; } .lp-feature .emoji { font-size: 24px; display: block; margin-bottom: 6px; } .lp-callout { background: linear-gradient(135deg, var(--rose), var(--bg-card) 80%); border-radius: var(--radius); padding: 24px; margin: 28px 0; box-shadow: var(--shadow); } .lp-callout h2 { margin: 0 0 8px; font-size: 20px; } .lp-callout p { color: var(--ink); margin: 0 0 8px; font-size: 15px; } .lp-callout .muted-note { color: var(--ink-soft); font-size: 13px; margin-top: 10px; } .lp-principles ul { list-style: none; padding: 0; margin: 14px 0; } .lp-principles li { padding: 10px 0; border-bottom: 1px solid var(--rose); display: flex; gap: 12px; align-items: flex-start; } .lp-principles li:last-of-type { border-bottom: none; } .lp-principles .num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .lp-principles .body p { margin: 0; font-size: 15px; } .lp-principles .body strong { display: block; margin-bottom: 2px; font-size: 15px; } .lp-faq details { background: var(--bg-card); border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; box-shadow: var(--shadow); } .lp-faq summary { font-weight: 600; cursor: pointer; list-style: none; font-size: 15px; color: var(--ink); } .lp-faq summary::after { content: ' ▸'; color: var(--ink-soft); } .lp-faq details[open] summary::after { content: ' ▾'; } .lp-faq details p { margin: 10px 0 0; color: var(--ink); font-size: 14px; line-height: 1.55; } .lp-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rose); text-align: center; color: var(--ink-soft); font-size: 13px; } .lp-footer a { color: var(--plum); text-decoration: none; margin: 0 8px; } /* ─── Modal overlay ─── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; -webkit-tap-highlight-color: transparent; } .modal-card { background: var(--bg-card); border-radius: var(--radius); padding: 20px; max-width: 420px; width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: var(--shadow); color: var(--ink); } .modal-card p { color: var(--ink); } .modal-card .muted { color: var(--ink-soft); } /* ─── Dry spell ─── */ /* Three escalation tiers. Visuals warm up, never alarmed — this is care infrastructure, not a fire alarm. Header bar makes the section's purpose obvious so it doesn't read as a wall of text. */ .dry-spell-card { position: relative; } .dry-spell-l1 { /* soft */ border-left: 3px solid var(--rose); } .dry-spell-l2 { /* check-in */ border-left: 3px dashed var(--rose-deep); background: linear-gradient(180deg, var(--bg-card), var(--bg) 200%); } .dry-spell-l3 { /* honest moment */ border-left: 4px solid var(--plum); background: linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--rose) 30%, var(--bg-card)) 200%); } .dry-spell-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); } .dry-spell-l3 .dry-spell-header { color: var(--plum); } .dry-spell-days { font-size: 13px; font-weight: 600; color: var(--plum); letter-spacing: normal; text-transform: none; } .dry-spell-card p { margin: 0 0 8px; color: var(--ink); font-size: 15px; line-height: 1.5; } .dry-spell-card p + p { margin-top: 8px; } .dry-spell-card .muted-note { color: var(--ink-soft); font-size: 14px; } .dry-spell-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .dry-spell-actions .btn { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; font-size: 14px; } .dry-spell-preview-banner { background: var(--gold); color: var(--ink); text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; margin-bottom: 12px; } /* ─── Analytics ─── */ .analytics-h { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--ink); } .analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .analytics-grid-3 { grid-template-columns: repeat(3, 1fr); } .analytics-grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 460px) { .analytics-grid { grid-template-columns: repeat(2, 1fr); } .analytics-grid-3 { grid-template-columns: repeat(3, 1fr); } } .analytics-stat { background: var(--bg); border-radius: 12px; padding: 10px; text-align: center; } .analytics-stat-num { font-size: 22px; font-weight: 600; color: var(--plum); line-height: 1.1; } .analytics-stat-label { font-size: 11px; color: var(--ink-soft); margin-top: 2px; } .analytics-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--ink-soft); } .analytics-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; } .analytics-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; } /* Engagement timeline — stacked bar chart, plain HTML/CSS so it renders cleanly at any width and Alpine x-for can build the bars from data (which doesn't work inside ). */ .ec-chart { display: flex; align-items: stretch; height: 140px; margin-top: 4px; } .ec-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--ink-soft); padding-right: 6px; min-width: 22px; text-align: right; } .ec-plot { flex: 1; display: flex; align-items: stretch; gap: 1px; border-bottom: 1px solid var(--rose); border-left: 1px solid var(--rose); padding: 0 1px; min-width: 0; } .ec-bar { flex: 1; display: flex; flex-direction: column-reverse; min-width: 0; } .ec-seg { width: 100%; border-radius: 2px 2px 0 0; } .ec-xaxis { display: flex; margin-left: 28px; /* y-axis width + padding */ margin-top: 4px; font-size: 10px; color: var(--ink-soft); } .ec-xlabel { flex: 1; text-align: center; white-space: nowrap; min-width: 0; } .ec-xlabel-hidden { visibility: hidden; } .analytics-bar-pair { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bg); } .analytics-bar { transition: flex 0.2s ease; } .analytics-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; } .analytics-row-label { flex: 0 0 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .analytics-row-bar { height: 8px; border-radius: 4px; min-width: 4px; } .analytics-row-count { flex: 0 0 auto; color: var(--ink-soft); font-size: 13px; min-width: 24px; text-align: right; } .analytics-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; } .analytics-dow-cell { text-align: center; } .analytics-dow-bar { background: var(--plum); border-radius: 8px; padding: 12px 4px; color: white; font-size: 13px; font-weight: 600; margin-bottom: 4px; } .analytics-dow-label { font-size: 11px; color: var(--ink-soft); } /* Avatar — square thumbnail with rounded corners; degrades to a 👤 placeholder when no avatar is set. Sized to match the mood-card row so it slots in cleanly next to display_name. */ .avatar-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .avatar-thumb { width: 72px; height: 72px; border-radius: 12px; background: var(--bg); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .avatar-thumb img { width: 100%; height: 100%; object-fit: cover; } .avatar-placeholder { font-size: 32px; opacity: 0.4; } .avatar-mini { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 6px; flex-shrink: 0; } .avatar-mini img { width: 100%; height: 100%; object-fit: cover; } .avatar-mini-placeholder { font-size: 14px; opacity: 0.4; } .mood-manage-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 15px; border-bottom: 1px solid var(--rose); } .mood-manage-row:last-child { border-bottom: none; } .btn-tiny { background: transparent; color: var(--plum); border: none; font-size: 13px; font-family: inherit; cursor: pointer; padding: 4px 8px; } .btn-tiny:active:not(:disabled) { opacity: 0.6; } .btn-tiny:disabled { opacity: 0.5; } /* ─── Cards: pending request + celebration ─── */ .card-pending { background: linear-gradient(135deg, #fff 0%, var(--rose) 100%); border: 2px solid var(--rose-deep); } .card-celebrate { background: linear-gradient(135deg, var(--rose) 0%, var(--gold) 100%); border: 2px solid var(--rose-deep); } @media (prefers-color-scheme: dark) { .card-pending { background: linear-gradient(135deg, var(--bg-card) 0%, var(--rose) 100%); } .card-celebrate { background: linear-gradient(135deg, var(--rose) 0%, #5a432e 100%); } } :root[data-theme="dark"] .card-pending { background: linear-gradient(135deg, var(--bg-card) 0%, var(--rose) 100%); } :root[data-theme="dark"] .card-celebrate { background: linear-gradient(135deg, var(--rose) 0%, #5a432e 100%); } :root[data-theme="light"] .card-pending { background: linear-gradient(135deg, #fff 0%, var(--rose) 100%); } :root[data-theme="light"] .card-celebrate { background: linear-gradient(135deg, var(--rose) 0%, var(--gold) 100%); } /* ─── Mood history calendar ─── */ .history-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .history-nav-btn { background: var(--rose); color: var(--ink); border: none; border-radius: 12px; padding: 8px 16px; font-size: 22px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 44px; } .history-nav-btn:disabled { opacity: 0.5; } .history-nav-label { font-size: 18px; font-weight: 600; color: var(--ink); } .history-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; color: var(--ink-soft); text-align: center; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .history-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .history-cell { /* No fixed aspect-ratio — emojis stack vertically (mine over partner's), so cells are slightly taller than wide on narrow phones, which keeps 7 columns fitting inside the viewport without horizontal overflow. */ min-height: 56px; background: var(--bg); border-radius: 8px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; font-size: 11px; } .history-cell-blank { background: transparent; } .history-cell:not(.history-cell-blank) { cursor: pointer; -webkit-tap-highlight-color: transparent; } .history-cell-active { outline: 2px solid var(--plum); outline-offset: -2px; } .history-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rose); } .history-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 15px; } .history-cell-day { color: var(--ink-soft); font-size: 11px; font-weight: 600; margin-bottom: 2px; } .history-cell-emojis { /* Stacked vertically so both partners' emojis fit on narrow cells: mine on top, partner's underneath — implicit "rows" matching the mood card layout where 'You' is above your partner. */ display: flex; flex-direction: column; gap: 1px; align-items: center; font-size: 14px; line-height: 1; } .history-emoji { display: inline-block; } .history-emoji-partner { /* No special treatment yet — just sits next to mine. Future: subtle border or filter to differentiate at a glance. */ } .history-emoji-proxy { opacity: 0.4; filter: grayscale(0.4); } .history-cell-acts { display: flex; flex-wrap: wrap; gap: 1px; font-size: 13px; line-height: 1.1; } .history-emoji-overflow { font-size: 10px; color: var(--ink-soft); font-weight: 600; } .history-legend { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--ink-soft); margin-top: 16px; } /* Stacked variant: order top→bottom mirrors the cell's emoji stacking (yours on top, partner's underneath), so the rows are self-explanatory. */ .history-legend-stacked { flex-direction: column; gap: 2px; align-items: center; text-align: center; } /* ─── Image picker + display ─── */ .image-picker { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--rose); border-radius: 14px; padding: 16px; font-size: 15px; color: var(--ink-soft); cursor: pointer; background: var(--bg); margin-bottom: 12px; -webkit-tap-highlight-color: transparent; } .image-picker:active { background: var(--rose); color: var(--ink); } .initiation-image-wrap { margin-bottom: 12px; } .initiation-image { width: 100%; max-height: 480px; object-fit: cover; border-radius: 14px; display: block; } .initiation-image-loading { display: flex; align-items: center; justify-content: center; height: 120px; background: var(--rose); color: var(--ink-soft); border-radius: 14px; } /* ─── Explicit veil (tap-to-reveal placeholder) ─── */ .explicit-veil { width: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: repeating-linear-gradient( 45deg, var(--rose) 0, var(--rose) 12px, var(--bg-card) 12px, var(--bg-card) 24px ); color: var(--ink); border: 2px dashed var(--plum); border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; } .explicit-veil:active { transform: scale(0.98); transition: transform 0.08s; } .explicit-veil-emoji { font-size: 28px; } /* ─── Owner action row (edit text, replace/add/delete photo, delete) ─── */ .action-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rose); } .action-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); color: var(--ink-soft); border: 1px solid var(--rose); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .action-btn:active:not(:disabled) { transform: scale(0.96); transition: transform 0.08s; } .action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .action-btn-danger { color: var(--danger); border-color: var(--danger); } /* ─── Sent panels (collapsible "Requests Sent" / "Teases Sent") ─── */ .sent-panel { background: var(--bg-card); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow); overflow: hidden; } .sent-panel-header { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; color: var(--ink); border: none; padding: 16px 20px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; } .sent-panel-header:active { background: var(--rose); } .sent-panel-count { color: var(--ink-soft); font-weight: 500; margin-left: 4px; } .sent-panel-chevron { color: var(--ink-soft); font-size: 14px; flex-shrink: 0; margin-left: 8px; } .sent-panel-body { padding: 0 12px 12px; } /* Inner cards inside a sent panel get tighter spacing so the nesting reads as "items in a section" rather than "card inside a card". */ .sent-panel-body .card { margin-bottom: 8px; box-shadow: none; border: 1px solid var(--rose); } .sent-panel-body .card:last-child { margin-bottom: 0; } /* ─── Gallery grid ─── */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .gallery-item { aspect-ratio: 1 / 1; background: var(--rose); border-radius: 6px; overflow: hidden; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; } .gallery-item:active { transform: scale(0.97); transition: transform 0.08s; } .gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); } /* ─── Viewer overlay ─── */ .viewer { position: fixed; inset: 0; background: rgba(20, 10, 12, 0.96); z-index: 100; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--safe-top) + 16px) 0 calc(var(--safe-bot) + 16px); } .viewer-close { position: fixed; top: calc(var(--safe-top) + 16px); right: 16px; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.12); color: white; border: none; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; } .viewer-image-wrap { display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 60vh; max-height: 80vh; } .viewer-img { max-width: 100%; max-height: 80vh; object-fit: contain; } .viewer-meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; color: white; font-size: 14px; } .viewer-meta .muted { color: rgba(255, 255, 255, 0.6); } .viewer-meta .btn-tiny { color: rgba(255, 255, 255, 0.85); } .viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 80px; background: rgba(255, 255, 255, 0.08); color: white; border: none; font-size: 32px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .viewer-nav:disabled { opacity: 0.2; } .viewer-nav-prev { left: 0; border-radius: 0 8px 8px 0; } .viewer-nav-next { right: 0; border-radius: 8px 0 0 8px; } /* ─── Gallery tabs ─── */ .gallery-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .gallery-tab { flex: 1 1 auto; min-width: 0; background: var(--bg-card); color: var(--ink-soft); border: 1px solid var(--rose); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .gallery-tab-on { background: var(--rose); border-color: var(--plum); color: var(--ink); /* Intentionally no font-weight change — bolder text widens labels just enough to reflow neighbors when flex: 1 1 auto redistributes space. Background + border + color already signal the active state. */ } /* ─── Category pills (used in send forms + viewer) ─── */ .cat-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cat-pill { background: var(--bg-card); color: var(--ink-soft); border: 1px solid var(--rose); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cat-pill-on { background: var(--rose); border-color: var(--plum); color: var(--ink); font-weight: 600; } .cat-pill-dark { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.2); } .cat-pill-dark.cat-pill-on { background: var(--rose-deep); border-color: var(--rose-deep); color: white; } .viewer-cat-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 20px 8px; } /* Context strip below the photo: parent note + per-parent actions. */ .viewer-context { padding: 12px 20px 24px; color: rgba(255, 255, 255, 0.92); } .viewer-note { white-space: pre-wrap; margin: 0 0 12px; font-size: 15px; line-height: 1.45; } .viewer-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .action-btn-dark { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.2); } .action-btn-dark.action-btn-danger { color: #f5b7b7; border-color: rgba(245, 183, 183, 0.5); } /* ─── Level card ─── */ .level-card { background: linear-gradient(135deg, var(--bg-card) 0%, var(--rose) 100%); } .level-row { display: flex; align-items: center; gap: 14px; } .level-emoji { font-size: 36px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border-radius: 50%; flex-shrink: 0; } .level-name { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .level-bar { height: 8px; background: var(--bg-card); border-radius: 999px; overflow: hidden; } .level-bar-fill { height: 100%; background: linear-gradient(90deg, var(--rose-deep), var(--plum)); border-radius: 999px; transition: width 0.4s ease; } /* ─── Badge chips ─── */ .badge-row { display: flex; flex-wrap: wrap; gap: 6px; } .badge-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--rose); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--ink); } .badge-chip-emoji { font-size: 14px; } .badge-chip-name { color: var(--ink-soft); } /* ─── Weekly summary ─── */ .week-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; color: var(--ink); } .week-emoji { font-size: 18px; width: 24px; text-align: center; } /* ─── Acts checklist ─── */ .acts-grid { display: flex; flex-wrap: wrap; gap: 6px; } .act-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); color: var(--ink); border: 2px solid var(--rose); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .act-chip:active { transform: scale(0.96); transition: transform 0.08s; } .act-chip-on { background: var(--rose); border-color: var(--plum); color: var(--ink); font-weight: 600; } /* ─── Gender picker (used in onboarding + settings) ─── */ .gender-group { display: flex; gap: 8px; margin-bottom: 12px; } .gender-btn { flex: 1; background: var(--bg-card); color: var(--ink); border: 2px solid var(--rose); border-radius: 14px; padding: 12px 8px; font-size: 15px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; } .gender-btn:active { transform: scale(0.97); transition: transform 0.08s; } .gender-btn-on { background: var(--rose); border-color: var(--plum); font-weight: 600; } /* ─── Applies-to pills (for moods manage screen) ─── */ .applies-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .applies-pill { background: var(--bg-card); color: var(--ink-soft); border: 1px solid var(--rose); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .applies-pill-on { background: var(--rose); border-color: var(--plum); color: var(--ink); font-weight: 600; } .applies-pill:disabled { opacity: 0.5; } .mood-manage-card { padding: 10px 0; border-bottom: 1px solid var(--rose); } .mood-manage-card:last-child { border-bottom: none; } .mood-manage-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; color: var(--ink); } /* ─── Memories ─── */ .memory-item { padding: 16px 0; border-bottom: 1px solid var(--rose); } .memory-item:last-of-type { border-bottom: none; padding-bottom: 4px; } .memory-date { font-size: 12px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .memory-from { font-size: 15px; color: var(--ink); } /* ─── Hormone header ─── */ .hormone-header { padding: 18px; } .hormone-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; } .hormone-side { display: flex; flex-direction: column; align-items: stretch; min-width: 0; } .hormone-side-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 12px; } .hormone-avatar-row { display: flex; align-items: center; gap: 6px; } .hormone-state { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; } .hormone-state-emoji { font-size: 24px; line-height: 1; } .hormone-state-emoji--couple { font-size: 36px; } .hormone-state-label { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .hormone-state-label--couple { font-size: 11px; font-weight: 600; color: var(--ink); } .hormone-couple-state { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 32px; flex-shrink: 0; } .avatar-med { width: 100px; height: 100px; border-radius: 50%; background: var(--bg); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--rose); } .avatar-med img { width: 100%; height: 100%; object-fit: cover; } .avatar-med-placeholder { font-size: 44px; opacity: 0.4; } .avatar-med--clickable { cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .avatar-med--clickable:hover, .avatar-med--clickable:focus-visible { transform: scale(1.04); border-color: var(--rose-deep); outline: none; } .hormone-name { font-weight: 600; font-size: 14px; color: var(--ink); margin-top: 6px; } .hormone-mood { font-size: 12px; color: var(--ink-soft); margin-top: 2px; min-height: 16px; line-height: 1.2; position: relative; padding: 0 24px; } .hormone-mood .mood-proxy { font-style: italic; } .hormone-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; } .hormone-bar-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; } .hormone-bar-label { grid-column: 1; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hormone-bar-pct { grid-column: 2; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; justify-self: end; } .hormone-bar { grid-column: 1 / -1; height: 5px; background: var(--bg); border-radius: 999px; overflow: hidden; } .hormone-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease, background 0.3s ease; animation: hormone-bar-fill-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes hormone-bar-fill-in { from { width: 0%; } } /* Stagger so the four bars cascade rather than firing simultaneously. */ .hormone-bar-row:nth-child(2) .hormone-bar-fill { animation-delay: 0.08s; } .hormone-bar-row:nth-child(3) .hormone-bar-fill { animation-delay: 0.16s; } .hormone-bar-row:nth-child(4) .hormone-bar-fill { animation-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .hormone-bar-fill { animation: none; } } .hormone-bar-fill.tier-high { background: linear-gradient(90deg, var(--rose-deep), var(--gold)); } .hormone-bar-fill.tier-mid { background: linear-gradient(90deg, var(--rose-deep), var(--rose)); } .hormone-bar-fill.tier-low { background: var(--ink-soft); opacity: 0.55; } .mood-icon-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 6px; color: var(--ink-soft); border-radius: 6px; transition: background 0.15s ease, transform 0.15s ease; } .mood-icon-btn:hover:not(:disabled), .mood-icon-btn:focus-visible { background: var(--rose); transform: translateY(-50%) scale(1.1); outline: none; } .mood-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .hormone-disclaimer { font-size: 11px; text-align: center; margin-top: 14px; margin-bottom: 0; opacity: 0.85; } .hormone-meta { font-size: 11px; text-align: center; margin-top: 4px; margin-bottom: 0; }