/* ========================================================================== SchoolMaster Landing Page — landing.css ========================================================================== */ /* -------------------------------------------------------------------------- CSS Custom Properties -------------------------------------------------------------------------- */ :root { --hero-gradient: linear-gradient(-45deg, #0d1b4b, #1a237e, #0a3d62, #3a0647); --primary-blue: #1565c0; --primary-dark: #0d47a1; --accent: #00bcd4; --text-light: rgba(255, 255, 255, 0.9); --text-muted-light: rgba(255, 255, 255, 0.65); --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.18); --border-radius-card: 16px; --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 96 top and bottom meant 192px of nothing between one section and the next, which read as the page having ended. 64 still separates them clearly and keeps a screen's worth of content in view. */ --section-padding: 64px 0; } /* -------------------------------------------------------------------------- Theme tokens Three states, because "follow the device" has to be the default: :root — light, and the only full definition @media dark + :not([data-theme=light]) — device is dark, visitor hasn't chosen [data-theme="dark"] — visitor chose dark, beats the media query App.razor stamps data-theme on from the sm-theme cookie, and omits it entirely when no cookie is set so the media query decides. The --mud-palette-* overrides are deliberate: MudThemeProvider writes its own values onto :root from an inline