/* ========================================================= Child Avatar Picker & Display Styles ========================================================= */ @keyframes avatar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes avatar-pop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ---------- Picker wrapper (filters + scrollable grid) ---------- */ .avatar-picker { margin-top: 8px; background: var(--green-pale); border: 1px solid var(--green-border); border-radius: 12px; overflow: hidden; } .avatar-picker-filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid var(--green-border); } .avatar-picker-select { flex: 1 1 0; min-width: 0; padding: 7px 10px; font-size: 13px; background: #fff; border: 1px solid var(--green-border); border-radius: 8px; color: var(--green-dark, #1e6644); cursor: pointer; } .avatar-picker-select:focus-visible { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(30, 102, 68, 0.18); } .avatar-picker-glasses { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green-dark, #1e6644); cursor: pointer; padding: 6px 10px; background: #fff; border: 1px solid var(--green-border); border-radius: 8px; user-select: none; white-space: nowrap; } .avatar-picker-glasses input { cursor: pointer; } .avatar-picker-empty { color: #6b7280; font-size: 13px; padding: 18px 6px; text-align: center; grid-column: 1 / -1; } /* ---------- Hover preview (singleton, attached to ) ---------- */ .avatar-picker-preview { position: fixed; z-index: 1000; pointer-events: none; background: #fff; border: 1px solid var(--green-border); border-radius: 14px; box-shadow: 0 14px 36px rgba(30, 102, 68, 0.22); padding: 12px; width: 200px; text-align: center; opacity: 0; transform: scale(0.92); transition: opacity 0.12s ease, transform 0.12s ease; } .avatar-picker-preview.is-visible { opacity: 1; transform: scale(1); } .avatar-picker-preview img { width: 100%; max-width: 176px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: contain; background: #fff; display: block; margin: 0 auto; } .avatar-picker-preview-label { display: block; font-size: 12px; color: var(--green-dark, #1e6644); margin-top: 8px; line-height: 1.3; } /* ---------- Picker grid ---------- */ .avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px; padding: 14px; max-height: 360px; overflow-y: auto; } /* ---------- Individual avatar button ---------- */ .avatar-opt { background: none; border: 2.5px solid transparent; border-radius: 50%; padding: 3px; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; justify-content: center; outline: none; } .avatar-opt svg, .avatar-opt img { width: 100%; max-width: 70px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; display: block; pointer-events: none; object-fit: contain; background: #fff; } .avatar-opt:hover { border-color: var(--green-mid); transform: scale(1.1); box-shadow: 0 4px 12px rgba(30, 102, 68, 0.2); } .avatar-opt:focus-visible { border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(30, 102, 68, 0.3); } /* Selected state */ .avatar-opt.selected { border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(30, 102, 68, 0.22); transform: scale(1.06); } .avatar-opt.selected .avatar-anim { display: block; animation: avatar-float 2.4s ease-in-out infinite; } .avatar-opt:not(.selected) .avatar-anim { display: block; } /* Pop animation when picker first renders */ .avatar-opt { animation: avatar-pop 0.35s ease both; } /* Stagger each button's pop-in */ .avatar-opt:nth-child(1) { animation-delay: 0.02s; } .avatar-opt:nth-child(2) { animation-delay: 0.04s; } .avatar-opt:nth-child(3) { animation-delay: 0.06s; } .avatar-opt:nth-child(4) { animation-delay: 0.08s; } .avatar-opt:nth-child(5) { animation-delay: 0.10s; } .avatar-opt:nth-child(6) { animation-delay: 0.12s; } .avatar-opt:nth-child(7) { animation-delay: 0.14s; } .avatar-opt:nth-child(8) { animation-delay: 0.16s; } .avatar-opt:nth-child(9) { animation-delay: 0.18s; } .avatar-opt:nth-child(10) { animation-delay: 0.20s; } .avatar-opt:nth-child(11) { animation-delay: 0.22s; } .avatar-opt:nth-child(12) { animation-delay: 0.24s; } .avatar-opt:nth-child(13) { animation-delay: 0.26s; } .avatar-opt:nth-child(14) { animation-delay: 0.28s; } .avatar-opt:nth-child(15) { animation-delay: 0.30s; } .avatar-opt:nth-child(16) { animation-delay: 0.32s; } .avatar-opt:nth-child(17) { animation-delay: 0.34s; } .avatar-opt:nth-child(18) { animation-delay: 0.36s; } /* ---------- Display in member card ---------- */ .child-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .child-card-header h3 { margin: 0; font-size: 1.1rem; color: var(--green-dark); font-family: 'Fraunces', serif; } .child-avatar-display { flex-shrink: 0; } .child-avatar-display svg { width: 60px; height: 60px; border-radius: 50%; display: block; animation: avatar-float 3s ease-in-out infinite; filter: drop-shadow(0 3px 8px rgba(30, 102, 68, 0.18)); object-fit: contain; } .child-avatar-display img { width: 90px; height: 90px; display: block; animation: avatar-float 3s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(30, 102, 68, 0.2)); object-fit: contain; /* Clip the white square corners baked into gpt-image-2 PNGs so the avatar reads as a circle, matching the picker treatment. Legacy transparent PNGs are unaffected because they have no opaque corners to hide. */ border-radius: 50%; } /* Default (no avatar selected) silhouette */ .child-avatar-display.no-avatar svg { animation: none; opacity: 0.45; } /* Avatar in member card grid */ .child-card-avatar { display: flex; justify-content: center; align-items: center; margin-bottom: 8px; } .child-card-avatar svg, .child-card-avatar img { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; filter: drop-shadow(0 2px 6px rgba(30, 102, 68, 0.18)); object-fit: contain; /* Same circular clip as the picker so white-background PNGs blend. */ border-radius: 50%; } .child-card-avatar.no-avatar svg { opacity: 0.35; }