/* * tf-header.css — shared marketing nav styles for the legacy stacks. * * Consumers: * - inc/templates/homeheader.inc (jQuery + Vue 2 search-page surface) * - inc/components/header.inc (Vue 2 SPA player / dashboard surface) * * The Nuxt 2 stack (apps/tfs-nuxt/components/Home/Header.vue) keeps its own * mirror at apps/tfs-nuxt/assets/tf-header.css because Nuxt 2's dev server * doesn't serve files from /inc/. Keep the two copies in sync if you change * the design — they're literally the same CSS. */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700; font-display: block; src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v332/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format('woff2'); } /* Paint the html element with the footer's dark surface color so short pages (and pre-layout-shift states) don't reveal the default page background below the footer. Lives here, not in tf-footer.css, because this stylesheet loads near the top of via homeheader.inc and is render-blocking — so the bg is set before first paint, avoiding any flash. Color matches --tf-footer-bg in tf-footer.css (--ui-surface-inverse / --color-deep-purple-800). */ html { background-color: #1c152c; } /* Player pages (course video player, jam-pack player, multi-track jam player) are full-bleed app shells that hide the global footer, so the purple html bg shouldn't apply — otherwise it leaks below the player content. Markers per template: .coursePlayerTemplate — legacy course player (inc/views/player/index.inc) .jamPlayer — jam-pack + multi-track players (inc/views/jam-player/index.inc + mtj-player/index.inc) .tf-player-root — new course player wrapper (inc/views/player-new/index.html + alt.html) Uses :has() so it gracefully degrades on browsers without :has() support (they keep the existing purple bg, matching pre-exclusion behavior). */ html:has(.coursePlayerTemplate, .jamPlayer, .tf-player-root) { background-color: transparent; } /* Pin the Intercom banner iframe below the sticky header (z-50) so the nav stays on top. Intercom's default z-index is 2147483001 — without this it covers the header. Mirrors the nuxt4 fix in apps/tfs-nuxt4/app/assets/css/main.css. */ iframe[name="intercom-banner-frame"] { z-index: 49 !important; } .tf-header { --tf-grey-50: #f6f6f6; --tf-grey-100: #ececec; --tf-grey-700: #616161; --tf-grey-900: #202020; --tf-purple-100: #e2ccef; --tf-purple-800: #2b0046; --tf-purple-grey-800: #44404d; --tf-orange-500: #ff3d00; --tf-gold-500: #ffa327; --tf-header-height: 72px; position: sticky; top: 0; z-index: 50; width: 100%; background-color: #fff; box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08); font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--tf-purple-800); } .tf-header * { box-sizing: border-box; } .tf-header a { text-decoration: none; } /* :where(...) keeps the reset's specificity at 0 so .tf-nav-btn wins on the Resources trigger button without needing !important. */ :where(.tf-header) button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .tf-header .container { padding-inline: 1rem; } .tf-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; } @media (min-width: 768px) { .tf-header-bar { padding: 20px 0; } } /* Logo — overflow-clipped to a 45px spiral on mobile, full 171px wordmark on desktop or when the mobile drawer is open. */ .tf-header-logo { display: block; height: 40px; flex-shrink: 0; overflow: hidden; width: 45px; transition: opacity 150ms ease; } .tf-header-logo:hover { opacity: 0.8; } .tf-header-logo img { display: block; height: 40px; width: 171px; max-width: none; } .tf-header-logo--full { width: 171px; } @media (min-width: 768px) { .tf-header-logo { width: 171px; } } /* ---- Desktop nav ---- */ .tf-header-nav { display: none; align-items: center; gap: 4px; } @media (min-width: 768px) { .tf-header-nav { display: flex; } } .tf-nav-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--tf-purple-800); transition: background-color 150ms ease, color 150ms ease; cursor: pointer; white-space: nowrap; } .tf-nav-btn:hover { background-color: rgba(0, 0, 0, 0.1); color: var(--tf-purple-800); } .tf-nav-btn--active { background-color: rgba(0, 0, 0, 0.1); } .tf-chevron { font-size: 24px; transition: transform 150ms ease; } .tf-chevron--up { transform: rotate(180deg); } /* ---- Desktop dropdown panel ---- */ .tf-nav-dropdown { position: relative; } .tf-nav-dropdown-panel-wrap { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 4px; } .tf-nav-dropdown-panel { list-style: none; margin: 0; padding: 8px 0; width: 136px; background-color: var(--tf-grey-50); border-radius: 4px; box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.12); overflow: hidden; } .tf-nav-dropdown-item { display: flex; align-items: center; width: 100%; padding: 14px 12px; font-size: 14px; font-weight: 500; letter-spacing: 0.15px; color: var(--tf-grey-900); transition: background-color 150ms ease; } .tf-nav-dropdown-item:hover { background-color: rgba(0, 0, 0, 0.08); } /* ---- Right cluster (desktop / mobile) ---- */ .tf-header-actions { align-items: center; gap: 8px; } .tf-header-actions--desktop { display: none; } .tf-header-actions--mobile { display: flex; gap: 16px; } @media (min-width: 768px) { .tf-header-actions--desktop { display: flex; } .tf-header-actions--mobile { display: none; } } /* ---- Icon buttons (search / hamburger / close) ---- */ .tf-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; color: var(--tf-purple-800); transition: background-color 150ms ease; } .tf-icon-btn--filled { background-color: var(--tf-grey-50); color: var(--tf-grey-700); } .tf-icon-btn--filled:hover { background-color: var(--tf-grey-100); } .tf-icon-btn--ghost { background-color: transparent; } .tf-icon-btn--ghost:hover { background-color: var(--tf-grey-50); } .tf-icon-btn .material-symbols-outlined { font-size: 24px; } /* ---- Logged-in widgets: cart / notifications badge + avatar dropdown ---- */ .tf-icon-btn-wrap { position: relative; display: inline-flex; } .tf-badge { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 9999px; background-color: var(--tf-gold-500); color: var(--tf-grey-900); font-size: 10px; font-weight: 600; line-height: 12px; pointer-events: none; } /* Avatar trigger — 32x32 round, image or fallback icon, with a small chevron indicator overlaid at the bottom-right corner. */ .tf-account { position: relative; display: inline-flex; } .tf-header-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; background-color: var(--tf-grey-50); color: var(--tf-purple-800); overflow: hidden; cursor: pointer; transition: background-color 150ms ease; } .tf-header-avatar:hover { background-color: rgba(0, 0, 0, 0.08); } .tf-header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .tf-header-avatar .material-symbols-outlined { font-size: 24px; color: var(--tf-grey-700); } .tf-header-avatar-chevron { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 9999px; background-color: var(--tf-grey-50); border: 1px solid #fff; pointer-events: none; } .tf-header-avatar-chevron .material-symbols-outlined { font-size: 12px; color: var(--tf-grey-700); transition: transform 150ms ease; } .tf-header-avatar-chevron--up .material-symbols-outlined { transform: rotate(180deg); } /* Avatar dropdown panel — mirrors .tf-nav-dropdown-panel but right-aligned under the avatar rather than centered. */ .tf-account-menu-wrap { position: absolute; right: 0; top: 100%; padding-top: 4px; z-index: 60; } .tf-account-menu { list-style: none; margin: 0; padding: 8px 0; min-width: 200px; background-color: var(--tf-grey-50); border-radius: 4px; box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.12); overflow: hidden; } .tf-account-menu-item { display: flex; align-items: center; width: 100%; padding: 14px 12px; font-size: 14px; font-weight: 500; letter-spacing: 0.15px; color: var(--tf-grey-900); transition: background-color 150ms ease; text-align: left; cursor: pointer; } .tf-account-menu-item:hover { background-color: rgba(0, 0, 0, 0.08); color: var(--tf-grey-900); } /* ---- Orange CTA (Try For Free / Start Free Trial) ---- */ .tf-cta-orange { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 12px 16px; border-radius: 8px; background-color: var(--tf-orange-500); color: #fff; font-size: 14px; font-weight: 600; line-height: 20px; transition: background-image 150ms ease; white-space: nowrap; } .tf-cta-orange:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)); color: #fff; } .tf-cta-orange:active, .tf-cta-orange:focus-visible { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); color: #fff; } .tf-cta-orange--sm { height: 32px; } .tf-cta-orange--block { width: 100%; height: 48px; border-radius: 12px; } /* ---- Ghost CTA (mobile drawer Log In) ---- */ .tf-cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--tf-purple-800); background-color: transparent; transition: background-color 150ms ease; } .tf-cta-ghost:hover { background-color: rgba(0, 0, 0, 0.08); color: var(--tf-purple-800); } .tf-cta-ghost--block { width: 100%; } /* ---- Mobile drawer ---- */ .tf-mobile-menu { position: fixed; left: 0; right: 0; top: var(--tf-header-height); bottom: 0; z-index: 40; background-color: #fff; overflow-y: auto; padding: 32px 20px; display: flex; flex-direction: column; gap: 40px; } /* Logged-in drawer: Log out sits flush with the nav items, so the gap between the nav block and the bottom CTA block collapses to the same 8px the items themselves use. Mirrors Nuxt 4 MobileMenu.vue line 7. */ .tf-mobile-menu--authenticated { gap: 8px; } @media (min-width: 768px) { .tf-mobile-menu { display: none; } } .tf-mobile-nav { display: flex; flex-direction: column; gap: 8px; } .tf-mobile-menu-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: 56px; padding: 12px 16px; border-radius: 12px; background-color: var(--tf-grey-50); font-size: 14px; font-weight: 500; letter-spacing: 0.15px; color: var(--tf-purple-800); transition: background-color 150ms ease, color 150ms ease; } .tf-mobile-menu-btn--leaf:active { background-color: var(--tf-purple-100); color: var(--tf-purple-grey-800); } .tf-mobile-menu-btn--trigger { font-weight: 500; } .tf-mobile-menu-btn--expanded { background-color: rgba(0, 0, 0, 0.1); border-radius: 12px 12px 0 0; font-weight: 600; letter-spacing: 0; } .tf-mobile-menu-label { flex: 1; text-align: left; } .tf-mobile-menu-icon-wrap { position: relative; width: 24px; height: 24px; flex-shrink: 0; } .tf-mobile-menu-icon { position: absolute; inset: 0; font-size: 24px; transition: opacity 150ms ease; } .tf-mobile-menu-icon--outlined { color: var(--tf-grey-700); opacity: 1; } .tf-mobile-menu-icon--filled { opacity: 0; } /* Pressed state: outlined fades out, filled fades in. */ .tf-mobile-menu-btn--leaf:active .tf-mobile-menu-icon--outlined { opacity: 0; } .tf-mobile-menu-btn--leaf:active .tf-mobile-menu-icon--filled { opacity: 1; color: var(--tf-purple-grey-800); } .tf-mobile-menu-icon-static { font-size: 24px; color: var(--tf-grey-700); flex-shrink: 0; } .tf-mobile-menu-btn--expanded .tf-mobile-menu-icon-static { color: var(--tf-purple-800); } .tf-mobile-menu-children { background-color: var(--tf-grey-50); border-radius: 0 0 12px 12px; padding: 8px 0; display: flex; flex-direction: column; } .tf-mobile-menu-child { display: flex; align-items: center; height: 56px; padding: 12px 16px 12px 48px; font-size: 14px; font-weight: 500; letter-spacing: 0.15px; color: var(--tf-purple-800); transition: background-color 150ms ease, color 150ms ease; } .tf-mobile-menu-child:hover { background-color: rgba(0, 0, 0, 0.08); } .tf-mobile-menu-child:active { background-color: var(--tf-purple-100); color: var(--tf-purple-grey-800); } .tf-mobile-menu-cta { display: flex; flex-direction: column; gap: 8px; } /* Material Symbols ligature font — re-declared so the .tf-header font-family doesn't override it via the cascade. */ .tf-header .material-symbols-outlined, .tf-mobile-menu .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 300; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; overflow-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .tf-header .material-symbols-outlined.filled, .tf-mobile-menu .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1; }