/* Page-level styling for the v2 design. The design itself styles everything with inline `style` attributes, which the CSP allows ('unsafe-inline' is permitted for styles, not scripts). What it cannot express inline is anything needing a selector or a media query - so those live here: 1. The page ground. These rules came from the design's block, which the build script drops along with the rest of its . 2. Responsive behaviour. The design carries no breakpoints at all (its only @media is a print style from the tooling). Most of its grids use repeat(auto-fit, minmax(min(Npx, 100%), 1fr)) and collapse on their own; the ones that cannot are handled below by class, never by editing an inline style - an inline grid-template-columns always beats a media query, which is exactly how the app's dashboard ended up scrolling sideways on a phone. */ html, body { margin: 0; padding: 0; } body { background: linear-gradient(155deg, #E9E9EC 0%, #ECEAF5 32%, #E1DEF8 64%, #D3CEF6 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; /* The design sets Poppins on its own root div, which leaves inheriting Inter from Tailwind's preflight - so anything rendered outside that div came out in the wrong face. Set it on the body too, where it belongs. This sheet loads after site.css, so it wins. */ font-family: 'Poppins', system-ui, -apple-system, sans-serif; } a { color: #3B33C4; text-decoration: none; } a:hover { color: #2C26A0; } html { scroll-behavior: smooth; } /* The "vs. a traditional LMS" comparison is a three-column grid (feature | us | them) set inline, so it cannot reflow by itself and squashes badly on a phone. Below the breakpoint it becomes a stack: the feature name on its own line, then the two answers side by side with their column labels shown, which the wide layout puts in a header row instead. */ @media (max-width: 720px) { .m2-compare-row { grid-template-columns: 1fr 1fr !important; } .m2-compare-row > :first-child { grid-column: 1 / -1; font-weight: 500; } .m2-compare-head { display: none !important; } .m2-compare-row > :nth-child(2)::before { content: 'Train Aid Solutions'; } .m2-compare-row > :nth-child(3)::before { content: 'Traditional LMS'; } .m2-compare-row > :nth-child(2)::before, .m2-compare-row > :nth-child(3)::before { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; margin-bottom: 2px; } } /* The header collapses to a hamburger below this width; above it the toggle is hidden and the pill nav shows as designed. Both the button and the menu are display:none by default and only the media query turns them on, so no amount of toggling can reveal the mobile menu on a desktop. The nav pill is the one element that overflows a 375px viewport (it measures 392px), which is the whole reason this exists. */ .m2-menu-btn { display: none; } .m2-mobile-menu { display: none; } @media (max-width: 860px) { .m2-nav { display: none !important; } /* Both of these are in the menu, and left in the header they wrap onto a second row and push the hero down the page. */ .m2-header-actions { display: none !important; } .m2-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #FFFEFC; border: 0; border-radius: 999px; cursor: pointer; } /* The header is flex-wrap:wrap, so a full-width child drops onto its own row beneath it. */ .m2-mobile-menu:not(.hidden) { display: flex; flex-direction: column; gap: 2px; width: 100%; background: #FFFEFC; border-radius: 20px; padding: 8px; } .m2-mobile-menu a { padding: 12px 16px; border-radius: 999px; font-size: 15px; color: #4A4844; } }