/* PERSISTENT GLOBAL NAV index.html has its own built-in top nav (kept untouched to avoid regression risk). Every other page loads nav.css + nav.js, which inject an identical "row 1" top bar (.ytw-topnav) at the very top of , so the same global navigation is visible everywhere instead of disappearing when a visitor leaves the homepage. Row 1 classes are namespaced with a ytw- prefix so they never collide with a page's own local nav classes (.nav, .brand, .app-shell, etc.), since row 1 is injected alongside those, not instead of them. Whatever local nav the page already had becomes "row 2": - app-shell pages (the 4 tools + partner.html) keep their tool-tab switcher as row 2, with the now-redundant brand/exit-link stripped out by nav.js. - plain content pages (privacy/terms/updates/vision) have their local nav removed entirely by nav.js, since row 1 already covers everything it did. */ @keyframes ytwFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Hide old local nav on pages that load this file (nav.js pages) */ nav.nav { display: none !important; } /* ROW 1: persistent global nav */ .ytw-topnav { position: sticky; top: 0; z-index: 200; background: rgba(240, 245, 243, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border, #cfddd8); } .ytw-topnav-inner { max-width: 1080px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ytw-brand { display: flex; align-items: center; gap: 10px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--text, #0f1f1c); text-decoration: none; flex-shrink: 0; } .ytw-brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent, #2a7d6f); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.92rem; flex-shrink: 0; } .ytw-nav-links { display: flex; align-items: center; gap: 20px; } .ytw-nav-links a { font-size: 0.86rem; font-weight: 600; color: var(--muted, #6b8c85); text-decoration: none; } .ytw-nav-links a:hover { color: var(--accent, #2a7d6f); } .ytw-nav-right { display: flex; align-items: center; gap: 14px; } .ytw-nav-cta { background: var(--accent, #2a7d6f); color: #fff !important; padding: 8px 16px; border-radius: 99px; font-size: 0.82rem !important; font-weight: 700 !important; white-space: nowrap; text-decoration: none; } /* Dropdowns (desktop) */ .ytw-dropdown { position: relative; } .ytw-dropdown-btn { background: none; border: none; cursor: pointer; font-family: 'Quicksand', sans-serif; font-size: 0.86rem; font-weight: 600; color: var(--muted, #6b8c85); display: flex; align-items: center; gap: 4px; padding: 0; } .ytw-dropdown-btn:hover { color: var(--accent, #2a7d6f); } .ytw-dropdown-btn .caret { font-size: 0.7rem; transition: transform 0.15s ease; } .ytw-dropdown.open .ytw-dropdown-btn .caret { transform: rotate(180deg); } .ytw-dropdown-menu { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: var(--surface, #ffffff); border: 1px solid var(--border, #cfddd8); border-radius: 14px; padding: 8px; min-width: 220px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14); z-index: 210; } .ytw-dropdown.open .ytw-dropdown-menu { display: block; } .ytw-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 0.86rem; font-weight: 600; color: var(--text, #0f1f1c); text-decoration: none; } .ytw-dropdown-menu a:hover { background: var(--accent-light, #e0eeea); color: var(--accent2, #1a5c7a); } .ytw-dropdown-menu .ytw-dropdown-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--soft, #a8c4bc); padding: 8px 12px 4px; } .ytw-dropdown-menu .ytw-dropdown-divider { border-top: 1px solid var(--border, #cfddd8); margin: 6px 4px; } .ytw-dropdown-menu .ytw-dropdown-submenu { padding: 8px 0; border-bottom: 1px solid var(--border, #cfddd8); } .ytw-dropdown-menu .ytw-dropdown-submenu:last-child { border-bottom: none; } /* Hamburger + mobile slide-in menu (shared by row 1 on every page) */ .hamburger-btn { display: none; background: none; border: none; cursor: pointer; font-size: 1.4rem; color: var(--text, #0f1f1c); padding: 4px 6px; line-height: 1; flex-shrink: 0; } @media (max-width: 860px) { .ytw-nav-links { display: none; } .hamburger-btn { display: inline-block; } } .mobile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 250; background: rgba(15, 31, 28, 0.5); } .mobile-menu-overlay.open { display: block; } .mobile-menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); background: var(--surface, #ffffff); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15); padding: 24px 22px; overflow-y: auto; animation: ytwFadeUp 0.2s ease both; } .mobile-menu-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, #cfddd8); background: var(--surface2, #e8f0ed); color: var(--muted, #6b8c85); font-size: 1rem; cursor: pointer; margin-bottom: 18px; } .mobile-menu-panel .section-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--soft, #a8c4bc); margin: 18px 0 8px; } .mobile-menu-panel .section-label:first-of-type { margin-top: 0; } .mobile-menu-panel a { display: block; padding: 10px 4px; font-size: 0.95rem; font-weight: 600; color: var(--text, #0f1f1c); text-decoration: none; border-bottom: 1px solid var(--border, #cfddd8); } .mobile-menu-panel a.mobile-cta { margin-top: 20px; text-align: center; border: none; background: var(--accent, #2a7d6f); color: #fff; border-radius: 99px; font-weight: 700; } /* Icon styling in dropdown menus */ .ytw-dropdown-menu a svg { display: inline-block; margin-right: 8px; vertical-align: middle; color: inherit; } .mobile-menu-panel a svg { display: inline-block; margin-right: 10px; vertical-align: middle; color: inherit; } /* ROW 2: local page nav, once decluttered by nav.js. On app-shell pages the tab switcher is centered and no longer sticky (row 1 already handles the persistent/sticky behavior while scrolling). */ .app-shell { border-bottom: 1px solid var(--border, #cfddd8); } @media print { .hamburger-btn, .mobile-menu-overlay, .ytw-topnav { display: none !important; } }