/* Theme Name: BitcoinMix Pro Theme URI: https://bitcoinmix.me/ Author: BitcoinMix Author URI: https://bitcoinmix.me/ Description: Improved, readability-first WordPress theme for BitcoinMix — a curated directory of the best Bitcoin and Ethereum mixers. Built from the original Astra layout with a cleaner typographic scale, scannable mixer cards, a sticky table of contents, color-coded pros/cons, key-spec grids, reading-progress bar and back-to-top control. Self-contained: bundles all article images and auto-creates the Bitcoin (home) and Ethereum pages on activation. Version: 1.0.0 Requires at least: 5.5 Tested up to: 6.5 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bitcoinmix-pro Tags: crypto, directory, blog, two-columns, custom-menu, featured-images, threaded-comments, translation-ready */ /* ===================================================================== BitcoinMix Pro — base reset & layout shell The bulk of the readability work lives in assets/css/improved.css ===================================================================== */ :root { --bmix-bg: #f6f8fb; --bmix-surface: #ffffff; --bmix-ink: #1f2937; --bmix-ink-strong: #0f172a; --bmix-muted: #64748b; --bmix-line: #e5e7eb; --bmix-brand: #046bd2; --bmix-brand-dark: #045cb4; --bmix-accent: #f7931a; --bmix-green: #15803d; --bmix-green-soft: #dcfce7; --bmix-red: #b91c1c; --bmix-red-soft: #fee2e2; --bmix-blue-soft: #e0efff; --bmix-radius: 14px; --bmix-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --bmix-shadow-lg: 0 10px 30px rgba(15, 23, 42, .10); --bmix-header-h: 64px; --bmix-content-width: 880px; --bmix-toc-width: 240px; /* Secondary tokens used by improved.css (kept as vars so dark mode can override them). */ --bmix-header-bg: rgba(255, 255, 255, .92); --bmix-media-bg: #f8fafc; --bmix-media-box-bg: #eef2f7; --bmix-dashed: #eef1f5; --bmix-specs-chip-bg: #e6f7ef; --bmix-label: #475569; --bmix-intro-lead: #334155; --bmix-card-hover-border: #d6dee8; } /* ===================================================================== Dark mode — same tokens, different values. Toggled via [data-theme] on , set by an inline script in header.php (before first paint) and flipped by the button in assets/js/app.js. Falls back to the system `prefers-color-scheme` the first time a visitor arrives with no saved preference yet. ===================================================================== */ :root[data-theme="dark"] { --bmix-bg: #0a0f1a; --bmix-surface: #121a2b; --bmix-ink: #cbd5e1; --bmix-ink-strong: #f1f5f9; --bmix-muted: #94a3b8; --bmix-line: #263149; --bmix-brand: #4da6ff; --bmix-brand-dark: #7cc2ff; --bmix-accent: #ffb454; --bmix-green: #4ade80; --bmix-green-soft: rgba(74, 222, 128, .14); --bmix-red: #f87171; --bmix-red-soft: rgba(248, 113, 113, .14); --bmix-blue-soft: rgba(77, 166, 255, .14); --bmix-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --bmix-shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); --bmix-header-bg: rgba(10, 15, 26, .85); --bmix-media-bg: #182338; --bmix-media-box-bg: #1a2740; --bmix-dashed: #263149; --bmix-specs-chip-bg: rgba(74, 222, 128, .12); --bmix-label: #b7c3d6; --bmix-intro-lead: #cbd5e1; --bmix-card-hover-border: #35455f; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.75; color: var(--bmix-ink); background: var(--bmix-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .2s ease, color .2s ease; } a { color: var(--bmix-brand); text-decoration: none; } a:hover { color: var(--bmix-brand-dark); text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } .bmix-skip-link { position: absolute; left: -9999px; top: 0; } .bmix-skip-link:focus { left: 12px; top: 12px; z-index: 9999; background: var(--bmix-surface); color: var(--bmix-brand); padding: 10px 16px; border-radius: 8px; box-shadow: var(--bmix-shadow-lg); } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bmix-header-bg); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--bmix-line); } .site-header__inner { max-width: 1240px; margin: 0 auto; height: var(--bmix-header-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-branding { display: flex; align-items: center; gap: 12px; min-width: 0; } .site-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; } /* WordPress renders the Customizer "Site Identity" logo (if one is set on the install already) via the_custom_logo() with its own natural pixel size — pin it down to match .site-logo regardless of the original image dimensions. */ .site-branding .custom-logo-link { display: inline-flex; flex: 0 0 auto; line-height: 0; } .site-branding .custom-logo-link img.custom-logo, .site-header img.custom-logo { width: 36px !important; height: 36px !important; max-width: 36px; max-height: 36px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; display: block; } .site-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--bmix-ink-strong); white-space: nowrap; } .site-title a { color: inherit; text-decoration: none; } .site-title .accent { color: var(--bmix-brand); } .header-actions { display: flex; align-items: center; gap: 4px; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; } .main-nav a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--bmix-ink); } .main-nav a:hover { background: var(--bmix-blue-soft); color: var(--bmix-brand-dark); text-decoration: none; } .main-nav a.is-active { background: var(--bmix-brand); color: #fff; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--bmix-ink-strong); } .nav-toggle svg { width: 24px; height: 24px; display: block; } /* ---- Dark mode toggle ---- */ .theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--bmix-line); background: var(--bmix-surface); color: var(--bmix-ink-strong); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .theme-toggle:hover { background: var(--bmix-blue-soft); border-color: var(--bmix-brand); color: var(--bmix-brand-dark); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---- Reading progress ---- */ .progress-bar { position: fixed; top: var(--bmix-header-h); left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--bmix-brand), var(--bmix-accent)); z-index: 101; transition: width .1s linear; } /* ---- Layout ---- */ .bmix-layout { max-width: 1240px; margin: 0 auto; padding: 36px 24px 64px; display: grid; grid-template-columns: var(--bmix-toc-width) minmax(0, 1fr); gap: 40px; align-items: start; } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--bmix-line); background: var(--bmix-surface); padding: 28px 24px; margin-top: 40px; } .site-footer__inner { max-width: 1240px; margin: 0 auto; text-align: center; color: var(--bmix-muted); font-size: 14px; } .site-footer a { color: var(--bmix-ink); } /* ---- Back to top ---- */ #toTop { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--bmix-brand); color: #fff; cursor: pointer; box-shadow: var(--bmix-shadow-lg); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, transform .2s; } #toTop.is-visible { display: flex; opacity: 1; } #toTop:hover { background: var(--bmix-brand-dark); transform: translateY(-2px); } #toTop svg { width: 20px; height: 20px; } @media (max-width: 1023px) { .bmix-layout { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 720px) { .site-header__inner { padding: 0 16px; } .main-nav { display: none; } .main-nav.is-open { display: block; position: absolute; top: var(--bmix-header-h); left: 0; right: 0; background: var(--bmix-surface); border-bottom: 1px solid var(--bmix-line); padding: 10px 16px; } .main-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 4px; } .main-nav.is-open a { padding: 12px 14px; } .nav-toggle { display: inline-flex; } .bmix-layout { padding: 24px 16px 48px; } } /* Printing should always look like the light theme, regardless of what the visitor had on screen — dark-mode text would be near-invisible on paper. */ @media print { :root, :root[data-theme="dark"] { --bmix-bg: #ffffff; --bmix-surface: #ffffff; --bmix-ink: #1f2937; --bmix-ink-strong: #0f172a; --bmix-muted: #64748b; --bmix-line: #e5e7eb; --bmix-media-bg: #f8fafc; --bmix-media-box-bg: #eef2f7; --bmix-dashed: #eef1f5; --bmix-label: #475569; --bmix-intro-lead: #334155; --bmix-green-soft: #dcfce7; --bmix-red-soft: #fee2e2; --bmix-blue-soft: #e0efff; } }