/* ========================================================================= Site-wide overrides Loaded AFTER Pixfort/Essentials so these win where we need them to. Scope everything through .alchblocks-theme on where possible, and reach into Pixfort classes only by their stable selectors. ========================================================================= */ /* ---------- Typography: Cinzel on ALL headers + hero text ---------- */ /* First: catch everything the theme + ATHS plugin output. Body-scoped so specificity > any plugin rule using plain .class { !important }. */ body h1, body h2, body h3, body h4, body h5, body h6, body .pix-heading h1, body .pix-heading h2, body .pix-heading h3, body .pix-heading h4, body .pix-heading h5, body .pix-heading h6, body .pix-hero-title, body .pix-hero-subtitle, body .pix-btn, /* ATHS plugin specifics */ body .aths-about-hero-title, body .aths-hero-title, body .aths-section-title, body .aths-service-title, body [class^="aths-"][class$="-title"], body [class^="aths-"][class$="-heading"], body [class^="aths-"][class$="-name"], body [class*="-hero-title"], body [class*="-section-title"], body [class*="-tabs-heading"], body [class*="-dark-heading"], body [class*="-section-heading"], body [class*="-block-heading"], body [class*="pix-sliding-headline"], body .pix-sliding-headline-2, body .pix-animated-headline, body [class*="pix-animated"] { font-family: var(--alch-font-head) !important; letter-spacing: 0.02em !important; } /* Nuclear fallback: any h1-h6 in the document, scoped by html to trump class-only rules from pixfort/aths/essentials. */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: var(--alch-font-head) !important; } /* Editorial body text */ body, .pix-text, p { font-family: var(--alch-font-body); font-size: 1.075rem; line-height: 1.7; } /* ========================================================================= Header / main nav — responsive tuning Baseline: Cinzel, uppercase, wide tracking — beautiful wide, cramped narrow. We scale tracking + size + padding down smoothly as the viewport tightens, and flip to the drawer earlier so the mid-width band (992–1199px) never shows overlapping or wrapped link text. ========================================================================= */ /* Baseline (>=1280px — full Cinzel treatment) */ .pix-main-menu a { font-family: var(--alch-font-head); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; white-space: nowrap; } /* Item gap absorbs width changes before tracking does. We use list-item margins (not link padding) because the theme also targets link padding with !important and would otherwise win. Specificity boosted via body.home / body chain so any theme rule short of inline style is beat. */ html body .pix-main-menu > ul > li, html body .pix-main-menu .navbar-nav > li { margin-left: clamp(0.15rem, 0.5vw, 0.55rem) !important; margin-right: clamp(0.15rem, 0.5vw, 0.55rem) !important; } /* Keep the three header columns (flex-1 trio) from forcing the middle column to squeeze into a zero-width lane when the right column has a CTA. */ .pix-header .pixfort-header-col { min-width: 0; } /* Medium-large (1200–1279px): ease off the tracking so "Diagnostic Labs" and "Women's Health" stop looking crammed next to their neighbors. */ @media (max-width: 1279px) { .pix-main-menu a { letter-spacing: 0.06em; font-size: 0.78rem; } } /* Desktop-tight (992–1199px): a lot of Bootstrap themes leave this band in "desktop" mode, which is where the user's complaint mostly lives. Tighten further and shave the space between items. */ @media (max-width: 1199px) { .pix-main-menu a { letter-spacing: 0.045em; font-size: 0.74rem; } .pix-main-menu > ul > li > a, .pix-main-menu .navbar-nav > li > a, .pix-main-menu .nav-link { padding-left: 0.55rem !important; padding-right: 0.55rem !important; } /* Demote the dropdown caret so it doesn't eat a full em of width */ .pix-main-menu .dropdown-toggle::after { margin-left: 0.35em; transform: scale(0.9); } } /* Pixfort ships two complete headers: .pix-header-desktop and .pix-header-mobile (which owns the .small-menu-toggle hamburger and its own drawer). The theme swaps them at ~992px. We flip earlier — at 1099px — because between 992–1099 the desktop horizontal nav was physically touching adjacent items. */ @media (max-width: 1099px) { .pix-header-desktop { display: none !important; } .pix-header-mobile { display: block !important; } } /* ========================================================================= Mobile menu: full-screen editorial overlay. ------------------------------------------------------------------------- Pixfort collapses the mobile header into a bootstrap `.navbar-collapse` that normally drops down below the header as a small drawer. We reuse its existing open/close state (no theme JS changes needed) but re-skin it as a full-viewport overlay: fixed inset:0, deep-midnight gradient, Cinzel labels at ~1.75rem stacked center, hairline gold separators, items stagger-reveal, hamburger flips to visible on cream, body scroll is locked while it's open. Breakpoint matches the desktop/mobile swap at 1099px (see rule above). ========================================================================= */ @media (max-width: 1099px) { /* Strip the old cream-drawer chrome off the collapse container so when it's hidden (no .show / .collapsing) it inherits no leftover styles. */ html body .pix-header-mobile .navbar-collapse, html body .pix-header .navbar-collapse { background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Full-screen overlay chrome — applied while open AND during Bootstrap's `.collapsing` mid-transition, so we never see a height-animating drawer. */ html body .pix-header-mobile .navbar-collapse.show, html body .pix-header-mobile .navbar-collapse.collapsing, html body .pix-header .navbar-collapse.show, html body .pix-header .navbar-collapse.collapsing { display: flex !important; position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; /* dvh accounts for iOS URL bar */ max-height: 100dvh !important; z-index: 9998 !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; overflow-y: auto !important; background: radial-gradient(900px 600px at 18% -10%, rgba(212, 175, 55, 0.09) 0%, transparent 60%), radial-gradient(1200px 800px at 85% 110%, rgba(82, 93, 141, 0.16) 0%, transparent 55%), linear-gradient(180deg, #0a0f1f 0%, #05080f 100%) !important; -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); animation: alch-mobilenav-in 340ms cubic-bezier(0.2, 0.7, 0.1, 1); } @keyframes alch-mobilenav-in { from { opacity: 0; } to { opacity: 1; } } /* Inner