/* ========================================================================== Auth launch ("al") — the one-time opening scene of the redesigned portal, played over the LOGIN page before the employee signs in. A cinematic curtain in the brand scene's own night palette: identity first (same logo, same portal name, in the same corner the scene keeps them), then the previous interface recedes — muted, blurred, crossed out — while the new workspace arrives lit from behind, then one headline, one sentence, four benefits and a single "continue" action with a slim auto-advance bar. When it resolves, the login page underneath is exactly the one everybody knows. Rides the --au tokens from auth.css (the auth pages carry their own palette, light and dark alike), spacing is logical for RTL, and every animation starts FROM its keyframes so the resting CSS is the finished composition — prefers-reduced-motion simply switches the choreography off and keeps only the progress bar. Markup: templates/partials/auth_launch.html · behaviour: static/js/auth-launch.js ========================================================================== */ /* -------------------------------------------------------------------------- Layer Visible only while — set by auth-launch.js in before first paint (first visit / preview), never for a browser that has already seen this version, never without JS. The flag stays on until the fade has finished (.is-leaving is a belt-and-braces guard so the curtain can never blink out mid-fade). -------------------------------------------------------------------------- */ .al { --al-dir: 1; /* flips the story's direction for RTL */ --al-fg: #eaf4f6; --al-fg-2: rgba(234, 244, 246, 0.78); --al-fg-3: rgba(234, 244, 246, 0.6); --al-hold: 3.6s; /* auto-advance: bar fill time */ --al-hold-delay: 3.3s; /* … starting once the copy has settled */ position: fixed; inset: 0; z-index: 1085; display: none; overflow: auto; overscroll-behavior: contain; background: radial-gradient( 1200px 800px at 85% 110%, rgba(68, 180, 180, 0.22), transparent 60% ), linear-gradient( 160deg, var(--au-night, #081727) 10%, var(--au-night-2, #0c2438) 55%, #0d3a46 100% ); color: var(--al-fg); } html.al-pending .al, .al.is-leaving { display: block; } html[dir="rtl"] .al { --al-dir: -1; } /* the page beneath holds still while the curtain is up */ html.al-pending, html.al-pending body { overflow: hidden; } .al.is-leaving { pointer-events: none; animation: alLift 0.6s ease both; } @keyframes alLift { to { opacity: 0; transform: scale(1.02); } } /* the login card re-enters as the curtain lifts — the hand-off into the familiar page (auth.css already animates it once at load, under the curtain; this restarts the same rise with a different name) */ html.al-done .au-card { animation: alReveal 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes alReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Sky — aurora + grain, the scene's own recipe (auth.css .au-scene) Fixed so it never scrolls with the content on short phones. -------------------------------------------------------------------------- */ .al-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .al-sky__aurora { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.38; } .al-sky__aurora--a { width: 560px; height: 560px; inset-inline-start: -160px; top: -180px; background: radial-gradient( circle, rgba(68, 180, 180, 0.55), transparent 65% ); animation: alDrift1 16s ease-in-out infinite alternate; } .al-sky__aurora--b { width: 480px; height: 480px; inset-inline-end: -140px; bottom: -160px; background: radial-gradient(circle, rgba(152, 0, 101, 0.4), transparent 65%); animation: alDrift2 20s ease-in-out infinite alternate; } @keyframes alDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.15); } } @keyframes alDrift2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-50px, -30px, 0) scale(1.12); } } .al-sky__grain { position: absolute; inset: 0; display: block; opacity: 0.05; 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Panel — top (identity · skip) then body (copy · stage) Same padding as .au-scene, so the logo sits exactly where the scene will keep it once the curtain lifts. -------------------------------------------------------------------------- */ .al-panel { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.5rem, 4vw, 3.2rem); outline: none; } .al-top { display: flex; align-items: center; gap: 1rem; animation: alUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both; } .al-logo { flex: 0 0 auto; } .al-brand { flex: 1 1 auto; min-width: 0; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; color: var(--al-fg-2); } html[dir="rtl"] .al-brand { letter-spacing: 0; } /* skip — a quiet glass pill, available from the very first frame */ .al-skip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem; margin-inline-start: auto; padding: 0.5rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(8, 23, 39, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--al-fg-2); font-size: 0.76rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .al-skip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; } .al-skip:focus-visible { outline: 2px solid var(--au-teal-bright, #44b4b4); outline-offset: 2px; } .al-skip i { font-size: 0.8rem; } .al-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); width: min(1140px, 100%); margin: auto; padding-block: clamp(1.5rem, 4vh, 3rem); } /* -------------------------------------------------------------------------- Copy — the words, kept few, arriving in sequence once the stage has made its point -------------------------------------------------------------------------- */ .al-copy { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .al-copy > * { animation: alUp 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .al-copy > :nth-child(1) { animation-delay: 2.05s; } /* eyebrow */ .al-copy > :nth-child(2) { animation-delay: 2.2s; } /* title */ .al-copy > :nth-child(3) { animation-delay: 2.4s; } /* lead */ .al-copy > :nth-child(4) { animation-delay: 2.4s; } /* sr text */ .al-copy > :nth-child(5) { animation-delay: 2.6s; } /* benefits */ .al-copy > :nth-child(6) { animation-delay: 2.9s; } /* actions */ .al-copy > :nth-child(7) { animation-delay: 3.05s; } /* note */ @keyframes alUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .al-eyebrow { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--au-teal-bright, #44b4b4); } .al-title { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; color: #f2f9fa; text-wrap: balance; } html[dir="rtl"] .al-eyebrow, html[dir="rtl"] .al-title { letter-spacing: 0; } html[dir="rtl"] .al-eyebrow { font-size: 0.78rem; } html[dir="rtl"] .al-title { font-weight: 400; line-height: 1.35; } .al-lead { margin: 0; max-width: 48ch; font-size: 0.95rem; line-height: 1.65; color: var(--al-fg-2); } /* screen-reader-only line (the auth pages don't always ship bootstrap's utility) */ .al-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* four benefits — glass chips like the scene's floating objects */ .al-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.75rem; margin: 0.15rem 0 0; padding: 0; list-style: none; } .al-benefits li { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.5rem 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--al-fg); } .al-benefits i { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(68, 180, 180, 0.16); color: var(--au-teal-bright, #44b4b4); font-size: 0.95rem; } /* the one action + the auto-advance bar */ .al-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 0.4rem; } /* .au-btn gives the exact login-button identity; the intro only sizes it */ .al-cta { width: auto; min-width: 240px; margin-top: 0; padding-inline: 1.5rem; } .al-timer { position: relative; display: block; width: 240px; max-width: 100%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; } .al-timer i { position: absolute; inset: 0; display: block; border-radius: inherit; background: linear-gradient( 90deg, var(--au-teal-bright, #44b4b4), var(--au-teal, #2a9d9d) ); transform-origin: 0 50%; transform: scaleX(0); animation: alTimer var(--al-hold) linear var(--al-hold-delay) both; } html[dir="rtl"] .al-timer i { transform-origin: 100% 50%; } /* auth-launch.js pauses the countdown while the employee is reading (pointer over the copy, keyboard focus on a control) or the tab is hidden */ .al.is-paused .al-timer i { animation-play-state: paused; } @keyframes alTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } } .al-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--al-fg-3); } .al-note i { flex: 0 0 auto; margin-top: 0.1em; color: var(--au-teal-bright, #44b4b4); } /* arrows point into the page flow, so they mirror in Arabic */ html[dir="rtl"] .al-arrow { transform: scaleX(-1); } /* -------------------------------------------------------------------------- Stage — the "old → new" story on a fixed-proportion canvas -------------------------------------------------------------------------- */ .al-stage { display: flex; align-items: center; justify-content: center; min-width: 0; } .al-scene { position: relative; width: 100%; max-width: 540px; aspect-ratio: 5 / 4; container-type: inline-size; } /* --- the previous interface: appears whole, then recedes to the back — muted, blurred, crossed out ------------------------------------------ */ .al-old { position: absolute; top: 8%; inset-inline-start: 0; width: 58%; z-index: 1; transform: translate(calc(-2% * var(--al-dir)), -3%) scale(0.92); animation: alOldIn 0.55s ease 0.25s both, alRecede 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.05s both; } @keyframes alOldIn { from { opacity: 0; } to { opacity: 1; } } @keyframes alRecede { from { transform: translate(calc(8% * var(--al-dir)), 8%) scale(1); } } .al-old .al-mock { filter: grayscale(0.85) contrast(0.94) blur(0.6px); opacity: 0.62; animation: alFadeBack 0.9s ease 1.15s both; } @keyframes alFadeBack { from { filter: grayscale(0) contrast(1) blur(0); opacity: 1; } } /* the X — two thin strokes drawn on, never a stamp */ .al-old__x { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .al-old__x path { fill: none; stroke: rgba(234, 244, 246, 0.85); stroke-width: 2.25; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; animation: alDraw 0.45s ease-out both; } .al-old__x path:nth-child(1) { animation-delay: 1.65s; } .al-old__x path:nth-child(2) { animation-delay: 1.85s; } /* the strokes stay fully transparent until their turn — Chrome otherwise paints a faint ghost of the un-drawn dash on a non-uniformly scaled path */ @keyframes alDraw { from { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } } /* --- the new workspace: in front, crisp, lit from behind ------------------ */ .al-new { position: absolute; bottom: 0; inset-inline-end: 0; width: 66%; z-index: 2; animation: alArrive 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s both; } @keyframes alArrive { from { opacity: 0; transform: translate(calc(5% * var(--al-dir)), 7%) scale(0.96); } } /* the light behind the arrival */ .al-new::before { content: ""; position: absolute; inset: -16% -14%; z-index: -1; border-radius: 45%; background: radial-gradient( closest-side, rgba(68, 180, 180, 0.5), transparent 72% ); filter: blur(16px); pointer-events: none; } /* hand-off chip at the seam between the two */ .al-hand { position: absolute; z-index: 3; top: 43.5%; inset-inline-start: 34%; translate: calc(-50% * var(--al-dir)) -50%; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--au-surface, #fff); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6); color: var(--au-teal-deep, #14787a); font-size: 1.05rem; animation: alPop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 2.15s both; } html[dir="rtl"] .al-hand i { transform: scaleX(-1); } @keyframes alPop { from { opacity: 0; scale: 0.5; } } /* labels — "Previous design" (muted glass) · "New design" (teal) */ .al-tag { position: absolute; z-index: 4; top: 0; translate: 0 -55%; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; } html[dir="rtl"] .al-tag { letter-spacing: 0; font-size: 0.68rem; } .al-tag--old { inset-inline-start: 0.6rem; background: rgba(8, 23, 39, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--al-fg-2); } .al-tag--old i { font-size: 0.7rem; } .al-tag--new { inset-inline-end: 0.6rem; background: linear-gradient( 135deg, var(--au-teal-btn, #1a8384), var(--au-teal-deep, #14787a) ); color: #fff; box-shadow: 0 10px 20px -12px rgba(20, 120, 122, 0.9); } .al-tag--new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; } /* -------------------------------------------------------------------------- Mock-ups — abstract UI, no invented data. Sized in em so one font-size (a fraction of the scene's width) scales the whole drawing. -------------------------------------------------------------------------- */ .al-mock { position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden; font-size: 8px; font-size: 2.05cqw; } .al-mock i, .al-mock span { display: block; min-width: 0; } /* --- old: opaque bar, flat white sidebar with a magenta active item, square cards, red outline button, teal-headed table ------------------ */ .al-mock--old { display: flex; flex-direction: column; aspect-ratio: 4 / 3; border-radius: 0.5em; background: var(--au-surface-2, #f4f7f9); border: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); box-shadow: 0 1px 3px rgba(13, 35, 63, 0.12); } .al-om__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6em; height: 3.2em; padding: 0 1.1em; background: var(--au-surface, #fff); border-bottom: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); } .al-om__brand { width: 5.6em; height: 1.3em; border-radius: 0.2em; background: var(--au-ink-3, #8291a6); opacity: 0.55; } .al-om__sp, .al-nm__sp { flex: 1 1 auto; } .al-om__ico { width: 1.1em; height: 1.1em; border-radius: 0.2em; background: var(--au-ink-3, #8291a6); opacity: 0.45; } .al-om__ico--user { width: 1.7em; height: 1.7em; border-radius: 50%; opacity: 0.6; } .al-om__body { flex: 1 1 auto; display: flex; min-height: 0; } .al-om__side { flex: 0 0 8.4em; display: flex; flex-direction: column; gap: 0.55em; padding: 0.9em 0.7em; background: var(--au-surface, #fff); border-inline-end: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); } .al-om__side span { height: 1.5em; border-radius: 0.2em; background: var(--au-surface-3, #eaeff3); } .al-om__side span.is-active { background: var(--au-plum, #980065); opacity: 0.85; } .al-om__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.7em; padding: 0.9em; } .al-om__card { padding: 0.8em 0.9em; background: var(--au-surface, #fff); border: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); border-inline-start: 3px solid var(--au-teal, #2a9d9d); border-radius: 0.25em; } .al-om__row { display: flex; align-items: center; gap: 0.7em; } .al-om__avatar { flex: 0 0 auto; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--au-surface-3, #eaeff3); } .al-om__line { height: 1em; border-radius: 0.2em; background: var(--au-ink-3, #8291a6); opacity: 0.55; } .al-om__line--title { width: 9em; } .al-om__pill { flex: 0 0 auto; margin-inline-start: auto; width: 6em; height: 1.9em; border-radius: 999px; border: 1px solid var(--au-danger, #b3253a); opacity: 0.75; } .al-om__grid { display: grid; grid-template-columns: 3em 1fr 3em 1fr; gap: 0.55em 0.8em; margin-top: 0.8em; padding-top: 0.75em; border-top: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); } .al-om__grid span { height: 0.75em; border-radius: 0.15em; background: var(--au-surface-3, #eaeff3); } .al-om__grid span:nth-child(odd) { background: var(--au-ink-3, #8291a6); opacity: 0.5; } .al-om__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; } .al-om__stats span { position: relative; height: 3.4em; background: var(--au-surface, #fff); border: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); border-radius: 0.25em; } .al-om__stats span::before { content: ""; position: absolute; top: 0.6em; inset-inline-start: 0.6em; width: 1.1em; height: 1.1em; border-radius: 0.15em; background: var(--au-teal, #2a9d9d); } .al-om__stats span::after { content: ""; position: absolute; bottom: 0.7em; inset-inline-start: 0.6em; width: 55%; height: 0.6em; background: var(--au-surface-3, #eaeff3); } .al-om__table { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--au-surface, #fff); border: 1px solid var(--au-border-strong, rgba(13, 35, 63, 0.2)); border-radius: 0.25em; overflow: hidden; } .al-om__th { flex: 0 0 auto; height: 1.7em; background: var(--au-teal, #2a9d9d); } .al-om__table span:not(.al-om__th) { position: relative; flex: 1 1 auto; border-top: 1px solid var(--au-border, rgba(13, 35, 63, 0.1)); } .al-om__table span:not(.al-om__th)::before, .al-om__table span:not(.al-om__th)::after { content: ""; position: absolute; top: 50%; height: 0.55em; translate: 0 -50%; border-radius: 0.15em; background: var(--au-surface-3, #eaeff3); } .al-om__table span:not(.al-om__th)::before { inset-inline-start: 0.8em; width: 28%; } .al-om__table span:not(.al-om__th)::after { inset-inline-start: 46%; width: 22%; } /* --- new: soft sidebar with a teal rail, floating glass bar, masthead with orbit rings, services dock, bento tiles ------------------------ */ .al-mock--new { display: grid; grid-template-columns: 8.6em minmax(0, 1fr); border-radius: 1.5em; background: var(--au-surface-2, #f4f7f9); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(8, 24, 57, 0.12); } .al-nm__side { display: flex; flex-direction: column; gap: 0.55em; padding: 1.1em 0.8em; background: var(--au-surface, #fff); border-inline-end: 1px solid var(--au-border, rgba(13, 35, 63, 0.1)); } .al-nm__logo { position: relative; width: 3.4em; height: 1.5em; margin: 0 0.2em 0.7em; border-radius: 0.45em; background: linear-gradient( 135deg, var(--au-teal, #2a9d9d), var(--au-teal-deep, #14787a) ); } .al-nm__logo::after { content: ""; position: absolute; top: -0.25em; inset-inline-end: -0.25em; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--au-plum, #980065); box-shadow: 0 0 0 0.2em var(--au-surface, #fff); } .al-nm__link { position: relative; height: 1.55em; border-radius: 0.55em; background: var(--au-surface-3, #eaeff3); } .al-nm__link.is-active { background: var(--au-teal-soft, rgba(68, 180, 180, 0.12)); } .al-nm__link.is-active::before { content: ""; position: absolute; top: 20%; bottom: 20%; inset-inline-start: -0.8em; width: 0.25em; border-radius: 999px; background: var(--au-teal, #2a9d9d); } .al-nm__link.is-active::after { content: ""; position: absolute; top: 30%; bottom: 30%; inset-inline-start: 0.6em; width: 55%; border-radius: 999px; background: var(--au-teal-deep, #14787a); opacity: 0.55; } .al-nm__main { display: flex; flex-direction: column; gap: 0.75em; min-width: 0; padding: 0.9em 1em 1em; } .al-nm__bar { display: flex; align-items: center; gap: 0.5em; height: 2.7em; padding: 0 0.8em; border-radius: 1em; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--au-border, rgba(13, 35, 63, 0.1)); box-shadow: 0 6px 16px -10px rgba(13, 35, 63, 0.3); } .al-nm__title { width: 6em; height: 0.9em; border-radius: 999px; background: var(--au-ink, #0d1f38); opacity: 0.75; } .al-nm__ico { width: 1.3em; height: 1.3em; border-radius: 0.45em; background: var(--au-surface-3, #eaeff3); } .al-nm__user { width: 1.6em; height: 1.6em; border-radius: 0.55em; background: linear-gradient( 135deg, var(--au-teal-soft, rgba(68, 180, 180, 0.12)), var(--au-teal, #2a9d9d) ); } .al-nm__mast { position: relative; display: flex; align-items: center; gap: 0.8em; padding: 1em 1.1em; overflow: hidden; border-radius: 1.1em; border: 1px solid var(--au-border, rgba(13, 35, 63, 0.1)); background: radial-gradient(60% 140% at 0% -40%, rgba(68, 180, 180, 0.18), transparent 65%), linear-gradient(180deg, var(--au-surface-2, #f4f7f9), var(--au-surface, #fff)); } /* the masthead's orbit rings, in miniature */ .al-nm__mast::after { content: ""; position: absolute; top: -6.5em; inset-inline-end: -4.5em; width: 12em; height: 12em; border-radius: 50%; border: 1px solid rgba(68, 180, 180, 0.3); box-shadow: 0 0 0 1.4em rgba(68, 180, 180, 0.05), 0 0 0 1.5em rgba(68, 180, 180, 0.16); } .al-nm__avatar { flex: 0 0 auto; width: 3em; height: 3em; border-radius: 1em; background: linear-gradient( 145deg, var(--au-teal, #2a9d9d), var(--au-teal-deep, #14787a) ); box-shadow: 0 0 0 0.3em rgba(255, 255, 255, 0.55); } .al-mock .al-nm__who { display: flex; flex-direction: column; gap: 0.55em; flex: 1 1 auto; min-width: 0; } .al-nm__who span { height: 0.95em; border-radius: 999px; background: var(--au-ink, #0d1f38); opacity: 0.78; width: 62%; } .al-nm__who span + span { height: 0.7em; width: 44%; background: var(--au-ink-3, #8291a6); opacity: 0.6; } .al-nm__dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55em; } .al-nm__dock span { display: grid; place-items: center; height: 2.7em; border-radius: 0.8em; background: var(--au-surface, #fff); border: 1px solid var(--au-border, rgba(13, 35, 63, 0.1)); color: var(--au-teal-deep, #14787a); font-size: 1em; } .al-nm__dock i { font-size: 1.15em; line-height: 1; } .al-nm__bento { flex: 1 1 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.7em; min-height: 0; } .al-nm__tile { position: relative; min-height: 5em; border-radius: 1em; background: var(--au-surface, #fff); border: 1px solid var(--au-border, rgba(13, 35, 63, 0.1)); overflow: hidden; } .al-mock .al-nm__tile--bars { display: flex; align-items: flex-end; gap: 0.5em; padding: 1em 0.9em 0.8em; } .al-nm__tile--bars i { flex: 1 1 0; border-radius: 0.35em 0.35em 0.12em 0.12em; background: var(--au-teal-soft, rgba(68, 180, 180, 0.12)); height: 45%; } .al-nm__tile--bars i:nth-child(2) { height: 70%; } .al-nm__tile--bars i:nth-child(3) { height: 55%; background: var(--au-teal, #2a9d9d); opacity: 0.85; } .al-nm__tile--bars i:nth-child(4) { height: 88%; } .al-nm__tile--bars i:nth-child(5) { height: 62%; } .al-mock .al-nm__tile--feed { display: flex; flex-direction: column; justify-content: center; gap: 0.7em; padding: 0.9em; } .al-nm__tile--feed i { position: relative; height: 0.7em; border-radius: 999px; background: var(--au-surface-3, #eaeff3); margin-inline-start: 1.2em; } .al-nm__tile--feed i::before { content: ""; position: absolute; top: 50%; inset-inline-start: -1.2em; width: 0.7em; height: 0.7em; translate: 0 -50%; border-radius: 50%; background: var(--au-teal, #2a9d9d); opacity: 0.75; } .al-nm__tile--feed i:nth-child(2) { width: 78%; } .al-nm__tile--feed i:nth-child(2)::before { background: var(--au-plum, #980065); } .al-nm__tile--feed i:nth-child(3) { width: 62%; } /* -------------------------------------------------------------------------- Responsive — three compositions, not one scaled scene desktop ≥ 992: copy · stage side by side (stage on the end side, where the login panel will appear once the curtain lifts) tablet 640–991: stage above centred copy phone < 640: identity strip, compact stage, message, one full-width action -------------------------------------------------------------------------- */ @media (min-width: 1400px) { .al-scene { max-width: 580px; } } @media (max-width: 991.98px) { .al-body { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: clamp(1.5rem, 4vw, 2.5rem); width: min(640px, 100%); text-align: center; } .al-stage { order: -1; width: 100%; } .al-scene { max-width: 440px; } .al-copy { align-items: center; width: 100%; } .al-lead { max-width: 56ch; } .al-benefits { width: 100%; max-width: 520px; text-align: start; } .al-actions { align-items: center; width: 100%; } .al-note { justify-content: center; text-align: start; } } @media (max-width: 639.98px) { .al-panel { padding: 1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); } .al-top { gap: 0.75rem; } .al-logo { padding: 0.4rem 0.6rem; border-radius: 12px; } .al-logo img { height: 32px; } .al-brand { font-size: 0.72rem; } .al-skip { padding: 0.45rem 0.75rem; font-size: 0.72rem; } .al-body { gap: 1.25rem; padding-block: 1.25rem 0.5rem; } /* a wider, shorter canvas: the two mock-ups still hand off diagonally but identity, message and action all stay on the first screen */ .al-scene { max-width: 320px; aspect-ratio: 3 / 2; } .al-old { top: 6%; width: 52%; } .al-new { width: 60%; } .al-hand { top: 39%; inset-inline-start: 40%; width: 2rem; height: 2rem; font-size: 0.95rem; } .al-tag { font-size: 0.58rem; padding: 0.26rem 0.55rem; } html[dir="rtl"] .al-tag { font-size: 0.64rem; } .al-copy { gap: 0.8rem; } .al-eyebrow { font-size: 0.6rem; } .al-title { font-size: 1.6rem; } .al-lead { font-size: 0.86rem; line-height: 1.55; } /* the headline + sentence carry the message; the chips would only push the sign-in action below the fold */ .al-benefits { display: none; } .al-actions { margin-top: 0.2rem; } .al-cta { width: 100%; min-width: 0; min-height: 48px; } .al-timer { width: 160px; } .al-note { font-size: 0.74rem; } } /* very narrow phones: the logo chip carries the identity on its own — the wordmark would wrap into a four-line stack beside it */ @media (max-width: 419.98px) { .al-brand { display: none; } } /* short phones: keep the whole story on one screen */ @media (max-width: 639.98px) and (max-height: 700px) { .al-scene { max-width: 260px; } .al-body { gap: 1rem; padding-block: 0.9rem 0.25rem; } .al-copy { gap: 0.65rem; } .al-title { font-size: 1.45rem; } .al-lead { font-size: 0.82rem; } } /* -------------------------------------------------------------------------- Reduced motion — the finished composition, no choreography; only the auto-advance bar keeps moving because it is information, not decoration -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .al.is-leaving, .al-sky__aurora, .al-top, .al-copy > *, .al-old, .al-old .al-mock, .al-old__x path, .al-new, .al-hand, html.al-done .au-card { animation: none; } .al.is-leaving { opacity: 0; } .al-skip, .al-cta, .al-cta .au-btn__arrow { transition: none; } }