/* Theme Name: STS Corporate Theme URI: https://stspl.com Author: Synergy Technology Services Author URI: https://stspl.com Description: Custom Elementor-ready WordPress theme converted from the STS marketing site design (Home, About, Services, Industries, Products, Careers, Contact, Blog). Built for full editability via the WordPress Customizer, Menus, native Posts, custom post types (Services / Industries), and Elementor page building. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 Text Domain: sts-corporate */ /* Global reset + base type — mirrors the original design's inline styles */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #FBFAF7; color: #1A1D24; font-family: 'Geist', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } ::selection { background: #CFE6E2; } @keyframes tsFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } @keyframes tsMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes svPanelFade { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } } /* Scroll-reveal used by assets/js/main.js on Elementor sections/widgets */ .sts-reveal { opacity: 0; } .sts-reveal.sts-in-view { animation: tsFade 0.6s ease both; } @media (prefers-reduced-motion: reduce) { .sts-reveal { opacity: 1; animation: none !important; } } /* Marquee strip — add class "sts-marquee" (outer) / "sts-marquee-track" (inner) to any Elementor container via the CSS Classes advanced setting to bring back the scrolling technology-logos strip from the original design. */ .sts-marquee { overflow: hidden; } .sts-marquee-track { display: flex; width: max-content; animation: tsMarquee 24s linear infinite; } .sts-container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); } /* ---------- Nav ---------- */ .sts-nav-wrap { position: sticky; top: 0; z-index: 50; display: flex; justify-content: center; padding: 16px 24px 0; } .sts-nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; max-width: 1120px; padding: 10px 12px 10px 20px; border-radius: 16px; background: rgba(255,255,255,0.72); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(11,84,104,0.08); box-shadow: 0 8px 24px rgba(16,24,32,0.08); } .sts-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0B5468; } .sts-brand img { height: 30px; width: auto; } .sts-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #0B5468; } .sts-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .sts-menu > li { position: relative; } .sts-menu > li > a { text-decoration: none; color: #3B4152; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 10px; display: inline-block; } .sts-menu > li > a:hover { background: rgba(11,84,104,0.08); color: #0B5468; } .sts-menu .cta { margin-left: 12px; color: #fff !important; font-weight: 600; padding: 10px 20px; border-radius: 12px; background: #F26A21; box-shadow: 0 4px 14px rgba(242,106,33,0.28); } .sts-menu .cta:hover { background: #0B5468 !important; } /* Active nav item — the current page (or, via current-menu-ancestor/ -parent, the section a single/archive belongs to) — same treatment for the desktop pill nav, its dropdowns, and the mobile panel. Set on the itself: STS_Nav_Walker adds it directly (inc/nav-walker.php); the mobile panel's default walker gets it from the nav_menu_link_attributes filter in inc/template-tags.php (sts_menu_item_is_current()). */ .sts-menu > li > a.is-current, .sts-mobile-panel a.is-current { background: rgba(242,106,33,0.12); color: rgb(11,84,104); font-weight: 600; } .sts-menu li.menu-item-has-children > a { display: flex; align-items: center; gap: 5px; } /* The submenu sits 46px below the
  • 's top edge, but the link itself is only ~36px tall — without this, the pointer crosses a ~10px dead zone (over neither the link nor the not-yet-visible submenu) on its way down, :hover on the
  • drops, and the submenu closes itself before the pointer ever reaches it — the "clicking a submenu item hides it" bug. padding-bottom extends the
  • 's actual hoverable box all the way down to the submenu with no gap; margin-bottom cancels it back out so it doesn't add dead space to the nav row itself. */ .sts-menu li.menu-item-has-children { padding-bottom: 14px; margin-bottom: -14px; } .sts-submenu { position: absolute; left: 0; top: 46px; z-index: 80; min-width: 220px; display: none; grid-template-columns: 1fr; gap: 2px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(11,84,104,0.1); box-shadow: 0 16px 36px rgba(16,24,32,0.12); list-style: none; margin: 0; } /* Submenus with more than 6 items get a second column (see STS_Nav_Walker::walk() in inc/nav-walker.php, which counts each submenu's items and adds this class automatically). */ .sts-submenu.sts-submenu--cols-2 { min-width: 420px; grid-template-columns: 1fr 1fr; } .sts-menu li.menu-item-has-children:hover .sts-submenu, .sts-menu li.menu-item-has-children:focus-within .sts-submenu { display: grid; } .sts-submenu li a { text-decoration: none; color: #3B4152; font-size: 13px; font-weight: 500; padding: 8px 10px; border-radius: 9px; display: block; } .sts-submenu li a:hover { background: rgba(11,84,104,0.1); color: #0B5468; } /* "View all X" link appended to every submenu, linking to the parent item's own URL (see STS_Nav_Walker::end_lvl() in inc/nav-walker.php). Spans both columns when the submenu is in two-column mode. */ .sts-submenu-viewall { grid-column: 1 / -1; } .sts-submenu-viewall a { margin-top: 4px; color: #0B5468; font-size: 12.5px; font-weight: 600; text-align: center; border-top: 1px solid rgba(11,84,104,0.12); border-radius: 9px; } .sts-submenu-viewall a:hover { background: rgba(11,84,104,0.08); } .sts-mobile-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(11,84,104,0.18); background: rgba(255,255,255,0.6); flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .sts-mobile-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #0B5468; } .sts-mobile-panel { display: none; position: absolute; left: 45px; right: 45px; top: 80px; width: auto; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; z-index: 80; flex-direction: column; gap: 2px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(11,84,104,0.1); box-shadow: 0 16px 36px rgba(16,24,32,0.12); /* Top-level items render as bare
  • s with no wrapping