/* ========================================================================== Core Chiro Rehab — Header Redesign Self-contained, isolated with the `chc-` namespace. ========================================================================== */ :root{ --chc-orange:#ff8600; --chc-orange-dark:#e07300; --chc-mint:#eff7f6; --chc-gold:#f6db7d; --chc-ink:#0f1720; --chc-ink-soft:#4b5563; --chc-white:#ffffff; --chc-border:rgba(15,23,32,.08); --chc-shadow:0 18px 40px -12px rgba(15,23,32,.18); --chc-radius:14px; --chc-font-head:'Plus Jakarta Sans', sans-serif; --chc-font-body:'DM Sans', sans-serif; --chc-header-h:88px; } .chc-header *{ box-sizing:border-box; } /* Bootstrap forces `scroll-behavior:smooth` on , which makes every wheel/ trackpad scroll ease with lingering momentum instead of responding instantly — that's what made the header's scroll-direction detection feel laggy/glitchy. Native instant scrolling reads direction correctly frame-to-frame; JS-driven scrollIntoView() calls can still opt into smooth behavior per-call. */ html{ scroll-behavior:auto !important; } /* ---------- Top utility bar ---------- */ .chc-topbar{ background:var(--chc-ink); color:rgba(255,255,255,.78); font-family:var(--chc-font-body); font-size:13px; position:relative; z-index:1001; } .chc-topbar__inner{ max-width:1320px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .chc-topbar__left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .chc-topbar__item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } .chc-topbar__item i{ color:var(--chc-orange); font-size:13px; } .chc-topbar__item a{ color:inherit; text-decoration:none; transition:color .2s ease; } .chc-topbar__item a:hover{ color:var(--chc-orange); } .chc-topbar__hours{ display:inline-flex; align-items:center; gap:7px; } .chc-topbar__hours .chc-dot{ width:7px; height:7px; border-radius:50%; background:#33d17a; box-shadow:0 0 0 3px rgba(51,209,122,.22); display:inline-block; } .chc-topbar__right{ display:flex; align-items:center; gap:16px; } .chc-topbar__social{ display:flex; align-items:center; gap:10px; } .chc-topbar__social a{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; transition:.25s ease; } .chc-topbar__social a:hover{ background:var(--chc-orange); transform:translateY(-2px); } .chc-topbar__social img{ width:13px; height:13px; object-fit:contain; filter:brightness(0) invert(1); } .chc-topbar__social i{ color:#fff; font-size:13px; } .chc-topbar__auth{ display:flex; align-items:center; gap:14px; } .chc-topbar__auth a{ color:rgba(255,255,255,.78); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; } .chc-topbar__auth a:hover{ color:var(--chc-orange); } .chc-topbar__auth i{ font-size:12px; } /* ---------- Main nav ---------- */ .chc-nav-wrap{ position:sticky; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:box-shadow .35s ease, border-color .35s ease, background .35s ease; } .chc-nav-wrap.is-scrolled{ background:rgba(255,255,255,.97); box-shadow:var(--chc-shadow); border-color:var(--chc-border); } .chc-nav{ max-width:1360px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:var(--chc-header-h); transition:height .35s ease; gap:10px; } .chc-nav-wrap.is-scrolled .chc-nav{ height:72px; } .chc-logo{ display:flex; align-items:center; flex-shrink:0; } .chc-logo img{ height:56px; width:auto; display:block; transition:height .35s ease; } .chc-nav-wrap.is-scrolled .chc-logo img{ height:46px; } /* menu */ .chc-menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; font-family:var(--chc-font-head); } .chc-menu > li{ position:relative; } .chc-menu > li > a{ display:flex; align-items:center; gap:5px; padding:11px 11px; color:var(--chc-ink); font-weight:600; font-size:14px; white-space:nowrap; text-decoration:none; border-radius:10px; transition:color .2s ease, background .2s ease; } .chc-menu > li > a i.chc-caret{ font-size:9px; opacity:.55; transition:transform .25s ease; } .chc-menu > li:hover > a, .chc-menu > li.is-active > a{ color:var(--chc-orange); background:rgba(255,134,0,.08); } .chc-menu > li:hover > a i.chc-caret{ transform:rotate(180deg); } .chc-menu > li.is-active > a{ font-weight:700; } /* dropdown (simple) */ .chc-dropdown{ position:absolute; top:calc(100% + 10px); left:0; min-width:230px; background:var(--chc-white); border-radius:var(--chc-radius); box-shadow:var(--chc-shadow); border:1px solid var(--chc-border); padding:10px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease; list-style:none; z-index:40; } .chc-menu > li:hover .chc-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .chc-dropdown li a{ display:block; padding:10px 14px; border-radius:8px; color:var(--chc-ink-soft); font-weight:500; font-size:14px; text-decoration:none; transition:.2s ease; } .chc-dropdown li a:hover{ background:var(--chc-mint); color:var(--chc-orange-dark); padding-left:18px; } /* mega menu */ .chc-mega{ position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%, 10px); width:min(760px, 90vw); background:var(--chc-white); border-radius:18px; box-shadow:var(--chc-shadow); border:1px solid var(--chc-border); padding:26px; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:40; } .chc-menu > li:hover .chc-mega{ opacity:1; visibility:visible; transform:translate(-50%, 0); } .chc-mega__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--chc-border); } .chc-mega__head span{ font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--chc-ink-soft); font-weight:700; } .chc-mega__head a{ font-size:13px; color:var(--chc-orange); font-weight:700; text-decoration:none; } .chc-mega__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:4px 18px; } .chc-mega__grid a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:var(--chc-ink); font-size:14px; font-weight:600; text-decoration:none; transition:.2s ease; } .chc-mega__grid a i{ width:30px; height:30px; flex-shrink:0; border-radius:8px; background:var(--chc-mint); color:var(--chc-orange); display:inline-flex; align-items:center; justify-content:center; font-size:14px; transition:.2s ease; } .chc-mega__grid a:hover{ background:var(--chc-mint); color:var(--chc-orange-dark); transform:translateX(3px); } .chc-mega__grid a:hover i{ background:var(--chc-orange); color:#fff; } /* right side actions */ .chc-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .chc-actions__phone{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--chc-ink); } .chc-actions__phone .chc-icon-circle{ width:42px; height:42px; border-radius:50%; background:var(--chc-mint); color:var(--chc-orange); display:inline-flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .chc-actions__phone .chc-label{ display:flex; flex-direction:column; line-height:1.25; } .chc-actions__phone .chc-label small{ font-size:11px; color:var(--chc-ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .chc-actions__phone .chc-label strong{ font-size:15.5px; font-family:var(--chc-font-head); } .chc-btn-book{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--chc-orange), #ff9d33); color:#fff !important; font-family:var(--chc-font-head); font-weight:700; font-size:14px; padding:13px 20px; border-radius:50px; white-space:nowrap; text-decoration:none; box-shadow:0 10px 24px -8px rgba(255,134,0,.6); transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden; } .chc-btn-book:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(255,134,0,.7); color:#fff !important; } .chc-btn-book i{ font-size:12px; } /* burger */ .chc-burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--chc-border); background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; flex-shrink:0; } .chc-burger span{ width:20px; height:2px; background:var(--chc-ink); border-radius:2px; transition:.3s ease; } .chc-burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .chc-burger.is-active span:nth-child(2){ opacity:0; } .chc-burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ---------- Mobile off-canvas ---------- */ .chc-overlay{ position:fixed; inset:0; background:rgba(9,14,20,.55); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; z-index:1100; } .chc-overlay.is-open{ opacity:1; visibility:visible; } .chc-offcanvas{ position:fixed; top:0; right:0; bottom:0; width:min(360px, 88vw); background:#fff; z-index:1101; transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,.2); } .chc-offcanvas.is-open{ transform:translateX(0); } .chc-offcanvas__top{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--chc-border); } .chc-offcanvas__top img{ height:38px; } .chc-offcanvas__close{ width:36px; height:36px; border-radius:50%; border:1px solid var(--chc-border); background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--chc-ink); } .chc-offcanvas__body{ flex:1; overflow-y:auto; padding:14px 10px; } .chc-offcanvas__menu{ list-style:none; margin:0; padding:0; } .chc-offcanvas__menu > li{ border-bottom:1px solid var(--chc-border); } .chc-offcanvas__menu > li > a, .chc-offcanvas__menu > li > .chc-oc-toggle{ display:flex; align-items:center; justify-content:space-between; padding:15px 12px; color:var(--chc-ink); font-weight:700; font-family:var(--chc-font-head); font-size:15px; text-decoration:none; cursor:pointer; } .chc-offcanvas__menu > li.is-active > a, .chc-offcanvas__menu > li.is-active > .chc-oc-toggle{ color:var(--chc-orange); } .chc-oc-toggle i{ transition:transform .25s ease; font-size:12px; color:var(--chc-ink-soft); } .chc-offcanvas__menu > li.is-open .chc-oc-toggle i{ transform:rotate(180deg); } .chc-oc-submenu{ list-style:none; margin:0; padding:0 0 10px 12px; max-height:0; overflow:hidden; transition:max-height .35s ease; } .chc-offcanvas__menu > li.is-open .chc-oc-submenu{ max-height:900px; } .chc-oc-submenu a{ display:flex; align-items:center; gap:8px; padding:9px 10px; color:var(--chc-ink-soft); font-size:13.5px; font-weight:600; text-decoration:none; border-radius:8px; } .chc-oc-submenu a:hover{ background:var(--chc-mint); color:var(--chc-orange-dark); } .chc-offcanvas__footer{ padding:18px 22px 26px; border-top:1px solid var(--chc-border); } .chc-offcanvas__footer .chc-btn-book{ width:100%; justify-content:center; margin-bottom:16px; } .chc-offcanvas__contact{ font-size:13.5px; color:var(--chc-ink-soft); line-height:1.7; margin-bottom:14px; } .chc-offcanvas__contact a{ color:var(--chc-ink); font-weight:700; text-decoration:none; } .chc-offcanvas__social{ display:flex; gap:10px; } .chc-offcanvas__social a{ width:34px; height:34px; border-radius:50%; background:var(--chc-mint); display:inline-flex; align-items:center; justify-content:center; } .chc-offcanvas__social img{ width:15px; height:15px; } .chc-offcanvas__social i{ color:var(--chc-orange); font-size:14px; } /* ---------- Responsive ---------- */ @media (max-width:1340px){ .chc-menu{ display:none; } .chc-actions__phone{ display:none; } .chc-burger{ display:inline-flex; } .chc-topbar__left .chc-topbar__item:not(:first-child){ display:none; } } @media (max-width:767px){ .chc-topbar{ display:none; } .chc-nav{ padding:0 16px; } :root{ --chc-header-h:74px; } .chc-logo img{ height:42px; } .chc-actions .chc-btn-book span{ display:none; } .chc-actions .chc-btn-book{ padding:12px; width:44px; height:44px; justify-content:center; border-radius:50%; } }