/* Theme Name: Putyak's Theme URI: https://example.com/putyaks Author: Putyak Author URI: https://example.com Description: A powerful, beginner-friendly block theme for building any kind of site. Ships with a dedicated Theme Options panel plus a huge library of one-click style variations: 12 color schemes, 6 typography schemes, light/dark mode and many component variants. Fully editable from the Site Editor, no page builder required. Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 7.4 Version: 2.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: putyaks Tags: full-site-editing, block-patterns, blog, portfolio, business, e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, sticky-post */ /* ===================================================================== Putyak's — front-end CSS Design tokens live in theme.json so they stay editable from the Site Editor. This file holds: dark mode, component variants and small enhancements that theme.json cannot express. ===================================================================== */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---- Accessibility: skip link ---- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999999; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); text-decoration: none; } .skip-link:focus { left: 1rem; top: 1rem; } /* ===================================================================== DARK MODE The visitor toggle (assets/js/dark-mode.js) sets data-theme on . These rules re-map the semantic color variables, so every block that references a preset color switches automatically. ===================================================================== */ html[data-theme="dark"] { --wp--preset--color--base: #0d1117; --wp--preset--color--base-2: #161b22; --wp--preset--color--contrast: #e6edf3; --wp--preset--color--contrast-2: #aeb9c4; --wp--preset--color--contrast-3: #8b97a5; --wp--preset--color--accent-3: #1f2d3d; --wp--preset--color--surface: #161b22; --wp--preset--color--surface-2: #21262d; --wp--preset--color--border: #2d333b; color-scheme: dark; } html[data-theme="dark"] body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* Smooth the switch */ body, .wp-block-group, .wp-block-button__link { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ---- Floating dark-mode toggle (enabled from Theme Options) ---- */ .putyaks-dark-toggle { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 99990; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); box-shadow: var(--wp--preset--shadow--deep); cursor: pointer; font-size: 1.25rem; line-height: 1; } .putyaks-dark-toggle:hover { border-color: var(--wp--preset--color--accent); } .putyaks-dark-toggle .putyaks-icon-sun { display: none; } .putyaks-dark-toggle .putyaks-icon-moon { display: block; } html[data-theme="dark"] .putyaks-dark-toggle .putyaks-icon-sun { display: block; } html[data-theme="dark"] .putyaks-dark-toggle .putyaks-icon-moon { display: none; } /* Sticky / transparent header polish */ .wp-block-template-part.is-position-sticky { backdrop-filter: saturate(180%) blur(8px); } /* Theme Options can disable the sticky behaviour site-wide */ body.putyaks-no-sticky .wp-block-template-part.is-position-sticky { position: static !important; } /* Component variants (the .is-style-putyaks-* rules) live in assets/css/variants.css so they can load in the editor too. */ /* Density helper classes set by Theme Options (compact / spacious) */ body.putyaks-density-compact { --wp--style--block-gap: var(--wp--preset--spacing--30); } body.putyaks-density-spacious { --wp--style--block-gap: var(--wp--preset--spacing--60); }