/* * CARD-BACK-ACTIONS.CSS — Footer zone (slots 11/12: environment) * * Deck orbs (new, TTS, aspect) + generate button. * Footwear (slot-8). (Legacy lighting/slot-11 removed; landscape orb now --primary.) */ /* ═══════════════════════════════════════════════════════════════════ ACTION FOOTER — Orbs (left) + Generate (right) Footwear (slot-8). (Legacy lighting/slot-11 removed.) ═══════════════════════════════════════════════════════════════════ */ .card-back-actions { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; flex-shrink: 0; background: /* Neutral grey footer (was footwear/slot-8) */ linear-gradient(135deg, color-mix(in srgb, white 6%, var(--card-base)) 0%, color-mix(in srgb, white 4%, var(--card-base)) 100%); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); } /* Generate button pushes to right */ .card-back-actions .generate-btn { margin-left: auto; } /* ═══════════════════════════════════════════════════════════════════ DECK ORB — Round icon-only toggles (30px circles) Spinning dashed ring + 3D flip animation. ═══════════════════════════════════════════════════════════════════ */ .deck-orb { position: relative; width: 30px; height: 30px; border-radius: 50%; border: none; outline: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .deck-orb .orb-icon { font-size: 14px; line-height: 1; color: white; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)); transition: transform 0.3s ease; } .deck-orb:hover { transform: scale(1.1); } .deck-orb:hover .orb-icon { transform: scale(1.15); } .deck-orb:active { transform: scale(0.95); } /* Spinning dashed ring */ .deck-orb::before { content: ''; position: absolute; width: calc(100% + 6px); height: calc(100% + 6px); border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.2); animation: orb-spin 10s linear infinite reverse; pointer-events: none; } .deck-orb:hover::before { width: calc(100% + 12px); height: calc(100% + 12px); border-color: rgba(255, 255, 255, 0.45); animation-duration: 3s; } @keyframes orb-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 3D flip on click */ .deck-orb.toggling .orb-icon { animation: orb-flip 0.3s ease-out; } @keyframes orb-flip { 0% { transform: scale(1) rotateY(0deg); } 50% { transform: scale(1.2) rotateY(90deg); } 100% { transform: scale(1) rotateY(0deg); } } /* ─── New Conversation orb — hair color (slot-1) ─── */ .deck-orb--new::before { animation-direction: normal; } .deck-orb--new { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 65%, var(--card-base)) 0%, color-mix(in srgb, var(--primary) 45%, var(--card-base)) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .deck-orb--new:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Gear effect — alternating spin */ .deck-orb--aspect::before { animation-direction: normal; } /* ─── Aspect Ratio orb — NEUTRAL grey, differentiated by its ratio ICON, not colour (buttons carry no slot colour). Was per-ratio character colours (portrait=outfit-accent, landscape=hair, square=bottoms) — legacy, neutralized. */ .deck-orb--aspect { background: linear-gradient(135deg, color-mix(in srgb, white 12%, var(--card-base)) 0%, color-mix(in srgb, white 5%, var(--card-base)) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .deck-orb--aspect:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ─── Face Lock orb — muted when unlocked, bright when locked ─── */ .deck-orb--lock { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 35%, var(--card-base)) 0%, color-mix(in srgb, var(--secondary) 20%, var(--card-base)) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .deck-orb--lock.locked { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 65%, var(--card-base)) 0%, color-mix(in srgb, var(--secondary) 45%, var(--card-base)) 100%); box-shadow: 0 2px 8px color-mix(in srgb, var(--secondary) 30%, transparent), 0 0 12px color-mix(in srgb, var(--secondary) 15%, transparent); } .deck-orb--lock.locked:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--secondary) 40%, transparent), 0 0 20px color-mix(in srgb, var(--secondary) 25%, transparent); } /* ─── TTS orb — slot-4 off, slot-2 on, slot-1 playing ─── */ /* TTS orb OFF: neutral grey (was bottoms/slot-4). .active=eyes / .playing=hair below keep their meaningful STATE colour. */ .deck-orb--tts { background: linear-gradient(135deg, color-mix(in srgb, white 10%, var(--card-base)) 0%, color-mix(in srgb, white 5%, var(--card-base)) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .deck-orb--tts:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .deck-orb--tts.active { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 80%, var(--card-base)) 0%, color-mix(in srgb, var(--secondary) 60%, var(--card-base)) 100%); box-shadow: 0 2px 8px color-mix(in srgb, var(--secondary) 40%, transparent), 0 0 16px color-mix(in srgb, var(--secondary) 25%, transparent); } .deck-orb--tts.active:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--secondary) 50%, transparent), 0 0 24px color-mix(in srgb, var(--secondary) 35%, transparent); } .deck-orb--tts.playing { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, var(--card-base)) 0%, color-mix(in srgb, var(--primary) 60%, var(--card-base)) 100%); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent), 0 0 12px color-mix(in srgb, var(--primary) 25%, transparent); } .deck-orb--tts.playing:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 50%, transparent), 0 0 20px color-mix(in srgb, var(--primary) 35%, transparent); } .deck-orb--tts .orb-icon { font-size: 13px; }