/** * ClicksmoneyNews Pro v3 — Feature Styles (2026) * Loaded after the main stylesheet. Additive only; never overrides classic * class names destructively. Dark mode is driven by [data-theme="dark"] on * , set before first paint by the inline bootstrap script. * * Sections: * 1. Design tokens (light + dark) * 2. Dark-mode element overrides * 3. Breaking-news ticker * 4. Dark-mode toggle button * 5. Reading progress bar * 6. Reading-time meta * 7. Skip link + focus (WCAG 2.2) * 8. View Transitions + reduced-motion */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { --gp-bg: #ffffff; --gp-bg-alt: #f5f5f5; --gp-surface: #ffffff; --gp-text: #333333; --gp-text-soft: #666666; --gp-heading: #23292b; --gp-border: #e6e6e6; --gp-link: var(--color-primary, #cc0000); --gp-ticker-bg: #1a1a1a; --gp-ticker-text: #ffffff; --gp-ticker-label: var(--color-primary, #cc0000); --gp-toggle-bg: #e6e6e6; --gp-toggle-knob: #ffffff; --gp-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --gp-transition: 0.25s ease; } html[data-theme="dark"] { /* Background: slightly off-black rather than near-pure-black. Reduces the harsh luminance gap that makes text look "washed out". */ --gp-bg: #1a1c1f; --gp-bg-alt: #22252a; --gp-surface: #22252a; /* Body text: comfortable reading gray (~8:1 contrast on --gp-bg). Near-white (#d6d9dc) on near-black (#15171a) = 13:1 — too stark, creates halation / glow that users describe as "too light / washed out". Reducing to #b8bcc4 keeps WCAG AAA (>7:1) while feeling solid. */ --gp-text: #b8bcc4; /* Article body: one step brighter than generic text so long-form paragraphs read with more weight. Still ~9:1 on --gp-bg. */ --gp-article-text: #c4c8ce; --gp-text-soft: #7a8089; --gp-heading: #e8eaee; --gp-border: #2e3138; --gp-link: #ff8080; --gp-ticker-bg: #0d0e10; --gp-ticker-text: #e8eaee; --gp-toggle-bg: #3a3f46; --gp-toggle-knob: #1a1c1f; --gp-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* ========================================================================== 2. DARK-MODE ELEMENT OVERRIDES Scoped to [data-theme="dark"] so light mode is byte-identical to v2. ========================================================================== */ html[data-theme="dark"] body { background-color: var(--gp-bg); color: var(--gp-text); } /* ------------------------------------------------------------------------- #page fix — ROOT CAUSE of white-background-in-dark-mode. v2 has `#page { background-color: #fff }` using an ID selector (specificity 1,0,0) which beats every class/attribute override. `html[data-theme="dark"] #page` has specificity (1,1,1) and wins. This single rule fixes the white wrapper that made the near-white heading colour (#e8eaee) invisible against a white background. -------------------------------------------------------------------------- */ html[data-theme="dark"] #page { background-color: var(--gp-bg); } html[data-theme="dark"] .site-content, html[data-theme="dark"] #content, html[data-theme="dark"] .site-main, html[data-theme="dark"] .hentry, html[data-theme="dark"] .post-big, html[data-theme="dark"] .post-small, html[data-theme="dark"] article { background-color: transparent; color: var(--gp-text); } /* Breadcrumbs — strip the light-gray chevron backgrounds and borders. */ html[data-theme="dark"] .breadcrumbs { border-bottom-color: var(--gp-border); } html[data-theme="dark"] .breadcrumbs .breadcrumbs-nav { color: var(--gp-text-soft); } html[data-theme="dark"] .breadcrumbs .breadcrumbs-nav span.here, html[data-theme="dark"] .breadcrumbs .breadcrumbs-nav a { background-color: var(--gp-bg-alt); color: var(--gp-text); border-color: var(--gp-border); } html[data-theme="dark"] .breadcrumbs .breadcrumbs-nav span.here:after, html[data-theme="dark"] .breadcrumbs .breadcrumbs-nav a:after { border-left-color: var(--gp-bg-alt); } html[data-theme="dark"] .breadcrumbs .breadcrumbs-nav a:hover { color: var(--gp-link); } html[data-theme="dark"] .site-header, html[data-theme="dark"] #masthead, html[data-theme="dark"] #secondary-bar, html[data-theme="dark"] .mobile-menu, html[data-theme="dark"] .sidebar .widget, html[data-theme="dark"] .site-footer, html[data-theme="dark"] #colophon { background-color: var(--gp-surface); border-color: var(--gp-border); color: var(--gp-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .entry-title, html[data-theme="dark"] .entry-title a, html[data-theme="dark"] .widget-title, html[data-theme="dark"] .site-title a { color: var(--gp-heading); } html[data-theme="dark"] a, html[data-theme="dark"] a:visited { color: var(--gp-link); } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] .entry-summary, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .entry-meta, html[data-theme="dark"] .entry-meta a { color: var(--gp-text); } /* ------------------------------------------------------------------------- ARTICLE / POST BODY TEXT — nuclear specificity overrides ------------------------------------------------------------------------- Problem: near-white text (#d6d9dc) on near-black (#15171a) = 13:1 ratio. That extreme gap causes halation on screen — letters appear to bleed and glow, which users perceive as text looking "too light / washed out." These explicit selectors use the --gp-article-text token (~9:1) which is WCAG AAA-compliant and feels solid without the glaring effect. The long selector chains beat any v2 rule (e.g. .single .entry-content p) without needing !important. ---------------------------------------------------------------------- */ html[data-theme="dark"] .entry-content p, html[data-theme="dark"] .entry-content li, html[data-theme="dark"] .entry-content ul, html[data-theme="dark"] .entry-content ol, html[data-theme="dark"] .entry-content dl, html[data-theme="dark"] .entry-content dt, html[data-theme="dark"] .entry-content dd, html[data-theme="dark"] .entry-content blockquote, html[data-theme="dark"] .entry-content blockquote p, html[data-theme="dark"] .entry-content pre, html[data-theme="dark"] .entry-content pre code, html[data-theme="dark"] .entry-content table, html[data-theme="dark"] .entry-content td, html[data-theme="dark"] .entry-content th, html[data-theme="dark"] .page-content p, html[data-theme="dark"] .page-content li { color: var(--gp-article-text); background-color: transparent; } /* The content wrapper itself and the full article container */ html[data-theme="dark"] .single .entry-content, html[data-theme="dark"] .single #primary article.hentry, html[data-theme="dark"] .page #primary article.hentry { color: var(--gp-article-text); background-color: transparent; } /* Navigation strip between articles (v2 sets background: #f9f9f9) */ html[data-theme="dark"] .single .navigation, html[data-theme="dark"] .single .navigation a, html[data-theme="dark"] .single .navigation span { background-color: var(--gp-bg-alt) !important; border-color: var(--gp-border); color: var(--gp-text); } /* Strong / em / code inside content should stay visible */ html[data-theme="dark"] .entry-content strong, html[data-theme="dark"] .entry-content b { color: var(--gp-heading); } html[data-theme="dark"] .entry-content em, html[data-theme="dark"] .entry-content i { color: var(--gp-article-text); } html[data-theme="dark"] .entry-content code { background-color: var(--gp-bg-alt); color: #e5a46b; /* warm amber — distinguishable from body text */ border-radius: 3px; padding: 1px 5px; } html[data-theme="dark"] .entry-content pre { background-color: var(--gp-bg-alt); border: 1px solid var(--gp-border); } html[data-theme="dark"] .entry-content blockquote { border-left-color: var(--gp-link); } html[data-theme="dark"] .entry-date, html[data-theme="dark"] .entry-comment, html[data-theme="dark"] .entry-reading-time { color: var(--gp-text-soft); } /* -------------------------------------------------------------------------- Widget link contrast fix (WCAG AA). The classic stylesheet sets `.sidebar .widget ul > li a { color:#333 }` (specificity 0,2,3) which beat the generic dark-mode `a` rule and left widget links near-black on the dark surface (~1.3:1 contrast). These higher-specificity overrides restore readable light text (~11:1). -------------------------------------------------------------------------- */ html[data-theme="dark"] .sidebar .widget ul > li a, html[data-theme="dark"] .sidebar .widget ul li a, html[data-theme="dark"] .site-footer .widget ul > li a, html[data-theme="dark"] .site-footer .widget ul li a, html[data-theme="dark"] .widget_recent_entries ul li a, html[data-theme="dark"] .widget_recent_comments ul li a, html[data-theme="dark"] .widget_archive ul li a, html[data-theme="dark"] .widget_categories ul li a, html[data-theme="dark"] .widget_pages ul li a, html[data-theme="dark"] .widget_meta ul li a, html[data-theme="dark"] .widget_nav_menu ul li a, html[data-theme="dark"] .widget_posts_thumbnail .entry-wrap a, html[data-theme="dark"] .widget li a { color: var(--gp-text); } /* Widget list links turn to the accent colour on hover/focus. */ html[data-theme="dark"] .sidebar .widget ul > li a:hover, html[data-theme="dark"] .sidebar .widget ul li a:hover, html[data-theme="dark"] .site-footer .widget ul li a:hover, html[data-theme="dark"] .widget_recent_entries ul li a:hover, html[data-theme="dark"] .widget_archive ul li a:hover, html[data-theme="dark"] .widget_categories ul li a:hover, html[data-theme="dark"] .widget li a:hover, html[data-theme="dark"] .widget li a:focus { color: var(--gp-link); } /* Post-count / meta numbers next to archive & category links. */ html[data-theme="dark"] .widget_archive li, html[data-theme="dark"] .widget_categories li, html[data-theme="dark"] .widget_recent_entries .post-date, html[data-theme="dark"] .widget .rss-date, html[data-theme="dark"] .widget_posts_thumbnail .entry-meta { color: var(--gp-text-soft); } /* Comment-author / commenter text in the Recent Comments widget. */ html[data-theme="dark"] .widget_recent_comments ul li { color: var(--gp-text); } html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--gp-bg-alt); border-color: var(--gp-border); color: var(--gp-text); } html[data-theme="dark"] .widget, html[data-theme="dark"] .author-box, html[data-theme="dark"] .entry-related, html[data-theme="dark"] .comment-body { border-color: var(--gp-border); } html[data-theme="dark"] img, html[data-theme="dark"] .thumbnail-wrap img { /* Slightly dim very bright images so they don't glare in dark mode. */ filter: brightness(0.92); } /* ========================================================================== 3. BREAKING-NEWS TICKER Reserved height (40px) avoids CLS. CSS keyframes scroll the track; a data-paused attribute (toggled by JS / :hover) halts the animation. ========================================================================== */ .breaking-news { background-color: var(--gp-ticker-bg); color: var(--gp-ticker-text); font-family: var(--font-ui, "Roboto Condensed", sans-serif); height: 40px; overflow: hidden; position: relative; z-index: 50; } .breaking-news-inner { display: flex; align-items: center; height: 40px; gap: 0; } .breaking-news-label { background-color: var(--gp-ticker-label); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; line-height: 40px; padding: 0 14px; height: 40px; white-space: nowrap; flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; } /* Pulsing live dot before the label text. */ .breaking-news-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #fff; animation: gp-pulse 1.4s ease-in-out infinite; } @keyframes gp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .breaking-news-viewport { flex: 1 1 auto; overflow: hidden; height: 40px; position: relative; } .breaking-news-track { display: flex; align-items: center; gap: 0; height: 40px; margin: 0; padding: 0; list-style: none; white-space: nowrap; width: max-content; will-change: transform; animation: gp-ticker-scroll 40s linear infinite; } /* Pause on hover, on focus-within (keyboard), and when JS sets data-paused. */ .breaking-news:hover .breaking-news-track, .breaking-news:focus-within .breaking-news-track, .breaking-news[data-paused="true"] .breaking-news-track { animation-play-state: paused; } @keyframes gp-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .breaking-news-item { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; position: relative; } .breaking-news-item::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: rgba(255, 255, 255, 0.25); } .breaking-news-item a { color: var(--gp-ticker-text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .breaking-news-item a:hover .breaking-news-headline, .breaking-news-item a:focus .breaking-news-headline { text-decoration: underline; } .breaking-news-time { color: var(--gp-ticker-label); font-weight: 700; font-size: 11px; flex: 0 0 auto; } html[data-theme="dark"] .breaking-news-time { color: #ff8585; } .breaking-news-headline { color: var(--gp-ticker-text); } /* ------------------------------------------------------------------ Category-format items ( data-format="category-time-title" ) Two separate elements side-by-side: category badge + story link. Using two links (not one nested) keeps HTML valid and lets keyboard users tab to either the category archive or the article directly. ------------------------------------------------------------------ */ /* Container for category-format items — flex so the two links sit inline. */ .breaking-news-item--with-cat { display: inline-flex; align-items: stretch; padding: 0; gap: 0; } .breaking-news-item--with-cat::after { display: none; } /* remove divider */ /* Category badge link */ .breaking-news-cat-link { display: inline-flex; align-items: center; height: 40px; padding: 0 6px 0 22px; color: var(--gp-ticker-label); font-family: var(--font-ui, "Roboto Condensed", sans-serif); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; flex: 0 0 auto; transition: opacity 0.15s ease; } .breaking-news-cat-link:hover, .breaking-news-cat-link:focus-visible { opacity: 0.8; } /* Colon separator — presentational only, hidden from screen readers */ .breaking-news-cat-link::after { content: ':'; margin-left: 2px; color: rgba(255, 255, 255, 0.35); font-weight: 400; } /* Story link (time + headline) — mirrors the single-link item style */ .breaking-news-story-link { display: inline-flex; align-items: center; height: 40px; padding: 0 22px 0 8px; color: var(--gp-ticker-text); text-decoration: none; gap: 8px; font-size: 13px; transition: opacity 0.15s ease; } .breaking-news-story-link:hover, .breaking-news-story-link:focus-visible { opacity: 0.85; } .breaking-news-story-link:hover .breaking-news-headline, .breaking-news-story-link:focus-visible .breaking-news-headline { text-decoration: underline; } /* Divider between category-format items in the scrolling track */ .breaking-news-item--with-cat + .breaking-news-item--with-cat::before, .breaking-news-item--with-cat::after { display: none; } /* Mobile: tighten up to preserve the 40px height */ @media (max-width: 600px) { .breaking-news-cat-link { font-size: 10px; padding: 0 4px 0 10px; } .breaking-news-story-link { padding: 0 12px 0 4px; font-size: 12px; } } /* Pause / play button */ .breaking-news-toggle { flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--gp-transition); } .breaking-news-toggle:hover { background: rgba(255, 255, 255, 0.18); } .breaking-news-toggle-icon { display: block; width: 0; height: 0; /* Default = "pause" icon drawn with borders (two bars). */ border-style: double; border-width: 0 0 0 10px; border-color: #fff; height: 12px; } /* When paused, show a "play" triangle instead. */ .breaking-news[data-paused="true"] .breaking-news-toggle-icon { border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; height: 0; } /* Mobile: hide the per-item time and tighten spacing. */ @media (max-width: 600px) { .breaking-news-time { display: none; } .breaking-news-item { padding: 0 14px; } .breaking-news-label { font-size: 11px; padding: 0 10px; } } /* ========================================================================== 3a. CUSTOMIZER PREVIEW FLASH Brief pulsing outline that appears around the ticker in the Customizer preview pane when any postMessage setting changes, so the admin can see instantly which element was affected. ========================================================================== */ @keyframes gp-ticker-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); } 40% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .breaking-news.ticker-preview-flash { animation: gp-ticker-flash 0.9s ease forwards; } /* ========================================================================== 4. DARK-MODE TOGGLE BUTTON (in primary bar) ========================================================================== */ .theme-toggle { background: transparent; border: 0; cursor: pointer; padding: 6px; margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; /* space between the track and the text label */ vertical-align: middle; color: inherit; line-height: 1; } /* Visible "Dark Mode" / "Light Mode" label next to the toggle. aria-hidden so screen readers use the .screen-reader-text instead. JS (syncState) keeps the text in sync as the theme switches. */ .theme-toggle-label { font-family: var(--font-ui, "Roboto Condensed", sans-serif); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; color: inherit; opacity: 0.8; transition: opacity var(--gp-transition); line-height: 1; } .theme-toggle:hover .theme-toggle-label { opacity: 1; } /* In dark mode the label reads "Light Mode" — give it a slightly warm tint. */ html[data-theme="dark"] .theme-toggle-label { color: var(--gp-text); } html[data-theme="dark"] .theme-toggle:hover .theme-toggle-label { color: var(--gp-heading); } .theme-toggle-track { width: 46px; height: 24px; border-radius: 12px; background: var(--gp-toggle-bg); position: relative; display: inline-flex; align-items: center; transition: background var(--gp-transition); } /* The sliding knob. */ .theme-toggle-track::after { content: ""; position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gp-toggle-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform var(--gp-transition); } html[data-theme="dark"] .theme-toggle-track::after { transform: translateX(22px); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); transition: opacity var(--gp-transition); } .theme-toggle .icon-sun { left: 4px; color: #f5a623; } .theme-toggle .icon-moon { right: 4px; color: #cfd3f7; } /* Light mode → show sun, hide moon. Dark mode → opposite. */ .theme-toggle .icon-moon { opacity: 0; } html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; } html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; } /* ========================================================================== 5. READING PROGRESS BAR (single posts) ========================================================================== */ .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 9999; pointer-events: none; } .reading-progress-fill { display: block; height: 100%; width: 0; background: var(--color-primary, #cc0000); transition: width 0.1s linear; } html[data-theme="dark"] .reading-progress-fill { background: #ff6b6b; } /* ========================================================================== 5b. MODERN SHARE ROW (2026) Inline-SVG pill buttons with per-network brand colours. SVGs inherit currentColor so they recolour on hover and in dark mode automatically. ========================================================================== */ .entry-share-2026 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; } .entry-share-2026 .entry-share-label { font-family: var(--font-ui, "Roboto Condensed", sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: var(--gp-text-soft, #666); margin-right: 4px; } .entry-share-2026 .share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--gp-border, #e0e0e0); border-radius: 999px; background: var(--gp-surface, #fff); color: var(--gp-text, #333); font-family: var(--font-ui, "Roboto Condensed", sans-serif); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease; } .entry-share-2026 .share-btn svg { flex: 0 0 auto; display: block; } .entry-share-2026 .share-btn:hover, .entry-share-2026 .share-btn:focus-visible { color: #fff; transform: translateY(-1px); } /* Per-network brand colours on hover. */ .entry-share-2026 .social-x:hover, .entry-share-2026 .social-x:focus-visible { background:#000; border-color:#000; } .entry-share-2026 .social-facebook:hover, .entry-share-2026 .social-facebook:focus-visible { background:#1877f2; border-color:#1877f2; } .entry-share-2026 .social-linkedin:hover, .entry-share-2026 .social-linkedin:focus-visible { background:#0a66c2; border-color:#0a66c2; } .entry-share-2026 .social-whatsapp:hover, .entry-share-2026 .social-whatsapp:focus-visible { background:#25d366; border-color:#25d366; } .entry-share-2026 .social-reddit:hover, .entry-share-2026 .social-reddit:focus-visible { background:#ff4500; border-color:#ff4500; } .entry-share-2026 .social-telegram:hover, .entry-share-2026 .social-telegram:focus-visible { background:#229ed9; border-color:#229ed9; } .entry-share-2026 .social-email:hover, .entry-share-2026 .social-email:focus-visible { background:#555; border-color:#555; } .entry-share-2026 .social-copy:hover, .entry-share-2026 .social-copy:focus-visible { background:var(--color-primary,#cc0000); border-color:var(--color-primary,#cc0000); } .entry-share-2026 .social-copy.copied { background:#25a244; border-color:#25a244; color:#fff; } /* Hide text labels on small screens — icons only. */ @media (max-width: 600px) { .entry-share-2026 .share-btn-label { display: none; } .entry-share-2026 .share-btn { padding: 9px; } .entry-share-2026 .entry-share-label { width: 100%; margin-bottom: 4px; } } /* ========================================================================== 5c. SOCIAL "FOLLOW" WIDGET (2026 inline-SVG icons) Replaces the old PNG sprite icons. currentColor + brand hover colours. ========================================================================== */ .social-icons-svg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .social-icons-svg ul li { margin: 0; padding: 0; } .social-icons-svg ul li:before { display: none !important; content: none !important; } .social-icons-svg ul li a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--gp-bg-alt, #f5f5f5); color: var(--gp-heading, #23292b); transition: background .2s ease, color .2s ease, transform .1s ease; } .social-icons-svg ul li a:hover, .social-icons-svg ul li a:focus-visible { color: #fff; transform: translateY(-2px); } .social-icons-svg .x a:hover, .social-icons-svg .x a:focus-visible { background:#000; } .social-icons-svg .facebook a:hover, .social-icons-svg .facebook a:focus-visible { background:#1877f2; } .social-icons-svg .instagram a:hover, .social-icons-svg .instagram a:focus-visible { background:#e4405f; } .social-icons-svg .tiktok a:hover, .social-icons-svg .tiktok a:focus-visible { background:#000; } .social-icons-svg .youtube a:hover, .social-icons-svg .youtube a:focus-visible { background:#ff0000; } .social-icons-svg .threads a:hover, .social-icons-svg .threads a:focus-visible { background:#000; } .social-icons-svg .linkedin a:hover, .social-icons-svg .linkedin a:focus-visible { background:#0a66c2; } .social-icons-svg .substack a:hover, .social-icons-svg .substack a:focus-visible { background:#ff6719; } .social-icons-svg .medium a:hover, .social-icons-svg .medium a:focus-visible { background:#000; } .social-icons-svg .bluesky a:hover, .social-icons-svg .bluesky a:focus-visible { background:#0085ff; } .social-icons-svg .mastodon a:hover, .social-icons-svg .mastodon a:focus-visible { background:#6364ff; } .social-icons-svg .pinterest a:hover, .social-icons-svg .pinterest a:focus-visible { background:#e60023; } .social-icons-svg .tumblr a:hover, .social-icons-svg .tumblr a:focus-visible { background:#36465d; } .social-icons-svg .rss a:hover, .social-icons-svg .rss a:focus-visible { background:#f26522; } html[data-theme="dark"] .social-icons-svg ul li a { background: var(--gp-bg-alt, #1d2024); color: var(--gp-text, #d6d9dc); } /* ========================================================================== 6. READING-TIME META ========================================================================== */ .entry-reading-time { color: var(--gp-text-soft); font-size: inherit; white-space: nowrap; } .entry-reading-time .genericon { font-size: 14px; vertical-align: middle; margin-right: 2px; } /* ========================================================================== 7. SKIP LINK + FOCUS (WCAG 2.2) ========================================================================== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; } .skip-link:focus { left: 6px; top: 6px; width: auto; height: auto; padding: 10px 16px; background: var(--color-primary, #cc0000); color: #fff; border-radius: 4px; text-decoration: none; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Visible, consistent focus ring for keyboard users (WCAG 2.4.11). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .theme-toggle:focus-visible, .breaking-news-toggle:focus-visible { outline: 3px solid var(--color-primary, #cc0000); outline-offset: 2px; } html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] button:focus-visible { outline-color: #ff8585; } /* ========================================================================== 8. VIEW TRANSITIONS + REDUCED MOTION ========================================================================== */ @view-transition { navigation: auto; } /* Respect the user's motion preference everywhere (WCAG 2.3.3 / 2.2.2). */ @media (prefers-reduced-motion: reduce) { .breaking-news-track { animation: none !important; /* Allow horizontal scroll so content is still reachable. */ overflow-x: auto; white-space: nowrap; } .breaking-news-label::before { animation: none !important; } .reading-progress-fill { transition: none !important; } .theme-toggle-track, .theme-toggle-track::after, .theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Smooth default cross-document fade (only when motion is allowed). */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; } }