/* ═══════════════════════════════════════════════════════════ TTS Voice Player — Stylesheet Colours are overridden at runtime via CSS custom properties set by player.js using values from TVP_CONFIG (wp_localize_script). ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); /* ── Variables (defaults; JS overrides these on ) ─── */ .tvp-wrap { --tvp-green: #00D664; --tvp-navy: #1E2680; --tvp-navy2: #161b6a; --tvp-white: #ffffff; --tvp-track-bg: #e4e7f0; --tvp-text-main: #1E2680; --tvp-text-muted: #7b82b5; --tvp-shadow-green: rgba(0,214,100,.30); --tvp-shadow-navy: rgba(30,38,128,.18); margin-bottom: 28px; font-family: 'Plus Jakarta Sans', sans-serif; } /* ── Card ───────────────────────────────────────────────── */ .tts-player { background: var(--tvp-white); border: 1.5px solid #dde1f5; border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; width: 100%; box-shadow: 0 2px 12px var(--tvp-shadow-navy); transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; position: relative; overflow: hidden; box-sizing: border-box; } .tts-player::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(120deg, transparent 0%, rgba(0,214,100,.07) 40%, rgba(30,38,128,.05) 60%, transparent 100%); background-size: 200% 200%; opacity: 0; transition: opacity .4s ease; pointer-events: none; } .tts-player[data-state="playing"]::before { opacity: 1; animation: tvp-cardShimmer 3s linear infinite; } @keyframes tvp-cardShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tts-player:hover { box-shadow: 0 6px 28px var(--tvp-shadow-navy); border-color: #b8bfe8; transform: translateY(-1px); } /* ── Play/Pause button ─────────────────────────────────── */ .tts-play-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--tvp-navy); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; position: relative; outline: none; z-index: 1; } .tts-play-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tvp-navy); opacity: 0; transform: scale(1); } .tts-player[data-state="playing"] .tts-play-btn::after { animation: tvp-btnPulse 1.8s ease-out infinite; } @keyframes tvp-btnPulse { 0% { transform: scale(1); opacity: .55; border-color: var(--tvp-green); } 100% { transform: scale(1.9); opacity: 0; border-color: var(--tvp-green); } } .tts-player[data-state="playing"] .tts-play-btn { background: var(--tvp-green); box-shadow: 0 4px 18px var(--tvp-shadow-green); } .tts-play-btn:hover { background: var(--tvp-navy2); box-shadow: 0 4px 16px var(--tvp-shadow-navy); transform: scale(1.08); } .tts-player[data-state="playing"] .tts-play-btn:hover { background: #00bb58; } .tts-play-btn:active { transform: scale(.92); } .tts-play-btn svg { width: 18px; height: 18px; fill: var(--tvp-white); transition: opacity .18s ease, transform .18s ease; position: absolute; } .icon-play { opacity: 1; transform: scale(1); } .icon-pause { opacity: 0; transform: scale(.5); } .tts-player[data-state="playing"] .icon-play { opacity: 0; transform: scale(.5); } .tts-player[data-state="playing"] .icon-pause { opacity: 1; transform: scale(1); } /* ── Sound wave bars ───────────────────────────────────── */ .tts-waves { display: flex; align-items: center; gap: 3px; flex-shrink: 0; height: 22px; width: 22px; justify-content: center; } .tts-waves span { display: block; width: 3px; border-radius: 2px; background: var(--tvp-green); transform-origin: center; opacity: 0; transition: opacity .25s; } .tts-waves span:nth-child(1) { height: 8px; } .tts-waves span:nth-child(2) { height: 15px; } .tts-waves span:nth-child(3) { height: 22px; } .tts-waves span:nth-child(4) { height: 12px; } .tts-waves span:nth-child(5) { height: 6px; } .tts-player[data-state="playing"] .tts-waves span { opacity: 1; animation: tvp-wave .65s ease-in-out infinite alternate; } .tts-player[data-state="playing"] .tts-waves span:nth-child(1) { animation-delay: 0s; } .tts-player[data-state="playing"] .tts-waves span:nth-child(2) { animation-delay: .12s; } .tts-player[data-state="playing"] .tts-waves span:nth-child(3) { animation-delay: .05s; } .tts-player[data-state="playing"] .tts-waves span:nth-child(4) { animation-delay: .18s; } .tts-player[data-state="playing"] .tts-waves span:nth-child(5) { animation-delay: .09s; } @keyframes tvp-wave { from { transform: scaleY(.25); } to { transform: scaleY(1); } } /* ── Time labels ───────────────────────────────────────── */ .tts-time { font-size: 12px; font-weight: 600; color: var(--tvp-text-muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; flex-shrink: 0; letter-spacing: .02em; transition: color .25s; font-family: 'Plus Jakarta Sans', sans-serif; } .tts-player[data-state="playing"] .tts-time { color: var(--tvp-navy); } /* ── Progress track ────────────────────────────────────── */ .tts-track-wrap { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; position: relative; } .tts-track-bg { width: 100%; height: 5px; border-radius: 3px; background: var(--tvp-track-bg); position: relative; overflow: visible; transition: height .15s ease; } .tts-track-wrap:hover .tts-track-bg { height: 7px; } .tts-track-fill { height: 100%; border-radius: 3px; background: var(--tvp-navy); width: 0%; position: relative; transition: width .28s linear, background .3s ease; } .tts-player[data-state="playing"] .tts-track-fill { background: linear-gradient(90deg, var(--tvp-navy) 0%, var(--tvp-green) 100%); background-size: 200% 100%; animation: tvp-fillFlow 2.4s linear infinite; } @keyframes tvp-fillFlow { 0% { background-position: 100% 0%; } 100% { background-position: 0% 0%; } } .tts-track-fill::before { content: ''; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); background-size: 80px 100%; opacity: 0; transition: opacity .3s; } .tts-player[data-state="playing"] .tts-track-fill::before { opacity: 1; animation: tvp-trackGlint 1.8s ease-in-out infinite; } @keyframes tvp-trackGlint { 0% { background-position: -80px 0; } 100% { background-position: 500px 0; } } .tts-track-fill::after { content: ''; width: 14px; height: 14px; background: var(--tvp-white); border: 2.5px solid var(--tvp-navy); border-radius: 50%; position: absolute; right: -7px; top: 50%; transform: translateY(-50%) scale(0); transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s; box-shadow: 0 2px 8px var(--tvp-shadow-navy); z-index: 2; } .tts-track-wrap:hover .tts-track-fill::after, .tts-player[data-state="playing"] .tts-track-fill::after { transform: translateY(-50%) scale(1); } .tts-player[data-state="playing"] .tts-track-fill::after { border-color: var(--tvp-green); box-shadow: 0 0 0 3px rgba(0,214,100,.25), 0 2px 6px var(--tvp-shadow-navy); } /* ── Status label ──────────────────────────────────────── */ .tts-status { font-size: 12px; font-weight: 500; color: var(--tvp-text-muted); letter-spacing: .02em; margin-top: 8px; text-align: left; font-family: 'Plus Jakarta Sans', sans-serif; min-height: 16px; } /* ── Loading spinner ───────────────────────────────────── */ .tts-spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(30,38,128,.15); border-top-color: var(--tvp-navy); border-radius: 50%; animation: tvp-spin .7s linear infinite; flex-shrink: 0; } @keyframes tvp-spin { to { transform: rotate(360deg); } } .tts-player[data-state="loading"] .tts-spinner { display: block; } .tts-player[data-state="loading"] .tts-play-btn, .tts-player[data-state="loading"] .tts-waves { display: none; }