/* ========================================================================== Shared theme system for the letter platform. Usage: set data-theme, data-font, data-size on . Themes: apology | congrats | love Fonts: serif | display | sans | hand Sizes: sm | md | lg ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; color: var(--text); background: var(--deep); font-family: var(--font-body); display: flex; flex-direction: column; align-items: center; padding: 48px 20px 72px; overflow-x: hidden; position: relative; } /* ============================== THEMES ================================== */ /* Apology — purple / rose night sky (the original design). */ body[data-theme="apology"] { --deep: #0d0818; --accent: #b47fff; --accent2: #e87a8c; --text: rgba(255,255,255,0.88); --muted: rgba(255,255,255,0.45); --faint: rgba(255,255,255,0.05); --border: rgba(255,255,255,0.1); --signature: rgba(180,127,255,0.72); --letter-body-color: rgba(255,255,255,0.76); } body[data-theme="apology"]::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.18) 0%, transparent 100%), radial-gradient(1px 1px at 88% 45%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 5% 80%, rgba(255,255,255,0.2) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 50% 15%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 22% 92%, rgba(255,255,255,0.18) 0%, transparent 100%), radial-gradient(1px 1px at 95% 70%, rgba(255,255,255,0.2) 0%, transparent 100%); pointer-events: none; z-index: 0; } body[data-theme="apology"]::after { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(120,60,200,0.18) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Congrats — warm cream / gold. */ body[data-theme="congrats"] { --deep: #1a140a; --accent: #e7b44a; --accent2: #f0e0b8; --text: rgba(255,248,230,0.92); --muted: rgba(255,240,210,0.5); --faint: rgba(255,230,180,0.06); --border: rgba(255,220,150,0.14); --signature: rgba(231,180,74,0.85); --letter-body-color: rgba(255,245,220,0.82); } body[data-theme="congrats"]::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,220,150,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 72% 8%, rgba(255,230,180,0.25) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,220,150,0.22) 0%, transparent 100%), radial-gradient(1px 1px at 88% 45%, rgba(255,240,200,0.28) 0%, transparent 100%), radial-gradient(2px 2px at 5% 80%, rgba(255,215,120,0.22) 0%, transparent 100%), radial-gradient(1px 1px at 95% 70%, rgba(255,230,170,0.2) 0%, transparent 100%); pointer-events: none; z-index: 0; } body[data-theme="congrats"]::after { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 640px; height: 640px; background: radial-gradient(circle, rgba(231,180,74,0.18) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Love — rose / ivory. */ body[data-theme="love"] { --deep: #2a0d18; --accent: #ff8fa3; --accent2: #ffd9df; --text: rgba(255,240,245,0.9); --muted: rgba(255,220,230,0.5); --faint: rgba(255,200,215,0.06); --border: rgba(255,180,200,0.14); --signature: rgba(255,143,163,0.82); --letter-body-color: rgba(255,235,240,0.82); } body[data-theme="love"]::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 15% 20%, rgba(255,210,220,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 72% 8%, rgba(255,200,215,0.22) 0%, transparent 100%), radial-gradient(1px 1px at 40% 60%, rgba(255,220,230,0.2) 0%, transparent 100%), radial-gradient(1px 1px at 88% 45%, rgba(255,215,225,0.28) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 50% 15%, rgba(255,220,235,0.35) 0%, transparent 100%); pointer-events: none; z-index: 0; } body[data-theme="love"]::after { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,143,163,0.18) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Corner accent used on reader + editor. */ .orb-bottom { position: fixed; bottom: -150px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 60%, transparent) 0%, transparent 65%); opacity: 0.35; pointer-events: none; z-index: 0; } /* ============================== FONTS =================================== */ body[data-font="serif"] { --font-body: 'Cormorant Garamond', Georgia, serif; --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Jost', system-ui, sans-serif; } body[data-font="display"] { --font-body: 'Playfair Display', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --font-ui: 'Jost', system-ui, sans-serif; } body[data-font="sans"] { --font-body: 'Jost', system-ui, sans-serif; --font-display: 'Jost', system-ui, sans-serif; --font-ui: 'Jost', system-ui, sans-serif; } body[data-font="hand"] { --font-body: 'Caveat', cursive; --font-display: 'Caveat', cursive; --font-ui: 'Jost', system-ui, sans-serif; } /* ============================== SIZES =================================== */ body[data-size="sm"] { --letter-size: clamp(15px, 2.1vw, 17px); } body[data-size="md"] { --letter-size: clamp(17px, 2.5vw, 20px); } body[data-size="lg"] { --letter-size: clamp(19px, 3vw, 23px); } /* ============================== LAYOUT ================================== */ .wrapper { position: relative; z-index: 1; width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 28px; } .petals { display: flex; justify-content: center; gap: 10px; opacity: 0; animation: rise 1.2s ease forwards 0.2s; } .petal { font-size: 20px; display: inline-block; animation: sway 4s ease-in-out infinite; } .petal:nth-child(2) { animation-delay: 0.6s; } .petal:nth-child(3) { animation-delay: 1.2s; } .petal:nth-child(4) { animation-delay: 1.8s; } .petal:nth-child(5) { animation-delay: 2.4s; } @keyframes sway { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(5deg); } } .header { text-align: center; opacity: 0; animation: rise 1.2s ease forwards 0.5s; } .eyebrow { font-family: var(--font-ui); font-weight: 300; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); opacity: 0.85; margin-bottom: 18px; } h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 6vw, 52px); line-height: 1.2; } h1 em { font-style: italic; color: color-mix(in srgb, var(--text) 60%, transparent); } .card { background: var(--faint); border: 0.5px solid var(--border); border-radius: 24px; padding: clamp(32px, 6vw, 52px) clamp(28px, 6vw, 48px); backdrop-filter: blur(12px); opacity: 0; animation: rise 1.4s ease forwards 0.8s; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 280px; height: 200px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%); pointer-events: none; } .letter-body { font-family: var(--font-body); font-size: var(--letter-size, clamp(17px, 2.5vw, 20px)); font-weight: 300; line-height: 1.95; color: var(--letter-body-color); white-space: pre-line; margin-bottom: 32px; } .divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0; } .divider-line { flex: 1; height: 0.5px; background: var(--border); } .divider-heart { color: var(--accent2); font-size: 14px; animation: pulse 2.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 1; } } .signature { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 2.5vw, 21px); color: var(--signature); text-align: right; } /* ============================== CHAT ==================================== */ .chat-section { opacity: 0; animation: rise 1.4s ease forwards 1.1s; } .chat-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 16px; } .messages-box { background: var(--faint); border: 0.5px solid var(--border); border-radius: 20px; padding: 20px; min-height: 160px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; scroll-behavior: smooth; } .messages-box::-webkit-scrollbar { width: 4px; } .messages-box::-webkit-scrollbar-track { background: transparent; } .messages-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } .msg-empty { font-family: var(--font-body); font-style: italic; font-size: 16px; color: var(--muted); text-align: center; margin: auto; padding: 24px 0; } .msg-wrap { display: flex; flex-direction: column; } .msg-wrap.recipient { align-items: flex-start; } .msg-wrap.creator { align-items: flex-end; } .msg-bubble { max-width: 82%; padding: 11px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-break: break-word; animation: pop 0.3s ease; font-family: var(--font-ui); } @keyframes pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .msg-bubble.recipient { background: color-mix(in srgb, var(--accent) 16%, transparent); border: 0.5px solid color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); border-bottom-left-radius: 4px; } .msg-bubble.creator { background: color-mix(in srgb, var(--accent2) 16%, transparent); border: 0.5px solid color-mix(in srgb, var(--accent2) 28%, transparent); color: var(--text); border-bottom-right-radius: 4px; } .msg-meta { font-family: var(--font-ui); font-size: 11px; color: var(--muted); margin-top: 4px; display: block; } .sender-toggle { display: flex; border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 10px; width: fit-content; } .sender-toggle button { font-family: var(--font-ui); font-size: 12px; font-weight: 300; padding: 7px 18px; background: transparent; border: none; color: var(--muted); cursor: pointer; transition: all 0.2s; letter-spacing: 1px; } .sender-toggle button.active { background: rgba(255,255,255,0.08); color: var(--text); } .input-row { display: flex; gap: 10px; align-items: flex-end; } .msg-input { flex: 1; background: var(--faint); border: 0.5px solid var(--border); border-radius: 14px; padding: 13px 16px; color: var(--text); font-family: var(--font-ui); font-size: 14px; font-weight: 300; resize: none; min-height: 48px; max-height: 120px; outline: none; transition: border-color 0.2s; line-height: 1.5; } .msg-input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .msg-input::placeholder { color: var(--muted); } .send-btn { width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 25%, transparent); border: 0.5px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .send-btn:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); } .send-btn:active { transform: scale(0.95); } .send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .status-msg { font-family: var(--font-ui); font-size: 12px; color: var(--muted); text-align: center; min-height: 18px; margin-top: 8px; letter-spacing: 0.5px; } .status-msg.error { color: color-mix(in srgb, var(--accent2) 85%, #ffffff); } .status-msg.ok { color: rgba(100,220,150,0.85); } .footer { font-family: var(--font-ui); text-align: center; font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.18); letter-spacing: 2px; text-transform: uppercase; opacity: 0; animation: rise 1.4s ease forwards 1.4s; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Floating decorations injected by themes.js */ .falling-glyph { position: fixed; top: -30px; pointer-events: none; z-index: 0; animation: fall linear infinite; opacity: 0; } @keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 0.5; } 80% { opacity: 0.3; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } } /* ============================== LOCK SCREEN ============================= */ .lock-screen { position: relative; z-index: 1; width: 100%; max-width: 480px; margin: 60px auto 0; background: var(--faint); border: 0.5px solid var(--border); border-radius: 24px; padding: clamp(36px, 7vw, 56px) clamp(28px, 6vw, 44px); backdrop-filter: blur(12px); text-align: center; animation: rise 1.2s ease 0.5s both; } .lock-screen.hidden { display: none; } .lock-icon { font-size: 32px; margin-bottom: 20px; opacity: 0.85; } .lock-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 4vw, 30px); margin-bottom: 10px; } .lock-sub { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; } .lock-hint-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); opacity: 0.85; margin-bottom: 10px; } .lock-hint { font-family: var(--font-body); font-style: italic; font-size: clamp(16px, 2.3vw, 18px); color: var(--letter-body-color); margin-bottom: 28px; line-height: 1.5; } .lock-input { width: 100%; background: var(--faint); border: 0.5px solid var(--border); border-radius: 14px; padding: 14px 18px; color: var(--text); font-family: var(--font-ui); font-size: 15px; font-weight: 300; letter-spacing: 1px; text-align: center; outline: none; transition: border-color 0.2s; margin-bottom: 14px; } .lock-input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .lock-input::placeholder { color: var(--muted); letter-spacing: 2px; } .lock-btn { width: 100%; padding: 13px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 25%, transparent); border: 0.5px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); font-family: var(--font-ui); font-size: 13px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; } .lock-btn:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); } .lock-btn:active { transform: scale(0.98); } .lock-btn:disabled { opacity: 0.5; cursor: not-allowed; } .lock-status { font-family: var(--font-ui); font-size: 12px; color: var(--muted); min-height: 18px; margin-top: 14px; letter-spacing: 0.5px; } .lock-status.error { color: color-mix(in srgb, var(--accent2) 85%, #ffffff); } .lock-screen.shake { animation: shake 0.45s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .wrapper.hidden { display: none; } /* ============================== FORMS (create/edit) ==================== */ .form-card { background: var(--faint); border: 0.5px solid var(--border); border-radius: 24px; padding: clamp(28px, 5vw, 40px); backdrop-filter: blur(12px); position: relative; z-index: 1; width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 20px; opacity: 0; animation: rise 1.2s ease forwards 0.4s; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); } .field .hint-copy { font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-style: italic; margin-top: -4px; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field textarea { background: rgba(0,0,0,0.18); border: 0.5px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: var(--font-ui); font-size: 14px; font-weight: 300; outline: none; transition: border-color 0.2s; width: 100%; } .field textarea { min-height: 180px; resize: vertical; line-height: 1.7; font-family: var(--font-body); font-size: 16px; } .field input:focus, .field textarea:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > .field { flex: 1 1 180px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; background: transparent; border: 0.5px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; } .chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .chip.active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); } .primary-btn { padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 25%, transparent); border: 0.5px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); font-family: var(--font-ui); font-size: 13px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; } .primary-btn:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); } .primary-btn:active { transform: scale(0.98); } .primary-btn:disabled { opacity: 0.5; cursor: not-allowed; } .link-out { display: block; padding: 12px 14px; background: rgba(0,0,0,0.18); border: 0.5px solid var(--border); border-radius: 12px; color: var(--accent); font-family: var(--font-ui); font-size: 13px; word-break: break-all; text-decoration: none; } .link-out:hover { background: rgba(0,0,0,0.28); } .copy-btn { font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: transparent; border: 0.5px solid var(--border); color: var(--muted); cursor: pointer; margin-top: 8px; } .copy-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .notice { font-family: var(--font-ui); font-size: 12px; line-height: 1.6; color: var(--muted); padding: 12px 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px; }