/* ========================================================= CORE: BACKGROUNDS Path: /src/css/core/backgrounds.css Usage: Add class="bg-3y-spotlight" to the tag ========================================================= */ .bg-3y-spotlight { background-color: var(--color-background, #f1f3f5); background-image: radial-gradient( circle at 50% 0%, rgba(141, 193, 67, 0.12) 0%, rgba(141, 193, 67, 0.05) 40%, transparent 85% ); min-height: 100vh; margin: 0; background-attachment: fixed; background-repeat: no-repeat; } :root[data-theme="dark"] .bg-3y-spotlight { background-color: var(--color-background, #020409); background-image: radial-gradient( circle at 50% 0%, rgba(141, 193, 67, 0.1) 0%, rgba(141, 193, 67, 0.045) 38%, transparent 68% ); } /* -------------------------------------------------------------------------- Auth pages: theme-aware task surface -------------------------------------------------------------------------- */ html:root[data-theme] body.auth-page.bg-3y-spotlight, html body.auth-page.bg-3y-spotlight { background-color: var(--color-background, #f7f5f0); background-image: radial-gradient( circle at 18% 10%, rgba(141, 193, 67, 0.08) 0, rgba(141, 193, 67, 0.04) 22rem, rgba(141, 193, 67, 0) 38rem ); background-attachment: fixed; background-repeat: no-repeat; color: var(--color-text-primary, #151515); color-scheme: light; min-height: 100vh; min-height: 100svh; overflow-x: hidden; overflow-y: auto; } html:root[data-theme="dark"] body.auth-page.bg-3y-spotlight { background-color: var(--color-background, #060708); background-image: radial-gradient( circle at 18% 10%, rgba(141, 193, 67, 0.12) 0, rgba(141, 193, 67, 0.055) 22rem, rgba(141, 193, 67, 0) 38rem ), radial-gradient( circle at 82% 0%, rgba(255, 255, 255, 0.055) 0, rgba(255, 255, 255, 0.025) 18rem, rgba(255, 255, 255, 0) 34rem ); color: var(--color-text-primary, #f2f3f4); color-scheme: dark; } html:root[data-theme] body.auth-page.bg-3y-spotlight #main-content, html body.auth-page.bg-3y-spotlight #main-content { min-height: 100vh; min-height: 100svh; background: transparent; } @supports (min-height: 100dvh) { html:root[data-theme] body.auth-page.bg-3y-spotlight, html:root[data-theme] body.auth-page.bg-3y-spotlight #main-content, html body.auth-page.bg-3y-spotlight, html body.auth-page.bg-3y-spotlight #main-content { min-height: 100dvh; } } html:root[data-theme] body.auth-page.bg-3y-spotlight .logo-theme-img--light, html body.auth-page.bg-3y-spotlight .logo-theme-img--light { display: block; } html:root[data-theme] body.auth-page.bg-3y-spotlight .logo-theme-img--dark, html body.auth-page.bg-3y-spotlight .logo-theme-img--dark { display: none; } html:root[data-theme="dark"] body.auth-page.bg-3y-spotlight .logo-theme-img--light { display: none; } html:root[data-theme="dark"] body.auth-page.bg-3y-spotlight .logo-theme-img--dark { display: block; }