/* * CADchat — header / navigation styles * * Targets GeneratePress's existing primary nav markup (.main-navigation, * .menu-toggle, .main-nav) plus our additions: * - .sticky-banner sticky announcement banner above header * - .cc-has-mega top-level menu item that opens a mega-menu * - .cc-menu-item__title child menu item title (when description present) * - .cc-menu-item__desc child menu item description text * * Approach: we ADD to GeneratePress's existing styles. We don't replace its * nav structure — that would conflict with GP Premium's Off Canvas module * and the Different Menus in Different Pages plugin. */ /* === Sticky banner === */ .sticky-banner { position: relative; top: 0; z-index: var(--cc-z-banner); background: var(--cc-color-text-heading); color: var(--cc-color-text-on-dark); padding: var(--cc-space-3) 0; font-size: var(--cc-type-small); font-weight: var(--cc-fw-medium); transition: opacity var(--cc-duration-base) var(--cc-easing-standard), max-height var(--cc-duration-base) var(--cc-easing-standard); } .sticky-banner.is-hidden { opacity: 0; max-height: 0; overflow: hidden; } .sticky-banner__inner { display: flex; align-items: center; justify-content: center; gap: var(--cc-space-4); position: relative; } .sticky-banner__msg { margin: 0; flex: 1; text-align: center; } .sticky-banner__msg a { color: var(--cc-color-text-on-dark); text-decoration: underline; font-weight: var(--cc-fw-semibold); } .banner-close-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--cc-color-text-on-dark); font-size: 1.25rem; cursor: pointer; padding: var(--cc-space-2); line-height: 1; } .banner-close-btn:focus-visible { outline: 2px solid var(--cc-color-text-on-dark); outline-offset: 2px; } /* === Sticky site header === */ .site-header { position: sticky; top: 0; z-index: var(--cc-z-header); /* Per prototype landing-preview.html line ~478: header bg is #FAFAFA with subtle 1px bottom border. NOT pure white. */ background: #FAFAFA; border-bottom: 1px solid #E4E4E7; transition: box-shadow var(--cc-duration-fast) var(--cc-easing-standard); } /* * The WP admin bar is `position: fixed; top: 0; height: 32px` and overlaps * the sticky site-header by default. That leaves the top 32px of the header * hidden behind the admin bar AND creates a 32px gap between the visible * header bottom and any element below stuck at top:117 (e.g. cc-scrollspy). * Push the sticky header down 32px when the admin bar is present so it sits * cleanly below the bar and its bottom edge aligns with downstream sticky * elements that anchor at 117px. */ body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { /* WP admin bar is 46px tall on small screens. */ body.admin-bar .site-header { top: 46px; } } body.has-scrolled .site-header { box-shadow: var(--cc-shadow-sm); } /* When sticky banner is present, header sits below it */ .sticky-banner + .site-header { top: 0; } /* === Primary nav background === * * GeneratePress defaults `.main-navigation` (and the mobile-header copy of it) * to a white background. Inside our #FAFAFA header that renders as a visible * white BOX wrapping just the menu items. Force the nav itself to be * transparent so the parent .site-header / body bg shows through. The mega * sub-menu has its own background rule below, so it is unaffected. */ .main-navigation, #site-navigation, #mobile-header.main-navigation { background: transparent; } /* === Primary nav menu items === */ .main-navigation .menu > li > a { font-weight: var(--cc-fw-semibold); font-size: var(--cc-type-small); } /* Top-level nav hover — proto behavior is JUST opacity 0.75. No bg fill, * no color change. GP's default (grey-100 bg + blue-primary color) must be * defeated with !important on every property. Login pill (.cc-cta-button) * keeps its own hover styling — exclude from this rule. */ .main-navigation .menu > li:not(.cc-cta-button) > a:hover, .main-navigation .menu > li:not(.cc-cta-button) > a:focus, .main-navigation .menu > li:not(.cc-cta-button) > a:focus-visible { background: transparent !important; color: #52525B !important; /* proto: rgb(82,82,91) — same as default */ opacity: 0.75 !important; } /* === Plans & Pricing — DROPDOWN REMOVED per Graham 2026-05-04 === * Plans menu item should be a plain link to /pricing/ with NO dropdown. * Hide the GP-injected dropdown chevron span AND the sub-menu entirely. * v1.4.46: portable class `.cc-no-dropdown` (set per menu item in * Appearance → Menus → CSS Classes) replaces the DB-id selector — * menu-item-1862 only exists on Test; ids differ on Live. The id selector * stays as a legacy fallback until every language menu carries the class. */ .main-navigation .menu > li.cc-no-dropdown > a > .dropdown-menu-toggle, .main-navigation .menu > li.cc-no-dropdown > .sub-menu, .main-navigation .menu > li.menu-item-1862 > a > .dropdown-menu-toggle, .main-navigation .menu > li.menu-item-1862 > .sub-menu { display: none !important; } /* === Mega-menu (Use Cases / Features / Plans & Pricing dropdowns) === * * Proto canonical: landing-preview.html ".uc-dropdown" wrapper + inner card. * Card: 520×360, white bg, 16px radius, layered shadow (24px 60px soft drop + * 0 0 0 1px ring). 2-column grid 260px each. Per-cell 1px border-right and * border-bottom create grid lines. Right column has no border-right (no * double border at the edge). Last row items have no border-bottom (CTA row * draws its own border-top). CTA cell spans both columns. */ /* Card: WHITE bg + 16px rounded corners + layered shadow. Per-cell dividers * achieved via border-right + border-bottom on the LI (grid item), which * stretches to row height — borders draw at LI bounds = full row height. * (Earlier gap-reveals-bg approach made the rounded corners GREY since the * container bg showed through the rounded clip path.) * v1.4.46: the whole mega CARD is desktop-only. At ≤770px (GP's menu * breakpoint on this site — verified from its emitted inline CSS) the * sub-menu renders as plain accordion rows inside GP's drawer (see Mobile * drawer section below) — a 520px 2-col card can't fit a phone. */ @media (min-width: 771px) { .main-navigation .cc-has-mega > .sub-menu { display: grid; grid-template-columns: 260px 260px; gap: 0; width: 520px; min-width: 0; padding: 0; background: #FFFFFF; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px #E4E4E7; overflow: hidden !important; /* GP's main.min.css sets overflow:visible on :hover > ul */ left: auto; right: 0; } .main-navigation .cc-has-mega > .sub-menu > li { width: auto; background: #FFFFFF; margin: 0; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; } /* Right column: no border-right (clean right edge inside the rounded card) */ .main-navigation .cc-has-mega > .sub-menu > li:nth-child(2n) { border-right: 0; } .main-navigation .cc-has-mega > .sub-menu > li > a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; font-size: 13px; /* proto title */ font-weight: 700; /* proto title */ border-radius: 0; border: 0; height: 100%; /* fill grid cell height so hover bg covers full cell */ transition: background var(--cc-duration-fast) var(--cc-easing-standard); color: #0F0F0F; /* proto title color */ } /* Hover: PROTO has NO background fill change — only TEXT color changes. * Title hover → var(--cc-color-brand-primary) (purple). Description hover → var(--cc-color-brand-primary) (lighter purple). * Force background:transparent !important to defeat GP's grey-100 default. */ .main-navigation .cc-has-mega > .sub-menu > li > a:hover, .main-navigation .cc-has-mega > .sub-menu > li > a:focus-visible { background: transparent !important; color: #27272A !important; /* link's "color" doesn't visually matter, child spans set their own */ opacity: 1 !important; } .main-navigation .cc-has-mega > .sub-menu > li > a:hover .cc-menu-item__title, .main-navigation .cc-has-mega > .sub-menu > li > a:focus-visible .cc-menu-item__title { color: var(--cc-color-brand-primary) !important; } .main-navigation .cc-has-mega > .sub-menu > li > a:hover .cc-menu-item__desc, .main-navigation .cc-has-mega > .sub-menu > li > a:focus-visible .cc-menu-item__desc { color: var(--cc-color-brand-primary) !important; } /* Footer CTA cell: spans both columns, WHITE bg, no own borders. * The previous row's bottom border serves as the divider above the CTA. */ .main-navigation .cc-has-mega > .sub-menu > li.cc-menu-item--cta, .main-navigation .cc-has-mega > .sub-menu > li.cc-menu-cta, .main-navigation .cc-has-mega > .sub-menu > li:last-child { grid-column: 1 / -1; background: #FFFFFF; border-right: 0; border-bottom: 0; } /* Last grid row of REGULAR items (the row above the CTA): keep border-bottom * to act as the divider above the CTA footer row. */ .main-navigation .cc-has-mega > .sub-menu > li.cc-menu-item--cta > a, .main-navigation .cc-has-mega > .sub-menu > li:last-child > a { background: transparent; color: var(--cc-color-action); padding: 14px 20px; font-size: 12px; font-weight: 700; text-align: right; border: 0; border-radius: 0; text-decoration: none; height: auto; } .main-navigation .cc-has-mega > .sub-menu > li.cc-menu-item--cta > a:hover, .main-navigation .cc-has-mega > .sub-menu > li:last-child > a:hover { background: transparent !important; color: var(--cc-color-action-deep) !important; } /* Touch-open state (v1.4.46): on hover-less devices in the desktop layout * (iPads ≥771px), nav.js toggles `.is-open` on first tap. Mirror GP's * li:hover / li.sfHover reveal (left/opacity/pointer-events/height) so * the card actually shows. */ /* v1.4.55 (CC-02): :focus-within added — keyboard focus anywhere inside * the item reveals the panel purely in CSS, so tabbing works even before * nav.js runs. nav.js still drives .is-open + aria-expanded. */ .main-navigation .cc-has-mega.is-open > .sub-menu, .main-navigation .cc-has-mega:focus-within > .sub-menu { left: auto; right: 0; visibility: visible; opacity: 1; pointer-events: auto; height: auto; } } /* Proto exact: title 13px / 700 / #0F0F0F, lh 19.5px (1.5 ratio) */ .cc-menu-item__title { display: block; font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; line-height: 1.5 !important; } /* Proto exact: description 11px / 500 / #71717A, lh 15.4px (1.4 ratio) */ .cc-menu-item__desc { display: block; font-size: 11px !important; font-weight: 500 !important; color: #71717A !important; line-height: 1.4 !important; } /* === Mobile drawer (GP toggled nav) — v1.4.46 === * * Below 769px GeneratePress shows the .menu-toggle hamburger and stacks the * menu as an in-flow drawer (nav gains `.toggled` when open). GP's own * .dropdown-menu-toggle caret accordions sub-menus — our nav.js stays out of * the way below 769px. Here we only brand GP's drawer: solid background, * full-width rows with ≥44px tap targets, flat accordion sub-menus, and the * Login item as a prominent full-width action row. */ @media (max-width: 770px) { /* Hamburger — comfortable tap size (GP default padding is restored now * that the desktop shrink rules are scoped away; reinforce ≥44px). */ .main-navigation .menu-toggle { padding: 12px 16px; font-size: 16px; line-height: 1.5; } /* Open drawer needs a solid surface (nav bg is forced transparent for * the desktop bar above; page content would ghost through the rows). */ .main-navigation .main-nav > ul { background: #FAFAFA; border-top: 1px solid #E4E4E7; } /* Drawer rows — full width, ≥44px tap height */ .main-navigation .main-nav ul li a { padding: 12px 20px; font-size: 16px; line-height: 1.5; font-weight: var(--cc-fw-medium); } /* GP caret that accordions sub-menus — widen its square hit area */ .main-navigation .dropdown-menu-toggle { padding-left: 16px; padding-right: 16px; } /* Sub-menu accordion panel — flat indented list on a light surface * (replaces the desktop 520px 2-col mega card, which is scoped ≥769px) */ .main-navigation ul ul { background: #F4F4F6; } .main-navigation ul ul li a { padding: 10px 20px 10px 32px; } /* Menu-item title/desc inside the accordion: readable, secondary */ .main-navigation ul ul .cc-menu-item__title { font-size: 15px !important; } .main-navigation ul ul .cc-menu-item__desc { font-size: 13px !important; } /* Login — prominent full-width action row (desktop pill is scoped below). * Specificity note: the li.cc-cta-button bump (0,5,1) is required to beat * patterns-extra.css's `.main-nav ul li > a:hover { background: * transparent !important }` flush rule (0,4,1, later in cascade). */ .main-navigation .main-nav ul li.cc-cta-button, .main-navigation .main-nav ul li.menu-item-cta { padding: 8px 20px 16px; } .main-navigation .main-nav ul li.cc-cta-button > a, .main-navigation .main-nav ul li.menu-item-cta > a { display: block; background: var(--cc-color-action) !important; color: var(--cc-color-text-on-dark, #FFFFFF) !important; text-align: center; border-radius: 8px; padding: 12px 20px; font-size: 16px; font-weight: var(--cc-fw-semibold); } .main-navigation .main-nav ul li.cc-cta-button > a:hover, .main-navigation .main-nav ul li.cc-cta-button > a:focus, .main-navigation .main-nav ul li.menu-item-cta > a:hover, .main-navigation .main-nav ul li.menu-item-cta > a:focus { background: var(--cc-color-action-deep) !important; color: var(--cc-color-text-on-dark, #FFFFFF) !important; opacity: 1 !important; } } /* === Login button styling === * * Per prototype (landing-preview.html line ~518): * background: var(--cc-color-action) (action blue, NOT brand purple) * border-radius: 8px (rounded rectangle, NOT pill) * padding: 10px 22px * font-size: 14px / weight 600 * * Use higher specificity to override GeneratePress's default `
  • ` block layout * which can stretch the link to fit the column. Force inline-block + content-fit * sizing so the pill hugs the "Login" text. */ /* v1.4.46: desktop-only — inline-flex fought GP's stacked drawer; the mobile * Login treatment lives in the Mobile drawer section above. * v1.4.61 (Jesse, 2026-09-04): DESKTOP Login is demoted to a plain text link — * the primary header action is now the theme-rendered "Get Started Free" * button (.cc-header-cta, template-parts/header/nav-cta.php). The mobile * drawer keeps its prominent full-width Login row (above). */ @media (min-width: 771px) { .main-navigation .menu > li.cc-cta-button, .main-navigation .menu > li.menu-item-cta { display: inline-flex; align-items: center; width: auto; } .main-navigation .menu > li.cc-cta-button > a, .main-navigation .menu > li.menu-item-cta > a { display: inline-block; width: auto; background: transparent !important; color: #52525B !important; padding: 10px 8px !important; border-radius: 0; font-size: var(--cc-type-small); font-weight: var(--cc-fw-semibold); line-height: 1.5; } .main-navigation .menu > li.cc-cta-button > a:hover, .main-navigation .menu > li.cc-cta-button > a:focus, .main-navigation .menu > li.menu-item-cta > a:hover, .main-navigation .menu > li.menu-item-cta > a:focus { background: transparent !important; color: #52525B !important; opacity: 0.75 !important; } } /* === Header "Get Started Free" CTA (v1.4.61, Jesse) === * Rendered into GP's menu-bar-items slot BEFORE the language switcher * (template-parts/header/nav-cta.php, hook priority 9). * Width ladder (measured against the live header, 2026-09-09): * ≥1200 full button, one-row header * 1100–1199 compact paddings keep the row intact * 771–1099 BUTTON HIDDEN — the row physically can't fit it (Login * orphans onto a second line at 1024); hero CTAs carry it * ≤770 hidden — mobile drawer + hero own the actions (v1.4.58 fit) */ .cc-header-cta { display: none; } @media (min-width: 1100px) { .main-navigation:not(.mobile-menu-control-wrapper) .cc-header-cta { display: inline-block; margin-left: 18px; background: var(--cc-color-action); color: var(--cc-color-text-on-dark, #FFFFFF); padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: var(--cc-fw-semibold); line-height: 1.2; white-space: nowrap; } .main-navigation:not(.mobile-menu-control-wrapper) .cc-header-cta:hover, .main-navigation:not(.mobile-menu-control-wrapper) .cc-header-cta:focus { color: var(--cc-color-text-on-dark, #FFFFFF); opacity: 1; } .cc-header-cta:focus-visible { outline: 2px solid var(--cc-color-brand-primary); outline-offset: 2px; } } /* Compact belt for 1100–1199 so the extra button never wraps the row. */ @media (min-width: 1100px) and (max-width: 1199px) { .main-navigation .main-nav ul li > a { padding-left: 9px !important; padding-right: 9px !important; } .main-navigation:not(.mobile-menu-control-wrapper) .cc-header-cta { padding: 10px 14px; margin-left: 8px; } .cc-header-lang__trigger { padding: 8px 6px !important; } } /* === Header language switcher (v1.4.55, CC-11 — Thomas/accessibility) === * Rendered into GP's menu-bar-items slot (beside the menu toggle → visible * on mobile, outside the collapse). Trigger = real button with * aria-expanded; nav.js drives .is-open, Escape, arrow keys. */ .cc-header-lang { position: relative; display: inline-flex; align-items: center; margin-left: var(--cc-space-2); } .cc-header-lang__trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 10px; background: none; border: 0; border-radius: var(--cc-radius-md); cursor: pointer; font-family: var(--cc-font-body); font-size: 13px; font-weight: var(--cc-fw-semibold); letter-spacing: 0.02em; color: var(--cc-color-text-muted); transition: color var(--cc-duration-fast) var(--cc-easing-standard); } .cc-header-lang__trigger:hover, .cc-header-lang__trigger:focus-visible { color: var(--cc-color-text-heading); background: none; } .cc-header-lang__trigger:focus-visible { outline: 2px solid var(--cc-color-brand-primary); outline-offset: 2px; } .cc-header-lang__chevron { transition: transform var(--cc-duration-fast) var(--cc-easing-standard); } .cc-header-lang.is-open .cc-header-lang__chevron { transform: rotate(180deg); } .cc-header-lang__list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; background: var(--cc-color-bg-section); border: 1px solid var(--cc-color-border-subtle); border-radius: 12px; box-shadow: var(--cc-shadow-md); list-style: none; margin: 0; padding: 6px; z-index: var(--cc-z-drawer); display: none; } .cc-header-lang.is-open .cc-header-lang__list { display: block; } /* No-JS fallback only — with JS active this would fight the click toggle. */ .no-js .cc-header-lang:focus-within .cc-header-lang__list { display: block; } .cc-header-lang__list a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: var(--cc-fw-medium); color: var(--cc-color-text-primary); text-decoration: none; } .cc-header-lang__list a:hover, .cc-header-lang__list a:focus-visible { background: var(--cc-color-brand-primary-fade); color: var(--cc-color-text-heading); opacity: 1; } .cc-header-lang__list a.is-current { color: var(--cc-color-action); font-weight: var(--cc-fw-bold); } /* v1.4.56: the switcher initially wrapped the desktop nav onto a second row * — .inside-navigation is flex/wrap and the menu UL is a full-width block. * At desktop, forbid the wrap and let the menu flex-shrink so the switcher * sits inline at the far right (right of the Login pill, per CC-11). */ @media (min-width: 771px) { .main-navigation .inside-navigation { flex-wrap: nowrap; } .main-navigation .main-nav { flex: 1 1 auto; min-width: 0; /* v1.4.66: .main-nav is 56px tall (patterns-extra min-height) but was a * plain block, so the menu