/* Public-site chrome: the brand bar, the page column and the policy footer shared by the landing page and the four policy pages. The two viewer pages and the two dashboards use hub.css / shell.css instead — those are app chrome (sticky masthead, theme toggle, drawers) and this is the marketing and legal surface Razorpay reads. Keeping them apart is what lets the policy pages stay plain documents. */ :root { --page-max: 1080px; } .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; } .topbar { display: flex; align-items: center; gap: 12px; max-width: var(--page-max); margin: 0 auto; padding: 14px 24px; /* width: 100%, because the syllabus and exams pages make a column flex container, and an auto cross-axis margin turns off the default stretch — so the bar sized itself to its 444px of content and pushed a 390px phone into sideways scroll. With an explicit width it fills the column and max-width still caps it on a desktop. box-sizing with it, and not optional: the landing page carries no global border-box reset, so width: 100% plus this 24px padding made the bar 48px wider than the viewport there. Same reason app.css states it on the two rules that set a percentage width. */ width: 100%; box-sizing: border-box; } /* Pages with a section nav wrap the row in .topbar-inner; the policy pages put their two children straight in .topbar. Both have to come out as one horizontal row, so .topbar stays flex and the wrapper is a full-width flex item inside it. The landing page additionally overrides .topbar to a full-bleed block because its bar is sticky and has to span the viewport. This lived only in index.html until the syllabus and exams pages adopted the same bar — without it their brand, nav and theme toggle stacked into three centred rows. */ .topbar-inner { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; /* min-width: 0, because this is itself a flex item of .topbar and a flex item's default min-width: auto refuses to shrink below its content. The nav's five links measure 412px, so on a 390px phone the bar grew to 444px and took the whole page into sideways scroll instead of letting the nav scroll inside itself. The landing page never hit this: it overrides .topbar to display: block, where the wrapper is an ordinary block. */ min-width: 0; } /* min-height, because the brand is a link home on every page and the 30px mark inside it set the whole target's height — the same floor .topbar-link and the footer links already keep. */ .topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: var(--tap-target); } .topbar-brand img { width: 30px; height: 30px; display: block; } .topbar-brand span { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; } /* Pushes whatever follows the brand to the right edge — the account menu on the landing page, the back link on a policy page. */ .topbar-brand + * { margin-left: auto; } .topbar-link { font-size: 0.88rem; color: var(--text-muted); text-decoration: none; min-height: var(--tap-target); display: inline-flex; align-items: center; } .topbar-link:hover { color: var(--primary-text); } /* The section nav, shared by the landing page and the two reference pages (syllabus map, exams covered). It moved here from index.html's own