/* Theme Name: FocusX Cleaning Theme URI: https://focusxcleaning.com.au/ Author: FocusX (white-label build) Author URI: https://focusxcleaning.com.au/ Description: Bespoke commercial and residential cleaning theme for FocusX Cleaning Solutions, Melbourne. Designed homepage, service-page templates (slug-based), a dark footer, and a built-in lead/contact/newsletter form handler. Converted from the FocusX static build. Version: 1.3.0 Requires at least: 6.1 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: focusx */ :root { /* Brand blues — deeper, more saturated for contrast */ --blue-900: #06345a; --blue-800: #064e86; --blue-700: #0a63b4; --blue-600: #0f7ad4; --blue-500: #2a93e6; --blue-300: #7cc2f0; --blue-100: #dcefff; --blue-075: #e6f2fc; --blue-050: #f2f9ff; --yellow: #ffc400; --yellow-600: #f2b200; --yellow-ink: #0b2a44; --green: #17a34a; --green-700: #128038; --ink: #0d2338; --text: #21384b; --muted: #55697c; --white: #ffffff; --line: #d5e5f2; /* Derived tints & washes. These are recalculated from the Primary and Accent pickers (FocusX → Colours), so changing the brand colour also moves the hero wash, the section bands, the contact panel and the footer — they used to be hardcoded blue and stayed blue whatever you picked. */ --primary-rgb: 15, 122, 212; --accent-rgb: 255, 196, 0; --tint-a: #cfe8ff; --tint-b: #e1f1ff; --tint-c: #f0f8ff; --tint-page: #eef7ff; --contact-a: #d7ebfd; --contact-b: #e9f3fc; --footer-a: #0b2038; --footer-b: #081627; --star: #ffb400; --callbanner-bg: #55b600; --callbanner-rgb: 51, 122, 0; --green-rgb: 18, 128, 60; --shadow: 0 20px 55px rgba(8, 40, 70, .16); --shadow-soft: 0 14px 34px rgba(10, 62, 105, .12); --radius: 18px; --radius-sm: 12px; --container: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: #fff; line-height: 1.55; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } .ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: 0 0 auto; } .skip-link { position: absolute; left: -999px; top: 1rem; z-index: 999; background: #fff; padding: .75rem 1rem; border-radius: 8px; } .skip-link:focus { left: 1rem; } .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .section { padding: 64px 0; } .section-soft { background: var(--blue-075); } /* ---------- Nav ---------- */ .navbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(10,64,110,.12); box-shadow: 0 2px 18px rgba(10,62,105,.06); } .navbar__inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; } .brand img { height: 78px; width: auto; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 1.7rem; font-weight: 700; font-size: .92rem; margin-left: auto; } .nav-links a { color: #1e3a55; position: relative; } .nav-links a:hover, .nav-links .active { color: var(--blue-700); } /* .active covers the hardcoded fallback nav; the current-menu-* classes are what WordPress adds once a real menu is assigned in Appearance → Menus. */ .nav-links .current-menu-item > a, .nav-links .current-menu-ancestor > a, .nav-links .current_page_item > a { color: var(--blue-700); } .nav-links a.active::after, .nav-links .current-menu-item > a::after, .nav-links .current-menu-ancestor > a::after, .nav-links .current_page_item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: var(--yellow); } .nav-actions { display: flex; align-items: center; gap: .7rem; } .menu-toggle { display: none; background: none; border: 0; padding: .4rem; } .menu-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; border-radius: 999px; background: var(--ink); } /* ---------- Nav menus & dropdowns ---------- */ /* Once a menu is assigned in Appearance → Menus the links arrive wrapped in a