/** * WP Smith — ux.css * Dark mode CSS vars · Back to Top · Reading Progress Bar · Global UX polish */ /* ── Dark Mode CSS Custom Properties ─────────────────────────────────────── */ /* * Toggled by adding .is-dark-mode to . * All colour tokens override the theme.json presets via custom properties. */ html.is-dark-mode { --wp--preset--color--surface: #111111; --wp--preset--color--surface-alt: #1c1c1c; --wp--preset--color--primary: #f5f5f5; --wp--preset--color--primary-light: #e0e0e0; --wp--preset--color--text-primary: #f0f0f0; --wp--preset--color--text-secondary: #a0a0a0; --wp--preset--color--text-muted: #6b6b6b; --wp--preset--color--border: #2a2a2a; --wp--preset--color--white: #ffffff; --wp--preset--color--black: #000000; /* Header */ --wpsmith-header-bg: #111111; --wpsmith-header-border: #2a2a2a; /* Invert images that should stay crisp (logos, icons) */ color-scheme: dark; } /* Dark mode body background */ html.is-dark-mode body, html.is-dark-mode .wp-site-blocks { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--text-primary); } /* Dark mode cards / surface-alt areas */ html.is-dark-mode .has-surface-alt-background-color, html.is-dark-mode .wp-smith-feature-card, html.is-dark-mode .wp-smith-lead-form-wrapper { background-color: var(--wp--preset--color--surface-alt) !important; } /* Dark mode borders */ html.is-dark-mode [style*="border"], html.is-dark-mode hr, html.is-dark-mode .wp-block-separator { border-color: var(--wp--preset--color--border) !important; } /* Dark mode images — subtle overlay to reduce harsh contrast */ html.is-dark-mode img:not([src$=".svg"]) { opacity: 0.9; } /* ── Dark Mode Toggle Button ──────────────────────────────────────────────── */ .wp-smith-dark-toggle { background: none; border: 1px solid var(--wp--preset--color--border); border-radius: 9999px; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; } .wp-smith-dark-toggle:hover { background: var(--wp--preset--color--surface-alt); } /* Icon swap: show moon in light mode, sun in dark mode */ .wp-smith-dark-toggle::before { content: "🌙"; } html.is-dark-mode .wp-smith-dark-toggle::before { content: "☀️"; } /* ── Reading Progress Bar ─────────────────────────────────────────────────── */ .wp-smith-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 9998; pointer-events: none; } .wp-smith-reading-progress::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: var(--wp--preset--color--accent); transition: width 0.1s linear; } /* ── Back to Top Button ───────────────────────────────────────────────────── */ .wp-smith-back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(12px); transition: opacity 0.25s, transform 0.25s, background 0.2s; pointer-events: none; } .wp-smith-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .wp-smith-back-to-top:hover { background: var(--wp--preset--color--accent-hover); } .wp-smith-back-to-top:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; } .wp-smith-back-to-top::before { content: "↑"; font-weight: 700; } /* ── Announcement Bar ─────────────────────────────────────────────────────── */ .wp-smith-announcement-bar { position: relative; /* contains absolute dismiss button */ } /* ── Global UX Polish ─────────────────────────────────────────────────────── */ /* Focus ring — accessible, consistent */ :focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 2px; } /* Image loading — prevent layout shift */ img { max-width: 100%; height: auto; display: block; } /* Lazy-load fade-in */ img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } img[loading="lazy"].is-loaded { opacity: 1; } /* Selection colour */ ::selection { background: var(--wp--preset--color--accent); color: #fff; } /* ── Responsive back-to-top position ─────────────────────────────────────── */ @media (max-width: 600px) { .wp-smith-back-to-top { bottom: 1rem; right: 1rem; } } /* ── Print — hide UX chrome ──────────────────────────────────────────────── */ @media print { .wp-smith-reading-progress, .wp-smith-back-to-top, .wp-smith-announcement-bar, .wp-smith-dark-toggle, .site-header { display: none !important; } }