/* ======================================================================================== * header.css - .site-header, .nav-link, .mega, .drawer (L2 layer). * * Ported from docs/design-source/homepage-template.html's sticky header + three mega * menus (search " wrap) * as-is, so it is not repeated here. The drawer's expandable Courses/Webinars/Speakers * sections reuse accordion.css's details.accordion/.accordion__q/.accordion__a * unmodified (site.js's initAccordions() * already runs on any .accordion on the page) rather than shipping a second expand/ * collapse implementation; the drawer's own JS (site.js's initHeader()) only owns opening/ * closing the drawer itself and the desktop mega panels. * * Structural selectors ([data-header], [data-mega-trigger]/[data-mega-panel] via * aria-controls, [data-drawer-toggle]/[data-drawer]) match site.js's initHeader(); see * that function's own header comment in assets/js/site.js. * ======================================================================================== */ /* --- skip link --------------------------------------------------------------------------- */ .skip-link{ position:absolute;top:-48px;left:var(--cd-4);z-index:100; background:var(--cd-white);color:var(--cd-ink-strong); padding:var(--cd-2) var(--cd-4);border-radius:var(--cd-r-sm); font-weight:700;text-decoration:none;transition:top .15s ease; } .skip-link:focus{top:var(--cd-2)} /* --- header shell ------------------------------------------------------------------------ */ .site-header{ position:sticky;top:0;z-index:60; background:var(--cd-ground-deep);box-shadow:0 1px 0 rgb(255 255 255 / .08); } /* --- utility bar (owner feedback round 1): tagline left, phone/Contact/Login/"For * Patients" right, above the main bar. A visibly darker strip (--cd-ground-deeper, the * same token the dropdown panels use) so it reads as a secondary row under the main bar's * --cd-ground-deep; hidden below 900px, same breakpoint as the desktop nav, since its * links move into the drawer instead (header.php's drawer__utility-links). * ----------------------------------------------------------------------------------------- */ .site-header__utility{display:none;background:var(--cd-ground-deeper)} .site-header__utility-inner{ max-width:calc(var(--cd-container) + 2 * var(--cd-gutter));margin-inline:auto;padding:var(--cd-2) var(--cd-gutter); display:flex;align-items:center;justify-content:space-between;gap:var(--cd-5); } .site-header__tagline{ margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--cd-ink-invert-muted);font-size:.8125rem; } .site-header__utility-links{display:flex;align-items:center;gap:var(--cd-5);flex:none} .site-header__utility-links > a{ color:var(--cd-ink-invert-muted);text-decoration:none;font-size:.8125rem;font-weight:700; white-space:nowrap; } .site-header__utility-links > a:hover{color:var(--cd-white)} .site-header__utility-phone{display:flex;align-items:center;gap:6px} .site-header__pill{ display:inline-flex;align-items:center;gap:6px;white-space:nowrap; padding:6px 14px;border:1px solid rgb(255 255 255 / .35);border-radius:var(--cd-r-pill); color:var(--cd-white);text-decoration:none;font:700 .8125rem/1 var(--cd-font); background:transparent;transition:border-color .15s ease; } .site-header__pill:hover,.site-header__pill[aria-expanded="true"]{border-color:var(--cd-white)} .site-header__pill .nav-link__caret{opacity:.8} .site-header__bar{ position:relative;max-width:calc(var(--cd-container) + 2 * var(--cd-gutter));margin-inline:auto; padding:var(--cd-3) var(--cd-gutter);display:flex;align-items:center;gap:var(--cd-5); } .site-header__logo{display:flex;align-items:center;flex:none} .site-header__logo img{height:40px;width:auto;display:block} /* --- desktop nav -------------------------------------------------------------------------- * .site-header__nav's margin-inline:auto 0 (Task 4) pushes the nav, and everything after * it in source order (the CTA), flush right against the logo's leftover space -- logo * left, nav+CTA right, never centered. Left exactly as-is for owner feedback round 1: the * owner's mid-task correction was specifically to NOT center the menu like the reference * screenshots, i.e. to keep this existing rule. * ----------------------------------------------------------------------------------------- */ .site-header__nav{display:none;align-items:center;gap:var(--cd-5);margin-inline:auto 0} /* .nav-item wraps a narrow-dropdown trigger together with its own panel (unlike the wide Courses mega, rendered as a plain sibling .nav-link + a header-level panel, see .mega--wide below) so the panel's position:absolute anchors under just that trigger. */ .nav-item{position:relative;display:flex;align-items:center} .nav-link{ display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer; color:var(--cd-white);text-decoration:none;font:700 var(--cd-small)/1 var(--cd-font); padding-block:var(--cd-3); } .nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--cd-ink-accent-invert)} .nav-link--quiet{color:var(--cd-ink-invert-muted)} .nav-link--quiet:hover{color:var(--cd-ink-accent-invert)} .nav-link__caret{opacity:.6;transition:transform .2s ease} .nav-link[aria-expanded="true"] .nav-link__caret{transform:rotate(180deg)} .site-header__cta{display:none} /* --- burger (mobile) ---------------------------------------------------------------------- */ .site-header__burger{ position:relative;z-index:80;flex:none;width:40px;height:40px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; background:none;border:0;cursor:pointer;margin-inline-start:auto; } .site-header__burger span{ display:block;width:22px;height:2px;background:var(--cd-white); transition:transform .2s ease,opacity .2s ease; } .site-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .site-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .site-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (min-width:900px){ .site-header__utility{display:block} .site-header__nav{display:flex} .site-header__cta{display:inline-flex} .site-header__burger{display:none} } /* --- mega panels -------------------------------------------------------------------------- * .mega is the shared shell (surface, shadow, open/close transition); .mega--wide (Courses * only, a plain header-level sibling per header.php) spans the header's container width, * while .mega--narrow (The Olmos System/Faculty & About/Resources/the utility bar's "For * Patients" pill) is nested in a .nav-item and anchors under just its own trigger, * right-aligned so a trigger near the header's right edge never pushes its panel past the * viewport. * * Menu fix round (owner target docs/design-source/feedback-2026-09-25/13-courses-mega- * target.png, 7-9.png): every panel is a WHITE surface with rounded bottom corners and a * soft shadow, dropping from the dark bar; our Figtree type, our orange accent for * badges/buttons, our deep green only on the "Next course" card. * ----------------------------------------------------------------------------------------- */ /* z-index:5 (fix round 1, critical): neither .site-header__utility (the pill's ancestor) * nor .site-header__bar establishes its own stacking context (position:relative alone, * with no z-index, does not), so without an explicit z-index here the two sit in the * SAME stacking context as the header's other z-index:auto content and paint in plain DOM * order -- .site-header__bar comes AFTER .site-header__utility in header.php, so its CTA * button was painting (and hit-testing) ABOVE the utility pill's dropdown panel wherever * the open panel's height reached down into the main bar, making its rows unclickable. * A positive z-index here always wins against z-index:auto/0 siblings regardless of DOM * order, so every open panel -- narrow or wide, main bar or utility bar -- now paints * above the rest of the header. */ .mega{ position:absolute;top:100%;z-index:5; background:var(--cd-ground-raised);color:var(--cd-ink); border-radius:0 0 var(--cd-r-lg) var(--cd-r-lg); box-shadow:0 24px 48px rgb(15 46 42 / .18),0 2px 6px rgb(15 46 42 / .08); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s; } .mega[data-open]{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity .2s ease,transform .2s ease; } /* Below 900px the drawer replaces the mega panels; take them out of layout entirely, or their hidden (visibility only) height extends a short page's scroll area. */ @media (max-width:899px){.mega{display:none}} /* The wide panel lines up with the bar's container edges (never wider than the viewport minus a 16px gutter). */ .mega--wide{inset-inline:max(var(--cd-4),calc((100% - var(--cd-container)) / 2))} .mega--wide .mega__inner{padding:28px} .mega--narrow{ left:auto;right:0;border-radius:0 0 var(--cd-r-md) var(--cd-r-md); min-width:300px;max-width:min(360px,calc(100vw - var(--cd-5) * 2)); } .mega--narrow .mega__inner{padding:var(--cd-5) var(--cd-5) var(--cd-4)} .mega__empty{margin:0 0 var(--cd-3);color:var(--cd-ink-muted)} /* --- panel content (Courses grid + narrow-dropdown rows) ---------------------------------- * tmj_nav_panel_content() (inc/nav.php) builds the SAME markup for the desktop .mega * panels and the mobile drawer's accordion bodies; both are light surfaces now, and * header.php marks both bodies .nav-panel, so every rule below is scoped to .nav-panel * once instead of per context. The (0,2,0)+ selectors also outrank base.css's * ".on-dark a"/".on-dark p" (0,1,1), which still reach in from the dark
/drawer. * * The grid defaults to one stacked column (the drawer is always narrow) and only goes * multi-column at >=900px, the width .mega itself is visible at: 2 columns up to * 1199px, then the target's 4 (two wider course columns, Help me choose, the card). * ----------------------------------------------------------------------------------------- */ .mega__grid{display:grid;gap:var(--cd-5) 28px} @media (min-width:900px){.mega__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(240px,.85fr)}} @media (min-width:900px) and (max-width:1199px){.mega__grid{grid-template-columns:1fr 1fr}} .nav-panel .mega__col-label{ margin:0 0 var(--cd-2);font-size:.8125rem;line-height:1.3;font-weight:600; letter-spacing:0;text-transform:none;color:var(--cd-ink-brand); } .mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} /* One course row, the same element in every column (owner feedback 16-rows-inconsistent.png: no highlighted/indented variant): the whole row is the link. Negative inline margin so the hover tint extends past the text while the text stays on the column edge. */ .nav-panel .mega__course{ display:block;margin-inline:calc(var(--cd-3) * -1);padding:7px var(--cd-3); border-radius:var(--cd-r-md);text-decoration:none;transition:background-color .15s ease; } .nav-panel .mega__course:hover{background:var(--cd-ground-tint)} .nav-panel .mega__course-name{ display:block;font-size:1rem;line-height:1.3;font-weight:700; letter-spacing:-.01em;color:var(--cd-ink-strong); } .nav-panel .mega__course-date{display:block;margin-top:2px;font-size:.875rem;line-height:1.4;color:var(--cd-ink-muted)} /* One pill component; tones differ only by tint. */ .mega__badge{ display:inline-block;margin-inline-start:6px;padding:3px 10px;vertical-align:2px; border-radius:var(--cd-r-pill);font-size:.75rem;line-height:1.3;font-weight:600; letter-spacing:0;white-space:nowrap; } .mega__badge--muted{background:var(--cd-ground-tint);color:var(--cd-ink-brand)} .mega__badge--accent{background:color-mix(in srgb,var(--cd-accent) 16%,var(--cd-white));color:var(--cd-orange-700)} /* Help me choose: plain link rows between hairlines, then "See all courses ->". */ .mega__list--divided{gap:0} .mega__list--divided li + li{border-top:1px solid var(--cd-line)} .nav-panel .mega__link{ display:block;padding:10px 0;font-size:1rem;line-height:1.35;font-weight:500; color:var(--cd-ink-strong);text-decoration:none; } .nav-panel .mega__link:hover{color:var(--cd-ink-brand)} .nav-panel .mega__all{ display:inline-flex;align-items:center;gap:8px;margin-top:0;padding-top:var(--cd-3); border-top:1px solid var(--cd-line);width:100%; font-weight:700;font-size:1rem;color:var(--cd-ink-brand);text-decoration:none; } .nav-panel .mega__all:hover{color:var(--cd-ink-strong)} /* Narrow dropdowns: labelled groups of title + one-line description rows. */ .mega__group + .mega__group{margin-top:var(--cd-3);padding-top:var(--cd-4);border-top:1px solid var(--cd-line)} .nav-panel .mega__row{display:block;padding:7px 0;text-decoration:none} .nav-panel .mega__row-title{display:block;font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:-.01em;color:var(--cd-ink-strong);transition:color .15s ease} .nav-panel .mega__row:hover .mega__row-title{color:var(--cd-ink-brand)} .nav-panel .mega__row-desc{display:block;margin-top:2px;font-size:.875rem;line-height:1.4;color:var(--cd-ink-muted)} /* The "Next course" card: the one deep-green surface in the panel. align-self:start so it sizes to its own content rather than the tallest column (12-menu-wip.png check). */ .mega__col--feature{align-self:start} .mega__feature{ background:var(--cd-ground-deep);border-radius:var(--cd-r-lg); padding:var(--cd-5) var(--cd-5) var(--cd-5);display:flex;flex-direction:column; } .nav-panel .mega__feature-eyebrow{margin:0;font-size:.9375rem;font-weight:600;color:var(--cd-ink-accent-invert)} .nav-panel .mega__feature-name{margin:var(--cd-1) 0 var(--cd-3);font-size:1.625rem;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--cd-white)} .nav-panel .mega__feature-meta{margin:0;font-size:1rem;line-height:1.4;color:var(--cd-white);opacity:.9} .nav-panel .mega__feature-date{margin:2px 0 0;font-size:1.1875rem;line-height:1.35;font-weight:700;color:var(--cd-white)} .nav-panel .mega__feature-note{margin:var(--cd-3) 0 0;font-size:.9375rem;line-height:1.4;color:var(--cd-ink-invert-muted)} .mega__feature .btn{margin-top:var(--cd-5)} /* Keyboard focus on panel links (the kit ring, inside the rounded row). */ .nav-panel a:focus-visible{outline:none;box-shadow:var(--cd-ring)} /* --- mobile drawer ------------------------------------------------------------------------- * .accordion inside the drawer keeps its own light card surface (accordion.css's * --cd-ground-raised background) deliberately: a light expandable card reading against * the dark drawer, the same treatment .card gets on a .section--deep elsewhere in the kit, * so its text never needs its own on-dark handling. * ----------------------------------------------------------------------------------------- */ .drawer{ position:fixed;inset:0;z-index:70;overflow-y:auto; display:flex;flex-direction:column; background:var(--cd-ground-deeper); /* Closed: visibility:hidden (after the slide-out finishes) takes every drawer link out of the tab order and the accessibility tree; site.js toggles aria-hidden to match. */ transform:translateX(100%);visibility:hidden; transition:transform .3s cubic-bezier(.22,.61,.36,1),visibility 0s linear .3s; } .drawer[data-open]{ transform:translateX(0);visibility:visible; transition:transform .3s cubic-bezier(.22,.61,.36,1); } .drawer__header{display:flex;padding:var(--cd-4) var(--cd-6) var(--cd-2)} .drawer__logo img{height:32px;width:auto;display:block} .drawer__nav{padding:var(--cd-4) var(--cd-5) var(--cd-6)} .drawer__nav .accordion-group{gap:var(--cd-2)} .drawer__link{ display:block;padding:var(--cd-4) var(--cd-5);color:var(--cd-white); text-decoration:none;font-weight:700; } /* Utility-bar links (Contact, Login) carried into the drawer per owner feedback round 1, below the main nav accordions; "For Patients" is its own accordion in that same group, so only the two plain links need a row of their own here. */ .drawer__utility-links{display:flex;flex-wrap:wrap;gap:var(--cd-3) var(--cd-5);padding:var(--cd-4) var(--cd-5) 0} .drawer__utility-links a{color:var(--cd-ink-invert-muted);text-decoration:none;font-weight:700;font-size:var(--cd-small)} .drawer__utility-links a:hover{color:var(--cd-white)} .drawer__footer{ margin-top:auto;padding:var(--cd-5) var(--cd-6); border-top:1px solid rgb(255 255 255 / .12); display:flex;flex-direction:column;gap:var(--cd-3); } .drawer__call{ display:flex;align-items:center;justify-content:center;gap:6px; color:var(--cd-white);text-decoration:none;font-weight:700; } @media (min-width:900px){ .drawer{display:none} } @media (prefers-reduced-motion:reduce){ .mega,.mega[data-open],.drawer,.drawer[data-open]{transition:none} }