/*====================================================* * CITY LIVE READER SUITE * Version : 2.4 * Theme : City Live Red + Blue * * FINAL 8 MODULES * Audio | Reader | Translate | Image | PDF | Print | AI | Bookmark *====================================================*/ /*====================================================* * READER SUITE CONTAINER *====================================================*/ .cl-reader-suite{ margin:24px 0 18px; padding:12px; background:linear-gradient( 135deg, #ffffff 0%, #f8fafc 100% ); border:1px solid #dbe3ef; border-radius:16px; box-shadow: 0 6px 20px rgba(15,35,75,.07); overflow:hidden; box-sizing:border-box; } /*====================================================* * TOOLBAR *====================================================*/ .cl-reader-toolbar{ display:flex; align-items:center; gap:10px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none; } .cl-reader-toolbar::-webkit-scrollbar{ display:none; } /*====================================================* * TOOL BUTTON *====================================================*/ .cl-tool-btn{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-width:120px; height:44px; padding:0 18px; background:#ffffff; border:1px solid #d9e1ec; border-radius:999px; color:#172033; font-size:14px; font-weight:700; cursor:pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; flex-shrink:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } /*====================================================* * ICON *====================================================*/ .cl-tool-btn i{ font-size:16px; line-height:1; flex-shrink:0; } /*====================================================* * CITY LIVE ACCENT BAR *====================================================*/ .cl-tool-btn::before{ content:""; position:absolute; left:18px; right:18px; bottom:4px; height:2px; border-radius:4px; background:linear-gradient( 90deg, #e31b23 0%, #e31b23 50%, #174ea6 50%, #174ea6 100% ); opacity:0; transform:scaleX(.45); transition: opacity .25s ease, transform .25s ease; } /*====================================================* * HOVER *====================================================*/ .cl-tool-btn:hover{ color:#ffffff; border-color:#174ea6; background:linear-gradient( 135deg, #e31b23 0%, #b5121b 45%, #174ea6 100% ); transform:translateY(-2px); box-shadow: 0 8px 20px rgba(23,78,166,.18); } .cl-tool-btn:hover::before{ opacity:1; transform:scaleX(1); } /*====================================================* * ACTIVE *====================================================*/ .cl-tool-btn.active{ color:#ffffff; border-color:#174ea6; background:linear-gradient( 135deg, #e31b23 0%, #c51620 45%, #174ea6 100% ); box-shadow: 0 6px 18px rgba(23,78,166,.20); } .cl-tool-btn.active::before{ opacity:1; transform:scaleX(1); } /*====================================================* * FOCUS *====================================================*/ .cl-tool-btn:focus{ outline:none; box-shadow: 0 0 0 3px rgba(23,78,166,.15); } .cl-tool-btn:focus-visible{ outline:2px solid #174ea6; outline-offset:2px; } /*====================================================* * EMOJI / TEXT *====================================================*/ .cl-tool-btn span{ display:inline-flex; align-items:center; line-height:1; } /*====================================================* * MOBILE *====================================================*/ @media(max-width:768px){ .cl-reader-suite{ margin:20px 0; padding:10px; border-radius:15px; } .cl-reader-toolbar{ gap:8px; } .cl-tool-btn{ min-width:104px; height:42px; padding:0 15px; font-size:13px; } .cl-tool-btn i{ font-size:15px; } } /*====================================================* * SMALL MOBILE *====================================================*/ @media(max-width:480px){ .cl-reader-suite{ padding:8px; } .cl-reader-toolbar{ gap:7px; } .cl-tool-btn{ min-width:96px; height:40px; padding:0 13px; font-size:12px; } } /*====================================================* * PRINT *====================================================*/ @media print{ .cl-reader-suite{ display:none !important; } } /*====================================================* * REDUCED MOTION *====================================================*/ @media(prefers-reduced-motion:reduce){ .cl-tool-btn{ transition:none; } .cl-tool-btn:hover{ transform:none; } } /* ========================================================= CITY LIVE READER SUITE v2.5.2 — ARTICLE READER MODE ========================================================= */ /* Reader Mode is active only inside the article */ #postDetailsPage.cl-reader-mode { --cl-reader-text: #202124; --cl-reader-muted: #5f6368; --cl-reader-border: #e5e7eb; --cl-reader-bg: #ffffff; } /* ========================================================= ARTICLE TEXT ========================================================= */ #postDetailsPage.cl-reader-mode .entry-content { max-width: 820px; margin-left: auto; margin-right: auto; font-size: 19px; line-height: 1.9; color: var(--cl-reader-text); } /* Paragraphs */ #postDetailsPage.cl-reader-mode .entry-content p { margin-bottom: 1.4em; color: var(--cl-reader-text); font-size: inherit; line-height: inherit; } /* Headings inside article */ #postDetailsPage.cl-reader-mode .entry-content h2, #postDetailsPage.cl-reader-mode .entry-content h3, #postDetailsPage.cl-reader-mode .entry-content h4 { color: #111827; margin-top: 1.8em; margin-bottom: .7em; line-height: 1.4; } /* Strong / bold */ #postDetailsPage.cl-reader-mode .entry-content strong, #postDetailsPage.cl-reader-mode .entry-content b { color: #111827; } /* Links */ #postDetailsPage.cl-reader-mode .entry-content a { color: #2563eb; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ========================================================= REMOVE ARTICLE DISTRACTIONS ========================================================= */ #postDetailsPage.cl-reader-mode .post-image.post-video { display: none; } /* Tags */ #postDetailsPage.cl-reader-mode .post-tags { display: none; } /* Previous / Next */ #postDetailsPage.cl-reader-mode #postNextPrevContainer { display: none; } /* Reactions */ #postDetailsPage.cl-reader-mode .reaction-wrapper, #postDetailsPage.cl-reader-mode .reaction-wrapper-title { display: none; } /* Author box */ #postDetailsPage.cl-reader-mode .about-author { display: none; } /* Related posts */ #postDetailsPage.cl-reader-mode .section-related-posts { display: none; } /* Comments */ #postDetailsPage.cl-reader-mode .comments-module { display: none; } /* ========================================================= READER SUITE REMAINS VISIBLE ========================================================= */ #postDetailsPage.cl-reader-mode .cl-reader-suite { display: block; } /* ========================================================= ARTICLE TITLE ========================================================= */ #postDetailsPage.cl-reader-mode .post-title { max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.35; } /* Summary */ #postDetailsPage.cl-reader-mode .post-summary { max-width: 820px; margin-left: auto; margin-right: auto; color: var(--cl-reader-muted); line-height: 1.7; } /* ========================================================= META ========================================================= */ #postDetailsPage.cl-reader-mode .post-details-meta { max-width: 820px; margin-left: auto; margin-right: auto; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { #postDetailsPage.cl-reader-mode .entry-content { max-width: none; font-size: 18px; line-height: 1.8; } #postDetailsPage.cl-reader-mode .post-title { font-size: 30px; } #postDetailsPage.cl-reader-mode .post-summary { font-size: 17px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { #postDetailsPage.cl-reader-mode .entry-content { font-size: 17px; line-height: 1.8; } #postDetailsPage.cl-reader-mode .post-title { font-size: 26px; } } /*====================================================* * CITY LIVE READER SUITE * Version : 2.6 * Module : LANGUAGE TRANSLATE — FOUNDATION * * City Live Red + Blue * Article scoped UI *====================================================*/ /*====================================================* * PANEL *====================================================*/ #clTranslatePanel{ position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.38); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .22s ease, visibility .22s ease; } /*====================================================* * OPEN *====================================================*/ #clTranslatePanel.is-open{ opacity:1; visibility:visible; pointer-events:auto; } /*====================================================* * CARD *====================================================*/ #clTranslatePanel .cl-translate-card{ width:min(430px, 100%); background:#ffffff; border:1px solid #dbe3ef; border-radius:18px; box-shadow: 0 20px 60px rgba(15,35,75,.22); overflow:hidden; transform:translateY(12px) scale(.98); transition: transform .22s ease; } /*====================================================* * CARD OPEN *====================================================*/ #clTranslatePanel.is-open .cl-translate-card{ transform:translateY(0) scale(1); } /*====================================================* * HEADER *====================================================*/ #clTranslatePanel .cl-translate-header{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; background: linear-gradient( 135deg, #e31b23 0%, #c51620 45%, #174ea6 100% ); color:#ffffff; } /*====================================================* * HEADING *====================================================*/ #clTranslatePanel .cl-translate-heading{ display:flex; align-items:center; gap:12px; } #clTranslatePanel .cl-translate-icon{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.16); font-size:21px; } #clTranslatePanel .cl-translate-title{ font-size:17px; font-weight:800; line-height:1.25; } #clTranslatePanel .cl-translate-subtitle{ margin-top:3px; font-size:12px; opacity:.88; } /*====================================================* * CLOSE *====================================================*/ #clTranslatePanel .cl-translate-close{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.12); color:#ffffff; cursor:pointer; transition: background .2s ease, transform .2s ease; } #clTranslatePanel .cl-translate-close:hover{ background:rgba(255,255,255,.22); transform:rotate(90deg); } /*====================================================* * BODY *====================================================*/ #clTranslatePanel .cl-translate-body{ padding:22px; } /*====================================================* * LABEL *====================================================*/ #clTranslatePanel .cl-translate-label{ display:block; margin-bottom:8px; color:#334155; font-size:13px; font-weight:700; } /*====================================================* * SELECT *====================================================*/ #clTranslatePanel .cl-translate-select{ width:100%; height:46px; padding:0 14px; border:1px solid #d5deea; border-radius:10px; background:#ffffff; color:#172033; font-size:14px; font-weight:600; outline:none; box-sizing:border-box; cursor:pointer; transition: border-color .2s ease, box-shadow .2s ease; } #clTranslatePanel .cl-translate-select:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); } /*====================================================* * ACTION *====================================================*/ #clTranslatePanel .cl-translate-action{ width:100%; height:46px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; background: linear-gradient( 135deg, #e31b23 0%, #c51620 45%, #174ea6 100% ); color:#ffffff; font-size:14px; font-weight:800; cursor:pointer; box-shadow: 0 7px 18px rgba(23,78,166,.18); transition: transform .2s ease, box-shadow .2s ease; } #clTranslatePanel .cl-translate-action:hover{ transform:translateY(-1px); box-shadow: 0 10px 22px rgba(23,78,166,.24); } /*====================================================* * STATUS *====================================================*/ #clTranslatePanel .cl-translate-status{ margin-top:12px; padding:10px 12px; border-radius:8px; background:#f8fafc; color:#64748b; font-size:12px; line-height:1.5; } /*====================================================* * MOBILE *====================================================*/ @media(max-width:480px){ #clTranslatePanel{ padding:14px; } #clTranslatePanel .cl-translate-card{ width:100%; border-radius:16px; } #clTranslatePanel .cl-translate-header{ padding:16px; } #clTranslatePanel .cl-translate-body{ padding:18px; } } /*====================================================* * REDUCED MOTION *====================================================*/ @media(prefers-reduced-motion:reduce){ #clTranslatePanel, #clTranslatePanel .cl-translate-card, #clTranslatePanel .cl-translate-close, #clTranslatePanel .cl-translate-action{ transition:none !important; } } /*====================================================* * CITY LIVE READER SUITE * Version : 2.6.1 * Module : PRODUCTION LANGUAGE TRANSLATE *====================================================*/ #clTranslatePanel{ position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.42); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .2s ease, visibility .2s ease; } #clTranslatePanel.is-open{ opacity:1; visibility:visible; pointer-events:auto; } #clTranslatePanel .cl-translate-card{ width:min(430px,100%); background:#fff; border:1px solid #dbe3ef; border-radius:18px; overflow:hidden; box-shadow: 0 22px 70px rgba(15,23,42,.28); transform:translateY(10px) scale(.98); transition:transform .2s ease; } #clTranslatePanel.is-open .cl-translate-card{ transform:translateY(0) scale(1); } #clTranslatePanel .cl-translate-header{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; background: linear-gradient( 135deg, #e31b23 0%, #c51620 46%, #174ea6 100% ); color:#fff; } #clTranslatePanel .cl-translate-heading{ display:flex; align-items:center; gap:12px; } #clTranslatePanel .cl-translate-icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255,255,255,.18); font-size:22px; } #clTranslatePanel .cl-translate-title{ font-size:18px; font-weight:800; line-height:1.25; } #clTranslatePanel .cl-translate-subtitle{ margin-top:3px; font-size:12px; opacity:.9; } #clTranslatePanel .cl-translate-close{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid rgba(255,255,255,.65); border-radius:50%; background: rgba(255,255,255,.16); color:#fff; font-family:Arial,sans-serif; font-size:31px; font-weight:300; line-height:1; cursor:pointer; appearance:none; -webkit-appearance:none; transition: background .18s ease, transform .18s ease; } #clTranslatePanel .cl-translate-close span{ display:block; transform: translateY(-1px); } #clTranslatePanel .cl-translate-close:hover{ background: rgba(255,255,255,.28); transform:rotate(90deg); } #clTranslatePanel .cl-translate-body{ padding:22px; } #clTranslatePanel .cl-translate-label{ display:block; margin-bottom:8px; color:#334155; font-size:13px; font-weight:700; } #clTranslatePanel .cl-translate-select{ width:100%; height:48px; padding:0 14px; box-sizing:border-box; border:1px solid #d5deea; border-radius:10px; background:#fff; color:#172033; font-size:14px; font-weight:600; outline:none; cursor:pointer; } #clTranslatePanel .cl-translate-select:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); } #clTranslatePanel .cl-translate-action{ width:100%; height:48px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; background: linear-gradient( 135deg, #e31b23 0%, #c51620 46%, #174ea6 100% ); color:#fff; font-size:14px; font-weight:800; cursor:pointer; box-shadow: 0 8px 20px rgba(23,78,166,.18); } #clTranslatePanel .cl-translate-action:hover{ transform:translateY(-1px); } #clTranslatePanel .cl-translate-action:disabled{ opacity:.72; cursor:wait; transform:none; } #clTranslatePanel .cl-translate-action.is-loading{ animation:clTranslatePulse 1.1s ease-in-out infinite; } #clTranslatePanel .cl-translate-original{ width:100%; height:42px; margin-top:9px; border:1px solid #dbe3ef; border-radius:10px; background:#f8fafc; color:#334155; font-size:13px; font-weight:700; cursor:pointer; } #clTranslatePanel .cl-translate-original:hover{ border-color:#2563eb; color:#174ea6; } #clTranslatePanel .cl-translate-status{ margin-top:12px; padding:10px 12px; border-radius:8px; background:#f8fafc; color:#64748b; font-size:12px; line-height:1.5; } #clTranslatePanel .cl-translate-status.is-error{ background:#fff1f2; color:#b42318; } @keyframes clTranslatePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } } @media(max-width:480px){ #clTranslatePanel{ padding:14px; } #clTranslatePanel .cl-translate-card{ border-radius:16px; } #clTranslatePanel .cl-translate-header{ padding:16px; } #clTranslatePanel .cl-translate-body{ padding:18px; } } /* ========================================================= CITY LIVE READER SUITE v3.1 — COMPACT PREMIUM TOOLBAR ========================================================= */ .cl-reader-suite .cl-reader-toolbar{ display:flex; align-items:center; gap:7px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none; } .cl-reader-suite .cl-reader-toolbar::-webkit-scrollbar{ display:none; } .cl-reader-suite .cl-tool-btn{ min-width:96px; height:40px; padding:0 10px; gap:6px; font-size:13px; flex:0 0 auto; } .cl-reader-suite .cl-tool-btn i{ font-size:15px; } .cl-reader-suite .cl-tool-btn span{ white-space:nowrap; } .cl-reader-suite .cl-tool-btn[data-tool="image"], .cl-reader-suite .cl-tool-btn[data-tool="pdf"]{ min-width:88px; } .cl-reader-suite .cl-tool-btn[aria-busy="true"]{ cursor:wait; opacity:.78; } @media (min-width:1200px){ .cl-reader-suite .cl-reader-toolbar{ overflow-x:hidden; } } @media (max-width:1100px){ .cl-reader-suite .cl-tool-btn{ min-width:84px; height:39px; padding:0 8px; gap:5px; font-size:12px; } .cl-reader-suite .cl-tool-btn[data-tool="image"], .cl-reader-suite .cl-tool-btn[data-tool="pdf"]{ min-width:78px; } } @media (max-width:768px){ .cl-reader-suite .cl-reader-toolbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .cl-reader-suite .cl-tool-btn{ min-width:92px; height:40px; padding:0 9px; font-size:12px; } } @media (max-width:480px){ .cl-reader-suite .cl-tool-btn{ min-width:88px; height:39px; padding:0 8px; font-size:12px; } } /* ========================================================= v3.1 ICON FALLBACK Reader / Image / PDF use native visual icons so they remain visible even if Font Awesome glyphs are unavailable. ========================================================= */ .cl-reader-suite .cl-tool-btn .cl-v31-icon{ display:inline-flex; align-items:center; justify-content:center; width:18px; min-width:18px; height:18px; line-height:1; font-size:15px; font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif; flex:0 0 18px; } .cl-reader-suite .cl-tool-btn .cl-v31-icon + span{ display:inline-flex; align-items:center; } @media (max-width:1100px){ .cl-reader-suite .cl-tool-btn .cl-v31-icon{ width:17px; min-width:17px; height:17px; font-size:14px; flex-basis:17px; } } /* ========================================================= CITY LIVE READER SUITE v3.3 — PREMIUM CALLOUT FINAL Red Reader Suite callout + blue button bar Audio → Reader → Translate → Image → PDF → Print → AI → Bookmark ========================================================= */ .cl-reader-suite{ position:relative!important; width:100%!important; margin:20px 0 22px!important; padding:0 0 10px!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; box-sizing:border-box!important; } /* RED CALLOUT */ .cl-reader-suite::before{ content:"✦ READER SUITE"!important; position:relative!important; z-index:3!important; display:inline-flex!important; align-items:center!important; min-height:34px!important; margin:0 0 -1px 8px!important; padding:0 18px 0 15px!important; color:#fff!important; font-family:inherit!important; font-size:12px!important; font-weight:850!important; line-height:34px!important; letter-spacing:.065em!important; text-transform:uppercase!important; background:linear-gradient(135deg,#e53935 0%,#c71924 100%)!important; border-radius:8px 8px 0 0!important; box-shadow:0 4px 9px rgba(190,25,35,.16)!important; } /* callout pointer */ .cl-reader-suite::after{ content:""!important; position:absolute!important; top:33px!important; left:27px!important; z-index:4!important; width:0!important; height:0!important; border-left:7px solid transparent!important; border-right:7px solid transparent!important; border-top:8px solid #d6202a!important; } /* BLUE BUTTON BAR */ .cl-reader-suite .cl-reader-toolbar{ position:relative!important; z-index:2!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-height:66px!important; margin:0!important; padding:9px 10px!important; box-sizing:border-box!important; gap:8px!important; overflow-x:auto!important; overflow-y:hidden!important; white-space:nowrap!important; scrollbar-width:none!important; -ms-overflow-style:none!important; background:linear-gradient(110deg,#071b72 0%,#0b35ad 48%,#195cda 100%)!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:15px!important; box-shadow:0 8px 18px rgba(7,38,125,.18),0 2px 5px rgba(7,38,125,.08)!important; } .cl-reader-suite .cl-reader-toolbar::-webkit-scrollbar{display:none!important;} /* WHITE BUTTON CARDS */ .cl-reader-suite .cl-tool-btn{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; flex:1 1 0!important; min-width:0!important; height:46px!important; box-sizing:border-box!important; margin:0!important; padding:0 10px!important; gap:7px!important; border:1px solid rgba(255,255,255,.92)!important; border-radius:12px!important; background:linear-gradient(145deg,#fff 0%,#f8faff 100%)!important; color:#09174e!important; font-family:inherit!important; font-size:12px!important; font-weight:800!important; line-height:1!important; box-shadow:0 3px 7px rgba(0,0,0,.10),inset 0 1px 0 #fff!important; overflow:hidden!important; transform:translateY(0)!important; transition:transform .17s ease,background .17s ease,border-color .17s ease,box-shadow .17s ease,color .17s ease!important; } /* icons */ .cl-reader-suite .cl-tool-btn > .cl-v32-icon, .cl-reader-suite .cl-tool-btn > .cl-v31-icon{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:21px!important; min-width:21px!important; height:21px!important; flex:0 0 21px!important; margin:0!important; padding:0!important; font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif!important; font-size:18px!important; line-height:1!important; } /* labels */ .cl-reader-suite .cl-tool-btn > span:not(.cl-v32-icon):not(.cl-v31-icon){ display:block!important; min-width:0!important; max-width:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:inherit!important; font-size:12px!important; font-weight:800!important; line-height:1!important; } /* City Live hover */ .cl-reader-suite .cl-tool-btn:hover{ background:linear-gradient(135deg,#eef5ff 0%,#fff 66%,#fff0f0 100%)!important; border-color:rgba(229,57,53,.78)!important; color:#0b43b7!important; transform:translateY(-2px)!important; box-shadow:0 6px 12px rgba(8,54,155,.18),0 0 0 1px rgba(229,57,53,.06)!important; } .cl-reader-suite .cl-tool-btn::after{ content:""!important; position:absolute!important; left:22%!important; right:22%!important; bottom:3px!important; height:2px!important; border-radius:2px!important; background:#e53935!important; opacity:0!important; transform:scaleX(.55)!important; transition:opacity .17s ease,transform .17s ease!important; } .cl-reader-suite .cl-tool-btn:hover::after{ opacity:1!important; transform:scaleX(1)!important; } /* Active */ .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]{ background:linear-gradient(135deg,#e53935 0%,#c91f2a 45%,#174fc5 100%)!important; border-color:#fff!important; color:#fff!important; box-shadow:0 6px 12px rgba(5,38,135,.22)!important; } .cl-reader-suite .cl-tool-btn.active::after, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]::after{ opacity:1!important; background:#fff!important; transform:scaleX(1)!important; } .cl-reader-suite .cl-tool-btn:focus{outline:none!important;} .cl-reader-suite .cl-tool-btn:focus-visible{ outline:2px solid #fff!important; outline-offset:2px!important; } .cl-reader-suite .cl-tool-btn[aria-busy="true"]{ cursor:wait!important; opacity:.78!important; } /* Desktop */ @media(min-width:1200px){ .cl-reader-suite .cl-reader-toolbar{overflow-x:hidden!important;} } /* Tablet */ @media(max-width:1100px){ .cl-reader-suite .cl-reader-toolbar{gap:7px!important;padding:8px!important;} .cl-reader-suite .cl-tool-btn{ flex:0 0 96px!important; min-width:96px!important; height:44px!important; } } /* Mobile */ @media(max-width:768px){ .cl-reader-suite{ margin:15px 0 18px!important; padding-bottom:7px!important; } .cl-reader-suite::before{ min-height:31px!important; margin-left:5px!important; padding:0 14px 0 12px!important; font-size:10px!important; line-height:31px!important; border-radius:7px 7px 0 0!important; } .cl-reader-suite::after{ top:30px!important; left:22px!important; border-left-width:6px!important; border-right-width:6px!important; border-top-width:7px!important; } .cl-reader-suite .cl-reader-toolbar{ min-height:58px!important; padding:7px!important; gap:6px!important; border-radius:12px!important; } .cl-reader-suite .cl-tool-btn{ flex:0 0 96px!important; min-width:96px!important; height:42px!important; border-radius:10px!important; font-size:11px!important; } .cl-reader-suite .cl-tool-btn > .cl-v32-icon, .cl-reader-suite .cl-tool-btn > .cl-v31-icon{ width:19px!important; min-width:19px!important; height:19px!important; flex-basis:19px!important; font-size:17px!important; } .cl-reader-suite .cl-tool-btn > span:not(.cl-v32-icon):not(.cl-v31-icon){ font-size:11px!important; } } /* Print / reduced motion */ @media print{.cl-reader-suite{display:none!important;}} @media(prefers-reduced-motion:reduce){ .cl-reader-suite .cl-tool-btn{transition:none!important;} .cl-reader-suite .cl-tool-btn:hover{transform:none!important;} } /* ========================================================= CITY LIVE READER SUITE v3.3.1 — CITY LIVE SELECTION FIX Restore branded selection/active state. The generic browser focus ring must never look like the selected Reader Suite state. ========================================================= */ /* Remove the generic browser focus treatment */ .cl-reader-suite .cl-tool-btn:focus{ outline:none!important; box-shadow: 0 3px 7px rgba(0,0,0,.10), inset 0 1px 0 #fff!important; } /* Keyboard users still get a refined City Live focus ring */ .cl-reader-suite .cl-tool-btn:focus-visible{ outline:2px solid rgba(255,255,255,.98)!important; outline-offset:2px!important; } /* --------------------------------------------------------- CITY LIVE SELECTED / ACTIVE --------------------------------------------------------- */ .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"], .cl-reader-suite .cl-tool-btn[aria-selected="true"]{ background: linear-gradient( 135deg, #e53935 0%, #d3222d 38%, #174fc5 100% )!important; border-color:#ffffff!important; color:#ffffff!important; transform:translateY(-1px)!important; box-shadow: 0 6px 14px rgba(10,52,150,.25), 0 0 0 1px rgba(229,57,53,.16)!important; } /* Selected icon and text */ .cl-reader-suite .cl-tool-btn.active > *, .cl-reader-suite .cl-tool-btn.selected > *, .cl-reader-suite .cl-tool-btn.is-active > *, .cl-reader-suite .cl-tool-btn[aria-pressed="true"] > *, .cl-reader-suite .cl-tool-btn[aria-selected="true"] > *{ color:#ffffff!important; } /* Selected underline becomes white */ .cl-reader-suite .cl-tool-btn.active::after, .cl-reader-suite .cl-tool-btn.selected::after, .cl-reader-suite .cl-tool-btn.is-active::after, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]::after, .cl-reader-suite .cl-tool-btn[aria-selected="true"]::after{ opacity:1!important; background:#ffffff!important; transform:scaleX(1)!important; } /* Hovering a selected button should retain the City Live identity */ .cl-reader-suite .cl-tool-btn.active:hover, .cl-reader-suite .cl-tool-btn.selected:hover, .cl-reader-suite .cl-tool-btn.is-active:hover, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]:hover, .cl-reader-suite .cl-tool-btn[aria-selected="true"]:hover{ background: linear-gradient( 135deg, #ef3b3f 0%, #d5222d 40%, #195bd8 100% )!important; border-color:#ffffff!important; color:#ffffff!important; transform:translateY(-2px)!important; box-shadow: 0 8px 16px rgba(8,54,155,.28), 0 0 0 1px rgba(229,57,53,.18)!important; } /* Do not let the browser's focus indication create the old blue double-outline seen around Bookmark. */ .cl-reader-suite .cl-tool-btn:focus:not(:focus-visible){ outline:none!important; } /* Keep disabled state clean */ .cl-reader-suite .cl-tool-btn:disabled{ outline:none!important; } /* ========================================================= CITY LIVE READER SUITE v3.3.2 COMPACT BUTTON + REAL CITY LIVE SELECTION ========================================================= */ /* Slightly shorter cards — less vertical weight */ .cl-reader-suite .cl-tool-btn{ height:42px!important; } /* Keep the blue stage proportionate after reducing card height */ .cl-reader-suite .cl-reader-toolbar{ min-height:60px!important; padding:8px 10px!important; } /* --------------------------------------------------------- REAL SELECTION — not just underline JS adds .active / aria-pressed on the selected action. --------------------------------------------------------- */ .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"], .cl-reader-suite .cl-tool-btn[aria-selected="true"]{ background: linear-gradient( 135deg, #e53935 0%, #cf202a 42%, #174fc5 100% )!important; color:#fff!important; border-color:#fff!important; transform:translateY(-1px)!important; box-shadow: 0 6px 13px rgba(5,38,135,.25), 0 0 0 1px rgba(229,57,53,.12)!important; } /* Selected icon + text */ .cl-reader-suite .cl-tool-btn.active > *, .cl-reader-suite .cl-tool-btn.selected > *, .cl-reader-suite .cl-tool-btn.is-active > *, .cl-reader-suite .cl-tool-btn[aria-pressed="true"] > *, .cl-reader-suite .cl-tool-btn[aria-selected="true"] > *{ color:#fff!important; } /* Selected underline is only a small finishing accent */ .cl-reader-suite .cl-tool-btn.active::after, .cl-reader-suite .cl-tool-btn.selected::after, .cl-reader-suite .cl-tool-btn.is-active::after, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]::after, .cl-reader-suite .cl-tool-btn[aria-selected="true"]::after{ opacity:1!important; background:#fff!important; transform:scaleX(1)!important; } /* Selected hover stays branded instead of reverting to white */ .cl-reader-suite .cl-tool-btn.active:hover, .cl-reader-suite .cl-tool-btn.selected:hover, .cl-reader-suite .cl-tool-btn.is-active:hover, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]:hover, .cl-reader-suite .cl-tool-btn[aria-selected="true"]:hover{ background: linear-gradient( 135deg, #ef3b3f 0%, #d4212c 42%, #195bd8 100% )!important; color:#fff!important; border-color:#fff!important; transform:translateY(-2px)!important; } /* Tablet/mobile compactness */ @media(max-width:1100px){ .cl-reader-suite .cl-reader-toolbar{ min-height:58px!important; padding:7px 8px!important; } .cl-reader-suite .cl-tool-btn{ height:40px!important; } } @media(max-width:768px){ .cl-reader-suite .cl-reader-toolbar{ min-height:54px!important; padding:7px!important; } .cl-reader-suite .cl-tool-btn{ height:39px!important; } } /* ========================================================= CITY LIVE READER SUITE v3.3.3 SELECTION LOCK — TRUE CITY LIVE STATE ========================================================= */ /* The explicit data attribute is the authoritative visual state. */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]{ background: linear-gradient( 135deg, #e53935 0%, #cf202a 42%, #174fc5 100% )!important; color:#ffffff!important; border-color:#ffffff!important; transform:translateY(-1px)!important; box-shadow: 0 6px 13px rgba(5,38,135,.25), 0 0 0 1px rgba(229,57,53,.12)!important; } .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"] > *{ color:#ffffff!important; } /* Selected button gets only a subtle white finishing line. */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]::after{ opacity:1!important; background:#ffffff!important; transform:scaleX(1)!important; } /* Hover on selected keeps the City Live gradient. */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]:hover{ background: linear-gradient( 135deg, #ef3b3f 0%, #d4212c 42%, #195bd8 100% )!important; color:#ffffff!important; border-color:#ffffff!important; transform:translateY(-2px)!important; box-shadow: 0 8px 16px rgba(8,54,155,.28), 0 0 0 1px rgba(229,57,53,.18)!important; } /* Prevent a browser focus ring from replacing the selected visual. */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]:focus{ outline:none!important; } .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]:focus-visible{ outline:2px solid rgba(255,255,255,.98)!important; outline-offset:2px!important; } /* ========================================================= CITY LIVE READER SUITE v3.3.4 CITY LIVE RED ↔ BLUE GRADIENT ANIMATION Only hover / selected states are animated. Normal buttons remain clean and static. ========================================================= */ /* Shared animated City Live gradient */ @keyframes cityLiveGradientFlow{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } /* Hover: animated City Live gradient */ .cl-reader-suite .cl-tool-btn:hover{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#ffffff!important; border-color:#ffffff!important; animation: cityLiveGradientFlow 2.8s ease-in-out infinite!important; transform:translateY(-2px)!important; box-shadow: 0 7px 15px rgba(8,54,155,.25), 0 0 0 1px rgba(229,57,53,.12)!important; } /* Selected: continuously animated City Live gradient */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"], .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"], .cl-reader-suite .cl-tool-btn[aria-selected="true"]{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#ffffff!important; border-color:#ffffff!important; animation: cityLiveGradientFlow 3.2s ease-in-out infinite!important; transform:translateY(-1px)!important; box-shadow: 0 7px 15px rgba(8,54,155,.26), 0 0 0 1px rgba(229,57,53,.14)!important; } /* Selected icon and text remain white */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"] > *, .cl-reader-suite .cl-tool-btn.active > *, .cl-reader-suite .cl-tool-btn.selected > *, .cl-reader-suite .cl-tool-btn.is-active > *, .cl-reader-suite .cl-tool-btn[aria-pressed="true"] > *, .cl-reader-suite .cl-tool-btn[aria-selected="true"] > *{ color:#ffffff!important; } /* Selected + hover: slightly stronger motion */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]:hover, .cl-reader-suite .cl-tool-btn.active:hover, .cl-reader-suite .cl-tool-btn.selected:hover, .cl-reader-suite .cl-tool-btn.is-active:hover, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]:hover, .cl-reader-suite .cl-tool-btn[aria-selected="true"]:hover{ animation: cityLiveGradientFlow 2.1s ease-in-out infinite!important; transform:translateY(-2px)!important; box-shadow: 0 9px 18px rgba(8,54,155,.30), 0 0 0 1px rgba(229,57,53,.16)!important; } /* Keep the finishing accent subtle */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]::after, .cl-reader-suite .cl-tool-btn.active::after, .cl-reader-suite .cl-tool-btn.selected::after, .cl-reader-suite .cl-tool-btn.is-active::after, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]::after, .cl-reader-suite .cl-tool-btn[aria-selected="true"]::after{ background:#ffffff!important; opacity:1!important; transform:scaleX(1)!important; } /* Reduced-motion accessibility */ @media(prefers-reduced-motion:reduce){ .cl-reader-suite .cl-tool-btn:hover, .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"], .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"], .cl-reader-suite .cl-tool-btn[aria-selected="true"]{ animation:none!important; background: linear-gradient( 120deg, #e53935 0%, #cf202a 42%, #174fc5 100% )!important; background-size:100% 100%!important; } } /* ========================================================= CITY LIVE READER SUITE v3.4.1 MOBILE STICKY DIRECT — CSS FIRST Desktop v3.3.4 remains completely unchanged. ========================================================= */ @media (max-width: 768px){ /* Reserve space so the fixed toolbar never covers article text. */ body{ padding-bottom:78px!important; } /* Move the existing Reader Suite itself to the viewport bottom. No JS-added class is required. */ .cl-reader-suite{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:99999!important; width:100%!important; max-width:none!important; margin:0!important; padding: 0 max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left))!important; background:rgba(255,255,255,.97)!important; border:0!important; border-top:1px solid rgba(7,38,125,.14)!important; border-radius:14px 14px 0 0!important; box-shadow:0 -7px 24px rgba(5,31,105,.16)!important; box-sizing:border-box!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; } /* Compact red callout */ .cl-reader-suite::before{ display:flex!important; align-items:center!important; width:max-content!important; min-height:23px!important; height:23px!important; margin:0 0 0 7px!important; padding:0 10px!important; color:#fff!important; font-size:9px!important; font-weight:850!important; line-height:23px!important; letter-spacing:.06em!important; border-radius:6px 6px 0 0!important; box-shadow:none!important; } .cl-reader-suite::after{ top:22px!important; left:22px!important; border-left-width:5px!important; border-right-width:5px!important; border-top-width:6px!important; } /* Horizontal scrolling blue action strip */ .cl-reader-suite .cl-reader-toolbar{ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; height:54px!important; min-height:54px!important; margin:0!important; padding:6px!important; gap:6px!important; overflow-x:auto!important; overflow-y:hidden!important; white-space:nowrap!important; scroll-behavior:smooth!important; scrollbar-width:none!important; -ms-overflow-style:none!important; border-radius:10px!important; -webkit-overflow-scrolling:touch!important; /* Subtle fade at right edge signals more buttons. */ -webkit-mask-image:linear-gradient( 90deg, #000 0%, #000 calc(100% - 20px), transparent 100% )!important; mask-image:linear-gradient( 90deg, #000 0%, #000 calc(100% - 20px), transparent 100% )!important; } .cl-reader-suite .cl-reader-toolbar::-webkit-scrollbar{ display:none!important; } /* All 8 actions remain available by horizontal swipe. */ .cl-reader-suite .cl-tool-btn{ flex:0 0 94px!important; min-width:94px!important; width:94px!important; height:40px!important; min-height:40px!important; padding:0 8px!important; gap:5px!important; border-radius:9px!important; font-size:11px!important; } .cl-reader-suite .cl-tool-btn > .cl-v32-icon, .cl-reader-suite .cl-tool-btn > .cl-v31-icon{ width:19px!important; min-width:19px!important; height:19px!important; flex-basis:19px!important; font-size:16px!important; } .cl-reader-suite .cl-tool-btn > span:not(.cl-v32-icon):not(.cl-v31-icon){ font-size:11px!important; font-weight:800!important; } /* Preserve City Live selected/hover gradient, but don't lift buttons inside a bottom-fixed toolbar. */ .cl-reader-suite .cl-tool-btn:hover{ transform:none!important; } .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"], .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]{ transform:none!important; } } @media (max-width:380px){ body{ padding-bottom:76px!important; } .cl-reader-suite .cl-tool-btn{ flex-basis:88px!important; min-width:88px!important; width:88px!important; } } @media print{ body{ padding-bottom:0!important; } } /* ========================================================= CITY LIVE READER SUITE v3.5 MOBILE PREMIUM APP-LIKE STICKY Desktop v3.3.4 remains locked and untouched. ========================================================= */ @media (max-width:768px){ /* Compact bottom floating action rail */ .cl-reader-suite{ position:fixed!important; left:10px!important; right:10px!important; bottom:max(7px, env(safe-area-inset-bottom))!important; z-index:99999!important; width:auto!important; max-width:none!important; margin:0!important; padding:5px!important; background:rgba(9,31,91,.94)!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:16px!important; box-shadow: 0 8px 28px rgba(4,25,83,.28), 0 2px 7px rgba(0,0,0,.10)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; } /* Mobile does NOT need the desktop section label */ .cl-reader-suite::before{ display:none!important; } .cl-reader-suite::after{ display:none!important; } /* Keep page clear of the floating rail */ body{ padding-bottom:76px!important; } /* Slim City Live blue action strip */ .cl-reader-suite .cl-reader-toolbar{ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; height:50px!important; min-height:50px!important; margin:0!important; padding:4px!important; gap:5px!important; overflow-x:auto!important; overflow-y:hidden!important; white-space:nowrap!important; scrollbar-width:none!important; -ms-overflow-style:none!important; -webkit-overflow-scrolling:touch!important; background: linear-gradient( 110deg, #071b72 0%, #0b35ad 52%, #195cda 100% )!important; border:0!important; border-radius:12px!important; box-shadow:none!important; -webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 calc(100% - 16px), transparent 100% )!important; mask-image: linear-gradient( 90deg, #000 0%, #000 calc(100% - 16px), transparent 100% )!important; } .cl-reader-suite .cl-reader-toolbar::-webkit-scrollbar{ display:none!important; } /* Smaller, elegant mobile action cards */ .cl-reader-suite .cl-tool-btn{ flex:0 0 82px!important; min-width:82px!important; width:82px!important; height:38px!important; min-height:38px!important; padding:0 6px!important; gap:4px!important; border:1px solid rgba(255,255,255,.82)!important; border-radius:9px!important; background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.94) 100% )!important; color:#09174e!important; font-size:10px!important; font-weight:800!important; box-shadow: 0 2px 5px rgba(0,0,0,.08), inset 0 1px 0 #fff!important; transform:none!important; } .cl-reader-suite .cl-tool-btn > .cl-v32-icon, .cl-reader-suite .cl-tool-btn > .cl-v31-icon{ width:18px!important; min-width:18px!important; height:18px!important; flex:0 0 18px!important; font-size:15px!important; } .cl-reader-suite .cl-tool-btn > span:not(.cl-v32-icon):not(.cl-v31-icon){ font-size:10px!important; font-weight:800!important; max-width:55px!important; } /* Mobile hover is touch-based; keep it clean */ .cl-reader-suite .cl-tool-btn:hover{ transform:none!important; } /* Approved City Live selected state */ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"], .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"], .cl-reader-suite .cl-tool-btn[aria-selected="true"]{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#fff!important; border-color:#fff!important; animation: cityLiveGradientFlow 3.2s ease-in-out infinite!important; box-shadow: 0 3px 8px rgba(7,38,125,.24)!important; transform:none!important; } .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"] > *, .cl-reader-suite .cl-tool-btn.active > *, .cl-reader-suite .cl-tool-btn.selected > *, .cl-reader-suite .cl-tool-btn.is-active > *, .cl-reader-suite .cl-tool-btn[aria-pressed="true"] > *, .cl-reader-suite .cl-tool-btn[aria-selected="true"] > *{ color:#fff!important; } .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"]::after, .cl-reader-suite .cl-tool-btn.active::after, .cl-reader-suite .cl-tool-btn.selected::after, .cl-reader-suite .cl-tool-btn.is-active::after, .cl-reader-suite .cl-tool-btn[aria-pressed="true"]::after, .cl-reader-suite .cl-tool-btn[aria-selected="true"]::after{ display:none!important; } } @media(max-width:380px){ body{ padding-bottom:74px!important; } .cl-reader-suite{ left:7px!important; right:7px!important; padding:4px!important; border-radius:14px!important; } .cl-reader-suite .cl-reader-toolbar{ height:48px!important; min-height:48px!important; } .cl-reader-suite .cl-tool-btn{ flex-basis:78px!important; min-width:78px!important; width:78px!important; height:36px!important; min-height:36px!important; } } @media(prefers-reduced-motion:reduce){ .cl-reader-suite .cl-tool-btn[data-citylive-selected="true"], .cl-reader-suite .cl-tool-btn.active, .cl-reader-suite .cl-tool-btn.selected, .cl-reader-suite .cl-tool-btn.is-active, .cl-reader-suite .cl-tool-btn[aria-pressed="true"], .cl-reader-suite .cl-tool-btn[aria-selected="true"]{ animation:none!important; background: linear-gradient( 120deg, #e53935 0%, #cf202a 42%, #174fc5 100% )!important; background-size:100% 100%!important; } } /* ========================================================= CITY LIVE READER SUITE v3.5.2 TRANSLATE VISUAL STATE GUARD ========================================================= */ /* Translate must look NORMAL whenever its overlay is closed. */ body:not(:has(#clTranslatePanel.is-open)) .cl-reader-suite .cl-tool-btn[data-tool="translate"], body:not(:has(#clTranslatePanel[aria-hidden="false"])) .cl-reader-suite .cl-tool-btn[data-tool="translate"]{ background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.94) 100% )!important; color:#09174e!important; border-color:rgba(255,255,255,.92)!important; animation:none!important; transform:none!important; box-shadow: 0 2px 5px rgba(0,0,0,.08), inset 0 1px 0 #fff!important; } /* Restore normal Translate icon/text colours after close. */ body:not(:has(#clTranslatePanel.is-open)) .cl-reader-suite .cl-tool-btn[data-tool="translate"] > *, body:not(:has(#clTranslatePanel[aria-hidden="false"])) .cl-reader-suite .cl-tool-btn[data-tool="translate"] > *{ color:#09174e!important; } /* When the Translate overlay IS open, allow the approved City Live selected gradient to show. */ body:has(#clTranslatePanel.is-open) .cl-reader-suite .cl-tool-btn[data-tool="translate"], body:has(#clTranslatePanel[aria-hidden="false"]) .cl-reader-suite .cl-tool-btn[data-tool="translate"]{ color:#fff!important; border-color:#fff!important; } /* ========================================================= CITY LIVE READER SUITE v3.5.3 TRANSLATE HOVER PRIORITY FIX Closed Translate = normal white. Mouse over Translate = City Live animated gradient. Overlay open = City Live selected gradient. ========================================================= */ /* Closed Translate must be normal when not hovered. */ body:not(:has(#clTranslatePanel.is-open)) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:not(:hover), body:not(:has(#clTranslatePanel[aria-hidden="false"])) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:not(:hover){ background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.94) 100% )!important; color:#09174e!important; border-color:rgba(255,255,255,.92)!important; animation:none!important; transform:none!important; box-shadow: 0 2px 5px rgba(0,0,0,.08), inset 0 1px 0 #fff!important; } /* CLOSED + HOVER: restore the approved City Live red → blue animated gradient. This rule deliberately has higher specificity than the closed guard. */ body:not(:has(#clTranslatePanel.is-open)) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover, body:not(:has(#clTranslatePanel[aria-hidden="false"])) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#fff!important; border-color:#fff!important; animation: cityLiveGradientFlow 2.8s ease-in-out infinite!important; transform:translateY(-2px)!important; box-shadow: 0 7px 15px rgba(8,54,155,.25), 0 0 0 1px rgba(229,57,53,.12)!important; } /* Closed + hover icon/text must remain white. */ body:not(:has(#clTranslatePanel.is-open)) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover > *, body:not(:has(#clTranslatePanel[aria-hidden="false"])) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover > *{ color:#fff!important; } /* Remove the old underline-only hover treatment for Translate. */ body:not(:has(#clTranslatePanel.is-open)) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover::after, body:not(:has(#clTranslatePanel[aria-hidden="false"])) .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover::after{ opacity:0!important; transform:scaleX(0)!important; } /* OPEN overlay = selected City Live state. */ body:has(#clTranslatePanel.is-open) .cl-reader-suite .cl-tool-btn[data-tool="translate"], body:has(#clTranslatePanel[aria-hidden="false"]) .cl-reader-suite .cl-tool-btn[data-tool="translate"]{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#fff!important; border-color:#fff!important; animation: cityLiveGradientFlow 3.2s ease-in-out infinite!important; transform:translateY(-1px)!important; } /* Open state icon/text */ body:has(#clTranslatePanel.is-open) .cl-reader-suite .cl-tool-btn[data-tool="translate"] > *, body:has(#clTranslatePanel[aria-hidden="false"]) .cl-reader-suite .cl-tool-btn[data-tool="translate"] > *{ color:#fff!important; } /* ========================================================= CITY LIVE READER SUITE v3.5.4 TRANSLATE UNDERLINE — FINAL CLEANUP ========================================================= */ /* Translate never uses the legacy underline/accent pseudo-element. */ .cl-reader-suite .cl-tool-btn[data-tool="translate"]::after, .cl-reader-suite .cl-tool-btn[data-tool="translate"]::before{ content:none!important; display:none!important; width:0!important; height:0!important; opacity:0!important; transform:none!important; background:none!important; box-shadow:none!important; border:0!important; } /* Explicitly suppress any underline decoration inherited by the Translate label/icon while preserving the button's City Live hover. */ .cl-reader-suite .cl-tool-btn[data-tool="translate"], .cl-reader-suite .cl-tool-btn[data-tool="translate"] *, .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover, .cl-reader-suite .cl-tool-btn[data-tool="translate"]:hover *{ text-decoration:none!important; text-decoration-line:none!important; text-underline-offset:0!important; text-decoration-thickness:0!important; } /* ========================================================= CITY LIVE READER SUITE v3.7 AUDIO CLOSE ROOT FIX — SINGLE CSS AUTHORITY ========================================================= */ /* Audio is NORMAL whenever the real player is not open. */ .cl-reader-suite .cl-tool-btn[data-tool="audio"]:not([data-citylive-audio-playing="true"]), .cl-reader-suite .cl-tool-btn[data-tool="audio"].active:not([data-citylive-audio-playing="true"]), .cl-reader-suite .cl-tool-btn[data-tool="audio"].selected:not([data-citylive-audio-playing="true"]), .cl-reader-suite .cl-tool-btn[data-tool="audio"].is-active:not([data-citylive-audio-playing="true"]), .cl-reader-suite .cl-tool-btn[data-tool="audio"][aria-pressed="true"]:not([data-citylive-audio-playing="true"]), .cl-reader-suite .cl-tool-btn[data-tool="audio"][data-citylive-selected="true"]:not([data-citylive-audio-playing="true"]){ background: linear-gradient( 145deg, #ffffff 0%, #f6f9ff 100% )!important; background-image: linear-gradient( 145deg, #ffffff 0%, #f6f9ff 100% )!important; background-color:#ffffff!important; color:#09174e!important; border-color:rgba(255,255,255,.92)!important; box-shadow: 0 2px 5px rgba(0,0,0,.08), inset 0 1px 0 #ffffff!important; animation:none!important; transform:none!important; } /* CLOSED + HOVER = approved City Live hover. */ .cl-reader-suite .cl-tool-btn[data-tool="audio"]:not([data-citylive-audio-playing="true"]):hover{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#ffffff!important; border-color:#ffffff!important; animation: cityLiveGradientFlow 2.8s ease-in-out infinite!important; transform:translateY(-1px)!important; box-shadow: 0 7px 15px rgba(8,54,155,.25), 0 0 0 1px rgba(229,57,53,.12)!important; } /* OPEN / PLAYING = approved City Live selected gradient. */ .cl-reader-suite .cl-tool-btn[data-tool="audio"][data-citylive-audio-playing="true"]{ background: linear-gradient( 120deg, #e53935 0%, #d3222d 28%, #174fc5 68%, #2368e8 100% )!important; background-size:220% 220%!important; color:#ffffff!important; border-color:#ffffff!important; animation: cityLiveGradientFlow 3.2s ease-in-out infinite!important; box-shadow: 0 7px 15px rgba(8,54,155,.26), 0 0 0 1px rgba(229,57,53,.14)!important; } .cl-reader-suite .cl-tool-btn[data-tool="audio"][data-citylive-audio-playing="true"] > *, .cl-reader-suite .cl-tool-btn[data-tool="audio"]:hover > *{ color:#ffffff!important; } /* Remove the old Audio underline/accent completely. */ .cl-reader-suite .cl-tool-btn[data-tool="audio"]::before, .cl-reader-suite .cl-tool-btn[data-tool="audio"]::after{ content:none!important; display:none!important; width:0!important; height:0!important; opacity:0!important; transform:none!important; background:none!important; border:0!important; box-shadow:none!important; } .cl-reader-suite .cl-tool-btn[data-tool="audio"], .cl-reader-suite .cl-tool-btn[data-tool="audio"] *, .cl-reader-suite .cl-tool-btn[data-tool="audio"]:hover, .cl-reader-suite .cl-tool-btn[data-tool="audio"]:hover *{ text-decoration:none!important; text-decoration-line:none!important; text-underline-offset:0!important; text-decoration-thickness:0!important; } /*====================================================* * CITY LIVE — FINAL 8 MODULES * Audio | Reader | Translate | Image | PDF | Print | AI | Bookmark * * No visibility hiding and no first-paint suppression. *====================================================*/ .cl-reader-suite .cl-reader-toolbar{ display:flex; align-items:center; gap:7px; flex-wrap:nowrap; } .cl-reader-suite .cl-tool-btn[data-tool="image"], .cl-reader-suite .cl-tool-btn[data-tool="pdf"]{ flex:0 0 auto; }