/* --------------------------------------------------------------- Post Title Speaker – front-end styles --------------------------------------------------------------- */ /** * The speaker button itself. * Hidden by default; shown only when the page is in English * (controlled by the JS that adds / removes the `pts-english` class * on ). */ .pts-speaker-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 0.45em; padding: 0; background: transparent !important; border: none; cursor: pointer; line-height: 1; /* opacity: 0.65; */ transition: opacity 0.2s ease, transform 0.15s ease; /* Hide until JS confirms English is active */ visibility: hidden; pointer-events: none; float:right; /* opacity: 1; */ } /* Reveal when JS marks the page as English */ html.pts-english .pts-speaker-btn { visibility: visible; pointer-events: auto; } /* .pts-speaker-btn:hover, .pts-speaker-btn:focus-visible { float:right; opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; } */ /* The SVG icon */ .pts-speaker-btn svg { width: 1em; height: 1em; fill: currentColor; } /* Playing state – animate the icon */ .pts-speaker-btn.pts-playing svg { animation: pts-pulse 0.8s ease-in-out infinite alternate; } /* @keyframes pts-pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0.5; transform: scale(0.85); } } */ /* Reading highlight — applied to the DOM element currently being spoken */ .pts-highlight { background-color: #fff9c4; border-radius: 3px; box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.45); transition: background-color 0.25s ease, box-shadow 0.25s ease; /* Keep the element's own text colour */ color: inherit; } /* Slightly stronger highlight for headings */ h1.pts-highlight, h2.pts-highlight, h3.pts-highlight, h4.pts-highlight, h5.pts-highlight, h6.pts-highlight { background-color: #fff176; box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.5); }