/* Theme Name: The Mind of Machine Theme URI: https://example.com/mind-of-machine Author: Custom Build Author URI: https://example.com Description: A clean, professional blog theme for AI content, built to match "The Mind of Machine" layout. Classic PHP theme with a navy/blue palette, hero banner, category cards, article grid, and sidebar widgets. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mind-of-machine */ /* ============================================================ Design tokens (colors pulled to match the screenshot) ============================================================ */ :root { --mom-navy: #1b3a6b; /* primary headings / logo text */ --mom-blue: #2554a0; /* buttons / accents */ --mom-blue-dark: #1d3f7a; /* button hover */ --mom-gold: #b8843e; /* AI Trends category pill */ --mom-gray-pill: #6b7280; /* Machine Learning category pill */ --mom-text: #2b2f36; /* body text */ --mom-text-soft: #5b6770; /* muted text */ --mom-text-muted: #6b7280; --mom-border: #e3e6ea; --mom-bg: #EAEAEB; /* page background behind the centered column */ --mom-card: #ffffff; --mom-sidebar-box: #eef1f5; --mom-radius: 4px; --mom-maxwidth: 1080px; --mom-content-max: 1277px; /* fixed-width centered content column */ } /* ============================================================ Reset / base ============================================================ */ * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Helvetica, Arial, sans-serif; color: var(--mom-text); background: var(--mom-bg); line-height: 1.6; font-size: 15px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--mom-blue); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: "Segoe UI Semibold", "Segoe UI", Helvetica, Arial, sans-serif; color: var(--mom-navy); line-height: 1.25; margin: 0 0 0.5em; } /* The shell spans full width so it never caps page-builder (Elementor) content. The themed 1277px column is applied per-section via --mom-content-max instead (header, hero, cards, content-area, footer). The grey #EAEAEB background lives on and shows wherever a section is narrower than the viewport. */ .site-shell { max-width: 100%; margin: 0; background: transparent; box-shadow: none; } /* The themed white column background for blog/front-page content */ .site-header, .hero, .feature-cards, .content-area { background: var(--mom-card); } /* Full-width border under the header (within the shell) */ .header-wrap { border-bottom: 1px solid var(--mom-border); background: var(--mom-card); } .container { max-width: 960px; margin: 0 auto; padding: 0 24px; } /* ============================================================ Header / nav ============================================================ */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; flex-wrap: wrap; gap: 12px; max-width: var(--mom-content-max); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 42px; height: 42px; border-radius: 50%; background: var(--mom-navy); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; } .brand-text .site-title { font-size: 20px; font-weight: 700; color: var(--mom-navy); letter-spacing: 0.5px; margin: 0; } .brand-text .site-tagline { font-size: 12px; color: var(--mom-text-muted); margin: 0; } .main-nav { display: flex; align-items: center; gap: 22px; } .main-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; } .main-nav a { color: var(--mom-text); font-size: 14px; } .main-nav a:hover { color: var(--mom-blue); text-decoration: none; } .btn { display: inline-block; background: var(--mom-blue); color: #fff !important; padding: 8px 18px; border-radius: var(--mom-radius); font-size: 13px; border: none; cursor: pointer; text-decoration: none !important; transition: background 0.15s ease; } .btn:hover { background: var(--mom-blue-dark); } .btn-light { background: #fff; color: var(--mom-navy) !important; border: 1px solid #fff; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; margin: 0 auto; max-width: var(--mom-content-max); border-radius: 0; overflow: hidden; min-height: 320px; background: linear-gradient(120deg, #16263f 0%, #24507e 60%, #3a6ea5 100%); display: flex; align-items: center; } .hero-img-slot { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.55; } .hero-content { position: relative; color: #fff; padding: 48px 32px; width: 100%; } .hero-content h1 { color: #fff; font-size: 34px; margin-bottom: 14px; max-width: 60%; } .hero-content p { color: #e4ecf5; font-size: 15px; margin-bottom: 20px; max-width: 420px; } /* ============================================================ Three feature cards ============================================================ */ .feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 32px; max-width: var(--mom-content-max); margin: 0 auto; } .feature-card { border: 1px solid var(--mom-border); border-radius: 4px; overflow: hidden; background: #fff; } .feature-card .thumb { height: 130px; background: linear-gradient(135deg, #2b4a6f, #4a78a8); background-size: cover; background-position: center; } .feature-card .body { padding: 16px; } .feature-card h3 { font-size: 16px; margin-bottom: 6px; } .feature-card p { font-size: 13px; color: var(--mom-text-muted); margin: 0 0 14px; } /* ============================================================ Main content + sidebar ============================================================ */ .content-area { display: grid; grid-template-columns: 1fr 280px; gap: 32px; padding: 0 32px 32px; max-width: var(--mom-content-max); margin: 0 auto; } /* Page template: single column, no sidebar. When Elementor uses its Full Width template it controls width directly; for the theme's Default page layout we still center within the 1277px column for readability. */ .content-area--page { grid-template-columns: 1fr; padding: 32px; } .main-content--full { width: 100%; } /* When Elementor's Canvas/Full Width templates are active, Elementor loads its own page wrapper outside the theme. The body class below removes the themed column so builder content can stretch edge to edge. */ .elementor-page .content-area--page { max-width: 100%; padding: 0; } /* Full Width (No Sidebar) page template — used for the Elementor homepage. No sidebar column, no width cap, no padding: Elementor fully controls the layout, so the imported homepage flows full-width with no sidebar beside it. */ .content-area--fullwidth { display: block; /* kill the 2-column grid entirely */ grid-template-columns: none; max-width: 100%; /* no 1277px cap; let Elementor sections size themselves */ padding: 0; margin: 0; background: transparent; /* Elementor sections bring their own backgrounds */ } .content-area--fullwidth .main-content--full { width: 100%; max-width: 100%; } .section-title { font-size: 20px; border-bottom: 1px solid var(--mom-border); padding-bottom: 10px; margin-bottom: 20px; } .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .article-card .thumb { height: 110px; border-radius: 4px; background: linear-gradient(135deg, #1f3a5c, #3f6c9c); background-size: cover; background-position: center; margin-bottom: 12px; } .article-card h3 { font-size: 15px; margin-bottom: 6px; } .article-card p { font-size: 12.5px; color: var(--mom-text-muted); margin: 0 0 12px; } .btn-sm { padding: 6px 14px; font-size: 12px; } /* AdSense placeholder */ .ad-slot { margin-top: 32px; background: var(--mom-sidebar-box); border-radius: 4px; text-align: center; padding: 44px 16px; color: var(--mom-text-muted); } .ad-slot .ad-title { font-size: 17px; color: #4a4f57; margin-bottom: 4px; } .ad-slot .ad-size { font-size: 13px; } /* Categories */ .browse-categories { margin-top: 32px; } .category-pills { display: flex; gap: 14px; flex-wrap: wrap; } .pill { flex: 1; min-width: 140px; text-align: center; color: #fff !important; padding: 14px; border-radius: 4px; font-weight: 600; font-size: 14px; text-decoration: none !important; } .pill-blue { background: var(--mom-blue); } .pill-gray { background: var(--mom-gray-pill); } .pill-gold { background: var(--mom-gold); } /* ============================================================ Sidebar ============================================================ */ .widget { background: var(--mom-sidebar-box); border-radius: 4px; padding: 20px; margin-bottom: 24px; } .widget h3 { font-size: 16px; margin-bottom: 12px; } .widget p { font-size: 13px; color: var(--mom-text-soft); margin: 0; } .about-widget { display: flex; gap: 14px; align-items: flex-start; } .about-widget .avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #3f6c9c, #6c93bd); flex-shrink: 0; } .newsletter input[type="email"] { width: 100%; padding: 9px 10px; margin: 10px 0; border: 1px solid #cfd6df; border-radius: 4px; font-size: 13px; } .newsletter .btn { width: 100%; text-align: center; } .tool-list { list-style: none; margin: 0; padding: 0; } .tool-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--mom-navy); } .tool-list .tool-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--mom-blue); flex-shrink: 0; } /* ============================================================ Footer ============================================================ */ .site-footer { background: #f4f6f8; border-top: 1px solid var(--mom-border); padding: 26px; text-align: center; } .site-footer nav { display: flex; gap: 28px; justify-content: center; } .site-footer a { color: var(--mom-text); font-size: 13px; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 880px) { .feature-cards, .article-grid { grid-template-columns: 1fr; } .content-area { grid-template-columns: 1fr; } .hero-content { max-width: 100%; } .main-nav ul { flex-wrap: wrap; gap: 12px; } }