/* ========================================================================= Shared site header — the original cmt-floating-header (WPCode snippet) blended to match the premium pages. Loaded GLOBALLY on every front-end page (functions.php adds `cxp-skin` to everywhere) so the menu button, dropdown animation, auth buttons, and Book button look and animate IDENTICALLY across the whole site — no page is an exception. Styling only; no links removed. The header sits outside .cxp, so the --cx-* tokens are declared on the body. ========================================================================= */ body.cxp-skin { --cx-accent: #ff5900; --cx-accent2: #f9801b; --cx-ink: #131313; --cx-hair: rgba(19, 19, 19, 0.12); --cx-e: cubic-bezier(0.16, 1, 0.3, 1); } .cxp-skin .cmt-header-container { max-width: 1360px; padding: clamp(1rem, 2.75vw, 1.75rem) clamp(1.15rem, 4vw, 3.5rem); } .cxp-skin .cmt-floating-header { font-family: "Poppins", sans-serif; padding: 0; } /* ---- Menu button (hamburger + label) ---- */ .cxp-skin .cmt-menu-toggle { color: var(--cx-ink); gap: 0.7rem; transition: opacity 0.3s var(--cx-e); } .cxp-skin .cmt-menu-toggle:hover { opacity: 0.7; } .cxp-skin .cmt-menu-text { font-family: "Poppins", sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-ink); } .cxp-skin .cmt-hamburger span { background: var(--cx-ink); width: 22px; height: 2px; border-radius: 2px; } .cxp-skin .cmt-logo-img { max-height: clamp(42px, 5vw, 52px); } /* ---- Auth buttons ---- */ .cxp-skin .cmt-auth-group { gap: 0.6rem; } .cxp-skin .cmt-signup { font-family: "Poppins", sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--cx-ink); background: transparent; border: 1px solid var(--cx-hair); padding: 0.62rem 1.4rem; border-radius: 999px; transition: transform 0.3s var(--cx-e), border-color 0.3s var(--cx-e); } .cxp-skin .cmt-signup:hover { background: var(--cx-ink); color: #fff !important; border-color: var(--cx-ink); transform: translateY(-2px); } .cxp-skin .cmt-signup:active { background: #000; border-color: #000; color: #fff !important; transform: translateY(0) scale(0.97); } .cxp-skin .cmt-login { font-family: "Poppins", sans-serif; font-size: 0.82rem; font-weight: 600; background: var(--cx-accent); color: #fff !important; border: 1px solid var(--cx-accent); padding: 0.62rem 1.4rem; border-radius: 999px; box-shadow: 0 13px 26px -14px rgba(255, 89, 0, 0.6); transition: transform 0.3s var(--cx-e), background 0.3s var(--cx-e), box-shadow 0.3s var(--cx-e); } .cxp-skin .cmt-login:hover { background: var(--cx-accent2); border-color: var(--cx-accent2); opacity: 1; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(255, 89, 0, 0.72); } .cxp-skin .cmt-login:active { background: #cf4700; border-color: #cf4700; transform: translateY(0) scale(0.97); box-shadow: 0 8px 18px -10px rgba(255, 89, 0, 0.6); } /* ---- Dropdown menu (origin-aware entrance) ---- */ .cxp-skin .cmt-dropdown { display: block !important; /* override the snippet's display:none so we can animate open */ top: 135%; width: min(320px, 88vw); background: #17140f; background-image: radial-gradient(130% 110% at 0% 0%, rgba(255, 89, 0, 0.16), transparent 55%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; box-shadow: 0 44px 90px -40px rgba(19, 19, 19, 0.5); padding: 0.5rem; opacity: 0; visibility: hidden; transform-origin: top left; transform: translateY(-8px) scale(0.97); transition: opacity 0.2s var(--cx-e), transform 0.2s var(--cx-e), visibility 0.2s var(--cx-e); } .cxp-skin .cmt-dropdown.is-active { opacity: 1; visibility: visible; transform: none; } .cxp-skin .cmt-nav-item a { font-family: "Poppins", sans-serif; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; transition: background 0.25s var(--cx-e), color 0.25s var(--cx-e), padding-left 0.25s var(--cx-e); } .cxp-skin .cmt-nav-item:last-child a { border-bottom: 0; } .cxp-skin .cmt-nav-item a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; padding-left: 1.3rem; } .cxp-skin .cmt-chevron { opacity: 0.45; } /* ---- Injected "Book appointment" button (in the header) ---- */ .cxp-skin .cmt-book { display: inline-flex; align-items: center; gap: 0.45rem; margin-right: 0.65rem; white-space: nowrap; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.82rem; background: var(--cx-accent); color: #fff !important; text-decoration: none; padding: 0.62rem 1.35rem; border-radius: 999px; border: 1px solid var(--cx-accent); box-shadow: 0 13px 26px -14px rgba(255, 89, 0, 0.6); transition: transform 0.25s var(--cx-e), background 0.25s var(--cx-e), box-shadow 0.25s var(--cx-e); } .cxp-skin .cmt-book:hover { background: var(--cx-accent2); border-color: var(--cx-accent2); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(255, 89, 0, 0.72); } .cxp-skin .cmt-book:active { transform: scale(0.97); background: #cf4700; border-color: #cf4700; } .cxp-skin .cmt-book-i { transition: transform 0.25s var(--cx-e); } .cxp-skin .cmt-book:hover .cmt-book-i { transform: translate(2px, -2px); } @media (max-width: 640px) { .cxp-skin .cmt-book { padding: 0.55rem 0.9rem; font-size: 0.75rem; margin-right: 0.4rem; } .cxp-skin .cmt-book-i { display: none; } .cxp-skin .cmt-login { display: none; } /* keep the header uncluttered; Book is the priority CTA */ } /* ---- Touch + reduced-motion guards for the header ---- */ @media (hover: none) { .cxp-skin .cmt-signup:hover, .cxp-skin .cmt-login:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .cxp-skin .cmt-hamburger span, .cxp-skin .cmt-signup, .cxp-skin .cmt-login, .cxp-skin .cmt-menu-toggle { transition: none !important; } .cxp-skin .cmt-dropdown { transform: none !important; transition: opacity 0.15s ease !important; } }