/***** Theme Name: RetroMag — StefanDrusca Edition Theme URI: https://stefandrusca.site/ Description: Customized RetroMag child theme with a retro‑futuristic design, neon accents and accessibility/performance improvements. Modified and maintained by Stefan Drusca. Author: Stefan Drusca Author URI: https://stefandrusca.site/ Template: mh-magazine-lite Version: 1.0.1-stefan Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-header, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, rtl-language-support, blog, entertainment, news Text Domain: mh-retromag Domain Path: /languages/ License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html *****/ /***** Structure *****/ .mh-container-outer { box-shadow: none; } /* CSS Variables: default + neon + dark presets - Use the --* variables throughout the theme by updating selectors below. - You can switch palette by adding `class="theme-neon"` on or using [data-theme="dark"]. */ :root { /* core */ --color-primary: #ffc001; /* warm yellow */ --color-accent: #ffb84d; /* accent for gradients */ --color-text: #3a3a3a; --color-bg: #ffffff; --color-muted: #666666; --color-white: #ffffff; --color-black: #111111; /* UI */ --btn-bg: var(--color-primary); --btn-color: var(--color-black); --widget-bg: var(--color-primary); } /* Neon / sci-fi preset */ .theme-neon, body.theme-neon, [data-theme="neon"] { --color-primary: #7df9ff; /* cyan neon */ --color-accent: #ff4dff; /* magenta accent */ --color-text: #e6f7ff; --color-bg: #081122; /* deep navy */ --color-muted: #9fb3c8; --color-white: #ffffff; --color-black: #081122; --btn-bg: linear-gradient(135deg,#7df9ff,#ff4dff); --btn-color: #07121a; --widget-bg: rgba(255,77,255,0.12); } /* Dark theme preset */ [data-theme="dark"], body[data-theme="dark"] { --color-primary: #ffc001; --color-accent: #ffb84d; --color-text: #e6e6e6; --color-bg: #0f0f12; --color-muted: #9a9a9a; --color-white: #ffffff; --color-black: #0f0f12; --btn-bg: #ffc001; --btn-color: #0f0f12; --widget-bg: rgba(255,192,1,0.08); } /***** Typography *****/ body { font-family: 'Lora', serif; color: #3a3a3a; } h1, h2, h3, h4, h5, h6, .mh-custom-posts-small-title { font-family: 'Raleway', sans-serif; color: #3a3a3a; } pre, code, kbd { color: #3a3a3a; } blockquote { color: #3a3a3a; border-color: #ffc001; } a { color: #3a3a3a; } a:hover { color: #ffc001; } /***** Header *****/ .mh-header { background: none; } .mh-header-tagline { color: #ffc001; } /***** Navigation *****/ .mh-main-nav { border: none; } .mh-main-nav li:hover { background: #ffc001; } .mh-main-nav .menu > .current-menu-item { background: none; } .mh-main-nav .menu > .current-menu-item:hover { background: #ffc001; } /***** SlickNav Custom Style *****/ .slicknav_btn { background: #ffc001; } .slicknav_menu { background: #ffc001; } .slicknav_nav ul { border-color: #ffc001; } .slicknav_nav .slicknav_item:hover, .slicknav_nav a:hover { background: #ffc001; } .mh-main-nav-wrap .slicknav_btn, .mh-main-nav-wrap .slicknav_menu, .mh-main-nav-wrap .slicknav_nav .slicknav_item:hover, .mh-main-nav-wrap .slicknav_nav a:hover { background: transparent; } .mh-main-nav-wrap .slicknav_nav ul { border-color: #ffc001; } .mh-main-nav-wrap .slicknav_nav ul ul { border: none; } /***** Posts/Pages *****/ .page-title { color: #3a3a3a; } .entry-content a, .entry-content a:hover, .mh-meta a:hover { color: #ffc001; } .entry-tags li:hover, .entry-tags .fa { background: #ffc001; } /***** Loop / Archives / Search Results *****/ .mh-loop-item { margin-top: 20px; margin-top: 1.25rem; } /***** Pagination *****/ .page-numbers, a .pagelink { color: #3a3a3a; } .page-numbers:hover, .mh-loop-pagination .current, .mh-comments-pagination .current, a:hover .pagelink, .pagelink { background: #ffc001; } /***** Footer *****/ .mh-copyright-wrap { border-color: rgba(255, 255, 255, 0.3); } .mh-copyright-wrap a { color: #fff; } /***** Images / Video *****/ .wp-caption-text { color: #3a3a3a; } /***** Gallery *****/ .gallery-caption { color: #fff; } /***** Comments *****/ .mh-comment-meta, .mh-comment-meta a { color: #3a3a3a; } .bypostauthor .mh-comment-meta-author:after, .mh-comment-meta-links .comment-reply-link:before, #respond #cancel-comment-reply-link:before { color: #ffc001; } /***** Forms *****/ input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=url]:hover, textarea:hover { border-color: #ffc001; } input[type=submit] { background: #ffc001; } input[type=submit]:hover { background: #ffc001; } /***** Widgets *****/ .mh-widget-title { font-size: 14px; font-size: 0.875rem; font-weight: 600; color: #fff; padding: 2px 0; background: #ffc001; border: none; } .mh-widget-title a { color: #fff; } .mh-widget-title-inner { display: block; text-align: center; padding: 5px 0; border-top: 2px dashed rgba(255, 255, 255, 0.3); border-bottom: 2px dashed rgba(255, 255, 255, 0.3); } /***** MH Slider Widget *****/ .mh-slider-widget img { width: 100%; display: block; } .mh-slider-widget .flex-control-paging li a.flex-active { background: #ffc001; } .mh-slider-caption { border-color: #ffc001; } .mh-widget-col-1 .mh-slider-caption { background: #ffc001; } .mh-footer-widget .mh-slider-caption { background: rgba(255, 255, 255, 0.1); } /***** MH Posts Large Widget *****/ .mh-posts-large-meta { margin-top: 5px; } /***** MH Posts Stacked Widget *****/ .mh-posts-stacked-meta { background: #ffc001; } #mh-mobile .mh-footer-widget .mh-posts-stacked-overlay { border-color: #ffc001; } /***** MH Tabbed Widget *****/ .mh-tabbed-widget, .mh-tabbed-widget a { color: #3a3a3a; } .mh-tabbed-widget a:hover { color: #ffc001; } .mh-tabbed-widget .tagcloud a { color: #fff; } .mh-tab-buttons { border-bottom: 3px solid #ffc001; } .mh-tab-button.active, .mh-tab-button.active:hover { color: #fff; background: #ffc001; } .mh-tab-comment-excerpt { background: rgba(255, 255, 255, 0.6); } .mh-footer-widget .mh-tabbed-widget, .mh-footer-widget .mh-tabbed-widget a { color: #fff; } .mh-footer-widget .mh-tab-button.active { background: #ffc001; } .mh-footer-widget .mh-tab-comment-excerpt { background: #ffc001; } /***** WP Tag Cloud Widget *****/ .tagcloud a:hover, .mh-widget .tagcloud a:hover, .mh-footer-widget .tagcloud a:hover { background: #ffc001; } /***** Media Queries *****/ @media only screen and (max-width: 420px) { .mh-copyright-wrap { padding: 15px 20px; } } /***** Pro buttons *****/ .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; text-decoration: none; transition: all .18s ease; border: 2px solid transparent; cursor: pointer; } .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,192,1,0.12); } .btn-primary { background: #ffc001; color: #111; border-color: #ffc001; box-shadow: 0 6px 18px rgba(255,192,1,0.18); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,192,1,0.22); } .btn-ghost { background: transparent; color: #ffc001; border-color: #ffc001; } .btn-ghost:hover { background: rgba(255,192,1,0.08); } /***** Custom footer *****/ .mh-custom-footer { background: #111; color: #fff; padding: 18px 0; margin-top: 30px; } .mh-custom-footer .mh-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .mh-custom-footer-text { margin: 0; font-size: 14px; text-align: center; } .mh-custom-footer-text a { color: #ffc001; text-decoration: none; font-weight: 700; } .mh-custom-footer-text a:hover { text-decoration: underline; } /*** Responsive & visual polish ***/ /* container */ .mh-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* hero area for homepage (flexible) */ .mh-hero { display: block; background: linear-gradient(180deg, rgba(17,17,17,0.02), rgba(255,255,255,0)); padding: 40px 0; margin-bottom: 30px; } .mh-hero .mh-container { display:flex; align-items:center; gap: 30px; } .mh-hero-title { font-size: 2.25rem; line-height: 1.05; margin: 0 0 10px 0; font-family: 'Raleway', sans-serif; } .mh-hero-lead { color: #666; font-size: 1.05rem; } /* improved typography scaling */ @media (min-width: 1024px) { body { font-size: 18px; } .mh-hero-title { font-size: 3rem; } } /* header tweaks */ .mh-header { padding: 18px 0; } .mh-header .mh-container { display:flex; align-items:center; justify-content:space-between; } .mh-site-title { font-weight:700; letter-spacing:0.5px; } /* navigation improvements */ .mh-main-nav .menu > li > a { padding: 10px 14px; border-radius: 6px; transition: background .18s, color .18s; } .mh-main-nav .menu > li > a:hover { color: #111; } /* mobile responsive adjustments */ @media only screen and (max-width: 768px) { .mh-hero .mh-container { flex-direction: column; text-align: center; } .mh-hero-title { font-size: 1.6rem; } .btn { width: 100%; display: inline-block; text-align: center; padding: 0.66rem 1rem; } .mh-header .mh-container { padding: 0 10px; } } /* small ripple element for JS */ .mr-ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: mr-ripple .6s ease-out; background: rgba(17,17,17,0.08); pointer-events: none; } @keyframes mr-ripple { to { transform: scale(4); opacity: 0; } } /* ensure .btn has relative positioning for ripple */ .btn { position: relative; overflow: hidden; } /* adapt footer on mobile */ @media only screen and (max-width: 420px) { .mh-custom-footer-text { font-size: 13px; } } /* Optional: body state when mobile nav open (tied to JS toggle) */ .mh-mobile-nav-open .mh-main-nav { background: rgba(0,0,0,0.02); } /* Map existing selectors to use CSS variables for easy theming */ body { background: var(--color-bg); color: var(--color-text); } h1, h2, h3, h4, h5, h6, .mh-custom-posts-small-title { color: var(--color-text); } pre, code, kbd { color: var(--color-text); } blockquote { color: var(--color-text); border-color: var(--color-accent); } a { color: var(--color-text); } a:hover { color: var(--color-accent); } .mh-header-tagline { color: var(--color-accent); } .mh-main-nav li:hover { background: var(--color-accent); } .mh-main-nav .menu > .current-menu-item:hover { background: var(--color-accent); } .slicknav_btn { background: var(--color-accent); } .slicknav_menu { background: var(--color-accent); } .slicknav_nav ul { border-color: var(--color-accent); } .mh-widget-title { background: var(--widget-bg); } .mh-widget-title a { color: var(--color-white); } .mh-footer-widget .mh-tab-button.active { background: var(--color-accent); } .mh-tab-buttons { border-bottom: 3px solid var(--color-accent); } .entry-content a, .entry-content a:hover, .mh-meta a:hover { color: var(--color-accent); } .entry-tags li:hover, .entry-tags .fa { background: var(--color-accent); } .page-numbers:hover, .mh-loop-pagination .current, .mh-comments-pagination .current, a:hover .pagelink, .pagelink { background: var(--color-accent); } .mh-comment-meta, .mh-comment-meta a { color: var(--color-text); } .bypostauthor .mh-comment-meta-author:after, .mh-comment-meta-links .comment-reply-link:before, #respond #cancel-comment-reply-link:before { color: var(--color-accent); } .wp-caption-text { color: var(--color-text); } .gallery-caption { color: var(--color-white); } .mh-copyright-wrap { border-color: rgba(255, 255, 255, 0.12); } .mh-copyright-wrap a { color: var(--color-white); } /* Button size variants & icon support */ .btn.btn-lg { padding: 0.85rem 1.25rem; font-size: 1.05rem; border-radius: 8px; } .btn.btn-sm { padding: 0.36rem 0.65rem; font-size: 0.875rem; border-radius: 6px; } .btn.btn-gradient { background: linear-gradient(135deg,#ffb84d,#ffc001); color: #111; box-shadow: 0 10px 30px rgba(255,192,1,0.2); } .btn .fa, .btn .fas, .btn .fab { margin-right: 8px; } /* Helper: centered call-to-action area */ .mh-hero-ctas { margin-top: 18px; display:flex; gap: 12px; align-items:center; } /* Hero media: responsive ordering */ .mh-hero-media { flex: 1 1 40%; } .mh-hero-copy { flex: 1 1 60%; } @media only screen and (max-width: 768px) { .mh-hero-media { order: 2; } .mh-hero-copy { order: 1; } .mh-hero-ctas { flex-direction: column; gap: 10px; } } /* Neon / Glass button variants */ .btn-glass { background: rgba(255,255,255,0.06); color: var(--btn-color); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(0,0,0,0.25); } .btn-neon { background: transparent; color: var(--btn-color); border: 2px solid rgba(127,255,255,0.65); box-shadow: 0 0 18px rgba(127,255,255,0.08), 0 8px 30px rgba(0,0,0,0.25); position: relative; } .btn-neon:hover { box-shadow: 0 0 32px rgba(127,255,255,0.22), 0 12px 40px rgba(0,0,0,0.30); transform: translateY(-3px); } /* Hero animated gradient */ .mh-hero--animated { position: relative; overflow: hidden; } .mh-hero--animated:before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); background-size: 400% 400%; animation: mh-hero-gradient 12s ease-in-out infinite; mix-blend-mode: overlay; } @keyframes mh-hero-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Ensure hero contents are above the animated background */ .mh-hero .mh-container { position: relative; z-index: 2; } /* Dark mode toggle button styles */ .mh-dark-toggle { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; z-index: 9999; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06)); display: inline-block; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform .18s ease, box-shadow .18s ease; } .mh-dark-toggle:hover { transform: translateY(-3px); } .mh-dark-toggle:after { content: '\2600'; display:block; text-align:center; line-height:44px; font-size:18px; color: var(--color-accent); } body[data-theme="dark"] .mh-dark-toggle:after { content: '\263E'; color: var(--color-accent); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .mh-hero--animated:before { animation: none; } .btn, .btn-neon, .btn-glass { transition: none; } } /* Badges / stickers */ .post-badge { display: inline-block; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); color: #081122; padding: 6px 10px; border-radius: 20px; font-weight:700; font-size:0.8rem; letter-spacing:0.6px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } .mh-hero-badge { margin-bottom: 10px; } /* SVG accent positioning */ .mh-svg-accent { position: absolute; right: 12px; bottom: 12px; width: 120px; height: 120px; pointer-events: none; opacity: 0.9; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18)); } .mh-hero--animated .mh-svg-accent { transform: translateZ(0); } /* Ensure hero has relative positioning for accents */ .mh-hero { position: relative; }