/* ============================================================ JID Rebuild - Shared CHROME (tokens, top bar, header, nav, drawer, buttons) Complete Physio - brand teal #1db1db / slate #545f68 Split out of jid-core.css on 2026-09-18 so Avada-rendered pages can load the header WITHOUT jid-core's page-shell rules. jid-core still owns `*{box-sizing:border-box}`, `a{color:inherit}` and the `body.jid-page` shell, none of which are safe to inject into an Avada page body (Avada sets box-sizing on 11 specific selectors, not globally). This is a MOVE, not a copy - edit the chrome here and both surfaces follow. jid-core is enqueued with this file as a dependency, so cascade order on converted routes is unchanged. ============================================================ */ /* ============================================================ JID Rebuild — Core (tokens, chrome, shared UI) Complete Physio · brand teal #1db1db / slate #545f68 ============================================================ */ :root{ --teal:#1db1db; --teal-deep:#1591b5; --teal-ink:#0e6f8c; --slate:#545f68; --ink:#172029; --body:#4b565f; --bg:#f6fafb; --card:#fff; --line:#e7eef1; --pill:rgba(29,177,219,.10); --pill-line:rgba(29,177,219,.28); --shadow:0 1px 2px rgba(23,32,41,.04); --shadow-lift:0 18px 40px -16px rgba(21,108,134,.28), 0 4px 12px rgba(23,32,41,.05); --r:18px; --r-sm:12px; --maxw:1320px; --head-h:104px; --header-bg:#15242d; --font-display:'Montserrat',system-ui,sans-serif; --font-body:'Open Sans',system-ui,sans-serif; } html{-webkit-text-size-adjust:100%} /* ---------- Buttons ---------- */ .jid-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.92rem; line-height:1; padding:13px 24px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:all .22s ease; white-space:nowrap; } .jid-btn--primary{background:var(--teal); color:#fff} .jid-btn--primary:hover{background:var(--teal-deep); box-shadow:0 8px 20px -8px rgba(29,177,219,.6)} .jid-btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)} .jid-btn--ghost:hover{border-color:var(--teal); color:var(--teal-ink)} .jid-btn--light{background:#fff; color:var(--teal-ink)} .jid-btn--light:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(0,0,0,.35)} .jid-btn--block{width:100%} /* ---------- Sister-site top bar ---------- John, 18 Sep 2026: Guided Injections came out of the primary nav (too many top-level items) and landed here, mirroring the bar UGI runs back to Complete Physio. Above the sticky header so it never competes with the nav or the Book Online button. */ .jid-topbar{background:#0f1a21; color:rgba(255,255,255,.72); font-family:var(--font-display); font-size:.74rem} .jid-topbar__inner{ max-width:var(--maxw); margin:0 auto; padding:0 30px; min-height:36px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; } .jid-topbar__note{letter-spacing:.02em} .jid-topbar__link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#fff; padding:5px 12px; border:1px solid rgba(255,255,255,.24); border-radius:999px; transition:all .18s ease; white-space:nowrap; } .jid-topbar__link:hover{background:var(--teal); border-color:var(--teal); color:#fff} .jid-topbar__link svg{flex-shrink:0} /* ---------- Header (dark, matches site nav) ---------- */ .jid-header{ position:sticky; top:0; z-index:1000; background:var(--header-bg); box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 24px -12px rgba(0,0,0,.5); } .jid-header__inner{ max-width:var(--maxw); margin:0 auto; padding:0 30px; height:var(--head-h); display:flex; align-items:center; gap:24px; } .jid-header__logo{display:flex; align-items:center; flex-shrink:0} .jid-header__logo img{height:72px; width:auto; max-height:72px} .jid-nav{flex:1; display:flex; justify-content:center; min-width:0} .jid-nav__menu{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0; flex-wrap:nowrap} .jid-nav__menu li{position:relative} /* Hide any Avada-injected custom menu items (e.g. the inline search form) */ .jid-nav__menu .fusion-custom-menu-item, .jid-nav__menu .fusion-main-menu-search, .jid-nav__menu .fusion-main-menu-cart{display:none !important} .jid-nav__menu>li>a{ position:relative; display:block; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.035em; text-transform:uppercase; color:rgba(255,255,255,.82); padding:11px 11px; transition:color .18s ease; white-space:nowrap; } .jid-nav__menu>li>a::after{ content:""; position:absolute; left:11px; right:11px; bottom:7px; height:2px; background:var(--teal); border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .24s cubic-bezier(.2,.7,.2,1); } .jid-nav__menu>li>a:hover{color:#fff} .jid-nav__menu>li>a:hover::after, .jid-nav__menu>li.current-menu-item>a::after, .jid-nav__menu>li.current_page_item>a::after, .jid-nav__menu>li.current-menu-parent>a::after{transform:scaleX(1)} .jid-nav__menu>li.current-menu-item>a, .jid-nav__menu>li.current_page_item>a, .jid-nav__menu>li.current-menu-parent>a{color:#fff} .jid-nav__menu .sub-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-lift); padding:8px; list-style:none; margin:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s ease; z-index:50; } .jid-nav__menu li:hover>.sub-menu{opacity:1; visibility:visible; transform:translateY(0)} /* Long dropdowns (Clinics 19, Services 24) ran past the fold and the page could not scroll them into view, so patients never saw the full list. Menus of 10+ items go two columns to stay inside a laptop viewport; the max-height scroll is the backstop as more clinics get added. Chris/David 12 Aug 2026. */ .jid-nav__menu .sub-menu{ max-height:calc(100vh - var(--head-h) - 24px); overflow-y:auto; overscroll-behavior:contain; } .jid-nav__menu .sub-menu:has(> li:nth-child(10)){ columns:2; column-gap:8px; min-width:520px; } .jid-nav__menu .sub-menu>li{break-inside:avoid} .jid-nav__menu .sub-menu a{ display:block; font-family:var(--font-body); font-size:.88rem; color:var(--body); text-transform:none; letter-spacing:0; padding:9px 12px; border-radius:8px; transition:all .15s ease; } .jid-nav__menu .sub-menu a:hover{background:var(--pill); color:var(--teal-ink)} .jid-header__actions{display:flex; align-items:center; gap:18px; flex-shrink:0; padding-left:26px; margin-left:8px; border-left:1px solid rgba(255,255,255,.14)} /* Phone + Book Online stack vertically (John, 18 Sep 2026) — the burger stays on the actions row so mobile is unaffected. */ .jid-header__cta{display:flex; flex-direction:column; align-items:stretch; gap:8px} .jid-header__cta .jid-btn{padding:11px 22px; font-size:.86rem} .jid-header__tel{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:.88rem; color:rgba(255,255,255,.9); transition:color .18s ease; white-space:nowrap; } .jid-header__tel:hover{color:var(--teal)} .jid-header__tel svg{color:var(--teal)} .jid-burger{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:10px; cursor:pointer} .jid-burger span{width:20px; height:2px; background:#fff; border-radius:2px; transition:.2s} /* ---------- Mobile drawer ---------- */ .jid-drawer-backdrop{position:fixed; inset:0; background:rgba(23,32,41,.45); z-index:1001; opacity:0; transition:opacity .25s ease} .jid-drawer-backdrop.is-open{opacity:1} .jid-drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(360px,86vw); background:#fff; z-index:1002; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; box-shadow:-20px 0 50px -20px rgba(0,0,0,.3); } .jid-drawer.is-open{transform:translateX(0)} /* Dark bar so the white "Complete" wordmark in the logo stays visible (logo is built for dark bg) */ .jid-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; background:var(--header-bg)} .jid-drawer__head img{height:40px; width:auto} .jid-drawer__close{background:none; border:none; font-size:2rem; line-height:1; color:rgba(255,255,255,.85); cursor:pointer; transition:color .15s ease} .jid-drawer__close:hover{color:#fff} .jid-drawer__nav{flex:1; overflow-y:auto; padding:14px 18px} .jid-drawer__nav .jid-nav__menu{flex-direction:column; align-items:stretch; gap:2px} /* In the white drawer the header's white link colour is invisible — force dark, left-aligned, no header-underline */ .jid-drawer__nav .jid-nav__menu>li>a{font-size:1rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); padding:13px 10px; border-radius:8px} .jid-drawer__nav .jid-nav__menu>li>a::after{display:none} .jid-drawer__nav .jid-nav__menu>li>a:hover{color:var(--teal-ink); background:var(--pill)} .jid-drawer__nav .jid-nav__menu>li.current-menu-item>a, .jid-drawer__nav .jid-nav__menu>li.current_page_item>a{color:var(--teal-ink)} /* Accordion: parent submenus collapsed by default, toggled by the caret */ .jid-drawer__nav .menu-item-has-children{position:relative} .jid-drawer__nav .menu-item-has-children>a{padding-right:54px} .jid-drawer__nav .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; min-width:0; max-height:0; overflow:hidden; padding:0 0 0 12px; transition:max-height .35s ease} .jid-drawer__nav li.is-open>.sub-menu{max-height:1600px; padding-bottom:6px} .jid-drawer__nav .sub-menu a{color:var(--slate)} .jid-drawer-caret{position:absolute; top:4px; right:2px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--slate); border-radius:8px; transition:background .15s ease, color .15s ease} .jid-drawer-caret:hover{color:var(--teal-ink); background:var(--pill)} .jid-drawer-caret svg{transition:transform .28s cubic-bezier(.2,.7,.2,1)} .jid-drawer__nav li.is-open>.jid-drawer-caret{color:var(--teal-ink)} .jid-drawer__nav li.is-open>.jid-drawer-caret svg{transform:rotate(180deg)} .jid-drawer__actions{padding:18px 22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px} /* ---------- Mobile drawer: never inherit the desktop two-column dropdown ---------- Directors on iPhone, 4 Sep 2026 ("services menu doesn't work"). The desktop rule puts any 10+ item submenu into two 520px columns; the drawer renders the same