/* ───────────────────────────────────────────────────────────────────────────── mother-patina / styles.css A messenger thread, faithful enough to be recognisable. The default skin is WhatsApp (light header, beige field, green sent bubbles); each relative's screen re-themes the same markup into their app via - iMessage (white, blue bubbles, centred header) and Telegram (blue header, mint bubbles) at the bottom of this file. The prayer line is set apart - Arabic in naskh, the chat-Latin transliteration letter-spaced. Each window is a phone. No external requests. ──────────────────────────────────────────────────────────────────────────── */ :root { --wa-head: #f0f2f5; --wa-field: #efeae2; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-ink: #111b21; --wa-meta: #556069; --wa-rule: rgba(0, 0, 0, 0.12); --wa-accent: #25d366; --wa-teal: #008069; --font-chat: "Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-arabic: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: #d6d2cb; font-family: var(--font-chat); color: var(--wa-ink); -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* lock screen vs chat are chosen by an html class (set before paint) */ .lock, .phone { display: none; } html.is-chat .phone { display: flex; } html.is-lock .lock { display: flex; } /* each window is a phone-width column */ .phone { flex-direction: column; height: 100vh; height: 100dvh; max-width: 460px; margin: 0 auto; background: var(--wa-field); position: relative; overflow: hidden; } /* ── header ── */ .chat-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; padding-top: calc(0.55rem + env(safe-area-inset-top)); background: var(--wa-head); border-bottom: 1px solid var(--wa-rule); } .chat-back { font-size: 1.5rem; color: var(--wa-meta); line-height: 1; } .chat-avatar, .notif-avatar { width: 38px; height: 38px; border-radius: 50%; /* a flat fallback; the per-persona avatar image is set by chat.js */ background-color: #d8cfc2; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; flex: 0 0 auto; } .chat-who { display: flex; flex-direction: column; line-height: 1.2; } .chat-name { font-size: 1rem; font-weight: 600; } .chat-status { font-style: normal; font-size: 0.78rem; color: var(--wa-meta); } /* ── thread (scrollable) ── */ .thread { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0.8rem 0.7rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; background-color: var(--wa-field); /* a faint paper tone, no external doodle pattern (offline) */ background-image: radial-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px); background-size: 22px 22px; } /* ── bubbles ── */ .msg { max-width: 78%; padding: 0.4rem 0.6rem 0.34rem; border-radius: 8px; font-size: 0.95rem; line-height: 1.34; position: relative; word-wrap: break-word; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); animation: pop 180ms var(--ease); } .msg .meta { display: block; /* keep the Latin timestamp LTR even inside the RTL Arabic bubble, so it reads "6:03 AM" everywhere and never reorders to "AM 6:03". */ direction: ltr; text-align: right; font-size: 0.64rem; color: var(--wa-meta); margin-top: 0.1rem; } .msg.in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 1px; } .msg.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 1px; } /* a WhatsApp-style emoji reaction clinging to the bubble's bottom edge */ .msg.has-reaction { margin-bottom: 0.85rem; } .reaction { position: absolute; bottom: -0.65rem; font-size: 0.8rem; line-height: 1; background: var(--wa-in); /* a fixed chip outline so the pill stays visible on every skin, incl. white iMessage */ border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 1rem; padding: 1px 4px 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); z-index: 3; animation: pop 200ms var(--ease); } .msg.in .reaction { left: 0.5rem; } .msg.out .reaction { right: 0.5rem; } /* the prayer line, set apart */ .msg.arabic { font-family: var(--font-arabic); direction: rtl; text-align: right; font-size: 1.45rem; line-height: 1.5; color: #2a140c; } .msg.translit { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #3a4a52; } /* image bubble (the forwarded Mary, with the clean Arabic laid over it) */ .msg.image { padding: 0.22rem 0.22rem 0.3rem; max-width: 74%; } .img-frame { position: relative; line-height: 0; border-radius: 6px; overflow: hidden; max-height: 56vh; /* a very tall forward is cropped, not a full-screen banner */ } .img-frame canvas { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: cover; object-position: 50% 20%; /* favour the face when a tall image is cropped */ } /* once she has been forwarded a few times the jpeg is openly blocky: keep the downscaled pixels crisp instead of letting the browser smooth them back. */ .img-frame.is-pixelized canvas { image-rendering: pixelated; } .img-arabic { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 0.5rem 0.5rem; font-family: var(--font-arabic); direction: rtl; text-align: center; font-size: 1.5rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9); background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); } /* centered system note (date / "someone joined" treatment) */ .sys { align-self: center; background: #e8e6df; color: #3f4d56; font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.25rem 0.7rem; border-radius: 8px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.1); margin: 0.3rem 0; text-align: center; } /* typing indicator */ .typing { align-self: flex-start; background: var(--wa-in); border-radius: 8px; border-top-left-radius: 1px; padding: 0.55rem 0.7rem; display: inline-flex; gap: 4px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); } .typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6ac; animation: blink 1.2s infinite both; } .typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; } /* ── jump to latest ── */ .jump-latest { position: absolute; right: 0.8rem; bottom: 4.4rem; z-index: 5; border: none; background: var(--wa-in); color: var(--wa-teal); font-family: var(--font-chat); font-size: 0.78rem; padding: 0.5rem 0.8rem; min-height: 36px; border-radius: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: pointer; } /* ── the forward notification ── */ .notif { position: absolute; left: 0.7rem; right: 0.7rem; /* sit just BELOW the chat header (~56px tall) so the current contact's name and avatar stay visible - the banner names the NEXT person, not this one. */ top: calc(56px + env(safe-area-inset-top) + 0.45rem); z-index: 8; display: flex; align-items: center; gap: 0.6rem; text-align: left; padding: 0.6rem 0.7rem; border: none; border-radius: 12px; background: #ffffff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); cursor: pointer; animation: drop 320ms var(--ease); } .notif-body { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; } .notif-body b { font-size: 0.92rem; } .notif-body span { font-size: 0.82rem; color: var(--wa-meta); } .notif-cue { font-size: 0.8rem; font-weight: 600; color: var(--wa-teal); } /* the unread-count badge that pulses up 1 -> 2 -> 3 on the final forward */ .notif-badge { flex: 0 0 auto; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 0.75rem; background: #25d366; color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.25rem; text-align: center; } /* ── fake input bar ── */ .chat-foot { flex: 0 0 auto; padding: 0.5rem 0.7rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); background: var(--wa-head); border-top: 1px solid var(--wa-rule); } .foot-input { display: block; background: #fff; border-radius: 20px; padding: 0.5rem 0.9rem; color: #9aa6ac; font-size: 0.9rem; } /* ── the landing: a phone lock screen ── */ .lock { position: relative; flex-direction: column; align-items: center; height: 100vh; height: 100dvh; max-width: 460px; margin: 0 auto; padding: calc(4.5rem + env(safe-area-inset-top)) 1.4rem calc(2.5rem + env(safe-area-inset-bottom)); overflow: hidden; cursor: pointer; color: #fff; text-align: center; } .lock-veil { position: absolute; inset: 0; z-index: 0; background-image: url("assets/mary.jpg"); background-size: cover; background-position: 50% 30%; filter: brightness(0.5) saturate(1.05); } .lock-veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.75) ); } .lock-top { position: relative; z-index: 1; margin-bottom: auto; } .lock-clock { display: block; font-family: var(--font-chat); font-weight: 200; font-size: 4.6rem; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .lock-date { font-size: 1rem; letter-spacing: 0.02em; opacity: 0.92; margin-top: 0.3rem; } .lock-notif { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.4rem; width: 100%; text-align: left; padding: 0.85rem 0.95rem; border: none; border-radius: 16px; background: rgba(245, 245, 245, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #111; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .lock-notif-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: #3a3a3a; } .lock-notif-head i { font-style: normal; color: #8a8a8a; margin-left: auto; font-size: 0.72rem; } .lock-notif-avatar { width: 22px; height: 22px; border-radius: 50%; /* the lock screen is Maman's message - and the mother's picture IS the Virgin */ background: #d8cfc2 url("assets/mary.jpg") 50% 18% / cover; } .lock-notif-title { font-family: var(--font-chat); font-weight: 600; font-size: 1.02rem; line-height: 1.32; color: #0c0c0c; } .lock-notif-sub { font-size: 0.86rem; color: #4a4a4a; } .lock-hint { position: relative; z-index: 1; margin-top: 1.4rem; font-size: 0.82rem; letter-spacing: 0.06em; opacity: 0.85; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } } @keyframes pop { from { transform: translateY(6px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .msg, .notif, .lock-hint, .reaction { animation: none; } .typing i { animation: none; opacity: 0.6; } } /* ───────────────────────────────────────────────────────────────────────────── per-app skins. The default above is WhatsApp; each relative's screen sets (chat.js) and the messenger re-themes. We mostly just re-point the --wa-* tokens; only the structural bits (centered iMessage header, bubble tails, text colour on a coloured bubble) need their own rules. ──────────────────────────────────────────────────────────────────────────── */ /* ── iMessage: white field, blue sent bubbles, grey received, centred header ── */ html[data-app="imessage"] { --wa-field: #ffffff; --wa-head: #ffffff; --wa-in: #e9e9eb; --wa-out: #0a7cff; --wa-ink: #000000; --wa-meta: #8e8e93; --wa-rule: rgba(0, 0, 0, 0.1); --wa-teal: #007aff; /* iOS blue replaces WhatsApp green for accents */ } html[data-app="imessage"] .thread { background-image: none; } html[data-app="imessage"] .chat-head { flex-direction: column; justify-content: center; gap: 1px; position: relative; padding-top: calc(0.35rem + env(safe-area-inset-top)); padding-bottom: 0.4rem; } html[data-app="imessage"] .chat-back { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-35%); color: #007aff; font-size: 1.7rem; } html[data-app="imessage"] .chat-avatar { width: 30px; height: 30px; } html[data-app="imessage"] .chat-who { align-items: center; } html[data-app="imessage"] .chat-name { font-size: 0.8rem; } html[data-app="imessage"] .chat-status { display: none; } html[data-app="imessage"] .msg { border-radius: 18px; box-shadow: none; } html[data-app="imessage"] .msg.in { border-radius: 18px 18px 18px 5px; } html[data-app="imessage"] .msg.out { border-radius: 18px 18px 5px 18px; color: #fff; } html[data-app="imessage"] .msg.out.arabic, html[data-app="imessage"] .msg.out.translit { color: #fff; } html[data-app="imessage"] .msg .meta { display: none; /* iMessage hangs time on a separator, not under each bubble */ } /* iMessage shows sent photos flush (no coloured fill, rounded) - not in a blue bubble */ html[data-app="imessage"] .msg.image { background: transparent; box-shadow: none; padding: 0; } html[data-app="imessage"] .msg.image .img-frame { border-radius: 16px; } html[data-app="imessage"] .typing { background: #e9e9eb; box-shadow: none; border-radius: 18px; } html[data-app="imessage"] .sys { background: transparent; box-shadow: none; color: #8e8e93; font-weight: 600; } html[data-app="imessage"] .foot-input { border: 1px solid #d1d1d6; } html[data-app="imessage"] .notif-cue { color: #007aff; } /* ── Telegram: blue header, bluish wallpaper, mint sent bubbles, white received ── */ html[data-app="telegram"] { --wa-field: #ccd9e6; --wa-head: #527da3; --wa-in: #ffffff; --wa-out: #effdde; --wa-ink: #0b1620; --wa-meta: #5d7888; --wa-rule: rgba(0, 0, 0, 0.08); --wa-teal: #2f7bbd; /* Telegram blue replaces WhatsApp green for accents */ } html[data-app="telegram"] .chat-name { color: #fff; } html[data-app="telegram"] .chat-status { color: rgba(255, 255, 255, 0.82); } html[data-app="telegram"] .chat-back { color: #fff; } html[data-app="telegram"] .msg { border-radius: 12px; } html[data-app="telegram"] .msg.in { border-radius: 12px 12px 12px 4px; } html[data-app="telegram"] .msg.out { border-radius: 12px 12px 4px 12px; } html[data-app="telegram"] .msg.out .meta { color: #54a972; } html[data-app="telegram"] .sys { background: rgba(0, 0, 0, 0.22); color: #fff; box-shadow: none; } html[data-app="telegram"] .chat-foot { background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.08); } html[data-app="telegram"] .foot-input { border: 1px solid rgba(0, 0, 0, 0.12); /* keep the white pill visible on the white foot */ } html[data-app="telegram"] .notif-cue { color: #2f7bbd; } html[data-app="telegram"] .notif-badge { background: #53a6e0; }