/* ========================================================= THINK ABOUT BOOKS — PREMIUM MEGA MENU ========================================================= */ .tab-global-header, .tab-site-header { position: relative; z-index: 1000; } /* --------------------------------------------------------- MEGA PARENT --------------------------------------------------------- */ .tab-mega-parent { position: static !important; } /* --------------------------------------------------------- FULL-WIDTH PANEL --------------------------------------------------------- */ .tab-mega-menu { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #ffffff; border-top: 1px solid #e7eff2; border-bottom: 1px solid #dce8ec; box-shadow: 0 18px 45px rgba(7, 27, 61, .12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; z-index: 9999; } /* --------------------------------------------------------- OPEN --------------------------------------------------------- */ .tab-mega-parent:hover .tab-mega-menu, .tab-mega-parent:focus-within .tab-mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* --------------------------------------------------------- SAME TAB CONTENT CANVAS --------------------------------------------------------- */ .tab-mega-menu__inner { width: 88%; max-width: 1600px; margin-left: auto; margin-right: auto; padding: 34px 0 38px; display: grid; grid-template-columns: 1.15fr .85fr 1.1fr .85fr 1.45fr; gap: 38px; align-items: start; box-sizing: border-box; } /* --------------------------------------------------------- NAV COLUMNS --------------------------------------------------------- */ .tab-mega-column { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .tab-mega-column a, .tab-mega-column span { display: block; margin: 0; padding: 0; color: #536573; font-size: 13px; line-height: 1.45; text-decoration: none; transition: color .15s ease, transform .15s ease; } .tab-mega-column a:not(.tab-mega-heading):hover { color: #1687a3; transform: translateX(3px); } /* --------------------------------------------------------- COLUMN HEADINGS --------------------------------------------------------- */ .tab-mega-heading { margin-bottom: 10px !important; color: #071b3d !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .045em; text-transform: uppercase; } a.tab-mega-heading:hover { color: #1687a3 !important; } /* --------------------------------------------------------- RANDOM BOOK FEATURE --------------------------------------------------------- */ .tab-mega-feature { min-width: 0; min-height: 205px; padding-left: 32px; border-left: 1px solid #e1eaee; } .tab-mega-feature__label { display: block; margin-bottom: 14px; color: #1687a3; font-size: 11px; font-weight: 900; line-height: 1.2; letter-spacing: .10em; text-transform: uppercase; } .tab-mega-feature__cover { width: 92px; height: 138px; float: left; margin-right: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: #f5f8f9; box-shadow: 0 5px 14px rgba(7, 27, 61, .08); text-decoration: none; } .tab-mega-feature__cover img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } .tab-mega-feature__info { min-width: 0; padding-top: 2px; } .tab-mega-feature__title { display: block; margin: 0 0 5px; color: #071b3d; font-size: 14px; font-weight: 800; line-height: 1.3; text-decoration: none; } .tab-mega-feature__title:hover { color: #1687a3; } .tab-mega-feature__author { display: block; margin-bottom: 8px; color: #73828e; font-size: 11px; line-height: 1.35; } .tab-mega-feature__price { display: block; margin-bottom: 10px; color: #1687a3; font-size: 15px; font-weight: 900; line-height: 1.2; } .tab-mega-feature__price del { margin-right: 5px; color: #8b98a2; opacity: .6; } .tab-mega-feature__price ins { text-decoration: none; } .tab-mega-feature__button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border: 1px solid #1687a3; border-radius: 5px; color: #1687a3; font-size: 10px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; text-decoration: none; transition: background .15s ease, color .15s ease; } .tab-mega-feature__button:hover { background: #1687a3; color: #ffffff; } /* --------------------------------------------------------- CLEAR FEATURE FLOAT --------------------------------------------------------- */ .tab-mega-feature::after { content: ""; display: table; clear: both; } /* --------------------------------------------------------- LARGE DESKTOP --------------------------------------------------------- */ @media (min-width: 1500px) { .tab-mega-menu__inner { gap: 48px; padding-top: 38px; padding-bottom: 42px; } } /* --------------------------------------------------------- TABLET / MOBILE Current TAB mobile navigation remains unchanged. Mega menu is desktop-only initially. --------------------------------------------------------- */ @media (max-width: 1100px) { .tab-mega-menu { display: none !important; } } /* ========================================================= BOOKS TRIGGER ========================================================= */ .tab-mega-parent { display: flex; align-items: stretch; } .tab-mega-trigger { display: inline-flex !important; align-items: center; gap: 5px; } .tab-mega-chevron { display: inline-block; color: #1687a3; font-size: 11px; line-height: 1; transform: translateY(-1px); transition: transform .18s ease; } .tab-mega-parent:hover .tab-mega-chevron { transform: translateY(-1px) rotate(180deg); } /* ========================================================= TAB MEGA MENU — STABLE HOVER BRIDGE Prevent menu closing while pointer moves from Books into the mega panel. ========================================================= */ @media (min-width:1101px) { /* * Keep Books as the positioning/hover parent. */ .tab-mega-parent { position: static !important; } /* * Invisible bridge immediately below the Books trigger. * This removes any dead hover space between the * navigation row and mega menu. */ .tab-mega-parent::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 3px); height: 14px; background: transparent; pointer-events: auto; } /* * Slightly overlap the panel with the bottom of * the header instead of leaving a physical gap. */ .tab-mega-menu { top: calc(100% - 2px) !important; transform: translateY(0) !important; transition: opacity .16s ease, visibility .16s ease !important; } /* * Keep panel open when hovering either trigger * OR the actual mega menu. */ .tab-mega-parent:hover > .tab-mega-menu, .tab-mega-parent:focus-within > .tab-mega-menu, .tab-mega-menu:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* * Small close delay makes diagonal mouse movement * much more forgiving. */ .tab-mega-parent > .tab-mega-menu { transition-delay: .12s; } .tab-mega-parent:hover > .tab-mega-menu, .tab-mega-parent:focus-within > .tab-mega-menu { transition-delay: 0s; } } /* ========================================================= TAB MEGA MENU — WELCOME PAGE HOVER FIX ========================================================= */ @media (min-width:1101px) { /* * Welcome-page header/nav must allow the mega panel * to extend outside the navigation row. */ body.home .tab-site-header, body.home .tab-header-container, body.home .tab-header-nav { overflow: visible !important; } body.home .tab-site-header { position: relative !important; z-index: 10000 !important; } body.home .tab-header-container { position: relative !important; } body.home .tab-header-nav { position: static !important; } /* * Books wrapper participates in the same hover area. */ body.home .tab-header-nav .tab-mega-parent { position: static !important; display: flex !important; align-items: stretch !important; height: 100%; } /* * Keep the Books trigger itself active across * the full navigation height. */ body.home .tab-mega-trigger { display: inline-flex !important; align-items: center !important; height: 100%; position: relative; z-index: 2; } /* * Full-width invisible bridge between navigation * and mega panel. */ body.home .tab-mega-parent::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 4px); height: 18px; background: transparent; pointer-events: auto; z-index: 9998; } /* * Mega panel sits immediately beneath the * Welcome-page header. */ body.home .tab-mega-menu { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% - 2px) !important; width: 100% !important; margin: 0 !important; transform: none !important; z-index: 9999 !important; } /* * Stay open while pointer is on Books, * bridge, or mega panel. */ body.home .tab-mega-parent:hover > .tab-mega-menu, body.home .tab-mega-parent:focus-within > .tab-mega-menu, body.home .tab-mega-menu:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } /* * Slight close delay for comfortable pointer travel. */ body.home .tab-mega-parent > .tab-mega-menu { transition-delay: .15s; } body.home .tab-mega-parent:hover > .tab-mega-menu, body.home .tab-mega-parent:focus-within > .tab-mega-menu { transition-delay: 0s; } } /* ========================================================= TAB CACHED MULTI-MEGA SUPPORT ========================================================= */ @media (min-width:1101px) { .tab-canonical-header .tab-canonical-nav .tab-mega-parent { position: static !important; display: flex; align-items: center; height: 104px; } .tab-canonical-header .tab-canonical-nav .tab-mega-parent::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 4px); height: 18px; background: transparent; pointer-events: auto; z-index: 9998; } .tab-canonical-header .tab-mega-parent > .tab-mega-menu { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% - 2px) !important; width: 100% !important; margin: 0 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(5px); z-index: 9999 !important; transition: opacity .15s ease, visibility .15s ease, transform .15s ease; } .tab-canonical-header .tab-mega-parent:hover > .tab-mega-menu, .tab-canonical-header .tab-mega-parent:focus-within > .tab-mega-menu, .tab-canonical-header .tab-mega-menu:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* * Approved typography: * headings bold / links regular. */ .tab-canonical-header .tab-mega-heading, .tab-canonical-header .tab-mega-feature__label { font-weight: 700 !important; } .tab-canonical-header .tab-mega-column > a:not(.tab-mega-heading) { font-weight: 400 !important; } } /* TAB BOOK CLUBS FEATURE */ .tab-mega-clubs-copy { max-width: 285px; color: #536779; font-size: 14px; line-height: 1.55; } .tab-mega-clubs-copy strong { display: block; margin-bottom: 9px; color: #071b3b; font-size: 18px; font-weight: 700; line-height: 1.3; } .tab-mega-clubs-copy p { margin: 0 0 18px; } /* TAB TOPICS FEATURE */ .tab-mega-topics-copy { max-width: 285px; color: #536779; font-size: 14px; line-height: 1.55; } .tab-mega-topics-copy strong { display: block; margin-bottom: 9px; color: #071b3b; font-size: 18px; font-weight: 700; line-height: 1.3; } .tab-mega-topics-copy p { margin: 0 0 18px; } /* ========================================================= TAB MEGA MENU — STRICT PARENT OWNERSHIP Each trigger controls ONLY its own direct-child panel. ========================================================= */ @media (min-width:1101px) { /* * Reset every direct mega panel. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent > .tab-mega-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(5px) !important; } /* * IMPORTANT: * Only the hovered/focused parent may expose * its own DIRECT CHILD mega panel. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent:hover > .tab-mega-menu, .tab-canonical-header .tab-canonical-nav .tab-mega-parent:focus-within > .tab-mega-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* * Neutralize the older global panel-hover rule. * A panel cannot open itself independently. */ .tab-canonical-header .tab-canonical-nav .tab-mega-menu:hover { /* * Visibility is inherited from its parent hover. * Do not establish independent ownership here. */ } /* * Keep non-active siblings completely inert. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent:not(:hover):not(:focus-within) > .tab-mega-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* ========================================================= TAB MEGA MENU — FINAL TRIGGER OWNERSHIP FIX Previous full-width ::after hover bridges overlapped every navigation trigger. Later DOM items could therefore capture the pointer of earlier items. Bridge is now trigger-width only. ========================================================= */ @media (min-width:1101px) { /* * Kill the old full-width parent bridges completely. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent::after { content: none !important; display: none !important; pointer-events: none !important; } /* * Parent itself owns only its actual navigation width. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent { position: static !important; height: 104px; display: flex; align-items: center; } /* * Trigger becomes the local bridge owner. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent > .tab-mega-trigger { position: relative !important; z-index: 10001; height: 104px; display: inline-flex; align-items: center; } /* * Small trigger-width bridge only. * It no longer overlaps neighboring menu items. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent > .tab-mega-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 18px; background: transparent; pointer-events: auto; } /* * Default: every panel is inert. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent > .tab-mega-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(4px) !important; z-index: 9999 !important; } /* * ONLY its own parent can expose the direct-child panel. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent:hover > .tab-mega-menu, .tab-canonical-header .tab-canonical-nav .tab-mega-parent:focus-within > .tab-mega-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* * Non-active sibling panels remain completely inert. */ .tab-canonical-header .tab-canonical-nav .tab-mega-parent:not(:hover):not(:focus-within) > .tab-mega-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } }