/* Theme Name: Editorial Mono Theme URI: https://example.com/editorial-mono Author: Your Name Author URI: https://example.com Description: A minimalist, editorial-style blog theme in black and white. Extremely lightweight, fully customizable from the WordPress Customizer, no page builder required. Built for speed, readability, and clean typography-driven design. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: editorial-mono Tags: blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar, left-sidebar, block-patterns, full-site-editing */ /* ========================================================================== 1. CSS CUSTOM PROPERTIES (overridden dynamically by Customizer output) ========================================================================== */ :root { --em-color-bg: #ffffff; --em-color-text: #111111; --em-color-link: #000000; --em-color-border: #e0e0e0; --em-color-muted: #6b6b6b; --em-color-invert-bg: #111111; --em-color-invert-text: #ffffff; --em-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --em-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --em-font-size-body: 18px; --em-font-size-h1: 2.6rem; --em-font-size-h2: 2rem; --em-font-size-h3: 1.5rem; --em-line-height: 1.7; --em-container-width: 760px; --em-container-width-wide: 1100px; --em-space-unit: 1.5rem; --em-space-section: 4rem; --em-radius: 0px; --em-transition: 150ms ease; } /* Spacing density modifiers (compact / relaxed), set as body classes */ body.em-spacing-compact { --em-space-unit: 1rem; --em-space-section: 2.5rem; } body.em-spacing-relaxed { --em-space-unit: 2rem; --em-space-section: 5.5rem; } /* Dark mode (user-toggled at runtime, class added to ) */ html.em-dark { --em-color-bg: var(--em-color-invert-bg); --em-color-text: var(--em-color-invert-text); --em-color-link: #ffffff; --em-color-border: #333333; --em-color-muted: #a3a3a3; } /* ========================================================================== 2. RESET / BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ background:var(--em-color-bg); color:var(--em-color-text); font-family:var(--em-font-body); font-size:var(--em-font-size-body); line-height:var(--em-line-height); margin:0; transition:background var(--em-transition), color var(--em-transition); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block;} a{color:var(--em-color-link);text-decoration:underline;text-underline-offset:3px;} a:hover{text-decoration:none;} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--em-color-text); outline-offset:2px; } ul,ol{padding-left:1.4em;} h1,h2,h3,h4,h5,h6{ font-family:var(--em-font-heading); font-weight:700; line-height:1.25; margin:1.4em 0 .6em; } h1{font-size:var(--em-font-size-h1);} h2{font-size:var(--em-font-size-h2);} h3{font-size:var(--em-font-size-h3);} p{margin:0 0 1.2em;} hr{border:none;border-top:1px solid var(--em-color-border);margin:var(--em-space-unit) 0;} blockquote{ margin:1.5em 0; padding-left:1.2em; border-left:3px solid var(--em-color-text); color:var(--em-color-muted); font-style:italic; } code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;} pre{overflow-x:auto;padding:1em;border:1px solid var(--em-color-border);} table{border-collapse:collapse;width:100%;margin:1.5em 0;} th,td{border:1px solid var(--em-color-border);padding:.6em .8em;text-align:left;} .screen-reader-text{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:.8em 1.2em;z-index:10000; } .skip-link:focus{left:1em;top:1em;} /* ========================================================================== 3. LAYOUT / CONTAINER ========================================================================== */ .em-container{ max-width:var(--em-container-width); margin:0 auto; padding:0 1.25rem; } body.em-layout-wide .em-container{max-width:var(--em-container-width-wide);} .em-site{display:flex;flex-direction:column;min-height:100vh;} .em-main-wrap{ max-width:var(--em-container-width-wide); margin:0 auto; padding:0 1.25rem; display:grid; grid-template-columns:1fr; gap:var(--em-space-section); flex:1; } body.em-has-sidebar .em-main-wrap{grid-template-columns:2.4fr 1fr;align-items:start;} body.em-sidebar-left .em-main-wrap{grid-template-columns:1fr 2.4fr;} body.em-sidebar-left .em-content-area{order:2;} body.em-sidebar-left .em-sidebar{order:1;} /* ========================================================================== 4. HEADER ========================================================================== */ .em-header{ border-bottom:1px solid var(--em-color-border); padding:1.4rem 0; } .em-header.em-sticky{position:sticky;top:0;background:var(--em-color-bg);z-index:999;} .em-header-inner{ display:flex;align-items:center;justify-content:flex-start;gap:2.5rem; } .em-branding{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin-right:auto;} .em-branding .custom-logo-link{margin:0;} .em-site-title{font-size:1.4rem;font-weight:800;margin:0;letter-spacing:-.02em;} .em-site-title a{text-decoration:none;color:var(--em-color-text);} .em-site-tagline{margin:.2em 0 0;font-size:.85rem;color:var(--em-color-muted);} .custom-logo{max-height:44px;width:auto;} .em-primary-nav ul{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0;} .em-primary-nav a{text-decoration:none;font-size:.95rem;font-weight:600;} .em-primary-nav a:hover{text-decoration:underline;} .em-primary-nav ul ul{ position:absolute;flex-direction:column;background:var(--em-color-bg); border:1px solid var(--em-color-border);padding:.6rem;gap:.6rem;display:none; } .em-primary-nav li{position:relative;} .em-primary-nav li:hover > ul,.em-primary-nav li:focus-within > ul{display:flex;} .em-header-actions{display:flex;align-items:center;gap:1rem;} .em-icon-btn{ background:none;border:none;cursor:pointer;color:var(--em-color-text); display:inline-flex;align-items:center;justify-content:center;padding:.4rem; } .em-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;} .em-search-expand{position:relative;} .em-search-form-wrap{ position:absolute;right:0;top:120%;width:260px;display:none; background:var(--em-color-bg);border:1px solid var(--em-color-border);padding:.6rem; } .em-search-expand.is-open .em-search-form-wrap{display:block;} .em-search-form-wrap input[type="search"]{ width:100%;padding:.5em;border:1px solid var(--em-color-border);background:transparent;color:var(--em-color-text); } .em-mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;} .em-mobile-toggle svg{width:24px;height:24px;} .em-mobile-nav{display:none;} /* ========================================================================== 5. POST LISTS (list / grid / card views) ========================================================================== */ .em-post-list{display:grid;grid-template-columns:1fr;gap:var(--em-space-section);margin:var(--em-space-section) 0;} .em-post-list.em-view-grid, .em-post-list.em-view-card{gap:var(--em-space-unit);} .em-post-list.em-cols-2{grid-template-columns:repeat(2,1fr);} .em-post-list.em-cols-3{grid-template-columns:repeat(3,1fr);} .em-entry{} .em-view-card .em-entry{border:1px solid var(--em-color-border);padding:1.25rem;} .em-entry-thumb{margin-bottom:1rem;overflow:hidden;background:var(--em-color-border);} .em-entry-thumb img{width:100%;height:auto;transition:transform .3s ease;} .em-entry-title{margin:0 0 .4em;font-size:1.4rem;} .em-entry-title a{text-decoration:none;} .em-entry-title a:hover{text-decoration:underline;} .em-entry-meta{font-size:.82rem;color:var(--em-color-muted);margin-bottom:.6em;} .em-entry-meta span:not(:last-child)::after{content:"·";margin:0 .5em;} .em-entry-excerpt{color:var(--em-color-text);} .em-read-more{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;} /* ========================================================================== 6. SINGLE POST ========================================================================== */ .em-single-title{font-size:2.4rem;margin-bottom:.3em;} .em-single-meta{color:var(--em-color-muted);font-size:.9rem;margin-bottom:2em;} .em-single-meta span:not(:last-child)::after{content:"·";margin:0 .5em;} .em-single-thumb{margin:0 0 2em;} .em-entry-content{font-size:1rem;} .em-entry-content > * + *{margin-top:1.2em;} .em-author-box{ display:flex;gap:1.2rem;border-top:1px solid var(--em-color-border); border-bottom:1px solid var(--em-color-border);padding:1.8rem 0;margin:2.5rem 0; } .em-author-box img{border-radius:50%;flex-shrink:0;} .em-author-box h3{margin:0 0 .3em;font-size:1rem;} .em-related-posts{margin:3rem 0;} .em-related-posts h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1em;} .em-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} .em-post-nav{ display:flex;justify-content:space-between;gap:1rem; border-top:1px solid var(--em-color-border);padding-top:1.5rem;margin:2.5rem 0; } .em-post-nav > div{max-width:48%;} .em-post-nav .label{display:block;font-size:.75rem;color:var(--em-color-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3em;} .em-post-nav a{text-decoration:none;font-weight:600;} .em-post-nav .em-next{margin-left:auto;text-align:right;} /* ========================================================================== 7. BREADCRUMBS ========================================================================== */ .em-breadcrumbs{font-size:.82rem;color:var(--em-color-muted);margin:1.4rem 0;} .em-breadcrumbs a{color:var(--em-color-muted);} /* ========================================================================== 8. SIDEBAR / WIDGETS ========================================================================== */ .em-sidebar .widget{margin-bottom:2.5rem;} .em-sidebar .widget-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.9em;} /* ========================================================================== 9. PAGINATION ========================================================================== */ .em-pagination{display:flex;gap:.6rem;justify-content:center;margin:3rem 0;flex-wrap:wrap;} .em-pagination a,.em-pagination span{ display:inline-flex;align-items:center;justify-content:center; min-width:2.2rem;height:2.2rem;border:1px solid var(--em-color-border); text-decoration:none;font-size:.85rem; } .em-pagination .current{background:var(--em-color-text);color:var(--em-color-bg);border-color:var(--em-color-text);} /* ========================================================================== 10. COMMENTS ========================================================================== */ .em-comments{margin:3rem 0;} .em-comments-title{font-size:1.2rem;margin-bottom:1.2em;} .comment-list{list-style:none;margin:0;padding:0;} .comment-list .children{list-style:none;padding-left:2rem;margin:0;} .comment-body{border-top:1px solid var(--em-color-border);padding:1.4rem 0;} .comment-author{display:flex;align-items:center;gap:.7rem;margin-bottom:.4em;} .comment-author img{border-radius:50%;} .comment-author .fn{font-weight:700;font-style:normal;} .comment-metadata{font-size:.78rem;color:var(--em-color-muted);} .comment-metadata a{color:var(--em-color-muted);} .comment-reply-link{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;} .comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{ width:100%;padding:.7em;border:1px solid var(--em-color-border);background:transparent;color:var(--em-color-text); font-family:inherit;font-size:1rem;margin-bottom:1em; } .comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:.5em;} .em-btn,input#submit,button[type="submit"]{ display:inline-block;background:var(--em-color-text);color:var(--em-color-bg); border:1px solid var(--em-color-text);padding:.7em 1.6em;font-weight:700;cursor:pointer; font-size:.9rem;text-decoration:none;font-family:inherit; } .em-btn:hover,input#submit:hover,button[type="submit"]:hover{opacity:.8;} /* ========================================================================== 11. FOOTER ========================================================================== */ .em-footer{border-top:1px solid var(--em-color-border);padding:var(--em-space-section) 0 2rem;margin-top:var(--em-space-section);} .em-footer-top{ display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem; padding-bottom:2.5rem;border-bottom:1px solid var(--em-color-border);margin-bottom:1.8rem; } .em-footer-brand .em-footer-logo .custom-logo{max-height:36px;} .em-footer-site-title{font-size:1.15rem;font-weight:800;margin:0 0 .4em;letter-spacing:-.02em;} .em-footer-tagline{font-size:.88rem;color:var(--em-color-muted);margin:0;max-width:32ch;} .em-footer-widgets .widget, .em-footer-nav-col{margin-bottom:0;} .em-footer-widgets .widget-title, .em-footer-nav-col .widget-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1em;color:var(--em-color-muted);} .em-footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em;} .em-footer-nav a{font-size:.92rem;text-decoration:none;} .em-footer-nav a:hover{text-decoration:underline;} .em-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;} .em-footer-text{font-size:.85rem;color:var(--em-color-muted);margin:0;} .em-social-links{display:flex;gap:.9rem;list-style:none;margin:0;padding:0;} .em-social-links a{color:var(--em-color-text);display:inline-flex;} .em-social-links svg{width:18px;height:18px;} @media (max-width:700px){ .em-footer-top{grid-template-columns:1fr;gap:2rem;} } /* ========================================================================== 12. BACK TO TOP ========================================================================== */ .em-back-to-top{ position:fixed;bottom:1.5rem;right:1.5rem;width:2.6rem;height:2.6rem; border:1px solid var(--em-color-border);background:var(--em-color-bg);color:var(--em-color-text); display:none;align-items:center;justify-content:center;cursor:pointer;z-index:500; } .em-back-to-top.is-visible{display:flex;} /* ========================================================================== 13. 404 / SEARCH ========================================================================== */ .em-404{text-align:center;padding:4rem 0;} .em-404 form{max-width:400px;margin:2rem auto 0;} .em-no-results{padding:2rem 0;} /* ========================================================================== 14. RESPONSIVE ========================================================================== */ @media (max-width:900px){ body.em-has-sidebar .em-main-wrap{grid-template-columns:1fr;} .em-sidebar{order:3;} .em-related-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:700px){ .em-primary-nav{display:none;} .em-mobile-toggle{display:inline-flex;align-items:center;justify-content:center;} .em-mobile-nav.is-open{ display:block;position:fixed;inset:0;background:var(--em-color-bg);z-index:1000; padding:2rem 1.5rem;overflow-y:auto; } .em-mobile-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.4rem;} .em-mobile-nav a{font-size:1.2rem;text-decoration:none;font-weight:700;} .em-mobile-nav-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;} .em-post-list.em-cols-2,.em-post-list.em-cols-3{grid-template-columns:1fr;} .em-related-grid{grid-template-columns:1fr;} .em-single-title{font-size:1.8rem;} :root{--em-space-section:2.5rem;} } /* Touch target sizing */ button,a.em-btn,.em-icon-btn,.em-pagination a{min-height:44px;} @media (max-width:700px){ .em-pagination a,.em-pagination span{min-height:2.6rem;} } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} } /* RTL adjustments (loaded separately as rtl.css by WP automatically, kept here as fallback hooks) */ [dir="rtl"] blockquote{border-left:none;border-right:3px solid var(--em-color-text);padding-left:0;padding-right:1.2em;} [dir="rtl"] .em-post-nav .em-next{margin-left:0;margin-right:auto;text-align:left;}