/* ============================================================ MUIY — In Memory (the remembrance wall) A solemn, still, full-screen memorial. Its palette is fixed (a night sky) regardless of the app theme — grief is the same at every hour. Loaded from index.html . ============================================================ */ .mem-overlay{ position:absolute; inset:0; z-index:120; display:flex; flex-direction:column; background: radial-gradient(120% 80% at 50% -8%, #322f66 0%, transparent 60%), linear-gradient(180deg, #1a1c40 0%, #232451 46%, #2c2a58 100%); color:#EDE7F5; animation:memFade .5s ease both; overflow:hidden; } @keyframes memFade{from{opacity:0}to{opacity:1}} /* faint drifting stars, very slow — stillness, not motion */ .mem-stars{position:absolute; inset:0; pointer-events:none; opacity:.7;} .mem-star{position:absolute; width:2px; height:2px; border-radius:50%; background:#FBF4E8; opacity:.35; animation:memTw 6s ease-in-out infinite;} @keyframes memTw{0%,100%{opacity:.15}50%{opacity:.6}} .mem-top{position:relative; z-index:2; display:flex; align-items:center; gap:10px; padding:16px 16px 4px;} .mem-back{width:40px; height:40px; flex:none; border:none; cursor:pointer; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#EDE7F5; transition:.15s;} .mem-back:hover{background:rgba(255,255,255,.14);} .mem-back:active{transform:scale(.94);} .mem-eyebrow{flex:1; text-align:center; font-size:11px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:#B9B2D8; padding-right:40px;} .mem-scroll{position:relative; z-index:2; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:8px 22px 120px;} .mem-scroll::-webkit-scrollbar{display:none;} /* ---- hero: the pearl + Muiz dedication ---- */ .mem-hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px 4px 8px;} /* collective opening dedication */ .mem-lede{text-align:center; padding:12px 4px 2px;} .mem-lede-t{font-family:'Nunito','Manrope',system-ui,sans-serif; font-size:23px; font-weight:800; letter-spacing:-.01em; color:#FBF4E8; text-wrap:balance;} .mem-lede-s{font-size:13.5px; line-height:1.62; font-weight:500; color:#B9B2D8; margin:10px auto 0; max-width:330px; text-wrap:pretty;} .mem-kicker{font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#9E97C0; margin-bottom:12px;} .mem-ameen{text-align:center; font-family:'Nunito','Manrope',system-ui,sans-serif; font-size:15px; font-weight:800; letter-spacing:.05em; color:#F4D8A0; margin-top:13px;} .mem-pearl{position:relative; width:120px; height:120px; display:grid; place-items:center; margin-bottom:6px;} .mem-pearl::before{content:""; position:absolute; inset:-24px; border-radius:50%; background:radial-gradient(circle, rgba(255,214,150,.30) 0%, transparent 62%); animation:memGlow 6.5s ease-in-out infinite;} @keyframes memGlow{0%,100%{transform:scale(.96); opacity:.75}50%{transform:scale(1.06); opacity:1}} .mem-name{font-family:'Nunito','Manrope',system-ui,sans-serif; font-size:25px; font-weight:800; letter-spacing:-.01em; color:#FBF4E8; margin:10px 0 2px; text-wrap:balance;} .mem-role{font-size:13px; font-weight:700; letter-spacing:.02em; color:#C7BFE4; text-wrap:balance; max-width:300px;} .mem-prose{margin:20px auto 4px; max-width:340px; text-align:left;} .mem-prose p{font-size:14.5px; line-height:1.72; font-weight:500; color:#DDD6EC; margin:0 0 14px; text-wrap:pretty; text-align:justify;} .mem-prose p:last-child{margin-bottom:0;} .mem-dua{margin:18px auto 0; max-width:340px; padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);} .mem-dua p{font-size:14px; line-height:1.7; font-weight:500; color:#E7E0F3; margin:0; font-style:italic; text-wrap:pretty; text-align:center;} .mem-epitaph{margin:22px auto 4px; max-width:320px; text-align:center; font-family:'Nunito','Manrope',system-ui,sans-serif; font-size:16px; line-height:1.6; font-weight:700; color:#F4D8A0; letter-spacing:.005em; text-wrap:balance;} .mem-rule{height:1px; margin:30px auto; max-width:180px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);} /* ---- the wall ---- */ .mem-sec-h{text-align:center; margin-bottom:6px;} .mem-sec-h .t{font-family:'Nunito','Manrope',system-ui,sans-serif; font-size:19px; font-weight:800; color:#FBF4E8; letter-spacing:-.01em;} .mem-sec-h .s{font-size:13px; line-height:1.55; font-weight:500; color:#B9B2D8; margin-top:6px; max-width:320px; margin-left:auto; margin-right:auto; text-wrap:pretty;} .mem-wall{display:flex; flex-direction:column; gap:11px; margin:18px 0 4px;} .mem-card{position:relative; display:flex; gap:13px; align-items:flex-start; padding:15px 16px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);} .mem-flame{flex:none; width:26px; margin-top:1px; display:grid; place-items:center;} .mem-flame .fl{transform-origin:50% 90%; animation:memFlick 4.5s ease-in-out infinite;} @keyframes memFlick{0%,100%{transform:scale(1) rotate(-1.5deg); opacity:.92} 50%{transform:scale(1.06) rotate(1.5deg); opacity:1}} .mem-card-b{flex:1; min-width:0;} .mem-card-n{font-size:15.5px; font-weight:800; color:#FBF4E8; letter-spacing:-.01em; text-wrap:balance;} .mem-card-r{font-size:12px; font-weight:700; color:#C7BFE4; margin-top:1px;} .mem-card-note{font-size:13.5px; line-height:1.55; font-weight:500; color:#D8D1EA; margin-top:7px; text-wrap:pretty;} .mem-card-from{font-size:11.5px; font-weight:700; color:#9E97C0; margin-top:8px;} .mem-badge{position:absolute; top:12px; right:12px; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:rgba(244,216,160,.16); color:#F4D8A0;} .mem-empty{text-align:center; padding:26px 12px; color:#B9B2D8; font-size:13.5px; line-height:1.6; font-weight:500; text-wrap:pretty;} /* ---- add form ---- */ .mem-add{width:100%; margin-top:16px; padding:14px 16px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(255,255,255,.05); color:#F4D8A0; font-family:inherit; font-size:14px; font-weight:800; letter-spacing:.01em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:.15s;} .mem-add:hover{background:rgba(255,255,255,.09);} .mem-add:active{transform:scale(.99);} .mem-form{margin-top:16px; padding:18px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:12px;} .mem-form .lab{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#B9B2D8; margin-bottom:6px; display:block;} .mem-in, .mem-ta{width:100%; box-sizing:border-box; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(20,20,45,.5); color:#FBF4E8; font-family:inherit; font-size:14.5px; font-weight:600; padding:11px 13px; outline:none; transition:.15s;} .mem-in::placeholder,.mem-ta::placeholder{color:#7C77A0;} .mem-in:focus,.mem-ta:focus{border-color:rgba(244,216,160,.6); background:rgba(20,20,45,.72);} .mem-ta{resize:none; line-height:1.5;} .mem-form-row{display:flex; gap:10px;} .mem-form-row .mem-btn{flex:1;} .mem-btn{border:none; cursor:pointer; border-radius:13px; font-family:inherit; font-size:14px; font-weight:800; padding:13px 16px; transition:.15s;} .mem-btn:active{transform:scale(.98);} .mem-btn-primary{background:linear-gradient(150deg,#F0C579,#E0A94B); color:#2a2320;} .mem-btn-ghost{background:rgba(255,255,255,.09); color:#EDE7F5;} .mem-hint{font-size:11.5px; line-height:1.55; font-weight:500; color:#9E97C0; text-align:center; margin-top:2px; text-wrap:pretty;} .mem-foot{text-align:center; margin-top:34px; color:#8F88B4;} .mem-foot .a{font-size:12px; font-weight:600; line-height:1.6; color:#B9B2D8;} .mem-foot .b{font-size:11px; font-weight:600; margin-top:8px; color:#7C77A0;} @media (prefers-reduced-motion: reduce){ .mem-star, .mem-pearl::before, .mem-flame .fl, .mem-overlay{animation:none !important;} }