/* Section navigation across the top, replacing the left sidebar. Own file — style.css is at its ceiling. Everything is scoped to body.n1-topnav so removing the class restores the sidebar layout exactly. */ /* ---------------------------------------------------------------- hide it */ /* `html.n1-topnav-boot` is the same hide, set by the inline script in so it applies before the first paint. Without it the sidebar layout paints and is then replaced once this file's script runs at the end of the document — the flash of the old design. The boot class is removed again if the top bar never takes over, so it can never be the reason a visitor has no navigation. */ html.n1-topnav-boot .sidebar, html.n1-topnav-boot .sidebar-overlay, html.n1-topnav-boot #mobileMenuBtn, body.n1-topnav .sidebar, body.n1-topnav .sidebar-overlay, body.n1-topnav #mobileMenuBtn { display: none !important; } /* .layout-shell reserves 260px for the fixed sidebar. */ html.n1-topnav-boot .layout-shell, body.n1-topnav .layout-shell { padding-left: 0; } /* The premium call to action already exists as a full-width strip built for phones. With the sidebar gone it is the only route to Premium, so it is no longer restricted to small screens. This rule never actually took effect on desktop. style.css hides the strip above 900px with `#premiumMobileStrip:not(.hidden) { display: none !important }`, reasoned as "Sidebar already shows Premium — avoid duplicate strip" — true until this file hid the sidebar. An ID plus !important outranks the class selector below, so on desktop BOTH routes to "Redeem promo code" were unreachable: the sidebar's copy is display:none with the sidebar, and the strip's copy lost here. Students given a teacher's promo code had nowhere on screen to enter it. Match the ID and the !important so the fallback this file always intended is the rule that wins. Phones are untouched — they were already served by the 900px media query, which is why this only ever bit desktop users. */ body.n1-topnav .premium-mobile-strip:not(.hidden) { display: flex; } body.n1-topnav #premiumMobileStrip:not(.hidden) { display: flex !important; } /* The strip was laid out for a phone, where `space-between` merely separates two items sitting almost edge to edge. Stretched to a desktop width it does what it is told and pushes "Become Premium" into the middle of ~1500px, stranded far from the text it belongs to and far from the button beside it. Group the whole thing at the left so the copy and its two buttons read as one unit. Scoped to desktop: below 901px the original spacing is still the right answer, and that is the width the strip was designed for. */ @media (min-width: 901px) { body.n1-topnav #premiumMobileStrip:not(.hidden) { justify-content: flex-start; gap: 16px; } } /* ---------------------------------------------------------------- the bar */ .secnav { display: flex; align-items: center; gap: 16px; padding: 0 22px; background: #fff; border-bottom: 1px solid #e2e8f0; /* The sidebar this bar replaced was position:fixed — it never left the screen. Static, the bar scrolls away on any long page (the GE listening list runs to ~8,800px), which reads to a student as "the menu disappeared". Pin it right under the sticky global bar (.platform-top-nav, z-index 41), so this sits one layer below that and above page content. The offset is measured into --n1-topnav-h by section-nav.js rather than hard-coded: the global bar wraps at narrow widths and is hidden outright in the test runners, where the offset has to fall back to 0. */ position: sticky; top: var(--n1-topnav-h, 0px); z-index: 40; } /* The runners hide .sidebar and #platformTopNav so no chrome floats over a timed exam. This bar was left out of that set only because, being static, it scrolled away by itself. Pinned, it would sit over the runner for the whole test and offer a one-click exit mid-exam. */ .app.reading-mode #n1SectionNav, .app.in-fullscreen #n1SectionNav { display: none !important; } .secnav-scroll { display: flex; align-items: stretch; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; /* Keep the row height stable while the scrollbar comes and goes. */ padding-bottom: 1px; } .secnav-scroll::-webkit-scrollbar { height: 4px; } .secnav-scroll::-webkit-scrollbar-thumb { border-radius: 2px; background: #cbd5e1; } .secnav-item { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 5px 0; padding: 9px 12px; border: 0; border-radius: 10px; background: #dbeafe; font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.2; color: #0f172a; white-space: nowrap; cursor: pointer; } .secnav-item:hover { color: #020617; background: #bfdbfe; } .secnav-item.active { color: #020617; background: #93c5fd; font-weight: 700; box-shadow: inset 0 0 0 2px #1d4ed8; } .secnav-item.active:hover { color: #020617; background: #7dd3fc; } /* ------------------------------------------------------------------- fit */ /* The row could not hold a full program. At 1280px it needed 2201px for eleven items and had 1221px, so five — Flashcards, Video Lessons, Real Mock Exams, Homework, Teacher Materials — sat off the right edge behind a 4px scrollbar that gives no hint they exist. A vertical sidebar never had this problem; a horizontal one has to earn its width back. Icons and counts are the widest parts that nobody navigates by, so they go (counts move to the item's tooltip in section-nav.js). */ .secnav-item .sn-ico { display: none; } /* One row at every width, scrolled sideways when it does not fit. This used to wrap, on the reasoning that an item you have to scroll to is an item nobody finds. That was true of what it had then: a bare 4px scrollbar and no other hint. It is not true of this row, which is cut off mid-item at the edge, fades on the right while there is more, snaps as you drag or swipe, and opens already scrolled to the section you are on. Wrapping was also never actually stable. With the Premium badges gone the row needs 1442px, which fits a 1920 monitor and misses a 1440 laptop by 46px — so the same account saw one row or two depending on the window, and one extra teacher item or a longer label in Azerbaijani flipped it back either way. Chasing that margin in padding would have to be re-chased every time the menu or the wording changed. Scrolling does not care how long the row gets. The scrollbar stays visible above 900px, where there is a pointer and no swipe; the mobile block below hides it. */ .secnav-scroll { flex-wrap: nowrap; gap: 4px; scroll-snap-type: x proximity; scroll-padding-inline: 4px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); } /* Nothing further to hint at once the end is reached, and a permanently half-faded last item reads as broken. Toggled in section-nav.js. */ .secnav-scroll.secnav-scroll--end { -webkit-mask-image: none; mask-image: none; } .secnav-item { scroll-snap-align: start; } /* Counts become quiet chips rather than right-aligned columns. */ .secnav-item .sn-count { padding: 2px 8px; border-radius: 999px; background: #eff6ff; font-size: 12.5px; font-weight: 700; color: #0f172a; } .secnav-item.active .sn-count { background: #eff6ff; color: #0f172a; } .secnav-item .sn-count--soft { background: transparent; color: #1e293b; } /* ---------------------------------------------------- band on the dashboard */ /* Relocated out of the sidebar. Sidebar styling assumed a narrow column; on the dashboard it is a normal card. */ body.n1-topnav .sidebar-band-widget.sbw--ondash { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 0 0 18px; padding: 12px 16px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; } body.n1-topnav .sbw--ondash .sbw-ring { width: 46px; height: 46px; flex: none; } /* The ring's own "Overall" caption was sized for the wider sidebar and clips to "VERAL" here. The card says "Overall band" beside it, so drop it. */ body.n1-topnav .sbw--ondash .sbw-ring-lbl { display: none; } body.n1-topnav .sbw--ondash .sbw-ring-val { font-size: 15px; } body.n1-topnav .sbw--ondash .sbw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.n1-topnav .sbw--ondash .sbw-title { font-size: 14px; color: #0f172a; } body.n1-topnav .sbw--ondash .sbw-sub, body.n1-topnav .sbw--ondash .sbw-empty-note { font-size: 12.5px; line-height: 1.4; color: #64748b; } /* ------------------------------------------------------------ responsive */ @media (max-width: 900px) { .secnav { padding: 0 14px; gap: 10px; } .secnav-end { display: none; /* the dashboard already reports the band */ } /* The row is swiped here, not dragged, so the scrollbar under it is only noise. Everything else about the strip — one row, snap, edge fade, opening on the active item — is now the behaviour at every width; see the base rules above. */ .secnav-scroll { -webkit-overflow-scrolling: touch; scroll-padding-inline: 14px; scrollbar-width: none; } .secnav-scroll::-webkit-scrollbar { height: 0; } } @media (max-width: 560px) { .secnav-item { padding: 9px 11px; font-size: 15px; } .secnav-item .sn-ico { font-size: 15px; } .secnav-item .sn-count { font-size: 12px; } }