/* Theme Name: MissionOS Manuals Theme URI: https://example.com/missionos-manuals Author: Maxwell GeoSystems Author URI: https://example.com Description: WordPress theme for the MissionOS Web User Manuals, converted from a static HTML template. Includes a dynamic header, dynamic footer, and a "Manuals Home" page template. Version: 1.0.1 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: missionos-manuals */ /* ========================================================================== Base ========================================================================== */ /* Shared font stack — used everywhere in place of the old Outfit/DM Sans pairing. Kept as one variable so future changes only happen here. */ div#tagDropdown { display: none!important; } :root { --missionos-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html { scroll-behavior: smooth; } body { font-family: var(--missionos-font-family); } button#aiBubbleBtn { display: none!important; } .font-heading { font-family: var(--missionos-font-family); } /* ========================================================================== Scrollbar ========================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } .dark ::-webkit-scrollbar-track { background: #1e293b; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } .dark ::-webkit-scrollbar-thumb { background: #334155; } ::-webkit-scrollbar-thumb:hover { background: #fd5902; } /* ========================================================================== Gradients / brand accents ========================================================================== */ .text-gradient { background-image: linear-gradient(135deg, #fd5902 0%, #ff8a3d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dark .text-gradient { background-image: linear-gradient(135deg, #ff8a3d 0%, #ffb26b 100%); } .bg-accent-gradient { background-image: linear-gradient(135deg, #fd5902 0%, #ff8a3d 100%); } .dark .bg-accent-gradient { background-image: linear-gradient(135deg, #ff8a3d 0%, #ffb26b 100%); } .hero-mesh::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse at 20% 50%, rgba(253,89,2,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(255,138,61,0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(253,89,2,0.05) 0%, transparent 40%); pointer-events: none; } /* ========================================================================== Homepage hero background — was a hardcoded inline `style="background:…"` on the
in page-templates/template-manuals-home.php, which is why it always looked light-mode even with .dark on : an inline style's specificity beats any CSS class, dark-mode or not, no matter what. Moved here as a real class with its own .dark variant so the toggle actually reaches it. Light values are the exact original gradient; dark values are the same shape (two radial glows + a diagonal base) recolored to sit on this theme's dark surfaces (#0b1124 / #0f172a), with the radial glows now a soft accent-orange instead of pale blue/cream. ========================================================================== */ .hero-home-bg { background: radial-gradient( ellipse 70% 100% at 78% 48%, rgba(226,239,255,0.72) 0%, rgba(238,245,255,0.45) 25%, rgba(255,250,247,0) 58% ), radial-gradient( ellipse 55% 85% at 10% 50%, rgba(255,247,240,0.95) 0%, rgba(255,250,247,0.75) 48%, rgba(255,250,247,0) 100% ), linear-gradient( 135deg, #fffaf7 0%, #fffaf7 42%, #f8f9fb 68%, #eef5ff 100% ); } .dark .hero-home-bg { background: radial-gradient( ellipse 70% 100% at 78% 48%, rgba(255,138,61,0.10) 0%, rgba(255,138,61,0.05) 25%, rgba(11,17,36,0) 58% ), radial-gradient( ellipse 55% 85% at 10% 50%, rgba(253,89,2,0.08) 0%, rgba(11,17,36,0.4) 48%, rgba(11,17,36,0) 100% ), linear-gradient( 135deg, #0b1124 0%, #0b1124 42%, #0f172a 68%, #111c33 100% ); } /* ========================================================================== Header brand logos (Manuals + Maxwell) — SVGs from the Media Library, replacing the old letter-badge branding. Sized/aligned to sit cleanly inline with the rest of the header at every breakpoint. ========================================================================== */ .site-logo-svg { height: 34px; width: auto; max-width: 160px; display: block; } @media (max-width: 640px) { .site-logo-svg { height: 28px; max-width: 120px; } } .partner-logo-svg { height: 29px; width: auto; max-width: 130px; display: block; } /* ========================================================================== Product card — brand color + hover gradient (normal state: solid #fd5902 accent · hover state: orange gradient) The bar itself sits inside a small overflow:hidden "clip" wrapper (rounded to match the card's own top corners) rather than being clipped by the card as a whole — the card can't have overflow:hidden itself, since its Version dropdown menu (.dropdown__menu) needs to pop open outside the card's bounds. Without that dedicated wrapper, the bar's own border-radius doesn't perfectly nest inside the card's slightly-larger rounded corner (it's inset by the card's 1px border), so a sliver of its straight edge pokes out past the curve — the overflow:hidden wrapper clips that sliver off regardless of any radius math being slightly imprecise. ========================================================================== */ .product-card .product-card__bar { background-image: none; background-color: #fd5902; opacity: 1; transform: scaleX(0.18); transform-origin: left; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-image 0.35s ease; } .product-card:hover .product-card__bar, .product-card:focus-within .product-card__bar { transform: scaleX(1); background-image: linear-gradient(135deg, #fd5902 0%, #ff8a3d 55%, #fff2eb 100%); } .product-card:hover, .product-card:focus-within { border-color: #fd5902; } /* ========================================================================== Custom dropdown (div/ul/li based, not . */ .dropdown--field .dropdown__trigger { width: 100%; justify-content: space-between; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 400; } .dark .dropdown--field .dropdown__trigger { background: #283548; border-color: #334155; color: #f1f5f9; } .dropdown--field .dropdown__trigger:hover { border-color: #cbd5e1; } .dark .dropdown--field .dropdown__trigger:hover { border-color: #475569; } .dropdown--field.is-open .dropdown__trigger { border-color: #fd5902; background: #fff; box-shadow: none; } .dark .dropdown--field.is-open .dropdown__trigger { border-color: #ff8a3d; background: #1e293b; } .dropdown--field .dropdown__value { font-weight: 400; color: #0b1124; } .dark .dropdown--field .dropdown__value { color: #f1f5f9; } .dropdown--field .dropdown__value.is-placeholder { color: #94a3b8; } .dark .dropdown--field .dropdown__value.is-placeholder { color: #64748b; } .dropdown--field .dropdown__menu { left: 0; right: 0; width: 100%; min-width: 0; } /* ========================================================================== Animated hamburger ⇄ close (X) icon — shared by the primary mobile nav trigger (#mobileMenuBtn) and the Doc Hub sidebar trigger (#sidebarToggle). Three absolutely-positioned bars morph into an X via transform/opacity so the icon animates smoothly in place instead of swapping glyphs. Toggle the ".is-active" class on the ".hamburger" element itself. ========================================================================== */ .hamburger { position: relative; display: inline-block; width: 20px; height: 16px; flex-shrink: 0; } .hamburger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, top 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 7px; } .hamburger span:nth-child(3) { top: 14px; } .hamburger.is-active span:nth-child(1) { top: 7px; transform: rotate(45deg); } .hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.is-active span:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* Compact variant — used inline next to a text label (Doc Hub toolbar). */ .hamburger--sm { width: 16px; height: 12px; } .hamburger--sm span:nth-child(1) { top: 0; } .hamburger--sm span:nth-child(2) { top: 5px; } .hamburger--sm span:nth-child(3) { top: 10px; } .hamburger--sm.is-active span:nth-child(1) { top: 5px; } .hamburger--sm.is-active span:nth-child(3) { top: 5px; } /* ========================================================================== Global responsiveness safety net (desktop -> small mobile) ========================================================================== */ html, body { max-width: 100%; } img, svg, video, iframe, canvas, embed, object { max-width: 100%; } body.archive.tax-missionos_products.term-117 .md-body img{ margin-bottom: 4px; margin-top: 15px; border-radius: 10px; max-width: min(100%, 420px); margin-left: auto; margin-right: auto; } table { max-width: 100%; } * { min-width: 0; } .md-body, .md-body * { word-wrap: break-word; overflow-wrap: break-word; } @media (max-width: 480px) { h1 { font-size: clamp(1.6rem, 7vw, 2.25rem) !important; } .max-w-\[1240px\] { padding-left: 1.1rem !important; padding-right: 1.1rem !important; } } .alignleft { float: left; margin: 0 1.5em 1.5em 0; } .alignright { float: right; margin: 0 0 1.5em 1.5em; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } ul#tagsList a { color: #fd5902; background: #fcf9e8; }