/* =================================== Vintage Letter Studio - "The Writing Desk" Redesign Clean, Warm, Elegant, Focused =================================== */ /* === VIEWER MODE — early-paint guards (set on ) ============== */ /* When the page is opened with ?id=...&view=letter we hide all editor surfaces synchronously so recipients never flash the create-letter UI. */ html.viewer-mode #landingSection, html.viewer-mode #appSection, html.viewer-mode .mobile-tabs, html.viewer-mode #loadingScreen { display: none !important; } html:not(.viewer-mode) #viewerLoadingScreen { display: none !important; } /* === LOADING SCREENS === */ .loading-container { position: fixed; inset: 0; z-index: 4000; background: #F8F5F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; transition: opacity 0.35s ease; } .loading-container.hidden { opacity: 0; pointer-events: none; } .loading-spinner { width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(212,175,55,0.25); border-top-color: #D4AF37; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-container h2 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: #2C3338; margin-top: 0.5rem; } .loading-container p { font-size: 0.9rem; color: #5C6B73; } /* Heart loader — used for recipient (?view=letter) loading state */ .viewer-loading { position: fixed; inset: 0; z-index: 4000; background: radial-gradient(circle at 20% 0%, rgba(212,175,55,0.10) 0%, transparent 55%), radial-gradient(circle at 80% 100%, rgba(216, 27, 96, 0.08) 0%, transparent 55%), #FBF7F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; transition: opacity 0.45s ease; } .viewer-loading.hidden { opacity: 0; pointer-events: none; } .heart-loader { position: relative; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; } .heart-loader__pulse { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(216, 27, 96, 0.18) 0%, rgba(216, 27, 96, 0) 70%); animation: heartPulseGlow 1.6s ease-in-out infinite; } .heart-loader__icon { font-size: 3.5rem; color: #D81B60; filter: drop-shadow(0 4px 8px rgba(216, 27, 96, 0.25)); animation: heartBeat 1.6s ease-in-out infinite; } @keyframes heartBeat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(0.95); } 60% { transform: scale(1.10); } 80% { transform: scale(0.98); } } @keyframes heartPulseGlow { 0%, 100% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } } .viewer-loading__title { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #2C3338; margin-top: 0.5rem; } .viewer-loading__sub { font-size: 0.95rem; color: #5C6B73; max-width: 320px; } /* === ROOT VARIABLES === */ :root { /* Color Palette - Warm & Natural */ --color-paper: #FDFBF7; --color-paper-shadow: #E8E4D9; --color-ink: #2C3338; --color-ink-light: #5C6B73; --color-accent: #D4AF37; /* Gold */ --color-primary: #1E3A8A; /* Royal/Slate Blue */ --color-primary-light: #3B82F6; --color-success: #10B981; --color-error: #EF4444; --color-info: #3B82F6; /* Backgrounds */ --bg-main: #F8F5F0; /* Refined Warm Alabaster */ --bg-panel: #FFFFFF; /* Borders */ --border-light: #E8E2D8; --border-focus: #D4AF37; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025); --shadow-paper: 0 1px 3px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.05); /* Typography */ --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Playfair Display', serif; --font-body: 'Crimson Text', serif; /* Layout */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* Transitions */ --transition: 0.2s ease-in-out; } /* Dark Mode Overrides - "Midnight Study" */ .dark { --color-paper: #1E1E24; --color-paper-shadow: #121216; --color-ink: #E4E4E7; --color-ink-light: #A1A1AA; --bg-main: #121212; --bg-panel: #1C1C1E; --border-light: #27272A; } /* === BASE RESET & TYPOGRAPHY === */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-main); background-image: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(232,226,216,0.3) 100%); color: var(--color-ink); font-family: var(--font-ui); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-ink); font-weight: 700; } button, input, textarea { font-family: inherit; } /* === LAYOUT STRUCTURE === */ .app-container { max-width: 1400px; margin: 0 auto; padding: 2rem; flex: 1; display: flex; flex-direction: column; gap: 2rem; } /* Header */ .app-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); } .brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--color-ink); } .brand-logo { width: 40px; height: 40px; object-fit: contain; } .brand-text h1 { font-size: 1.5rem; line-height: 1.2; } .brand-text p { font-size: 0.875rem; color: var(--color-ink-light); font-family: var(--font-ui); } /* Navigation Actions */ .nav-actions { display: flex; gap: 0.75rem; } /* Main Editor Area */ .editor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } /* === PANELS & CARDS === */ .panel { background: var(--bg-panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); overflow: hidden; } /* === LEFT SIDE: EDITOR === */ .editor-pane { display: flex; flex-direction: column; gap: 2rem; } /* Theme Selector - Horizontal Scroll */ .theme-selector-container { background: var(--bg-panel); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } .section-title { font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--color-ink-light); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; font-weight: 600; } .theme-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; } .theme-option { flex: 0 0 auto; width: 100px; cursor: pointer; border-radius: var(--radius-sm); border: 2px solid transparent; padding: 0.5rem; transition: var(--transition); text-align: center; } .theme-option:hover { background: var(--color-paper); } .theme-option.active { border-color: var(--color-accent); background: var(--color-paper); } .theme-circle { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 0.5rem; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.1); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--color-ink); background-color: #fff; /* Default background */ } /* Theme Icon Colors */ .peacock-preview { color: #0F6B6B; background: #FFF9F0; } .sepia-preview { color: #8B4513; background: #F5E6D3; } .romantic-preview { color: #EC4899; background: #FDF2F8; } .autumn-preview { color: #D97706; background: #FFF7ED; } .midnight-preview { color: #FFD700; background: #0F1C2E; } .minimal-preview { color: #64748B; background: #FFFFFF; } .theme-name { font-size: 0.75rem; font-weight: 500; color: var(--color-ink); } /* Writing Form */ .writing-form { background: var(--bg-panel); padding: 1.75rem; border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-label { font-size: 0.78rem; font-weight: 700; color: var(--color-ink-light); text-transform: uppercase; letter-spacing: 0.06em; } .form-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .char-count { font-size: 0.72rem; color: var(--color-ink-light); font-variant-numeric: tabular-nums; } .char-count.text-red-600 { color: var(--color-error); font-weight: 600; } .form-input { padding: 0.7rem 0.9rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 1rem; background: var(--color-paper); color: var(--color-ink); transition: var(--transition); width: 100%; min-width: 0; } .form-input:focus { outline: none; border-color: var(--color-accent); background: #FFF; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); } .form-input--sm { padding: 0.55rem 0.8rem; font-size: 0.92rem; } textarea.form-input.letter-textarea, textarea.form-input { min-height: 240px; resize: vertical; line-height: 1.75; font-family: var(--font-body); font-size: 1.08rem; } /* Toolbar */ .editor-toolbar { display: flex; gap: 0.5rem; margin: 0 0 0.5rem; flex-wrap: wrap; align-items: center; } .toolbar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .tool-btn { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; font-size: 0.92rem; line-height: 1; cursor: pointer; color: var(--color-ink-light); transition: var(--transition); min-height: 36px; display: inline-flex; align-items: center; gap: 0.3rem; } .tool-btn:hover { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink-light); } .tool-btn--ideas { color: #92400E; border-color: rgba(212,175,55,0.4); background: rgba(255,251,235,0.6); } .tool-btn-label { font-size: 0.85rem; font-weight: 600; } /* Author email card — emphasize value props */ .author-email-card { background: linear-gradient(135deg, rgba(255, 251, 235, 0.85), rgba(254, 243, 199, 0.45)); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: var(--radius-md); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; } .author-email-card__head { display: flex; gap: 0.85rem; align-items: flex-start; } .author-email-card__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(212, 175, 55, 0.18); color: #92400E; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .author-email-card__title { font-family: var(--font-heading); font-weight: 700; color: #78350F; font-size: 1rem; line-height: 1.2; } .author-email-card__opt { font-family: var(--font-ui); font-weight: 400; font-size: 0.78rem; color: var(--color-ink-light); } .author-email-card__help { font-size: 0.85rem; color: #6B4F1D; line-height: 1.55; margin-top: 0.2rem; } .author-email-card__help strong { color: #5A3F0F; font-weight: 600; } .author-email-card .form-input { background: #FFF; border-color: rgba(212, 175, 55, 0.45); } /* Collapsible advanced sections (delivery / privacy) */ .advanced-section { border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #FAFAF7; overflow: hidden; } .advanced-section[open] { background: var(--bg-panel); box-shadow: var(--shadow-sm); } .advanced-section__summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; color: var(--color-ink); user-select: none; } .advanced-section__summary::-webkit-details-marker { display: none; } .advanced-section__summary i { color: var(--color-accent); width: 1.2em; text-align: center; } .advanced-section__summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; color: var(--color-ink-light); transition: transform 0.2s ease; font-size: 0.78rem; } .advanced-section[open] .advanced-section__summary::after { transform: rotate(180deg); } .advanced-section__hint { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-light); font-weight: 500; background: rgba(0,0,0,0.04); padding: 0.15rem 0.5rem; border-radius: 999px; } .advanced-section[open] .advanced-section__hint { display: none; } .advanced-section__body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.85rem; } .delivery-option { display: flex; flex-direction: column; gap: 0.45rem; } .delivery-option__input { margin-left: 1.7rem; display: flex; flex-direction: column; gap: 0.3rem; } .checkbox-row { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; color: var(--color-ink); min-height: 36px; } .checkbox-row input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--color-accent); } .hint-text { font-size: 0.78rem; color: var(--color-ink-light); line-height: 1.4; } /* Action Bar */ .action-bar { display: flex; gap: 0.75rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); flex-wrap: wrap; } .action-bar .btn { min-height: 48px; } .auto-save-indicator { text-align: center; font-size: 0.78rem; color: var(--color-ink-light); margin-top: 0.5rem; } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: var(--transition); border: none; } .btn-primary { background: var(--color-primary); color: #FFF; box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2); } .btn-primary:hover { background: var(--color-primary-light); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(139, 69, 19, 0.3); } .btn-secondary { background: white; border: 1px solid var(--border-light); color: var(--color-ink); } .btn-secondary:hover { background: var(--color-paper); border-color: var(--color-ink-light); } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; color: var(--color-ink-light); border: 1px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .btn-icon:hover { background: var(--color-paper); color: var(--color-ink); border-color: var(--border-light); } /* === RIGHT SIDE: PREVIEW === */ .preview-pane { position: sticky; top: 2rem; } .preview-container { background: var(--bg-panel); /* Base background behind paper */ padding: 2rem; border-radius: var(--radius-lg); box-shadow: inset 0 0 20px rgba(0,0,0,0.05); /* Subtle inset depth */ display: flex; justify-content: center; align-items: flex-start; min-height: 600px; border: 1px solid var(--border-light); } /* The Paper Itself */ .letter-paper { background: #FFF; width: 100%; max-width: 600px; /* A4-ish ratio */ min-height: 800px; padding: 4rem; box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 8px 8px rgba(0,0,0,0.1), 0 16px 16px rgba(0,0,0,0.1); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Default typography for paper */ font-family: var(--font-body); font-size: 1.15rem; color: #1A1A1A; } .letter-content { position: relative; z-index: 2; /* Above decorations */ height: 100%; display: flex; flex-direction: column; } .letter-header { margin-bottom: 2rem; text-align: left; } .letter-recipient { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .letter-date { font-size: 0.9rem; opacity: 0.7; font-style: italic; } .letter-body { flex: 1; white-space: pre-wrap; line-height: 1.8; } .letter-footer { margin-top: 3rem; text-align: right; } .letter-sign-off { margin-bottom: 0.5rem; } .letter-signature { font-family: 'Great Vibes', cursive; /* Default signature font */ font-size: 2rem; } /* === MODALS === */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: var(--transition); } .modal-backdrop.active { opacity: 1; pointer-events: auto; } .modal { background: var(--bg-panel); width: calc(100% - 2rem); max-width: 500px; max-height: calc(100vh - 2rem); overflow-y: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 1.75rem; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-overflow-scrolling: touch; } .modal-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; } .modal-actions .btn { min-height: 46px; } .author-email-modal { max-width: 460px; } .author-email-modal .modal-title i { color: var(--color-accent); margin-right: 0.4rem; } .author-email-modal__body { display: flex; flex-direction: column; gap: 1rem; } .author-email-modal__lead { color: var(--color-ink); line-height: 1.55; font-size: 0.98rem; } .author-email-modal__benefits { list-style: none; margin: 0; padding: 0.75rem 0.9rem; background: rgba(255, 251, 235, 0.7); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 0.5rem; } .author-email-modal__benefits li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--color-ink); line-height: 1.45; } .author-email-modal__benefits li i { color: #92400E; width: 1em; text-align: center; margin-top: 0.18rem; flex-shrink: 0; } .author-email-modal__fineprint { font-size: 0.78rem; color: var(--color-ink-light); display: flex; gap: 0.4rem; align-items: center; } /* Template grid */ .template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .template-btn { background: var(--color-paper); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.85rem 0.9rem; font-size: 0.95rem; font-weight: 600; color: var(--color-ink); cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.55rem; text-align: left; min-height: 52px; } .template-btn:hover { border-color: var(--color-accent); background: #FFF; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .template-emoji { font-size: 1.2rem; line-height: 1; } .modal-backdrop.active .modal { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .modal-title { font-size: 1.5rem; font-family: var(--font-heading); } .close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-ink-light); } /* === UTILITIES & ANIMATIONS === */ .hidden { display: none !important; } .fade-in { animation: fadeIn 0.3s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* === MOBILE RESPONSIVENESS === */ .mobile-tabs { display: none; /* Hidden on desktop */ } @media (max-width: 1024px) { .editor-layout { grid-template-columns: 1fr; gap: 1.5rem; } .preview-pane { display: none; /* Hidden by default on mobile, toggled via tabs */ } .preview-pane.active { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--bg-main); padding: 1rem; padding-bottom: 88px; /* Space for tabs */ overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-panel); border-top: 1px solid var(--border-light); z-index: 500; padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px rgba(0,0,0,0.05); gap: 0.4rem; } .mobile-tab { flex: 1; padding: 0.85rem 0.5rem; border: none; background: none; font-weight: 600; font-size: 0.95rem; color: var(--color-ink-light); cursor: pointer; border-radius: var(--radius-sm); min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .mobile-tab.active { background: var(--color-paper); color: var(--color-primary); } .app-container { padding: 1rem; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); gap: 1.25rem; } .preview-pane.active .preview-container { padding: 1rem; min-height: auto; } .letter-paper { padding: 1.75rem 1.25rem; min-height: auto; max-width: 100%; font-size: 1.05rem; } /* Header packs tighter on small screens */ .app-header { padding-bottom: 1rem; gap: 0.75rem; flex-wrap: wrap; } .brand-text .text-xl { font-size: 1.1rem; } .brand-text p { font-size: 0.78rem; } .writing-form { padding: 1.25rem; } /* Floating support button — keep above mobile tabs and respect safe area */ .fixed.bottom-6.right-6 { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 640px) { body { font-size: 15px; } /* Landing — tighter, no overflow */ #landingSection { padding-left: 1rem !important; padding-right: 1rem !important; } #landingSection h1 { font-size: 2.25rem; line-height: 1.15; } #landingSection p { font-size: 1rem; } #landingSection .grid { gap: 1.25rem !important; margin-top: 3rem !important; } /* Form — single column, tighter */ .form-row { grid-template-columns: 1fr; gap: 0.85rem; } .writing-form { padding: 1rem; border-radius: var(--radius-md); } .form-input { padding: 0.65rem 0.85rem; font-size: 16px; /* prevent iOS zoom on focus */ } textarea.form-input, textarea.form-input.letter-textarea { min-height: 200px; font-size: 1rem; } .editor-toolbar { gap: 0.4rem; } .font-select { font-size: 0.85rem; max-width: 100%; } .author-email-card { padding: 0.85rem; } .author-email-card__head { gap: 0.7rem; } .author-email-card__title { font-size: 0.95rem; } .author-email-card__help { font-size: 0.82rem; } .advanced-section__summary { padding: 0.75rem 0.85rem; font-size: 0.92rem; } .advanced-section__body { padding: 0 0.85rem 0.85rem; } .delivery-option__input { margin-left: 1.5rem; } .action-bar { flex-direction: column; gap: 0.6rem; } .action-bar .btn { width: 100%; } /* Theme strip — bigger taps, less squish */ .theme-selector-container { padding: 1rem; } .theme-scroll { gap: 0.6rem; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .theme-option { width: 84px; scroll-snap-align: start; } .theme-circle { width: 44px; height: 44px; } /* Modal polish — full-bleed bottom sheet feel */ .modal { padding: 1.25rem; border-radius: var(--radius-md); } .modal-title { font-size: 1.2rem; } .modal-actions { flex-direction: column; } .modal-actions .btn { width: 100%; } .template-grid { grid-template-columns: 1fr; } /* Toast — full width minus margins */ .toast-container { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 1rem; left: 1rem; } .toast { max-width: none; } /* Header buttons label collapse */ .nav-actions .nav-btn .hidden.sm\:inline { display: none !important; } } /* Tap targets — universal */ button, .btn, .tool-btn, .checkbox-row, a.btn { -webkit-tap-highlight-color: transparent; } /* === TOAST === */ .toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 2000; } .toast { background: var(--bg-panel); border-left: 4px solid var(--color-success); padding: 1rem 1.5rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); margin-top: 1rem; display: flex; align-items: center; gap: 1rem; animation: slideInRight 0.3s ease; max-width: 350px; } .toast.error { border-color: var(--color-error); } .toast.info { border-color: var(--color-info); } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* === WAX SEAL ANIMATION === */ .wax-seal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .wax-seal-overlay.animate-seal { opacity: 1; pointer-events: auto; } .wax-seal-stamped { width: 150px; height: 150px; background: radial-gradient(circle at 30% 30%, #ff4d4d, #990000); border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 2px 2px 10px rgba(255,255,255,0.4), inset -2px -2px 10px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.3); font-size: 3rem; transform: scale(2); opacity: 0; border: 4px solid #cc0000; } .wax-seal-overlay.animate-seal .wax-seal-stamped { animation: sealStamp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes sealStamp { 0% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* === FONT SELECTOR === */ .font-selector-container { margin-bottom: 0.5rem; } .font-select { appearance: none; background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.4rem 2rem 0.4rem 0.8rem; font-size: 0.9rem; color: var(--color-ink); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em; } .font-select:hover { border-color: var(--color-ink-light); } .font-select:focus { outline: none; border-color: var(--color-accent); } /* === VIEWER MODE (recipient view: ?id=...&view=letter) === */ .viewer-section { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-main); background-image: radial-gradient(circle at 20% 0%, rgba(212,175,55,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 100%, rgba(30,58,138,0.06) 0%, transparent 50%); } .viewer-section.hidden { display: none; } .viewer-topbar { padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-light); background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); } .viewer-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--color-ink); } .viewer-brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .viewer-brand-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.2; } .viewer-brand-sub { font-size: 0.78rem; color: var(--color-ink-light); } .viewer-stage { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; display: flex; flex-direction: column; gap: 2rem; } .viewer-meta { text-align: center; } .viewer-from-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-light); margin-bottom: 0.5rem; } .viewer-from-name { font-family: var(--font-heading); font-size: clamp(1.85rem, 4vw, 2.6rem); font-weight: 700; color: var(--color-ink); line-height: 1.15; margin-bottom: 0.6rem; } .viewer-meta-row { font-size: 0.92rem; color: var(--color-ink-light); display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .viewer-meta-dot { opacity: 0.5; } .viewer-paper-wrap { padding: 1.5rem; background: transparent; border: none; box-shadow: none; min-height: auto; } .viewer-paper-wrap .letter-paper { margin: 0 auto; } /* Reply Panel */ .reply-panel { padding: 1.75rem; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-panel); box-shadow: var(--shadow-md); } .reply-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--border-light); } .reply-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(212,175,55,0.15); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .reply-title { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.25rem; line-height: 1.2; } .reply-sub { font-size: 0.88rem; color: var(--color-ink-light); line-height: 1.5; } .reply-form { display: flex; flex-direction: column; gap: 1rem; } .form-label-opt { font-weight: 400; color: var(--color-ink-light); font-size: 0.78rem; margin-left: 0.25rem; } .reply-textarea { min-height: 140px; resize: vertical; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; } .reply-submit { margin-top: 0.5rem; padding: 0.95rem 1.5rem; font-size: 1rem; } .reply-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* Reply success state */ .reply-success { text-align: center; padding: 2rem 1rem; } .reply-success.hidden { display: none; } .reply-success-icon { width: 62px; height: 62px; border-radius: 50%; background: rgba(16,185,129,0.12); color: var(--color-success); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1rem; } .reply-success-title { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.5rem; } .reply-success-sub { color: var(--color-ink-light); max-width: 380px; margin: 0 auto; } /* Footer CTA */ .viewer-cta { text-align: center; padding: 1rem; border-top: 1px dashed var(--border-light); margin-top: 0.5rem; } .viewer-cta p { color: var(--color-ink-light); margin-bottom: 0.75rem; font-size: 0.92rem; } @media (max-width: 640px) { .viewer-topbar { padding: 1rem 1.1rem; } .viewer-brand-mark { width: 34px; height: 34px; font-size: 0.9rem; } .viewer-brand-title { font-size: 0.98rem; } .viewer-brand-sub { font-size: 0.72rem; } .viewer-stage { padding: 1.25rem 0.85rem 2.5rem; gap: 1.25rem; } .viewer-meta { padding: 0 0.25rem; } .viewer-paper-wrap { padding: 0; } .viewer-paper-wrap .letter-paper { padding: 1.75rem 1.2rem; min-height: auto; font-size: 1rem; } .letter-recipient { font-size: 1.1rem; } .letter-signature { font-size: 1.65rem; } .reply-panel { padding: 1.1rem; border-radius: var(--radius-md); } .reply-header { gap: 0.7rem; padding-bottom: 1rem; margin-bottom: 1rem; } .reply-icon { width: 38px; height: 38px; font-size: 0.95rem; } .reply-title { font-size: 1.15rem; } .reply-sub { font-size: 0.85rem; } .reply-textarea { min-height: 110px; font-size: 1rem; } .reply-submit { width: 100%; padding: 0.85rem 1rem; } }