/* Theme Name: Galaxy Man (Fancy) Author: GalaxyMan Description: Galaxy Man knowledgebase theme (fancy UI + safe search class). Version: 1.3.2 Text Domain: galaxy-man */ /* NOTE: WordPress adds a "search" class to on search result pages. This theme deliberately uses .gm-search for the search form to avoid collisions. */ :root{ --bg0:#050712; --bg1:#070a1a; --text:#eaf0ff; --muted:#a9b4d6; --cardA: rgba(11,16,39,.90); --cardB: rgba(11,16,39,.62); --stroke: rgba(255,255,255,.10); --stroke2: rgba(255,255,255,.08); --ring1: rgba(47,137,255,.18); --ring2: rgba(79,255,178,.12); --shadow: 0 22px 60px rgba(0,0,0,.55); --blue: rgba(47,137,255,.95); --mint: rgba(79,255,178,.85); } /* ====== Reset / base ====== */ *{ box-sizing:border-box; } html, body{ margin:0; padding:0; width:100%; height:auto; } body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1000px 700px at 15% 20%, var(--ring2), transparent 55%), radial-gradient(900px 700px at 90% 25%, var(--ring1), transparent 60%), radial-gradient(1200px 900px at 50% 120%, rgba(47,137,255,.10), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); overflow-x: clip; line-height: 1.6; } img{ max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:none; } .muted{ color: var(--muted); } /* ====== Layout ====== */ .wrap{ width: min(1100px, 94vw); margin: 0 auto; } .content{ padding: 26px 0 54px; } .section{ margin-top: 18px; } /* ====== Topbar ====== */ .topbar{ position: sticky; top: 0; z-index: 999; width: 100%; background: rgba(5,7,18,.55); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); } .topbar-inner{ width: min(1100px, 94vw); margin: 0 auto; padding: 12px 0; display:flex; align-items:center; gap: 14px; justify-content: flex-start; min-width: 0; flex-wrap: nowrap; } /* Brand */ .brand{ display:flex; align-items:center; gap:10px; font-weight: 950; letter-spacing: .2px; white-space: nowrap; flex: 0 0 auto; } .brand-dot{ width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--blue), var(--mint)); box-shadow: 0 0 0 6px rgba(47,137,255,.12); flex: 0 0 auto; } /* (Header is text-only in v1.3.2, but keep these safe + scoped anyway) */ .topbar .brand-logo, .topbar .custom-logo-link{ display:flex; align-items:center; line-height: 0; } .topbar .brand-logo img, .topbar .custom-logo, .topbar .custom-logo-link img{ height: 28px !important; max-height: 28px !important; width: auto !important; max-width: 140px; display:block; } /* Nav */ .nav{ display:flex; align-items:center; min-width:0; flex: 0 0 auto; } .nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:10px; white-space: nowrap; flex-wrap: nowrap; } .nav li{ display:inline-flex; margin:0; padding:0; } .nav a{ display:inline-flex; align-items:center; padding: 8px 12px; font-size: 13px; font-weight: 850; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: rgba(233,240,255,.88); } .nav a:hover{ border-color: rgba(79,255,178,.35); box-shadow: 0 0 0 4px rgba(79,255,178,.10); } /* ====== Search (IMPORTANT: NOT ".search") ====== */ .gm-search{ margin-left: auto; display:flex; align-items:center; gap: 8px; flex: 1 1 360px; max-width: 360px; min-width: 260px; } .gm-search input[type="search"]{ width:100%; min-width:0; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--text); font-weight: 750; outline: none; } .gm-search input::placeholder{ color: rgba(169,180,214,.85); } .gm-search input:focus{ border-color: rgba(79,255,178,.45); box-shadow: 0 0 0 5px rgba(79,255,178,.12); } .gm-search .gm-icon-btn{ width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(233,240,255,.86); cursor: pointer; flex: 0 0 auto; } /* ====== Front page hero logo ====== */ .hero-logo{ display:flex; justify-content:center; margin: 0 0 14px; position: relative; z-index: 1; } .hero-logo .custom-logo-link{ display:block; } .hero-logo img{ width: min(520px, 78vw) !important; height: auto !important; max-height: none !important; max-width: 520px !important; filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); } @media (max-width: 820px){ .hero-logo img{ width: min(420px, 86vw) !important; } } /* ====== Panels / cards ====== */ .panel{ border-radius: 24px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); padding: 18px 18px 16px; } .card{ border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, var(--cardA), var(--cardB)); border-radius: 24px; padding: 26px 22px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .card:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(600px 220px at 50% 0%, rgba(47,137,255,.18), transparent 55%); pointer-events:none; } .title{ margin:10px 0 6px; text-align:center; font-size: clamp(26px, 2.7vw, 42px); font-weight: 950; } .subtitle{ margin: 0 auto 18px; text-align:center; max-width: 62ch; color: var(--muted); line-height: 1.6; font-size: 15px; } .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding: 6px 0 10px; } .btn{ display:inline-block; padding: 12px 16px; border-radius: 999px; font-weight: 900; font-size: 14px; border: 1px solid rgba(255,255,255,.12); } .btn.primary{ background: linear-gradient(90deg, var(--blue), var(--mint)); color:#051022; border-color: transparent; box-shadow: 0 18px 40px rgba(47,137,255,.20); } .btn.ghost{ background: rgba(255,255,255,.05); color: var(--text); } /* Category grid */ .grid{ display:grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 14px; } .cat{ display:block; border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); padding: 14px 14px 12px; } .cat:hover{ border-color: rgba(47,137,255,.35); box-shadow: 0 0 0 5px rgba(47,137,255,.10); } .cat h3{ margin: 0 0 6px; font-size: 15px; font-weight: 950; } .cat p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; } /* Post content */ .entry-title{ margin: 0 0 10px; font-weight: 950; } .entry-meta{ color: var(--muted); font-size: 13px; margin: 0 0 14px; } .entry-content{ line-height: 1.75; } /* Pagination */ .navigation.pagination{ margin-top: 18px; } .nav-links{ display:flex; gap:10px; flex-wrap:wrap; } .page-numbers{ padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } .page-numbers.current{ background: rgba(47,137,255,.25); border-color: rgba(47,137,255,.35); } /* Footer */ .footer{ border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0 28px; color: rgba(233,240,255,.72); font-size: 12px; } /* Mobile */ @media (max-width: 820px){ .nav{ display:none; } .gm-search{ flex: 1 1 auto; max-width: none; min-width: 0; } } /* Stop background tiling on short pages */ html, body { min-height: 100%; } body { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }