/* ══════════════════════════════════════════════════════════════════════════ * auth.css — sign in, and the two screens either side of it. * * WHY THIS LOOKS NOTHING LIKE THE REST OF THE APP, ON PURPOSE. * * The owner's brief, verbatim: "TEMA JE MERAH GOLD JUST UNTUK PERKARA RASMI * DALAM APPS TU. BAHAGIAN LAIN MACAM BUTTON KE BACKGROUND KE APA KE BOLEH JE * LAIN-LAIN." Red and gold are the OFFICIAL register — the member card, the * points hero, the header bar, anything that stands in for the company. Sign in * is not that. It is the front door, it is seen once per device, and it is the * only screen in the app with no data on it, so it is the one place that can * carry atmosphere instead of information. * * The previous version was a white card with a hairline border on flat cream, * with the page title in a bar above it. That is a 2010 form layout. It read as * a settings dialog, not as the way into a membership. * * WHAT MAKES IT READ AS NOW, and none of it is decoration for its own sake: * - a full-bleed AURORA background, three offset radial fields that overlap * into colours none of them contain, rather than one flat fill * - real GRAIN over the top. Large smooth gradients band badly on cheap * phone panels; a fine noise layer breaks the banding up, and it is the * single cheapest thing that stops a gradient looking like a 2012 CSS demo * - a GLASS card, because there is now something behind it worth blurring * - display-scale type, generous space, and one confident button * * COLOUR. Plum and indigo carry the field; the brand red is the accent that * ties it back — a warm bloom bottom-right and the submit button. Gold appears * once, as a hairline over the card. That is the licence used as given: the * official colours still sign the screen, they just no longer have to paint all * of it. * * PERFORMANCE. The aurora, the grain and the glass are static paints — no * compositor work after first paint, which matters because this is the screen a * member meets on a cold start with an empty cache. The ONE looping animation in * this file is the three waiting dots on wait.php, and it is a transform, so it * stays on the compositor and never touches layout. * ══════════════════════════════════════════════════════════════════════════ */ .m-shell.is-auth { /* Its own world: no 520px card shell, no tab bar padding, no page background * inherited from the app. */ max-width: none; min-height: 100dvh; /* dvh, not vh — vh is wrong under a mobile URL bar */ padding: 0; background: none; /* ONE centring context, not two rows. * * This was `grid-template-rows: 1fr auto`, which centred the card inside row 1 * and then put the footer in row 2 BELOW it — so the card was centred against * the space left over, not against the page. With the footer at 58px that read * as 46px high; before the .m-top fix in layout.php it was 140px LOW, which is * what the owner saw and reported. Centring against the viewport is what he * asked for, so the footer is taken out of the flow instead of competing with * the card for vertical space. */ display: grid; place-items: center; position: relative; isolation: isolate; /* keeps the ::before/::after fields off the app */ overflow: hidden; } /* ── The aurora ─────────────────────────────────────────────────────────── * Three fields, deliberately larger than the viewport and centred outside it, * so a phone sees the INSIDE of each bloom rather than a visible circle edge. */ /* ── The moving aurora ──────────────────────────────────────────────────── * The owner asked for this background to be alive — "background dia bergerak2", * pretty rather than a static image. He was explicit that the page is otherwise * "dah modern", so this is motion added to a finished design, not a redesign. * * TWO LAYERS, AND THE SPLIT IS THE WHOLE TRICK. The base wash now lives on the * shell itself; ::before carries ONLY the three blooms and is oversized by 30% * on every side. Animating a transform on an `inset: 0` layer drags its edges * inward and shows a hard line where the paint runs out — the oversize is what * gives the motion room to happen off-screen. * * TRANSFORM ONLY, and the resting state is the correct one. A past version of * this codebase shipped a splash that stayed invisible forever because its * entrance animation never fired, so nothing here may depend on an animation * running: with motion off this is exactly the static aurora it was before. * * The three fields sit on ONE layer, so one transform moves them together. That * still reads as alive rather than as a sliding sheet, because they are placed * asymmetrically (12%/-8%, 108%/8%, 78%/112%) — a slow rotation sweeps them * across the viewport at different rates and none of the three edges is ever * visible. Keyframing the radial-gradient colour stops instead was rejected: * most browsers cannot interpolate them and it repaints the whole layer. * * 48s, and deliberately slow enough to be noticed only if you look for it. A * sign-in screen that visibly churns reads as a loading state. */ .m-shell.is-auth { background: linear-gradient(168deg, #1A1130 0%, #140E24 48%, #0E0A19 100%); } .m-shell.is-auth::before { content: ""; position: absolute; inset: -30%; z-index: -2; will-change: transform; background: radial-gradient(115% 85% at 12% -8%, #4C1D5B 0%, transparent 62%), radial-gradient(95% 70% at 108% 8%, #1E2A6B 0%, transparent 58%), radial-gradient(120% 90% at 78% 112%, #B3241C 0%, transparent 60%); } @media (prefers-reduced-motion: no-preference) { .m-shell.is-auth::before { animation: mAuroraDrift 48s cubic-bezier(.45,0,.55,1) infinite; } } /* Returns to its exact start, so the loop has no visible seam. Scale stays * above 1 throughout: dipping below it would pull the oversized layer back * toward the viewport edge and risk exposing the corner it exists to hide. */ @keyframes mAuroraDrift { 0% { transform: rotate(0deg) translate3d(0, 0, 0) scale(1.04) } 25% { transform: rotate(2.2deg) translate3d(-2.5%, 1.5%, 0) scale(1.09) } 50% { transform: rotate(0.4deg) translate3d(2%, -2%, 0) scale(1.06) } 75% { transform: rotate(-1.8deg) translate3d(1.5%, 2.5%, 0) scale(1.10) } 100% { transform: rotate(0deg) translate3d(0, 0, 0) scale(1.04) } } /* ── The grain ──────────────────────────────────────────────────────────── * feTurbulence in a data URI, so it costs one paint and zero requests, and it * still works with no network at all — which matters, because this is the * screen a member reaches before anything else has loaded. */ .m-shell.is-auth::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ── Layout ───────────────────────────────────────────────────────────────── */ .m-auth { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 32px 20px 20px; max-width: 440px; margin-inline: auto; width: 100%; } .m-auth-brand { display: flex; align-items: center; gap: 11px; } .m-auth-h { margin: 6px 0 0; font-family: var(--fd); /* Display scale, and it FITS: clamp keeps it off two lines on a 320px phone * without needing a media query. */ font-size: clamp(26px, 8vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: #fff; text-wrap: balance; } .m-auth-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: rgb(255 255 255 / .66); max-width: 34ch; text-wrap: pretty; } /* ── The glass card ─────────────────────────────────────────────────────── * The translucent background is the FALLBACK and must stay readable on its * own: where backdrop-filter is unsupported the card still has to be a card, * not a faint smear over an aurora. */ .m-authcard { position: relative; margin-top: 6px; padding: 20px 18px 18px; border-radius: 24px; background: rgb(255 255 255 / .10); border: 1px solid rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 20px 44px -20px rgb(0 0 0 / .65); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .m-authcard { background: rgb(255 255 255 / .07); -webkit-backdrop-filter: saturate(150%) blur(22px); backdrop-filter: saturate(150%) blur(22px); } } /* The one gold moment on the screen: a hairline along the top edge, brightest * in the middle, which is what reads as light catching a real surface. */ .m-authcard::before { content: ""; position: absolute; inset-inline: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--wood), transparent); } /* ── Fields ───────────────────────────────────────────────────────────────── */ .m-auth-label { display: block; margin: 12px 0 6px; font-family: var(--fd); font-size: 12px; font-weight: 600; color: rgb(255 255 255 / .70); } .m-auth-label:first-of-type { margin-top: 0; } .m-auth-in { width: 100%; max-width: 100%; min-width: 0; /* a