@media (min-width: 1200px) { :root{ --fcc-gold:#a8863a; --fcc-ink:#1f1e1b; --fcc-gray:#8b8880; --fcc-line:#e6e3dc; --fcc-card:#f6f2e9; } ul.main-menu > li.has-mega{position:static;} ul.main-menu li.has-mega .b-dropper{transform:none !important;position:absolute;left:0;right:0;top:100%;z-index:9999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;} ul.main-menu li.has-mega:hover .b-dropper,ul.main-menu li.has-mega:focus-within .b-dropper{transform:none !important;opacity:1;visibility:visible;pointer-events:auto;} ul.main-menu li.has-mega .inset{width:100%;left:0;right:0;background:#fff !important;border-top:1px solid var(--fcc-line);box-shadow:0 24px 48px rgba(0,0,0,.14);} ul.main-menu li.fx-w-full .inset{width:100%;left:0;right:0;} ul.main-menu li.fx-w-mid .inset{width:720px;left:auto;right:0;} ul.main-menu li.fx-w-compact .inset{width:500px;left:auto;right:0;} ul.main-menu li.has-mega .inset,ul.main-menu li.has-mega .inset *{text-align:left !important;color:var(--fcc-ink);} ul.main-menu li.has-mega .inset .fx-in{max-width:1200px;margin:0 auto;padding:32px 40px 24px;} ul.main-menu li.has-mega .inset .fx-cols{display:grid;gap:0;} ul.main-menu li.has-mega .inset .fx-cols[data-cols="2"]{grid-template-columns:repeat(2,1fr);} ul.main-menu li.has-mega .inset .fx-cols[data-cols="3"]{grid-template-columns:repeat(3,1fr);} ul.main-menu li.has-mega .inset .fx-cols[data-cols="4"]{grid-template-columns:repeat(4,1fr);} ul.main-menu li.has-mega .inset .fx-col{padding:0 28px;border-left:1px solid var(--fcc-line);} ul.main-menu li.has-mega .inset .fx-cols > .fx-col:first-child{border-left:0;padding-left:0;} ul.main-menu li.has-mega .inset .fx-t{display:block;font-size:11px !important;line-height:1.3;font-weight:700;text-transform:uppercase !important;letter-spacing:.08em;color:var(--fcc-ink) !important;margin:0 0 2px;text-decoration:none;} ul.main-menu li.has-mega .inset a.fx-t,ul.main-menu li.has-mega .inset div.fx-t{color:var(--fcc-gold) !important;} ul.main-menu li.has-mega .inset a.fx-t::after{content:" \2192";color:var(--fcc-gold);font-weight:400;} ul.main-menu li.has-mega .inset a.fx-t:hover{text-decoration:underline;} ul.main-menu li.has-mega .inset .fx-s{display:block;font-size:12px;color:var(--fcc-gray);margin:0 0 14px;} ul.main-menu li.has-mega .inset a.fx-txt{display:block;font-size:14px;line-height:1.5;color:var(--fcc-ink) !important;text-decoration:none;padding:4px 0;} ul.main-menu li.has-mega .inset a.fx-txt:hover{color:var(--fcc-gold) !important;} ul.main-menu li.has-mega .inset a.fx-car{display:flex;gap:12px;align-items:center;padding:8px 0;text-decoration:none;color:var(--fcc-ink) !important;} ul.main-menu li.has-mega .inset a.fx-car:hover b{color:var(--fcc-gold) !important;} ul.main-menu li.has-mega .inset .fx-car img{filter:none !important;opacity:1 !important;width:88px;height:56px;border-radius:6px;object-fit:cover;flex:0 0 auto;} ul.main-menu li.has-mega .inset .fx-car b{display:block;font-size:14px;font-weight:600;} ul.main-menu li.has-mega .inset .fx-car i{display:block;font-size:12px;color:var(--fcc-gray);font-style:normal;} ul.main-menu li.has-mega .inset .fx-txt b{display:block;font-size:14px;font-weight:600;color:var(--fcc-ink);} ul.main-menu li.has-mega .inset .fx-txt i{display:block;font-size:12.5px;color:var(--fcc-gray);font-style:normal;margin-top:3px;} ul.main-menu li.has-mega .inset .fx-car em{display:block;font-size:12px;color:var(--fcc-gold);font-style:normal;font-weight:600;} ul.main-menu li.has-mega .inset .fx-card{background:var(--fcc-card) !important;border:1px solid var(--fcc-line);border-radius:8px;padding:16px;margin:4px 0 14px;font-size:13px;line-height:1.5;color:var(--fcc-ink);} ul.main-menu li.has-mega .inset .fx-card b,ul.main-menu li.has-mega .inset .fx-card strong{font-size:22px;color:var(--fcc-gold);display:block;margin-bottom:6px;} ul.main-menu li.has-mega .inset .fx-btn{display:block;text-align:center !important;border:1px solid var(--fcc-gold) !important;color:var(--fcc-gold) !important;text-transform:uppercase !important;letter-spacing:.1em;font-size:12px;font-weight:700;padding:12px 16px;border-radius:6px;text-decoration:none;background:#fff !important;transition:all .15s ease;} ul.main-menu li.has-mega .inset .fx-btn:hover{background:var(--fcc-gold) !important;color:#fff !important;} ul.main-menu li.has-mega .inset .fx-f{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:16px 40px 0;border-top:1px solid var(--fcc-line);max-width:1200px;margin-left:auto;margin-right:auto;} ul.main-menu li.has-mega .inset .fx-tr{display:flex;gap:28px;flex-wrap:wrap;} ul.main-menu li.has-mega .inset .fx-tr span{font-size:13px;color:var(--fcc-gray);} ul.main-menu li.has-mega .inset .fx-tr span::before{content:"\2713";color:var(--fcc-gold);font-weight:700;margin-right:6px;} ul.main-menu li.has-mega .inset a.fx-all{font-size:14px;font-weight:600;color:var(--fcc-gold) !important;text-decoration:none;white-space:nowrap;} ul.main-menu li.has-mega .inset a.fx-all::after{content:" \2192";} ul.main-menu li.has-mega .inset a.fx-all:hover{text-decoration:underline;} ul.main-menu li.has-mega .inset .fx-brands{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:14px 40px 0;max-width:1200px;margin:0 auto;} ul.main-menu li.has-mega .inset .fx-brands .bl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fcc-gray);margin-right:8px;} ul.main-menu li.has-mega .inset .fx-brands a.fx-brand{font-size:14px;color:var(--fcc-ink) !important;text-decoration:none;font-weight:600;} ul.main-menu li.has-mega .inset .fx-brands a.fx-brand:hover{color:var(--fcc-gold) !important;} ul.main-menu li.has-mega .inset .fx-brands .sep{color:var(--fcc-line);margin:0 6px;} /* HOME OVERLAY OVERRIDES */ html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset{background:#fff !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-card{background:var(--fcc-card) !important;border:1px solid var(--fcc-line) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-col{border-left:1px solid var(--fcc-line) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-cols > .fx-col:first-child{border-left:0 !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-t{color:var(--fcc-gold) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset div.fx-t{color:var(--fcc-gold) !important;}html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-s{color:var(--fcc-gray) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-txt{color:var(--fcc-ink) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-txt b{display:block !important;color:var(--fcc-ink) !important;font-weight:600 !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-txt i{display:block !important;color:var(--fcc-gray) !important;font-style:normal !important;font-size:12.5px !important;margin-top:3px !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-car i{display:block !important;color:var(--fcc-gray) !important;font-style:normal !important;font-size:12px !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-txt:hover{color:var(--fcc-gold) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-card b,html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-card strong{color:var(--fcc-gold) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-btn{color:var(--fcc-gold) !important;background:#fff !important;border:1px solid var(--fcc-gold) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-btn:hover{color:#fff !important;background:var(--fcc-gold) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-all{color:var(--fcc-gold) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset .fx-tr span{color:var(--fcc-gray) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-brand{color:var(--fcc-ink) !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .inset a.fx-car{color:var(--fcc-ink) !important;} /* FULL-WIDTH DROPPER FIX - beat theme .b-dropper{width:20px} */ ul.main-menu li.has-mega .b-dropper{width:auto !important;left:0 !important;right:0 !important;} /* === MEGAMENU ADDITIONS: rating cards (About us) + contact rows (Contact us) === */ ul.main-menu li.has-mega .inset .fx-rating{display:block;background:#faf7f1;border-radius:6px;padding:12px 14px;margin-bottom:8px;text-decoration:none;border:1px solid transparent;} ul.main-menu li.has-mega .inset .fx-rating:hover{border-color:#e2d9c4;background:#f7f3ea;} ul.main-menu li.has-mega .inset .fx-rating .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} ul.main-menu li.has-mega .inset .fx-rating .src{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#46443f;} ul.main-menu li.has-mega .inset .fx-rating .src img{width:15px;height:15px;flex:0 0 15px;filter:none;opacity:1;} ul.main-menu li.has-mega .inset .fx-rating .sc{font-size:17px;color:#1f1e1b;line-height:1;} ul.main-menu li.has-mega .inset .fx-rating .stars{display:block;font-size:13px;letter-spacing:1px;color:#a8863a;} ul.main-menu li.has-mega .inset .fx-rating .cnt{display:block;font-size:11px;color:#8b8880;margin-top:4px;} ul.main-menu li.has-mega .inset .fx-reg{font-size:10.5px;color:#a3a099;line-height:1.5;margin-top:8px;} ul.main-menu li.has-mega .inset .fx-contact{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 8px;margin:0 -8px 1px;border-radius:3px;text-decoration:none;} ul.main-menu li.has-mega .inset .fx-contact:hover{background:#faf9f6;} ul.main-menu li.has-mega .inset .fx-contact .lb{font-size:11px;color:#8b8880;text-transform:none;} ul.main-menu li.has-mega .inset .fx-contact .vl{font-size:13px;color:#1f1e1b;white-space:nowrap;font-style:normal;text-decoration:none;} ul.main-menu li.has-mega .inset .fx-contact:hover .vl{color:#a8863a;} ul.main-menu li.has-mega .inset .fx-addr,ul.main-menu li.has-mega .inset .fx-why{font-size:12px;color:#46443f;line-height:1.6;} /* FX-CARET - dropdown indicator for main-menu + top-bar items (independent of theme .b-dropper) */ ul.main-menu li.has-mega > .__link .fx-caret,ul.main-menu li.has-mega > a .fx-caret{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle;pointer-events:none;opacity:.85;} ul.main-menu li.has-mega .fx-caret svg{display:block;width:10px;height:10px;transition:transform .18s ease;} ul.main-menu li.has-mega:hover .fx-caret svg,ul.main-menu li.has-mega:focus-within .fx-caret svg{transform:rotate(180deg);} /* KEYBOARD ACCESS: open panel on focus-within, not only hover (§2 spec) */ ul.main-menu li.has-mega:hover > .inset,ul.main-menu li.has-mega:focus-within > .inset{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;} html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega:hover > .inset,html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega:focus-within > .inset{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;} /* FIX1: opaque panel bg (base, not only home overlay) */ ul.main-menu li.has-mega > .inset,ul.main-menu li.has-mega .fx-in{background:#fff !important;} /* FIX2: hover bridge over 39px gap for top-bar panels + close delay */ /* FIX2 bridge removed (v32): full-width .inset::before caught cursor across whole panel; padding-bottom:8px on __link already overlaps panel by 6px */ ul.main-menu li.has-mega > .inset{transition:opacity .18s ease .15s,visibility 0s linear .33s;} ul.main-menu li.has-mega:hover > .inset,ul.main-menu li.has-mega:focus-within > .inset{transition-delay:0s;} /* FIX3: buttons on one line */ ul.main-menu li.has-mega .inset .fx-btn{display:block;width:100%;white-space:nowrap;padding:13px 20px;font-size:11px;letter-spacing:.1em;} /* FIX8b: beat fcc-hero home override that kills border+shadow */ html body.fc-is-home header.s-header ul.main-menu li.has-mega > .inset,html body header.s-header ul.main-menu li.has-mega > .inset{border:1px solid #e2ddd2 !important;box-shadow:0 18px 44px rgba(0,0,0,.18) !important;} /* FIX9b: phone up to menu axis (center 32) */ .col-header-phone .desktop-header-phone{margin-top:-13px !important;} /* FIX4: top-bar phone icon + number on one line */ .desktop-header-phone .header-phone-item{display:flex;align-items:center;gap:10px;line-height:1;} /* FIX5: align panel footer checkmarks with columns */ ul.main-menu li.has-mega .inset .fx-f{padding-left:0;padding-right:0;} /* FIX1b: beat hero overlay ':not(.fcc-solid) div' transparency on .fx-in */ html body.fc-is-home header.s-header.fcc-overlay ul.main-menu li.has-mega .fx-in,html body header.s-header ul.main-menu li.has-mega .fx-in{background:#fff !important;} /* FIX6: breathing room above CTA buttons, matched to column rhythm */ .col-header-nav ul.main-menu li.has-mega .inset .fx-btn{margin-top:20px;} .col-header-nav-top ul.main-menu li.has-mega .inset .fx-btn{margin-top:24px;} /* FIX7: top-bar panels open right under the bar (close 39/95px gap) */ .col-header-nav-top ul.main-menu > li.has-mega > .inset{top:41px !important;} /* FIX8: panel reads as a separate layer on light+dark header */ ul.main-menu li.has-mega > .inset{border:1px solid #e2ddd2 !important;box-shadow:0 18px 44px rgba(0,0,0,.18) !important;} /* FIX9: top-bar phone on same axis as menu items (menu center 32, phone was 41) */ .col-header-phone .desktop-header-phone{margin-top:-13px !important;} /* FIX10: brand logos in rating cards */ ul.main-menu li.has-mega .inset .fx-rating .src{display:inline-flex;align-items:center;gap:5px;} ul.main-menu li.has-mega .inset .fx-rating .src img{width:16px;height:16px;display:inline-block;flex:0 0 auto;} /* FIX11: brand-accurate stars */ ul.main-menu li.has-mega .inset .fx-rating[data-provider="google"] .stars{color:#FBBC04;} ul.main-menu li.has-mega .inset .fx-rating[data-provider="trustpilot"] .stars{color:transparent;font-size:0;display:inline-flex;gap:2px;} ul.main-menu li.has-mega .inset .fx-rating[data-provider="trustpilot"] .stars i{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;background:#00B67A;color:#fff;font-size:10px;font-style:normal;border-radius:1px;} /* FIX12: hover highlight in all panels */ ul.main-menu li.has-mega .inset a.fx-txt,ul.main-menu li.has-mega .inset a.fx-car{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;} ul.main-menu li.has-mega .inset a.fx-txt:hover,ul.main-menu li.has-mega .inset a.fx-car:hover{background:#faf9f6 !important;border-radius:3px;} ul.main-menu li.has-mega .inset .fx-rating:hover{background:#f2ece0 !important;border-color:#e2d9c4 !important;} /* FIX13: header phone plain link */ .col-header-phone .header-phone-link{font-size:15px;color:inherit;text-decoration:none;white-space:nowrap;letter-spacing:.01em;} .col-header-phone .header-phone-link:hover{color:#a8863a;} /* FIX11b: google stars color on the elements too */ ul.main-menu li.has-mega .inset .fx-rating[data-provider="google"] .stars i{color:#FBBC04 !important;font-style:normal;} /* FIX14: symmetric full-width panel (variant 2, no transform) */ ul.main-menu li.has-mega.fx-w-full > .inset{left:10px !important;right:10px !important;width:auto !important;transform:none !important;margin-left:0 !important;} /* FIX15: Events date wrapping safety (b/i onto own line) */ ul.main-menu li.has-mega .inset a.fx-car > b,ul.main-menu li.has-mega .inset a.fx-car > i{flex:1 1 100% !important;min-width:0 !important;} /* FIX16: white basket on transparent home overlay header */ html body.fc-is-home header.s-header.fcc-overlay:not(.fcc-solid) .fcc-bag-li a,html body.fc-is-home header.s-header.fcc-overlay:not(.fcc-solid) .fcc-bag-li svg{color:#fff !important;} html body.fc-is-home header.s-header.fcc-overlay:not(.fcc-solid) .fcc-bag-li svg path,html body.fc-is-home header.s-header.fcc-overlay:not(.fcc-solid) .fcc-bag-li svg circle,html body.fc-is-home header.s-header.fcc-overlay:not(.fcc-solid) .fcc-bag-li svg line{stroke:#fff !important;} /* FIX16b: basket icon white on home overlay (beats inline !important via filter) */ html body.fc-is-home header.s-header.fcc-overlay:not(.fcc-solid) .fcc-bag-li{filter:brightness(0) invert(1) !important;} /* FIX17: extend Concierge/Corporate hover zone downward (bridges gap to panel) */ .col-header-nav-top ul.main-menu > li.has-mega > a.__link{padding-bottom:8px;margin-bottom:-8px;} /* FIX18: space out top-bar items */ .col-header-nav-top ul.main-menu > li{margin-right:22px;} .col-header-nav-top ul.main-menu > li:last-child{margin-right:0;} /* FIX19: symmetric full-width panel in BOTH header states. Panel anchors to .navigation-menu-body (offset 10px left / 25px right from viewport due to theme padding on .col-header-nav); compensating left/right yields equal 20px viewport gaps. Overrides FIX14. */ .col-header-nav ul.main-menu li.has-mega.fx-w-full > .inset{left:10px !important;right:-5px !important;width:auto !important;margin-left:0 !important;transform:none !important;} /* FIX20: fill full-width panel content edge-to-edge (was max-width:1200px centered => 55px side margins => border drew outside content) */ ul.main-menu li.has-mega .inset .fx-in{max-width:none !important;margin-left:0 !important;margin-right:0 !important;width:100% !important;} /* FIX21: raise open top-bar panel above neighbours' extended hover zones (Concierge/Corporate overlap in y43-61 band) */ .col-header-nav-top ul.main-menu > li.has-mega > a.__link{position:relative;z-index:1;} .col-header-nav-top ul.main-menu > li.has-mega > .inset{z-index:60;} /* FIX22: pull basket in toward top-bar group (companion to FIX18 22px) */ .col-header-nav-top ul.main-menu > li.fcc-bag-li{margin-left:4px;} /* FIX23: push second nav row down from logo (rows are flex siblings; padding-bottom on row1 doesn't move row2, margin-top does) */ div.col-header-nav{margin-top:10px;} /* FIX24: vertically center second-row link text (theme sets display:block; band is 37px, text was 18px pinned to top) */ div.col-header-nav ul.main-menu > li > a.__link{display:flex !important;align-items:center;height:37px;padding-top:0 !important;padding-bottom:0 !important;line-height:1;} /* FIX25: unify top-bar vertical alignment via flex; removes phone -13px hack (v34) */ div.col-header-nav-top { display: flex !important; align-items: center !important; } div.col-header-nav-top ul.main-menu { display: flex !important; align-items: center !important; margin: 0 !important; } div.col-header-nav-top ul.main-menu > li, div.col-header-nav-top .fcc-bag-li { display: flex !important; align-items: center !important; } .col-header-phone .desktop-header-phone { margin-top: 0 !important; display: flex !important; align-items: center !important; } /* FIX26: push top-bar group to the right (flex left-align broke horizontal layout in v34) */ div.col-header-nav-top { justify-content: flex-end !important; } /* FIX27: top-bar panel drop to bottom of item (was top:41px from pre-FIX25 height). 58px = top-bar item height after flex centering; keeps panels anchored to column so Concierge stays full-width & Corporate stays right. */ .col-header-nav-top ul.main-menu > li.has-mega > .inset { top: 58px !important; } /* FIX29: превью в панели UK Tours. 72x46, а не 88x56 как у машин: при 88x56 панель вырастает до 592px при доступных 616px — на ноутбуке с панелью закладок низ подрежется. При 72x46 панель 508px. */ ul.main-menu li.has-mega.fcc-tours .fx-in a.fx-car img { width: 72px !important; height: 46px !important; min-width: 72px !important; object-fit: cover !important; filter: none !important; border-radius: 6px !important; } ul.main-menu li.has-mega.fcc-tours .fx-in a.fx-car { padding-top: 6px !important; padding-bottom: 6px !important; } } /* FIX28: /quote page — content wrapper has z-index:3000 and covers the menu (hover dead). Workaround: raise our header above it, but below flatpickr calendar (9999999) and address autocomplete. Intentionally OUTSIDE the min-width:1200px media query — also needed on mobile (burger lives in same header). NOT a root fix: root cause (z-index:3000 on /quote content wrapper) belongs in the page template. */ header.s-header { z-index: 3100 !important; } /* ============================================================================ TOP-BAR PANELS — HOVER STABILITY (Claude, owner report 2026-08-07) Symptom: with CONCIERGE / CORPORATE ACCOUNT open, the smallest mouse move made the panel appear to drift or the text to shift; no other menu did it. Measured cause (not guessed): the top-bar
  • is only as tall as its text — there is a 32px dead strip ABOVE it (header padding) and a 10px gap BETWEEN the item and the panel. Crossing either leaves :hover, so the panel starts its close (opacity 1 -> 0 with a .15s delay + .18s fade) and re-opens when the pointer lands again — read as movement. Fix: two invisible bridges INSIDE the li, covering the strip above and the gap below. They never overlap the link itself, so clicks are untouched, and they add no layout (absolute, no background). Scope: top bar only — the lower menu row has no gap and behaves correctly. ========================================================================== */ .col-header-nav-top ul.main-menu > li.has-mega{position:relative;} .col-header-nav-top ul.main-menu > li.has-mega::before{ content:"";position:absolute;left:0;right:0;bottom:100%;height:40px;background:transparent; } .col-header-nav-top ul.main-menu > li.has-mega::after{ content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:transparent; } /* --------------------------------------------------------------------------- HOVER STABILITY v2 (Claude 2026-08-07) — REPLACES the v1 block above. v1 put position:relative on the
  • , which made the li the containing block for the absolutely-positioned .inset: the full-width CONCIERGE panel then inherited the li's width and rendered as a narrow squeezed column (the owner caught it immediately). The bridges now hang off the LINK instead — the panel is the link's SIBLING, so the panel's positioning context is untouched. Also: the panel sat 10px below the item, and that dead gap made it close before the pointer arrived; it now opens 2px under the words. --------------------------------------------------------------------------- */ .col-header-nav-top ul.main-menu > li.has-mega{position:static;} .col-header-nav-top ul.main-menu > li.has-mega::before, .col-header-nav-top ul.main-menu > li.has-mega::after{content:none;} .col-header-nav-top ul.main-menu > li.has-mega > .__link{position:relative;} .col-header-nav-top ul.main-menu > li.has-mega > .__link::before{ content:"";position:absolute;left:0;right:0;bottom:100%;height:40px;background:transparent; } .col-header-nav-top ul.main-menu > li.has-mega > .__link::after{ content:"";position:absolute;left:-14px;right:-14px;top:100%;height:18px;background:transparent; } .col-header-nav-top ul.main-menu > li.has-mega > .inset{top:50px !important;} /* --------------------------------------------------------------------------- HOVER STABILITY v3 (Claude 2026-08-09) - the LEFT/RIGHT residue. v2 closed the strip ABOVE and the gap BELOW the words, so up/down went quiet. What stayed: `.col-header-nav-top ul.main-menu > li{margin-right:22px}` - a 22px strip between CONCIERGE and CORPORATE ACCOUNT that belongs to NO
  • . Crossing it sideways drops :hover, the panel begins its .15s grace + .18s fade, and landing on the next item restarts it - read as a small shake. Fix, layout-neutral and click-safe: (1) the upper bridge now also spans the link's OWN height and reaches 11px into the gap on each side. 11px is exactly half of 22px, so the bridges of two neighbours MEET in the middle of the gap and never cover the neighbouring link - no click can be stolen. Nothing is added to layout (absolute, transparent, no size of its own). (2) the lower bridge matches at 11px (was 14px, which reached 3px past the midpoint into the neighbour's side). (3) the close grace goes .15s -> .28s, so even a slow hand crossing the gap lands before a fade can start. Opening stays instant (delay 0 on hover). --------------------------------------------------------------------------- */ .col-header-nav-top ul.main-menu > li.has-mega > .__link::before{ left:-11px;right:-11px;top:-40px;bottom:0;height:auto; } .col-header-nav-top ul.main-menu > li.has-mega > .__link::after{ left:-11px;right:-11px; } .col-header-nav-top ul.main-menu > li.has-mega > .inset{ transition:opacity .18s ease .28s,visibility 0s linear .46s; } .col-header-nav-top ul.main-menu > li.has-mega:hover > .inset, .col-header-nav-top ul.main-menu > li.has-mega:focus-within > .inset{transition-delay:0s;} /* --------------------------------------------------------------------------- PANEL GEOMETRY LOCK v4 (Claude 2026-08-09) - owner: "moving the mouse toward the END of the submenu makes it grow ~1mm at the FLOOR and the font slide down ~1mm; the top stays still; only CONCIERGE and CORPORATE ACCOUNT". Top stable + floor moving = the panel's LAST row is changing size, i.e. a transitioned GEOMETRIC property, not a hover gap (v3 chased a hover gap - wrong target, kept only for the click-safe bridges it added). The only `transition:all` in the whole panel is `.fx-btn` (line 42) - the gold buttons, which live at the BOTTOM of exactly those two panels. With `all`, any hover-driven change to border/padding/font metrics animates over .15s and reflows the last row, lifting the floor and carrying the text down. Lock: inside these panels only PAINT may transition. No height, padding, margin, border-width, transform, font-size or letter-spacing can animate, so nothing can move by a millimetre. Colours and the fade still work normally. --------------------------------------------------------------------------- */ .col-header-nav-top ul.main-menu > li.has-mega .inset, .col-header-nav-top ul.main-menu > li.has-mega .inset *{ transition-property:color,background-color,border-color,box-shadow,opacity !important; } /* --------------------------------------------------------------------------- NO-FADE v5 (Claude 2026-08-09) - the actual cause of the "1mm" drift. Owner, twice: "a small shake DOWN before it disappears", "bigger at the floor, font moves down, top stable, only CONCIERGE and CORPORATE ACCOUNT". Nothing moves in LAYOUT - v3 (hover gap) and v4 (geometry lock) both missed because the movement is a RENDERING artifact of the opacity fade: while opacity is between 0 and 1 Chrome promotes the panel to its own compositing layer and drops LCD subpixel antialiasing for greyscale, so the text re-renders about a pixel lower/heavier and the 48px soft shadow blurs outward at the floor. Only these two panels fade, which is why only they do it - the theme's other dropdowns are unaffected. Fix: no fade. Opacity is only ever exactly 0 or 1, so there is no intermediate frame to mis-render and nothing can appear to move. Trade-off, accepted deliberately: the panels now open and close instantly. If the fade is wanted back, the alternative is a PERMANENT layer (will-change:opacity) so the AA mode never switches - but instant is the one that cannot drift. --------------------------------------------------------------------------- */ .col-header-nav-top ul.main-menu > li.has-mega .b-dropper, .col-header-nav-top ul.main-menu > li.has-mega > .inset{ transition:none !important; animation:none !important; will-change:auto !important; } /* --------------------------------------------------------------------------- LOWER MENU - INSTANT SWITCH, GRACE CLOSE v7 (Claude 2026-08-09) Supersedes v6 (which was a blanket transition:none - correct about the sluggishness, but it also made the panel vanish the instant the pointer left, which blinks while the hand travels to the neighbouring item). The theme BUNDLE ships: ul.main-menu .li-dropper .inset {transition:all ease .2s;opacity:0;padding-top:10px} ul.main-menu .li-dropper:hover>.inset{opacity:1;padding-top:0} so hover animated BOTH opacity 0->1 AND padding-top 10px->0 over 200ms - a fade+slide replayed on every switch. That is what felt slow. Owner's rule, 2026-08-09, implemented literally: 1. pointer arrives -> opens IMMEDIATELY (no duration, no delay) 2. pointer leaves the menu entirely -> closes after 1s (grace, so a hand crossing the gap toward the next item cannot make the panel blink) 3. pointer reaches ANOTHER item -> the new one opens and the old one closes IMMEDIATELY, with no 1s hangover How the three states are told apart in pure CSS, no JS: - base rule = the CLOSING direction, 0s duration + 1s delay (snap, not fade) - :hover on the item = the OPENING direction, delay 0 -> instant - `ul.main-menu:hover .li-dropper:not(:hover)` = the pointer is STILL somewhere on the menu bar but not on this item, i.e. rule 3, so this item's panel drops its grace and closes at once. When the pointer leaves the bar altogether that selector stops matching and the 1s grace of the base rule takes over - which is exactly rule 2. Durations stay 0s throughout: the owner approved instant, the 1s is a DELAY before the snap, never a fade. Scope: LOWER row only. `.col-header-nav` does not match the top row, whose class is `.col-header-nav-top`, so CONCIERGE and CORPORATE ACCOUNT keep the behaviour already approved ("concierge and corporate account are fine as is"). Nested submenus are covered too: hovering a child keeps the parent :hover, so a parent never closes under its own open child. --------------------------------------------------------------------------- */ /* v8 TERRITORIES (owner 2026-08-09) - CANCELS v7's 1s grace above. New rule: "divide all submenu line proportionally and when mouse cross the territory of other part we get the switch". The bar is split at the midpoints between items by js/fcc-menu-territory.js, which stamps .fcc-open on the territory's
  • ; there is no dead zone anywhere on the line, so no timer is needed - open, switch and close are all instant. The theme's own :hover keeps working as a no-js fallback (it can never disagree with the class: an item's text always lies inside its own territory). */ .col-header-nav ul.main-menu .li-dropper > .inset{transition:none !important;} .col-header-nav ul.main-menu > .li-dropper.fcc-open > .inset{ pointer-events:all !important;opacity:1 !important;padding-top:0 !important; } /* --------------------------------------------------------------------------- v9 PERMANENT LAYER (Claude 2026-08-09) - the owner's click-jitter, finally reproduced by recipe: "click any item on submenu and connection is slow ... mouse down - submenu 1mm bigger, mouse up - previous size". Proven NOT to be layout: two exhaustive sweeps (all css/*.css, the whole theme bundle, the blades) found ZERO :hover/:active/:focus rules that change geometry inside any menu panel - colours only. So it is the same RENDERING artifact family v5 fixed for the fade: a press/release repaint bounces the panel between composited and non-composited rendering (visible exactly when the main thread is stalled by a slow navigation - fast internet hides it), and each mode rasterises text antialiasing differently, so text and the 48px shadow redraw ~1px lower/heavier and snap back. Cure: pin every dropdown panel on its OWN permanent compositing layer - there is only ever ONE rendering mode, so there is no switch to see. Trade-off, deliberate: panel text is always greyscale-antialiased (that is how it already renders during any repaint of a promoted layer); at these sizes it is indistinguishable, and it can never again "breathe" by 1mm. Scope: the panels only - never the bar rows themselves. --------------------------------------------------------------------------- */ .col-header-nav-top ul.main-menu > li.has-mega > .inset, .col-header-nav ul.main-menu .li-dropper > .inset, .col-header-nav .ul-inset{ transform:translateZ(0); backface-visibility:hidden; } /* --------------------------------------------------------------------------- v10 HOME-PAGE MENU HOLD (owner 2026-08-09): "when home page is loading, the menu starts working and all submenu is opening even when video not loaded... block the menu before home page not loaded properly". body.fcc-menu-hold is stamped SERVER-SIDE on the home page only (layout.blade body tag), so the hold exists from the first painted frame - no flash of an openable menu. While it is present NO dropdown can render or catch the pointer, whatever tries to open it (theme :hover, :focus-within, or the territory script's .fcc-open - this block sits last in the file and carries the extra body class, so it wins). The release script at the end of the layout removes the class when the hero video can play (or window load when no video), 6s hard cap. Bar links themselves stay clickable throughout - only the PANELS are held. --------------------------------------------------------------------------- */ body.fcc-menu-hold ul.main-menu li.has-mega .inset, body.fcc-menu-hold ul.main-menu li.has-mega .b-dropper, body.fcc-menu-hold .col-header-nav ul.main-menu .li-dropper .inset, body.fcc-menu-hold .col-header-nav .ul-inset{ opacity:0 !important;visibility:hidden !important;pointer-events:none !important; } /* --------------------------------------------------------------------------- v11 NO DRAG, NO SELECT (owner 2026-08-09): after v9 the jitter is "better but it moves down yet once following fast mouse movement... Mouse catch something after click" - CONCIERGE and CORPORATE ACCOUNT only. "Catch something" is literal: pressing a link/image and moving fast starts a native DRAG (a ghost copy of the element rides the cursor), and a fast press-move also starts TEXT SELECTION sweeping down the panel - both follow the mouse, both exist only after a click, and the big draggable surfaces (gold .fx-btn buttons, .fx-car images, rating cards) live in exactly those two panels. v9's layer pin could not touch either mechanism - they are not repaints. A menu is not a document: nothing in a dropdown should ever be draggable or selectable. Applied to the panels of BOTH rows for consistency. --------------------------------------------------------------------------- */ .col-header-nav-top ul.main-menu li.has-mega .inset, .col-header-nav-top ul.main-menu li.has-mega .inset *, .col-header-nav ul.main-menu .li-dropper .inset, .col-header-nav ul.main-menu .li-dropper .inset *, .col-header-nav .ul-inset,.col-header-nav .ul-inset *{ -webkit-user-drag:none; -webkit-user-select:none; user-select:none; } /* --------------------------------------------------------------------------- v12 THE PIN THAT ACTUALLY WINS (owner 2026-08-09). Measured in a real Chrome (computed styles): after v9 the CORPORATE panel had transform:matrix(...) - pinned - while CONCIERGE showed transform:none - NOT pinned. Line 148's `li.has-mega.fx-w-full > .inset{transform:none !important}` (there to cancel the theme's centering translate on the full-width panel) beats v9's pin, which carried no !important. That asymmetry is exactly the owner's report: "corporate account fixed, but concierge submenu still following the mouse" - his first observation was precise; v9 fixed only the panel it reached, and the drag-kill was a red herring. translateZ(0) does BOTH jobs of transform:none - any transform value fully replaces the theme's translate - while also pinning the layer. This block sits LAST and replicates the exact overriding selectors, so among equal !importants the later one - this one - wins everywhere. --------------------------------------------------------------------------- */ ul.main-menu li.has-mega .b-dropper, ul.main-menu li.has-mega:hover .b-dropper, ul.main-menu li.has-mega:focus-within .b-dropper, ul.main-menu li.has-mega.fx-w-full > .inset, .col-header-nav ul.main-menu li.has-mega.fx-w-full > .inset, .col-header-nav-top ul.main-menu > li.has-mega > .inset, .col-header-nav ul.main-menu .li-dropper .inset, .col-header-nav .ul-inset{ transform:translateZ(0) !important; backface-visibility:hidden !important; }